improve navbar on widescreen

sass/_theme.scss

@@ -28,7 +28,7 @@
   --mantle: #{light.$mantle};
   --crust: #{light.$crust};
 
-  --main-width: min(700px, 95%);
+  --main-width: min(1000px, 95%);
   --standard-border-radius: .8rem;
   --text-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
   --title-font: "Ubuntu Nerd Font", Helvetica, sans-serif;

sass/parts/_navbar.scss

@@ -1,93 +1,75 @@
-header {
+@mixin header_link($color, $hover-color) {
-    background-color: var(--crust);
+    a {
-    margin-bottom: 3rem;
+        color: $color;
-    ;
+        text-decoration: none;
-}
 
-nav {
+        &:visited {
-    max-width: var(--main-width);
+            color: $color;
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &>div {
-        vertical-align: middle;
-
-        a {
-            text-decoration: none;
         }
 
-        ul {
+        &:hover {
-            list-style-type: none;
+            color: $hover-color;
-            padding: 0;
-            margin-top: 0;
-            margin-bottom: 0;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-        }
-
-        &.nav-title {
-            flex: 2 auto;
-            font-size: 2rem;
-            font-weight: 100;
-            text-transform: uppercase;
-
-            a {
-                color: var(--text);
-
-                &:visited {
-                    color: var(--text);
-                }
-
-                &:hover {
-                    color: var(--text);
-                }
-            }
-        }
-
-
-        &.nav-menus {
-            flex: 4 auto;
-
-            a {
-                color: var(--text);
-
-                &:visited {
-                    color: var(--text);
-                }
-
-                &:hover {
-                    color: var(--subtext0);
-                }
-            }
-
-            &>ul {
-                display: flex;
-                flex-flow: row wrap;
-                align-items: center;
-                justify-content: space-around;
-
-                &>li {
-                    flex: 1 auto;
-                    padding: 0;
-                }
-            }
-
-        }
-
-        &.nav-widgets {
-            flex: 1 auto;
-            color: var(--text);
-            font-size: 1.5rem;
-
-            li {
-                margin-left: .5rem;
-                margin-right: .5rem;
-            }
-
         }
     }
 }
+
+header {
+    background-color: var(--crust);
+    margin-bottom: 3rem;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-direction: row;
+    max-width: var(--main-width);
+    margin: 0 auto;
+
+    .home-title {
+        flex: 3 auto;
+        font-size: 2.5rem;
+        font-weight: 100;
+        text-transform: uppercase;
+        @include header_link(var(--text), var(--text));
+    }
+
+    .nav-bar {
+        flex: 1 auto;
+        @include header_link(var(--text), var(--subtext0));
+
+        ul {
+            padding: 0;
+            display: flex;
+            align-items: center;
+            list-style: none;
+        }
+
+        .nav-links {
+            margin-top: 0;
+            margin-bottom: 0;
+            font-size: 1.2rem;
+            text-transform: lowercase;
+
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: space-between;
+
+            li {
+                flex: 2 auto;
+                text-align: center;
+            }
+
+            .menu-icons-container {
+                flex: 1 auto;
+            }
+
+            .menu-icons-group {
+                color: var(--text);
+                justify-content: space-around;
+            }
+        }
+
+    }
+}

sass/styles.scss

@@ -29,11 +29,17 @@ body {
 }
 
 article {
-    max-width: var(--main-width);
+    max-width: calc(var(--main-width) - 12rem);
     margin-left: auto;
     margin-right: auto;
 }
 
+@media only screen and (max-width: 600px) {
+    article {
+        max-width: var(--main-width);
+    }
+}
+
 h1 {
     font-size: 2rem;
     font-weight: medium;

templates/navbar.html

@@ -1,29 +1,29 @@
 <header>
     <nav>
-        <div class="nav-title">
+        <div class="home-title">
-            <a class="home-title" href="{{ get_url(path='/') }}">{{ config.title }}</a>
+            <a href="{{ get_url(path='/') }}">{{ config.title }}</a>
         </div>
-        <div class="nav-menus">
+        <div class="nav-bar">
-            <ul>
+            <ul class="nav-links">
                 <li>
                     <a href="/articles">Articles</a>
                 </li>
                 <li>
                     <a href="/a-propos">À propos</a>
                 </li>
-            </ul>
+                <li class="menu-icons-container">
-        </div>
+                    <ul class="menu-icons-group">
-        <div class="nav-widgets">
+                        <li>
-            <ul>
+                            <div role="button" class="search-button menu-icon">
-                <li>
+                                <span></span>
-                    <div role="button" id="search-button" class="search-button">
+                            </div>
-                        <span></span>
+                        </li>
-                    </div>
+                        <li>
-                </li>
+                            <div role="button" class="theme-switch-button menu-icon">
-                <li>
+                                <span>󰔎</span>
-                    <div role="button" id="theme-switch-button" class="theme-switch-button">
+                            </div>
-                        <span>󰔎</span>
+                        </li>
-                    </div>
+                    </ul>
                 </li>
             </ul>
         </div>