Design: navigation post counter

gumgood · Sep 17, 2023 · 3ea1ee1 · 3ea1ee1
1 parent a824407
commit 3ea1ee1
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 16 deletions.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -37,7 +37,9 @@
         <li class="nav-item">
             <a href="/" class="nav-link{% if page.url == "/" %} active{% endif %}">
                 {% include octicons/list-unordered.html %}
-                <span>All Posts ({{ site.posts | size }})</span>
+                <span>All Posts</span>
+                <span class="dots"></span>
+                <span class="counter">{{ site.posts | size }}</span>
             </a>
         </li>
         {% assign categories = site.category | sort: "order" %}
@@ -46,19 +48,27 @@
                 <li class="nav-item ellipsis">
                     <a href="{{ category.url }}" class="nav-link{% if page.url == category.url %} active{% endif %}">
                         {% include {{ category.emoji | prepend: "octicons/" | append: ".html" }} %}
-                        <span>{{ category.title }} ({{ site.categories[category.slug] | size }})</span>
+                        <span>{{ category.title }}</span>
+                        <span class="dots"></span>
+                        <span class="counter">{{ site.categories[category.slug] | size }}</span>
                     </a>
                 </li>
             {% else %}
                 <li class="nav-item ellipsis subcategory">
-                    <a href="{{ category.url }}" class="nav-link subcategory{% if page.url == category.url %} active{% endif %}">{{ category.title }} ({{ site.categories[category.slug] | size }})</a>
+                    <a href="{{ category.url }}" class="nav-link subcategory{% if page.url == category.url %} active{% endif %}">
+                        <span>{{ category.title }}</span>
+                        <span class="dots"></span>
+                        <span class="counter">{{ site.categories[category.slug] | size }}</span>
+                    </a>
                 </li>
             {% endif %}
         {% endfor %}
         <li class="nav-item">
             <a href="/tag" class="nav-link{% if page.url == "/tag" %} active{% endif %}">
                 {% include octicons/tag.html %}
                 <span>All Tags</span>
+                <span class="dots"></span>
+                <span class="counter">{{ site.tags | size }}</span>
             </a>
         </li>
     </ul>

diff --git a/_sass/include/_navigation.scss b/_sass/include/_navigation.scss
@@ -99,12 +99,12 @@ nav {
                 }
 
                 svg {
-                    @include icon-size(0.8rem, rgba(117, 117, 117, .9));
+                    @include icon-size(0.8rem, #656d76);
                     margin-right: 0.2rem;
                 }
 
                 span {
-                    color: var(--text-color);
+                    color: rgb(31, 35, 40);
                     font-size: 0.8rem;
                 }
             }
@@ -133,44 +133,63 @@ nav {
             }
 
             a {
-                transition: background-color .3s ease-in-out;
+                display: flex;
+                align-items: center;
+                height: 2rem;
 
                 overflow: hidden;
                 text-overflow: ellipsis;
 
+                transition: background-color .3s ease-in-out;
+
                 &:hover {
                     background-color: var(--sidebar-hover-bg);
                 }
 
                 &.nav-link {
-                    display: block;
-
                     padding: 0 0.75rem;
                     border-radius: .75rem;
                     color: rgba(117, 117, 117, .9);
                     font-weight: 500;
 
-                    * {
-                        vertical-align: middle;
-                    }
-
                     svg {
                         @include icon-size(0.85rem, rgba(117, 117, 117, .9));
-                        margin-right: 0.3rem;
+                        margin-right: 0.6rem;
                     }
 
                     span {
                         font-size: 0.85rem;
-                        line-height: 2rem;
                         letter-spacing: .2px;
                     }
+
+                    .dots {
+                        margin: 0 0.5rem;
+                        flex: 1;
+                        border-top: 2px dotted var(--post-list-dash-color);
+                    }
+
+                    .counter {
+                        padding: 0 0.375rem;
+
+                        font-size: 0.75rem;
+                        font-weight: normal;
+                        line-height: 1.125rem;
+
+                        background-color: rgba(175, 184, 193, 0.2);
+                        color: rgb(31, 35, 40);
+
+                        border-radius: 1.5rem;
+                    }
                 }
 
                 &.subcategory {
+                    height: 1.5rem;
                     padding-left: 2.75rem;
 
-                    font-size: 0.8rem;
-                    font-weight: normal;
+                    span {
+                        font-size: 0.8rem;
+                        font-weight: normal;
+                    }
                 }
 
                 &.active {