more translations

16 files changed, 404 insertions, 116 deletions

diff --git a/assets/scss/input.css b/assets/scss/input.css
index 198badf..378b47c 100644
--- a/assets/scss/input.css
+++ b/assets/scss/input.css
@@ -19,7 +19,7 @@ blockquote::before {
 
 @layer base {
   blockquote {
-    @apply border-l-4 p-6 pb-1 mx-8 relative border-lime-500 baskerville;
+    @apply border-l-4 p-6 py-1 m-8 relative border-lime-500 baskerville;
   }
   blockquote p:last-of-type {
     @apply text-center uppercase mt-4 tracking-wide;
@@ -36,6 +36,12 @@ blockquote::before {
   h4 {
     @apply text-2xl font-bold my-4;
   }
+  h5 {
+    @apply text-xl font-bold my-4;
+  }
+  h6 {
+    @apply text-lg font-bold my-4;
+  }
 }
 
 @layer components {
@@ -45,4 +51,54 @@ blockquote::before {
   .main-content p {
     @apply my-4 text-xl;
   }
+  .main-content p code {
+    @apply text-blue-500 px-1;
+  }
+  .main-content a {
+    @apply px-1 text-lime-500;
+  }
+  .main-content a[href^="http"]::after {
+    content: "";
+    width: 11px;
+    height: 11px;
+    margin-left: 4px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+  }
+  .main-content dl {
+    @apply px-8 text-xl;
+  }
+  .main-content dt {
+    @apply font-bold;
+  }
+  .main-content dd {
+    @apply ml-8;
+  }
+  /* The following one are post render thus I need to build them */
+  .main-content .highlight .chroma {
+    @apply p-1 overflow-x-scroll;
+  }
+}
+
+@layer utilities {
+  @font-face {
+    font-family: "BerkshireSwash-Regular";
+    font-display: optional;
+    src:
+      url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
+        format("svg"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
+        format("embedded-opentype");
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  .berkshire-swash {
+    font-family: "BerkshireSwash-Regular";
+  }
 }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 4f9547b..b216baa 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -152,41 +152,11 @@ html {
   }
 }
 
-.heading-anchor {
-  color: #ddd !important;
-}
 // POSTS
 .main-content {
-  a {
-    @extend .link, .ph1, .w3-text-theme;
-  }
-
-  a[href^="http"]::after {
-    content: "";
-    width: 11px;
-    height: 11px;
-    margin-left: 4px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    display: inline-block;
-  }
-
-  p code {
-    @extend .ph1, .blue, .fw5;
-  }
-
   div.highlight pre.chroma {
     @extend .br2, .overflow-x-scroll, .pa1, .f5;
   }
-
-  dl {
-    @extend .ph4, .mh5-ns, .mh3, .pb2;
-  }
-  dt {
-    @extend .b;
-  }
 }
 // CV ENTRY
 .cv-entry,
@@ -218,6 +188,7 @@ html {
   @extend .bl, .b--moon-gray;
   .cv-role {
     @extend .ma0, .f3;
+    // @extend .ma0, .text-2xl;
   }
   .cv-role::before {
     content: "";
@@ -264,25 +235,6 @@ html {
   }
 }
 
-// Title font
-@font-face {
-  font-family: "BerkshireSwash-Regular";
-  font-display: optional;
-  src:
-    url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
-    url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
-      format("svg"),
-    url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
-    url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
-      format("embedded-opentype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-.berkshire-swash {
-  font-family: "BerkshireSwash-Regular";
-}
-
 // TABLES
 table:not(.u-legend) {
   @extend .w-100, .mw8, .center, .pv2;
diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css
index 6b37b3f..8477419 100644
--- a/assets/scss/tailwind.css
+++ b/assets/scss/tailwind.css
@@ -576,12 +576,12 @@ video {
 
 blockquote {
   position: relative;
-  margin-left: 2rem;
-  margin-right: 2rem;
+  margin: 2rem;
   border-left-width: 4px;
   --tw-border-opacity: 1;
   border-color: rgb(132 204 22 / var(--tw-border-opacity, 1));
   padding: 1.5rem;
+  padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-family: baskerville, serif;
 }
@@ -625,6 +625,22 @@ h4 {
   font-weight: 700;
 }
 
+h5 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+h6 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
 #hero {
   text-shadow: 2px 2px 3px black;
 }
@@ -636,6 +652,58 @@ h4 {
   line-height: 1.75rem;
 }
 
+.main-content p code {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+}
+
+.main-content a {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(132 204 22 / var(--tw-text-opacity, 1));
+}
+
+.main-content a[href^="http"]::after {
+  content: "";
+  width: 11px;
+  height: 11px;
+  margin-left: 4px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: inline-block;
+}
+
+.main-content dl {
+  padding-left: 2rem;
+  padding-right: 2rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.main-content dt {
+  font-weight: 700;
+}
+
+.main-content dd {
+  margin-left: 2rem;
+}
+
+/* The following one are post render thus I need to build them */
+
+.main-content .highlight .chroma {
+  overflow-x: scroll;
+  padding: 0.25rem;
+}
+
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -648,14 +716,26 @@ h4 {
   bottom: 0px;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .float-right {
   float: right;
 }
 
+.float-left {
+  float: left;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -668,6 +748,15 @@ h4 {
   margin: 0.5rem;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -697,6 +786,14 @@ h4 {
   margin-left: 0.5rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -705,6 +802,10 @@ h4 {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -713,6 +814,22 @@ h4 {
   display: flex;
 }
 
+.hidden {
+  display: none;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-28 {
+  height: 7rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -725,10 +842,30 @@ h4 {
   width: 100%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -737,10 +874,20 @@ h4 {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -749,6 +896,10 @@ h4 {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -781,11 +932,21 @@ h4 {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
 .bg-lime-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
 }
 
+.bg-lime-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(77 124 15 / var(--tw-bg-opacity, 1));
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
@@ -796,6 +957,10 @@ h4 {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-opacity-30 {
+  --tw-bg-opacity: 0.3;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -812,6 +977,10 @@ h4 {
   padding: 1rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -864,6 +1033,10 @@ h4 {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .font-sans {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -882,11 +1055,6 @@ h4 {
   line-height: 2.5rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -911,10 +1079,18 @@ h4 {
   font-weight: 700;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -927,6 +1103,21 @@ h4 {
   line-height: 1.5;
 }
 
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
+}
+
 .text-lime-500 {
   --tw-text-opacity: 1;
   color: rgb(132 204 22 / var(--tw-text-opacity, 1));
@@ -952,6 +1143,10 @@ h4 {
           text-decoration-line: underline;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -960,6 +1155,28 @@ h4 {
   transition-duration: 150ms;
 }
 
+@font-face {
+  font-family: "BerkshireSwash-Regular";
+
+  font-display: optional;
+
+  src:
+      url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
+        format("svg"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
+        format("embedded-opentype");
+
+  font-weight: normal;
+
+  font-style: normal;
+}
+
+.berkshire-swash {
+  font-family: "BerkshireSwash-Regular";
+}
+
 .baskerville {
   font-family: baskerville, serif;
 }
@@ -992,16 +1209,51 @@ blockquote::before {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-lime-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:opacity-50:hover {
   opacity: 0.5;
 }
 
 @media (min-width: 768px) {
+  .md\:float-left {
+    float: left;
+  }
+
+  .md\:m-4 {
+    margin: 1rem;
+  }
+
   .md\:flex {
     display: flex;
   }
 
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:shrink-0 {
     flex-shrink: 0;
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
 }
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 3ebfeb6..7d1e0ac 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,7 +1,7 @@
 <!-- https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726/24 -->
 <h{{ .Level }} id="{{ .Anchor | safeURL }}"{{ with .Attributes.class }} class="{{ . }}"{{ end }}>
     {{ .Text | safeHTML }}
-    <a class="heading-anchor" href="#{{ .Anchor | safeURL }}">
+    <a class="" href="#{{ .Anchor | safeURL }}">
         <i class="fa fa-chain" aria-hidden="true"></i>
     </a>
 </h{{ .Level }}>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index bdb5482..7c95390 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -23,7 +23,7 @@
   {{ if .Site.Params.tipping }}
     {{ partial "tipping" . }}
   {{ end }}
-  <div class="f5 f4-ns lh-copy py-2">
+  <div class="py-2">
     {{ if in (slice "post" "talk") .Section }}
       {{ range .Params.authors }}
         {{ $name := . }}
diff --git a/layouts/partials/author_card.html b/layouts/partials/author_card.html
index 83f59d7..b23c3e7 100644
--- a/layouts/partials/author_card.html
+++ b/layouts/partials/author_card.html
@@ -1,18 +1,22 @@
-<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 my-0 berkshire-swash">
-      <a href="{{ (default .path .homepage) }}" class="color-inherit">
+<article
+  class="max-w-screen-md mx-auto p-8 md:flex md:flex-row items-start border-t"
+>
+  <img
+    src="{{ .avatar }}"
+    class="rounded-full w-16 mx-auto md:m-4"
+    alt="{{ .name }}"
+  />
+  <div class="">
+    <h5 class="my-0 berkshire-swash">
+      <a href="{{ (default .path .homepage) }}" class="">
         {{ .name }}
       </a>
     </h5>
-    <h6 class="f5 fw3 p-0 m-0">{{ .role | markdownify }}</h6>
-    <p class="f6 lh-copy">
+    <h6 class="font-light p-0 m-0">{{ .role | markdownify }}</h6>
+    <p class="mt-3">
       {{ .bio }}
     </p>
-    <div class="f4 mt-4">
+    <div class="text-xl mt-4">
       {{ partial "social_links" . }}
     </div>
   </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b18f748..394f274 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,6 @@
-<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">
+<nav class="header w-full bg-lime-700 cf ">
+  <div class="max-w-screen-md mx-auto pl-2 text-white">
+    <a href="{{ site.BaseURL | relLangURL }}" class="block float-left">
       {{ with resources.Get .Site.Params.logo }}
         <img
           height="{{ site.Params.logo_height }}"
@@ -16,14 +15,14 @@
         {{ .Site.Title }}
       </span>
     </a>
-    <input class="menu-btn dn" type="checkbox" id="menu-btn" />
-    <label class="fr dn-ns m-2 p-4 menu-icon" for="menu-btn">
-      <span class="navicon bg-near-white"></span>
+    <input class="menu-btn hidden" type="checkbox" id="menu-btn" />
+    <label class="float-right md:hidden m-2 p-4 menu-icon" for="menu-btn">
+      <span class="navicon bg-white"></span>
     </label>
-    <ul class="m-0 p-0 list overflow-hidden font-sans leading-none">
+    <ul class="m-0 p-0 overflow-hidden font-sans leading-none">
       {{ range .Site.Menus.main }}
-        <li class="fl-ns w3-hover-theme">
-          <a class="block p-4 near-white" href="{{ .PageRef | relLangURL }}">
+        <li class="md:float-left hover:bg-lime-500">
+          <a class="block p-4" href="{{ .PageRef | relLangURL }}">
             {{ .Pre }}
             {{- T .Name | title -}}
           </a>
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index 69bec8a..8ed0b62 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -5,7 +5,7 @@
     , url('{{ .RelPermalink }}') center
   {{ end }};"
 >
-  <div class="max-w-screen-md mx-auto px-2 near-white font-serif text-center">
+  <div class="max-w-screen-md mx-auto px-2 text-white font-serif text-center">
     {{ if eq .Type "authors" }}
       {{ $avatar :=  index .Params.images 1 }}
       {{ if hasPrefix $avatar "http" }}
@@ -16,22 +16,22 @@
       {{ with $avatar }}
         <img
           src="{{ .RelPermalink }}"
-          class="br-100 w-64 block mx-auto"
+          class="rounded-full w-64 block mx-auto"
           alt=""
         />
       {{ end }}
-      <h1 class="text-5xl my-1 font-bold">
+      <h1 class="">
         {{ .Params.Name }}
       </h1>
 
-      <h2 class="text-2xl fw3 my-1">
+      <h3 class="font-normal">
         {{ .Params.role | markdownify }}
-      </h2>
+      </h3>
 
       {{ with .Params.Subtitle }}
-        <h2 class="text-2xl fw3 my-1">
+        <h3 class="">
           {{ . | markdownify }}
-        </h2>
+        </h3>
       {{ end }}
 
 
@@ -40,7 +40,7 @@
       </div>
     {{ else }}
 
-      <h1 class="text-5xl my-1 font-bold">{{ .Title }}</h1>
+      <h1 class="berkshire-swash">{{ .Title }}</h1>
       {{ .Content }}
     {{ end }}
   </div>
diff --git a/layouts/partials/leading_image.html b/layouts/partials/leading_image.html
index 0dda603..2f8e491 100644
--- a/layouts/partials/leading_image.html
+++ b/layouts/partials/leading_image.html
@@ -5,8 +5,8 @@
   {{ $image =  resources.Get (index .Params.images 0) }}
 {{ end }}
 {{ with $image }}
-  <div class="tc">
-    <div class="relative dib">
+  <div class="text-center">
+    <div class="relative inline-block">
       <img
         src="{{ if ne .MediaType.SubType "svg" }}
           {{ $image := .Fit (default "768x400" $.Params.image_size) }}
@@ -20,7 +20,7 @@
       {{ with $.Params.caption }}
         <a
           href="{{ .url }}"
-          class="near-white block absolute bottom-0 right-0 p-2 bg-black-30 br2"
+          class="text-white block absolute bottom-0 right-0 p-2 bg-black bg-opacity-40 rounded"
         >
           {{ .text }}
         </a>
diff --git a/layouts/partials/meta_links.html b/layouts/partials/meta_links.html
index 3ee7c7c..69e2a94 100644
--- a/layouts/partials/meta_links.html
+++ b/layouts/partials/meta_links.html
@@ -1,8 +1,8 @@
 {{ with .Params.meta_links }}
-  <div class="cf ph4">
+  <div class="px-8 text-right">
     {{ range $key, $val := . }}
       <a
-        class="fr f6 ba br3 m-2 px-2 py-1 w3-text-theme w3-hover-theme ttu"
+        class="inline-block text-sm border border-current rounded-lg mx-1 px-2 py-1 text-lime-500 hover:bg-lime-500 uppercase"
         href="{{ . }}"
         target="_blank"
         rel="noopener"
@@ -10,6 +10,5 @@
         {{ $key }}
       </a>
     {{ end }}
-    <div></div>
   </div>
 {{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index 6fdb89b..7e5eeb3 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -1,17 +1,34 @@
 {{ $pag := $.Paginator }}
 {{ if gt $pag.TotalPages 1 }}
-<nav class="flex items-center justify-center pa4 f5">
+  <nav class="flex items-center justify-center p-8">
     {{ if $pag.HasPrev }}
-      <a href="{{ $pag.Prev.URL }}" rel="prev" class="near-black transition hover:scale-105 hover-bg-light-gray p-2 ba">« {{ T "prev" }}</a>
+      <a
+        href="{{ $pag.Prev.URL }}"
+        rel="prev"
+        class="text-black transition hover:scale-105 hover:bg-gray-100 p-2 border"
+        >« {{ T "prev" }}</a
+      >
     {{ end }}
     {{ range $pag.Pagers }}
-    {{ if eq . $pag }}
-      <span class= "near-white bg-gray m-1 p-2 ba"> {{ $pag.PageNumber }}</span>
-    {{ else }}
-      <a href="{{ .URL }}" class="block near-black transition hover:scale-105 hover-bg-light-gray hover-near-black p-2 ba">{{ .PageNumber }}</a>
-    {{ end }}
+      {{ if eq . $pag }}
+        <span class="text-white bg-gray-400 mx-1 p-2 border">
+          {{ $pag.PageNumber }}</span
+        >
+      {{ else }}
+        <a
+          href="{{ .URL }}"
+          class="block text-black transition hover:scale-105 hover:bg-gray-100 p-2 border"
+          >{{ .PageNumber }}</a
+        >
+      {{ end }}
     {{ end }}
     {{ if $pag.HasNext }}
-    <a href="{{ $pag.Next.URL }}" rel="next" class="near-black transition hover:scale-105 hover-bg-light-gray p-2 ba">{{ T "next" }} »</a> {{ end }}
-</nav>
+      <a
+        href="{{ $pag.Next.URL }}"
+        rel="next"
+        class="text-black transition hover:scale-105 hover:bg-gray-100 p-2 border"
+        >{{ T "next" }} »</a
+      >
+    {{ end }}
+  </nav>
 {{ end }}
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 8afa03e..2e99a7a 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -14,9 +14,9 @@
             {{ if ne .MediaType.SubType "svg" }}
               {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }}
               width="{{ $image.Width }}" height="{{ $image.Height }}"
-              src="{{ $image.RelPermalink }}"
+              src="{{ $image.RelPermalink }}" class="mx-auto"
             {{ else }}
-              src="{{ $image.RelPermalink }}"
+              src="{{ $image.RelPermalink }}" class="mx-auto max-w-64"
             {{ end }}
             loading="lazy"
             alt=""
diff --git a/layouts/partials/post_pager.html b/layouts/partials/post_pager.html
index fdb5c44..350f347 100644
--- a/layouts/partials/post_pager.html
+++ b/layouts/partials/post_pager.html
@@ -1,10 +1,20 @@
 <nav class="flex items-center justify-center pa4 f5">
-{{ with .NextInSection }}
-    <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 bg-animate hover-bg-light-gray p-2 ba m-2">
-        {{ .Title }} »</a>
-{{ end }}
+  {{ with .NextInSection }}
+    <a
+      href="{{ .RelPermalink }}"
+      rel="prev"
+      class="text-black hover:bg-gray-200 p-2 border m-2"
+    >
+      « {{ .Title }}</a
+    >
+  {{ end }}
+  {{ with .PrevInSection }}
+    <a
+      href="{{ .RelPermalink }}"
+      rel="prev"
+      class="text-black hover:bg-gray-200 p-2 border m-2"
+    >
+      {{ .Title }} »</a
+    >
+  {{ end }}
 </nav>
diff --git a/layouts/partials/social_links.html b/layouts/partials/social_links.html
index c7a5f7d..0951770 100644
--- a/layouts/partials/social_links.html
+++ b/layouts/partials/social_links.html
@@ -15,8 +15,7 @@
   <a
     href="{{ $link | safeURL }}"
     {{ $target | safeHTMLAttr }}
-    class="color-inherit"
   >
-    <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }} h2"></i>
+    <i class="{{ $pack }} {{ $pack_prefix }}-{{ .icon }}"></i>
   </a>
 {{ end }}
diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html
index 391d941..7f7cef9 100644
--- a/layouts/taxonomy/terms.html
+++ b/layouts/taxonomy/terms.html
@@ -7,7 +7,7 @@
     <section class="mt-4">
       {{ range .Data.Terms.ByCount }}
         <a
-          class="dib near-black transition hover:scale-105 hover-bg-white-80 hover-near-black p-2 ba m-1 br2"
+          class="dib text-black transition hover:scale-105 hover-bg-white-80 hover-near-black p-2 ba m-1 br2"
           href="#{{ .Name | urlize }}-list"
           data-tag="{{ .Name | lower }}"
         >
diff --git a/tailwind.config.js b/tailwind.config.js
index 0685572..205601d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./layouts/**/*html"],
+  content: ["./layouts/**/*html", "../../layouts/**/*.html"],
   theme: {
     extend: {},
   },