Update

6 files changed, 28 insertions, 8 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 7bd76f3..37d4b0e 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -25,6 +25,7 @@
         display:          flex;
         position:         relative;
         align-items:      center;
+        transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s;
         background-color: prop(--colors --bg);
         line-height:      1.4;
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
index 301827c..6fac047 100644
--- a/assets/css/components/_project.scss
+++ b/assets/css/components/_project.scss
@@ -16,11 +16,6 @@
             background-color: prop(--colors --bg);
         }
 
-        &::after {
-            content:          '';
-            background-image: linear-gradient(340deg, rgba(#000, .25) 5em, transparent 18em);
-        }
-
         &:link,
         &:visited {
             color:           currentColor;
@@ -44,7 +39,7 @@
             }
         }
 
-        @include multi('element' 'picture', '&::after') {
+        @include multi('element' 'picture') {
             display:          block;
             position:         absolute;
             z-index:          10;
@@ -68,11 +63,12 @@
 
         @include element('picture') {
             transition: opacity .2s;
+            mask-image: iro-easing-gradient(linear, 340deg, rgba(#000, .75) 7em, ease, #000 26em);
         }
 
         @include media('<=sm') {
-            &::after {
-                background-image: linear-gradient(to top, rgba(#000, .25) 1em, transparent 11em);
+            @include element('picture') {
+                mask-image: iro-easing-gradient(linear, to top, rgba(#000, .75) 2em, ease, #000 17em);
             }
         }
     }
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 51e3dc8..1bc86fe 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -3,9 +3,14 @@
         --colors: (
             --border: prop(--colors --obj-hi, $global: true),
         ),
+        --dims: (
+            --banner-blur: .5rem,
+        )
     ));
 
     @include layout(namespace()) {
+        position: relative;
+
         @include modifier('fullscreen') {
             box-sizing:     border-box;
             min-height:     100%;
@@ -37,5 +42,18 @@
                 border-top:   1px solid prop(--colors --border);
             }
         }
+
+        @include element('banner') {
+            position:        absolute;
+            z-index:         -20;
+            top:             calc(-2 * #{prop(--dims --banner-blur)});
+            left:            calc(-2 * #{prop(--dims --banner-blur)});
+            width:           calc(100% + 4 * #{prop(--dims --banner-blur)});
+            height:          60rem;
+            object-fit:      cover;
+            object-position: top center;
+            filter:          blur(#{prop(--dims --banner-blur)});
+            mask-image:      iro-easing-gradient(linear, to bottom, rgba(#000, .25), ease, transparent);
+        }
     }
 }
diff --git a/content/projects/blobfox-emojis/index.md b/content/projects/blobfox-emojis/index.md
index aea2e45..75a96d8 100644
--- a/content/projects/blobfox-emojis/index.md
+++ b/content/projects/blobfox-emojis/index.md
@@ -2,6 +2,7 @@
 title: Blobfox
 category: emj
 preview: preview.png
+banner: preview.png
 ---
 
 ![](screenshot.png)
diff --git a/content/projects/bunhd-emojis/index.md b/content/projects/bunhd-emojis/index.md
index 75d4b3f..ecd049f 100644
--- a/content/projects/bunhd-emojis/index.md
+++ b/content/projects/bunhd-emojis/index.md
@@ -2,6 +2,7 @@
 title: BunHD
 category: emj
 preview: preview.png
+banner: preview.png
 ---
 
 ![](screenshot.png)
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index b6ff7c3..877abee 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,4 +1,7 @@
 <section class="l-section l-section--fullscreen l-section--no-head">
+    $if(banner)$
+        <img class="l-section__banner" src="$banner$" />
+    $endif$
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-body">
         <h1>$title$</h1>