Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 vgaNAR6ta
|
79f51146c1 | ||
|
vgaNAR6ta
|
13b3b06d11 |
No files matched your search
+11
-8
@@ -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="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
|
||||
@@ -121,14 +123,16 @@
|
||||
  Un capteur sur la porte d'entrée indique<br>  si le local est ouvert:
|
||||
</p>
|
||||
</div>
|
||||
<!-- Preview du statut avec js
|
||||
<h3 id="lolStatus">
|
||||
<small>
|
||||
Le local est actuellement
|
||||
</small>
|
||||
Fermé ...
|
||||
</h3>
|
||||
-->
|
||||
<a href="./status/index.html" class="textBtnStyle">Vérifier si le local <br> est ouvert → → →</a>
|
||||
</section>
|
||||
|
||||
<section id="extraContent">
|
||||
<section id="aboutSection" class="solidBox">
|
||||
<p>
|
||||
@@ -150,9 +154,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 +463,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>
|
||||
+1
-1
@@ -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';
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
Ce document sert à échanger et partager des idées et trucs à faire pour continuer la mise à jour du site du LOL :
|
||||
@@ -0,0 +1,73 @@
|
||||
:root {
|
||||
--back-color: #FFFF4D;
|
||||
--main-color: #000000;
|
||||
}
|
||||
|
||||
/*======================= Page Statut LOL fermé ===*/
|
||||
#lolIsClosed{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#closedContainer{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-radius: 33px;
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
section{
|
||||
width: 333px;
|
||||
height: 117px;
|
||||
background-color: var(--back-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 33px;
|
||||
|
||||
margin-top: -77px;
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
font-size: 22px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
h3{
|
||||
width: 277px;
|
||||
height: 50px;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 33px;
|
||||
font-family: 'karrik';
|
||||
font-weight: normal;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: 7.77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+20
-1
@@ -1 +1,20 @@
|
||||
Fermé
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg" href="../assets/favicon.svg" />
|
||||
<link rel="stylesheet" href="./closedStyle.css">
|
||||
<link rel="stylesheet" href="../style/animation.css">
|
||||
<link rel="stylesheet" href="/style/typo.css">
|
||||
<title>Le LOL est Fermé ...</title>
|
||||
</head>
|
||||
<body id="lolIsClosed">
|
||||
<main id="closedContainer">
|
||||
<section>
|
||||
<p>Le LOL est actuellement</p>
|
||||
<h3 id="lolStatus">fermé ...</h3>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+10
-11
@@ -1,20 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="open">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg" href="/assets/favicon_open.svg" />
|
||||
<style>
|
||||
:root {
|
||||
--back-color: #00FF44;
|
||||
--main-color: #000000;
|
||||
}
|
||||
</style>
|
||||
<link rel="icon" type="image/svg" href="../assets/favicon_open.svg" />
|
||||
<link rel="stylesheet" href="./openStyle.css">
|
||||
<link rel="stylesheet" href="../style/animation.css">
|
||||
<title>Le LOL est Ouvert</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p id="statusText">Ouvert !</p>
|
||||
<body id="lolIsOpen">
|
||||
<main id="openContainer">
|
||||
<section>
|
||||
<p>Le LOL est actuellement</p>
|
||||
<h3 id="lolStatus">ouvert !</h3>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+76
-2
@@ -20,7 +20,81 @@
|
||||
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%;
|
||||
}
|
||||
|
||||
/*======================= Page Statut LOL ouvert ===*/
|
||||
#lolIsOpen{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#openContainer{
|
||||
width:100%;
|
||||
height: 100%;
|
||||
border-radius: 33px;
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
section{
|
||||
width: 333px;
|
||||
height: 117px;
|
||||
background-color: var(--back-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 33px;
|
||||
|
||||
margin-top: -77px;
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
font-size: 22px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
h3{
|
||||
width: 277px;
|
||||
height: 50px;
|
||||
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
|
||||
border-radius: 33px;
|
||||
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 33px;
|
||||
font-family: 'karrik';
|
||||
font-weight: normal;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-top: 7.77px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#lolStatus{
|
||||
animation: blink 3.33s infinite;
|
||||
}
|
||||
+25
-10
@@ -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,11 +275,16 @@ main{
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: 16.1vh;
|
||||
height: 20vh;
|
||||
|
||||
.textBtnStyle{
|
||||
width: 33vw;
|
||||
font-size: 11px;
|
||||
margin-right: 7.77px;
|
||||
}
|
||||
|
||||
#statusDesc{
|
||||
width: 150%;
|
||||
width: 90%;
|
||||
padding: 7.77px;
|
||||
padding-right: 13.12px;
|
||||
font-size: 13.12px;
|
||||
@@ -352,7 +363,7 @@ main{
|
||||
z-index: 33;
|
||||
|
||||
.iconBtnStyle{
|
||||
visibility: hidden;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
z-index: 34;
|
||||
width: 33px;
|
||||
@@ -360,6 +371,10 @@ main{
|
||||
right: 7.77px;
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
.icon{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
details{
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
/*===========================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{
|
||||
.textBtnStyle{
|
||||
font-size: 16.1px;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
font-size: 22px;
|
||||
margin-right: 33px;
|
||||
padding-left: 16.1px;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in new issue
Block a user