vgaNAR6ta
bcfc5b318f
création structure hors vue (et sans js sur pc) pour infos
essentielles
création de l'interactivité pour indiquer l'ouverture du lieu (sans
'backend', automatisation et lien avec capteur à faire)
liens inactifs pour l'instant
infos pour remplir et prévisualiser à mettre à jour en fonction de
ce qu'on décide ^^
c'est tout pour cette fois
}
585 lines
12 KiB
CSS
585 lines
12 KiB
CSS
:root[data-theme="closed"]{
|
|
--back-color: #FFFF4D;
|
|
--main-color: #000000;
|
|
}
|
|
|
|
:root[data-theme="open"]{
|
|
--back-color: #00FF44;
|
|
--main-color: #000000;
|
|
}
|
|
|
|
/*====================Typo*/
|
|
@font-face {
|
|
font-family: 'karrik';
|
|
src: url('./typo/Karrik-Italic.woff2').format('woff2');
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'karrik';
|
|
src: url('./typo/Karrik-Regular.woff2') format('woff2');
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'velvelyne';
|
|
src: url('./typo/Velvelyne-Light.ttf') format('truetype');
|
|
font-weight: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'avara';
|
|
src: url('./typo/Avara-Black.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'pressStart2P';
|
|
src: url('./typo/PressStart2P-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'velvelyne';
|
|
src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*===================Animation*/
|
|
@keyframes blink {
|
|
0% { color: var(--back-color);}
|
|
15% { color: var(--main-color);}
|
|
35% { color: var(--main-color);}
|
|
50% { color: var(--back-color);}
|
|
65% { color: var(--main-color);}
|
|
85% { color: var(--main-color);}
|
|
100% { color: var(--back-color);}
|
|
}
|
|
|
|
@keyframes blinkBack {
|
|
0% { background-color: var(--back-color);}
|
|
15% { background-color: var(--main-color);}
|
|
35% { background-color: var(--main-color);}
|
|
50% { background-color: var(--back-color);}
|
|
65% { background-color: var(--main-color);}
|
|
85% { background-color: var(--main-color);}
|
|
100% { background-color: var(--back-color);}
|
|
}
|
|
|
|
@keyframes blinkBorder {
|
|
0% { border-color: var(--main-color);}
|
|
15% { border-color: var(--accent-color);}
|
|
35% { border-color: var(--accent-color);}
|
|
50% { border-color: var(--main-color);}
|
|
65% { border-color: var(--accent-color);}
|
|
85% { border-color: var(--accent-color);}
|
|
100% { border-color: var(--main-color);}
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0px); }
|
|
35% { transform: translateY(1px); }
|
|
50% { transform: translateY(-10px); }
|
|
65% { transform: translateY(1px); }
|
|
100% { transform: translateY(0px); }
|
|
}
|
|
|
|
/*=============Désact défault*/
|
|
input {
|
|
-webkit-appearance: none !important;
|
|
appearance: none !important;
|
|
}
|
|
|
|
a{
|
|
text-decoration: none;
|
|
color: inherit;
|
|
cursor: alias;
|
|
}
|
|
|
|
button{
|
|
cursor: cell;
|
|
}
|
|
|
|
a p{
|
|
cursor:inherit;
|
|
}
|
|
|
|
a button{
|
|
cursor: inherit;
|
|
}
|
|
|
|
p{
|
|
cursor: inherit;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dg{
|
|
display: none !important;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*==========================Moveable*/
|
|
.moveable-control-box {
|
|
display: none !important;
|
|
}
|
|
|
|
/*=============Body & background*/
|
|
html, body{
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
background-color: var(--main-color);
|
|
width: 100%;
|
|
height:100%;
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
display: block;
|
|
scrollbar-color: var(--back-color) var(--main-color);
|
|
scrollbar-width: thin;
|
|
z-index: -33;
|
|
}
|
|
|
|
#mainContainer{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
height: auto;
|
|
gap: 0;
|
|
}
|
|
|
|
/*=====================BUTTONS*/
|
|
.textBtnStyle{
|
|
font-family: 'karrik';
|
|
font-size: 13.12px;
|
|
background-color: var(--back-color);
|
|
color: var(--main-color);
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: 1.75px;
|
|
border-radius: 16.1px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.textBtnStyle:hover{
|
|
background-color: var(--main-color);
|
|
color: var(--back-color);
|
|
}
|
|
|
|
.iconBtnStyle{
|
|
background-color: var(--back-color);
|
|
color: var(--main-color);
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
border-radius: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.iconBtnStyle:hover{
|
|
background-color: var(--main-color);
|
|
color: var(--back-color);
|
|
}
|
|
|
|
/*=============INTERFACE*/
|
|
.uiStyle{
|
|
background-color: var(--back-color);
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
}
|
|
|
|
.icon{
|
|
height: 16.1px;
|
|
width: auto;
|
|
fill: currentColor;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#topBar{
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 50px;
|
|
z-index: 3;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: var(--main-color);
|
|
padding-left: 7.77px;
|
|
padding-right: 16.1px;
|
|
gap: 7.77px;
|
|
box-sizing: border-box;
|
|
|
|
p{
|
|
font-family: 'velvelyne';
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
padding-top: 7.77px;
|
|
}
|
|
|
|
#mainLogo{
|
|
height: auto;
|
|
width: 50px;
|
|
}
|
|
|
|
.left{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: auto;
|
|
gap: 7.77px;
|
|
height: 100%;
|
|
}
|
|
|
|
.right{
|
|
display: none;
|
|
visibility: collapse;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width:33%;
|
|
height: 200px;
|
|
position: absolute;
|
|
top: 55px;
|
|
right: 7.77px;
|
|
z-index: 3;
|
|
|
|
.textBtnStyle{
|
|
width: 16.1%;
|
|
min-width: 93px;
|
|
height: 33px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.textBtnStyle:hover{
|
|
border-color: var(--back-color);
|
|
}
|
|
}
|
|
|
|
.iconBtnStyle{
|
|
width: 33px;
|
|
height: 33px;
|
|
}
|
|
|
|
#menuBtn{
|
|
.icon.rotated{
|
|
transform: rotate(0);
|
|
}
|
|
|
|
.icon{
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
@media(min-width: 700px){
|
|
#menuBtn{
|
|
display: none;
|
|
visibility: collapse;
|
|
}
|
|
|
|
.right{
|
|
display: flex;
|
|
visibility: visible;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width:70%;
|
|
height: 100%;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#mainInfo{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 2fr 1fr;
|
|
grid-template-areas:
|
|
"topL topR"
|
|
"midL midR"
|
|
"botL botR";
|
|
box-sizing: border-box;
|
|
width: 100vw;
|
|
height: auto;
|
|
align-items: stretch;
|
|
|
|
@media(min-width: 700px){
|
|
height: 90vh;
|
|
}
|
|
|
|
.uiStyle{
|
|
width:100%;
|
|
height: auto;
|
|
padding-left: 7.77px;
|
|
box-sizing: border-box;
|
|
font-family: 'velvelyne';
|
|
font-size: 13.12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#planContainer{
|
|
width: 200%;
|
|
height: auto;
|
|
color: var(--back-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
#plan{
|
|
position: relative;
|
|
width: 90%;
|
|
margin-bottom: 13.12px;
|
|
}
|
|
#fleche{
|
|
position: absolute;
|
|
|
|
width: 90%;
|
|
fill: currentColor;
|
|
z-index: -1;
|
|
}
|
|
@media(max-width: 700px){
|
|
grid-row: 2;
|
|
grid-column: 1 / 2;
|
|
}
|
|
}
|
|
|
|
#title{
|
|
grid-area: topL;
|
|
font-size: 22px;
|
|
line-height: .7;
|
|
height: 100%;
|
|
|
|
#desc{
|
|
font-family: 'velvelyne';
|
|
font-style: normal;
|
|
font-size: 13.12px;
|
|
line-height: 1em;
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
}
|
|
|
|
#address{
|
|
grid-area: topR;
|
|
font-family: 'karrik';
|
|
color: var(--back-color);
|
|
font-style: normal;
|
|
font-size: 13.12px;
|
|
line-height: 1em;
|
|
text-transform: uppercase;
|
|
padding-left: 13.12px;
|
|
|
|
#hackerLogo{
|
|
width: 77px;
|
|
height: auto;
|
|
align-self: end;
|
|
position: absolute;
|
|
right: 13.12px;
|
|
top: 117px;
|
|
}
|
|
|
|
}
|
|
|
|
#openingHours{
|
|
grid-area: botL;
|
|
text-align: right;
|
|
padding-right: 13.12px;
|
|
font-weight: normal;
|
|
line-height: 1em;
|
|
margin-top: -13.12px;
|
|
|
|
strong{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
#lolOpener{
|
|
grid-area: botR;
|
|
font-weight: normal;
|
|
padding-right: 7.77px;
|
|
line-height: 1em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
gap: 0;
|
|
height: auto;
|
|
|
|
#lolStatus{
|
|
width:90%;
|
|
height: 44px;
|
|
border-color: var(--main-color);
|
|
border-style: solid;
|
|
border-width: thin;
|
|
border-radius: 0;
|
|
align-self: center;
|
|
margin-bottom: 7.77px;
|
|
|
|
}
|
|
}
|
|
|
|
@media(min-width: 700px){
|
|
grid-template-columns: 1fr 2fr;
|
|
grid-template-rows: 1fr 1.61fr 77px;
|
|
height: auto;
|
|
|
|
.uiStyle{
|
|
font-size: 16.1px;
|
|
}
|
|
|
|
#planContainer{
|
|
width: 100vh;
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
margin-left: 0;
|
|
margin-top: -88px;
|
|
|
|
|
|
|
|
@media(min-width: 1300px){
|
|
margin-top: -117px;
|
|
margin-bottom: 77px;
|
|
}
|
|
|
|
|
|
#plan{
|
|
width:90%;
|
|
height: auto;
|
|
}
|
|
#fleche{
|
|
width:60%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
#openingHours{
|
|
grid-area: midL;
|
|
height: 60%
|
|
}
|
|
|
|
#lolOpener{
|
|
width: 300%;
|
|
grid-column: 1 / 2;
|
|
grid-row: 3;
|
|
flex-direction: row;
|
|
gap: 7.77px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 16.1px;
|
|
height: 77px;
|
|
|
|
#lolStatus{
|
|
width: 44%;
|
|
align-self: center;
|
|
margin-top: 7.77px;
|
|
}
|
|
}
|
|
|
|
#title{
|
|
margin-bottom: 3.33px;
|
|
font-size: 27px;
|
|
line-height: 0;
|
|
|
|
#desc{
|
|
font-size: 16.1px;
|
|
}
|
|
}
|
|
|
|
#address #hackerLogo{
|
|
grid-area: midL;
|
|
position: relative;
|
|
top: 0;
|
|
left: 7.77px;
|
|
right: unset;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 1300px){
|
|
.uiStyle{
|
|
font-size: 16.1px;
|
|
}
|
|
|
|
#lolOpener{
|
|
font-size: 22px;
|
|
}
|
|
#address{
|
|
font-size: 22px;
|
|
|
|
#hackerLogo{
|
|
width: 117px;
|
|
}
|
|
}
|
|
#openingHours{
|
|
font-size: 33px;
|
|
}
|
|
|
|
#title{
|
|
margin-bottom: 3.33px;
|
|
font-size: 44px;
|
|
line-height: 0;
|
|
|
|
#desc{
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#aboutSection{
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
box-sizing: border-box;
|
|
|
|
#aboutText{
|
|
width: 60%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
padding-left: 4.44px;
|
|
padding-right: 13.12px;
|
|
box-sizing: border-box;
|
|
|
|
p{
|
|
font-family: 'velvelyne';
|
|
font-weight: normal;
|
|
font-size: 13.12px;
|
|
color: var(--main-color);
|
|
}
|
|
}
|
|
|
|
#eventSection{
|
|
width: 40%;
|
|
height: auto;
|
|
|
|
#title{
|
|
height: 44px;
|
|
padding-top: 7.77px;
|
|
padding-left: 7.77px;
|
|
box-sizing: border-box;
|
|
font-family: 'karrik';
|
|
font-style: italic;
|
|
font-size: 13.12px;
|
|
text-transform: uppercase;
|
|
color: var(--main-color);
|
|
}
|
|
}
|
|
}
|