Support project previews

8 files changed, 81 insertions, 18 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 756ddb8..52723a3 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -2,7 +2,7 @@ $breakpoints: (
     lg: 1500px,
     md: 900px,
     sm: 600px,
-    xs: 320px,
+    xs: 400px,
 );
 
 $unit-intervals: (
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;
+            }
+        }
+    }
+}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index cbc4388..7c8ad8c 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,13 +1,17 @@
 @include namespace('card-grid') {
     @include store((
         --dims: (
-            --card-width: 17em
+            --col-width: 17em
         )
     ));
 
     @include layout(namespace()) {
         display:               grid;
-        grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
         gap:                   .6rem;
+
+        @include media('<=sm') {
+            grid-template-columns: 1fr;
+        }
     }
 }
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss
new file mode 100644
index 0000000..df2952b
--- /dev/null
+++ b/assets/css/layouts/_project-grid.scss
@@ -0,0 +1,17 @@
+@include namespace('project-grid') {
+    @include store((
+        --dims: (
+            --col-width: 26em
+        )
+    ));
+
+    @include layout(namespace()) {
+        display:               grid;
+        grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+        gap:                   1rem;
+
+        @include media('<=sm') {
+            grid-template-columns: 1fr;
+        }
+    }
+}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 70ace4c..51e3dc8 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -25,7 +25,6 @@
             left:           0;
             flex-direction: row;
             justify-self:   flex-start;
-            padding-right:  prop(--dims --outer, $global: true);
             font-size:      1 / 16 * 15em;
 
             &::after {
@@ -38,11 +37,5 @@
                 border-top:   1px solid prop(--colors --border);
             }
         }
-
-        @include media('<=sm') {
-            @include element('head') {
-                padding-right: 0;
-            }
-        }
     }
 }
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 1d19aae..958710c 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -13,6 +13,7 @@
 @import 'layouts/section';
 @import 'layouts/landing';
 @import 'layouts/card-grid';
+@import 'layouts/project-grid';
 
 @import 'objects/icon';
 @import 'objects/button';
@@ -22,6 +23,7 @@
 @import 'components/landing-banner';
 @import 'components/footer';
 @import 'components/card';
+@import 'components/project';
 
 @import 'scopes/body';