Improve typography

5 files changed, 49 insertions, 6 deletions

diff --git a/assets/css/site.css b/assets/css/site.css
index 084fe8f..d5c0c53 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -52,7 +52,7 @@ html {
 .article {
   @apply px-5;
   @apply pb-5;
-  @apply text-gray-500;
+  @apply text-gray-600;
 }
 
 .article__header {
@@ -65,6 +65,10 @@ html {
   @apply mb-4;
 }
 
+.article__content > p:first-of-type {
+  @apply text-2xl;
+}
+
 .article a {
   @apply underline;
   @apply text-gray-700;
@@ -85,6 +89,7 @@ html {
 .article h1 {
   @apply text-5xl;
   @apply font-semibold;
+  @apply tracking-tighter;
   @apply text-gray-700;
 }
 
diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js
index 6e75cf0..ac6d7f2 100644
--- a/assets/css/tailwind.config.js
+++ b/assets/css/tailwind.config.js
@@ -1,9 +1,44 @@
 module.exports = {
   theme: {
-    extend: {}
+    fontFamily: {
+      sans: [
+        'Inter',
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'Arial',
+        'Noto Sans',
+        'sans-serif',
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji',
+      ],
+      serif: [
+        'Georgia', 
+        'Cambria', 
+        'Times New Roman', 
+        'Times', 
+        'serif',
+      ],
+      mono: [
+        'Menlo', 
+        'Monaco', 
+        'Consolas', 
+        'Liberation Mono', 
+        'Courier New', 
+        'monospace'
+      ]
+    },
   },
   variants: {},
   plugins: [
     require('@tailwindcss/ui'),
-  ]
+  ],
+  future: {
+    removeDeprecatedGapUtilities: true,
+  },
 }
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 60bc230..0409b26 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -16,7 +16,7 @@
       </header>
     {{ end }}
 
-    <div class="py-5">
+    <div class="article__content py-5">
       {{ .Content }}
     </div>
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 79a4489..0eada8b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -83,6 +83,9 @@
 
   {{ hugo.Generator }}
 
+  <link rel="dns-prefetch" href="//fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
   {{ if .Site.IsServer }}
     {{ $style := resources.Get "css/styles.css" | postCSS (dict "config" "./assets/css/dev/postcss.config.js") }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 9a913f4..472daa8 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -23,7 +23,7 @@
             <img alt="{{ .Site.Title }}" class="w-24 h-24 lg:w-32 lg:h-32 rounded-full mb-3" src="{{.Site.Params.avatar | absURL}}">
           {{ end }}
         {{ end }}
-        <a href="{{ .Site.Home.Permalink }}" class="text-4xl font-normal flex flex-shrink-0 text-center text-white focus:text-gray-300 opacity-75 hover:opacity-100 transition duration-300 ease-in-out">
+        <a href="{{ .Site.Home.Permalink }}" class="tracking-tighter text-4xl font-semibold flex flex-shrink-0 text-center text-white focus:text-gray-300 opacity-75 hover:opacity-100 transition duration-300 ease-in-out">
           {{ .Site.Title }}
         </a>
 
@@ -36,7 +36,7 @@
 {{else}}
   <header id="header" class="w-full m-0 fixed z-10 transition-all duration-300 ease-in-out border-t-4 border-gray-300 py-4 backdrop-filter-blur">
     <div id="header-container" class="max-w-7xl mx-auto p-6 flex items-center flex-wrap lg:flex-no-wrap relative justify-between">
-      <a href="{{ .Site.Home.Permalink }}" class="leading-10 text-3xl font-normal text-gray-600 flex flex-shrink-0">
+      <a href="{{ .Site.Home.Permalink }}" class="tracking-tighter leading-10 text-3xl font-semibold text-gray-600 flex flex-shrink-0">
         {{ .Site.Title }}
       </a>