Refactor: Modularized footer.njk and header-footer.css

- Split header-footer.css into: - header.css - footer.css - modals.css - Split footer.njk into: - footer.njk - modals.njk - Updated front matter of: - index.njk - about.njk - credits.njk - gallery.njk - community.njk
2025-09-06 20:17:47 -05:00
parent f30c846e9e
commit 732be668f7
12 changed files with 250 additions and 247 deletions
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@@ -38,6 +38,8 @@

        {% include "footer.njk" %}

+        {% include "modals.njk" %}
+
        {% if pageScripts %}
            {% for script in pageScripts %}
                <script src="{{ script }}"></script>
--- a/src/_includes/footer.njk
+++ b/src/_includes/footer.njk
@@ -56,52 +56,3 @@
    
    <div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
 </footer>
-<!-- Custom Newsletter Modal -->
-<div id="custom-alert" class="modal hidden">
-    <div class="modal-content">
-        <span class="close-modal" id="alert-close-btn">&times;</span>
-        <p id="alert-message"></p>
-        <button id="alert-ok-button">OK</button>
-    </div>
-</div>  
-
-<!-- Modal for Shopping Cart -->
-<div id="cart-modal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <span class="close-modal">&times;</span>
-        <h2>Your Shopping Cart</h2>
-        <ul id="cart-items"></ul> <!-- Dynamically populated -->
-        <p id="cart-total"></p> <!-- Sub-total will appear here -->
-        <div class="modal-buttons">
-        <button id="clear-cart-modal-btn">Clear Cart</button>
-        <button id="process-order-modal-btn">Process Order</button>
-        </div>
-    </div>
-</div>
-
-<!-- Modal for Item Added -->
-<div id="item-added-modal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <span class="close-modal" id="item-added-close">&times;</span>
-        <p id="item-added-message"></p> <!-- Dynamically set message -->
-    </div>
-</div>
-
-<!-- Confirmation Modal -->
-<div id="confirmation-modal" class="modal" style="display: none;">
-    <div class="modal-content">
-        <span class="close-modal" id="confirmation-close-btn">&times;</span>
-        <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
-        <button id="confirmation-confirm-btn">Confirm</button>
-        <button id="confirmation-close-btn">Close</button>
-    </div>
-</div>
-
-<!-- Final Confirmation Modal -->
-<div id="final-confirmation-modal" class="modal" style="display: none;">
-<div class="modal-content">
-    <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
-    <p id="final-confirmation-message"></p> <!-- Message after successful action -->
-    <button id="final-confirmation-close-btn">Close</button>
-</div>
-</div>
--- a/src/_includes/modals.njk
+++ b/src/_includes/modals.njk
@@ -0,0 +1,49 @@
+<!-- Custom Newsletter Modal -->
+<div id="custom-alert" class="modal hidden">
+    <div class="modal-content">
+        <span class="close-modal" id="alert-close-btn">&times;</span>
+        <p id="alert-message"></p>
+        <button id="alert-ok-button">OK</button>
+    </div>
+</div>  
+
+<!-- Modal for Shopping Cart -->
+<div id="cart-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close-modal">&times;</span>
+        <h2>Your Shopping Cart</h2>
+        <ul id="cart-items"></ul> <!-- Dynamically populated -->
+        <p id="cart-total"></p> <!-- Sub-total will appear here -->
+        <div class="modal-buttons">
+        <button id="clear-cart-modal-btn">Clear Cart</button>
+        <button id="process-order-modal-btn">Process Order</button>
+        </div>
+    </div>
+</div>
+
+<!-- Modal for Item Added -->
+<div id="item-added-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close-modal" id="item-added-close">&times;</span>
+        <p id="item-added-message"></p> <!-- Dynamically set message -->
+    </div>
+</div>
+
+<!-- Confirmation Modal -->
+<div id="confirmation-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close-modal" id="confirmation-close-btn">&times;</span>
+        <p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
+        <button id="confirmation-confirm-btn">Confirm</button>
+        <button id="confirmation-close-btn">Close</button>
+    </div>
+</div>
+
+<!-- Final Confirmation Modal -->
+<div id="final-confirmation-modal" class="modal" style="display: none;">
+<div class="modal-content">
+    <span class="close-modal" id="final-confirmation-close-btn">&times;</span>
+    <p id="final-confirmation-message"></p> <!-- Message after successful action -->
+    <button id="final-confirmation-close-btn">Close</button>
+</div>
+</div>
--- a/src/about.njk
+++ b/src/about.njk
@@ -6,8 +6,10 @@ title: "About - Bloom Valley Nursery Demo"
 stylesheet: 
    - "/styles/variables.css"
    - "/styles/base.css"
-    - "/styles/header-footer.css"
+    - "/styles/header.css"
    - "/styles/about.css"
+    - "/styles/footer.css"
+    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "about"
 pageScripts:
--- a/src/community.njk
+++ b/src/community.njk
@@ -6,8 +6,10 @@ title: "Community Events - Bloom Valley Nursery Demo"
 stylesheet: 
    - "/styles/variables.css"
    - "/styles/base.css"
-    - "/styles/header-footer.css"
+    - "/styles/header.css"
    - "/styles/community.css"
+    - "/styles/footer.css"
+    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "community"
 pageScripts:
--- a/src/credits.njk
+++ b/src/credits.njk
@@ -6,8 +6,10 @@ title: "Credits & Attribution - Bloom Valley Nursery Demo"
 stylesheet: 
    - "/styles/variables.css"
    - "/styles/base.css"
-    - "/styles/header-footer.css"
+    - "/styles/header.css"
    - "/styles/credits.css"
+    - "/styles/footer.css"
+    - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 isLandingPage: false
 pageScripts:
--- a/src/gallery.njk
+++ b/src/gallery.njk
@@ -6,8 +6,10 @@ title: "Gallery - Bloom Valley Nursery Demo"
 stylesheet: 
  - "/styles/variables.css"
  - "/styles/base.css"
-  - "/styles/header-footer.css"
+  - "/styles/header.css"
  - "/styles/gallery.css"
+  - "/styles/footer.css"
+  - "/styles/modals.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "gallery"
 pageScripts:
--- a/src/index.njk
+++ b/src/index.njk
@@ -6,8 +6,10 @@ title: "Landing - Bloom Valley Nursery Demo"
 stylesheet: 
    - "/styles/variables.css"
    - "/styles/base.css"
-    - "/styles/header-footer.css"
+    - "/styles/header.css"
    - "/styles/index.css"
+    - "/styles/footer.css"
+    - "/styles/modal.css"
 fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
 currentPage: "index"
 pageScripts:
--- a/src/styles/about.css
+++ b/src/styles/about.css
@@ -210,4 +210,3 @@
  background-color: var(--color-destin-sand);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 
 }
-/* | ↑-↑-↑ End About.html ↑-↑-↑--| */
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -0,0 +1,139 @@
+nav ul, #footer-nav ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#footer-nav ul {
+    position: relative;
+    list-style-type: none;
+    flex-direction: row;
+    margin-top: 20px;
+    background-color: var(--color-destin-sand);
+    border-radius: 5px;
+    width: fit-content; 
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+nav ul li, #footer-nav ul li {
+    margin: 0 20px;
+    border-radius: 5px;
+}
+
+nav ul li a, #footer-nav ul li a {
+    font-family: 'Arial', sans-serif;
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--color-dark-green); 
+    text-decoration: underline;
+    padding: 8px 15px;
+    border-radius: 10px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+nav ul li a:hover, #footer-nav ul li a:hover {
+    background-color: var(--color-destin-sand);
+    color: var(--color-dark-green);
+    border: solid .5px var(--color-dark-green);
+    padding: 7px 14px;
+    box-shadow: var(--shadow-medium);
+}
+
+/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
+#footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#newsletter-container {
+    display: inline-block;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+#email-input {
+    display: inline-block;
+    width: 55%;
+    padding: 5px 10px;
+    text-align: center;
+    border-radius: 10px;
+    box-shadow: var(--shadow-subtle);
+}
+
+button#submit-btn {
+    display: inline-block;
+    padding: 5px 10px;
+    border-radius: 10px;
+    cursor: pointer;
+    box-shadow: var(--shadow-subtle);
+    z-index: 5;
+}
+
+footer div label {
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: var(--color-dark-green);
+}
+
+#newsletter-form {
+    display: inline-block;
+    background-color: var(--color-soft-golden);
+    border: solid var(--color-destin-sand);
+    border-radius: 10px;
+    width: 60%;
+    padding: 5px;
+    text-align: center;
+    box-shadow: var(--shadow-medium);
+}
+
+#social-media {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}
+
+#social-media h3 {
+    text-align: center;
+}
+
+#social-media ul {
+    position: relative;
+    display: inline-block;
+    list-style-type: none;
+    text-align: center;
+}
+
+#social-media ul li {
+    display: inline-block;
+    margin: 0 10px;
+    padding: 0 10px;
+    color: var(--color-dark-green);
+}
+
+#social-media ul li a {
+    font-family: 'Arial', sans-serif;
+    font-size: 1rem;
+    color: var(--color-dark-green);
+    text-decoration: none;
+    padding: 8px 15px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#social-media ul li a:hover {
+    background-color: var(--color-soft-golden);
+    color: var(--color-destin-sand);
+    box-shadow: var(--shadow-strong);
+}
+
+#copyright {
+    text-align: center;
+    margin-bottom: 20px;
+}
--- a/src/styles/header-footer.css
+++ b/src/styles/header-footer.css
@@ -200,12 +200,12 @@ header p.tagline {
  }
 }

-nav, #footer-nav {
+nav {
  margin-top: 20px;
-  background-color: var(--color-destin-sand); /* White for navigation background */
+  background-color: var(--color-destin-sand);
  padding: 10px 20px;
  border-radius: 5px;
-  width: 100%; /* Ensures the nav spans the width of the header */
+  width: 100%;
  box-shadow: var(--shadow-subtle);
 }

@@ -234,7 +234,7 @@ nav, #footer-nav {
  box-shadow: var(--shadow-medium);
 }

-nav ul, #footer-nav ul {
+nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
@@ -246,7 +246,7 @@ nav ul {
  gap: 40px;
 }

-nav ul li, #footer-nav ul li {
+nav ul li {
  margin: 0 20px;
  border-radius: 5px;
 }
@@ -267,7 +267,7 @@ nav ul li, #footer-nav ul li {
  font-size: 0.9em;
 }

-nav ul li a, #footer-nav ul li a {
+nav ul li a {
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: bold;
@@ -278,195 +278,10 @@ nav ul li a, #footer-nav ul li a {
  transition: background-color 0.3s ease, color 0.3s ease;
 }

-nav ul li a:hover, #footer-nav ul li a:hover {
+nav ul li a:hover {
  background-color: var(--color-destin-sand);
  color: var(--color-dark-green);
  border: solid .5px var(--color-dark-green);
  padding: 7px 14px;
  box-shadow: var(--shadow-medium);
-}
-
-/* |--↓-↓-↓ Start Footer ↓-↓-↓--| */
-#footer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-#newsletter-container {
-  display: inline-block;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-#email-input {
-  display: inline-block;
-  width: 55%;
-  padding: 5px 10px;
-  text-align: center;
-  border-radius: 10px;
-  box-shadow: var(--shadow-subtle);
-}
-
-button#submit-btn {
-  display: inline-block;
-  padding: 5px 10px;
-  border-radius: 10px;
-  cursor: pointer;
-  box-shadow: var(--shadow-subtle);
-  z-index: 5;
-}
-
-footer div label {
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: var(--color-dark-green);
-}
-
-#newsletter-form {
-  display: inline-block;
-  background-color: var(--color-soft-golden);
-  border: solid var(--color-destin-sand);
-  border-radius: 10px;
-  width: 60%;
-  padding: 5px;
-  text-align: center;
-  box-shadow: var(--shadow-medium);
-}
-
-/* #footer-nav {
-  background-color: transparent;
-}
-
-#footer-nav ul {
-  position: relative;
-  list-style-type: none;
-  flex-direction: row;
-  margin-top: 20px;
-  background-color: var(--color-destin-sand);
-  border-radius: 5px;
-  width: fit-content; 
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-#footer-nav ul li {
-  display: inline-block;
-  align-items: center;
-  padding: 5px 10px; 
-  margin: 0 20px;
-}
-
-#footer-nav ul li .current-page {
-  font-size: 1.2em;
-  font-weight: bold;
-  color: var(--color-dark-green);
-  background-color: var(--color-mid-green);
-  text-decoration: underline;
-}
-
-#footer-nav ul li a {
-  font-family: 'Arial', sans-serif;
-  font-size: 1rem;
-  font-weight: bold;
-  color: var(--color-dark-green); 
-  text-decoration: none;
-  padding: 8px 15px;
-  border-radius: 5px;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-#footer-nav ul li a:hover {
-  background-color: var(--color-destin-sand);
-  color: var(--color-dark-green);
-  border: solid var(--color-dark-green);
-  border-radius: 10px;
-} */
-
-#social-media {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-#social-media h3 {
-text-align: center;
-}
-
-#social-media ul {
-  position: relative;
-  display: inline-block;
-  list-style-type: none;
-  text-align: center;
-}
-
-#social-media ul li {
-  display: inline-block;
-  margin: 0 10px;
-  padding: 0 10px;
-  color: var(--color-dark-green);
-}
-
-#social-media ul li a {
-  font-family: 'Arial', sans-serif;
-  font-size: 1rem;
-  color: var(--color-dark-green); /* Dark green for the links */
-  text-decoration: none;
-  padding: 8px 15px;
-  border-radius: 5px;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-#social-media ul li a:hover {
-  background-color: var(--color-soft-golden);
-  color: var(--color-destin-sand);
-  box-shadow: var(--shadow-strong);
-}
-
-#copyright {
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-
-/* Styles for the modal */
-.modal {
-  display: none; /* Initially hidden */
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 10px;
-  width: 80%;
-  max-width: 600px;
-  text-align: center;
-}
-
-.modal-buttons button {
-  margin: 10px;
-}
-
-.close-modal {
-  position: absolute;
-  top: 10px;
-  right: 20px;
-  font-size: 1.5rem;
-  cursor: pointer;
-}
-
-.visible {
-  display: block;
 }
--- a/src/styles/modals.css
+++ b/src/styles/modals.css
@@ -0,0 +1,38 @@
+/* Styles for the modal */
+.modal {
+    display: none; /* Initially hidden */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    width: 80%;
+    max-width: 600px;
+    text-align: center;
+}
+
+.modal-buttons button {
+    margin: 10px;
+}
+
+.close-modal {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+.visible {
+    display: block;
+}