Skip to content

Commit

Permalink
fix dark mode issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@vwolfley
vwolfley committed Mar 23, 2024
1 parent 3e98c93 commit a2ddeac
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 15 deletions.
6 changes: 5 additions & 1 deletion chamber/discover.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
41 changes: 38 additions & 3 deletions chamber/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion chamber/scripts/chamberJS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
55 changes: 45 additions & 10 deletions chamber/styles/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 {
Expand All @@ -324,7 +324,7 @@ main {
padding: 30px 0 30px 0;
}

.events {
/* .events {
display: flex;
flex-direction: column;
row-gap: 20px;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -840,13 +848,19 @@ 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;
padding-top: 1rem;
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 {
Expand All @@ -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);
Expand Down Expand Up @@ -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);
}
Expand All @@ -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));
Expand Down Expand Up @@ -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 ********************************* */

Expand Down

0 comments on commit a2ddeac

Please sign in to comment.