about, miniplayer: wip, add new tracks

content/mp-tracks-backup.json

@@ -0,0 +1,38 @@
+[
+  {
+    "id": 1,
+    "title": "Good old times",
+    "artist": "Agahnim",
+    "src": "/static/assets/music/times.mp3"
+  },
+  {
+    "id": 2,
+    "title": "Identification",
+    "artist": "Infinity Frequencies",
+    "src": "/static/assets/music/infinity.mp3"
+  },
+  {
+    "id": 3,
+    "title": "Flip the Switch",
+    "artist": "Stevia Sphere",
+    "src": "/static/assets/music/switch.mp3"
+  },
+  {
+    "id": 4,
+    "title": "Machines Vs Water",
+    "artist": "Stevia Sphere",
+    "src": "/static/assets/music/machines.mp3"
+  },
+  {
+    "id": 5,
+    "title": "Elevator 1",
+    "artist": "Stevia Sphere",
+    "src": "/static/assets/music/elevator.mp3"
+  },
+  {
+    "id": 6,
+    "title": "Somewhere Dark",
+    "artist": "Monodrone",
+    "src": "/static/assets/music/dark.mp3"
+  }
+]

content/mp-tracks.json

@@ -1,38 +1,14 @@
 [
   {
     "id": 1,
-    "title": "Good old times",
-    "artist": "Agahnim",
-    "src": "/static/assets/music/times.mp3"
+    "title": "At The Stranger's House",
+    "artist": "efdemin",
+    "src": "/static/assets/music/miniplayer/stranger.opus"
   },
   {
     "id": 2,
-    "title": "Identification",
-    "artist": "Infinity Frequencies",
-    "src": "/static/assets/music/infinity.mp3"
-  },
-  {
-    "id": 3,
-    "title": "Flip the Switch",
-    "artist": "Stevia Sphere",
-    "src": "/static/assets/music/switch.mp3"
-  },
-  {
-    "id": 4,
-    "title": "Machines Vs Water",
-    "artist": "Stevia Sphere",
-    "src": "/static/assets/music/machines.mp3"
-  },
-  {
-    "id": 5,
-    "title": "Elevator 1",
-    "artist": "Stevia Sphere",
-    "src": "/static/assets/music/elevator.mp3"
-  },
-  {
-    "id": 6,
-    "title": "Somewhere Dark",
-    "artist": "Monodrone",
-    "src": "/static/assets/music/dark.mp3"
+    "title": "Sleep Dealer",
+    "artist": "Oneohtrix Point Never",
+    "src": "/static/assets/music/miniplayer/sleep-dealer.opus"
   }
 ]

static/style.css

@@ -696,6 +696,7 @@ about {
     flex-direction: column;
     flex-wrap: wrap;
     align-items: center;
+    justify-content: center;
     background-image: url(assets/gifs/heart-mosh.gif);
     background-size: cover;
     background-position: center;
@@ -707,18 +708,31 @@ about {
     padding: 1rem 2rem;
     box-sizing: border-box;
 
-    introduction {
-      font-size: 1.5rem;
+    button {
+      background: none;
       color: white;
-      text-shadow: 0.5px 0.5px 0 var(--darkerer-pink), 0.5px -0.5px 0 var(--darkerer-pink), -0.5px 0.5px 0 var(--darkerer-pink), -0.5px -0.5px 0 var(--darkerer-pink), 0.5px 0px 0 var(--darkerer-pink), 0px 0.5px 0 var(--darkerer-pink), -0.5px 0px 0 var(--darkerer-pink), 0px -0.5px 0 var(--darkerer-pink);
+      border: none;
+      font-size: 5rem;
+      font-family: "DotGothic16", sans-serif;
+
+      &:hover {
+        color: red;
+      }
     }
   }
 
   [popover] {
     color: white;
+    width: min(90vw, 600px);
     border: 2px solid var(--lavender);
     background-color: black;
     padding: 2rem;
+    opacity: 1;
+    transition: all 0.5s;
+
+    @starting-style {
+      opacity: 0;
+    }
   }
 }
 

templates/partials/about.html

@@ -1,19 +1,21 @@
 <about>
   <smaller-container id="left">
     <img src="/static/assets/images/pfp.webp" />
-    <name>Agahnim</name>
+    <name>AGAHNIM</name>
   </smaller-container>
   <main-container>
     <!-- Ajouter cœur ici et tu peux l'examiner ou quoi, ça pourrait être cool, plus de créativité que juste le texte dans le div stp -->
-    <!-- parler viole de gambe, Spinoza, Bourdieu etc -->
-    <button popovertarget="mainpopover">Salutttttttt</button>
-    <introduction>
+    <!-- parler viole de gambe, Spinoza, Bourdieu, SensCritique etc -->
+
+    <button popovertarget="mainpopover">D I S S E C T</button>
+  </main-container>
+  <mainpopover popover id="mainpopover">
     In my personal life, I enjoy learning more about sociology, philosophy, particularly the aesthetics, and, to some
     extent, economics notably through the Regulation school, although I’m slightly less interested in the latter.
     <br /><br />
 
     I am eager for aesthetic experiences, as evidenced by my SensCritique account, though it’s still sparse for now,
-      as I tirelessly seek that feeling I first experienced while reading Boris Vian’s "J'irai cracher sur vos tombes".
+    as I tirelessly seek that feeling I first experienced while reading Boris Vian’s "I Shall Spit on Your Graves".
     My favorite fields remain music and literature, but I’m open to any medium, such as film or the visual arts, and
     I’m trying to catch up in those areas! My tastes are quite varied, and I’d have a hard time defining them, but I
     in fact have a preference for Baroque music and more experimental sounds, though that’s not all of course.
@@ -22,10 +24,6 @@
     Of course, I play video games like anyone who spends a fair amount of time on their computer, and I’m particularly
     enjoying playing Tekken 8 and Death Stranding right now, though my all-time favorite game will always be The
     Legend of Zelda: Skyward Sword; you can spot some references to it on this site if you look closely!
-    </introduction>
-  </main-container>
-  <mainpopover popover id="mainpopover">
-    <p>Salut</p>
   </mainpopover>
 
 </about>