Simplified metadata processing, improved design

6 files changed, 68 insertions, 8 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 0df3a61..78a451b 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -26,7 +26,7 @@ $content--width:  42rem;
 
 $gray0: hsl(220, 7%, 7%);
 $gray1: hsl(220, 7%, 11%);
-$gray2: hsl(220, 7%, 18%);
+$gray2: hsl(220, 7%, 17%);
 $gray3: hsl(220, 7%, 23%);
 $gray4: hsl(220, 7%, 38%);
 $gray5: hsl(220, 7%, 60%);
@@ -57,7 +57,7 @@ $gray7: hsl(220, 7%, 100%);
             --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
         ),
 
-        --focus-ring: var(--colors--accent--color),
+        --focus-ring: var(--colors--fg-lo),
 
         --select: (
             --bg:     rgba($gray7, .996),
@@ -67,7 +67,11 @@ $gray7: hsl(220, 7%, 100%);
 
         --link: (
             --idle: var(--colors--fg-lo),
-        )
+            --colored: (
+                --idle:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
+                --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+            )
+        ),
     )
 ));
 
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;
+        }
+    }
+}
diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss
index 25ed289..9be0f93 100644
--- a/assets/css/scopes/_colored-links.scss
+++ b/assets/css/scopes/_colored-links.scss
@@ -2,8 +2,8 @@
     @include store((
         --colors: (
             --link: (
-                --idle:    hsl(210, 90%, 72%), // hsl(354, 100%, 66%),
-                --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%),
+                --idle:    prop(--colors --link --colored --idle, $global: true),
+                --visited: prop(--colors --link --colored --visited, $global: true),
             )
         )
     ));
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss
index 8b75708..367e093 100644
--- a/assets/css/scopes/_headlines.scss
+++ b/assets/css/scopes/_headlines.scss
@@ -38,7 +38,6 @@
         h3 {
             @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale);
 
-            letter-spacing: .05em;
             text-transform: uppercase;
         }
 
@@ -47,7 +46,7 @@
         h6 {
             @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale);
 
-            letter-spacing: .1em;
+            letter-spacing: .5px;
             text-transform: uppercase;
         }
 
diff --git a/assets/css/style.scss b/assets/css/style.scss
index e4a36b0..30878fe 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -23,6 +23,7 @@
 @import 'components/footer';
 @import 'components/card';
 @import 'components/project';
+@import 'components/post-list';
 
 @import 'scopes/colored-links';
 @import 'scopes/headlines';