music: wip music page

static/style.css

@@ -133,6 +133,7 @@ table {
 
 /* Animations */
 
+
 @keyframes fadeInNOut {
   0% {
     opacity: 0;
@@ -196,6 +197,11 @@ table {
   }
 }
 
+@font-face {
+  font-family: "AH";
+  src: url("assets/fonts/ah.ttf") format("truetype");
+}
+
 
 :root {
   --lavender: #cdb4db;
@@ -211,10 +217,11 @@ table {
 
 ::selection {
   text-shadow: 0px 0px 3px var(--darkerer-pink);
-
 }
 
 
+
+
 body {
   background-size: cover;
   background-position: center;
@@ -239,6 +246,10 @@ body {
     background-image: url(assets/images/tiledbgpink.webp);
   }
 
+  &:has(#content about) {
+    background-image: url(assets/gifs/flowerzdark.png);
+  }
+
   main {
     padding-top: 8rem;
   }
@@ -256,7 +267,7 @@ body {
 
   cute-container {
     background-image: url(assets/gifs/weirdstone.png);
-    width: min(90svw, 850px);
+    width: min(90svw, 1000px);
     min-height: 70svh;
     height: auto;
     border: 5px solid var(--lavender);
@@ -494,6 +505,10 @@ home-content {
           gap: 2rem;
         }
 
+        bibou-message {
+          font-style: italic;
+          color: var(--grey-500)
+        }
 
         bibou-container {
           position: relative;
@@ -654,10 +669,40 @@ home-content {
 music {
 
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
-  align-items: center;
+  align-items: stretch;
+
+  vertical-marquee {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100svh;
+    width: 100svw;
+    overflow: hidden;
+    z-index: -1;
+    pointer-events: none;
+    font-size: 10rem;
+    animation: fadeInNOut 10s infinite;
+
+    vertical-marquee-inner {
+      position: absolute;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+
+      text {
+        display: block;
+        font-family: "AH", sans-serif;
+        font-size: 1.1rem;
+        line-height: 24px;
+        color: red;
+        opacity: 0.5;
+      }
+    }
+  }
+
 
   box {
     border-radius: 0.4rem;
@@ -941,8 +986,11 @@ mini-player {
     pink-statusbar {
       display: none;
     }
+
   }
 
+  /* Music page */
+
   /* Miniplayer */
 
   mini-player {

templates/partials/home.html

@@ -54,6 +54,7 @@
             width="30px" alt="Instagram logo" /></a>
       </socials>
       <img width="200px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
+      <bibou-message>Consult the wisdom of the Bibou, if thou darest...</bibou-message>
       <bibou-container>
         <img class="boubou" src="/static/assets/images/boubou.webp" alt="Bibou endormi" />
         <img class="bibou" src="/static/assets/images/bibou.webp" alt="Bibou éveillé" />

templates/partials/music.html

@@ -1,5 +1,25 @@
 <music>
+  <vertical-marquee id="bg-text"></vertical-marquee>
   <cute-container>
     <img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
   </cute-container>
 </music>
+<script>
+  const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  const container = document.getElementById('bg-text');
+  const colWidth = 20;
+  const rowHeight = 24;
+  const cols = Math.ceil(window.innerWidth / colWidth);
+  const rows = Math.ceil(window.innerHeight / rowHeight);
+
+  for (let c = 0; c < cols; c++) {
+    const col = document.createElement('vertical-marquee-inner');
+    col.style.left = (c * colWidth) + 'px';
+    for (let r = 0; r < rows; r++) {
+      const span = document.createElement('text');
+      span.textContent = chars[Math.floor(Math.random() * chars.length)];
+      col.appendChild(span);
+    }
+    container.appendChild(col);
+  }
+</script>