tweak themes

routes/settings/instances/[instanceName].html

@@ -8,10 +8,12 @@
 
     {{#if instanceUserAccount}}
       <h2>Logged in as:</h2>
-      <div class="current-user">
-        <img src="{{instanceUserAccount.avatar}}" />
-        <a rel="noopener" target="_blank" href="{{instanceUserAccount.url}}">@{{instanceUserAccount.acct}}</a>
-        <span class="acct-name">{{instanceUserAccount.display_name}}</span>
+      <div class="acct-current-user">
+        <img alt="Avatar for {{instanceUserAccount.acct}}"
+             class="acct-avatar" src="{{instanceUserAccount.avatar}}" />
+        <a class="acct-handle" rel="noopener" target="_blank"
+           href="{{instanceUserAccount.url}}">@{{instanceUserAccount.acct}}</a>
+        <span class="acct-display-name">{{instanceUserAccount.display_name}}</span>
       </div>
       <h2>Theme:</h2>
       <form class="theme-chooser">
@@ -36,19 +38,24 @@
   </SettingsLayout>
 </Layout>
 <style>
-  .current-user {
+  .acct-current-user {
     padding: 20px;
-    display: flex;
+    display: grid;
     align-items: center;
     font-size: 1.3em;
+    grid-template-areas:
+        "avatar handle"
+        "avatar display-name";
+    grid-gap: 20px;
   }
-  .current-user img {
+  .acct-avatar {
     width: 64px;
     height: 64px;
     border-radius: 4px;
+    grid-area: avatar;
   }
-  .current-user img, .current-user a, .current-user span {
-    margin-right: 20px;
+  .acct-handle {
+    grid-area: handle;
   }
   .theme-chooser {
     display: block;

scss/global.scss

@@ -20,10 +20,14 @@ main {
   max-width: 800px;
   padding: 15px 15px;
   box-sizing: border-box;
-  margin: 85px auto;
+  margin: 85px auto 15px;
   background: var(--main-bg);
   border: 1px solid var(--main-border);
   border-radius: 1px;
+  @media (max-width: 767px) {
+    padding: 5px 5px;
+    margin: 75px auto 15px;
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -105,11 +109,4 @@ ul, li, p {
 
 .hidden {
   opacity: 0;
-}
-
-@media (max-width: 767px) {
-  main {
-    padding: 5px 5px;
-    margin: 75px auto;
-  }
 }