From 0097a062111a9944d076039e3c44d45c596c25d1 Mon Sep 17 00:00:00 2001
From: James Shiffer <2191476+scoliono@users.noreply.github.com>
Date: Wed, 24 Jun 2020 11:16:07 -0700
Subject: [PATCH] mobile layout updates

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

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 96c544f..b66487e 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -40,18 +40,29 @@
     }
     div.link a {
         text-decoration: none;
-        font-size: 1.5rem;
+        font-size: 2rem;
+    }
+    div.wordmark {
+        flex: 1 0 64px;
     }
     img.wordmark {
         height: 3rem;
         max-width: 100%;
         object-fit: contain;
-        margin-right: 3rem;
     }
     @media (min-width: 800px) {
         div.items {
             flex-direction: row;
         }
+        div.link a {
+            font-size: 1.5rem !important;
+            margin-left: 2rem;
+        }
+        div.search {
+            margin-left: 1rem;
+        }
+    }
+    @media (min-width: 1280px) {
         div.link a {
             font-size: 2rem !important;
             margin-left: 4rem;
@@ -59,6 +70,7 @@
     }
     div.search {
         width: 100%;
+        flex: 1 0 64px;
     }
     input.search {
         width: 100%;
@@ -79,7 +91,7 @@
 
 <nav>
     <div class="items">
-        <div><a href="/"><img class="wordmark" src="/logo.png" alt="HowFeed.biz"></a></div>
+        <div class="wordmark"><a href="/"><img class="wordmark" src="/logo.png" alt="HowFeed.biz"></a></div>
         <div class="search">
             <input class="search" on:keyup={search} bind:value={query} type="text" placeholder="Search">
         </div>
diff --git a/static/global.css b/static/global.css
index 2a94ad4..00347cd 100644
--- a/static/global.css
+++ b/static/global.css
@@ -108,7 +108,7 @@ div.article-meta {
 
 .content {
     background: #fff;
-    margin: 8rem 0;
+    margin: 16rem 0;
     padding: 2rem;
 }