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;
   }
 }