vgaNAR6ta/drags-and-nerds
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: contenu et structure de la section titre + réglages responsive global

Browse Source
This commit is contained in:
Vega
2026-03-20 00:22:23 +01:00
parent 23bc203a1b
commit bb0ac827bb
6 changed files with 227 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1-com-officielle/src/App.vue
+3 -3
View File
@@ -14,9 +14,9 @@
/*+++++++++++++++++ COPYBOX /*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD ================ PC HAUT/IPAD
@media(min-width:500px){} @media(min-width:650px){}
================ PC LARGE ================ PC LARGE
@media(min-width:1000px){} @media(min-width:1300px){}
*/ */
#mainContainer{ #mainContainer{
@@ -31,7 +31,7 @@
justify-content: flex-start; justify-content: flex-start;
} }
/*================ PC LARGE*/ /*================ PC LARGE*/
@media(min-width:1000px){ @media(min-width:1300px){
#mainContainer{ #mainContainer{
flex-direction: row; flex-direction: row;
height:100%; height:100%;
v1-com-officielle/src/assets/style.css
+11 -2
View File
@@ -43,6 +43,12 @@ input {
a{ a{
text-decoration: none; text-decoration: none;
color: inherit;
cursor: pointer;
}
a p{
cursor:inherit;
} }
p{ p{
@@ -53,7 +59,7 @@ p{
.referenceText{ .referenceText{
position:absolute; position:absolute;
z-index: -33; z-index: -33;
color: var(--dark-color); color: var(--back-color);
} }
/*=============Body & background*/ /*=============Body & background*/
@@ -61,7 +67,7 @@ html, body{
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
background-color: var(--dark-color); background-color: var(--back-color);
width: 100%; width: 100%;
height:100%; height:100%;
position: fixed; position: fixed;
@@ -111,6 +117,7 @@ canvas {
width:100%; width:100%;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden;
} }
@@ -122,6 +129,8 @@ canvas {
border-color: var(--main-color); border-color: var(--main-color);
border-width: thin; border-width: thin;
border-radius: 0; border-radius: 0;
position: relative;
z-index: 0;
} }
.icon{ .icon{
v1-com-officielle/src/components/InfoContent.vue
+3 -3
View File
@@ -14,9 +14,9 @@
/*+++++++++++++++++ COPYBOX /*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD ================ PC HAUT/IPAD
@media(min-width:500px){} @media(min-width:650px){}
================ PC LARGE ================ PC LARGE
@media(min-width:1000px){} @media(min-width:1300px){}
*/ */
#infoContainer{ #infoContainer{
@@ -30,7 +30,7 @@
justify-content: flex-start; justify-content: flex-start;
} }
/*================ PC LARGE*/ /*================ PC LARGE*/
@media(min-width:1000px){ @media(min-width:1300px){
#infoContainer{ #infoContainer{
height: 100%; height: 100%;
width: 33.3%; width: 33.3%;
v1-com-officielle/src/components/TitleContent.vue
+3 -3
View File
@@ -15,9 +15,9 @@
/*+++++++++++++++++ COPYBOX /*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD ================ PC HAUT/IPAD
@media(min-width:500px){} @media(min-width:650px){}
================ PC LARGE ================ PC LARGE
@media(min-width:1000px){} @media(min-width:1300px){}
*/ */
#titleContainer{ #titleContainer{
@@ -31,7 +31,7 @@
justify-content: flex-start; justify-content: flex-start;
} }
/*================ PC LARGE*/ /*================ PC LARGE*/
@media(min-width:1000px){ @media(min-width:1300px){
#titleContainer{ #titleContainer{
height:100%; height:100%;
width:66.7%; width:66.7%;
v1-com-officielle/src/infoComponents/InfoMenu.vue
+18 -4
View File
@@ -68,9 +68,9 @@
#btnColumn .iconBtnStyle{ #btnColumn .iconBtnStyle{
width:100%; width:100%;
height:16.1%; height:20%;
margin-left: -13.12%; margin-left: -13.12%;
margin-top: 33%; margin-top: 19%;
} }
#btnColumn .icon{ #btnColumn .icon{
@@ -91,7 +91,7 @@
#welcomeText{ #welcomeText{
overflow-y: scroll; overflow-y: scroll;
height: 66.6%; height: 73%;
font-size: 16.1px; font-size: 16.1px;
font-family: 'velvelyne'; font-family: 'velvelyne';
color: var(--main-color); color: var(--main-color);
@@ -105,8 +105,22 @@
width: 70%; width: 70%;
} }
/*================ MID FORMAT*/
@media(min-width:500px){
#welcomeText{
height:75%;
}
#btnColumn .iconBtnStyle{
height:20%;
margin-left: 0;
margin-top: 7.77%;
}
}
/*================ PC LARGE*/ /*================ PC LARGE*/
@media(min-width:1000px){ @media(min-width:1300px){
#welcomeText{ #welcomeText{
height:71%; height:71%;
} }
v1-com-officielle/src/titleComponents/TitleText.vue
+189 -1
View File
@@ -1,5 +1,34 @@
<template> <template>
<div id="titleTextContainer" class="uiStyle"> <div id="titleTextContainer" class="uiStyle">
<div id="mainTitleContainer">
<div class="titleTextStyle" id="drag">
<p><strong>DRAGs</strong></p>
<p>AND</p>
</div>
<div class="titleTextStyle" id="nerd">
<p><strong>NERDs</strong></p>
<p>#</p>
<p id="numberTwo"></p>
</div>
<div class="subtitleTextStyle">
<p>Drag shows, musique électronique, synthés vidéos et autre performances nerds</p>
</div>
<div id="infoContainer">
<div class="subtitleTextStyle">
<time datetime="2026-05-22" id="timeInfo">
<p><strong>22 Mai</strong></p>
<p>2026</p>
</time>
</div>
<div id="placeInfo" class="subtitleTextStyle">
<a href="https://grrrndzero.org/" target="_blank">
<p><strong>Grrrnd Zero</strong></p>
<p>60 Avenue de Bohlen</p>
<p>69110 Vaux-en-Velin</p>
</a>
</div>
</div>
</div>
</div> </div>
</template> </template>
@@ -22,9 +51,168 @@
width:100%; width:100%;
position:relative; position:relative;
height:20%; height:20%;
z-index: 3;
}
#mainTitleContainer{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
}
.titleTextStyle{
position: absolute;
background-color: var(--back-color);
width: 85%;
height: 27px;
padding-bottom: 16.1px;
padding-left: 7.77%;
font-family: 'lineal';
font-size: 20px;
display: flex;
flex-direction: row;
align-items: center;
z-index: 1;
}
#drag{
margin-top: -100px;
margin-left: 33px;
}
#nerd{
margin-top: -50px;
margin-left: -77px;
justify-content: flex-start;
}
.titleTextStyle strong{
font-family: 'pressStart2P';
font-size: 50px;
}
.subtitleTextStyle{
width: 100%;
text-align: left;
font-family: 'velvelyne';
font-weight: bold;
color: var(--main-color);
font-size: 16.1px;
margin-top: 7.77px;
}
.subtitleTextStyle strong{
font-family: 'lineal';
font-size: 23px;
font-weight: normal;
}
.subtitleTextStyle p{
margin: 0;
padding: 0;
margin-left: 16.1px;
margin-right: 16.1px;
}
#infoContainer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width:100%;
height:50%;
}
#infoContainer div{
width:50%;
height:100%;
padding:0;
}
#timeInfo{
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
#placeInfo{
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
}
/*================ MID FORMAT*/
@media(min-width:650px){
.titleTextStyle{
width: 77%;
height: 50px;
padding-bottom: 16.1px;
padding-left: 33px;
font-size: 20px;
}
#drag{
margin-top: -155px;
margin-left: 217px;
}
#nerd{
margin-top: -77px;
margin-left: 0;
}
.titleTextStyle strong{
font-size: 77px;
}
.subtitleTextStyle{
font-size: 16.1px;
margin-top: 13.12px;
}
.subtitleTextStyle strong{
font-size: 33px;
line-height: 1em;
}
.subtitleTextStyle p{
margin: 0;
padding: 0;
margin-left: 16.1px;
margin-right: 16.1px;
}
} }
/*================ PC LARGE*/ /*================ PC LARGE*/
@media(min-width:1000px){} @media(min-width:1300px){
.titleTextStyle{
width: 60%;
height: 50px;
padding-bottom: 16.1px;
padding-left: 33px;
font-size: 33px;
}
#drag{
margin-top: -150px;
margin-left: 75px;
}
#nerd{
margin-top: -75px;
margin-left: -75px;
justify-content: space-between;
}
.titleTextStyle strong{
font-size: 77px;
}
.subtitleTextStyle{
font-size: 20px;
margin-top: 13.12px;
}
.subtitleTextStyle strong{
font-size: 33px;
line-height: 1em;
}
.subtitleTextStyle p{
margin: 0;
padding: 0;
margin-left: 16.1px;
margin-right: 16.1px;
}
}
</style> </style>
<script> <script>