separated main menu and external links more clearly

assets/partials/_footer.scss

@@ -31,7 +31,7 @@ footer {
         color: rgb(200, 200, 230);
         &:hover {
           text-decoration: none;
-          border-bottom: 2px solid;
+          border-bottom: 1px solid;
         }
       }
     }

assets/partials/_nav.scss

@@ -19,8 +19,11 @@ nav {
         }
       }
     }
-    .website-nav {
-      margin-left: auto;
+    .seperator {
+      display: block;
+      padding: 20px;
+    }
+    .website-mainmenu {
       ul {
         display: flex;
         margin: 0;
@@ -37,6 +40,27 @@ nav {
               background: rgb(50, 50, 75);
             }
           }
+        }
+      }
+    }
+    .website-externallinks {
+      margin-left: auto;
+      ul {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        li {
+          list-style-type: none;
+          a {
+            color: rgb(245, 245, 255);
+            display: block;
+            text-decoration: none;
+            transition: background .2s;
+            padding: 20px 30px;
+            &:hover {
+              background: rgb(50, 50, 75);
+            }
+          }
           .seperator {
             display: block;
             padding: 20px 10px;
@@ -46,12 +70,33 @@ nav {
     }
   }
 }
-@media (max-width: 600px) {
+@media (max-width: 1140px) {
   nav {
     .container {
-      max-width: none;
-      .website-nav {
-        padding: 0 20px;
+      margin: 0;
+      width: 100%;
+    }
+  }
+}
+@media (max-width: 800px) {
+  nav {
+    .container {
+      .website-externallinks {
+        ul {
+          li {
+            a {
+              color: rgb(215, 215, 225);
+              background: rgb(50, 50, 75);
+              &:hover {
+                background: rgb(40, 40, 60);
+              }
+            }
+            .seperator {
+              display: block;
+              padding: 20px 10px;
+            }
+          }
+        }
       }
     }
   }

config.yaml

@@ -16,7 +16,7 @@ menu:
     title: projects
     url: /projects
     weight: 2
-  links:
+  externallinks:
   - identifier: mastodon
     name: mastodon
     title: mastodon

layouts/partials/nav.html

@@ -3,27 +3,29 @@
     <section class="website-name">
       <a href="{{ .Site.BaseURL }}">{{ .Site.Params.menuname }}</a>
     </section>
-    <section class="website-nav">
+    <span class="seperator">/</span>
+    <section class="website-mainmenu">
       <ul>
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
-          <li>
-            <a href="{{ .URL }}">
-              {{ .Pre }}
-              <span>{{ .Name }}</span>
-            </a>
-          </li>
-        {{ end }}
         <li>
-          <span class="seperator">&middot;</span>
+          <a href="{{ .URL }}">
+            {{ .Pre }}
+            <span>{{ .Name }}</span>
+          </a>
+        </li>
+        {{ end }}
+      </ul>
+    </section>
+    <section class="website-externallinks">
+      <ul>
+        {{ range .Site.Menus.externallinks }}
+        <li>
+          <a title="{{ .URL }}" href="{{ .URL }}">
+            {{ .Pre }}
+            <span>{{ .Name }}</span>
+          </a>
         </li>
-        {{ range .Site.Menus.links }}
-          <li>
-            <a href="{{ .URL }}">
-              {{ .Pre }}
-              <span>{{ .Name }}</span>
-            </a>
-          </li>
         {{ end }}
       </ul>
     </section>