diff --git a/assets/icons/msg.svg b/assets/icons/msg.svg new file mode 100644 index 0000000..7db9879 --- /dev/null +++ b/assets/icons/msg.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html index f13382c..e1abdc0 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,6 @@ -

@@ -42,6 +41,39 @@
+ + + +

Hackerspace queer @@ -169,6 +201,9 @@

+
diff --git a/js/main.js b/js/main.js index 1aad736..0a65b71 100644 --- a/js/main.js +++ b/js/main.js @@ -15,12 +15,11 @@ loadStatus() cuteTexture.target.style.visibility = "visible" }); -// ======================================== floating event window +// ======================================== floating message window -/* -let target = document.querySelector('#posterWindow'); +let target = document.querySelector('#msgWindow'); -let startTarget = target.querySelector('.posterTitle'); +let startTarget = target.querySelector('.title'); console.log('selected target :', startTarget); @@ -53,7 +52,7 @@ document.addEventListener('mouseup', () => { clicked = false; }) - +/* //================================ tentative de gestion des écran tactiles startTarget.addEventListener('touchstart', (event) => { startX = event.pageX; @@ -80,4 +79,4 @@ document.addEventListener('touchend', () => { console.log('STOP !') clicked = false; }) -*/ \ No newline at end of file +*/ diff --git a/readMe.MD b/readMe.MD index f5a7eeb..5c9989b 100644 --- a/readMe.MD +++ b/readMe.MD @@ -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 +* [ ] auto scale affiche dans son conteneur + +* [x] message de bienvenue !!! + * [ ] 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 + 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 * [ ] 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 diff --git a/style/common.css b/style/common.css index 6c4ddea..130a2d8 100644 --- a/style/common.css +++ b/style/common.css @@ -45,12 +45,14 @@ height: 16.1px; width: auto; fill: currentColor; + pointer-events: none; } .iconBtnStyle:hover{ color: var(--back-color); background-color: var(--main-color); border-color: var(--back-color); + animation: none; } .solidBox{ @@ -111,7 +113,7 @@ } .floatingWindow{ - position: fixed; + position: relative; z-index: 3333; width: auto; @@ -131,7 +133,7 @@ justify-content: flex-start; align-items: center; - .posterTitle{ + .title{ position: relative; top: 0; width: 100%; @@ -150,8 +152,8 @@ align-items: center; justify-content: space-between; - padding-left: 33px; - padding-right: 16.1px; + padding-left: 16.1px; + padding-right: 7.77px; box-sizing: border-box; cursor: move; @@ -161,8 +163,13 @@ } .iconBtnStyle{ - width: 33px; - height: 33px; + width: 27px; + height: 27px; + + .icon{ + height: 13.12px; + width: auto; + } } } diff --git a/style/default.css b/style/default.css index 1e31795..13ae283 100644 --- a/style/default.css +++ b/style/default.css @@ -26,7 +26,6 @@ p,h1,h2,h3,h4{ pointer-events: none !important; padding: 0; margin: 0; - user-select: none; } ul,ol { @@ -34,3 +33,7 @@ ul,ol { margin: 0; list-style-type: none; } + +dialog{ + padding: 0; +} diff --git a/style/main.css b/style/main.css index ecae89d..cf58610 100644 --- a/style/main.css +++ b/style/main.css @@ -126,6 +126,77 @@ main{ grid-template-columns: 2.5fr 2fr 1fr; 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{ grid-column: 1; grid-row: 1; @@ -211,7 +282,7 @@ main{ grid-row: 2; color: var(--back-color); justify-self: end; - + display: flex; flex-direction: row; justify-content: center; @@ -368,7 +439,7 @@ main{ justify-content: space-between; align-items: center; padding: 16.1px; - + } .solidBox:has(details[open]){ @@ -388,6 +459,10 @@ main{ .iconBtnStyle{ width: 33px; height: 33px; + + .icon{ + transform: rotate(45deg); + } } details{ diff --git a/style/responsive.css b/style/responsive.css index a00c3a9..b2713e5 100644 --- a/style/responsive.css +++ b/style/responsive.css @@ -40,6 +40,18 @@ grid-template-columns: 2fr 2fr 1fr; 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{ height: 110%; h2{ @@ -135,7 +147,16 @@ main{ #homeContent{ + aside{ + margin-bottom: 77px; + margin-right: 77px; + #msgWindow{ + left: unset; + right: 33px; + top: 33vh; + } + } #titleSection{ width: 90%;