From 32dd99800d7e494af85a12239b3881d2e0ea3ac3 Mon Sep 17 00:00:00 2001
From: Jeff Elkner <jeff.elkner@gmail.com>
Date: Tue, 25 Apr 2023 12:40:45 -0400
Subject: [PATCH] Add simple media query for less than 800 pixel screens

---
 css/elknernet.css | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/css/elknernet.css b/css/elknernet.css
index 3a82904..7715a8d 100644
--- a/css/elknernet.css
+++ b/css/elknernet.css
@@ -115,7 +115,7 @@ footer a:hover>strong {
 }
 p {
     text-align: justify;
-    font-size: 1.2em;
+    font-size: 1.2vw;
 }
 blockquote {
     margin-top: 40px;
@@ -130,7 +130,7 @@ blockquote p {
 }
 blockquote p:first-letter {
     float: left;
-    font-size: 2em;
+    font-size: 2vw;
     color: #960;
 }
 .author {
@@ -141,3 +141,28 @@ blockquote p:first-letter {
     margin-right: 50px;
     color: #630;
 }
+
+/* Style for mobile devices */
+@media (max-width: 800px) {
+    main, header {
+        display: block;
+    }
+    header>img, header>p, header>div#author {
+        display: none;
+    }
+    header>h1 {
+        font-size: 7vw;
+        margin-bottom: 0;
+    }
+    header>nav {
+        font-size: 3.4vw;
+        margin-top: 0;
+        margin-bottom: 2vw;
+    }
+    section>h2 {
+        font-size: 3.2vw;
+    }
+    section>ul>li {
+        font-size: 2.2vw;
+    }
+}