vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: version html css propre pour version dégradé sans js + responsive pour écrans larges

Browse Source
This commit is contained in:
vgaNAR6ta
2026-07-26 19:55:23 +02:00
parent 4e82328ff9
commit 13b3b06d11
5 changed files with 262 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9 -8
View File
@@ -8,7 +8,11 @@
<link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="status/openStyle.css">
<link rel="stylesheet" href="style/responsive.css">
<!-- TEST CCS OUVERTURE
<link rel="stylesheet" href="status/openStyle.css">
-->
<link rel="stylesheet" href="affiches/perm.css">
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
<link rel="stylesheet" href="affiches/algorave.css">
@@ -16,6 +20,7 @@
<link rel="icon" type="image/svg" href="./assets/favicon.svg" />
</head>
<body>
<header>
<h1>
<img id="logo" src="./assets/logo/logo-forme.svg" alt="">
@@ -35,9 +40,6 @@
<main>
<section id="homeContent">
<video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
<video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
<video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
<section id="titleSection" class="solidBox">
<h2>
Hackerspace queer
@@ -150,9 +152,6 @@
</p>
</section>
<section id="eventSection" class="transparentBox">
<video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
<video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
<video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
<h3>Événements <small>à venir</small></h3>
<ul id="eventContent" class="borderBox">
<li>
@@ -462,7 +461,9 @@
-->
</section>
</section>
<video id="texture" autoplay muted loop src="./assets/video/close.webm" class="closedBackground"></video>
<video id="texture" autoplay muted loop src="./assets/video/open.webm" class="openBackground"></video>
<video id="background" autoplay muted loop src="./assets/video/background.webm" class="openBackground"></video>
</main>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
js/index.js
+1 -1
View File
@@ -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';
}
status/openStyle.css
+7 -2
View File
@@ -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;
}
style/main.css
+19 -9
View File
@@ -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{
style/responsive.css
+226
View File
@@ -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;
}
}
}
}
}
}
}