Merge pull request #77 from johnmhoran/73-update-dark-mode

Fine-tune the dark mode #73

Author: johnmhoran

website/src/components/HomepageContent/styles.module.css

@@ -48,8 +48,6 @@
     padding-top: 1rem;
     margin-top: 0;
     border-radius: 10px;
-    /* 2025-11-05 Wednesday 14:48:46.   */
-    /* box-shadow: 0 0 6px #0000001a; */
     border: solid 1px #e0e0e0;
     background-color: #f8f8f8;
 }
@@ -145,73 +143,41 @@
     height: 64px;
 }
 
-/* 2025-11-05 Wednesday 09:36:17.  For the intro. */
 .introContainer {
-    /* max-width: 1200px;
-  width: 100%;
-  text-align: center;
-  display: flex;
-  padding: 2rem;
-
-  margin: 2rem auto;
-  background-color: #e8e8e8; */
-
     display: grid;
-    /* grid-template-columns: 1fr 1fr; */
-    /* gap: 2rem; */
     max-width: 1200px;
-    margin: 3rem auto;
-    margin: 2rem auto;
-    margin: .5rem auto;
     margin: 1rem auto .5rem auto;
-    /* padding: 0 2rem; */
     padding-top: 1rem;
-    /* margin-top: 0; */
     border-radius: 10px;
-
     background-color: #00ccff;
 }
 
 /* 2025-11-22 Saturday 10:12:48.  In place of using .introContainer for text-only blocks, use a div like this. */
 .sectionIntro {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 1rem 0;
-  padding: 0.5rem 0;
   padding: 0;
-
-  /* background-color: #ffffcc; */
   line-height: 1.4rem;
 }
 
 .sectionHeader {
     display: flex;
-    /* justify-content: center; */
-
-    /* background-color: #ffcccc; */
     padding: 0px 0px 0px 0px;
-    /* padding: 1rem 2rem; */
 }
 
 .sectionHeader h1 {
     margin-bottom: 0px;
     color: #000000;
 }
+[data-theme="dark"] .sectionHeader h1 {
+    color: #e5e5e5;
+}
 
 .sectionHeader h2 {
     margin-bottom: 0px;
-    color: #336699;
     color: #992600;
 }
 
-/* 2025-11-22 Saturday 12:29:30.   */
-/* .container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 1rem 1.5rem;
-} */
-
-/* styles.module.css */
 .sectionContainer {
   max-width: 1200px;
   margin: 0 auto;

website/src/components/HomepageHeader/styles.module.css

@@ -1,16 +1,17 @@
 /* Hero full-width */
 .fullHero {
     width: 100%;
-    color: white;
     text-align: center;
     padding: 2rem 2rem 2rem 2rem;
     background-size: cover;
     background-blend-mode: overlay;
-    /* background-image: linear-gradient(135deg, #666666 0%, #999999 100%),
-        url("/img/cube-background.jpg"); */
-        background-color: #e8e8e8;
+    background-color: #e8e8e8;
     color: #000000;
 }
+html[data-theme="dark"] .fullHero {
+  background-color: #252525;
+  color: white;
+}
 
 .heroInner {
     max-width: 900px;
@@ -23,8 +24,6 @@
 }
 
 .heroSubtitle {
-    font-size: 1.25rem;
     font-size: 2rem;
-    margin-bottom: 2rem;
     margin-bottom: 0.5rem;
 }