From e62fcf59f7eb5ead1a948d6ff07562fa0f403d9a Mon Sep 17 00:00:00 2001
From: James Shiffer <2191476+scoliono@users.noreply.github.com>
Date: Mon, 10 Aug 2020 16:51:16 -0700
Subject: [PATCH] style fixes targeting safari, mobile

---
 src/components/Nav.svelte |  4 +++-
 static/global.css         | 25 ++++++++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 78b0941..4804c2d 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -80,17 +80,19 @@
         min-width: 8rem;
     }
     input.search {
-        width: 100%;
+        width: calc(100% - 0.5rem);
         height: 2rem;
         font-size: 1.5rem;
         margin: 0 auto;
         border: 0.25rem solid black;
+        outline: none;
     }
     input.search:focus::placeholder {
         opacity: 0;
     }
     input.search::placeholder {
         opacity: 1;
+        color: #000;
         font-weight: bold;
         font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
     }
diff --git a/static/global.css b/static/global.css
index e24133f..3a7fa2f 100644
--- a/static/global.css
+++ b/static/global.css
@@ -42,7 +42,7 @@ code {
         margin: 8rem auto !important;
     }
     .article-title {
-        font-size: 4rem !important;
+        font-size: 3rem !important;
     }
     .article-date {
         font-size: 2rem !important;
@@ -56,6 +56,17 @@ code {
     div.article-list {
         padding: 2rem 1rem;
     }
+    div.floaty {
+        padding-top: 5rem !important;
+    }
+    figure.article-image {
+        max-height: 300px !important;
+    }
+}
+@media (min-width: 1280px) {
+    .article-title {
+        font-size: 4rem !important;
+    }
 }
 
 div.article-list {
@@ -65,7 +76,7 @@ div.article-list {
     margin: 0 auto;
 }
 div.article-list > a {
-    margin: 0;
+    margin: 0.5rem;
     display: flex;
     text-decoration: none;
     flex-direction: row;
@@ -77,13 +88,14 @@ figure.article-image {
     align-self: center;
     justify-content: center;
     width: 33.33%;
+    padding: 1rem;
+    max-height: 150px;
     margin: 0;
 }
 figure.article-image img {
     width: auto;
-    object-fit: contain;
+    object-fit: cover;
     max-width: 100%;
-    margin: 1rem;
 }
 div.article-meta {
     margin: 1rem;
@@ -134,11 +146,6 @@ div.floaty {
     margin: 0 auto;
     width: 100%;
 }
-@media (min-width: 800px) {
-    div.floaty {
-        padding-top: 5rem !important;
-    }
-}
 
 img.avatar {
     height: 48px;