Improved spacing and alignment of tags

squidfunk · Sep 25, 2023 · 305c336 · 305c336
1 parent 573c1cc
commit 305c336
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/.../assets/stylesheets/main.d451bc0e.min.css → .../assets/stylesheets/main.b2ea3d00.min.css b/.../assets/stylesheets/main.d451bc0e.min.css → .../assets/stylesheets/main.b2ea3d00.min.css
diff --git a/...ets/stylesheets/main.d451bc0e.min.css.map → ...ets/stylesheets/main.b2ea3d00.min.css.map b/...ets/stylesheets/main.d451bc0e.min.css.map → ...ets/stylesheets/main.b2ea3d00.min.css.map
diff --git a/material/templates/base.html b/material/templates/base.html
@@ -44,7 +44,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.d451bc0e.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.b2ea3d00.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a5377069.min.css' | url }}">

diff --git a/src/templates/assets/stylesheets/main/components/_tag.scss b/src/templates/assets/stylesheets/main/components/_tag.scss
@@ -36,17 +36,21 @@
 
   // Tag list
   .md-tags {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: px2em(8px);
     margin-top: px2em(-2px);
     margin-bottom: px2em(12px);
   }
 
   // Tag
   .md-tag {
-    display: inline-block;
-    padding: px2em(4px, 12.8px) px2em(12px, 12.8px);
-    margin-inline-end: 0.5em;
-    margin-bottom: 0.5em;
-    font-size: px2rem(12.8px);
+    display: inline-flex;
+    gap: px2em(8px);
+    align-items: center;
+    padding: px2em(4px, 12.8px) px2em(10px, 12.8px);
+    font-size: px2rem(12.8px); // Fallback
+    font-size: min(px2em(12.8px), px2rem(12.8px));
     font-weight: 700;
     line-height: 1.6;
     letter-spacing: initial;
@@ -83,7 +87,6 @@
       display: inline-block;
       width: 1.2em;
       height: 1.2em;
-      margin-right: 0.4em;
       vertical-align: text-bottom;
       content: "";
       background-color: var(--md-default-fg-color--lighter);