Design

6 files changed, 20 insertions, 25 deletions

diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index e153845..31440c3 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -73,3 +73,7 @@
 @include utility('db') {
     display: block;
 }
+
+@include utility('flex-shrink-0') {
+    flex-shrink: 0;
+}
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 9cc0d17..3705b79 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,18 +2,19 @@
     @include store((
         --colors: (
             --fg:     prop(--colors --obj, $global: true),
+            --bg:     prop(--colors --bg, $global: true),
             --ground: prop(--colors --obj, $global: true),
         )
     ));
 
     @include component(namespace()) {
-        position:    relative;
-        min-height:  prop(--dims --outer, $global: true);
-        margin-top:  prop(--dims --outer, $global: true);
-        overflow:    hidden;
-        color:       prop(--colors --fg);
-        font-family: $font-fam--mono;
-        line-height: 1.4;
+        position:         relative;
+        min-height:       prop(--dims --outer, $global: true);
+        overflow:         hidden;
+        background-color: prop(--colors --bg);
+        color:            prop(--colors --fg);
+        font-family:      $font-fam--mono;
+        line-height:      1.4;
 
         &::after {
             content:     str-repeat('░', 400);
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
index dc3eda6..03b5e7a 100644
--- a/assets/css/components/_post-list.scss
+++ b/assets/css/components/_post-list.scss
@@ -36,17 +36,5 @@
                 margin-top: .6rem;
             }
         }
-
-        @include element('post-title') {
-            //font-size:   1 / 16 * 17em;
-            font-weight: normal;
-        }
-
-        @include element('post-date') {
-            flex:       0 0 auto;
-            transition: color .2s;
-            color:      prop(--colors --meta --fg);
-            font-size:  1 / 16 * 14em;
-        }
     }
 }
diff --git a/templates/layouts/ascii_fox.html b/templates/layouts/ascii_fox.html
index 9ae3b29..f5e5316 100644
--- a/templates/layouts/ascii_fox.html
+++ b/templates/layouts/ascii_fox.html
@@ -1,3 +1,4 @@
+                                                                                                                                         
          '                  '       '                                                   '       '                              '         
          '                  '       '      '      '            '      '             '   '       '            '      '          '         
  '  .    |                  |       |      '      '            '      '             '   |       |            '      '          |       ' 
diff --git a/templates/layouts/ascii_fox_small.html b/templates/layouts/ascii_fox_small.html
index bb02a96..ea05aa2 100644
--- a/templates/layouts/ascii_fox_small.html
+++ b/templates/layouts/ascii_fox_small.html
@@ -1,3 +1,4 @@
+                                                                       
   '     '                                        '     '               
   |     |              '    '                '   |     |        '    ' 
   | '   |              '    '                '   |   ' |        '    ' 
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 1a074e4..1101e27 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -14,17 +14,17 @@ $body$
                 <div class="c-post-list__category-content">
                     $for(it.pages)$
                         <a href="$it.url.rel$" class="c-post-list__post c-card">
-                            <div class="c-card__content c-post-list__post-title">
+                            <div class="c-card__content">
                                 $it.title$
                             </div>
                             $if(it.category.show_date)$
-                                <time datetime="$it.date.yyyy_mm_dd$" class="c-post-list__post-date c-card__content">
-                                    <span class="u-dn@sm-hi">
+                                <time datetime="$it.date.yyyy_mm_dd$" class="c-card__content u-flex-shrink-0">
+                                    <small class="u-dn@sm-hi">
                                         $it.date.short$
-                                    </span>
-                                    <span class="u-dn@sm-lo">
+                                    </small>
+                                    <small class="u-dn@sm-lo">
                                         $it.date.long$
-                                    </span>
+                                    </small>
                                 </time>
                             $endif$
                         </a>