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/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 +-
 13 files changed, 72 insertions(+), 57 deletions(-)

(limited to 'layouts/partials')

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>
-- 
cgit v1.2.3