header: wip

static/style.css

@@ -10,18 +10,24 @@
   --grey-500: oklch(55.1% 0.027 264.364);
 }
 
+::selection {
+
+  text-shadow: 0px 0px 3px var(--darkerer-pink)
+}
+
 body {
+
   background-image: url(assets/images/tiledbgpink.webp);
   background-size: cover;
   background-position: center;
   height: 100lvh;
   width: 100lvw;
   overflow: auto;
-  font-family: "DotGothic16", sans-serif;
+  font-family: "DotGothic16",
-
+    sans-serif;
 
   main {
-    padding-top: 5rem;
+    padding-top: 8rem;
   }
 }
 
@@ -66,27 +72,38 @@ crt {
   }
 }
 
-/* Navbar */
+/* persistent-ui */
-navbar {
+persistent-ui {
-  font-family: "VT323", monospace;
   position: fixed;
-  display: flex;
-  flex-direction: column;
-
   top: 0;
   left: 0;
   width: 100svw;
-  height: auto;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+miniplayer-container {
+  display: block;
+  align-self: flex-start;
+}
+
+/* Navbar */
+navbar {
+  font-family: "VT323", monospace;
+  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
   navbar-content {
-
     display: flex;
     gap: 0.3rem;
     padding: 0.5rem 0;
     padding-left: 0.5rem;
     background-color: var(--win-bg-grey);
 
-
     input {
       opacity: 0;
       position: absolute;
@@ -124,8 +141,21 @@ navbar {
     height: 1.5rem;
     flex-shrink: 0;
     background-color: var(--darker-pink);
-
     border-bottom: 2px solid #000;
+    color: white;
+    display: flex;
+    align-items: center;
+    padding-left: 0.5rem;
+    gap: 0.5rem;
+
+    status-dot {
+      display: block;
+      width: 8px;
+      height: 8px;
+      background-color: #00ff00;
+      border: 1px solid #008000;
+    }
+
   }
 }
 
@@ -158,24 +188,17 @@ katcenkat {
   }
 }
 
-
-
 /* Mini player */
-
 mini-player {
-  position: fixed;
+  display: block;
-  top: 3.5rem;
+  position: relative;
-  left: 0;
   z-index: 100;
   width: min(240px, 100svw);
   background-color: var(--win-bg-grey);
   border: 2px solid;
   border-color: #ffffff #808080 #808080 #ffffff;
   box-shadow: 2px 2px 0 #000;
-
+  transition: opacity 0.3s, translate 0.3s;
-
-  transition: opacity 0.3s,
-    translate 0.3s;
 
   ominous-message {
     display: block;
@@ -239,7 +262,6 @@ mini-player {
       outline: none;
       cursor: pointer;
 
-
       &::-webkit-slider-thumb {
         appearance: none;
         width: 10px;

templates/partials/header.html

@@ -6,6 +6,7 @@
     <a href="/music">Music</a>
   </navbar-content>
   <pink-statusbar>
-    <p>Salut</p>
+    <status-dot></status-dot>
+    <username>Online</username>
   </pink-statusbar>
 </navbar>

templates/partials/home.html

@@ -1,6 +1,6 @@
 <home-content>
   <welcome>
-    <img src="/static/assets/images/welcome.webp" alt="A welcome text in pink" />
+    <img src="/static/assets/images/welcome.webp" width="400px" alt="A welcome text in pink" />
     <p>test</p>
   </welcome>
 </home-content>

templates/partials/music.html

@@ -1 +1 @@
-<h1>y'a pas de miniplayer ici</h1>
+<hello>hello</hello>