From bb0ac827bb5806520e7a77d7ed34bcce33058b2f Mon Sep 17 00:00:00 2001 From: vgaNAR6ta Date: Fri, 20 Mar 2026 00:22:23 +0100 Subject: [PATCH] =?UTF-8?q?edit:=20contenu=20et=20structure=20de=20la=20se?= =?UTF-8?q?ction=20titre=20+=20r=C3=A9glages=20responsive=20global?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- v1-com-officielle/src/App.vue | 6 +- v1-com-officielle/src/assets/style.css | 13 +- .../src/components/InfoContent.vue | 6 +- .../src/components/TitleContent.vue | 6 +- .../src/infoComponents/InfoMenu.vue | 22 +- .../src/titleComponents/TitleText.vue | 190 +++++++++++++++++- 6 files changed, 227 insertions(+), 16 deletions(-) diff --git a/v1-com-officielle/src/App.vue b/v1-com-officielle/src/App.vue index bbfa2a8..7ab3389 100644 --- a/v1-com-officielle/src/App.vue +++ b/v1-com-officielle/src/App.vue @@ -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%; diff --git a/v1-com-officielle/src/assets/style.css b/v1-com-officielle/src/assets/style.css index 4fc8dab..6ff1de9 100644 --- a/v1-com-officielle/src/assets/style.css +++ b/v1-com-officielle/src/assets/style.css @@ -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{ diff --git a/v1-com-officielle/src/components/InfoContent.vue b/v1-com-officielle/src/components/InfoContent.vue index f3b5957..9adfac5 100644 --- a/v1-com-officielle/src/components/InfoContent.vue +++ b/v1-com-officielle/src/components/InfoContent.vue @@ -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%; diff --git a/v1-com-officielle/src/components/TitleContent.vue b/v1-com-officielle/src/components/TitleContent.vue index 7972ed5..85b50b4 100644 --- a/v1-com-officielle/src/components/TitleContent.vue +++ b/v1-com-officielle/src/components/TitleContent.vue @@ -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%; diff --git a/v1-com-officielle/src/infoComponents/InfoMenu.vue b/v1-com-officielle/src/infoComponents/InfoMenu.vue index 52d1e63..4adc250 100644 --- a/v1-com-officielle/src/infoComponents/InfoMenu.vue +++ b/v1-com-officielle/src/infoComponents/InfoMenu.vue @@ -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%; } diff --git a/v1-com-officielle/src/titleComponents/TitleText.vue b/v1-com-officielle/src/titleComponents/TitleText.vue index 92060ac..ed1c859 100644 --- a/v1-com-officielle/src/titleComponents/TitleText.vue +++ b/v1-com-officielle/src/titleComponents/TitleText.vue @@ -1,5 +1,34 @@ @@ -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; + } + }