update header menu style.

3 files changed, 59 insertions, 85 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 7af8ab7..49e20f4 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,9 +6,7 @@
           {{ range .Site.Menus.footer.ByWeight }}
             <div>
               <a
-                class="mx-1 mr-md-2 ml-md-0{{ if .Identifier }}
-                  text-{{ .Identifier }}
-                {{ end }}"
+                class="ms-1 me-1 ms-md-0 me-md-2{{ if .Identifier }} text-{{ .Identifier }}{{ end }}"
                 href="{{ .URL }}"
               >
                 {{ .Pre }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6fbe427..d2ce034 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,84 +1,59 @@
 {{ $isTocEnabled := .Scratch.Get "isTocEnabled" }}
 
-
 <div class="my-4 my-md-5 header">
-  <div class="container">
-    <div class="row">
-      <div
-        class="col-auto{{ if not $isTocEnabled }}
-          offset-lg-1
-        {{ end }} d-none d-md-block"
-      >
-        {{ if .Site.Params.logofile }}
-          <a href="{{ .Site.BaseURL }}">
-            <img
-              class="logo"
-              src="{{ .Site.Params.logofile | absURL }}"
-              alt="logo"
-            />
-          </a>
-        {{ end }}
-      </div>
-      <div class="col-auto align-self-center mr-auto">
-        <a class="text-decoration-none" href="{{ .Site.Home.Permalink }}">
-          <h1 class="font-weight-bold name">{{ .Site.Title }}</h1>
-        </a>
-
-        <ul class="nav nav-primary">
-          {{ range .Site.Menus.primary.ByWeight }}
-            <li class="nav-item">
-              <a
-                class="text-uppercase nav-link{{ if .Identifier }}
-                  text-{{ .Identifier }}
-                {{ end }}"
-                href="{{ .URL }}"
-              >
-                {{ .Pre }}
-                {{ .Name }}
-              </a>
-            </li>
-          {{ end }}
-          {{ if .IsTranslated }}
-            <li class="ml-3">
-              <ul class="nav nav-languages">
-                {{ range .Translations }}
-                  <li>
-                    <a
-                      class="nav-link"
-                      href="{{ .Permalink }}"
-                      alt="{{ .Language.LanguageName }}"
-                      title="{{ .Language.LanguageName }}"
-                    >
-                      <strong class="d-none d-md-inline"
-                        >{{ upper .Language.LanguageName }}</strong
-                      >
-                      <strong class="d-visible d-sm-none"
-                        >{{ upper .Language }}</strong
-                      >
-                    </a>
-                  </li>
+    <div class="container">
+        <div class="row">
+            <div class="col-auto{{ if not $isTocEnabled }} offset-lg-1{{ end }} d-none d-md-block">
+                {{ if .Site.Params.logofile }}
+                <a href="{{ .Site.BaseURL }}">
+                    <img class="logo" src="{{ .Site.Params.logofile | absURL }}" alt="logo" />
+                </a>
                 {{ end }}
-              </ul>
-            </li>
-          {{ end }}
-        </ul>
+            </div>
+            <div class="col-auto align-self-center mr-auto">
+                <a class="text-decoration-none" href="{{ .Site.Home.Permalink }}">
+                    <h1 class="font-weight-bold name">{{ .Site.Title }}</h1>
+                </a>
+
+                <ul class="nav nav-primary">
+                    {{ range .Site.Menus.primary.ByWeight }}
+                    <li class="nav-item">
+                        <a class="text-uppercase nav-link{{ if .Identifier }} text-{{ .Identifier }}{{ end }}"
+                            href="{{ .URL }}">
+                            {{ .Pre }}
+                            {{ .Name }}
+                        </a>
+                    </li>
+                    {{ end }}
+                    {{ if .IsTranslated }}
+                    <li class="ml-3">
+                        <ul class="nav nav-languages">
+                            {{ range .Translations }}
+                            <li>
+                                <a class="nav-link" href="{{ .Permalink }}" alt="{{ .Language.LanguageName }}"
+                                    title="{{ .Language.LanguageName }}">
+                                    <strong class="d-none d-md-inline">{{ upper .Language.LanguageName }}</strong>
+                                    <strong class="d-visible d-sm-none">{{ upper .Language }}</strong>
+                                </a>
+                            </li>
+                            {{ end }}
+                        </ul>
+                    </li>
+                    {{ end }}
+                </ul>
 
-        <ul class="nav nav-secondary">
-          {{ range .Site.Menus.secondary.ByWeight }}
-            <li class="nav-item">
-              <a
-                class="text-uppercase font-weight-bold nav-link{{ if .Identifier }}
-                  text-{{ .Identifier }}
-                {{ end }}"
-                href="{{ .URL }}"
-              >
-                {{ .Pre }}
-                {{ .Name }}
-              </a>
-            </li>
-          {{ end }}
-        </ul>
-      </div>
+                <ul class="nav nav-secondary">
+                    {{ range .Site.Menus.secondary.ByWeight }}
+                    <li class="nav-item">
+                        <a class="text-uppercase font-weight-bold nav-link{{ if .Identifier }} text-{{ .Identifier }}{{ end }}"
+                            href="{{ .URL }}">
+                            {{ .Pre }}
+                            {{ .Name }}
+                        </a>
+                    </li>
+                    {{ end }}
+                </ul>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
diff --git a/static/css/main.css b/static/css/main.css
index 7b55948..ee5f980 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -131,19 +131,20 @@ h6 {
   color: var(--header-link-color);
   font-family: var(--font-title);
   font-size: 14px;
-  padding: 3px 5px 0 5px;
+  padding: 0 10px 0 0;
+  display: inline;
 }
 
 .header ul.nav li a:hover {
   text-decoration: underline;
 }
 
-.header ul.nav li:first-child a {
-  padding-left: 2px;
+.header ul.nav li.nav-item::before {
+    content: "·";
 }
 
-.header ul.nav li:last-child a {
-  padding-right: 2px;
+.header ul.nav li.nav-item:first-child::before {
+    content: none;
 }
 
 /* Partial: Content */