More tweaks, messed up with root ems

johanbrook · Sep 18, 2023 · 7a080df · 7a080df
1 parent 7e538c1
commit 7a080df
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 52 deletions.
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -25,7 +25,7 @@ home: true
             <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">
+            <div class="prose font-mono f6">
               {{ note.data.content | excerpt | md | safe }}
             </div>
 

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="f3 sr-only-mobile">
+		<h1 class="f4 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/css/base.css b/src/css/base.css
@@ -8,7 +8,7 @@ html {
 	text-size-adjust: none;
 }
 
-body {
+:where(body, html) {
 	font: normal calc(var(--font-size-base) * 1px) / var(--leading) var(--serif);
 	background-color: var(--color-bg);
 	color: var(--color-text);

diff --git a/src/css/fonts.css b/src/css/fonts.css
diff --git a/src/css/variables.css b/src/css/variables.css
@@ -80,21 +80,15 @@
 	--tracking-f5: -0.009em;
 	--tracking-f6: -0.0025em;
 
-	--font-size-headline: 6rem;
-	--font-size-subheadline: 5rem;
-
-	--f0: calc((82 / var(--font-size-base)) * 1rem);
-	--f1: calc((30 / var(--font-size-base)) * 1rem);
-	--f2: calc((26 / var(--font-size-base)) * 1rem);
-	--f3: calc((20 / var(--font-size-base)) * 1rem);
-	--f4: calc((17 / var(--font-size-base)) * 1rem);
+	--f0: calc((72 / var(--font-size-base)) * 1rem);
+	--f1: calc((36 / var(--font-size-base)) * 1rem);
+	--f2: calc((30 / var(--font-size-base)) * 1rem);
+	--f3: calc((26 / var(--font-size-base)) * 1rem);
+	--f4: 1rem;
 	--f5: calc((15 / var(--font-size-base)) * 1rem);
 	--f6: calc((13 / var(--font-size-base)) * 1rem);
 	--f7: calc((11 / var(--font-size-base)) * 1rem);
 
-	/* See https://developers.google.com/web/updates/2016/02/font-display */
-	--font-strategy: fallback;
-
 	/* Measures */
 
 	--inset: calc(var(--lineheight) / 2);

diff --git a/src/johan.css b/src/johan.css
@@ -12,7 +12,6 @@ components,
 utils;
 
 @import 'css/reset.css' layer(setup);
-@import 'css/fonts.css' layer(setup);
 @import 'css/variables.css' layer(setup);
 
 @import 'css/base.css' layer(base);

diff --git a/src/mind.njk b/src/mind.njk
@@ -15,10 +15,10 @@ menu:
       <li>
         <article id="{{ post.data.date | date("NUMERIC") }}">
         	<header class="mb2">
-	            <h1 class="f3 no-rhythm mb0">
+	            <h1 class="f4 no-rhythm mb0">
 	              <a href="#{{ post.data.date | date("NUMERIC") }}" title="Permalink" class="font-serif no-underline target">{{ post.data.date | date("PPP — HH:mm") }} <span>#</span></a>
 	            </h1>
-            {% if post.data.location %}<p title="Posted from" class="muted font-sans mb0 f4 target">{{ post.data.location }}</p>{% endif %}
+            {% if post.data.location %}<p title="Posted from" class="muted font-sans mb0 f5 target">{{ post.data.location }}</p>{% endif %}
           </header>
 
           <div class="prose">