Add image fade on article

chromeos · Oct 12, 2023 · 6477159 · 6477159
1 parent db49df9
commit 6477159
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/site/en/discover/article.njk b/site/en/discover/article.njk
@@ -9,7 +9,7 @@ permalink: '/discover/{{article.title | slugify}}/'
 
 <article class="_discover-article">
   <img class="_discover-article--image" src="{{article.bannerImageUrl | deunicode}}" alt="" />
-  <div class="_discover--inline-container">
+  <div class="_discover-article--contained">
     <div class="_discover-article--container">
       <header>
         {% if article.iconUrl %}

diff --git a/site/sass/discover.scss b/site/sass/discover.scss
@@ -103,7 +103,7 @@
 // Article
 ._discover-article {
   $big: calc(80ch + 300px + 11rem);
-  container-type: inline-size;
+  $image: calc(50vh - 4rem);
 
   .type {
     h2,
@@ -137,15 +137,21 @@
 
   &--image {
     display: block;
-    height: 33vh;
+    height: $image;
+    left: 0;
 
     margin: 0 auto;
     object-fit: cover;
+    position: fixed;
+    top: 4rem;
     width: 100%;
+    z-index: -1;
+  }
 
-    @container (min-width: calc(80ch + 2px)) {
-      // Fixed
-    }
+  &--contained {
+    container-type: inline-size;
+    margin-top: $image;
+    width: 100%;
   }
 
   &--container {
@@ -173,13 +179,12 @@
     }
 
     &::before {
-      background-image: linear-gradient(to bottom, transparent, var(--white) 33vh);
+      background-image: linear-gradient(to bottom, transparent 3rem, var(--white) #{$image});
       content: '';
       height: 100%;
-      left: -3rem;
-      // background-color: blue;
+      left: -25vw;
       position: absolute;
-      width: 100vw;
+      width: 150vw;
       z-index: -1;
     }
   }