feat: Add navbar list with borders style

Add the navbar list with borders to site header navbar.

Also fixes the theme toggle button not centered by centering all
elements in navbar list items using display flex and align center.

Author: manid2

assets/styles/_header.scss

@@ -70,12 +70,20 @@
 
     > li {
       flex: 0 0 auto;
-      padding: $spacer-smallest $spacer-small;
-      border: $spacer-2 dotted;
-      margin-right: -#{$spacer-2};
+      padding-left: $spacer-small;
+      display: flex;
+      justify-content: center;
+    }
+
+    &.borders {
+      > li {
+        padding: $spacer-smallest $spacer-small;
+        border: $spacer-2 dotted;
+        margin-right: $spacer-2 * -1;
 
-      @include themed {
-        border-color: t($accent);
+        @include themed {
+          border-color: t($accent);
+        }
       }
     }
   }

layouts/partials/navbar.html

@@ -4,7 +4,7 @@
 {{- /* navbar */}}
 <nav class="navbar">
   <div class="navbar__first">
-    <ul class="navbar__list">
+    <ul class="navbar__list borders">
       <li><a href="{{ $logoLink }}">{{ $logoText }}</a></li>
       <li>
         <button class="theme-toggle transparent">
@@ -19,7 +19,7 @@
 
   {{- if site.Params.showMenuItems }}
     <div class="navbar__last">
-      <ul class="navbar__list menu--desktop">
+      <ul class="navbar__list borders menu--desktop">
         {{- range site.Menus.main -}}
           {{- if not .HasChildren }}
             <li><a href="{{ .URL }}">{{ .Name }}</a></li>