From 39b7481da3a35a6c6ab60f93f23c909f5e86d8bc Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 14 Jan 2018 11:34:53 -0800
Subject: [PATCH] tweak themes

---
 routes/settings/instances/[instanceName].html | 25 ++++++++++++-------
 scss/global.scss                              | 13 ++++------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/routes/settings/instances/[instanceName].html b/routes/settings/instances/[instanceName].html
index c467831e..fc8a70a4 100644
--- a/routes/settings/instances/[instanceName].html
+++ b/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;
diff --git a/scss/global.scss b/scss/global.scss
index 8317f269..1ff2c4c1 100644
--- a/scss/global.scss
+++ b/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;
-  }
 }
\ No newline at end of file