From 4b76a856b2841fb197acc982ed168bc52db6ea3d Mon Sep 17 00:00:00 2001
From: Oscar Najera <hi@oscarnajera.com>
Date: Sun, 5 Jan 2025 23:44:45 +0100
Subject: add tailwind and do some replacements

---
 layouts/404.html                    | 12 ++++++------
 layouts/_default/author.html        |  4 ++--
 layouts/_default/baseof.html        |  2 +-
 layouts/_default/list.html          |  2 +-
 layouts/_default/search.html        | 18 +++++++++---------
 layouts/_default/single.html        | 10 +++++-----
 layouts/index.html                  |  6 +++---
 layouts/partials/attribution.html   |  8 ++++----
 layouts/partials/author_card.html   | 10 +++++-----
 layouts/partials/footer.html        | 14 +++++++-------
 layouts/partials/head.html          | 15 ++++++++++++++-
 layouts/partials/header.html        | 20 +++++++++-----------
 layouts/partials/hero.html          | 20 ++++++++++++--------
 layouts/partials/leading_image.html |  4 ++--
 layouts/partials/meta_links.html    |  2 +-
 layouts/partials/metadata.html      | 12 ++++++------
 layouts/partials/pagination.html    |  8 ++++----
 layouts/partials/post.html          | 10 +++++-----
 layouts/partials/post_pager.html    |  4 ++--
 layouts/partials/social_links.html  |  2 +-
 layouts/project/single.html         | 16 ++++++++--------
 layouts/taxonomy/terms.html         | 18 +++++++++---------
 22 files changed, 116 insertions(+), 101 deletions(-)

(limited to 'layouts')

diff --git a/layouts/404.html b/layouts/404.html
index 1b3bacc..0e11279 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -2,7 +2,7 @@
 {{ end }}
 
 {{ define "main" }}
-  <div class="mw7 center ph1 mv4">
+  <div class="max-w-screen-md mx-auto px-1 mv4">
     <h1 class="f1 tc title baskerville">{{ .Title }}</h1>
 
     <p class="f4 baskerville">{{ T "maybe_look" }}</p>
@@ -13,24 +13,24 @@
       <h3 class="lh-title f3 baskerville">{{ T "recent_pages" }}</h3>
       <ul class="list">
         {{ range first 10 $query }}
-          <li class="lh-copy grow stripe-dark pa2">
-            <a class="link dim color-inherit db" href="{{ .RelPermalink }}">
+          <li class="lh-copy grow stripe-dark p-2">
+            <a class="dim color-inherit block" href="{{ .RelPermalink }}">
               {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
               <time
                 datetime="{{ .Date.Format "2006-01-02" }}"
-                class="f6 fw3 fr ml2"
+                class="f6 fw3 fr ml-2"
               >
                 <i class="far fa-calendar"></i>
                 {{ time.Format $dateFormat .Date }}
               </time>
               {{ .Title }}
-              <sup class="w3-theme ttu pa1 br-pill">{{ .Section }}</sup>
+              <sup class="w3-theme ttu p-1 br-pill">{{ .Section }}</sup>
             </a>
           </li>
         {{ end }}
       </ul>
     {{ end }}
-    <a href="/search" class="link color-inherit dim">
+    <a href="/search" class="color-inherit dim">
       <h3 class="lh-title f3 baskerville">
         <i class="fas fa-magnifying-glass"></i>
         {{ T "try_search" }}
diff --git a/layouts/_default/author.html b/layouts/_default/author.html
index a0bb1fa..ad1602f 100644
--- a/layouts/_default/author.html
+++ b/layouts/_default/author.html
@@ -6,7 +6,7 @@
   {{- $rawContentSections := split .RawContent $sectionDelimiter -}}
   {{ range $rawContentSections }}
     <div class="stripe-dark">
-      <div class="mw7 center pv2 lh-copy f4-ns ph1 main-content">
+      <div class="max-w-screen-md mx-auto py-2 lh-copy f4-ns px-1 main-content">
         {{ . | markdownify }}
       </div>
     </div>
@@ -15,7 +15,7 @@
   {{ with where .Pages "Type" "publication" }}
     {{ if gt (len .) 0 }}
       <div class="stripe-dark">
-        <div class="mw7 center pv2 lh-copy f4-ns ph1">
+        <div class="max-w-screen-md mx-auto py-2 lh-copy f4-ns px-1">
           <h2 class="baskerville lh-title f2">Publications</h2>
           {{ range . }}
             {{ partial "post.html" . }}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4570a3d..ffdabc9 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -4,7 +4,7 @@
   <body class="bg-white">
     {{- partial "header.html" . -}}
     {{ block "hero" . }}{{ end }}
-    <div id="content" class="min-vh-100 avenir">
+    <div id="content" class="min-h-screen font-sans">
       {{- block "main" . }}{{- end }}
     </div>
     {{- partial "footer.html" . -}}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index d653b32..0eeb8c7 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "main" }}
-  <div class="mw7 center pa1">
+  <div class="max-w-screen-md mx-auto p-1">
     {{ range .Paginator.Pages.ByPublishDate.Reverse }}
       {{ partial "post.html" . }}
     {{ end }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 41596de..e297398 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
-  <div class="mw7 center pa1">
+  <div class="max-w-screen-md mx-auto p-1">
     <header>
-      <h2 class="baskerville f2 lh-title mv3 ph1">
+      <h2 class="baskerville f2 lh-title my-4 px-1">
         {{ T "search" }}
       </h2>
     </header>
@@ -11,25 +11,25 @@
         id="search-query"
         name="q"
         placeholder="{{ T "search_placeholder" }}"
-        class="near-black pa2 w-100"
+        class="near-black p-2 w-100"
       />
     </form>
 
-    <div id="search-results" class="mv2">
-      <p class="pa3 f4 fw6 tc">{{ T "search_request" }}</p>
+    <div id="search-results" class="my-2">
+      <p class="p-4 f4 fw6 tc">{{ T "search_request" }}</p>
     </div>
   </div>
 
   <template id="no-match">
-    <p class="bg-washed-red pa3 dark-red f4 fw6 tc br2 b--light-red ba">
+    <p class="bg-washed-red p-4 dark-red f4 fw6 tc br2 b--light-red ba">
       {{ T "no_match_found" }}
     </p>
   </template>
   <template id="search-result-template">
-    <article class="pv2 bt bb b--black-10 search_summary">
-      <a class="link dim near-black search_link" href="">
+    <article class="py-2 bt bb b--black-10 search_summary">
+      <a class="dim near-black search_link" href="">
         <time class="fr f6 lh-copy ph4 search_time"></time>
-        <h3 class="f3 baskerville mv1 lh-title search_title"></h3>
+        <h3 class="f3 baskerville my-1 lh-title search_title"></h3>
         <div class="f5 lh-copy search_snippet"></div>
       </a>
     </article>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index cad6a35..00132c3 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,11 +1,11 @@
 {{ define "main" }}
-  <header class="mw7 center">
-    <h1 class="baskerville f1 lh-title mv3 ph1">
+  <header class="max-w-screen-md mx-auto">
+    <h1 class="baskerville f1 lh-title my-4 px-1">
       {{ .Title }}
     </h1>
 
     {{ with .Params.subtitle }}
-      <h3 class="f3 baskerville mv3 pa1">{{ . }}</h3>
+      <h3 class="f3 baskerville my-4 p-1">{{ . }}</h3>
     {{ end }}
 
     {{ partial "meta_links.html" . }}
@@ -15,7 +15,7 @@
 
     {{ partial "leading_image.html" . }}
   </header>
-  <div class="main-content mw7 center lh-copy f5 f4-ns ph1">
+  <div class="main-content max-w-screen-md mx-auto lh-copy f5 f4-ns px-1">
     {{ .Content }}
   </div>
   {{ partial "image-gallery" . }}
@@ -23,7 +23,7 @@
   {{ if .Site.Params.tipping }}
     {{ partial "tipping" . }}
   {{ end }}
-  <div class="f5 f4-ns lh-copy pv2">
+  <div class="f5 f4-ns lh-copy py-2">
     {{ if in (slice "post" "talk") .Section }}
       {{ range .Params.authors }}
         {{ $name := . }}
diff --git a/layouts/index.html b/layouts/index.html
index fb866ad..fd160ce 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,7 +6,7 @@
   {{ range (where .Pages "Type" "in" .Site.Params.mainSections).ByWeight }}
     {{ if gt (len .Pages) 0 }}
       <div class="stripe-dark">
-        <div class="mw7 center pa1">
+        <div class="max-w-screen-md mx-auto p-1">
           <h2
             id="{{ anchorize .Title | safeURL }}"
             class="baskerville lh-title f2"
@@ -16,9 +16,9 @@
           {{ range first 3 .Pages.ByPublishDate.Reverse }}
             {{ partial "post.html" . }}
           {{ end }}
-          <div class="tc pa3">
+          <div class="tc p-4">
             <i class="fas fa-angle-right"></i>
-            <a href="{{ .Type }}" class="f3 link near-black"
+            <a href="{{ .Type }}" class="f3 near-black"
               >{{ T "see_all" | humanize }}</a
             >
           </div>
diff --git a/layouts/partials/attribution.html b/layouts/partials/attribution.html
index 0565131..8ef271a 100644
--- a/layouts/partials/attribution.html
+++ b/layouts/partials/attribution.html
@@ -1,4 +1,4 @@
-<div class="tc mv3">
+<div class="tc my-4">
   {{ if in (slice "by" "by-nd" "by-sa" "by-nc" "by-nc-nd" "by-nc-sa") .license }}
     {{ $href := printf "http://creativecommons.org/licenses/%s/4.0/" .license }}
     <div
@@ -12,7 +12,7 @@
           rel="cc:attributionURL dct:creator"
           property="cc:attributionName"
           href="{{ . }}"
-          class="link dim"
+          class="dim"
         >
           {{ $.Author.name }}
         </a>
@@ -25,7 +25,7 @@
         target="_blank"
         rel="license noopener noreferrer"
         href="{{ $href }}"
-        class="db dim link"
+        class="block dim"
       >
         Creative Commons
         {{ with .license }}
@@ -38,7 +38,7 @@
           {{- end -}}
         {{ end }}
         4.0 International License
-        <span class="db ma2">
+        <span class="block m-2">
           <i class="f2 fab fa-creative-commons"></i>
           <i class="f2 fab fa-creative-commons-by"></i>
           {{ with .license }}
diff --git a/layouts/partials/author_card.html b/layouts/partials/author_card.html
index e74ee98..83f59d7 100644
--- a/layouts/partials/author_card.html
+++ b/layouts/partials/author_card.html
@@ -1,18 +1,18 @@
-<article class="mw7 center pa4 flex flex-column flex-row-ns bt b--black-10">
+<article class="max-w-screen-md mx-auto pa4 flex flex-column flex-row-ns bt b--black-10">
   <div class="w-10-ns tc">
     <img src="{{ .avatar }}" class="br-100 w3" alt="{{ .name }}" />
   </div>
   <div class="w-90-ns ph3-ns">
-    <h5 class="f4 mv0 berkshire-swash">
-      <a href="{{ (default .path .homepage) }}" class="link color-inherit">
+    <h5 class="f4 my-0 berkshire-swash">
+      <a href="{{ (default .path .homepage) }}" class="color-inherit">
         {{ .name }}
       </a>
     </h5>
-    <h6 class="f5 fw3 pa0 ma0">{{ .role | markdownify }}</h6>
+    <h6 class="f5 fw3 p-0 m-0">{{ .role | markdownify }}</h6>
     <p class="f6 lh-copy">
       {{ .bio }}
     </p>
-    <div class="f4 mt3">
+    <div class="f4 mt-4">
       {{ partial "social_links" . }}
     </div>
   </div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 22cae96..9686e11 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,9 +1,9 @@
-<footer class="bg-black w-100 pa3 near-white">
-  <div class="mw7 center">
+<footer class="bg-black w-100 p-4 near-white">
+  <div class="max-w-screen-md mx-auto">
     {{ if in .Site.Params.mainSections .Section }}
       <a
         href="/{{ .Section }}/index.xml"
-        class="link color-inherit db tc mv2 dim"
+        class="color-inherit block tc my-2 dim"
       >
         {{ T "rss_follow" (dict "section" (T .Section)) }}
         <i class="fa-solid fa-rss"></i>
@@ -11,10 +11,10 @@
     {{ end }}
 
 
-    <ul class="ma0 pa0 list overflow-hidden avenir tc bb b--white-40">
+    <ul class="m-0 p-0 list overflow-hidden avenir tc bb b--white-40">
       {{ range .Site.Menus.footer }}
         <li class="dib dim">
-          <a class="db f6 pa2 link near-white" href="{{ .URL | relLangURL }}"
+          <a class="block f6 p-2 near-white" href="{{ .URL | relLangURL }}"
             >{{ T .Name | safeHTML }}
           </a>
         </li>
@@ -28,11 +28,11 @@
     {{ partial "attribution.html" .Site.Params }}
 
 
-    <div class="tc mv2">
+    <div class="tc my-2">
       Made in anger with
       <a
         href="https://git.oscarnajera.com/hugo-minimalist-theme/about/"
-        class="link silver hover-near-white"
+        class="silver hover-near-white"
       >
         hugo-minimalist
       </a>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index be48acf..659165a 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,7 +1,7 @@
 <head>
   {{ partial "structured-data.html" . }}
 
-  {{ with resources.Get "scss/style.scss" | css.Sass (dict "includePaths" (slice "node_modules")  "targetPath" "css/style.css") | resources.Minify | fingerprint }}
+  {{ with resources.Get "scss/style.scss" | toCSS (dict "includePaths" (slice "node_modules")  "targetPath" "css/style.css") | resources.Minify | fingerprint }}
     <link
       rel="stylesheet"
       href="{{ .RelPermalink }}"
@@ -11,6 +11,19 @@
       media="screen"
     />
   {{ end }}
+
+  {{ with resources.Get "scss/tailwind.css" | resources.Minify | fingerprint }}
+    <link
+      rel="stylesheet"
+      href="{{ .RelPermalink }}"
+      integrity="{{ .Data.Integrity }}"
+      crossorigin="anonymous"
+      type="text/css"
+      media="screen"
+    />
+  {{ end }}
+
+
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5048eea..b18f748 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,7 @@
-<nav class="header w-100 w3-theme-d3 w3-theme-border z-2 cf">
-  <div class="mw7 center pl2">
-    <a href="{{ site.BaseURL | relLangURL }}" class="db fl link">
+<nav class="header w-full w3-theme-d3 w3-theme-border cf ">
+  <div class="max-w-screen-md mx-auto pl-2">
+    <!-- <a href="{{ site.BaseURL | relLangURL }}" class="block fl"> -->
+    <a href="{{ site.BaseURL | relLangURL }}" class="block fl">
       {{ with resources.Get .Site.Params.logo }}
         <img
           height="{{ site.Params.logo_height }}"
@@ -11,21 +12,18 @@
       {{ end }}
 
 
-      <span class="near-white pl2 pt0 f2 berkshire-swash">
+      <span class="pl-2 text-4xl leading-normal berkshire-swash">
         {{ .Site.Title }}
       </span>
     </a>
     <input class="menu-btn dn" type="checkbox" id="menu-btn" />
-    <label class="fr dn-ns ma2 pa3 menu-icon" for="menu-btn">
+    <label class="fr dn-ns m-2 p-4 menu-icon" for="menu-btn">
       <span class="navicon bg-near-white"></span>
     </label>
-    <ul class="ma0 pa0 list overflow-hidden avenir">
+    <ul class="m-0 p-0 list overflow-hidden font-sans leading-none">
       {{ range .Site.Menus.main }}
         <li class="fl-ns w3-hover-theme">
-          <a
-            class="db f6 pa3 link near-white"
-            href="{{ .PageRef | relLangURL }}"
-          >
+          <a class="block p-4 near-white" href="{{ .PageRef | relLangURL }}">
             {{ .Pre }}
             {{- T .Name | title -}}
           </a>
@@ -35,7 +33,7 @@
       {{ if .IsTranslated }}
         <select
           name="lang"
-          class="mv2 pv1 tc ba b--black-20 br2 w3-theme-d3 mw3 "
+          class="my-2 py-1 tc ba b--black-20 br2 w3-theme-d3 mw3 "
           onchange="self.location=options[selectedIndex].value"
         >
           <option value="{{ .Permalink }}">
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index 1654b5d..69bec8a 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -1,11 +1,11 @@
 <div
   id="hero"
-  class="pv5"
+  class="py-16"
   style="background: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15) ){{ with resources.Get (index .Params.images 0) }}
     , url('{{ .RelPermalink }}') center
   {{ end }};"
 >
-  <div class="mw7 center ph2 near-white lh-copy">
+  <div class="max-w-screen-md mx-auto px-2 near-white font-serif text-center">
     {{ if eq .Type "authors" }}
       {{ $avatar :=  index .Params.images 1 }}
       {{ if hasPrefix $avatar "http" }}
@@ -14,29 +14,33 @@
         {{ $avatar = resources.Get $avatar }}
       {{ end }}
       {{ with $avatar }}
-        <img src="{{ .RelPermalink }}" class="br-100 w5 db center" alt="" />
+        <img
+          src="{{ .RelPermalink }}"
+          class="br-100 w-64 block mx-auto"
+          alt=""
+        />
       {{ end }}
-      <h1 class="f1 tc mv1">
+      <h1 class="text-5xl my-1 font-bold">
         {{ .Params.Name }}
       </h1>
 
-      <h2 class="f3 tc fw3 mv1">
+      <h2 class="text-2xl fw3 my-1">
         {{ .Params.role | markdownify }}
       </h2>
 
       {{ with .Params.Subtitle }}
-        <h2 class="f3 tc fw3 mv1">
+        <h2 class="text-2xl fw3 my-1">
           {{ . | markdownify }}
         </h2>
       {{ end }}
 
 
-      <div class="f2 mt3 tc">
+      <div class="text-4xl mt-4">
         {{ partial "social_links" .Params }}
       </div>
     {{ else }}
 
-      <h1 class="f1 tc berkshire-swash">{{ .Title }}</h1>
+      <h1 class="text-5xl my-1 font-bold">{{ .Title }}</h1>
       {{ .Content }}
     {{ end }}
   </div>
diff --git a/layouts/partials/leading_image.html b/layouts/partials/leading_image.html
index ac528d3..0dda603 100644
--- a/layouts/partials/leading_image.html
+++ b/layouts/partials/leading_image.html
@@ -14,13 +14,13 @@
         {{ else }}
           {{ $image.RelPermalink }}
         {{ end }}"
-        class="ma0"
+        class="m-0"
         alt="{{ .Title }}"
       />
       {{ with $.Params.caption }}
         <a
           href="{{ .url }}"
-          class="link near-white db absolute bottom-0 right-0 pa2 bg-black-30 br2"
+          class="near-white block absolute bottom-0 right-0 p-2 bg-black-30 br2"
         >
           {{ .text }}
         </a>
diff --git a/layouts/partials/meta_links.html b/layouts/partials/meta_links.html
index 1072820..3ee7c7c 100644
--- a/layouts/partials/meta_links.html
+++ b/layouts/partials/meta_links.html
@@ -2,7 +2,7 @@
   <div class="cf ph4">
     {{ range $key, $val := . }}
       <a
-        class="fr f6 link ba br3 ma2 ph2 pv1 w3-text-theme w3-hover-theme ttu"
+        class="fr f6 ba br3 m-2 px-2 py-1 w3-text-theme w3-hover-theme ttu"
         href="{{ . }}"
         target="_blank"
         rel="noopener"
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
index e1408ad..668ac20 100644
--- a/layouts/partials/metadata.html
+++ b/layouts/partials/metadata.html
@@ -1,13 +1,13 @@
 {{ $dateTime := .PublishDate.Format "2006-01-02" }}
 {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
-<div class="f6 lh-copy mv0 ph4 pv2">
+<div class="f6 lh-copy my-0 ph4 py-2">
   {{ T "author_by" }} &mdash;
   {{ range .Params.authors }}
     {{ $name := . }}
     {{ $path := printf "/%s/%s" "authors" ( $name | urlize ) }}
     {{ with $.GetPage $path }}
       {{ if isset .Params "name" }}
-        <a class="link underline color-inherit" href="{{ .RelPermalink }}">
+        <a class="underline color-inherit" href="{{ .RelPermalink }}">
           {{- default $name .Params.name -}}
         </a>
       {{ else }}
@@ -36,11 +36,11 @@
 
   {{ with .GetTerms "tags" }}
     |
-    <a href="/tags" class="link w3-text-theme ph1">
+    <a href="/tags" class="w3-text-theme px-1">
       <i class="fas fa-tags"></i>
     </a>
     {{ range . }}
-      <a class="link underline color-inherit" href="{{ .RelPermalink }}">
+      <a class="underline color-inherit" href="{{ .RelPermalink }}">
         {{- .Title -}}
       </a>
     {{ end }}
@@ -48,11 +48,11 @@
 
   {{ with .GetTerms "categories" }}
     |
-    <a href="/categories" class="link w3-text-theme ph1">
+    <a href="/categories" class="w3-text-theme px-1">
       <i class="fas fa-folder-open"></i>
     </a>
     {{ range . }}
-      <a class="link underline color-inherit" href="{{ .RelPermalink }}">
+      <a class="underline color-inherit" href="{{ .RelPermalink }}">
         {{- .Title -}}
       </a>
     {{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index f8df88e..93c7b0b 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -2,16 +2,16 @@
 {{ if gt $pag.TotalPages 1 }}
 <nav class="flex items-center justify-center pa4 f5">
     {{ if $pag.HasPrev }}
-      <a href="{{ $pag.Prev.URL }}" rel="prev" class="near-black link grow hover-bg-light-gray pa2 ba">« {{ T "prev" }}</a>
+      <a href="{{ $pag.Prev.URL }}" rel="prev" class="near-black grow hover-bg-light-gray p-2 ba">« {{ T "prev" }}</a>
     {{ end }}
     {{ range $pag.Pagers }}
     {{ if eq . $pag }}
-      <span class= "near-white bg-gray ma1 pa2 ba"> {{ $pag.PageNumber }}</span>
+      <span class= "near-white bg-gray m-1 p-2 ba"> {{ $pag.PageNumber }}</span>
     {{ else }}
-      <a href="{{ .URL }}" class="db near-black link grow hover-bg-light-gray hover-near-black pa2 ba">{{ .PageNumber }}</a>
+      <a href="{{ .URL }}" class="block near-black grow hover-bg-light-gray hover-near-black p-2 ba">{{ .PageNumber }}</a>
     {{ end }}
     {{ end }}
     {{ if $pag.HasNext }}
-    <a href="{{ $pag.Next.URL }}" rel="next" class="near-black link grow hover-bg-light-gray pa2 ba">{{ T "next" }} »</a> {{ end }}
+    <a href="{{ $pag.Next.URL }}" rel="next" class="near-black grow hover-bg-light-gray p-2 ba">{{ T "next" }} »</a> {{ end }}
 </nav>
 {{ end }}
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index b610347..637381b 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -1,6 +1,6 @@
-<article class="pv2 bt bb b--black-10">
+<article class="py-2 bt bb b--black-10">
   {{ partial "meta_links.html" . }}
-  <a class="db link dim near-black" href="{{ .RelPermalink }}">
+  <a class="block dim near-black" href="{{ .RelPermalink }}">
     <div class="cf">
       {{ $image := "" }}
       {{ if (.Resources.ByType "image").GetMatch "featured*" }}
@@ -9,7 +9,7 @@
         {{ $image =  resources.Get (index .Params.images 0) }}
       {{ end }}
       {{ with $image }}
-        <div class="fl-ns mb4 mb0-ns pr3-ns">
+        <div class="fl-ns mb4 mb-0-ns pr3-ns">
           <img
             src="{{ if ne .MediaType.SubType "svg" }}
               {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }}
@@ -17,13 +17,13 @@
             {{ else }}
               {{ $image.RelPermalink }}
             {{ end }}"
-            class="mw-20-ns db center"
+            class="mw-20-ns block mx-auto"
             loading="lazy"
             alt=""
           />
         </div>
       {{ end }}
-      <h3 class="f3 baskerville mv1 lh-title">{{ .Title }}</h3>
+      <h3 class="f3 baskerville my-1 lh-title">{{ .Title }}</h3>
       <div class="f5 lh-copy">
         <!-- {{ .Summary }} -->
         {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | safeHTML }}
diff --git a/layouts/partials/post_pager.html b/layouts/partials/post_pager.html
index 2078f02..fdb5c44 100644
--- a/layouts/partials/post_pager.html
+++ b/layouts/partials/post_pager.html
@@ -1,10 +1,10 @@
 <nav class="flex items-center justify-center pa4 f5">
 {{ with .NextInSection }}
-    <a href="{{ .RelPermalink }}" rel="prev" class="near-black link bg-animate hover-bg-light-gray pa2 ba ma2">
+    <a href="{{ .RelPermalink }}" rel="prev" class="near-black bg-animate hover-bg-light-gray p-2 ba m-2">
         « {{ .Title }}</a>
 {{ end }}
 {{ with .PrevInSection }}
-    <a href="{{ .RelPermalink }}" rel="prev" class="near-black link bg-animate hover-bg-light-gray pa2 ba ma2">
+    <a href="{{ .RelPermalink }}" rel="prev" class="near-black bg-animate hover-bg-light-gray p-2 ba m-2">
         {{ .Title }} »</a>
 {{ end }}
 </nav>
diff --git a/layouts/partials/social_links.html b/layouts/partials/social_links.html
index ea6ee85..c7a5f7d 100644
--- a/layouts/partials/social_links.html
+++ b/layouts/partials/social_links.html
@@ -15,7 +15,7 @@
   <a
     href="{{ $link | safeURL }}"
     {{ $target | safeHTMLAttr }}
-    class="link color-inherit"
+    class="color-inherit"
   >
     <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }} h2"></i>
   </a>
diff --git a/layouts/project/single.html b/layouts/project/single.html
index eacb6d1..c48a2cf 100644
--- a/layouts/project/single.html
+++ b/layouts/project/single.html
@@ -1,28 +1,28 @@
 {{- define "main" -}}
-  <header class="mw7 center">
-    <h2 class="baskerville f2 lh-title mv3 ph1">
+  <header class="max-w-screen-md mx-auto">
+    <h2 class="baskerville f2 lh-title my-4 px-1">
       {{ .Title }}
     </h2>
 
     {{ with .Params.subtitle }}
-      <h3 class="f3 baskerville mv3 pa1">{{ . }}</h3>
+      <h3 class="f3 baskerville my-4 p-1">{{ . }}</h3>
     {{ end }}
 
     {{ partial "meta_links.html" . }}
     {{ partial "leading_image.html" . }}
   </header>
-  <div class="main-content mw7 center lh-copy f5 f4-ns ph1">
+  <div class="main-content max-w-screen-md mx-auto lh-copy f5 f4-ns px-1">
     {{ .Content }}
   </div>
 
-  <div class="mw7 center ph1">
+  <div class="max-w-screen-md mx-auto px-1">
     {{ $page := . }}
     {{ $project := .File.ContentBaseName }}
 
     {{ $items := where (where site.RegularPages "Type" "post") ".Params.projects" "intersect" (slice $project) }}
     {{ $count := len $items }}
     {{ if ge $count 1 }}
-      <h2 class="f2 fw3 ma0">Related Posts</h2>
+      <h2 class="f2 fw3 m-0">Related Posts</h2>
       {{ range $index, $item := $items }}
         {{ partial "post.html" . }}
       {{ end }}
@@ -31,7 +31,7 @@
     {{ $items := where (where site.RegularPages "Type" "publication") ".Params.projects" "intersect" (slice $project) }}
     {{ $pubs_len := len $items }}
     {{ if ge $pubs_len 1 }}
-      <h2 class="f2 fw3 ma0">Related Publications</h2>
+      <h2 class="f2 fw3 m-0">Related Publications</h2>
       {{ range $index, $item := $items }}
         {{ partial "post.html" . }}
       {{ end }}
@@ -40,7 +40,7 @@
     {{ $items := where (where site.RegularPages "Type" "event") ".Params.projects" "intersect" (slice $project) }}
     {{ $talks_len := len $items }}
     {{ if ge $talks_len 1 }}
-      <h2 class="f2 fw3 ma0">Related Talks</h2>
+      <h2 class="f2 fw3 m-0">Related Talks</h2>
       {{ range $index, $item := $items }}
         {{ partial "post.html" . }}
       {{ end }}
diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html
index 30ae287..4fedd23 100644
--- a/layouts/taxonomy/terms.html
+++ b/layouts/taxonomy/terms.html
@@ -3,11 +3,11 @@
 {{ end }}
 
 {{ define "main" }}
-  <section class="mw7 center">
-    <section class="mt3">
+  <section class="max-w-screen-md mx-auto">
+    <section class="mt-4">
       {{ range .Data.Terms.ByCount }}
         <a
-          class="dib near-black link grow hover-bg-white-80 hover-near-black pa2 ba ma1 br2"
+          class="dib near-black grow hover-bg-white-80 hover-near-black p-2 ba m-1 br2"
           href="#{{ .Name | urlize }}-list"
           data-tag="{{ .Name | lower }}"
         >
@@ -21,22 +21,22 @@
       {{ range .Data.Terms.ByCount }}
         <div
           id="{{ .Name | urlize }}-list"
-          class="pa1 pa2-ns bb"
+          class="p-1 pa2-ns bb"
           data-tag="{{ .Name | lower }}"
         >
-          <h4 class="f4 bold center lh-title">
-            <a class="link dim color-inherit" href="{{ .Name | urlize }}">
+          <h4 class="f4 bold mx-auto lh-title">
+            <a class="dim color-inherit" href="{{ .Name | urlize }}">
               {{ .Name }} ({{ .Pages | len }})
             </a>
           </h4>
           <ul class="list">
             {{ range .Pages.ByDate }}
-              <li class="lh-copy grow stripe-dark pa2">
-                <a class="link dim color-inherit db" href="{{ .RelPermalink }}">
+              <li class="lh-copy grow stripe-dark p-2">
+                <a class="dim color-inherit block" href="{{ .RelPermalink }}">
                   {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
                   <time
                     datetime="{{ .Date.Format "2006-01-02" }}"
-                    class="f6 fw3 fr ml2"
+                    class="f6 fw3 fr ml-2"
                   >
                     <i class="far fa-calendar"></i>
                     {{ time.Format $dateFormat .Date }}
-- 
cgit v1.2.3