possibly helping responsiveness

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>
 

src/routes/_error.svelte

@@ -20,7 +20,7 @@
 		margin: 1em auto;
     }
 
-	@media (min-width: 640px) {
+	@media (min-width: 800px) {
 		h1 {
 			font-size: 4em;
 		}

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

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>

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 {