translate posts listing

9 files changed, 111 insertions, 50 deletions

diff --git a/assets/scss/input.css b/assets/scss/input.css
index f9bf4b2..6e02371 100644
--- a/assets/scss/input.css
+++ b/assets/scss/input.css
@@ -2,9 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-/* HERO */
-#hero {
-  text-shadow: 2px 2px 3px black;
+.baskerville {
+  font-family: baskerville, serif;
 }
 
 blockquote::before {
@@ -18,18 +17,17 @@ blockquote::before {
   top: -15px;
 }
 
-.baskerville {
-  font-family: baskerville, serif;
-}
-.w3-theme-border {
-  border-color: #79c753;
-}
-
 @layer base {
   blockquote {
-    @apply border-l-4 p-6 pb-1 mx-8 relative w3-theme-border baskerville;
+    @apply border-l-4 p-6 pb-1 mx-8 relative border-lime-500 baskerville;
   }
   blockquote p:last-of-type {
-    @apply text-center uppercase mt-4;
+    @apply text-center uppercase mt-4 tracking-wide;
+  }
+}
+
+@layer components {
+  #hero {
+    text-shadow: 2px 2px 3px black;
   }
 }
diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css
index d6b07ae..f6418e1 100644
--- a/assets/scss/tailwind.css
+++ b/assets/scss/tailwind.css
@@ -579,16 +579,22 @@ blockquote {
   margin-left: 2rem;
   margin-right: 2rem;
   border-left-width: 4px;
+  --tw-border-opacity: 1;
+  border-color: rgb(132 204 22 / var(--tw-border-opacity, 1));
   padding: 1.5rem;
   padding-bottom: 0.25rem;
   font-family: baskerville, serif;
-  border-color: #79c753;
 }
 
 blockquote p:last-of-type {
   margin-top: 1rem;
   text-align: center;
   text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+#hero {
+  text-shadow: 2px 2px 3px black;
 }
 
 .absolute {
@@ -644,6 +650,11 @@ blockquote p:last-of-type {
   margin-bottom: 1rem;
 }
 
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -692,6 +703,16 @@ blockquote p:last-of-type {
   overflow: hidden;
 }
 
+.border-y {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -728,6 +749,16 @@ blockquote p:last-of-type {
   padding-right: 0.5rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -743,6 +774,10 @@ blockquote p:last-of-type {
   padding-bottom: 0.5rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -774,6 +809,11 @@ blockquote p:last-of-type {
   line-height: 1;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -786,15 +826,23 @@ blockquote p:last-of-type {
   line-height: 1.5;
 }
 
+.text-lime-500 {
+  --tw-text-opacity: 1;
+  color: rgb(132 204 22 / var(--tw-text-opacity, 1));
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
 
-/* HERO */
-
-#hero {
-  text-shadow: 2px 2px 3px black;
+.baskerville {
+  font-family: baskerville, serif;
 }
 
 blockquote::before {
@@ -808,10 +856,22 @@ blockquote::before {
   top: -15px;
 }
 
-.baskerville {
-  font-family: baskerville, serif;
+.odd\:bg-white:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.w3-theme-border {
-  border-color: #79c753;
+.even\:bg-gray-200:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:shrink-0 {
+    flex-shrink: 0;
+  }
 }
diff --git a/layouts/404.html b/layouts/404.html
index 0e11279..2d722bb 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -10,7 +10,7 @@
     {{ $query := where (where (where (where site.RegularPages.ByDate.Reverse "Title" "!=" "") "Kind" "in" (slice "page" "section")) "Params.private" "!=" true) "Permalink" "!=" "" }}
     {{ $count := len $query }}
     {{ if gt $count 0 }}
-      <h3 class="lh-title f3 baskerville">{{ T "recent_pages" }}</h3>
+      <h3 class="lh-title text-2xl baskerville">{{ T "recent_pages" }}</h3>
       <ul class="list">
         {{ range first 10 $query }}
           <li class="lh-copy grow stripe-dark p-2">
@@ -31,7 +31,7 @@
       </ul>
     {{ end }}
     <a href="/search" class="color-inherit dim">
-      <h3 class="lh-title f3 baskerville">
+      <h3 class="lh-title text-2xl baskerville">
         <i class="fas fa-magnifying-glass"></i>
         {{ T "try_search" }}
       </h3>
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index e297398..726ae68 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -29,7 +29,7 @@
     <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 my-1 lh-title search_title"></h3>
+        <h3 class="text-2xl 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 00132c3..66f67ea 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -5,7 +5,7 @@
     </h1>
 
     {{ with .Params.subtitle }}
-      <h3 class="f3 baskerville my-4 p-1">{{ . }}</h3>
+      <h3 class="text-2xl baskerville my-4 p-1">{{ . }}</h3>
     {{ end }}
 
     {{ partial "meta_links.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index fd160ce..7f7b5dd 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -5,20 +5,20 @@
 {{ define "main" }}
   {{ range (where .Pages "Type" "in" .Site.Params.mainSections).ByWeight }}
     {{ if gt (len .Pages) 0 }}
-      <div class="stripe-dark">
+      <div class="odd:bg-white even:bg-gray-200">
         <div class="max-w-screen-md mx-auto p-1">
           <h2
             id="{{ anchorize .Title | safeURL }}"
-            class="baskerville lh-title f2"
+            class="baskerville text-4xl my-6 font-bold"
           >
             {{ .Title }}
           </h2>
           {{ range first 3 .Pages.ByPublishDate.Reverse }}
             {{ partial "post.html" . }}
           {{ end }}
-          <div class="tc p-4">
+          <div class="text-center p-4">
             <i class="fas fa-angle-right"></i>
-            <a href="{{ .Type }}" class="f3 near-black"
+            <a href="{{ .Type }}" class="text-2xl"
               >{{ T "see_all" | humanize }}</a
             >
           </div>
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
index 668ac20..8679be6 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 my-0 ph4 py-2">
+<div class="text-sm my-0 px-8 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="underline color-inherit" href="{{ .RelPermalink }}">
+        <a class="underline" href="{{ .RelPermalink }}">
           {{- default $name .Params.name -}}
         </a>
       {{ else }}
@@ -30,17 +30,18 @@
   {{ end }}
 
   {{ if eq .Section "post" }}
-    | {{ .ReadingTime }}
+    |
+    {{ .ReadingTime }}
     {{ i18n "minute_read" }}
   {{ end }}
 
   {{ with .GetTerms "tags" }}
     |
-    <a href="/tags" class="w3-text-theme px-1">
+    <a href="/tags" class="text-lime-500 px-1">
       <i class="fas fa-tags"></i>
     </a>
     {{ range . }}
-      <a class="underline color-inherit" href="{{ .RelPermalink }}">
+      <a class="underline" href="{{ .RelPermalink }}">
         {{- .Title -}}
       </a>
     {{ end }}
@@ -48,11 +49,11 @@
 
   {{ with .GetTerms "categories" }}
     |
-    <a href="/categories" class="w3-text-theme px-1">
+    <a href="/categories" class="text-lime-500 px-1">
       <i class="fas fa-folder-open"></i>
     </a>
     {{ range . }}
-      <a class="underline color-inherit" href="{{ .RelPermalink }}">
+      <a class="underline" href="{{ .RelPermalink }}">
         {{- .Title -}}
       </a>
     {{ end }}
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 637381b..a7e62ef 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -1,7 +1,7 @@
-<article class="py-2 bt bb b--black-10">
+<article class="py-2 border-y border-gray-200">
   {{ partial "meta_links.html" . }}
-  <a class="block dim near-black" href="{{ .RelPermalink }}">
-    <div class="cf">
+  <a class="block dim text-slate-900" href="{{ .RelPermalink }}">
+    <div class="md:flex">
       {{ $image := "" }}
       {{ if (.Resources.ByType "image").GetMatch "featured*" }}
         {{ $image =  (.Resources.ByType "image").GetMatch "*featured*" }}
@@ -9,24 +9,26 @@
         {{ $image =  resources.Get (index .Params.images 0) }}
       {{ end }}
       {{ with $image }}
-        <div class="fl-ns mb4 mb-0-ns pr3-ns">
+        <div class="md:shrink-0">
           <img
-            src="{{ if ne .MediaType.SubType "svg" }}
+            {{ if ne .MediaType.SubType "svg" }}
               {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }}
-              {{ $image.RelPermalink }}
+              width="{{ $image.Width }}" height="{{ $image.Height }}"
+              src="{{ $image.RelPermalink }}"
             {{ else }}
-              {{ $image.RelPermalink }}
-            {{ end }}"
-            class="mw-20-ns block mx-auto"
+              src="{{ $image.RelPermalink }}"
+            {{ end }}
             loading="lazy"
             alt=""
           />
         </div>
       {{ end }}
-      <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 }}
+      <div class="px-4">
+        <h3 class="text-2xl baskerville my-1 pb-2 font-bold">{{ .Title }}</h3>
+        <div class="">
+          <!-- {{ .Summary }} -->
+          {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | safeHTML }}
+        </div>
       </div>
     </div>
   </a>
diff --git a/layouts/project/single.html b/layouts/project/single.html
index c48a2cf..a177a10 100644
--- a/layouts/project/single.html
+++ b/layouts/project/single.html
@@ -5,7 +5,7 @@
     </h2>
 
     {{ with .Params.subtitle }}
-      <h3 class="f3 baskerville my-4 p-1">{{ . }}</h3>
+      <h3 class="text-2xl baskerville my-4 p-1">{{ . }}</h3>
     {{ end }}
 
     {{ partial "meta_links.html" . }}