From 89cd6bba9463d11779ccce6a58bd4871fffaa6bb Mon Sep 17 00:00:00 2001
From: Johan Brook <johan@lookback.io>
Date: Tue, 9 Apr 2024 20:20:18 +0200
Subject: [PATCH] Typography

---
 src/_includes/css/base.css      |  8 ++++----
 src/_includes/css/books.css     |  5 +++++
 src/_includes/css/prose.css     |  4 ++++
 src/_includes/css/recipe.css    |  2 +-
 src/_includes/css/utils.css     |  5 ++++-
 src/_includes/css/variables.css |  8 +++++---
 src/_includes/layouts/book.njk  |  6 ++++--
 src/_includes/layouts/home.njk  | 18 +++++++++++++++---
 src/_includes/layouts/page.njk  |  4 ++--
 src/index.md                    | 11 -----------
 src/johan.css                   |  1 +
 src/reading.njk                 |  6 +++---
 12 files changed, 48 insertions(+), 30 deletions(-)
 create mode 100644 src/_includes/css/books.css

diff --git a/src/_includes/css/base.css b/src/_includes/css/base.css
index 44ff01d74..da99fe591 100644
--- a/src/_includes/css/base.css
+++ b/src/_includes/css/base.css
@@ -51,13 +51,12 @@ input, textarea {
 :where(h1, h2, h3, h4, h5, h6) {
     margin-block-end: 0.5rlh;
     color: var(--color-text-high-contrast);
-    font-family: var(--serif);
+    font-weight: 600;
 }
 
 :is(.f0, .title) {
     font-family: var(--sans);
     font-size: var(--f0);
-    font-weight: 650;
     letter-spacing: var(--tracking-f0);
 }
 
@@ -189,6 +188,7 @@ img {
 
 figcaption {
     color: var(--grey);
+    font-family: var(--sans);
 }
 
 table {
@@ -206,14 +206,14 @@ tr {
     }
 
     & > td:first-of-type {
-        font-weight: bold;
+        font-weight: 600;
     }
 }
 
 th {
     border-bottom: 3px double var(--grey);
     padding: var(--spacing);
-    font-weight: bold;
+    font-weight: 850;
     position: sticky;
     top: 0;
     background-color: var(--color-bg);
diff --git a/src/_includes/css/books.css b/src/_includes/css/books.css
new file mode 100644
index 000000000..8af0fbd6b
--- /dev/null
+++ b/src/_includes/css/books.css
@@ -0,0 +1,5 @@
+.Book {
+    header {
+        font-family: var(--serif);
+    }
+}
diff --git a/src/_includes/css/prose.css b/src/_includes/css/prose.css
index c9c3bae62..42c8d5a28 100644
--- a/src/_includes/css/prose.css
+++ b/src/_includes/css/prose.css
@@ -4,6 +4,10 @@ PROSE
 
 .prose {
 
+    :where(h1, h2, h3, h4, h5, h6) {
+        font-family: var(--serif);
+    }
+
     h1 {
         border-bottom: 1px solid var(--border-color);
         padding-bottom: 0.25lh;
diff --git a/src/_includes/css/recipe.css b/src/_includes/css/recipe.css
index 66da8f86e..905c5fff0 100644
--- a/src/_includes/css/recipe.css
+++ b/src/_includes/css/recipe.css
@@ -22,7 +22,7 @@
 }
 
 .recipe-ingredients, .recipe--ingredient {
-    font-weight: 430;
+    font-weight: var(--fw-stronger);
     color: var(--color-text-high-contrast);
 }
 
diff --git a/src/_includes/css/utils.css b/src/_includes/css/utils.css
index bca8420cc..a1301884b 100644
--- a/src/_includes/css/utils.css
+++ b/src/_includes/css/utils.css
@@ -84,6 +84,10 @@ FONT WEIGHTS
     font-weight: bold;
 }
 
+.stronger {
+    font-weight: var(--fw-stronger);
+}
+
 .fw1 {
     font-weight: 100;
 }
@@ -882,7 +886,6 @@ COLOURS
 
 .subhead {
     color: var(--color-text-detail);
-    font-family: var(--sans);
 }
 
 /*
diff --git a/src/_includes/css/variables.css b/src/_includes/css/variables.css
index a78fd457b..7d34c8a76 100644
--- a/src/_includes/css/variables.css
+++ b/src/_includes/css/variables.css
@@ -68,14 +68,16 @@
 
     --leading: 1.618;
 
+    --fw-stronger: 450;
+
     --tracking: -0.014em;
     --tracking-f0: 0;
     --tracking-f1: -0.021em;
     --tracking-f2: -0.02em;
     --tracking-f3: -0.018em;
-    --tracking-f4: -0.014em;
-    --tracking-f5: -0.009em;
-    --tracking-f6: -0.0025em;
+    --tracking-f4: 0;
+    --tracking-f5: 0;
+    --tracking-f6: 0;
 
     /* @link @link https://utopia.fyi/clamp/calculator?a=320,653,32—60 */
     @utopia clamps({
diff --git a/src/_includes/layouts/book.njk b/src/_includes/layouts/book.njk
index ffc6dccc5..75d30514e 100644
--- a/src/_includes/layouts/book.njk
+++ b/src/_includes/layouts/book.njk
@@ -4,8 +4,10 @@ layout: layouts/main.njk
 
 <main role="main">
     <article class="Book">
-        <h1 class="mb1">“{{ title }}”</h1>
-        <p class="subhead mb5"><i>By</i> {{ author }}</p>
+        <header>
+            <h1 class="mb1">“{{ title }}”</h1>
+            <p class="subhead mb5"><i>By</i> {{ author }}</p>
+        </header>
 
         <table>
             <tr>
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
index eb1c05038..568fdbb5e 100644
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@@ -3,10 +3,22 @@ layout: layouts/main.njk
 home: true
 ---
 <main role="main">
-    <article class="mb4">
-       	<h1 class="title leading-none hide-mobile mb4">Welcome</h1>
+    <article class="mb4 stronger">
+       	<h1 class="title leading-none hide-mobile mb2">Welcome</h1>
+
+      	<div class="prose">{{ content | safe }}</div>
+
+       {% if currentBook() %}
+       <hr />
+
+       <p>I'm currently <a href="/reading">reading</a> “<u class="b">{{ currentBook().title }}</u>” by {{ currentBook().author }}.
+
+       {% endif %}
+
+       <hr />
+
+       <p>My fav track <time title="Updated at {{ current_track.updatedAt | date('yyyy-MM-dd')}}" datetime="{{ current_track.updatedAt }}">at the moment</time> is ♫ <u class="b">{{ current_track.name }}</u> by {{ current_track.artist }}.</p>
 
-      	<div>{{ content | safe }}</div>
 
     </article>
 
diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk
index ea6988a82..d52d0831a 100644
--- a/src/_includes/layouts/page.njk
+++ b/src/_includes/layouts/page.njk
@@ -4,8 +4,8 @@ layout: layouts/main.njk
 
 <main role="main">
   <article class="Page">
-    <header class="mb3">
-        <h1 class="title {{ "comp-" + color if color }}">{{ title }}</h1>
+    <header>
+        <h1 class="title mb0 {{ "comp-" + color if color }}">{{ title }}</h1>
     	{% if subtitle %}
     		<p class="subhead mb0">{{ subtitle | md(true) | safe }}</p>
     	{% endif %}
diff --git a/src/index.md b/src/index.md
index ced66b3d4..321da69dd 100644
--- a/src/index.md
+++ b/src/index.md
@@ -10,14 +10,3 @@ interface design. And other things too.
 I'd like to write more (don't we all), and I consume a (un)healthy amount of music.
 
 You can reach me via [email](mailto:{{ meta.email }}) or [Mastodon]({{ '' | mastodonUrl }}).
-
-{% if currentBook() %}
-***
-
-I'm currently [reading](/reading) “<u class="b">{{ currentBook().title }}</u>” by {{ currentBook().author }}.
-
-{% endif %}
-
-***
-
-My fav track <time title="Updated at {{ current_track.updatedAt | date('yyyy-MM-dd')}}" datetime="{{ current_track.updatedAt }}">at the moment</time> is ♫ <u class="b">{{ current_track.name }}</u> by {{ current_track.artist }}.
diff --git a/src/johan.css b/src/johan.css
index adcaa4fb9..d262824d3 100644
--- a/src/johan.css
+++ b/src/johan.css
@@ -22,6 +22,7 @@ Just kidding.
 @import 'css/changelog.css';
 @import 'css/oblique-strategies.css';
 @import 'css/recipe.css';
+@import 'css/books.css';
 
 @import 'css/typeset.css';
 @import 'css/utils.css';
diff --git a/src/reading.njk b/src/reading.njk
index c00f314f2..d85795100 100644
--- a/src/reading.njk
+++ b/src/reading.njk
@@ -24,7 +24,7 @@ menu:
                 <h1 class="mv0">{{ year }}</h1>
                 <p class="muted mb0 font-sans f5">{{ bookz.length }} books</p>
             </header>
-    		<table class="textual f5">
+    		<table class="f5">
                	<tr>
               		<th>Title</th>
               		<th>Author</th>
@@ -33,14 +33,14 @@ menu:
                	</tr>
                 {% for book in bookz | reverse %}
                     <tr id="{{ book.slug }}">
-                   	<td width="25%" class="text-color-contrast">
+                   	<td width="25%" class="text-color-contrast f4">
        					<a href="{{ '/reading' | url }}/{{book.slug}}/" class="no-link">{{ book.title }}  <span class="muted">→</span></a>
                    	</td>
                    	<td width="15%">
                   		{{ book.author }}
                    	</td>
                    	<td>
-       					{{ book.notes | excerpt | md(true) | safe }}
+       					<div class="prose">{{ book.notes | excerpt | md | safe }}</div>
 
                         {% if didExcerpt(book.notes) %}
                             <p class="f6 mb0">