From d55696e301d2f0e4f053eb4d01bb5858e01b029e Mon Sep 17 00:00:00 2001
From: James Shiffer <basedvioletfag@waifu.club>
Date: Fri, 5 Jun 2020 00:24:24 -0700
Subject: [PATCH] possibly helping responsiveness

---
 src/components/Nav.svelte  |  9 +++++++--
 src/routes/_error.svelte   |  2 +-
 src/routes/a/[slug].svelte |  2 +-
 src/routes/index.svelte    | 11 +++++++----
 static/global.css          | 37 ++++++++++++++++++++++++++++---------
 5 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 91eed31..2290ab0 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -26,16 +26,21 @@
     }
     div.link a {
         text-decoration: none;
-        font-size: 2rem;
+        font-size: 1.5rem;
     }
     img.wordmark {
         height: 3rem;
+        max-width: 100%;
+        object-fit: contain;
     }
-    @media (min-width: 640px) {
+    @media (min-width: 800px) {
         div.items {
             flex-direction: row;
             align-items: end;
         }
+        div.link a {
+            font-size: 2rem !important;
+        }
     }
 </style>
 
diff --git a/src/routes/_error.svelte b/src/routes/_error.svelte
index ebc923e..ee3200a 100644
--- a/src/routes/_error.svelte
+++ b/src/routes/_error.svelte
@@ -20,7 +20,7 @@
 		margin: 1em auto;
     }
 
-	@media (min-width: 640px) {
+	@media (min-width: 800px) {
 		h1 {
 			font-size: 4em;
 		}
diff --git a/src/routes/a/[slug].svelte b/src/routes/a/[slug].svelte
index 64d38bf..a9450d0 100644
--- a/src/routes/a/[slug].svelte
+++ b/src/routes/a/[slug].svelte
@@ -52,7 +52,7 @@
         margin: 0 0 0.5em 0;
     }
 
-    @media (min-width: 640px) {
+    @media (min-width: 800px) {
         .content {
             width: 75vw;
         }
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 6ebcdd1..f17f217 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -25,11 +25,11 @@
         margin: 0;
     }
     img {
-        width: 100%;
-        max-width: 640px;
+        object-fit: contain;
+        max-width: 100%;
         margin: 1rem;
     }
-    @media (min-width: 640px) {
+    @media (min-width: 800px) {
         div.homepage {
             padding-top: 5rem !important;
         }
@@ -70,7 +70,7 @@
     }
     h1.welcome {
         margin-top: 1rem;
-        font-size: 4rem;
+        font-size: 3.75rem;
     }
     h2 {
         text-transform: uppercase;
@@ -79,6 +79,9 @@
         margin-bottom: 1rem;
         font-size: 1.5rem;
     }
+    div.article-list {
+        box-shadow: 0 0 5px #000;
+    }
 </style>
 
 <svelte:head>
diff --git a/static/global.css b/static/global.css
index edd48c8..008e77f 100644
--- a/static/global.css
+++ b/static/global.css
@@ -33,26 +33,44 @@ code {
 	border-radius: 2px;
 }
 
-@media (min-width: 640px) {
-	body {
-		font-size: 16px;
+@media (min-width: 800px) {
+    body {
+        font-size: 16px;
     }
     .content {
         margin: 8rem auto !important;
     }
+    .article-title {
+        font-size: 4rem !important;
+    }
+    .article-date {
+        font-size: 2rem !important;
+    }
+    figure.article-image img {
+        height: 12rem !important;
+    }
+    div.article-list > a {
+        margin: 2rem !important;
+    }
+    div.article-meta {
+        margin: 2rem;
+    }
+    div.article-list {
+        padding: 2rem 1rem;
+    }
 }
 
 div.article-list {
+    padding: 1rem;
     background: #508FC3;
     width: 80%;
     margin: 0 auto;
-    padding: 2rem 1rem;
 }
 div.article-list > a {
+    margin: 0;
     display: flex;
     text-decoration: none;
     flex-direction: row;
-    margin: 2rem;
     align-items: start;
 }
 figure.article-image {
@@ -63,22 +81,23 @@ figure.article-image {
     width: 33.33%;
 }
 figure.article-image img {
-    height: 12rem;
+    height: 6rem;
     width: auto;
 }
 div.article-meta {
+    margin: 1rem;
     background: white;
-    margin: 2rem;
+    margin-right: 0;
     padding: 0.75rem;
     line-height: 1;
     font-weight: bold;
     flex: 1 0 0;
 }
 .article-title {
-    font-size: 4rem;
+    font-size: 2rem;
 }
 .article-date {
-    font-size: 2rem;
+    font-size: 1rem;
 }
 
 .content {