add: message de bienvenue !!!
This commit is contained in:
@@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.19 38.9">
|
||||||
|
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 285 B |
+36
-1
@@ -22,7 +22,6 @@
|
|||||||
<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="">
|
||||||
@@ -42,6 +41,39 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section id="homeContent">
|
<section id="homeContent">
|
||||||
|
|
||||||
|
<!-- MESSAGE DE BIENVENUE -->
|
||||||
|
<aside>
|
||||||
|
|
||||||
|
<button type="button" name="msgBtn" popovertarget="msgWindow" popoveraction="show" class="iconBtnStyle" id="openMsg">
|
||||||
|
<svg class="icon" viewBox="0 0 40.19 38.9">
|
||||||
|
<path d="M33.56,0H0v38.9h40.19V0h-6.62ZM34.91,33.62H5.28V8.09l15.05,19.04,14.58-18.56v25.05ZM11.12,5.28h18.39l-9.25,12.02L11.12,5.28Z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="msgWindow" popover="auto">
|
||||||
|
<dialog class="floatingWindow">
|
||||||
|
<div class="title">
|
||||||
|
<h4>Bienvenue !</h4>
|
||||||
|
<button class="iconBtnStyle" popovertarget="msgWindow" popoveraction="hide">
|
||||||
|
<svg viewBox="0 0 53.73 53.59" class="icon">
|
||||||
|
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
hellooo, <br>
|
||||||
|
bienvenue sur le site du LOL ^^<br><br>
|
||||||
|
en ce moment on cherche du monde pour nous aider à faire fonctionner le lieu, le faire évoluer et le péreniser.<br><br>
|
||||||
|
si jamais ça t'intéresse<br><strong>contacte nous sur Matrix, <br>
|
||||||
|
ou passe nous voir au local </strong>directement, quand il est ouvert !<br>
|
||||||
|
</p>
|
||||||
|
</dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
<section id="titleSection" class="solidBox">
|
<section id="titleSection" class="solidBox">
|
||||||
<h2>
|
<h2>
|
||||||
Hackerspace queer
|
Hackerspace queer
|
||||||
@@ -169,6 +201,9 @@
|
|||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
<video src="/assets/video/close.webm" id="texture" class="closed" autoplay muted loop>
|
||||||
|
|
||||||
|
</video>
|
||||||
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
|
<video data-cute-texture-video class="cute-texture-video" src="/assets/video/background.webm" autoplay muted loop ></video>
|
||||||
<canvas class="cute-texture"></canvas>
|
<canvas class="cute-texture"></canvas>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
+5
-6
@@ -15,12 +15,11 @@ loadStatus()
|
|||||||
cuteTexture.target.style.visibility = "visible"
|
cuteTexture.target.style.visibility = "visible"
|
||||||
});
|
});
|
||||||
|
|
||||||
// ======================================== floating event window
|
// ======================================== floating message window
|
||||||
|
|
||||||
/*
|
let target = document.querySelector('#msgWindow');
|
||||||
let target = document.querySelector('#posterWindow');
|
|
||||||
|
|
||||||
let startTarget = target.querySelector('.posterTitle');
|
let startTarget = target.querySelector('.title');
|
||||||
|
|
||||||
console.log('selected target :', startTarget);
|
console.log('selected target :', startTarget);
|
||||||
|
|
||||||
@@ -53,7 +52,7 @@ document.addEventListener('mouseup', () => {
|
|||||||
clicked = false;
|
clicked = false;
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/*
|
||||||
//================================ tentative de gestion des écran tactiles
|
//================================ tentative de gestion des écran tactiles
|
||||||
startTarget.addEventListener('touchstart', (event) => {
|
startTarget.addEventListener('touchstart', (event) => {
|
||||||
startX = event.pageX;
|
startX = event.pageX;
|
||||||
@@ -80,4 +79,4 @@ document.addEventListener('touchend', () => {
|
|||||||
console.log('STOP !')
|
console.log('STOP !')
|
||||||
clicked = false;
|
clicked = false;
|
||||||
})
|
})
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -20,16 +20,22 @@ Ce document sert à échanger et partager des idées et trucs à faire pour cont
|
|||||||
|
|
||||||
* [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche
|
* [x] changer interface évènements en article (avec lien vers affiche) qui devient details avec js qui contient l'affiche
|
||||||
|
|
||||||
|
* [ ] auto scale affiche dans son conteneur
|
||||||
|
|
||||||
|
* [x] message de bienvenue !!!
|
||||||
|
|
||||||
* [ ] tester section event avec des vraies affiches !!!
|
* [ ] tester section event avec des vraies affiches !!!
|
||||||
|
|
||||||
* [x] performance arrière plan avec un shader
|
* [x] performance arrière plan avec un shader
|
||||||
> OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg
|
> OUVERT : texture sinusoidale en nuance de vert entre offset (161 - 255), opacité 0.5, hue-rotate 13.12deg
|
||||||
+ video noir & blanc au dessus en mix blend difference, opacité 0.777
|
+ video noir & blanc au dessus en mix blend difference, opacité 0.777
|
||||||
> FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg
|
> FERMÉ : texture grain aléatoire sur G et B, entre 0 - 161, opacité 0.5, hue-rotate 13.12deg
|
||||||
|
|
||||||
* [ ] désactiver la video pour les personnes qui veulent pas d'effets visuels
|
* [ ] désactiver la video pour les personnes qui veulent pas d'effets visuels
|
||||||
|
|
||||||
* [ ] réglages padding section statut
|
* [ ] fond video en version dégrdée
|
||||||
|
|
||||||
|
* [ ] réglages padding section statut
|
||||||
|
|
||||||
# Démarrer un serveur de developpement
|
# Démarrer un serveur de developpement
|
||||||
|
|
||||||
|
|||||||
+13
-6
@@ -45,12 +45,14 @@
|
|||||||
height: 16.1px;
|
height: 16.1px;
|
||||||
width: auto;
|
width: auto;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconBtnStyle:hover{
|
.iconBtnStyle:hover{
|
||||||
color: var(--back-color);
|
color: var(--back-color);
|
||||||
background-color: var(--main-color);
|
background-color: var(--main-color);
|
||||||
border-color: var(--back-color);
|
border-color: var(--back-color);
|
||||||
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.solidBox{
|
.solidBox{
|
||||||
@@ -111,7 +113,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.floatingWindow{
|
.floatingWindow{
|
||||||
position: fixed;
|
position: relative;
|
||||||
z-index: 3333;
|
z-index: 3333;
|
||||||
|
|
||||||
width: auto;
|
width: auto;
|
||||||
@@ -131,7 +133,7 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.posterTitle{
|
.title{
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -150,8 +152,8 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
padding-left: 33px;
|
padding-left: 16.1px;
|
||||||
padding-right: 16.1px;
|
padding-right: 7.77px;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
@@ -161,8 +163,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.iconBtnStyle{
|
.iconBtnStyle{
|
||||||
width: 33px;
|
width: 27px;
|
||||||
height: 33px;
|
height: 27px;
|
||||||
|
|
||||||
|
.icon{
|
||||||
|
height: 13.12px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
+4
-1
@@ -26,7 +26,6 @@ p,h1,h2,h3,h4{
|
|||||||
pointer-events: none !important;
|
pointer-events: none !important;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,ol {
|
ul,ol {
|
||||||
@@ -34,3 +33,7 @@ ul,ol {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|||||||
+77
-2
@@ -126,6 +126,77 @@ main{
|
|||||||
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;
|
||||||
|
|
||||||
|
aside{
|
||||||
|
grid-row: 2;
|
||||||
|
grid-column: 2;
|
||||||
|
align-self: end;
|
||||||
|
justify-self: end;
|
||||||
|
color: var(--main-color);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
z-index: 33;
|
||||||
|
|
||||||
|
margin-bottom: 13.12px;
|
||||||
|
margin-right: 13.12px;
|
||||||
|
|
||||||
|
#openMsg{
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
animation: float 1.61s infinite;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
border-radius: 13.12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#openMsg:hover{
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#msgWindow{
|
||||||
|
border-style: none;
|
||||||
|
background-color: transparent;
|
||||||
|
position: fixed;
|
||||||
|
top: 117px;
|
||||||
|
left: 33px;
|
||||||
|
animation: none;
|
||||||
|
z-index: 1312;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
.floatingWindow{
|
||||||
|
width: 277px;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 33px;
|
||||||
|
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: 'velvelyne';
|
||||||
|
font-weight: bold;
|
||||||
|
padding-bottom: 13.12px;
|
||||||
|
border-width: 3.33px;
|
||||||
|
border-style: double solid solid;
|
||||||
|
|
||||||
|
p{
|
||||||
|
padding: 7.77px;
|
||||||
|
padding-right: 16.1px;
|
||||||
|
|
||||||
|
strong{
|
||||||
|
font-family: 'karrik';
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 16.1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#msgWindow::backdrop{
|
||||||
|
background-color: var(--back-color);
|
||||||
|
opacity: .333;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
#titleSection{
|
#titleSection{
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
@@ -211,7 +282,7 @@ main{
|
|||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
color: var(--back-color);
|
color: var(--back-color);
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -368,7 +439,7 @@ main{
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16.1px;
|
padding: 16.1px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.solidBox:has(details[open]){
|
.solidBox:has(details[open]){
|
||||||
@@ -388,6 +459,10 @@ main{
|
|||||||
.iconBtnStyle{
|
.iconBtnStyle{
|
||||||
width: 33px;
|
width: 33px;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
|
|
||||||
|
.icon{
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
details{
|
details{
|
||||||
|
|||||||
@@ -40,6 +40,18 @@
|
|||||||
grid-template-columns: 2fr 2fr 1fr;
|
grid-template-columns: 2fr 2fr 1fr;
|
||||||
grid-template-rows: 0.7fr 2fr;
|
grid-template-rows: 0.7fr 2fr;
|
||||||
|
|
||||||
|
aside{
|
||||||
|
grid-column: 3;
|
||||||
|
margin-bottom: 33px;
|
||||||
|
margin-right: 33px;
|
||||||
|
|
||||||
|
#msgWindow{
|
||||||
|
left: unset;
|
||||||
|
right: 16.1px;;
|
||||||
|
top: 161px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#titleSection{
|
#titleSection{
|
||||||
height: 110%;
|
height: 110%;
|
||||||
h2{
|
h2{
|
||||||
@@ -135,7 +147,16 @@
|
|||||||
|
|
||||||
main{
|
main{
|
||||||
#homeContent{
|
#homeContent{
|
||||||
|
aside{
|
||||||
|
margin-bottom: 77px;
|
||||||
|
margin-right: 77px;
|
||||||
|
|
||||||
|
#msgWindow{
|
||||||
|
left: unset;
|
||||||
|
right: 33px;
|
||||||
|
top: 33vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#titleSection{
|
#titleSection{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|||||||
Reference in New Issue
Block a user