FIX: improve tags display

layouts/taxonomy/taxonomy.html

 {{ define "main" }}
   {{ partial "page-header" . }}
-  
+
   <h1>{{ partial "title" . }}</h1>
 
+<div id="tags-list">
   {{ range (.Paginator 100).Pages.ByTitle }}
 
-    {{ if eq .Kind "term" }}
+        {{ if eq .Kind "term" }}
 
-    <div class="tags gdoc-markdown__align--{{ default "left" (.Page.Params.GeekdocAlign | lower) }}">
-      <a class="tag-link" href="{{ .RelPermalink }}">{{ partial "title.html" . }}</a>
-    </div>
+        <div class="tags gdoc-markdown__align--{{ default "left" (.Page.Params.GeekdocAlign | lower) }}">
+          <a class="tag-link" href="{{ .RelPermalink }}">{{ partial "title.html" . }}</a>
+        </div>
 
-    {{ else }}
-    
-    <div class="gdoc-markdown__align--{{ default "left" (.Page.Params.GeekdocAlign | lower) }}">
-      <a href="{{ .RelPermalink }}">{{ partial "title.html" . }}</a>
-    </div>
+        {{ else }}
 
-  {{ end }}
+        <div class="gdoc-markdown__align--{{ default "left" (.Page.Params.GeekdocAlign | lower) }}">
+          <a href="{{ .RelPermalink }}">{{ partial "title.html" . }}</a>
+        </div>
 
+        {{ end }}
   {{ end }}
+</div>
 {{ end }}

static/custom.css

@@ -5,53 +5,58 @@
 :root {
     --code-max-height: 60rem;
   }
-  
+
   /* Light mode theming */
   :root,
   :root[color-mode="light"] {
       --header-background: #468dbac4;
-      
+
   }
-  
+
   @media (prefers-color-scheme: light) {
       :root {
         --header-background: #468dbac4;
-        
+
         }
   }
-  
+
   /* Dark mode theming */
   :root[color-mode="dark"] {
     --header-background: #468dbac4;
-    
+
   }
-  
+
   @media (prefers-color-scheme: dark) {
     :root {
       --header-background: #468dbac4;
-      
+
     }
   }
-  
+
   .gdoc_brightness_auto {
     color: black;
   }
-  
+
   .gdoc_brightness_dark {
     color: white;
   }
-  
+
   .gdoc_brightness_light {
     color: rgb(244, 205, 96);
   }
-  
+
   /* Tags */
-  
+
+  #tags-list .tags {
+      float: left;
+      margin: 0 1em 0.25em 0;
+  }
+
   #head-tags {
-    margin-left:1em;  
+    margin-left:1em;
     margin-top:1em;
   }
-  
+
    .tags a.tag-link {
     display: inline-block;
     line-height: 2em;
@@ -59,18 +64,18 @@
     position: relative;
     margin: 0 16px 8px 0;
     padding: 0 10px 0 12px;
-    background: #2D5D7B;    
-    
-    -webkit-border-bottom-right-radius: 3px;    
+    background: #2D5D7B;
+
+    -webkit-border-bottom-right-radius: 3px;
     border-bottom-right-radius: 3px;
-    -webkit-border-top-right-radius: 3px;    
+    -webkit-border-top-right-radius: 3px;
     border-top-right-radius: 3px;
-  
+
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
     box-shadow: 0 1px 2px rgba(0,0,0,0.2);
     color: #fff;
   }
-  
+
    .tags a.tag-link:before {
     content: "";
     position: absolute;
@@ -80,21 +85,21 @@
     height: 0;
     border-color: transparent #2D5D7B transparent transparent;
     border-style: solid;
-    border-width: 1em 1em 1em 0;        
+    border-width: 1em 1em 1em 0;
   }
-  
+
    .tags a.tag-link:after {
     content: "";
     position: absolute;
     top: 10px;
     left: 1px;
-    width: 5px; 
+    width: 5px;
     height: 5px;
     -webkit-border-radius: 50%;
     border-radius: 100%;
-    background: #fff;    
+    background: #fff;
   }
-  
+
   .dates {
     padding: 0.5em 0 0.5em 0;
   }
@@ -108,4 +113,4 @@
 
 #gdoc-search-input {
   margin-bottom: 2em;
-}
\ No newline at end of file
+}