From 5b81e2abc6b9c9deec90a969dc151b8957d1ac2e Mon Sep 17 00:00:00 2001
From: Ungol <ungol@ungol.fr>
Date: Tue, 23 Dec 2025 22:27:52 +0100
Subject: [PATCH] improve navbar on widescreen

---
 sass/_theme.scss        |   2 +-
 sass/parts/_navbar.scss | 116 +++++++++++++++++-----------------------
 sass/styles.scss        |   8 ++-
 templates/navbar.html   |  34 ++++++------
 4 files changed, 74 insertions(+), 86 deletions(-)

diff --git a/sass/_theme.scss b/sass/_theme.scss
index 3e59492..0cfe2cd 100644
--- a/sass/_theme.scss
+++ b/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;
diff --git a/sass/parts/_navbar.scss b/sass/parts/_navbar.scss
index ee63d3c..07c9a7a 100644
--- a/sass/parts/_navbar.scss
+++ b/sass/parts/_navbar.scss
@@ -1,93 +1,75 @@
+@mixin header_link($color, $hover-color) {
+    a {
+        color: $color;
+        text-decoration: none;
+
+        &:visited {
+            color: $color;
+        }
+
+        &:hover {
+            color: $hover-color;
+        }
+    }
+}
+
 header {
     background-color: var(--crust);
     margin-bottom: 3rem;
-    ;
 }
 
 nav {
-    max-width: var(--main-width);
-    margin-left: auto;
-    margin-right: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
+    flex-direction: row;
+    max-width: var(--main-width);
+    margin: 0 auto;
 
-    &>div {
-        vertical-align: middle;
+    .home-title {
+        flex: 3 auto;
+        font-size: 2.5rem;
+        font-weight: 100;
+        text-transform: uppercase;
+        @include header_link(var(--text), var(--text));
+    }
 
-        a {
-            text-decoration: none;
-        }
+    .nav-bar {
+        flex: 1 auto;
+        @include header_link(var(--text), var(--subtext0));
 
         ul {
-            list-style-type: none;
             padding: 0;
-            margin-top: 0;
-            margin-bottom: 0;
             display: flex;
             align-items: center;
-            justify-content: space-around;
+            list-style: none;
         }
 
-        &.nav-title {
-            flex: 2 auto;
-            font-size: 2rem;
-            font-weight: 100;
-            text-transform: uppercase;
+        .nav-links {
+            margin-top: 0;
+            margin-bottom: 0;
+            font-size: 1.2rem;
+            text-transform: lowercase;
 
-            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;
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: space-between;
 
             li {
-                margin-left: .5rem;
-                margin-right: .5rem;
+                flex: 2 auto;
+                text-align: center;
             }
 
+            .menu-icons-container {
+                flex: 1 auto;
+            }
+
+            .menu-icons-group {
+                color: var(--text);
+                justify-content: space-around;
+            }
         }
+
     }
 }
\ No newline at end of file
diff --git a/sass/styles.scss b/sass/styles.scss
index edf8206..21c9553 100644
--- a/sass/styles.scss
+++ b/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;
diff --git a/templates/navbar.html b/templates/navbar.html
index 8730a4e..a960f71 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -1,29 +1,29 @@
 <header>
     <nav>
-        <div class="nav-title">
-            <a class="home-title" href="{{ get_url(path='/') }}">{{ config.title }}</a>
+        <div class="home-title">
+            <a href="{{ get_url(path='/') }}">{{ config.title }}</a>
         </div>
-        <div class="nav-menus">
-            <ul>
+        <div class="nav-bar">
+            <ul class="nav-links">
                 <li>
                     <a href="/articles">Articles</a>
                 </li>
                 <li>
                     <a href="/a-propos">À propos</a>
                 </li>
-            </ul>
-        </div>
-        <div class="nav-widgets">
-            <ul>
-                <li>
-                    <div role="button" id="search-button" class="search-button">
-                        <span></span>
-                    </div>
-                </li>
-                <li>
-                    <div role="button" id="theme-switch-button" class="theme-switch-button">
-                        <span>󰔎</span>
-                    </div>
+                <li class="menu-icons-container">
+                    <ul class="menu-icons-group">
+                        <li>
+                            <div role="button" class="search-button menu-icon">
+                                <span></span>
+                            </div>
+                        </li>
+                        <li>
+                            <div role="button" class="theme-switch-button menu-icon">
+                                <span>󰔎</span>
+                            </div>
+                        </li>
+                    </ul>
                 </li>
             </ul>
         </div>