fix business with biomes, step towards better design

GoogleChromeLabs · Oct 30, 2024 · 60bea33 · 60bea33
1 parent 2a0d127
commit 60bea33
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/src/components/biome.astro b/src/components/biome.astro
@@ -30,16 +30,25 @@ const { title, description, features } = Astro.props;
       grid-column: main-features;
 
       > header {
+        display: grid;
+        place-items: start;
+        gap: var(--size-2);
         margin-block-end: var(--size-8);
-        padding-block-end: var(--size-10);
+        padding-block: var(--size-10);
         background: var(--surface-1);
-        border-image: conic-gradient(var(--surface-document) 0 0) fill 0
-          //0 100vw;;
+        border-image: var(--_biome-image) repeat fill 0 //0 100vw;;
 
         > h2 {
+          line-height: 1;
           font-family: "Jersey10", sans-serif;
           font-weight: normal;
-          font-size: var(--font-size-8);
+          font-size: clamp(1.25rem, 5vw, 5rem);
+
+          &,
+          & + p {
+            color: lime;
+            background: #000d;
+          }
         }
       }
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -186,15 +186,15 @@ const timelines = biomes.reduce(
       background-position: top center;
 
       &.desert {
-        background-image: url(/biomes/desert.svg);
+        --_biome-image: url(/biomes/desert.svg);
       }
 
       &.arctic {
-        background-image: url(/biomes/arctic.svg);
+        --_biome-image: url(/biomes/arctic.svg);
       }
 
       &.jungle {
-        background-image: url(/biomes/jungle.svg);
+        --_biome-image: url(/biomes/jungle.svg);
       }
     }
   }