From 13b3b06d11bf1178c9b859995f490e48c402803e Mon Sep 17 00:00:00 2001 From: vgaNAR6ta Date: Sun, 26 Jul 2026 19:55:23 +0200 Subject: [PATCH] =?UTF-8?q?edit:=20version=20html=20css=20propre=20pour=20?= =?UTF-8?q?version=20d=C3=A9grad=C3=A9=20sans=20js=20+=20responsive=20pour?= =?UTF-8?q?=20=C3=A9crans=20larges?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 17 ++-- js/index.js | 2 +- status/openStyle.css | 9 +- style/main.css | 28 ++++-- style/responsive.css | 226 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 262 insertions(+), 20 deletions(-) create mode 100644 style/responsive.css diff --git a/index.html b/index.html index ce31b5a..30e7a81 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,11 @@ - + + + @@ -16,6 +20,7 @@ +

@@ -35,9 +40,6 @@
- - -

Hackerspace queer @@ -150,9 +152,6 @@

- - -

Événements à venir

  • @@ -462,7 +461,9 @@ -->
+ + +
- diff --git a/js/index.js b/js/index.js index 118d424..c72243c 100644 --- a/js/index.js +++ b/js/index.js @@ -17,6 +17,6 @@ async function importOuverture(){ importOuverture() -for( let btn of document.querySelectorAll("#eventContent & li & .iconBtnStyle")){ +for( let btn of document.querySelectorAll(".iconBtnStyle")){ btn.style.visibility = 'visible'; } diff --git a/status/openStyle.css b/status/openStyle.css index a9dda6a..46ec429 100644 --- a/status/openStyle.css +++ b/status/openStyle.css @@ -20,7 +20,12 @@ mix-blend-mode: difference; z-index: -30; filter: brightness(133%) saturate(33%) grayscale(); - transform: scale(1.5) rotate(180deg); - overflow: hidden; + transform: rotate(180deg); position: absolute; + margin-top: -9%; + height: 120%; +} + +#lolStatus{ + animation: blink 3.33s infinite; } diff --git a/style/main.css b/style/main.css index 2f94e0b..0180ec0 100644 --- a/style/main.css +++ b/style/main.css @@ -30,7 +30,7 @@ html, body{ header{ width: 100%; - height: auto; + height: 93px; margin: 0; position: relative; top:0; @@ -75,10 +75,11 @@ header{ position: relative; z-index: -33; opacity: 0; + width: 0; } } - nav{ + nav > ul{ width: auto; height: 100%; margin: 0; @@ -87,6 +88,8 @@ header{ flex-direction: column; justify-content: space-between; align-items: center; + margin-right: 7.77px; + margin-top: 13.12px; .textBtnStyle{ border-radius: 0; @@ -96,9 +99,8 @@ header{ } - video{ - height: 100vh; + height: 110%; width: auto; position: absolute; inset: 0; @@ -118,12 +120,13 @@ video{ main{ position: relative; z-index: -33; + overflow: hidden; #homeContent{ - height: 70vh; + height: 80vh; width: 100%; position:relative; - z-index: -33; + z-index: 0; display: grid; grid-template-columns: 2.5fr 2fr 1fr; grid-template-rows: 1fr 1.5fr; @@ -175,6 +178,7 @@ main{ padding: 3.33px; margin-bottom: 3.33px; + box-sizing: border-box; border-color: var(--main-color); } @@ -204,18 +208,20 @@ main{ grid-row: 1; width: 150%; font-size: 15px; + padding-top: 33px; } #planSection{ grid-column: 1 / 3; grid-row: 2; color: var(--back-color); + justify-self: end; #planContainer{ width: 100%; height: 100%; margin-left: 13.12px; - margin-top: 33px; + margin-top: 0; } img{ @@ -269,7 +275,7 @@ main{ align-items: center; justify-content: space-between; padding: 0; - height: 16.1vh; + height: 20vh; #statusDesc{ @@ -352,7 +358,7 @@ main{ z-index: 33; .iconBtnStyle{ - visibility: hidden; + visibility: visible; position: absolute; z-index: 34; width: 33px; @@ -360,6 +366,10 @@ main{ right: 7.77px; top: 33px; } + + .icon{ + transform: rotate(45deg); + } } details{ diff --git a/style/responsive.css b/style/responsive.css new file mode 100644 index 0000000..23fcc1c --- /dev/null +++ b/style/responsive.css @@ -0,0 +1,226 @@ +/*===========================Moyen format : Tablette et petite fenêtres PC ===*/ +@media(min-width: 650px){ + header{ + height: 60px; + + h1{ + margin-bottom: 5px; + + img{ + height: 40px; + } + } + nav > ul{ + + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + height: 44px; + margin-top: 16.1px; + margin-right: 13.12px; + min-width: 444px; + box-sizing: border-box; + + li{ + height: 100%; + } + + .textBtnStyle{ + border-radius: 0; + width: 93px; + height: 100%; + } + } + } + + main{ + #homeContent{ + height: 77vh; + grid-template-columns: 2fr 2fr 1fr; + grid-template-rows: 0.7fr 2fr; + + #titleSection{ + height: 110%; + h2{ + font-size: 27px; + small{ + font-size: 20px; + } + } + } + + #hourSection{ + grid-column: 1; + width: 50%; + height: 100%; + justify-self: start; + } + + address{ + padding-top: 16.1px; + } + + #planSection{ + grid-column: 2 / 4; + #planContainer{ + width: 110%; + height: auto; + margin-left: -88px; + margin-top: -50px; + + @media(min-width: 800px){ + margin-top: -88px; + } + } + } + + #extLinkSection{ + justify-content: flex-start; + padding-top: 33px; + } + + } + } + + #statuSection{ + + } + + #extraContent{ + + + #aboutSection{ + + } + + #eventSection{ + + } + } +} + +/*===========================Grand format : écrans larges et grands ===*/ +@media(min-width: 1300px){ + header{ + nav > ul{ + + font-size: 27px; + + li{ + height: 100%; + } + + .textBtnStyle{ + padding-left: 16.1px; + width: 133px; + } + } + } + + main{ + #homeContent{ + + + #titleSection{ + width: 90%; + } + + #hourSection{ + height: 77%; + width: 44%; + + h3{ + font-size: 20px; + } + + ol{ + font-size: 16.1px; + strong{ + font-size: 22px; + } + } + } + + address{ + font-size: 22px; + } + + #planSection{ + #planContainer{ + width: 100%; + height: auto; + margin-left: -88px; + margin-top: -133px; + } + } + + #extLinkSection{ + a img{ + height: 77px; + } + } + + } + + #statuSection{ + #statusDesc{ + padding-left: 77px; + font-size: 20px; + } + h3{ + font-size: 33px; + padding-top: 7.77px; + margin-left: -88px; + } + } + + #extraContent{ + height: 90vh; + flex-direction: row; + overflow: hidden; + + #aboutSection{ + font-size: 22px; + } + + #eventSection{ + #eventContent{ + li{ + .iconBtnStyle{ + width: 44px; + height: 44px; + border-radius: 22px; + right: 13.12px; + } + + .icon{ + height: 22px; + } + } + + details{ + summary{ + .title{ + font-size: 22px; + + h4{ + font-size: 27px; + } + } + + .resume{ + font-size: 16.1px; + } + } + .description{ + font-size: 16.1px; + } + } + } + } + } + } + + +}