From 212188e391daabe6492f2b49e7e689b9aecb138b Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 23 Nov 2021 21:28:02 +0100
Subject: Update

---
 assets/css/components/_note.scss  | 23 +++++++++++
 assets/css/style.scss             |  1 +
 content/9thPK7O3xn/index.md       |  4 +-
 content/9thPK7O3xn/posts/fox.md   | 12 ++++++
 filters/macros.lua                |  8 ++++
 templates/partials/grid_card.html | 72 ++++++++++++++++++-----------------
 templates/partials/list_card.html | 80 ++++++++++++++++++++-------------------
 7 files changed, 125 insertions(+), 75 deletions(-)
 create mode 100644 assets/css/components/_note.scss
 create mode 100644 content/9thPK7O3xn/posts/fox.md
 create mode 100644 filters/macros.lua

diff --git a/assets/css/components/_note.scss b/assets/css/components/_note.scss
new file mode 100644
index 0000000..1879ea9
--- /dev/null
+++ b/assets/css/components/_note.scss
@@ -0,0 +1,23 @@
+@include namespace('note') {
+    @include store((
+        --colors: (
+            --fg: prop(--colors --accent --strong, $global: true),
+            --bg: prop(--colors --accent --faint, $global: true),
+        ),
+        --dims: (
+            --pad-x: 1em,
+            --pad-y: .7em
+        )
+    ));
+
+    @include component(namespace()) {
+        margin-top:       $line-height * 1rem;
+        padding:          prop(--dims --pad-y) prop(--dims --pad-x);
+        background-color: prop(--colors --bg);
+        color:            prop(--colors --fg);
+
+        :first-child {
+            margin-top: 0;
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 9c57b28..db8f232 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -16,6 +16,7 @@
 @import 'components/header';
 @import 'components/footer';
 @import 'components/card';
+@import 'components/note';
 
 @import 'layouts/card-list';
 
diff --git a/content/9thPK7O3xn/index.md b/content/9thPK7O3xn/index.md
index 370eee4..e190ea7 100644
--- a/content/9thPK7O3xn/index.md
+++ b/content/9thPK7O3xn/index.md
@@ -5,4 +5,6 @@ feed:     true
 ---
 
 Content that doesn't belong in the public sections of my website such as test pages or posts about more personal topics.
-Feel free to share pages from here *privately* --- i.e. not on public social media posts --- if you think someone would like them.
+
+The purpose of this section is *not* to be only accessible for specific people, but simply to be a bit more tricky to find.
+Feel free to share pages from here *privately* if you think someone would like them.
diff --git a/content/9thPK7O3xn/posts/fox.md b/content/9thPK7O3xn/posts/fox.md
new file mode 100644
index 0000000..772422e
--- /dev/null
+++ b/content/9thPK7O3xn/posts/fox.md
@@ -0,0 +1,12 @@
+---
+title:    I Am (Not) a Fox
+unlisted: true
+---
+
+I wish I was a fox.
+
+You see statements like this pretty often on social media nowadays, usually packaged as a meme and meant to express the desire to escape the stressful life of a human being.
+
+In this case, however, I'm entirely serious.
+
+
diff --git a/filters/macros.lua b/filters/macros.lua
new file mode 100644
index 0000000..9e9d954
--- /dev/null
+++ b/filters/macros.lua
@@ -0,0 +1,8 @@
+function Div(el)
+    if el.classes:includes("note") then
+        el.classes = pandoc.List()
+        el.classes:insert("c-note")
+    end
+
+    return el
+end
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 9cd8463..6f6c16e 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -1,36 +1,38 @@
-<a href="$it.url.rel$" class="l-card-list__card c-card">
-    $if(it.indicator)$
-        <div class="c-card__block c-card__block--indicator"></div>
-    $endif$
-    $if(it.icon)$
-        <svg class="c-card__block o-icon" width="1em" height="1em">
-            <use href="/symbols.svg#icon-$it.icon$"></use>
-        </svg>
-    $endif$
-    <div class="c-card__block c-card__block--main">
-        $if(it.subtitle)$
-            <strong class="u-db u-elp">$it.title$</strong>
-            <small class="u-db u-elp">$it.subtitle$</small>
-        $elseif(it.category)$
-            <small class="u-db u-elp">$it.category$</small>
-            <strong class="u-db u-elp">$it.title$</strong>
-        $elseif(it.date)$
-            <time datetime="$it.date.yyyy_mm_dd$">
-                <small class="u-dn@sm-hi">
-                    $it.date.short$
-                </small>
-                <small class="u-dn@sm-lo">
-                    $it.date.long$
-                </small>
-            </time>
-            <strong class="u-db u-elp">$it.title$</strong>
-        $else$
-            $it.title$
+$if(it.url)$
+    <a href="$it.url.rel$" class="l-card-list__card c-card">
+        $if(it.indicator)$
+            <div class="c-card__block c-card__block--indicator"></div>
         $endif$
-    </div>
-    $if(it.post_icon)$
-        <svg class="c-card__block o-icon" width="1em" height="1em">
-            <use href="/symbols.svg#icon-$it.post_icon$"></use>
-        </svg>
-    $endif$
-</a>
+        $if(it.icon)$
+            <svg class="c-card__block o-icon" width="1em" height="1em">
+                <use href="/symbols.svg#icon-$it.icon$"></use>
+            </svg>
+        $endif$
+        <div class="c-card__block c-card__block--main">
+            $if(it.subtitle)$
+                <strong class="u-db u-elp">$it.title$</strong>
+                <small class="u-db u-elp">$it.subtitle$</small>
+            $elseif(it.category)$
+                <small class="u-db u-elp">$it.category$</small>
+                <strong class="u-db u-elp">$it.title$</strong>
+            $elseif(it.date)$
+                <time datetime="$it.date.yyyy_mm_dd$">
+                    <small class="u-dn@sm-hi">
+                        $it.date.short$
+                    </small>
+                    <small class="u-dn@sm-lo">
+                        $it.date.long$
+                    </small>
+                </time>
+                <strong class="u-db u-elp">$it.title$</strong>
+            $else$
+                $it.title$
+            $endif$
+        </div>
+        $if(it.post_icon)$
+            <svg class="c-card__block o-icon" width="1em" height="1em">
+                <use href="/symbols.svg#icon-$it.post_icon$"></use>
+            </svg>
+        $endif$
+    </a>
+$endif$
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html
index b784c1e..73caa05 100644
--- a/templates/partials/list_card.html
+++ b/templates/partials/list_card.html
@@ -1,40 +1,42 @@
-<a href="$it.url.rel$" class="l-card-list__card c-card">
-    $if(it.indicator)$
-        <div class="c-card__block c-card__block--indicator"></div>
-    $endif$
-    $if(it.icon)$
-        <svg class="c-card__block o-icon" width="1em" height="1em">
-            <use href="/symbols.svg#icon-$it.icon$"></use>
-        </svg>
-    $endif$
-    <div class="c-card__block c-card__block--main">
-        $it.title$
-    </div>
-    $if(it.subtitle)$
-        <div class="c-card__block u-fs0">
-            <small>
-                $it.subtitle$
-            </small>
+$if(it.url)$
+    <a href="$it.url.rel$" class="l-card-list__card c-card">
+        $if(it.indicator)$
+            <div class="c-card__block c-card__block--indicator"></div>
+        $endif$
+        $if(it.icon)$
+            <svg class="c-card__block o-icon" width="1em" height="1em">
+                <use href="/symbols.svg#icon-$it.icon$"></use>
+            </svg>
+        $endif$
+        <div class="c-card__block c-card__block--main">
+            $it.title$
         </div>
-    $elseif(it.category)$
-        <div class="c-card__block u-fs0">
-            <small>
-                $it.category$
-            </small>
-        </div>
-    $elseif(it.date)$
-        <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
-            <small class="u-dn@sm-hi">
-                $it.date.short$
-            </small>
-            <small class="u-dn@sm-lo">
-                $it.date.long$
-            </small>
-        </time>
-    $endif$
-    $if(it.post_icon)$
-        <svg class="c-card__block o-icon" width="1em" height="1em">
-            <use href="/symbols.svg#icon-$it.post_icon$"></use>
-        </svg>
-    $endif$
-</a>
+        $if(it.subtitle)$
+            <div class="c-card__block u-fs0">
+                <small>
+                    $it.subtitle$
+                </small>
+            </div>
+        $elseif(it.category)$
+            <div class="c-card__block u-fs0">
+                <small>
+                    $it.category$
+                </small>
+            </div>
+        $elseif(it.date)$
+            <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
+                <small class="u-dn@sm-hi">
+                    $it.date.short$
+                </small>
+                <small class="u-dn@sm-lo">
+                    $it.date.long$
+                </small>
+            </time>
+        $endif$
+        $if(it.post_icon)$
+            <svg class="c-card__block o-icon" width="1em" height="1em">
+                <use href="/symbols.svg#icon-$it.post_icon$"></use>
+            </svg>
+        $endif$
+    </a>
+$endif$
-- 
cgit v1.2.3-70-g09d2