From 13e25e0d26e6c6af9d3eee6aa5855fec1ef254c9 Mon Sep 17 00:00:00 2001
From: Alex Scerba <alex@scerba.org>
Date: Mon, 18 Aug 2025 13:36:47 -0500
Subject: Update stylesheet for new layout

---
 static/assets/style.css | 64 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 52 insertions(+), 12 deletions(-)

(limited to 'static/assets/style.css')

diff --git a/static/assets/style.css b/static/assets/style.css
index c00da88..ba9a850 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -179,6 +179,9 @@ iframe {
   max-width: 100%;
   aspect-ratio: 16/9;
   display: block;
+
+  border: 1px solid black;
+  border-radius: 1.5rem;
 }
 
 .flex {
@@ -186,6 +189,10 @@ iframe {
   gap: 2rem;
 }
 
+.center {
+  align-items: center;
+}
+
 .grid {
   display: grid;
   gap: 2rem;
@@ -196,25 +203,50 @@ iframe {
   height: fit-content;
 }
 
+.title {
+  justify-content: space-between;
+  align-items: center;
+  gap: 0;
+}
+
+#persona {
+  display: visible;
+}
+
+#exploded {
+  padding: 4rem;
+}
+
+.blue {
+  background-color: #6a7883;
+}
+
 @media screen and (max-width: 40rem) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
   }
+  .flex {
+    flex-direction: column;
+  }
+  .reverse {
+    flex-direction: column-reverse;
+  }
+  .title {
+    align-items: normal;
+  }
+  #exploded {
+    padding: 2rem;
+  }
 }
 
-.flex img, .grid img {
-  object-fit: contain;
-}
-
-.title {
-  justify-content: space-between;
-  align-items: center;
+@media screen and (max-width: 50rem) {
+  #persona {
+    display: none;
+  }
 }
 
-.side-vert-img {
-  aspect-ratio: 9/16;
-  object-fit: cover;
-  flex: 60%;
+.flex img, .grid img {
+  object-fit: contain;
 }
 
 .project {
@@ -247,7 +279,7 @@ iframe {
   opacity: 100%;
 }
 
-.grid-column-span-2 {
+.grid-col-span-2 {
   grid-column: span 2;
 }
 
@@ -324,6 +356,10 @@ a {
   transform: scale(1.2);
 }
 
+.slider:focus {
+  outline: none;
+}
+
 .slider-handle {
   transition: transform 0.2s;
 }
@@ -356,6 +392,10 @@ header a, .project-thumbnail {
 }
 */
 
+.return > * {
+  font-weight: bold;
+}
+
 .hide {
   display: none;
 }
-- 
cgit v1.2.3