From 003e957a77ddf0f3207b86ef6b8a2bdc718405ef Mon Sep 17 00:00:00 2001
From: Galen Guyer <galen@galenguyer.com>
Date: Wed, 13 Apr 2022 22:07:22 -0400
Subject: mobile css improvements

---
 src/App.css             | 45 ++++++++++++++++++++++++++-------------------
 src/components/Card.css |  8 +++++---
 src/pages/Index.css     |  6 ++++++
 3 files changed, 37 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/App.css b/src/App.css
index 50e39d9..f4846a6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,37 +1,44 @@
 .App {
-  text-align: center;
-  margin: auto;
-  max-width: 90vw;
+    text-align: center;
+    margin: auto;
+    max-width: 90vw;
 
-  position: relative;
-  min-height: 100vh;
-	display: flex;
-	flex-direction: column;
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 .App h1 {
-  font-size: 2.4em;
-  margin: 18px 0px 8px 0px;
+    font-size: 2.4em;
+    margin: 18px 0px 8px 0px;
 }
 .Updated .Latest {
-  font-size: 1.3em;
-  margin: 0px;
+    font-size: 1.3em;
+    margin: 0px;
 }
 .Updated .Prior {
-  margin: 6px;
-  color: #666;
+    margin: 6px;
+    color: #666;
 }
 
 .App a {
-  text-decoration: none;
-  color: #000;
+    text-decoration: none;
+    color: #000;
 }
 
 .BlueLink {
-  color: #008 !important;
+    color: #008 !important;
 }
 
 footer {
-  margin-top: auto;
-  margin-bottom: 20px;
-}
\ No newline at end of file
+    margin-top: auto;
+    margin-bottom: 20px;
+}
+
+@media screen and (max-width: 600px) {
+    .App {
+        margin: auto;
+        max-width: 95vw;
+    }
+}
diff --git a/src/components/Card.css b/src/components/Card.css
index 39c51c7..273e106 100644
--- a/src/components/Card.css
+++ b/src/components/Card.css
@@ -1,7 +1,9 @@
 .cardLink {
     text-decoration: none;
     color: black;
-    margin: 24px;
+    margin: 12px 24px;
+    flex-basis: 100%;
+    max-width: 200px;
 }
 
 .Card {
@@ -14,8 +16,8 @@
 
 @media screen and (max-width: 600px) {
     .Card {
-        padding: 0px 20px;
-        margin: 18px;
+        padding: 0px 16px;
+        margin: 10px 0px;
     }    
 }
 
diff --git a/src/pages/Index.css b/src/pages/Index.css
index 5476eb1..c134449 100644
--- a/src/pages/Index.css
+++ b/src/pages/Index.css
@@ -16,6 +16,12 @@
     margin-top: 48px;
 }
 
+@media screen and (max-width: 600px) {
+    .Section .Title {
+        margin-top: 12px;
+    }    
+}
+
 .Cards {
     display: flex;
     justify-content: center;
-- 
cgit v1.2.3