about: wip

static/style.css

@@ -653,12 +653,33 @@ home-content {
   }
 }
 
+/* About page */
+
 about {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: stretch;
+  gap: 2rem;
+
+  >smaller-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    background-image: url(assets/gifs/beatingpurple.gif);
+    border: 5px solid var(--darkerer-pink);
+
+    &#left {
+      img {
+        max-width: 10svw;
+        padding: 2rem;
+        mix-blend-mode: hard-light;
+      }
+    }
+
+  }
 
   >main-container {
     display: flex;
@@ -666,19 +687,22 @@ about {
     flex-wrap: wrap;
     align-items: center;
     background-image: url(assets/gifs/heart-mosh.gif);
-    background-size: contain;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     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;
-    }
+  [popover] {
+    color: white;
+    border: 2px solid var(--lavender);
+    background-color: black;
+    padding: 2rem;
   }
 }
 

templates/partials/about.html

@@ -1,7 +1,15 @@
 <about>
   <!-- Ajouter cœur ici et tu peux l'examiner ou quoi, ça pourrait être cool -->
+  <smaller-container id="left">
+    <img src="/static/assets/images/pfp.webp" />
+  </smaller-container>
   <main-container>
-
-    <text>Salut</text>
+    <button popovertarget="mainpopover">Salutttttttt</button>
   </main-container>
+  <!-- <smaller-container> -->
+  <!-- <p>Salut</p> -->
+  <!-- </smaller-container> -->
+  <mainpopover popover id="mainpopover">
+    <p>Salut</p>
+  </mainpopover>
 </about>