dereklseitz
/
dlseitz.dev-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Add variables stylesheet and refactor existing stylesheets

This commit is contained in:
Derek L. Seitz 2025-08-15 16:45:14 -05:00
parent 3a9e0c89a6
commit ec151db8aa
7 changed files with 83 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/_includes/base.njk
View File

@ -7,8 +7,9 @@
<title>{{title}}</title> <title>{{title}}</title>
<link rel="stylesheet" href="/styles/variables.css">
<link rel="stylesheet" href="/styles/base.css">
<link rel="stylesheet" href="/styles/header-footer.css"> <link rel="stylesheet" href="/styles/header-footer.css">
<link rel="stylesheet" href="/styles/modules.css">
<link rel="stylesheet" href="{{ stylesheet }}"> <link rel="stylesheet" href="{{ stylesheet }}">
</head> </head>
<body> <body>

39
src/contact.njk
View File

@ -1,39 +0,0 @@
---
layout: base.njk
title: Contact Derek
stylesheet: styles/contact.css
isLandingPage: false
pageScript: "/scripts/contact-form.js"
---
<h1>Contact Me</h1>
<p>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..</p>
<form id="contact-form">
<fieldset>
<legend>Contact Me</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your Name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="you@example.com" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="(123) 456-7890">
<label>Preferred Contact Method:</label>
<div>
<input type="radio" id="contact-email" name="contact-method" value="email" checked>
<label for="contact-email">Email</label>
<input type="radio" id="contact-phone" name="contact-method" value="phone">
<label for="contact-phone">Phone</label>
</div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</fieldset>
</form>

32
src/styles/base.css Normal file
View File

@ -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;
}

5
src/styles/contact.css
View File

@ -1,5 +0,0 @@
/* contact.css */
h1 {
text-align: center;
}

74
src/styles/header-footer.css
View File

@ -1,23 +1,10 @@
/* Header and Footer Styles */ /* 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 { .main-header {
background: linear-gradient(to right, #cff1ff 0%, #ffffff 10%, #ffffff 40%, #cff1ff 100%); background: linear-gradient(to right, #cff1ff 0%, #ffffff 10%, #ffffff 40%, #cff1ff 100%);
color: #cff1ff; color: #cff1ff;
padding: 10px ; padding: var(--padding-small);
border-bottom: 1px solid #dee2e6; border-bottom: var(--border-standard);
} }
@ -32,13 +19,13 @@ body {
.nav-list { .nav-list {
list-style: none; list-style: none;
display: flex; display: flex;
gap: 30px; gap: var(--margin-large);
align-items: center; align-items: center;
} }
.nav-item a { .nav-item a {
background-color: transparent; background-color: transparent;
color: #495057; color: var(--text-color);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -52,35 +39,16 @@ body {
.nav-logo a { .nav-logo a {
font-size: 1.8em; font-size: 1.8em;
font-weight: 700; font-weight: 700;
color: #495057; color: var(--text-color);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.nav-item a:hover { .nav-item a:hover {
color: #ffffff; color: var(--light-bg-color);
background-color: #ea7e0b; background-color: var(--secondary-color);
transform: none; transform: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow-small);
}
.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);
} }
.nav-logo { .nav-logo {
@ -88,19 +56,17 @@ body {
} }
.nav-logo a:hover { .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 */ background-color: transparent; /* Override the background change */
box-shadow: none; /* Remove the shadow */ box-shadow: none; /* Remove the shadow */
} }
/*? ↓  Start Footer ↓ */ /*? ↓  Start Footer ↓ */
footer { footer {
background: url("/images/footer-background.svg"); background: url("/images/footer-background.svg");
border-top: 1px solid #dee2e6; border-top: var(--border-standard);
margin-top: 20px; margin-top: var(--margin-medium);
padding: 10px 20px; padding: var(--padding-small) var(--padding-large);
} }
.footer-content { .footer-content {
@ -119,23 +85,23 @@ footer ul {
.footer-links { .footer-links {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 30px; gap: var(--margin-large);
padding: 0; padding: 0;
margin: 20px 0; margin: var(--margin-medium) 0;
} }
.social-links { .social-links {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 30px; gap: var(--margin-large);
margin-top: 10px; margin-top: var(--margin-small);
} }
.social-links a, .social-links a,
.footer-links a { .footer-links a {
font-size: 1.1em; font-size: 1.1em;
display: inline-block; display: inline-block;
color: #495057; color: var(--text-color);
text-decoration: none; text-decoration: none;
font-size: 1.1em; font-size: 1.1em;
transition: color 0.3s ease; transition: color 0.3s ease;
@ -143,12 +109,12 @@ footer ul {
.social-links a:hover, .social-links a:hover,
.footer-links a:hover { .footer-links a:hover {
color: #2e97be; color: var(--primary-color);
transform: scale(1.1) translateY(-2px); transform: scale(1.1) translateY(-2px);
} }
.copyright { .copyright {
margin: 20px 0 0; margin: var(--margin-medium) 0 0;
font-size: 0.9em; font-size: 0.9em;
color: #6c757d; color: var(--dark-gray-color);
} }

1
src/styles/index.css
View File

@ -3,6 +3,7 @@ body {
background-image: url("/images/pattern-randomized.svg"); background-image: url("/images/pattern-randomized.svg");
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.intro.module { .intro.module {

28
src/styles/variables.css Normal file
View File

@ -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;
}