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,3 +1,5 @@
+<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>
@@ -5,7 +7,10 @@
         <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>