vgaNAR6ta/LOLv333
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: reduced motion mode

Browse Source
This commit is contained in:
vgaNAR6ta
2026-08-04 23:05:28 +02:00
parent db59f2ae48
commit c223ab281c
6 changed files with 55 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/video/close.webm
BIN
View File
Binary file not shown.
assets/video/closed.webm
BIN
View File
Binary file not shown.
assets/video/open.webm
BIN
View File
Binary file not shown.
index.html
+25 -34
View File
@@ -10,6 +10,8 @@
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/responsive.css"> <link rel="stylesheet" href="style/responsive.css">
<link rel="stylesheet" href="style/reduced.css">
<!-- TEST CCS OUVERTURE <!-- TEST CCS OUVERTURE
<link rel="stylesheet" href="status/openStyle.css"> <link rel="stylesheet" href="status/openStyle.css">
--> -->
@@ -181,46 +183,35 @@
</section> </section>
<section id="eventSection" class="transparentBox"> <section id="eventSection" class="transparentBox">
<h3>Événements <small>à venir</small></h3> <h3>Événements <small>à venir</small></h3>
<article class="solidBox"> <article class="solidBox">
<h4>Test évènement 333</h4> <h4>Test évènement 333</h4>
<p class="date">13/12</p> <p class="date">13/12</p>
<a href="/affiches/test333/" class="iconBtnStyle" target="_blank"> <a href="/affiches/test333/" class="iconBtnStyle" target="_blank">
<svg viewBox="0 0 53.73 53.59" class="icon"> <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"/> <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> </svg>
</a> </a>
</article> </article>
<article class="solidBox"> <article class="solidBox">
<h4>Test évènement</h4> <h4>Test évènement</h4>
<p class="date">13/12/26</p> <p class="date">13/12/26</p>
<a href="/affiches/test/" class="iconBtnStyle" target="_blank"> <a href="/affiches/test/" class="iconBtnStyle" target="_blank">
<svg viewBox="0 0 53.73 53.59" class="icon"> <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"/> <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> </svg>
</a> </a>
</article> </article>
</section> </section>
</section> </section>
<video src="/assets/video/close.webm" id="texture" class="closed" autoplay muted loop> <noscript>
<video src="/assets/video/closed.webm" class="closedBackground" autoplay muted loop></video>
</video> <video src="/assets/video/closed.webm" class="openBackground" autoplay muted loop></video>
</noscript>
<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>
<section class="floatingWindow" id="posterWindow">
<div class="posterTitle">
<h4>test</h4>
<button type="button" name="close" class="iconBtnStyle" id="posterCloseBtn">
<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>
<article id="posterContainer"></article>
</section>
<!-- SCRIPT PRINCIPAL --> <!-- SCRIPT PRINCIPAL -->
<script type="module" src="./js/main.js"></script> <script type="module" src="./js/main.js"></script>
</body> </body>
</html> </html>
style/main.css
+18 -14
View File
@@ -4,21 +4,16 @@
--main-color: #000000; --main-color: #000000;
} }
/*================ ANIMATION ======================*/
/*================ DESACT DEFAULT ======================*/
/*================ BODY ======================*/ /*================ BODY ======================*/
html{ html{
margin: 0; margin: 0;
padding: 0; padding: 0;
scrollbar-color: var(--back-color) var(--main-color); scrollbar-color: var(--back-color) var(--main-color);
background-color: var(--main-color); background-color: var(--main-color);
min-height: 100vh; height: 100%;
width: 100%; width: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll;
position: relative; position: relative;
z-index: -33; z-index: -33;
} }
@@ -26,13 +21,13 @@ html{
body{ body{
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
height: auto;
overflow-y: hidden;
position: relative; position: relative;
z-index: -33; z-index: -33;
box-sizing: border-box;
} }
/*================ CLASSES COMMUNES ======================*/
/*================ STRUCTURE ======================*/ /*================ STRUCTURE ======================*/
header{ header{
@@ -106,7 +101,7 @@ header{
} }
video{ noscript > video{
height: 110%; height: 110%;
width: auto; width: auto;
position: absolute; position: absolute;
@@ -114,6 +109,14 @@ video{
z-index: -32; z-index: -32;
} }
.cute-texture-video{
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: -33;
}
.openBackground{ .openBackground{
visibility: collapse; visibility: collapse;
} }
@@ -139,7 +142,7 @@ main{
align-self: end; align-self: end;
justify-self: end; justify-self: end;
color: var(--main-color); color: var(--main-color);
13.12px
position: relative; position: relative;
z-index: 33; z-index: 33;
@@ -449,7 +452,6 @@ 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]){
@@ -464,6 +466,7 @@ main{
details{ details{
cursor: default; cursor: default;
} }
} }
.iconBtnStyle{ .iconBtnStyle{
@@ -478,6 +481,7 @@ main{
details{ details{
width: 100%; width: 100%;
cursor: copy; cursor: copy;
overflow: hidden;
summary{ summary{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
style/reduced.css
+12
View File
@@ -0,0 +1,12 @@
@media (prefers-reduced-motion: reduce){
noscript > video,
.cute-texture,
.cute-texture-video{
visibility: collapse !important;
display: none !important;
}
main aside #openMsg{
animation: none !important;
}
}