Tailwind terms and use float learning bugfix clearfix

3 files changed, 68 insertions, 46 deletions

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 04fd52d..1ea0c9b 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -993,10 +993,6 @@ h6 {
   float: right;
 }
 
-.float-left {
-  float: left;
-}
-
 .m-0 {
   margin: 0px;
 }
@@ -1065,6 +1061,10 @@ h6 {
   margin-right: 0.5rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1216,10 +1216,19 @@ h6 {
   border-bottom-width: 1px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+}
+
 .border-current {
   border-color: currentColor;
 }
@@ -1229,11 +1238,21 @@ h6 {
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
 .border-gray-500 {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
 }
 
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -1455,10 +1474,6 @@ h6 {
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
-.leading-none {
-  line-height: 1;
-}
-
 .leading-normal {
   line-height: 1.5;
 }
@@ -1643,11 +1658,21 @@ blockquote::before {
     width: fit-content;
   }
 
-  .md\:shrink-0 {
-    flex-shrink: 0;
+  .md\:max-w-64 {
+    max-width: 16rem;
   }
 
   .md\:flex-row {
     flex-direction: row;
   }
+
+  .md\:after\:clear-both::after {
+    content: var(--tw-content);
+    clear: both;
+  }
+
+  .md\:after\:block::after {
+    content: var(--tw-content);
+    display: block;
+  }
 }
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 }}