Tailwind terms and use float learning bugfix clearfix

2 files changed, 33 insertions, 36 deletions

diff --git a/layouts/partials/post.html b/layouts/partials/post.html
index 2e99a7a..8ed64f8 100644
--- a/layouts/partials/post.html
+++ b/layouts/partials/post.html
@@ -1,35 +1,32 @@
-<article class="py-2 border-y border-gray-200">
+<article class="py-2 border-y border-slate-300">
   {{ partial "meta_links.html" . }}
   <a class="block hover:opacity-50 text-slate-900" href="{{ .RelPermalink }}">
-    <div class="md:flex">
-      {{ $image := "" }}
-      {{ if (.Resources.ByType "image").GetMatch "featured*" }}
-        {{ $image =  (.Resources.ByType "image").GetMatch "*featured*" }}
-      {{ else if resources.Get (index .Params.images 0) }}
-        {{ $image =  resources.Get (index .Params.images 0) }}
-      {{ end }}
-      {{ with $image }}
-        <div class="md:shrink-0">
-          <img
-            {{ if ne .MediaType.SubType "svg" }}
-              {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }}
-              width="{{ $image.Width }}" height="{{ $image.Height }}"
-              src="{{ $image.RelPermalink }}" class="mx-auto"
-            {{ else }}
-              src="{{ $image.RelPermalink }}" class="mx-auto max-w-64"
-            {{ end }}
-            loading="lazy"
-            alt=""
-          />
-        </div>
-      {{ end }}
-      <div class="px-4">
-        <h3 class="text-2xl baskerville my-1 pb-2 font-bold">{{ .Title }}</h3>
-        <div class="">
-          {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | plainify }}
-        </div>
+    {{ $image := "" }}
+    {{ if (.Resources.ByType "image").GetMatch "featured*" }}
+      {{ $image =  (.Resources.ByType "image").GetMatch "*featured*" }}
+    {{ else if resources.Get (index .Params.images 0) }}
+      {{ $image =  resources.Get (index .Params.images 0) }}
+    {{ end }}
+    {{ with $image }}
+      <div class="md:max-w-64 md:float-left mr-4">
+        <img
+          {{ if ne .MediaType.SubType "svg" }}
+            {{ $image := .Fill (default "150x150" $.Params.thumbnail_size) }}
+            width="{{ $image.Width }}" height="{{ $image.Height }}"
+            src="{{ $image.RelPermalink }}" class="mx-auto"
+          {{ else }}
+            src="{{ $image.RelPermalink }}" class="mx-auto max-w-64"
+          {{ end }}
+          loading="lazy"
+          alt=""
+        />
       </div>
-    </div>
+    {{ end }}
+    <h3 class="text-2xl baskerville my-1 pb-2 font-bold">{{ .Title }}</h3>
+
+    <p class="md:after:clear-both md:after:block">
+      {{ .Summary | replaceRE `<sup.*?><a href.*?#fn:.*?footnote-ref.*?/a></sup>` "" | plainify }}
+    </p>
   </a>
   {{ if .Params.metadata }}
     {{ partial "metadata.html" . }}
diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html
index 7f7cef9..4948a6a 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 text-black transition hover:scale-105 hover-bg-white-80 hover-near-black p-2 ba m-1 br2"
+          class="inline-block text-black transition hover:scale-105 p-2 m-1 border border-black rounded"
           href="#{{ .Name | urlize }}-list"
           data-tag="{{ .Name | lower }}"
         >
@@ -21,22 +21,22 @@
       {{ range .Data.Terms.ByCount }}
         <div
           id="{{ .Name | urlize }}-list"
-          class="p-1 pa2-ns bb"
+          class="p-1 pa2-ns border-b-2 border-gray-300"
           data-tag="{{ .Name | lower }}"
         >
-          <h4 class="f4 bold mx-auto lh-title">
-            <a class="hover:opacity-50 color-inherit" href="{{ .Name | urlize }}">
+          <h4 class="mx-auto">
+            <a class="hover:opacity-50" href="{{ .Name | urlize }}">
               {{ .Name }} ({{ .Pages | len }})
             </a>
           </h4>
           <ul class="list">
             {{ range .Pages.ByDate }}
-              <li class="lh-copy transition hover:scale-105 stripe-dark p-2">
-                <a class="hover:opacity-50 color-inherit block" href="{{ .RelPermalink }}">
+              <li class="transition hover:scale-105 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 }}