tweak styles more

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;
 	}
 }

routes/_components/Avatar.html

@@ -1,8 +1,8 @@
 <img src="{{account.avatar_static}}">
 <style>
   img {
-    width: 50px;
+    width: 48px;
-    height: 50px;
+    height: 48px;
     margin: 10px auto;
     border-radius: 4px;
   }

routes/_components/NotLoggedInHome.html

@@ -1,13 +1,21 @@
-<div class="banner">
+<div class="free-text">
-  <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>
+  <div class="banner">
-  <h1>Pinafore</h1>
+    <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;

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: 0;
-    padding: 7px 10px 5px;
+    background: none;
+    border: none;
   }
 
   .footer svg {
     pointer-events: none;
-    width: 25px;
+    width: 24px;
-    height: 25px;
+    height: 24px;
-    fill: royalblue;
+    fill: #859ede;
   }
 </style>
 <script>

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'