refactor: Move main website files to a subfolder
Moved the main HTML/CSS files into a dedicated subfolder and updated deployment configuration accordingly.
This commit is contained in:
Matthew Binning
parent
9aace43357
commit
a421d8e661
13 changed files with 12 additions and 10 deletions
27
main/404.html
Normal file
27
main/404.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - Page Not Found</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>404 - Page Not Found</h1>
|
||||
<p>The page you're looking for doesn't exist.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>What happened?</h2>
|
||||
<p>The page you requested could not be found. It may have been moved, deleted, or never existed.</p>
|
||||
<p><a href="/" style="color: #3498db; text-decoration: none; font-weight: bold;">← Go back to homepage</a></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
127
main/blog.html
Normal file
127
main/blog.html
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog - WWW</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>Blog</h1>
|
||||
<p>Stories, adventures, and reflections from life's journey</p>
|
||||
</section>
|
||||
|
||||
<!-- The Copper Chronicle Section -->
|
||||
<section class="content-section">
|
||||
<h2>The Copper Chronicle</h2>
|
||||
<p class="section-description">Adventures and travels with Copper, exploring the beautiful outdoors.</p>
|
||||
<div class="blog-grid">
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/copper-chronicle/big-sur.html">Big Sur Adventure</a></h3>
|
||||
<p class="blog-meta">April 2024</p>
|
||||
<p>Exploring the stunning coastline and trails of Big Sur with Copper.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/copper-chronicle/dove-hunting.html">Dove Hunting</a></h3>
|
||||
<p class="blog-meta">September 2024</p>
|
||||
<p>A day in the field with friends, shotguns, and good company.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/copper-chronicle/shasta-trip.html">Shasta & Dunsmuir</a></h3>
|
||||
<p class="blog-meta">September 2024</p>
|
||||
<p>Mountain adventures in Northern California.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Life & Reflections Section -->
|
||||
<section class="content-section">
|
||||
<h2>Life & Reflections</h2>
|
||||
<p class="section-description">Personal thoughts and journeys on health, faith, and life.</p>
|
||||
<div class="blog-grid">
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/health-journey.html">Health Journey</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Reflections on physical and mental wellness.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/faith-journey.html">Faith Journey</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Personal spiritual reflections and growth.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Events & Experiences Section -->
|
||||
<section class="content-section">
|
||||
<h2>Events & Experiences</h2>
|
||||
<p class="section-description">Special moments and memorable experiences.</p>
|
||||
<div class="blog-grid">
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/defcon.html">DefCon</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Notes and reflections from DefCon.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
<article class="blog-card private">
|
||||
<h3><a href="/blog/oktoberfest.html">Oktoberfest</a></h3>
|
||||
<p class="blog-meta">Private Article</p>
|
||||
<p>Celebrating traditions and community.</p>
|
||||
<span class="private-badge">🔒 Private</span>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/independence-day.html">Independence Day</a></h3>
|
||||
<p class="blog-meta">July 2024</p>
|
||||
<p>A celebration of freedom and fireworks.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recipes Section -->
|
||||
<section class="content-section">
|
||||
<h2>Recipes</h2>
|
||||
<p class="section-description">Family recipes and culinary experiments.</p>
|
||||
<div class="blog-grid">
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/public/recipe-book/st-patricks-day.html">St. Patrick's Day</a></h3>
|
||||
<p class="blog-meta">Holiday</p>
|
||||
<p>Traditional Irish recipes - corned beef, lamb stew, soda bread, and more.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/public/recipe-book/christmas.html">Christmas</a></h3>
|
||||
<p class="blog-meta">Holiday</p>
|
||||
<p>Holiday favorites including eggnog, gingerbread fruitcake, and meatloaf.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/public/recipe-book/earth-day.html">Earth Day</a></h3>
|
||||
<p class="blog-meta">Special Event</p>
|
||||
<p>Lamb stir fry and berry compote from April 2024.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/public/recipe-book/camping.html">Camping & Backpacking</a></h3>
|
||||
<p class="blog-meta">Outdoor</p>
|
||||
<p>Trail-ready recipes and energy bars for adventures.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/public/recipe-book/misc.html">Miscellaneous</a></h3>
|
||||
<p class="blog-meta">Various</p>
|
||||
<p>Drinks, snacks, sides, and external recipe links.</p>
|
||||
</article>
|
||||
<article class="blog-card">
|
||||
<h3><a href="/blog/public/recipe-book/">Full Recipe Book</a></h3>
|
||||
<p class="blog-meta">Index</p>
|
||||
<p>Browse all recipe collections in one place.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
BIN
main/cover.jpg
Normal file
BIN
main/cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
3
main/includes/footer.html
Normal file
3
main/includes/footer.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<footer class="footer">
|
||||
<p>© 2025 WWW - Built with simple HTML and CSS</p>
|
||||
</footer>
|
||||
11
main/includes/navbar.html
Normal file
11
main/includes/navbar.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="/" class="nav-brand">Home</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="/menu.html/">Menu</a></li>
|
||||
<li><a href="/blog/">Blog</a></li>
|
||||
<li><a href="https://forgejo.binning.net" target="_blank">Git</a></li>
|
||||
<li><a href="/resume.html">Resume</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
40
main/index.html
Normal file
40
main/index.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WWW - Personal Website</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>Welcome</h1>
|
||||
<p>Welcome to Matt's personal website, blog, and landing page for other self-hosted software.</p>
|
||||
<img src="cover.jpg" alt="cover photo">
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>About & Contact</h2>
|
||||
<div class="contact-info">
|
||||
<p><strong>Email:</strong> matthew@binning.net</p>
|
||||
<p>Hi, my name is Matt. I am a software engineer living in the West. My interests include software, defense, EW, drones, and data security and privacy.</p>
|
||||
<p>Other personal interests of mine include linguistics, philosophy, and theology, to name a few.</p>
|
||||
<p>This website serves as a space to share musings, stories, and chronicles, about all of those things.</p>
|
||||
<p>The Copper Chronicle contains stories and memories from various trips and experiences. More to come as this site develops.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Genealogy</h2>
|
||||
<div class="genealogy-blurb">
|
||||
<p>The title of this website you may recognize as a surname. I am also interested in family history and genealogy. If you have some relation or interest to this surname, please feel free to reach out. I am planning a genealogical project.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
121
main/menu.html
Normal file
121
main/menu.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Menu - WWW</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>Menu</h1>
|
||||
<p>A curated selection from our recipe collection.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>☕ Beverages</h2>
|
||||
|
||||
<h3><a href="blog/recipes/beverages.html#pour-over-black-coffee">Pour-Over Black Coffee</a></h3>
|
||||
<p>Freshly brewed artisan coffee using the pour-over method for a clean, flavorful cup.</p>
|
||||
<p><em>Coffee beans, hot water</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/beverages.html#london-fog">London Fog</a></h3>
|
||||
<p>A cozy Earl Grey tea latte sweetened with raw honey.</p>
|
||||
<p><em>Earl Grey tea, manuka honey, steamed milk</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/beverages.html#french-press-black-coffee">French Press Black Coffee</a></h3>
|
||||
<p>Rich, full-bodied coffee brewed with a French press.</p>
|
||||
<p><em>Coarse ground coffee, hot water</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/beverages.html#milkshake">Milkshake</a></h3>
|
||||
<p>Creamy, protein-packed shake with berries and natural sweetness.</p>
|
||||
<p><em>Heavy cream, milk, blackberries, Medjool dates, vanilla whey protein, vanilla extract, manuka honey, peanut butter</em></p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>🥖 Appetizers</h2>
|
||||
|
||||
<h3><a href="blog/recipes/appetizers.html#artichoke-spinach-dip-gf--df">Artichoke Spinach Dip</a></h3>
|
||||
<p>Creamy, dairy-free dip perfect with crackers or vegetables.</p>
|
||||
<p><em>Artichoke hearts, fresh spinach, cashew cream, nutritional yeast, garlic, lemon juice, salt, pepper</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/appetizers.html#bacon-wrapped-goat-cheese-stuffed-dates">Bacon Wrapped Dates</a></h3>
|
||||
<p>Sweet and savory bites with bacon-wrapped goat cheese stuffed dates.</p>
|
||||
<p><em>Medjool dates, goat cheese, bacon strips, optional honey, optional almonds</em></p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>🍞 Baked Goods</h2>
|
||||
|
||||
<h3><a href="blog/recipes/baked-goods.html#banana-chocolate-chip-bread">Banana Chocolate Chip Bread</a></h3>
|
||||
<p>Moist, sweet bread loaded with chocolate chips.</p>
|
||||
<p><em>Ripe bananas, flour, sugar or sweetener, eggs, butter or oil, chocolate chips, baking soda, vanilla extract, salt</em></p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>🍳 Breakfast</h2>
|
||||
|
||||
<h3><a href="blog/recipes/breakfast.html#egg-scramble-with-sweet-potato-black-bean--ground-beef">Egg Scramble</a></h3>
|
||||
<p>Hearty breakfast scramble with sweet potato, black beans, and ground beef in green enchilada sauce.</p>
|
||||
<p><em>Eggs, ground beef, sweet potato, black beans, green enchilada sauce, onions, cumin, chili powder</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/breakfast.html#protein-purple-potato-pancakes-proplto-cakes">Proplto Pancakes</a></h3>
|
||||
<p>Protein-packed purple potato pancakes with a unique color and flavor.</p>
|
||||
<p><em>Purple potatoes, eggs, protein powder, oat flour, baking powder, cinnamon, salt, milk</em></p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>🎄 Seasonal Favorites</h2>
|
||||
|
||||
<h3><a href="blog/recipes/christmas.html#eggnog">Eggnog</a></h3>
|
||||
<p>Rich, creamy holiday classic with raw cultured cream and peppermint.</p>
|
||||
<p><em>Raw cultured cream, raw eggs, vanilla extract, nutmeg, raw honey, peppermint tea, cacao nibs</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/christmas.html#gingerbread-fruitcake-muffins">Gingerbread Fruitcake Muffins</a></h3>
|
||||
<p>Spiced muffins packed with dried fruits and nuts.</p>
|
||||
<p><em>Pastry flour, baking soda, buttermilk, butter, allulose, eggs, molasses, dried fruits, chopped nuts, cinnamon, cloves, ginger, salt, vanilla extract</em></p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>🍨 Desserts</h2>
|
||||
|
||||
<h3><a href="blog/recipes/desserts.html#roasted-peaches-with-honey-mint--ice-cream">Roasted Peaches</a></h3>
|
||||
<p>Warm roasted peaches with honey, mint, and vanilla ice cream.</p>
|
||||
<p><em>Fresh peaches, honey, fresh mint leaves, vanilla ice cream, butter, optional cinnamon</em></p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>🍽️ Main Dishes</h2>
|
||||
|
||||
<h3><a href="blog/recipes/meals.html#pistachio-encrusted-liver-burgers">Pistachio Liver Burgers</a></h3>
|
||||
<p>Unique burgers with liver, lion's mane mushrooms, and pistachio crust.</p>
|
||||
<p><em>Beef liver, lion's mane mushrooms, ground beef, crushed pistachios, seasonings</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/meals.html#salmon-bowl">Salmon Bowl</a></h3>
|
||||
<p>Fresh salmon served over coconut rice with cabbage slaw and mango.</p>
|
||||
<p><em>Salmon fillet, coconut rice, cabbage slaw, fresh mango, sesame seeds</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/meals.html#steak--air-fried-broccoli">Steak & Air-Fried Broccoli</a></h3>
|
||||
<p>Simple, satisfying steak paired with crispy broccoli.</p>
|
||||
<p><em>Steak, fresh broccoli florets, olive oil, salt, pepper, garlic powder</em></p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>🥗 Sides</h2>
|
||||
|
||||
<h3><a href="blog/recipes/sides.html#roasted-vegetables">Roasted Vegetables</a></h3>
|
||||
<p>Colorful medley of seasonal vegetables roasted to perfection.</p>
|
||||
<p><em>Mixed vegetables (Brussels sprouts, carrots, bell peppers, zucchini), olive oil, salt, pepper, herbs (rosemary, thyme), garlic</em></p>
|
||||
|
||||
<h3><a href="blog/recipes/sides.html#cabbage-steaks">Cabbage Steaks</a></h3>
|
||||
<p>Thick-cut roasted cabbage with optional balsamic glaze.</p>
|
||||
<p><em>Cabbage, olive oil, salt, pepper, garlic powder, optional balsamic glaze</em></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
122
main/resume.html
Normal file
122
main/resume.html
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Resume - WWW</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!--#include virtual="/includes/navbar.html" -->
|
||||
|
||||
<main class="container">
|
||||
<section class="hero">
|
||||
<h1>Resume</h1>
|
||||
<p>Professional Experience & Skills</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Summary</h2>
|
||||
<p>Experienced software engineer with expertise in systems engineering, cloud infrastructure, and full-stack development. Passionate about building reliable, scalable solutions using modern technologies.</p>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Technical Skills</h2>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">
|
||||
<h3>Languages</h3>
|
||||
<ul>
|
||||
<li>Rust</li>
|
||||
<li>Python</li>
|
||||
<li>Go</li>
|
||||
<li>JavaScript/TypeScript</li>
|
||||
<li>HTML/CSS</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h3>Systems & Infrastructure</h3>
|
||||
<ul>
|
||||
<li>Linux/NixOS</li>
|
||||
<li>Docker</li>
|
||||
<li>Nginx</li>
|
||||
<li>Git</li>
|
||||
<li>CI/CD</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h3>Frameworks & Tools</h3>
|
||||
<ul>
|
||||
<li>Rocket (Rust)</li>
|
||||
<li>React</li>
|
||||
<li>Node.js</li>
|
||||
<li>PostgreSQL</li>
|
||||
<li>RESTful APIs</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Professional Experience</h2>
|
||||
|
||||
<div class="experience-item">
|
||||
<h3>Software Engineer</h3>
|
||||
<p class="job-meta">Example Company • 2020 - Present</p>
|
||||
<ul>
|
||||
<li>Designed and implemented scalable backend services using Rust and Python</li>
|
||||
<li>Managed infrastructure using NixOS and containerization technologies</li>
|
||||
<li>Built and maintained CI/CD pipelines for automated testing and deployment</li>
|
||||
<li>Collaborated with cross-functional teams to deliver high-quality software solutions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="experience-item">
|
||||
<h3>Systems Administrator</h3>
|
||||
<p class="job-meta">Previous Company • 2018 - 2020</p>
|
||||
<ul>
|
||||
<li>Maintained Linux-based server infrastructure and monitoring systems</li>
|
||||
<li>Automated routine tasks using shell scripting and Python</li>
|
||||
<li>Implemented security best practices and access control policies</li>
|
||||
<li>Provided technical support and documentation for development teams</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Education</h2>
|
||||
<div class="experience-item">
|
||||
<h3>Bachelor of Science in Computer Science</h3>
|
||||
<p class="job-meta">University Name • 2014 - 2018</p>
|
||||
<p>Focus on software engineering, algorithms, and systems programming.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Projects</h2>
|
||||
<div class="experience-item">
|
||||
<h3>Self-Hosted Infrastructure</h3>
|
||||
<p>Designed and deployed a complete self-hosted solution including:</p>
|
||||
<ul>
|
||||
<li>Git hosting with Forgejo</li>
|
||||
<li>Web server with Nginx and SSL/TLS</li>
|
||||
<li>Calendar and contacts sync with Radicale</li>
|
||||
<li>Declarative configuration management with NixOS</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="experience-item">
|
||||
<h3>Personal Website & Blog</h3>
|
||||
<p>Built a simple, reliable website using primitive technologies (HTML/CSS) focused on performance and maintainability.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<h2>Contact</h2>
|
||||
<p><strong>Email:</strong> example@example.com</p>
|
||||
<p><strong>GitHub:</strong> <a href="https://forgejo.binning.net" target="_blank">forgejo.binning.net</a></p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!--#include virtual="/includes/footer.html" -->
|
||||
</body>
|
||||
</html>
|
||||
340
main/style.css
Normal file
340
main/style.css
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
/* CSS Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', 'Courier', 'Monaco', 'Lucida Console', monospace;
|
||||
line-height: 1.7;
|
||||
color: #3e2723;
|
||||
background-color: #f4ecd8;
|
||||
}
|
||||
|
||||
/* Navbar Styles */
|
||||
.navbar {
|
||||
background-color: #5d4037;
|
||||
box-shadow: 0 2px 4px rgba(62, 39, 35, 0.3);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
border-bottom: 2px solid #4e342e;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
color: #f4ecd8;
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-brand:hover {
|
||||
color: #d7ccc8;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
color: #f4ecd8;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: #d7ccc8;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background-color: #efebe9;
|
||||
padding: 3rem 2rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(62, 39, 35, 0.2);
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
border: 1px solid #d7ccc8;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #4e342e;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: #6d4c41;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-top: 1.5rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(62, 39, 35, 0.3);
|
||||
border: 2px solid #d7ccc8;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
background-color: #efebe9;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(62, 39, 35, 0.2);
|
||||
border: 1px solid #d7ccc8;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
color: #4e342e;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 3px solid #8d6e63;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-info p,
|
||||
.genealogy-blurb p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.8;
|
||||
color: #5d4037;
|
||||
}
|
||||
|
||||
.contact-info strong {
|
||||
color: #4e342e;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: #5d4037;
|
||||
color: #f4ecd8;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
margin-top: 3rem;
|
||||
border-top: 2px solid #4e342e;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Blog Styles */
|
||||
.section-description {
|
||||
color: #6d4c41;
|
||||
font-style: italic;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
background-color: #faf8f3;
|
||||
border: 1px solid #d7ccc8;
|
||||
border-radius: 4px;
|
||||
padding: 1.5rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(62, 39, 35, 0.25);
|
||||
}
|
||||
|
||||
.blog-card h3 {
|
||||
color: #4e342e;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.blog-card h3 a {
|
||||
color: #4e342e;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.blog-card h3 a:hover {
|
||||
color: #6d4c41;
|
||||
}
|
||||
|
||||
.blog-meta {
|
||||
color: #8d6e63;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.blog-card p {
|
||||
color: #5d4037;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.blog-card.private {
|
||||
border-color: #a1887f;
|
||||
background-color: #f5f5f0;
|
||||
}
|
||||
|
||||
.private-badge {
|
||||
display: inline-block;
|
||||
background-color: #8d6e63;
|
||||
color: #f4ecd8;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Resume Styles */
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
color: #4e342e;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 2px solid #8d6e63;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-category ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.skill-category li {
|
||||
padding: 0.5rem 0;
|
||||
color: #5d4037;
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-category li:before {
|
||||
content: "▸";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #8d6e63;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.experience-item {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.experience-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.experience-item h3 {
|
||||
color: #4e342e;
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.job-meta {
|
||||
color: #8d6e63;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.experience-item ul {
|
||||
margin-top: 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.experience-item li {
|
||||
color: #5d4037;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.experience-item p {
|
||||
color: #5d4037;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Recipe Page Styles */
|
||||
.recipe-card {
|
||||
background-color: #faf8f3;
|
||||
border: 1px solid #d7ccc8;
|
||||
border-radius: 4px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.recipe-card h3 {
|
||||
color: #4e342e;
|
||||
border-bottom: 2px solid #8d6e63;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.recipe-year {
|
||||
color: #8d6e63;
|
||||
font-style: italic;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.nav-container {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue