From ec151db8aa9718035b82648b881e46de1ac226cf Mon Sep 17 00:00:00 2001 From: dereklseitz Date: Fri, 15 Aug 2025 16:45:14 -0500 Subject: [PATCH] refactor: Add variables stylesheet and refactor existing stylesheets --- src/_includes/base.njk | 3 +- src/contact.njk | 39 ------------------- src/styles/base.css | 32 ++++++++++++++++ src/styles/contact.css | 5 --- src/styles/header-footer.css | 74 ++++++++++-------------------------- src/styles/index.css | 1 + src/styles/variables.css | 28 ++++++++++++++ 7 files changed, 83 insertions(+), 99 deletions(-) delete mode 100644 src/contact.njk create mode 100644 src/styles/base.css delete mode 100644 src/styles/contact.css create mode 100644 src/styles/variables.css diff --git a/src/_includes/base.njk b/src/_includes/base.njk index f89fe2f..c152137 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -7,8 +7,9 @@ {{title}} + + - diff --git a/src/contact.njk b/src/contact.njk deleted file mode 100644 index 9aafb8f..0000000 --- a/src/contact.njk +++ /dev/null @@ -1,39 +0,0 @@ ---- -layout: base.njk -title: Contact Derek -stylesheet: styles/contact.css -isLandingPage: false -pageScript: "/scripts/contact-form.js" ---- - -

Contact Me

-

A website is often the most powerful marketing tool a business has, so it's normal to have questions. I'm here to answer those questions so you can have peace of mind in enhancing your web presence..

- -
-
- Contact Me - - - - - - - - - - - -
- - - - - -
- - - - - -
-
\ No newline at end of file diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..70e93df --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,32 @@ +/* This file contains styles that apply to all pages */ + +/* Box Sizing Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Global Body Styles */ +body { + background: linear-gradient(to bottom, #9FB8CC 0%, #DAE4F0 30%, #ffffff 50%, #DAE4F0 70%, #9FB8CC 100%); + font-family: var(--font-family-body); + text-align: center; +} + +/* Global Heading Styles */ +h1, h2, h3 { + color: var(--text-color); + text-align: center; +} + +/* Global Module Styles (from modules.css) */ +.module { + margin: var(--margin-medium) auto; + padding: var(--padding-large); + max-width: 1200px; + box-shadow: var(--shadow-large); + background-color: var(--light-bg-color); + border-radius: 15px; + border: 1px solid #7B8899; +} \ No newline at end of file diff --git a/src/styles/contact.css b/src/styles/contact.css deleted file mode 100644 index 56e7e2e..0000000 --- a/src/styles/contact.css +++ /dev/null @@ -1,5 +0,0 @@ -/* contact.css */ - -h1 { - text-align: center; -} \ No newline at end of file diff --git a/src/styles/header-footer.css b/src/styles/header-footer.css index 7d89e89..147ccbb 100644 --- a/src/styles/header-footer.css +++ b/src/styles/header-footer.css @@ -1,23 +1,10 @@ /* Header and Footer Styles */ -/* Reset some default browser styles */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: Calibri, sans-serif; - text-align: center; -} - -/*? ↓  Start Header ↓ */ .main-header { background: linear-gradient(to right, #cff1ff 0%, #ffffff 10%, #ffffff 40%, #cff1ff 100%); color: #cff1ff; - padding: 10px ; - border-bottom: 1px solid #dee2e6; + padding: var(--padding-small); + border-bottom: var(--border-standard); } @@ -32,13 +19,13 @@ body { .nav-list { list-style: none; display: flex; - gap: 30px; + gap: var(--margin-large); align-items: center; } .nav-item a { background-color: transparent; - color: #495057; + color: var(--text-color); text-decoration: none; font-weight: 500; transition: all 0.3s ease; @@ -52,35 +39,16 @@ body { .nav-logo a { font-size: 1.8em; font-weight: 700; - color: #495057; + color: var(--text-color); text-decoration: none; transition: color 0.3s ease; } .nav-item a:hover { - color: #ffffff; - background-color: #ea7e0b; + color: var(--light-bg-color); + background-color: var(--secondary-color); transform: none; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.nav-item a:hover::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - border-radius: 10px; - transform: scaleX(0); - transform-origin: left; - transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); - z-index: -1; -} - -.nav-item a:hover::before { - transform: scaleX(1); + box-shadow: var(--shadow-small); } .nav-logo { @@ -88,19 +56,17 @@ body { } .nav-logo a:hover { - color: #ea7e0b; /* This will now be applied */ + color: var(--secondary-color); /* This will now be applied */ background-color: transparent; /* Override the background change */ box-shadow: none; /* Remove the shadow */ } - - /*? ↓  Start Footer ↓ */ footer { background: url("/images/footer-background.svg"); - border-top: 1px solid #dee2e6; - margin-top: 20px; - padding: 10px 20px; + border-top: var(--border-standard); + margin-top: var(--margin-medium); + padding: var(--padding-small) var(--padding-large); } .footer-content { @@ -119,23 +85,23 @@ footer ul { .footer-links { display: flex; justify-content: center; - gap: 30px; + gap: var(--margin-large); padding: 0; - margin: 20px 0; + margin: var(--margin-medium) 0; } .social-links { display: flex; justify-content: center; - gap: 30px; - margin-top: 10px; + gap: var(--margin-large); + margin-top: var(--margin-small); } .social-links a, .footer-links a { font-size: 1.1em; display: inline-block; - color: #495057; + color: var(--text-color); text-decoration: none; font-size: 1.1em; transition: color 0.3s ease; @@ -143,12 +109,12 @@ footer ul { .social-links a:hover, .footer-links a:hover { - color: #2e97be; + color: var(--primary-color); transform: scale(1.1) translateY(-2px); } .copyright { - margin: 20px 0 0; + margin: var(--margin-medium) 0 0; font-size: 0.9em; - color: #6c757d; + color: var(--dark-gray-color); } \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 0f71fab..27cbae5 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -3,6 +3,7 @@ body { background-image: url("/images/pattern-randomized.svg"); background-attachment: fixed; background-size: cover; +font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .intro.module { diff --git a/src/styles/variables.css b/src/styles/variables.css new file mode 100644 index 0000000..1ad81ab --- /dev/null +++ b/src/styles/variables.css @@ -0,0 +1,28 @@ +:root { + /* Color Palette */ + --primary-color: #2e97be; + --secondary-color: #ea7e0b; + --text-color: #495057; + --light-bg-color: #ffffff; + --light-gray-color: #f8f9fa; + --medium-gray-color: #dee2e6; + --dark-gray-color: #6c757d; + + /* Spacing and Sizing */ + --padding-small: 10px; + --padding-medium: 15px; + --padding-large: 20px; + --margin-small: 10px; + --margin-medium: 20px; + --margin-large: 30px; + + /* Borders and Shadows */ + --border-standard: 1px solid var(--medium-gray-color); + --shadow-small: 0 4px 6px rgba(0, 0, 0, 0.05); + --shadow-medium: 0 6px 12px rgba(0, 0, 0, 0.1); + --shadow-large: 0 4px 6px rgba(0, 0, 0, 0.3); + + /* Fonts */ + --font-family-body: Calibri, sans-serif; + --font-family-header: "Helvetica Neue", Helvetica, Arial, sans-serif; +} \ No newline at end of file