showcase layout

zombieFox · Jul 1, 2024 · 50efa84 · 50efa84
1 parent 1b03de9
commit 50efa84
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/src/component/showcase/index.css b/src/component/showcase/index.css
@@ -1,22 +1,31 @@
+:root {
+  --showcase-padding: 4em;
+}
+
 .showcase {
-  padding: 4em;
+  padding: var(--showcase-padding);
   width: 100vw;
   min-height: 100vh;
   z-index: var(--z-index-showcase);
 }
 
 .showcase {
   display: grid;
-  gap: 4em;
-  grid-template-columns: 1fr 3fr;
+  gap: var(--showcase-padding);
+  grid-template-columns: 2fr 5fr;
   grid-template-areas:
-    "side content"
+    "side content";
+  justify-items: center;
 }
 
 .showcase-side {
   grid-area: side;
+  position: sticky;
+  top: var(--showcase-padding);
+  height: fit-content;
 }
 
 .showcase-content {
   grid-area: content;
+  max-width: 50em;
 }