From f783f1414c3fdf3993b846668c90ebc122f7a9d8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 11 Jan 2018 00:26:35 -0800
Subject: [PATCH] tweak styles more

---
 assets/global.css                       | 20 ++++++++++----------
 routes/_components/Avatar.html          |  4 ++--
 routes/_components/NotLoggedInHome.html | 24 ++++++++++++++++--------
 routes/_components/Status.html          | 21 ++++++++++++++-------
 routes/_components/Timeline.html        | 10 +++++++++-
 5 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index 2479d60..9708bde 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -2,9 +2,9 @@ body {
 	margin: 0;
 	font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
 	font-size: 14px;
-	line-height: 1.5;
+	line-height: 1.2;
 	color: #333;
-	background: white;
+	background: #ebeffb;
 }
 
 #svelte {
@@ -14,12 +14,16 @@ body {
 
 main {
 	overflow-x: hidden;
-	overflow-y: auto;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: touch;
 	position: relative;
 	max-width: 800px;
 	padding: 15px 15px;
 	box-sizing: border-box;
-	margin: 75px auto;
+	margin: 85px auto;
+	background: white;
+	border: 1px solid #ededed;
+	border-radius: 1px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -88,18 +92,14 @@ p, label, input {
 	font-size: 1.3em;
 }
 
-ul {
+ul, li, p {
 	padding: 0;
 	margin: 0;
 }
 
-p {
-	margin: 0;
-	padding: 0;
-}
-
 @media (max-width: 767px) {
 	main {
 		padding: 5px 5px;
+		margin: 75px auto;
 	}
 }
\ No newline at end of file
diff --git a/routes/_components/Avatar.html b/routes/_components/Avatar.html
index ec5e4bf..94946d0 100644
--- a/routes/_components/Avatar.html
+++ b/routes/_components/Avatar.html
@@ -1,8 +1,8 @@
 <img src="{{account.avatar_static}}">
 <style>
   img {
-    width: 50px;
-    height: 50px;
+    width: 48px;
+    height: 48px;
     margin: 10px auto;
     border-radius: 4px;
   }
diff --git a/routes/_components/NotLoggedInHome.html b/routes/_components/NotLoggedInHome.html
index 3795e55..39c11bd 100644
--- a/routes/_components/NotLoggedInHome.html
+++ b/routes/_components/NotLoggedInHome.html
@@ -1,13 +1,21 @@
-<div class="banner">
-  <svg alt="Pinafore logo" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92.12 59.93H59.87V8.23C70.4 14.9 87.34 30 92.12 59.93zM31 26.9A122.4 122.4 0 0 1 9.39 60.35H31zM37.76 99h24.48a30.67 30.67 0 0 0 30.67-30.67H50.52V6.27a5.27 5.27 0 0 0-10.52 0v62.06H7.09A30.67 30.67 0 0 0 37.76 99z"/></svg>
-  <h1>Pinafore</h1>
+<div class="free-text">
+  <div class="banner">
+    <svg alt="Pinafore logo" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92.12 59.93H59.87V8.23C70.4 14.9 87.34 30 92.12 59.93zM31 26.9A122.4 122.4 0 0 1 9.39 60.35H31zM37.76 99h24.48a30.67 30.67 0 0 0 30.67-30.67H50.52V6.27a5.27 5.27 0 0 0-10.52 0v62.06H7.09A30.67 30.67 0 0 0 37.76 99z"/></svg>
+    <h1>Pinafore</h1>
+  </div>
+  <p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
+
+  <p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
+
+  <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 </div>
-<p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
-
-<p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
-
-<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 <style>
+  .free-text {
+    margin: 20px;
+  }
+  .free-text p {
+    margin: 20px 0;
+  }
   .banner {
     display: flex;
     align-items: center;
diff --git a/routes/_components/Status.html b/routes/_components/Status.html
index 704f84a..2242a8d 100644
--- a/routes/_components/Status.html
+++ b/routes/_components/Status.html
@@ -27,9 +27,9 @@
 <style>
   article {
     pointer-events: none;
-    padding: 10px 0;
     max-width: 600px;
     margin: 0 auto;
+    padding: 10px 0;
     border-bottom: 1px solid #ededed;
     display: grid;
     width: 100%;
@@ -50,6 +50,7 @@
     word-wrap: break-word;
     overflow: hidden;
     white-space: pre-wrap;
+    font-size: 0.9em;
   }
 
   :global(.content a) {
@@ -61,27 +62,33 @@
     color: #333;
   }
 
+  :global(.content p) {
+    margin: 0 0 10px;
+  }
+
   .header {
     grid-area: header;
-    margin: 5px;
+    margin: 5px 5px;
   }
   .footer {
     grid-area: footer;
     display: flex;
     margin: 5px;
+    justify-content: space-between;
   }
 
   .footer button {
     pointer-events: auto;
-    margin: auto;
-    padding: 7px 10px 5px;
+    padding: 0;
+    background: none;
+    border: none;
   }
 
   .footer svg {
     pointer-events: none;
-    width: 25px;
-    height: 25px;
-    fill: royalblue;
+    width: 24px;
+    height: 24px;
+    fill: #859ede;
   }
 </style>
 <script>
diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 4abda82..a11b2b8 100644
--- a/routes/_components/Timeline.html
+++ b/routes/_components/Timeline.html
@@ -1,8 +1,16 @@
 <ul>
   {{#each statuses as status}}
-  <Status :status />
+  <li>
+    <Status :status />
+  </li>
   {{/each}}
 </ul>
+<style>
+  ul {
+    list-style: none;
+    padding-right: 10px;
+  }
+</style>
 <script>
   import { store } from '../_utils/store'
   import { getHomeTimeline } from '../_utils/mastodon'