Support project previews

1 files changed, 55 insertions, 0 deletions

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;
+            }
+        }
+    }
+}