LOL/labolyon.fr
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Passage du site en v333 #3

Open
epickiwi wants to merge 56 commits from v333 into main
pull from: v333
merge into: :main
Conversation 5 Commits 56 Files Changed 110
+262 -20
5 changed files with 262 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 13b3b06d11 - Show all commits
index.html
+9 -8
View File
@@ -8,7 +8,11 @@
<link rel="stylesheet" href="style/common.css"> <link rel="stylesheet" href="style/common.css">
<link rel="stylesheet" href="style/animation.css"> <link rel="stylesheet" href="style/animation.css">
<link rel="stylesheet" href="style/main.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/perm.css">
<link rel="stylesheet" href="affiches/jdll2024/jdll2024.css"> <link rel="stylesheet" href="affiches/jdll2024/jdll2024.css">
<link rel="stylesheet" href="affiches/algorave.css"> <link rel="stylesheet" href="affiches/algorave.css">
@@ -16,6 +20,7 @@
<link rel="icon" type="image/svg" href="./assets/favicon.svg" /> <link rel="icon" type="image/svg" href="./assets/favicon.svg" />
</head> </head>
<body> <body>
<header> <header>
<h1> <h1>
<img id="logo" src="./assets/logo/logo-forme.svg" alt=""> <img id="logo" src="./assets/logo/logo-forme.svg" alt="">
@@ -35,9 +40,6 @@
<main> <main>
<section id="homeContent"> <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"> <section id="titleSection" class="solidBox">
<h2> <h2>
Hackerspace queer Hackerspace queer
@@ -150,9 +152,6 @@
</p> </p>
</section> </section>
<section id="eventSection" class="transparentBox"> <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> <h3>Événements <small>à venir</small></h3>
<ul id="eventContent" class="borderBox"> <ul id="eventContent" class="borderBox">
<li> <li>
@@ -462,7 +461,9 @@
--> -->
</section> </section>
</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> </main>
<script type="text/javascript" src="js/index.js"></script>
</body> </body>
</html> </html>
js/index.js
+1 -1
View File
@@ -17,6 +17,6 @@ async function importOuverture(){
importOuverture() importOuverture()
for( let btn of document.querySelectorAll("#eventContent & li & .iconBtnStyle")){ for( let btn of document.querySelectorAll(".iconBtnStyle")){
btn.style.visibility = 'visible'; btn.style.visibility = 'visible';
} }
status/openStyle.css
+7 -2
View File
@@ -20,7 +20,12 @@
mix-blend-mode: difference; mix-blend-mode: difference;
z-index: -30; z-index: -30;
filter: brightness(133%) saturate(33%) grayscale(); filter: brightness(133%) saturate(33%) grayscale();
transform: scale(1.5) rotate(180deg); transform: rotate(180deg);
overflow: hidden;
position: absolute; 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{ header{
width: 100%; width: 100%;
height: auto; height: 93px;
margin: 0; margin: 0;
position: relative; position: relative;
top:0; top:0;
@@ -75,10 +75,11 @@ header{
position: relative; position: relative;
z-index: -33; z-index: -33;
opacity: 0; opacity: 0;
width: 0;
} }
} }
nav{ nav > ul{
width: auto; width: auto;
height: 100%; height: 100%;
margin: 0; margin: 0;
@@ -87,6 +88,8 @@ header{
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-right: 7.77px;
margin-top: 13.12px;
.textBtnStyle{ .textBtnStyle{
border-radius: 0; border-radius: 0;
@@ -96,9 +99,8 @@ header{
} }
video{ video{
height: 100vh; height: 110%;
width: auto; width: auto;
position: absolute; position: absolute;
inset: 0; inset: 0;
@@ -118,12 +120,13 @@ video{
main{ main{
position: relative; position: relative;
z-index: -33; z-index: -33;
overflow: hidden;
#homeContent{ #homeContent{
height: 70vh; height: 80vh;
width: 100%; width: 100%;
position:relative; position:relative;
z-index: -33; z-index: 0;
display: grid; display: grid;
grid-template-columns: 2.5fr 2fr 1fr; grid-template-columns: 2.5fr 2fr 1fr;
grid-template-rows: 1fr 1.5fr; grid-template-rows: 1fr 1.5fr;
@@ -175,6 +178,7 @@ main{
padding: 3.33px; padding: 3.33px;
margin-bottom: 3.33px; margin-bottom: 3.33px;
box-sizing: border-box;
border-color: var(--main-color); border-color: var(--main-color);
} }
@@ -204,18 +208,20 @@ main{
grid-row: 1; grid-row: 1;
width: 150%; width: 150%;
font-size: 15px; font-size: 15px;
padding-top: 33px;
} }
#planSection{ #planSection{
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 2; grid-row: 2;
color: var(--back-color); color: var(--back-color);
justify-self: end;
#planContainer{ #planContainer{
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-left: 13.12px; margin-left: 13.12px;
margin-top: 33px; margin-top: 0;
} }
img{ img{
@@ -269,7 +275,7 @@ main{
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0; padding: 0;
height: 16.1vh; height: 20vh;
#statusDesc{ #statusDesc{
@@ -352,7 +358,7 @@ main{
z-index: 33; z-index: 33;
.iconBtnStyle{ .iconBtnStyle{
visibility: hidden; visibility: visible;
position: absolute; position: absolute;
z-index: 34; z-index: 34;
width: 33px; width: 33px;
@@ -360,6 +366,10 @@ main{
right: 7.77px; right: 7.77px;
top: 33px; top: 33px;
} }
.icon{
transform: rotate(45deg);
}
} }
details{ 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;
}
}
}
}
}
}
}