aligns top bar with content

fedireads/static/format.css

@@ -19,15 +19,25 @@ h2 {
     margin-bottom: 1rem;
 }
 
-#main {
+#main, header > div {
     margin: 0 auto;
     display: flex;
     flex-flow: row wrap;
     max-width: 75rem;
+    width: 100%;
+}
+
+#branding, #actions {
+    margin: 0 1rem;
+}
+#branding {
+    flex-grow: 1;
+}
+#actions {
+    flex-grow: 0;
 }
 
 #top-bar {
-    height: 4rem;
     background-color: #B2DBBF;
     overflow: hidden;
     padding: 0.5rem;
@@ -42,14 +52,6 @@ h2 {
     font-size: 2em;
 }
 
-header > div:first-child {
-    float: left;
-}
-
-header > div:last-child {
-    float: right;
-}
-
 #sidebar {
     display: flex;
     flex-direction: column;

fedireads/templates/layout.html

@@ -21,8 +21,9 @@
 
 <div id="top-bar">
     <header>
-        <div id="branding"><a href="/">📚FediReads</a></div>
         <div>
+            <div id="branding"><a href="/">📚FediReads</a></div>
+            <div id="actions">
                 <div id="account">
                     {% if user.is_authenticated %}
                     <form name="logout" action="/logout/" method="post">
@@ -44,6 +45,7 @@
                     </form>
                 </div>
             </div>
+        </div>
     </header>
 </div>