Support project previews

3 files changed, 55 insertions, 8 deletions

diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index fcea457..cf02d04 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -11,7 +11,6 @@
         align-items:     center;
         justify-content: space-between;
         height:          prop(--dims --outer, $global: true);
-        padding-right:   prop(--dims --outer, $global: true);
         font-size:       1 / 16 * 15em;
 
         @include element('content') {
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index d636f7d..4e7a242 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -27,13 +27,6 @@
         font-weight:      450;
         text-decoration:  none;
 
-        @include modifier('scroll-top') {
-            position: fixed;
-            z-index:  9000;
-            right:    0;
-            bottom:   0;
-        }
-
         @include modifier('inverted') {
             background-color: prop(--colors --inverted --bg);
             color:            prop(--colors --inverted --fg);
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
new file mode 100644
index 0000000..943bf68
--- /dev/null
+++ b/assets/css/components/_project.scss
@@ -0,0 +1,55 @@
+@include namespace('project') {
+    @include store((
+        --colors: (
+            --bg: prop(--colors --bg-hi, $global: true),
+        )
+    ));
+
+    @include component(namespace()) {
+        position: relative;
+
+        &::before {
+            content:          '';
+            display:          block;
+            padding-bottom:   20em;
+            background-color: prop(--colors --bg);
+        }
+
+        &::after {
+            content:          '';
+            background-image: linear-gradient(340deg, rgba(#000, .85) 5em, transparent 100%);
+        }
+
+        @include multi('element' 'picture', '&::after') {
+            display:          block;
+            position:         absolute;
+            z-index:          10;
+            top:              0;
+            left:             0;
+            width:            100%;
+            height:           100%;
+            object-fit:       cover;
+            object-position:  center center;
+        }
+
+        @include element('card') {
+            position:   absolute;
+            z-index:    20;
+            right:      1em;
+            bottom:     1em;
+            min-width:  15em;
+            box-shadow: 0 .3em 1em rgba(#000, .5);
+        }
+
+        @include media('<=sm') {
+            &::after {
+                background-image: linear-gradient(to top, rgba(#000, .85) 5em, transparent 100%);
+            }
+
+            @include element('card') {
+                left:      1em;
+                min-width: 0;
+            }
+        }
+    }
+}