Typography

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);

src/_includes/css/books.css

@@ -0,0 +1,5 @@
+.Book {
+    header {
+        font-family: var(--serif);
+    }
+}

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;

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);
 }
 

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);
 }
 
 /*

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({

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>

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>
 

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 %}

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 }}.

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';

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">