themes/default/layouts/_default/taxonomy: Clean up

Arrange in cards

5 files changed, 114 insertions, 70 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index d17111f..f688eaf 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -952,6 +952,7 @@ micro-thumbnail figure > a {
   display: block;
 }
 
+tag-card figure img,
 micro-thumbnail figure img {
   border-radius: 100%;
   min-width: 3.5rem;
@@ -1528,11 +1529,6 @@ web-ring {
   top: 1rem;
 }
 
-micro-metadata-anchored a:hover,
-web-ring a[href^="http"]:hover {
-  text-decoration: underline;
-}
-
 web-ring header {
   font-weight: 700;
 }
@@ -1581,10 +1577,6 @@ web-ring aside {
   padding: 1rem;
 }
 
-column-right aside a {
-  text-decoration: none;
-}
-
 author-list aside {
   display: block;
 }
@@ -1762,6 +1754,42 @@ item-list a:focus span:last-child {
   color: inherit;
 }
 
+tag-deck {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.5rem 0;
+  justify-content: space-between;
+}
+
+tag-card {
+  border: 1px solid;
+  border-color: #eee;
+  border-color: var(--border-lighter);
+  border-radius: 0.5rem;
+  box-shadow: 0 0 1rem -0.85rem #00000060;
+  box-shadow: 0 0 1rem -0.85rem var(--shadow);
+  display: block;
+  padding: 2rem;
+  text-align: center;
+  width: 49%;
+  margin: 1% 0;
+}
+
+tag-card h2 {
+  margin: 0 0 0.5rem 0;
+}
+
+tag-card img {
+  margin: 0 auto;
+}
+
+tag-card time {
+  color: #444;
+  color: var(--fade);
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
 source-files footer {
   padding: 0 1rem;
 }
@@ -1953,6 +1981,11 @@ link-card article a {
   text-decoration: none;
 }
 
+[data-hover]:hover {
+  color: inherit;
+  text-decoration: underline;
+}
+
 [draft] {
   background-color: #fff5f5;
   background-color: var(--danger-background-lighter);
@@ -2043,6 +2076,9 @@ link-card article a {
   column-middle main > nav icon-navigator[hidden] {
     display: inline;
   }
+  tag-deck {
+    margin: 0.5rem 0.75rem;
+  }
 }
 
 @media screen and (max-width: 925px) {
@@ -2116,6 +2152,10 @@ link-card article a {
   micro-summary article {
     margin-left: 0;
   }
+  tag-card {
+    width: 100%;
+    margin: 0.5rem;
+  }
 }
 
 /* ----- Self Frames ----- */
diff --git a/themes/default/layouts/_default/section.following.html b/themes/default/layouts/_default/section.following.html
index c53ab09..48afa7d 100644
--- a/themes/default/layouts/_default/section.following.html
+++ b/themes/default/layouts/_default/section.following.html
@@ -39,6 +39,7 @@
             </h2>
             <h3>
               <a
+                data-hover
                 title="{{ $distinct.FeedName }}"
                 href="{{ $href }}">
                 @{{ $distinct.FeedSourceDomain }}
diff --git a/themes/default/layouts/_default/section.webring.html b/themes/default/layouts/_default/section.webring.html
index d82efe0..59b26ba 100644
--- a/themes/default/layouts/_default/section.webring.html
+++ b/themes/default/layouts/_default/section.webring.html
@@ -26,6 +26,7 @@
   <web-ring-item>
     <header>
       <a
+        data-hover
         title="{{ .FeedLink }}"
         href="{{ .FeedLink }}">
         {{ or .FeedTitle (truncate 50 "..." (or .FeedContentShort .FeedDescriptionShort)) }}
@@ -46,6 +47,7 @@
       &mdash;
     </p>
     <a
+      data-hover
       title="{{ .FeedSourceDescription }}"
       href="{{ or .FeedSourceHome .FeedSourceLink }}">
       {{ .FeedSourceTitle }}
diff --git a/themes/default/layouts/_default/taxonomy.html b/themes/default/layouts/_default/taxonomy.html
index bcacf3e..e0126d2 100644
--- a/themes/default/layouts/_default/taxonomy.html
+++ b/themes/default/layouts/_default/taxonomy.html
@@ -1,71 +1,72 @@
-{{ define "styles" }}
+{{- define "styles" -}}
 <style>
   {{ partial "styles-navigator.html" (dict "Link" "/tags/") | safeCSS }}
 </style>
-{{ end }}
+{{- end -}}
 
-{{ define "middle" }}
+{{- define "middle" -}}
 
-  {{- $title := .Title -}}
-  {{- $author := partial "function-authors-data.html" . -}}
+  {{- partial "navigator-middle.html"
+    (dict
+      "Title"      "Tags"
+      "Subtitle"   (partial "count-tags.html" .)
+      "Icon"       "arrow-left"
+      "IconLabel"  "Back"
+      "Href"       "/"
+      "Id"         "back"
+      "Context"    .
+    )
+  -}}
 
-  {{ if eq .Title "Tags" }}
+  <tag-deck>
+    {{- range .Paginator.Pages -}}
+      {{- $count := len .Data.Pages -}}
+      {{- $title := lower .Title -}}
 
-    {{- partial "navigator-middle.html"
-      (dict
-        "Title"      "Tags"
-        "Subtitle"   (partial "count-tags.html" .)
-        "Icon"       "arrow-left"
-        "IconLabel"  "Back"
-        "Href"       "/"
-        "Id"         "back"
-        "Context"    .
-      )
-    -}}
-
-    {{- $page  := 1 -}}
-    {{- $count := 0 -}}
-
-    {{ range .Paginator.Pages }}
-    {{ $title := lower .Title }}
-      <item-list>
-        <h1>
-          <a href="{{ .Site.BaseURL }}/tags/{{ $title }}">#{{ .Title }}</a>
-        </h1>
-
-        <ul>
-        {{ range first 3 .Pages }}
-          {{- $count = add $count 1 -}}
-            <li>
-              <a
-                title="{{ partial "meta-title.html" . }}"
-                href="{{ .Site.BaseURL }}/tags/{{ $title }}/{{ if gt $page 1 }}page/{{ $page }}/{{ end }}#{{ partial "card-id.html" . }}"
-              >
-                <span>
-                  <code>{{ .Date.Format "02 Jan 2006" }}</code>
-                </span>
-                <span>{{ partial "meta-title.html" . }}</span>
-                <span>@{{ $author.user }}</span>
+      {{- range first 1 .Pages -}}
+      {{- $author := partial "function-authors-data.html" . -}}
+        <tag-card>
+         <article>
+          <h2>
+            <code>
+              {{ $count }} in
+              <a data-hover href="{{ "" | absURL }}/tags/{{ $title }}/">
+                #{{ $title }}
               </a>
-            </li>
-          {{ if eq (mod $count $.Paginator.PageSize) 0 }}
-            {{ $page = add $page 1 }}
-          {{- end -}}
-        {{- end -}}
-
-        {{- $page  = 1 -}}
-        {{- $count = 0 -}}
-
-        </ul>
-      </item-list>
-    {{ end }}
-
-    {{ partial "pagination.html" . }}
-
-  {{ end }}
+            </code>
+          </h2>
+          <figure>
+            <a href="{{ print ("" | absURL)  "/tags/" $title "/#"  (partial "card-id.html" .) }}">
+              <picture>
+                {{ partial "author-picture" . }}
+              </picture>
+            </a>
+          </figure>
+          <h3>
+            <a data-hover href="{{ print ("" | absURL) "/" $author.user "/" }}">
+              @{{ $author.user }}
+            </a>
+          </h3>
+          <time
+            datetime="{{ .Date | time.Format "2006-01-02T15:04:05Z" }}"
+            title="{{ .Date | time.Format "Posted: Monday, January 2, 2006 at 15:04:05 MST" }}"
+          >
+            {{ .Date.Format "02 Jan 2006" }}
+          </time>
+          <p>
+            <a data-hover href="{{ print ("" | absURL)  "/tags/" $title "/#"  (partial "card-id.html" .) }}">
+              {{ partial "meta-title.html" . }}
+            </a>
+          </p>
+         </article>
+        </tag-card>
+      {{- end -}}
+    {{- end -}}
+  </tag-deck>
 
-{{ end }}
+  {{ partial "pagination.html" . }}
+{{- end -}}
 
-{{ define "right" }}
+{{- define "right" -}}
   {{- partial "navigator-right.html" . -}}
-{{ end }}
+{{- end -}}
diff --git a/themes/default/layouts/partials/author-card.html b/themes/default/layouts/partials/author-card.html
index 873363a..bbb3ec8 100644
--- a/themes/default/layouts/partials/author-card.html
+++ b/themes/default/layouts/partials/author-card.html
@@ -59,7 +59,7 @@
           <b>{{ .Data.name }}</b>
         </h2>
         <h3>
-          <a title="{{ .Data.name }}" href="{{ "" | absURL }}/{{ .Data.user }}/#">
+          <a data-hover title="{{ .Data.name }}" href="{{ "" | absURL }}/{{ .Data.user }}/#">
             {{ .Data.user }}@{{ $host }}
           </a>
         </h3>