added comments throughout

theme/static/css/custom.css

@@ -20,25 +20,24 @@
 }
 
 /*
- * Modified Pico settings (standard Pico) 
+ * General settings  
  */
 :root {
   --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);
 
-  --bg-gradient-light: linear-gradient(to right, #FCEFD9, white, #FCEFD9);
-  --bg-gradient-dark: linear-gradient(to right, #4D3700, black, #4D3700);
+  /* define gradients as variables */
+  /*   --bg-gradient-light: linear-gradient(to right, #FCEFD9, white, #FCEFD9);
+  --bg-gradient-dark: linear-gradient(to right, #4D3700, black, #4D3700); */
 }
 
+/* don't underline links by default */
 a {
   --pico-text-decoration: none;
 }
 
-
-/* 
- * Override breakpoint settings for hamburger menu (overrides Yohn's Pico fork
- */
+/* Override breakpoint settings for hamburger menu in Yohn's Pico fork */
 @media (max-width: 767px) {
   nav[role=navigation][data-breakpoint=my-md] {
     flex-wrap: wrap;
@@ -100,28 +99,23 @@ a {
   }
 }
 
+/* end override hamburger settings */
 
-/*
- * Settings specific to breakpoints
- */
+/* Two cards side by side on small screens */
 @media (min-width: 576px) {
   .card {
     max-width: calc(50% - var(--pico-block-spacing-horizontal) / 2);
   }
 }
 
+/* Three cards side by side on large screens */
 @media (min-width: 1024px) {
   .card {
     max-width: calc(33% - var(--pico-block-spacing-horizontal) * 2 / 3);
   }
 }
 
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1170px;
-  }
-}
-
+/* Four cards side by side on xs-large screens */
 @media screen and (min-width: 1536px) {
   .card {
     max-width: calc(25% - var(--pico-block-spacing-horizontal) * 3 / 4);
@@ -132,12 +126,18 @@ a {
   }
 }
 
-/*
- * Light/Dark mode settings
- */
+/* Smaller container width on x-large screens */
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1170px;
+  }
+}
 
-/* Light color scheme (Default) */
-/* Can be forced with data-theme="light" */
+
+/*
+ * Light/Dark mode settings (adapted from Yohn's Pico fork)
+ */
+/* Light color scheme (default); can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
   #sun-moon:not(:checked)::before {
@@ -150,8 +150,10 @@ a {
 
 }
 
-/* Dark color scheme (Auto) */
-/* Automatically enabled if user has Dark mode enabled */
+/* Dark color scheme. Everything must be set twice:
+  - once for automatically enabled dark mode
+  - and once for when dark mode is forced via toggle 
+ */
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     #jumbotron-title {
@@ -160,13 +162,12 @@ a {
 
     #main-header h1,
     #site-footer p {
-      background: var(--bg-gradient-dark);
+      background: var(--pico-card-sectioning-background-color);
+      /* var(--bg-gradient-dark); */
     }
   }
 }
 
-/* Dark color scheme (Forced) */
-/* Enabled if forced with data-theme="dark" */
 [data-theme="dark"] {
   #jumbotron-title {
     border-bottom: thin solid white;
@@ -174,7 +175,8 @@ a {
 
   #main-header h1,
   #site-footer p {
-    background: var(--bg-gradient-dark);
+    background: var(--pico-card-sectioning-background-color);
+    /* var(--bg-gradient-dark); */
   }
 }
 
@@ -205,7 +207,6 @@ a {
 /* Navbar */
 #site-navbar {
   ul {
-    /*  box-shadow: var(--pico-card-box-shadow); */
     margin-left: 0;
     margin-right: 0;
 
@@ -221,14 +222,17 @@ a {
   }
 }
 
+/* make hamburger icon bigger */
 #hamburger-label {
   font-size: calc(var(--pico-font-size) * 2);
 }
 
+/* change background color of theme toggle from gray to amber when light theme is active */
 #sun-moon {
   background-color: var(--pico-primary);
 }
 
+/* move theme toggle switch to the right when inside dropdown menu */
 #sun-moon-label {
   margin-left: auto;
   margin-right: 0;
@@ -237,19 +241,20 @@ a {
 /* Main content */
 #main-header h1,
 #site-footer p {
-  background: var(--bg-gradient-light);
+  background: var(--pico-card-sectioning-background-color);
+  /* var(--bg-gradient-light); */
   box-shadow: var(--pico-card-box-shadow);
   padding: calc(var(--pico-block-spacing-horizontal) * 0.5) calc(var(--pico-block-spacing-vertical) * 0.5);
   text-align: center;
 }
 
+/* Nested flex settings for layout of cards and layout within each card */
 .cards {
   display: flex;
   flex-flow: row wrap;
   list-style-type: none;
   padding-left: inherit;
   justify-content: space-between;
-  /*   column-gap: var(--pico-block-spacing-horizontal); */
 }
 
 .card {
@@ -264,9 +269,11 @@ a {
 
 .article-header {
   flex: 0 0 3.5lh;
+  /* set card header to fixed height equivalent to two lines of text */
   margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
   margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
 
+  /* Use overflow on card heading if it's longer than two lines of text */
   h3 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -279,7 +286,6 @@ a {
 }
 
 .article-body {
-
   text-align: center;
 
   img {
@@ -287,7 +293,8 @@ a {
   }
 }
 
+/*
 .article-footer {
   margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
   margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
-}
+}*/