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
================ PC HAUT/IPAD
@media(min-width:500px){}
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1000px){}
@media(min-width:1300px){}
*/
#mainContainer{
@@ -31,7 +31,7 @@
justify-content: flex-start;
}
/*================ PC LARGE*/
@media(min-width:1000px){
@media(min-width:1300px){
#mainContainer{
flex-direction: row;
height:100%;
v1-com-officielle/src/assets/style.css
+11 -2
View File
@@ -43,6 +43,12 @@ input {
a{
text-decoration: none;
color: inherit;
cursor: pointer;
}
a p{
cursor:inherit;
}
p{
@@ -53,7 +59,7 @@ p{
.referenceText{
position:absolute;
z-index: -33;
color: var(--dark-color);
color: var(--back-color);
}
/*=============Body & background*/
@@ -61,7 +67,7 @@ html, body{
margin: 0;
padding: 0;
position: absolute;
background-color: var(--dark-color);
background-color: var(--back-color);
width: 100%;
height:100%;
position: fixed;
@@ -111,6 +117,7 @@ canvas {
width:100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
@@ -122,6 +129,8 @@ canvas {
border-color: var(--main-color);
border-width: thin;
border-radius: 0;
position: relative;
z-index: 0;
}
.icon{
v1-com-officielle/src/components/InfoContent.vue
+3 -3
View File
@@ -14,9 +14,9 @@
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:500px){}
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1000px){}
@media(min-width:1300px){}
*/
#infoContainer{
@@ -30,7 +30,7 @@
justify-content: flex-start;
}
/*================ PC LARGE*/
@media(min-width:1000px){
@media(min-width:1300px){
#infoContainer{
height: 100%;
width: 33.3%;
v1-com-officielle/src/components/TitleContent.vue
+3 -3
View File
@@ -15,9 +15,9 @@
/*+++++++++++++++++ COPYBOX
================ PC HAUT/IPAD
@media(min-width:500px){}
@media(min-width:650px){}
================ PC LARGE
@media(min-width:1000px){}
@media(min-width:1300px){}
*/
#titleContainer{
@@ -31,7 +31,7 @@
justify-content: flex-start;
}
/*================ PC LARGE*/
@media(min-width:1000px){
@media(min-width:1300px){
#titleContainer{
height:100%;
width:66.7%;
v1-com-officielle/src/infoComponents/InfoMenu.vue
+18 -4
View File
@@ -68,9 +68,9 @@
#btnColumn .iconBtnStyle{
width:100%;
height:16.1%;
height:20%;
margin-left: -13.12%;
margin-top: 33%;
margin-top: 19%;
}
#btnColumn .icon{
@@ -91,7 +91,7 @@
#welcomeText{
overflow-y: scroll;
height: 66.6%;
height: 73%;
font-size: 16.1px;
font-family: 'velvelyne';
color: var(--main-color);
@@ -105,8 +105,22 @@
width: 70%;
}
/*================ MID FORMAT*/
@media(min-width:500px){
#welcomeText{
height:75%;
}
#btnColumn .iconBtnStyle{
height:20%;
margin-left: 0;
margin-top: 7.77%;
}
}
/*================ PC LARGE*/
@media(min-width:1000px){
@media(min-width:1300px){
#welcomeText{
height:71%;
}
v1-com-officielle/src/titleComponents/TitleText.vue
+189 -1
View File
@@ -1,5 +1,34 @@
<template>
<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>
</template>
@@ -22,9 +51,168 @@
width:100%;
position:relative;
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*/
@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>
<script>