From 9bc182b9bce3e3a551931877f4a2ca318d2d639a Mon Sep 17 00:00:00 2001
From: Agahnim <43116178+naguiagahnim@users.noreply.github.com>
Date: Tue, 28 Apr 2026 11:06:06 +0200
Subject: [PATCH] music: wip music page

---
 static/style.css              | 33 +++++++++++++++++++++++++++++----
 templates/partials/music.html |  6 +++---
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/static/style.css b/static/style.css
index 9047ca1..eea7a96 100644
--- a/static/style.css
+++ b/static/style.css
@@ -240,6 +240,14 @@ body {
     display: inline-block;
     animation: marquee 8s linear infinite;
   }
+
+  cute-container {
+    background-image: url(assets/images/tiledbgpink.webp);
+    width: 70svw;
+    height: 70svh;
+    border: 5px solid var(--darker-pink);
+    padding: 1rem 2rem;
+  }
 }
 
 /* CRT Effect */
@@ -623,23 +631,40 @@ home-content {
 
 /* Music */
 music {
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
   video-bg {
     position: fixed;
     top: 0;
     left: 0;
-    height: 100lvh;
-    width: 100lvw;
+    height: 100%;
+    width: 100%;
     z-index: -1;
 
     video {
-      height: 100lvh;
-      width: 100lvw;
+      height: 100%;
+      width: 100%;
       object-fit: cover;
     }
   }
 
   box {
+    border-radius: 0.4rem;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     background-color: white;
+    padding: 1rem;
+  }
+
+  >cute-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
   }
 }
 
diff --git a/templates/partials/music.html b/templates/partials/music.html
index 986f541..6567149 100644
--- a/templates/partials/music.html
+++ b/templates/partials/music.html
@@ -5,7 +5,7 @@
     </video>
   </video-bg>
 
-  <box>
-    <p>Salut</p>
-  </box>
+  <cute-container>
+    <img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
+  </cute-container>
 </music>
\ No newline at end of file