Display single page date in a box

3 files changed, 22 insertions, 6 deletions

diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss
index ededaad..a04512a 100644
--- a/assets/css/scopes/_body.scss
+++ b/assets/css/scopes/_body.scss
@@ -1,17 +1,29 @@
 @include namespace('body') {
     @include store((
         --colors: (
-            --meta: prop(--colors --fg-hi, $global: true),
+            --meta: (
+                --fg: prop(--colors --fg-hi, $global: true),
+                --bg: prop(--colors --bg-hi, $global: true),
+            ),
             --code: (
                 --fg: prop(--colors --accent --strong, $global: true),
                 --bg: prop(--colors --bg-hi, $global: true),
             ),
             --obj-border: prop(--colors --obj, $global: true),
+        ),
+        --dims: (
+            --meta: (
+                --pad-x: .6em,
+                --pad-y: .2em
+            )
         )
     ));
 
     @include store((
         --colors: (
+            --meta: (
+                --bg: prop(--colors --bg, $global: true),
+            ),
             --code: (
                 --bg: prop(--colors --accent --faint, $global: true),
             ),
@@ -23,8 +35,11 @@
         font-size: 1 / 16 * 19em;
 
         @include element('meta') {
-            color:     prop(--colors --meta);
-            font-size: 1 / 16 * 15rem;
+            display:          inline-block;
+            padding:          prop(--dims --meta --pad-y) prop(--dims --meta --pad-x);
+            background-color: prop(--colors --meta --bg);
+            color:            prop(--colors --meta --fg);
+            font-size:        1 / 16 * 14rem;
 
             + h1 {
                 margin-top: $line-height * .5rem;
diff --git a/content/9thPK7O3xn/dreams/infinite-skyscrapers.md b/content/9thPK7O3xn/dreams/infinite-skyscrapers.md
index eb3485b..b8289f8 100644
--- a/content/9thPK7O3xn/dreams/infinite-skyscrapers.md
+++ b/content/9thPK7O3xn/dreams/infinite-skyscrapers.md
@@ -1,6 +1,7 @@
 ---
-date:  2021-01-09
-title: Infinite Skyscrapers
+date:      2021-01-09
+title:     Infinite Skyscrapers
+show_date: true
 ---
 
 I'm in some strange world that consist of huge buildings, looking a lot like very simple skyscrapers, except they were all interconnected.
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 3763c62..32ceb98 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,6 +1,6 @@
 <section class="l-section l-section--fullscreen l-section--no-head l-section--body">
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body">
-        $if(category.show_date)$
+        $if(show_date)$
             <div class="s-body__meta">
                 $date.long$
             </div>