fuck with css

config.toml

@@ -1,4 +1,5 @@
 name = "From the Office of the Chief Sundries Officer and Head of R&D"
+title = "From the Office of the Chief Sundries Officer and Head of R&D"
 
 # The URL the site will be built for
 base_url = "https://proclamations.nebcorp-hias.com"

sass/main.scss

@@ -46,4 +46,4 @@ html {
   html {
     font-size: 18px;
   }
-}
+}

sass/parts/_header.scss

@@ -1,3 +1,8 @@
+.hias-footer {
+    text-align: center;
+    font-size: 0.4rem;
+}
+
 .page-header {
   font-size: 3em;
   line-height: 100%;
@@ -28,15 +33,33 @@ header .main {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: flex-start;
   gap: 12px;
-  font-size: 1.5rem;
+  font-size: 1.2rem;
 
   /* Otherwise header and menu is too close on small screens*/
   margin-bottom: 10px;
 }
 
+header .config-title {
+    line-height: 1.3;
+}
+
+.nav-header {
+  /* flex-child */
+  flex-grow: 0;
+  /* flex-container */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: flex-even;
+  gap: 4px;
+}
+    
+
+
 .socials {
   /* flex-child */
   flex-grow: 0;

sass/parts/misc.scss

@@ -11,11 +11,6 @@
   background-color: var(--primary-color);
 }
 
-.hias-footer {
-    text-align: center;
-    font-size: 0.4rem;
-}
-
 ::-moz-selection {
   background: var(--primary-color);
   color: var(--hover-color);

templates/partials/nav.html

@@ -1,25 +1,29 @@
 <header>
+  <div class="config-title">
+  <h1><a href={{ config.base_url }}>{{ config.title }}</a></h1>
+  </div>
+  
     <div class="main">
-        <a href={{ config.base_url }}>{{ config.title }}</a>
-
         <div class="socials">
             {% for social in config.extra.socials %}
             <a href="{{ social.url }}" class="social">
               <img alt={{ social.name }} src="/social_icons/{{ social.icon }}.svg" rel="me">
+            </a>
               {% if not loop.last %}
               |
               {% endif %}
-            </a>
             {% endfor %}
         </div>
-    </div>
 
-    <nav>
+
+    </div>
+    <div class="nav-header">
         {% for menu in config.extra.menu %}
-        <a href={{ menu.url }} style="margin-left: 0.7em">{{ menu.name }}</a>
+        <a href={{ menu.url }}>{{ menu.name }}</a>
         {% if not loop.last %}
         |
         {% endif %}
         {% endfor %}
-    </nav>
+
+    </div>
 </header>