transfer so partial and defaults

14 files changed, 222 insertions, 84 deletions

diff --git a/assets/scss/input.css b/assets/scss/input.css
index 6e02371..198badf 100644
--- a/assets/scss/input.css
+++ b/assets/scss/input.css
@@ -24,10 +24,25 @@ blockquote::before {
   blockquote p:last-of-type {
     @apply text-center uppercase mt-4 tracking-wide;
   }
+  h1 {
+    @apply text-5xl font-bold my-4;
+  }
+  h2 {
+    @apply text-4xl font-bold my-4;
+  }
+  h3 {
+    @apply text-3xl font-bold my-4;
+  }
+  h4 {
+    @apply text-2xl font-bold my-4;
+  }
 }
 
 @layer components {
   #hero {
     text-shadow: 2px 2px 3px black;
   }
+  .main-content p {
+    @apply my-4 text-xl;
+  }
 }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 9176d26..4f9547b 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -188,11 +188,6 @@ html {
     @extend .b;
   }
 }
-footer {
-  a {
-    @extend .link, .near-white, .underline;
-  }
-}
 // CV ENTRY
 .cv-entry,
 .cv-honor {
diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css
index f6418e1..6b37b3f 100644
--- a/assets/scss/tailwind.css
+++ b/assets/scss/tailwind.css
@@ -593,10 +593,49 @@ blockquote p:last-of-type {
   letter-spacing: 0.025em;
 }
 
+h1 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 3rem;
+  line-height: 1;
+  font-weight: 700;
+}
+
+h2 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 700;
+}
+
+h3 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+}
+
+h4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+}
+
 #hero {
   text-shadow: 2px 2px 3px black;
 }
 
+.main-content p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .absolute {
   position: absolute;
 }
@@ -613,6 +652,10 @@ blockquote p:last-of-type {
   right: 0px;
 }
 
+.float-right {
+  float: right;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -650,11 +693,6 @@ blockquote p:last-of-type {
   margin-bottom: 1rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -667,6 +705,10 @@ blockquote p:last-of-type {
   display: block;
 }
 
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -687,10 +729,6 @@ blockquote p:last-of-type {
   max-width: 768px;
 }
 
-.grow {
-  flex-grow: 1;
-}
-
 .items-center {
   align-items: center;
 }
@@ -703,21 +741,56 @@ blockquote p:last-of-type {
   overflow: hidden;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.border {
+  border-width: 1px;
+}
+
 .border-y {
   border-top-width: 1px;
   border-bottom-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-current {
+  border-color: currentColor;
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
+.bg-lime-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
+}
+
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -774,6 +847,11 @@ blockquote p:last-of-type {
   padding-bottom: 0.5rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -809,15 +887,38 @@ blockquote p:last-of-type {
   line-height: 1;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -831,16 +932,34 @@ blockquote p:last-of-type {
   color: rgb(132 204 22 / var(--tw-text-opacity, 1));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+
 .text-slate-900 {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
 
+.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;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .baskerville {
   font-family: baskerville, serif;
 }
@@ -866,6 +985,17 @@ blockquote::before {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:scale-105:hover {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  -webkit-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));
+          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\:opacity-50:hover {
+  opacity: 0.5;
+}
+
 @media (min-width: 768px) {
   .md\:flex {
     display: flex;
diff --git a/layouts/404.html b/layouts/404.html
index 2d722bb..d249f23 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -3,35 +3,39 @@
 
 {{ define "main" }}
   <div class="max-w-screen-md mx-auto px-1 mv4">
-    <h1 class="f1 tc title baskerville">{{ .Title }}</h1>
+    <h1 class="text-center baskerville">{{ .Title }}</h1>
 
-    <p class="f4 baskerville">{{ T "maybe_look" }}</p>
+    <p class="text-xl baskerville">{{ T "maybe_look" }}</p>
 
     {{ $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 text-2xl baskerville">{{ T "recent_pages" }}</h3>
-      <ul class="list">
+      <h3 class="baskerville">{{ T "recent_pages" }}</h3>
+      <ul class="">
         {{ range first 10 $query }}
-          <li class="lh-copy grow stripe-dark p-2">
-            <a class="dim color-inherit block" href="{{ .RelPermalink }}">
+          <li
+            class="transition hover:scale-105 odd:bg-white even:bg-gray-200 p-2"
+          >
+            <a class="hover:opacity-50 block" href="{{ .RelPermalink }}">
               {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
               <time
                 datetime="{{ .Date.Format "2006-01-02" }}"
-                class="f6 fw3 fr ml-2"
+                class="text-sm float-right ml-2"
               >
                 <i class="far fa-calendar"></i>
                 {{ time.Format $dateFormat .Date }}
               </time>
               {{ .Title }}
-              <sup class="w3-theme ttu p-1 br-pill">{{ .Section }}</sup>
+              <sup class="bg-lime-500 text-white uppercase p-1 rounded-full"
+                >{{ .Section }}</sup
+              >
             </a>
           </li>
         {{ end }}
       </ul>
     {{ end }}
-    <a href="/search" class="color-inherit dim">
-      <h3 class="lh-title text-2xl baskerville">
+    <a href="/search" class="hover:opacity-50">
+      <h3 class="baskerville">
         <i class="fas fa-magnifying-glass"></i>
         {{ T "try_search" }}
       </h3>
diff --git a/layouts/_default/author.html b/layouts/_default/author.html
index ad1602f..b2277dd 100644
--- a/layouts/_default/author.html
+++ b/layouts/_default/author.html
@@ -5,8 +5,8 @@
   {{- $sectionDelimiter := "<!-- section break -->" -}}
   {{- $rawContentSections := split .RawContent $sectionDelimiter -}}
   {{ range $rawContentSections }}
-    <div class="stripe-dark">
-      <div class="max-w-screen-md mx-auto py-2 lh-copy f4-ns px-1 main-content">
+    <div class="even:bg-gray-200">
+      <div class="max-w-screen-md mx-auto py-2 px-1 main-content">
         {{ . | markdownify }}
       </div>
     </div>
@@ -14,9 +14,9 @@
 
   {{ with where .Pages "Type" "publication" }}
     {{ if gt (len .) 0 }}
-      <div class="stripe-dark">
-        <div class="max-w-screen-md mx-auto py-2 lh-copy f4-ns px-1">
-          <h2 class="baskerville lh-title f2">Publications</h2>
+      <div class="even:bg-gray-200">
+        <div class="max-w-screen-md mx-auto py-2 px-1">
+          <h2 class="baskerville">Publications</h2>
           {{ range . }}
             {{ partial "post.html" . }}
           {{ end }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 726ae68..e61c9a0 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -1,8 +1,8 @@
 {{ define "main" }}
   <div class="max-w-screen-md mx-auto p-1">
     <header>
-      <h2 class="baskerville f2 lh-title my-4 px-1">
-        {{ T "search" }}
+      <h2 class="baskerville px-1">
+        {{ T "search" | humanize }}
       </h2>
     </header>
 
@@ -11,26 +11,30 @@
         id="search-query"
         name="q"
         placeholder="{{ T "search_placeholder" }}"
-        class="near-black p-2 w-100"
+        class="p-2 w-full border"
       />
     </form>
 
     <div id="search-results" class="my-2">
-      <p class="p-4 f4 fw6 tc">{{ T "search_request" }}</p>
+      <p class="p-4 text-xl font-semibold text-center">
+        {{ T "search_request" }}
+      </p>
     </div>
   </div>
 
   <template id="no-match">
-    <p class="bg-washed-red p-4 dark-red f4 fw6 tc br2 b--light-red ba">
+    <p
+      class="bg-red-100 p-4 text-red-600 text-xl font-semibold text-center border rounded border-current"
+    >
       {{ T "no_match_found" }}
     </p>
   </template>
   <template id="search-result-template">
-    <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="text-2xl baskerville my-1 lh-title search_title"></h3>
-        <div class="f5 lh-copy search_snippet"></div>
+    <article class="py-2 border-y border-gray-200 search_summary">
+      <a class="hover:opacity-50 search_link" href="">
+        <time class="float-right text-sm px-8 search_time"></time>
+        <h4 class="baskerville my-2 search_title"></h4>
+        <div class="search_snippet"></div>
       </a>
     </article>
   </template>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 66f67ea..bdb5482 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
   <header class="max-w-screen-md mx-auto">
-    <h1 class="baskerville f1 lh-title my-4 px-1">
+    <h1 class="baskerville px-1">
       {{ .Title }}
     </h1>
 
@@ -15,7 +15,7 @@
 
     {{ partial "leading_image.html" . }}
   </header>
-  <div class="main-content max-w-screen-md mx-auto lh-copy f5 f4-ns px-1">
+  <div class="main-content max-w-screen-md mx-auto px-1">
     {{ .Content }}
   </div>
   {{ partial "image-gallery" . }}
diff --git a/layouts/index.html b/layouts/index.html
index 7f7b5dd..970a64e 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,10 +7,7 @@
     {{ if gt (len .Pages) 0 }}
       <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 text-4xl my-6 font-bold"
-          >
+          <h2 id="{{ anchorize .Title | safeURL }}" class="baskerville">
             {{ .Title }}
           </h2>
           {{ range first 3 .Pages.ByPublishDate.Reverse }}
diff --git a/layouts/partials/attribution.html b/layouts/partials/attribution.html
index 8ef271a..e69341b 100644
--- a/layouts/partials/attribution.html
+++ b/layouts/partials/attribution.html
@@ -1,4 +1,4 @@
-<div class="tc my-4">
+<div class="border-t border-gray-500 py-4 my-2">
   {{ 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="dim"
+          class="hover:opacity-50"
         >
           {{ $.Author.name }}
         </a>
@@ -25,7 +25,7 @@
         target="_blank"
         rel="license noopener noreferrer"
         href="{{ $href }}"
-        class="block dim"
+        class="block hover:opacity-50"
       >
         Creative Commons
         {{ with .license }}
@@ -39,15 +39,15 @@
         {{ end }}
         4.0 International License
         <span class="block m-2">
-          <i class="f2 fab fa-creative-commons"></i>
-          <i class="f2 fab fa-creative-commons-by"></i>
+          <i class="text-4xl fab fa-creative-commons"></i>
+          <i class="text-4xl fab fa-creative-commons-by"></i>
           {{ with .license }}
             {{ if in . "by-nc" }}
-              <i class="f2 fab fa-creative-commons-nc"></i>
+              <i class="text-4xl fab fa-creative-commons-nc"></i>
             {{ end }}{{ if in . "-nd" }}
-              <i class="f2 fab fa-creative-commons-nd"></i>
+              <i class="text-4xl fab fa-creative-commons-nd"></i>
             {{ else if in . "-sa" }}
-              <i class="f2 fab fa-creative-commons-sa"></i>
+              <i class="text-4xl fab fa-creative-commons-sa"></i>
             {{ end }}
           {{ end }}
         </span>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 9686e11..4a977f1 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,25 +1,19 @@
-<footer class="bg-black w-100 p-4 near-white">
+<footer class="bg-black w-full p-4 text-center text-white text-lg">
   <div class="max-w-screen-md mx-auto">
     {{ if in .Site.Params.mainSections .Section }}
-      <a
-        href="/{{ .Section }}/index.xml"
-        class="color-inherit block tc my-2 dim"
-      >
+      <a href="/{{ .Section }}/index.xml" class="block my-2 hover:opacity-50">
         {{ T "rss_follow" (dict "section" (T .Section)) }}
         <i class="fa-solid fa-rss"></i>
       </a>
     {{ end }}
 
-
-    <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="block f6 p-2 near-white" href="{{ .URL | relLangURL }}"
-            >{{ T .Name | safeHTML }}
-          </a>
-        </li>
-      {{ end }}
-    </ul>
+    {{ range .Site.Menus.footer }}
+      <a
+        class="inline hover:opacity-50 text-base p-2"
+        href="{{ .URL | relLangURL }}"
+        >{{ T .Name | safeHTML }}
+      </a>
+    {{ end }}
 
     {{ with .Site.GetPage "footer.md" }}
       {{ .Content }}
@@ -27,8 +21,7 @@
 
     {{ partial "attribution.html" .Site.Params }}
 
-
-    <div class="tc my-2">
+    <div class="my-2">
       Made in anger with
       <a
         href="https://git.oscarnajera.com/hugo-minimalist-theme/about/"
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index 93c7b0b..6fdb89b 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 grow hover-bg-light-gray p-2 ba">« {{ T "prev" }}</a>
+      <a href="{{ $pag.Prev.URL }}" rel="prev" class="near-black transition hover:scale-105 hover-bg-light-gray p-2 ba">« {{ 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 grow hover-bg-light-gray hover-near-black p-2 ba">{{ .PageNumber }}</a>
+      <a href="{{ .URL }}" class="block near-black transition hover:scale-105 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 grow hover-bg-light-gray p-2 ba">{{ T "next" }} »</a> {{ end }}
+    <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>
 {{ end }}
diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 28c7dec..8afa03e 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -1,6 +1,6 @@
 <article class="py-2 border-y border-gray-200">
   {{ partial "meta_links.html" . }}
-  <a class="block dim text-slate-900" href="{{ .RelPermalink }}">
+  <a class="block hover:opacity-50 text-slate-900" href="{{ .RelPermalink }}">
     <div class="md:flex">
       {{ $image := "" }}
       {{ if (.Resources.ByType "image").GetMatch "featured*" }}
diff --git a/layouts/project/single.html b/layouts/project/single.html
index a177a10..a83b79f 100644
--- a/layouts/project/single.html
+++ b/layouts/project/single.html
@@ -1,11 +1,11 @@
 {{- define "main" -}}
   <header class="max-w-screen-md mx-auto">
-    <h2 class="baskerville f2 lh-title my-4 px-1">
+    <h1 class="baskerville px-1">
       {{ .Title }}
-    </h2>
+    </h1>
 
     {{ with .Params.subtitle }}
-      <h3 class="text-2xl baskerville my-4 p-1">{{ . }}</h3>
+      <h3 class="baskerville p-1">{{ . }}</h3>
     {{ end }}
 
     {{ partial "meta_links.html" . }}
@@ -22,7 +22,7 @@
     {{ $items := where (where site.RegularPages "Type" "post") ".Params.projects" "intersect" (slice $project) }}
     {{ $count := len $items }}
     {{ if ge $count 1 }}
-      <h2 class="f2 fw3 m-0">Related Posts</h2>
+      <h2 class="">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 m-0">Related Publications</h2>
+      <h2 class="">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 m-0">Related Talks</h2>
+      <h2 class="">Related Talks</h2>
       {{ range $index, $item := $items }}
         {{ partial "post.html" . }}
       {{ end }}
diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html
index 4fedd23..391d941 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 grow hover-bg-white-80 hover-near-black p-2 ba m-1 br2"
+          class="dib near-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 }}"
         >
@@ -25,14 +25,14 @@
           data-tag="{{ .Name | lower }}"
         >
           <h4 class="f4 bold mx-auto lh-title">
-            <a class="dim color-inherit" href="{{ .Name | urlize }}">
+            <a class="hover:opacity-50 color-inherit" href="{{ .Name | urlize }}">
               {{ .Name }} ({{ .Pages | len }})
             </a>
           </h4>
           <ul class="list">
             {{ range .Pages.ByDate }}
-              <li class="lh-copy grow stripe-dark p-2">
-                <a class="dim color-inherit block" href="{{ .RelPermalink }}">
+              <li class="lh-copy transition hover:scale-105 stripe-dark p-2">
+                <a class="hover:opacity-50 color-inherit block" href="{{ .RelPermalink }}">
                   {{ $dateFormat := .Site.Params.dateFormat | default ":date_medium" }}
                   <time
                     datetime="{{ .Date.Format "2006-01-02" }}"