about: wip about

static/style.css

@@ -256,21 +256,6 @@ body {
     animation: marquee 8s linear infinite;
   }
 
-  cute-container {
-    background-image: url(assets/gifs/weirdstone.png);
-    width: min(90svw, 1000px);
-    min-height: 70svh;
-    height: auto;
-    border: 5px solid var(--lavender);
-    padding: 1rem 2rem;
-    box-sizing: border-box;
-
-    img {
-      width: 80%;
-      display: block;
-      margin-inline: auto;
-    }
-  }
 }
 
 /* CRT Effect */
@@ -668,6 +653,35 @@ home-content {
   }
 }
 
+about {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: stretch;
+
+  >main-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    background-image: url(assets/gifs/heart-mosh.gif);
+    background-size: contain;
+    width: min(90svw, 1000px);
+    min-height: 70svh;
+    height: auto;
+    border: 5px solid var(--lavender);
+    padding: 1rem 2rem;
+    box-sizing: border-box;
+
+    img {
+      width: 80%;
+      display: block;
+      margin-inline: auto;
+    }
+  }
+}
+
 /* Music */
 music {
   display: flex;
@@ -705,20 +719,24 @@ music {
     }
   }
 
-  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;
+    background-image: url(assets/gifs/weirdstone.png);
+    width: min(90svw, 1000px);
+    min-height: 70svh;
+    height: auto;
+    border: 5px solid var(--lavender);
+    padding: 1rem 2rem;
+    box-sizing: border-box;
+
+    img {
+      width: 80%;
+      display: block;
+      margin-inline: auto;
+    }
   }
 }
 
@@ -995,7 +1013,6 @@ mini-player {
     }
   }
 
-  /* Music page */
 
   /* Miniplayer */
 
@@ -1032,8 +1049,6 @@ mini-player {
   }
 }
 
-/* Page-specific backgrounds */
-
 /* Context Menu */
 helo {
   position: fixed;

templates/partials/about.html

@@ -1,3 +1,7 @@
 <about>
   <!-- Ajouter cœur ici et tu peux l'examiner ou quoi, ça pourrait être cool -->
+  <main-container>
+
+    <text>Salut</text>
+  </main-container>
 </about>