From 732be668f7482d7744de67b7abec346b28c6914e Mon Sep 17 00:00:00 2001 From: dereklseitz Date: Sat, 6 Sep 2025 20:17:47 -0500 Subject: [PATCH] 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 --- src/_includes/base.njk | 2 + src/_includes/footer.njk | 49 ----- src/_includes/modals.njk | 49 +++++ src/about.njk | 4 +- src/community.njk | 4 +- src/credits.njk | 4 +- src/gallery.njk | 4 +- src/index.njk | 4 +- src/styles/about.css | 1 - src/styles/footer.css | 139 +++++++++++++ src/styles/{header-footer.css => header.css} | 199 +------------------ src/styles/modals.css | 38 ++++ 12 files changed, 250 insertions(+), 247 deletions(-) create mode 100644 src/_includes/modals.njk create mode 100644 src/styles/footer.css rename src/styles/{header-footer.css => header.css} (59%) create mode 100644 src/styles/modals.css diff --git a/src/_includes/base.njk b/src/_includes/base.njk index c2f70c7..0ab48fc 100644 --- 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 %} diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk index 93e4c57..32f89e1 100644 --- a/src/_includes/footer.njk +++ b/src/_includes/footer.njk @@ -56,52 +56,3 @@ - - - - - - - - - - - - - - diff --git a/src/_includes/modals.njk b/src/_includes/modals.njk new file mode 100644 index 0000000..2e5d658 --- /dev/null +++ b/src/_includes/modals.njk @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + diff --git a/src/about.njk b/src/about.njk index dbfb25d..9d6965f 100644 --- 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: diff --git a/src/community.njk b/src/community.njk index 6776943..7b6ec52 100644 --- 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: diff --git a/src/credits.njk b/src/credits.njk index a646ff4..d221f8d 100644 --- 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: diff --git a/src/gallery.njk b/src/gallery.njk index 9540958..2ea904a 100644 --- 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: diff --git a/src/index.njk b/src/index.njk index a9c9c39..40dc170 100644 --- 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: diff --git a/src/styles/about.css b/src/styles/about.css index c6ee993..f4b874b 100644 --- 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 ↑-↑-↑--| */ \ No newline at end of file diff --git a/src/styles/footer.css b/src/styles/footer.css new file mode 100644 index 0000000..e41574b --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/styles/header-footer.css b/src/styles/header.css similarity index 59% rename from src/styles/header-footer.css rename to src/styles/header.css index 9422f74..0c168a5 100644 --- a/src/styles/header-footer.css +++ b/src/styles/header.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; } \ No newline at end of file diff --git a/src/styles/modals.css b/src/styles/modals.css new file mode 100644 index 0000000..0998805 --- /dev/null +++ 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; +} \ No newline at end of file