Redesigned headerbar

static/css/main.css

@@ -51,6 +51,11 @@ hr {
 #infinite-scroll-indicator {
   text-align: center; }
 
+#headerbar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between; }
+
 form {
   display: flex;
   flex-direction: column; }

static/css/main.scss

@@ -68,6 +68,20 @@ hr {
     text-align: center;
 }
 
+#headerbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    // .headerbar-left {
+    //     background-color: red;
+    // }
+
+    // .headerbar-right {
+    //     background-color: green;
+    // }
+}
+
 
 // // @font-face {
 // //     font-family: 'avenir';

templates/auth/headerbar.html

@@ -1,11 +1,16 @@
-{% if loggedin %}
-<button hx-get="/auth/sessioninfo" hx-target="#main-frame">Username</button>
-<button onclick="if(confirm('Abmelden?')){location.href = '/auth/logout';}">Abmelden</button>
-{% else %}
-<button hx-get="/auth/login" hx-target="#main-frame">Anmelden</button>
-<button hx-get="/auth/newuser" hx-target="#main-frame">Neuen Account erstellen</button>
-{% endif %}
-
-<a href="/docs/impressum.html">Impressum</a>
-<a href="/docs/datenschutz.html">Datenschutz</a>
-<a href="/docs/kontakt.html">Kontakt</a>
+<div id="headerbar">
+    <div class="headerbar-left">
+        {% if loggedin %}
+        <button hx-get="/auth/sessioninfo" hx-target="#main-frame">Username</button>
+        <button onclick="if(confirm('Abmelden?')){location.href = '/auth/logout';}">Abmelden</button>
+        {% else %}
+        <button hx-get="/auth/login" hx-target="#main-frame">Anmelden</button>
+        <button hx-get="/auth/newuser" hx-target="#main-frame">Neuen Account erstellen</button>
+        {% endif %}
+    </div>
+    <div class="headerbar-right">
+        <a href="/docs/impressum.html">Impressum</a>
+        <a href="/docs/datenschutz.html">Datenschutz</a>
+        <a href="/docs/kontakt.html">Kontakt</a>
+    </div>
+</div>