increased overall font size by 12.5%; added new style sheet color

DEPENDENCIES.md

@@ -28,3 +28,6 @@ Linux packages:
 * database driver, e.g. pdo_sqlite
 * PHPMailer (included in source)
 
+## Site Display
+
+* Pico CSS (Yohn's fork)

theme/static/css/custom.css

@@ -23,11 +23,13 @@
  * General settings  
  */
 :root {
+  --tr-card-height: 300px;
+  --tr-smallest-width: 350px;
+
   --pico-font-family-sans-serif: LinBiolinum, system-ui, "Segoe UI", Roboto,
     Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif,
     var(--pico-font-family-emoji);
-  --card-height: 300px;
-  --smallest-width: 350px;
+  --pico-font-size: 112.5%; 
 }
 
 /* don't underline links by default */
@@ -103,20 +105,42 @@ a {
 
 /* Two cards side by side on small screens */
 @media (min-width: 576px) {
+  :root {
+    --pico-font-size: 118.75%; 
+  }
   .card {
     max-width: calc(50% - var(--pico-block-spacing-horizontal) / 2);
   }
 }
 
+@media (min-width: 768px) {
+  :root {
+    --pico-font-size: 125%;
+  }
+}
+
 /* Three cards side by side on large screens */
 @media (min-width: 1024px) {
+  :root {
+    --pico-font-size: 131.25%; 
+  }
   .card {
     max-width: calc(33% - var(--pico-block-spacing-horizontal) * 2 / 3);
   }
 }
 
+@media (min-width: 1280px) {
+  :root {
+    --pico-font-size: 137.5%;
+  }
+}
+
 /* Four cards side by side on xs-large screens */
 @media screen and (min-width: 1536px) {
+  :root {
+    --pico-font-size: 143.75%;
+  }
+
   .card {
     max-width: calc(25% - var(--pico-block-spacing-horizontal) * 3 / 4);
   }
@@ -157,7 +181,7 @@ a {
   border-bottom: thin solid var(--pico-h1-color);
 
   h1 {
-    font-size: 3rem;
+    font-size: 2.66rem;
     font-weight: 500;
     margin-bottom: calc(var(--pico-spacing) * 0.5);
 
@@ -169,7 +193,7 @@ a {
 }
 
 #jumbotron-subtitle h2 {
-  font-size: 2.1rem;
+  font-size: 1.86rem;
   font-weight: 500;
   margin-top: calc(var(--pico-spacing) * 0.5);
 }
@@ -190,7 +214,7 @@ a {
     }
 
     a {
-      font-size: calc(var(--pico-font-size) * 0.9);
+      font-size: 1rem;
       font-weight: bold;
       text-align: right;
     }
@@ -219,7 +243,7 @@ a {
 
 /* make hamburger icon bigger */
 #hamburger-label {
-  font-size: calc(var(--pico-font-size) * 2);
+  font-size: 1.77rem;
 }
 
 /* change color of sun icon to white*/
@@ -246,8 +270,8 @@ a {
 }
   
 .newsletter-email {
-  flex: 1 0 var(--smallest-width); 
-  min-width: var(--smallest-width);
+  flex: 1 0 var(--tr-smallest-width); 
+  min-width: var(--tr-smallest-width);
 }
 
 .newsletter-submit {
@@ -266,7 +290,7 @@ a {
 
 pre {
   width: 80%;
-  min-width: var(--smallest-width);
+  min-width: var(--tr-smallest-width);
   margin-left: auto;
   margin-right: auto;
   white-space: pre-wrap;
@@ -284,13 +308,13 @@ pre {
 
   img {
     flex: 0 0 auto;
-    max-height: calc(var(--card-height) * 2);
+    max-height: calc(var(--tr-card-height) * 2);
     aspect-ratio: auto;
   }
 
   p {
-    flex: 0 1 var(--smallest-width);
-    font-size: 1.5em;
+    flex: 0 1 var(--tr-smallest-width);
+    font-size: 1.2rem;
   }
 }
 
@@ -302,9 +326,7 @@ pre {
   content: "\00a0\02192";
 }
 
-/* grid settings for event list */
-.events {}
-
+/* event list */
 .event-info {
   vertical-align: top;
   max-width: 240px;
@@ -355,7 +377,7 @@ pre {
 }
 
 .card-body img {
-  height: var(--card-height);
+  height: var(--tr-card-height);
   object-fit: contain;
 }
 
@@ -373,7 +395,7 @@ pre {
 
   .klappentext, p {
     flex: 0 0 calc(50% - var(--pico-block-spacing-horizontal));
-    min-width: var(--smallest-width);
+    min-width: var(--tr-smallest-width);
     margin-bottom: var(--pico-block-spacing-vertical);
     
     blockquote {
@@ -390,8 +412,8 @@ pre {
   }
 
   img {
-    max-height: calc(var(--card-height) * 2);
-    min-width: var(--smallest-width);
+    max-height: calc(var(--tr-card-height) * 2);
+    min-width: var(--tr-smallest-width);
     max-width: 100%;
     object-fit: cover;
     display: block;
@@ -434,12 +456,12 @@ pre {
 }
 
 .wcard-gallery {
-  height: var(--card-height);
+  height: var(--tr-card-height);
   position: relative;
   overflow: visible;
 
   .wcard-gallery-mask {
-    height: var(--card-height);
+    height: var(--tr-card-height);
     overflow: hidden;
   }
 
@@ -452,7 +474,7 @@ pre {
   li.wcard-image {
     position: absolute;
     list-style: none;
-    height: var(--card-height);
+    height: var(--tr-card-height);
     width: 100%;
     animation: image-slide 20s ease-in-out infinite;
     left: -100%;