Simplified metadata processing, improved design

2 files changed, 57 insertions, 1 deletions

diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index e54c83d..21f78f4 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -26,7 +26,7 @@
         color:            prop(--colors --fg);
         font-size:        1rem;
         font-weight:      700;
-        letter-spacing:   1px;
+        letter-spacing:   .5px;
         text-decoration:  none;
         text-transform:   uppercase;
 
diff --git a/assets/css/components/_post-list.scss b/assets/css/components/_post-list.scss
new file mode 100644
index 0000000..7787efd
--- /dev/null
+++ b/assets/css/components/_post-list.scss
@@ -0,0 +1,56 @@
+@include namespace('post-list') {
+    @include store((
+        --colors: (
+            --cat: (
+                --fg: prop(--colors --fg-lo, $global: true),
+            ),
+            --post: (
+                --bg:     prop(--colors --bg-lo, $global: true),
+                --border: prop(--colors --obj-hi, $global: true),
+            ),
+            --meta: (
+                --fg: prop(--colors --fg-hi, $global: true),
+            )
+        ),
+        --dims: (
+            --pad-x: 1em,
+            --pad-y: .6em,
+        )
+    ));
+
+    @include component(namespace()) {
+        @include element('category-header') {
+            color:          prop(--colors --cat --fg);
+            font-size:      1 / 16 * 14em;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+
+            @include next-element('post') {
+                margin-top: $line-height * .5rem;
+            }
+        }
+
+        @include element('post') {
+            display:          flex;
+            align-items:      baseline;
+            padding:          prop(--dims --pad-y) prop(--dims --pad-x);
+            background-color: prop(--colors --post --bg);
+
+            @include next-twin-element {
+                border-top: 1px solid prop(--colors --post --border);
+            }
+        }
+
+        @include element('post-title') {
+            margin-right: 1em;
+            font-size:    1 / 16 * 17em;
+        }
+
+        @include element('post-date') {
+            flex:        0 0 auto;
+            margin-left: auto;
+            color:       prop(--colors --meta --fg);
+            font-size:   1 / 16 * 14em;
+        }
+    }
+}