Update feature component styles and responsive layout

cdlib · Jun 12, 2024 · 175cd44 · 175cd44
2 parents 5403c83 + 8d636e2
commit 175cd44
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/css/components/feature.css b/css/components/feature.css
@@ -5,11 +5,10 @@
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto 1fr auto;
   gap: var(--space-base);
-  padding: var(--space-base);
+  padding: 1.5rem 2rem;
   border-top: 3px solid var(--color-gold);
   border-radius: var(--border-block-end-radius);
   background-color: white;
-  container-type: inline-size;
 
   & h1 {
     margin: unset;
@@ -31,12 +30,12 @@
 .c-feature__media {
   grid-column: 1 / 3;
   grid-row: 2;
-  border: 2px solid black;
+  border: 1px solid oklch(88% 0.015 85deg);
 
   & img {
+    display: block;
     block-size: 100%;
     inline-size: 100%;
-    object-fit: cover;
   }
 }
 
@@ -46,35 +45,28 @@
   grid-column: 1 / 3;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-around;
-  gap: var(--space-base);
+  margin-block-start: var(--space-base);
+  gap: var(--space-lg);
 
   & li {
     all: unset;
   }
-  
+
   & a {
     font-size: 1.2rem;
     font-weight: normal;
     text-decoration: none;
-  
+
     &:active,
     &:hover {
       text-decoration: underline;
     }
   }
-
-  & strong a {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background-color: oklch(98% 0.01 241deg);
-    font-weight: normal;
-  }  
 }
 
-@media (width > 50rem) {
+@media (width >= 50rem) {
   .c-feature {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1.5fr;
 
     & h1 {
       grid-column: 2;
@@ -93,9 +85,56 @@
   .c-feature__media {
     grid-column: 1;
     grid-row: 1 / 5;
+
+    & img {
+      max-block-size: 25rem;
+      object-fit: contain;
+    }
   }
 
   .c-feature__links {
     grid-column: 2;
   }
 }
+
+@media (width >= 80rem) {
+  .c-feature {
+    grid-template-columns: 1fr 1fr;
+    width: calc(100% - var(--space-sm));
+    height: 100%;
+    container-type: size;
+  }
+
+  .c-feature__media {
+    & img {
+      max-block-size: 100%;
+    }
+  }
+}
+
+@container (aspect-ratio <= 1.5 / 1) {
+  .c-feature {
+    & h1 {
+      grid-column: 1;
+    }
+
+    & time {
+      grid-column: 2;
+      place-self: end;
+    }
+
+    & p {
+      grid-column: 1 / 3;
+    }
+  }
+
+  .c-feature__media {
+    grid-column: 1 / 3;
+    grid-row: 2;
+    min-block-size: 100%;
+  }
+
+  .c-feature__links {
+    grid-column: 1 / 3;
+  }
+}
diff --git a/css/templates/home.css b/css/templates/home.css
@@ -79,7 +79,7 @@
   }
 }
 
-@media (width > 90rem) {
+@media (width >= 80rem) {
   .t-home {
     & .t-top-section {
       grid-template-columns: 1fr minmax(0, 59.5rem) minmax(0, 59.5rem) 1fr;

diff --git a/src/components/feature.hbs b/src/components/feature.hbs
@@ -6,7 +6,7 @@
     <img src="{{ feature.image }}" alt="Random nature scene">
   </div>
   <ul class="c-feature__links">
-    <li><strong><a href="">Watch Recording</a></strong></li>
+    <li><a href="">Watch Recording</a></li>
     <li><a href="">All Video Recordings</a></li>
   </ul>
 </article>