Re-skin in serif

johanbrook · Sep 18, 2023 · 2d8ca45 · 2d8ca45
1 parent 73055ee
commit 2d8ca45
Show file tree

Hide file tree

Showing 17 changed files with 122 additions and 157 deletions.
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -5,7 +5,7 @@ home: true
 <main role="main">
   <div class="measure mx-auto">
     <section class="mb4">
-    	<h1 class="title mb3">Welcome.</h1>
+    	<h1 class="title mb2 pull-W">Welcome.</h1>
 
       	{{ content | safe }}
 
@@ -15,22 +15,22 @@ home: true
       <header class="flex items-center">
         <h1 class="f2 mb0">On my mind</h1>
 
-        <a href="/mind" class="ml3 f6" title="Read more">All notes</a>
-        <a href="/mind.xml" class="ml2 ml-1 f6" title="Atom feed">Feed {{ comp.icon({ class: "ml1" }) | safe }}</a>
+        <a href="/mind" class="ml3 f5" title="Read more">All notes</a>
+        <a href="/mind.xml" class="ml2 ml-1 f5" title="Atom feed">Feed {{ comp.icon({ class: "ml1" }) | safe }}</a>
       </header>
 
-      <ol class="list-reset">
+      <ol>
         {% for note in search.pages("type=note", "date=desc", 1) %}
           <li>
-            <h2 class="f5 fw4 mb3">
+            <h2 class="font-sans f5 fw4 mb3">
               <a href="{{ note.data.permalink() | url }}" class="muted">Latest: {{ note.data.date | date("PPP — HH:mm")}}</a>
             </h2>
             <div class="prose font-mono f5">
               {{ note.data.content | excerpt | md | safe }}
             </div>
 
             {% if (note.data.content | excerpt | length) < (note.data.content | trim | length)  %}
-                <p class="mt2">
+                <p class="mt2 font-sans">
                   <a href="{{ note.data.permalink() | url }}" class="muted f5">continued ⇢</a>
                 </p>
             {% endif %}
@@ -41,7 +41,7 @@ home: true
 
     <section class="mb4">
     	<h1 class="f2 mb0">Listening</h1>
-    	<p class="f5 fw4 mb3 muted" id="music-loading">Tracks I've listened to recently.</p>
+    	<p class="font-sans f5 fw4 mb3 muted" id="music-loading">Tracks I've listened to recently.</p>
     	<ol id="music-target" class="TracksList">
 
     	</ol>
@@ -51,16 +51,16 @@ home: true
       <header class="flex items-center mb3">
         <h1 class="f2 mb0">Writings</h1>
 
-        <a href="/writings" class="ml3 f6" title="Read more">All writings</a>
-        <a href="/feed.xml" class="ml2 ml-1 f6" title="Atom feed">Feed {{ comp.icon({ class: "ml1" }) | safe }}</a>
+        <a href="/writings" class="ml3 f5" title="Read more">All writings</a>
+        <a href="/feed.xml" class="ml2 ml-1 f5" title="Atom feed">Feed {{ comp.icon({ class: "ml1" }) | safe }}</a>
       </header>
 
-      <ol class="list-reset">
+      <ol>
         {% for post in search.pages("type=post", "date=desc", 3) %}
-          <li class="mb3 {% if not loop.last %}mb1{% endif %}">
+          <li class="mb2 {% if not loop.last %}mb1{% endif %}">
           	<a class="f4 block fw4" href="{{ post.data.url | url }}">
           		<span class="link">{{ post.data.title }}</span><br />
-            	<p class="f5 muted mb0">{{ post.data.date | date("HUMAN_DATE") }}</p>
+            	<p class="font-sans f5 muted mb0">{{ post.data.date | date("HUMAN_DATE") }}</p>
             </a>
           </li>
         {% endfor %}

diff --git a/src/_includes/layouts/main.njk b/src/_includes/layouts/main.njk
@@ -7,12 +7,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/inter/Inter-italic.var.woff2" crossorigin="anonymous">
-    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/inter/Inter-roman.var.woff2" crossorigin="anonymous">
-
-    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2" crossorigin="anonymous">
-    <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2" crossorigin="anonymous">
-
     <link rel="preconnect" href="https://gc.zgo.at">
     <link rel="preconnect" href="https://johanbrook.goatcounter.com">
 

diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk
@@ -3,7 +3,7 @@ layout: layouts/main.njk
 ---
 <main role="main">
   <article class="Post" role="article" itemscope itemtype="http://schema.org/BlogPosting">
-    <header> 
+    <header>
       <h1 itemprop="name" class="{% if link %}fw6 pt3{% else %}title{% endif %}">{{ title }}</h1>
 
       <p class="mb0 fw5 mt3">
@@ -20,12 +20,12 @@ layout: layouts/main.njk
           {% endif %}
       </p>
 
-      <p class="muted f5 mb4">
+      <p class="f5 mb4">
           About {{ content | default("No content", true) | readingTime }} reading time
       </p>
     </header>
 
-    <div class="prose" itemprop="articleBody">
+    <div class="prose drop-cap" itemprop="articleBody">
       {% if link %}
         <p class="f3 mb4 no-rhythm">
           <a class="btn" title="{{ link }}" href="{{ link }}">Follow link to {{ link | hostname }} →</a>

diff --git a/src/_includes/nav-main.njk b/src/_includes/nav-main.njk
@@ -1,6 +1,6 @@
 <nav role="navigation" class="MainNav">
 	<div class="sticky">
-		<h1 class="f4 sr-only-mobile">
+		<h1 class="f3 sr-only-mobile">
 			<a href="/" aria-label="Home">
 				<span>Johan Brook</span><span aria-hidden="true" class="BackLink ml2">←</span>
 			</a>

diff --git a/src/credits.md b/src/credits.md
@@ -12,10 +12,8 @@ menu:
   initially built by [Oscar Otero](https://github.com/oscarotero).
 - The source code of this site is
   [available on GitHub](https://github.com/johanbrook/johanbrook.com).
-- The only font used is [Inter](https://rsms.me/inter). It is made by
-  [@rsms](https://twitter.com/rsms) ([source](https://github.com/rsms/inter)). Inter is licensed
-  under the [SIL Open Font License 1.1](https://choosealicense.com/licenses/ofl-1.1/).
 - I was inspired by [muan.co](https://muan.co) in the latest design of this site.
+- I use font stacks from [Modern Font Stacks](https://modernfontstacks.com).
 
 This site's simple license:
 

diff --git a/src/css/base.css b/src/css/base.css
@@ -1,8 +1,15 @@
 /* =ELEMENTS
 --------------------------------------------- */
 
-:where(html, body) {
-	font: normal calc(var(--font-size-base) * 1px) / var(--leading) var(--sans);
+html {
+	/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
+	-moz-text-size-adjust: none;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+
+body {
+	font: normal calc(var(--font-size-base) * 1px) / var(--leading) var(--serif);
 	background-color: var(--color-bg);
 	color: var(--color-text);
 }
@@ -11,17 +18,11 @@ body {
 	padding: var(--inset);
 	line-height: var(--leading);
 	letter-spacing: var(--tracking);
-	font-kerning: normal;
 	font-feature-settings:
 		/* Contextual alternates */
 		'calt' 1,
 		'kern' 1,
-		'liga' 1,
-		/* Open digis */
-		'ss01' 1,
-		/* Curved 'r' */
-		'ss03' 1,
-		'frac' 1;
+		'liga' 1;
 	font-variant-ligatures: contextual common-ligatures;
 
 	@media screen and (prefers-color-scheme: dark) {
@@ -38,25 +39,14 @@ main {
 	margin-bottom: calc(var(--lineheight) * 3);
 }
 
-.Content {
-	max-width: var(--content-width);
-	margin: 0 auto;
-	display: flex;
-	flex-direction: column-reverse;
-
-	&.wide {
-		--content-width: var(--measure-wide);
-	}
+:target {
+	scroll-margin-block: 5ex;
+}
 
-	@media screen and (min-width: 981px) {
-		html:not(.admin) & {
-			max-width: none;
-			display: grid;
-			place-content: center;
-			grid-template-columns: var(--content-width) auto;
-			gap: var(--spacing-extra-large);
-		}
-	}
+:focus-visible {
+    outline: 2px solid black;
+    box-shadow: 0 0 0 4px white;
+    border-radius: .25em;
 }
 
 /* =HEADINGS
@@ -68,16 +58,16 @@ h3,
 h4,
 h5,
 h6 {
-	margin: 0;
+	margin-block-end: 0;
 	margin-bottom: calc(var(--lineheight) / 2);
 	color: var(--color-text-high-contrast);
-	text-wrap: balance;
 }
 
 .f0,
 .title {
 	font-size: clamp(var(--f1), 12vw, var(--f0));
 	letter-spacing: var(--tracking-f0);
+	line-height: calc(var(--leading) * 0.75);
 }
 
 h1,
@@ -86,40 +76,24 @@ h1,
 	letter-spacing: var(--tracking-f1);
 }
 
-h1 {
-	font-weight: 670;
-}
-
 h2,
 .f2 {
 	font-size: var(--f2);
 	letter-spacing: var(--tracking-f2);
 }
 
-h2 {
-	font-weight: 650;
-}
-
 h3,
 .f3 {
 	font-size: var(--f3);
 	letter-spacing: var(--tracking-f3);
 }
 
-h3 {
-	font-weight: 650;
-}
-
 h4,
 .f4 {
 	font-size: var(--f4);
 	letter-spacing: var(--tracking-f4);
 }
 
-h4 {
-	font-weight: 500;
-}
-
 h5,
 .f5 {
 	font-size: var(--f5);
@@ -136,20 +110,6 @@ h6,
 	font-size: var(--f7);
 }
 
-h1.title {
-	font-weight: 750;
-	line-height: calc(var(--leading) * 0.75);
-
-	/*@media screen and (max-width: 680px) {
-		font-size: 10vw;
-	}*/
-}
-
-strong,
-b {
-	font-weight: 600;
-}
-
 ul,
 ol {
 	padding-left: 0;
@@ -165,10 +125,13 @@ a,
 .link {
 	color: var(--link-color);
 	position: relative;
-	font-weight: 460;
 	text-decoration: none;
 	text-underline-offset: 3px;
 
+	&:not(.prose &) {
+		font-family: var(--sans);
+	}
+
 	&.block {
 		text-decoration: none;
 		font-weight: unset;
@@ -239,22 +202,33 @@ table {
 	&.textual {
 		--spacing: .6em;
 
+		& th {
+			text-transform: lowercase;
+			font-weight: normal;
+			font-size: var(--f4);
+			font-variant: small-caps;
+		}
+
 		& td {
 			vertical-align: top;
 			border-bottom: 1px solid var(--grey-lightest);
 		}
 
 		& tr>td:first-of-type {
-			font-weight: 500;
+			font-weight: bold;
 			width: 25%;
 		}
+
+		& tr>td:nth-of-type(2) {
+			width: 15%;
+		}
 	}
 }
 
 th {
 	border-bottom: 2px solid var(--grey-light);
 	padding: var(--spacing);
-	font-weight: 700;
+	font-weight: bold;
 	font-size: var(--f5);
 	position: sticky;
 	top: 0;

diff --git a/src/css/footer.css b/src/css/footer.css
@@ -5,12 +5,14 @@ FOOTER
 [role='contentinfo'] {
 	&::before {
 		content: '';
+		background: url('data:image/svg+xml;utf8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.65039 0.589844L8.85352 2.95215C9.73438 3.61947 10.375 4.2334 10.7754 4.79395C11.2025 5.3278 11.416 5.83496 11.416 6.31543C11.416 6.95605 11.2292 7.54329 10.8555 8.07715C10.5085 8.611 9.89453 9.19824 9.01367 9.83887L5.89062 12.1611L2.96777 9.83887C2.00684 9.14486 1.33952 8.53092 0.96582 7.99707C0.592122 7.46322 0.405273 6.90267 0.405273 6.31543C0.405273 5.80827 0.538737 5.34115 0.805664 4.91406C1.09928 4.46029 1.7666 3.80632 2.80762 2.95215L5.65039 0.589844Z" fill="white"/></svg>') no-repeat;
 		display: block;
-		background-color: var(--hr-color);
-		height: .7rem;
+		color: var(--hr-color);
+		font-size: 8rem;
+		height: 0.7rem;
+		line-height: 1;
 		aspect-ratio: 1 / 1;
 		margin: calc(var(--lineheight) * 2) 0;
-		border-radius: 100%;
 	}
 
 	& nav {

diff --git a/src/css/layout.css b/src/css/layout.css
@@ -0,0 +1,20 @@
+.Content {
+	max-width: var(--content-width);
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column-reverse;
+
+	&.wide {
+		--content-width: var(--measure-wide);
+	}
+
+	@media screen and (min-width: 981px) {
+		html:not(.admin) & {
+			max-width: none;
+			display: grid;
+			place-content: center;
+			grid-template-columns: var(--content-width) auto;
+			gap: var(--spacing-extra-large);
+		}
+	}
+}
diff --git a/src/css/notes.css b/src/css/notes.css
@@ -24,8 +24,4 @@
 	&>li:has(:target)::after {
 		border-color: var(--neon);
 	}
-
-	& .prose> :last-child {
-		margin-bottom: 0;
-	}
 }
diff --git a/src/css/prose.css b/src/css/prose.css
@@ -3,10 +3,17 @@ PROSE
 ----------------------------------------------------------------*/
 
 .prose {
+	--link-color: var(--color-text);
+
 	&> :last-child {
 		margin-bottom: 0;
 	}
 
+	a:not([class]) {
+		text-decoration: underline;
+		text-decoration-skip-ink: auto;
+	}
+
 	& img,
 	& iframe,
 	& figure,