Support project previews

16 files changed, 115 insertions, 42 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';
 
diff --git a/content/projects/blobfox-emojis/.preview.png b/content/projects/blobfox-emojis/.preview.png
new file mode 100644
index 0000000..16c7bf0
--- /dev/null
+++ b/content/projects/blobfox-emojis/.preview.png
diff --git a/content/projects/blobfox-emojis/index.md b/content/projects/blobfox-emojis/index.md
index 92c26d4..aea2e45 100644
--- a/content/projects/blobfox-emojis/index.md
+++ b/content/projects/blobfox-emojis/index.md
@@ -1,6 +1,7 @@
 ---
 title: Blobfox
 category: emj
+preview: preview.png
 ---
 
 ![](screenshot.png)
diff --git a/content/projects/blobfox-emojis/preview.png b/content/projects/blobfox-emojis/preview.png
new file mode 100644
index 0000000..7e30573
--- /dev/null
+++ b/content/projects/blobfox-emojis/preview.png
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index 83b6908..e627edc 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -82,6 +82,7 @@ get_subpages_metadata() {
             date: .date, \
             last_update: .last_update, \
             category: .category, \
+            preview: .preview, \
             content: \"$content\" \
         } | del(.[] | nulls)")
         local title=$(echo "$metadata" | jq ".title")
diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua
index 499cf3e..21698bd 100644
--- a/scripts/metadata_filter.lua
+++ b/scripts/metadata_filter.lua
@@ -260,14 +260,18 @@ function Meta(meta)
 
     meta.file_out = get_file_out(meta.rewrites, meta.content_dir,
                                  meta.output_dir, meta.file_in)
-    if meta.relative_to == nil then
-        meta.relative_to = meta.file_in
-    end
+    if meta.relative_to == nil then meta.relative_to = meta.file_in end
     meta.relative_to_out = get_file_out(meta.rewrites, meta.content_dir,
                                         meta.output_dir, meta.relative_to)
 
     meta.url = resolve_url(meta.site.url, meta.output_dir, meta.relative_to_out,
                            meta.file_out)
+    if meta.preview ~= nil then
+        meta.preview = pandoc.utils.stringify(meta.preview)
+        meta.preview = meta.file_out:gsub("/index%.html$", "/" .. meta.preview)
+        meta.preview = resolve_url(meta.site.url, meta.output_dir,
+                                   meta.relative_to_out, meta.preview)
+    end
 
     meta.date = format_date(meta.date)
     if meta.last_update ~= nil then
diff --git a/scripts/watch_content.sh b/scripts/watch_content.sh
index dfaa638..30f8a6c 100755
--- a/scripts/watch_content.sh
+++ b/scripts/watch_content.sh
@@ -7,7 +7,7 @@ inotifywait -qrme close_write,delete,move --format "%w%f" "${CONTENT_DIR%/}" \
         do
             if [ -f "$file" ]; then
                 # scripts/build_content.sh "single" "$file"
-                scripts/build_content.sh "all_md"
+                scripts/build_content.sh
             elif [ ! -d "$file" ]; then
                 scripts/build_content.sh "delete" "$file"
             fi
diff --git a/templates/base.html b/templates/base.html
index 794f83f..4ebd507 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -63,18 +63,17 @@ ${layouts/categorized_list()}
 ${layouts/page()}
         $endif$
 
-        <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
-            <span class="c-outer-button__icon">
-                <svg class="c-outer-button__icon-symbol o-icon">
-                    <use href="#icon-arrow-up"></use>
-                </svg>
-            </span>
-        </a>
-
         <footer class="c-footer">
             <div class="c-footer__content">
                 9thPK7O3xn
             </div>
+            <a class="c-outer-button" href="#" title="To the top">
+                <span class="c-outer-button__icon">
+                    <svg class="c-outer-button__icon-symbol o-icon">
+                        <use href="#icon-arrow-up"></use>
+                    </svg>
+                </span>
+            </a>
         </footer>
     </main>
 
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index f97588d..d1821f2 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -50,9 +50,9 @@ $body$
     </section>
 </section>
 
-<section class="l-section">
+<section class="l-section" id="projects">
     <header class="l-section__head">
-        <a class="c-outer-button" href="#projects" id="projects">
+        <a class="c-outer-button" href="#projects">
             <span class="c-outer-button__icon">
                 <svg class="c-outer-button__icon-symbol o-icon">
                     <use href="#icon-arrow-down-right"></use>
@@ -64,17 +64,22 @@ $body$
         </a>
     </header>
 
-    <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid">
+    <div class="l-container l-container--pad-x l-container--pad-y l-project-grid">
         $for(subsections.projects.pages)$
-            <a class="l-card-grid__card c-card" href="$it.url.rel$">
-                <div class="c-card__content">
-                    <small class="u-db">$it.category.name$</small>
-                    <strong class="u-db">$it.title$</strong>
-                </div>
-                <svg class="c-card__icon o-icon">
-                    <use href="#icon-arrow-right"></use>
-                </svg>
-            </a>
+            <div class="c-project">
+                $if(it.preview)$
+                    <img class="c-project__picture" src="$it.preview.rel$" />
+                $endif$
+                <a class="c-project__card c-card" href="$it.url.rel$">
+                    <div class="c-card__content">
+                        <small class="u-db">$it.category.name$</small>
+                        <strong class="u-db">$it.title$</strong>
+                    </div>
+                    <svg class="c-card__icon o-icon">
+                        <use href="#icon-arrow-right"></use>
+                    </svg>
+                </a>
+            </div>
         $endfor$
     </div>
 </section>