From a2ddeaca71fdf26adfb6fed63600093a50dad838 Mon Sep 17 00:00:00 2001
From: vern wolfley <vern.wolfley@gmail.com>
Date: Fri, 22 Mar 2024 23:07:34 -0700
Subject: [PATCH] fix dark mode issues

---
 chamber/discover.html        |  6 +++-
 chamber/index.html           | 41 +++++++++++++++++++++++++--
 chamber/scripts/chamberJS.js |  2 +-
 chamber/styles/base.css      | 55 +++++++++++++++++++++++++++++-------
 4 files changed, 89 insertions(+), 15 deletions(-)

diff --git a/chamber/discover.html b/chamber/discover.html
index 6315a07..45f9c56 100644
--- a/chamber/discover.html
+++ b/chamber/discover.html
@@ -202,12 +202,16 @@ <h3>Luke Days</h3>
                                 <div>March 28, 2024 from 10 a.m. - 4 p.m. | Luke Air Force Base</div>
                                 <p>Experience the excitement of Luke Days, featuring thrilling aerial performances and static aircraft displays!</p>
                             </div>
-
                             <div class="event-card">
                                 <h3>Concert in the Park</h3>
                                 <div>March 29, 2024 from 6-9 p.m. | Surprise Community Park</div>
                                 <p>Enjoy live music from local bands at this year’s Concert in the Park!</p>
                             </div>
+                            <div class="event-card">
+                                <h3>White Tank Heritage Run</h3>
+                                <div>April 6, 2024 from 8-11 a.m. | White Tank Foothill Mountains</div>
+                                <p>Join us at the White Tank Foothill Mountains in beautiful Verrado for the a fun morning run.  Choose from three distances 1 mile fun run/walk, 5K Run/Walk or 10K Run.</p>
+                            </div>
                         </div>
                     </section>
                     <section class="style1">
diff --git a/chamber/index.html b/chamber/index.html
index 93ac0b8..c112d8b 100644
--- a/chamber/index.html
+++ b/chamber/index.html
@@ -53,7 +53,7 @@ <h1 id="nav-title">West Valley Chamber of Commerce</h1>
                     <input type="checkbox" id="nav-toggle" class="nav-toggle" />
                     <nav class="nav-links">
                         <ul>
-                            <li><a href="/index.html">Home</a></li>
+                            <li><a href="./index.html">Home</a></li>
                             <li><a href="./discover.html">Discover</a></li>
                             <li><a href="./directory.html">Directory</a></li>
                             <li><a href="./join.html">Join</a></li>
@@ -90,7 +90,42 @@ <h2>West Valley Chamber of Commerce</h2>
                 <button type="button" id="closeBanner" aria-label="Close">x</button>
             </div>
             <div class="info">
-                <section class="events">
+                <section class="style5">
+                    <h2>Up Coming Events</h2>
+                    <div class="event-card-container">
+                        <div class="event-card">
+                            <h3>Theater in the Park</h3>
+                            <div>March 9, 2024 from 4-7 p.m. | Goodyear Civic Square</div>
+                            <p>Join us for a live performance of The Wizard of Oz at this year’s Theater in the Park!</p>
+                        </div>
+                        <div class="event-card">
+                            <h3>Spring Training</h3>
+                            <div>March 15, 2024 from 12-4 p.m. | Goodyear Ballpark</div>
+                            <p>Come out and enjoy a day at the ballpark as the Cleveland Guardians take on the Cincinnati Reds!</p>
+                        </div>
+                        <div class="event-card">
+                            <h3>Food Truck Festival</h3>
+                            <div>March 22, 2024 from 5-9 p.m. | Litchfield Park</div>
+                            <p>Sample a variety of delicious food from local food trucks at this year’s Food Truck Festival!</p>
+                        </div>
+                        <div class="event-card">
+                            <h3>Luke Days</h3>
+                            <div>March 28, 2024 from 10 a.m. - 4 p.m. | Luke Air Force Base</div>
+                            <p>Experience the excitement of Luke Days, featuring thrilling aerial performances and static aircraft displays!</p>
+                        </div>
+                        <div class="event-card">
+                            <h3>Concert in the Park</h3>
+                            <div>March 29, 2024 from 6-9 p.m. | Surprise Community Park</div>
+                            <p>Enjoy live music from local bands at this year’s Concert in the Park!</p>
+                        </div>
+                        <div class="event-card">
+                            <h3>White Tank Heritage Run</h3>
+                            <div>April 6, 2024 from 8-11 a.m. | White Tank Foothill Mountains</div>
+                            <p>Join us at the White Tank Foothill Mountains in beautiful Verrado for the a fun morning run.  Choose from three distances 1 mile fun run/walk, 5K Run/Walk or 10K Run.</p>
+                        </div>
+                    </div>
+                </section>
+                <!-- <section class="events">
                     <h2>Upcoming Events</h2>
                     <div class="event">
                         <h3>Event One</h3>
@@ -116,7 +151,7 @@ <h3>Event Four</h3>
                         <p>Location: 5555 W Somewhere Blvd, City, State ZIP</p>
                         <p>Date: 01/01/2024</p>
                     </div>
-                </section>
+                </section> -->
                 <section class="weather">
                     <h2>Local Weather</h2>
                     <div class="weather-info">
diff --git a/chamber/scripts/chamberJS.js b/chamber/scripts/chamberJS.js
index e867f2e..1c6148a 100644
--- a/chamber/scripts/chamberJS.js
+++ b/chamber/scripts/chamberJS.js
@@ -39,7 +39,7 @@ function screenMode() {
     element.classList.toggle("dark-mode");
 
     const sections = document.querySelectorAll(
-        "main, div.info, div.spotlights, div.event, article.card, div.weather-info, div.form-wrapper, section.member div.form-wrapper"
+        "main, div.info, div.spotlights, div.event, div.event-card, section.style5, article.card, div.weather-info, div.form-wrapper, section.member, section.member a, div.form-wrapper, form label.top input, form label.sbs, form fieldset, form legend, form label.top"
     );
     sections.forEach((section) => {
         section.classList.toggle("dark-mode");
diff --git a/chamber/styles/base.css b/chamber/styles/base.css
index e1e6bf3..f5e836a 100644
--- a/chamber/styles/base.css
+++ b/chamber/styles/base.css
@@ -286,7 +286,7 @@ main {
 .card-header {
     margin: 0;
     border-radius: 0.5rem 0.5rem 0 0;
-    padding: .8rem;
+    padding: 0.8rem;
     font-size: large;
     font-weight: 700;
 }
@@ -307,14 +307,14 @@ main {
     font-size: 0.75rem;
 }
 .contact-info div {
-   display: flex;
-   flex-direction: column;
+    display: flex;
+    flex-direction: column;
     gap: 5px;
 }
 
 .card.dark-mode {
     box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.7);
-    background-color: #1e293b;
+    background-color: #4b5563;
 }
 
 .info {
@@ -324,7 +324,7 @@ main {
     padding: 30px 0 30px 0;
 }
 
-.events {
+/* .events {
     display: flex;
     flex-direction: column;
     row-gap: 20px;
@@ -338,11 +338,11 @@ main {
     border-color: #cbd5e1;
     background-color: #ffffff;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-}
-.event.dark-mode {
+} */
+/* .event.dark-mode {
     box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.7);
     background-color: #1e293b;
-}
+} */
 
 .weather {
     display: flex;
@@ -655,6 +655,10 @@ footer section {
     color: var(--text-color-main);
     padding: 20px;
 }
+.style5.dark-mode {
+    background-color: #4b5563;
+    color: var(--text-color-secondary);
+}
 .style6 {
     border-style: solid;
     border-width: 2px;
@@ -706,6 +710,10 @@ footer section {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     background-color: #ffffff;
 }
+.event-card.dark-mode {
+    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.7);
+    background-color: #1e293b;
+}
 .event-card h3 {
     margin: 0 0 5px 0;
 }
@@ -829,7 +837,7 @@ form fieldset {
     border-radius: 10px;
     padding: 0.5rem 2%;
 }
-form fieldset .dark-mode {
+form fieldset.dark-mode {
     border: 1px solid var(--text-color-secondary);
 }
 form fieldset:last-of-type {
@@ -840,6 +848,9 @@ form legend {
     margin: 0 1rem;
     padding: 0 0.5rem;
 }
+form legend.dark-mode {
+    color: var(--text-color-secondary);
+}
 form label.top,
 form div {
     display: block;
@@ -847,6 +858,9 @@ form div {
     color: var(--accent1-color);
     font-size: 0.8rem;
 }
+form label.top.dark-mode {
+    color: var(--text-color-secondary);
+}
 form label.top input,
 form label.top textarea,
 form label.top select {
@@ -861,11 +875,21 @@ form label.top select {
     width: 100%;
     max-width: 20rem;
 }
+form label.top input.dark-mode {
+    background-color: #4b5563;
+    color: var(--text-color-secondary);
+}
 form label.sbs {
     display: block;
     padding: 0.75rem 0;
     color: var(--text-color-main);
 }
+form label.sbs.dark-mode {
+    color: var(--text-color-secondary);
+}
+form fieldset .dark-mode {
+    border: none;
+}
 form .submitBtn {
     border: none;
     background-color: var(--accent3-color);
@@ -987,7 +1011,7 @@ button.homeBtn {
     height: 310px;
 }
 .member.dark-mode {
-    background-color: #1e293b;
+    background-color: #4b5563;
     color: var(--text-color-secondary);
     box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.7);
 }
@@ -1006,6 +1030,10 @@ button.homeBtn {
     font-size: 0.65rem;
     color: var(--primary-color);
 }
+.member a.dark-mode {
+    background-color: #4b5563;
+    color: var(--text-color-secondary);
+}
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -1065,6 +1093,13 @@ button.homeBtn {
 .list section:nth-child(even) {
     background-color: #e5e6e7;
 }
+.list section:nth-child(even).dark-mode {
+    color: var(--text-color-main);
+}
+.list section:nth-child(even) a.dark-mode {
+    background-color: #e5e6e7;
+    color: var(--text-color-main);
+}
 
 /* Weather Article ********************************* */