www/blog
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

feat: Move away from navbar into mdbook
All checks were successful
Build and Deploy / deploy (push) Successful in 5s
Details

Browse source
This commit is contained in:
Matthew Binning 2026-03-22 17:21:32 -07:00
parent acddc1b91c
commit 7d7ceb9072
15 changed files with 9 additions and 987 deletions
Download patch file Download diff file Expand all files Collapse all files

1
book.toml
View file

@ -12,7 +12,6 @@ smart-punctuation = true
git-repository-url = "https://forgejo.binning.net/matthew.binning/www"
edit-url-template = "https://forgejo.binning.net/matthew.binning/www/src/branch/main/{path}"
additional-css = ["theme/sepia.css"]
additional-js = ["theme/navbar.js"]
no-section-label = true
fold.enable = true
fold.level = 0

45
common.nginx.nix
View file

@ -1,45 +0,0 @@
{ config, pkgs, lib, ... }:
{
# Common configuration shared between staging and prod
# This file contains nginx settings that are identical across environments
# Import this in both staging.nginx.nix and prod.nginx.nix
services.nginx = {
# Recommended settings
recommendedGzipSettings = true;
recommendedOptimisation = true;
recommendedProxySettings = true;
};
# Common location configurations that can be reused
# These are defined as library functions
lib.nginxLocations = {
# Standard root location with SSI support
rootLocation = {
index = "index.html";
tryFiles = "$uri $uri/ =404";
extraConfig = ''
# Enable Server Side Includes for navbar/footer includes
ssi on;
'';
};
# Private blog articles location with HTTP basic authentication
privateLocation = {
extraConfig = ''
auth_basic "Private Articles";
auth_basic_user_file /srv/nginx/.htpasswd;
# Enable Server Side Includes
ssi on;
'';
};
# Common extraConfig for custom 404
custom404 = ''
error_page 404 /404.html;
'';
};
}

15
deploy.sh
View file

@ -15,6 +15,10 @@ fi
CMD=$1
case $CMD in
sync)
rsync -avz src/ /var/lib/www/
;;
build)
printf "Building blog with mdbook...\n"
[ -s src ] || ln -s /var/lib/www src
@ -30,8 +34,7 @@ case $CMD in
sudo mkdir -p ${STAGING_PATH}
printf "Deploying website files...\n"
sudo rsync -av --delete main/* ${STAGING_PATH}/
sudo rsync -av --delete blog ${STAGING_PATH}/
sudo rsync -av --delete blog/ ${STAGING_PATH}/
sudo chown -R nginx:nginx ${STAGING_PATH}/
@ -50,9 +53,9 @@ case $CMD in
fi
printf "Deploying website files...\n"
ssh ${REMOTE_USER}@${REMOTE_HOST} "mkdir -p /tmp/${REMOTE_PATH}"
rsync -avz --delete main/ blog ${REMOTE_USER}@${REMOTE_HOST}:/tmp/${REMOTE_PATH}/
ssh ${REMOTE_USER}@${REMOTE_HOST} "sudo rsync -avz --delete /tmp/${REMOTE_PATH}/ ${REMOTE_PATH}/ && \
ssh ${REMOTE_USER}@${REMOTE_HOST} "mkdir -p /tmp/blog-deploy"
rsync -avz --delete blog/ ${REMOTE_USER}@${REMOTE_HOST}:/tmp/blog-deploy/
ssh ${REMOTE_USER}@${REMOTE_HOST} "sudo rsync -avz --delete /tmp/blog-deploy/ ${REMOTE_PATH}/ && \
sudo chown -R nginx:nginx ${REMOTE_PATH}/ && \
printf 'Content deployed.\n'"
@ -65,7 +68,7 @@ case $CMD in
LOCAL_PATH="/srv/www/binning.net"
printf "Deploying website files...\n"
rsync -av --delete main/ blog ${LOCAL_PATH}/
rsync -av --delete blog/ ${LOCAL_PATH}/
printf "✓ Local deployment complete!\n Files deployed to: %s\n" "${LOCAL_PATH}"
;;

27
main/404.html
View file

@ -1,27 +0,0 @@
<!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
View file

@ -1,127 +0,0 @@
<!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
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 182 KiB

3
main/includes/footer.html
View file

@ -1,3 +0,0 @@
<footer class="footer">
<p>&copy; 2025 WWW - Built with simple HTML and CSS</p>
</footer>

11
main/includes/navbar.html
View file

@ -1,11 +0,0 @@
<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
View file

@ -1,40 +0,0 @@
<!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
View file

@ -1,121 +0,0 @@
<!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
View file

@ -1,122 +0,0 @@
<!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
View file

@ -1,340 +0,0 @@
/* 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;
}
}

64
staging.nginx.nix
View file

@ -1,64 +0,0 @@
{ config, pkgs, lib, ... }:
{
services.nginx = {
enable = true;
# Recommended settings
recommendedGzipSettings = true;
recommendedOptimisation = true;
recommendedProxySettings = true;
# Virtual hosts configuration for local staging
virtualHosts = {
# Main website - Static HTML/CSS
# Access via http://localhost or http://localhost:80
"localhost" = {
# No SSL for local development
listen = [
{ addr = "127.0.0.1"; port = 80; }
{ addr = "0.0.0.0"; port = 80; }
];
root = "/srv/www/stage.binning.net";
locations."/" = {
index = "index.html";
tryFiles = "$uri $uri/ =404";
extraConfig = ''
# Enable Server Side Includes for navbar/footer includes
ssi on;
'';
};
# Blog (mdbook generated) - Enable SSI
locations."/blog/" = {
extraConfig = ''
# Enable Server Side Includes
ssi on;
'';
};
# Private blog articles with HTTP basic authentication
locations."/blog/private/" = {
extraConfig = ''
auth_basic "Private Articles";
auth_basic_user_file /srv/nginx/.htpasswd;
# Enable Server Side Includes
ssi on;
'';
};
# Custom 404 page
extraConfig = ''
error_page 404 /404.html;
'';
};
};
};
# Firewall - allow local HTTP access
networking.firewall.allowedTCPPorts = [ 80 ];
}

9
theme/navbar.js
View file

@ -1,9 +0,0 @@
document.addEventListener('DOMContentLoaded', function () {
fetch('/includes/navbar.html')
.then(function (res) { return res.text(); })
.then(function (html) {
var wrapper = document.createElement('div');
wrapper.innerHTML = html.trim();
document.body.insertBefore(wrapper.firstChild, document.body.firstChild);
});
});

71
theme/sepia.css
View file

@ -1,75 +1,4 @@
/* Sepia theme override for mdbook */
/* This makes the mdbook-generated blog match the rest of the site */
/* Navbar overrides - ensure navbar looks identical to main site */
.navbar {
background-color: #5d4037 !important;
box-shadow: 0 2px 4px rgba(62, 39, 35, 0.3) !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 200 !important;
border-bottom: 2px solid #4e342e !important;
margin: 0 !important;
padding: 0 !important;
}
/* Push mdbook chrome below the fixed navbar */
.sidebar {
top: 3.5rem !important;
}
.page-wrapper {
padding-top: 3.5rem !important;
}
.nav-container {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 1rem 2rem !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.nav-brand {
color: #f4ecd8 !important;
text-decoration: none !important;
font-size: 1.5rem !important;
font-weight: bold !important;
}
.nav-brand:hover {
color: #d7ccc8 !important;
}
.nav-menu {
list-style: none !important;
display: flex !important;
gap: 2rem !important;
margin: 0 !important;
padding: 0 !important;
}
.nav-menu li {
margin: 0 !important;
padding: 0 !important;
line-height: 1.5 !important;
}
.nav-menu a {
color: #f4ecd8 !important;
text-decoration: none !important;
font-size: 1rem !important;
line-height: 1.5 !important;
transition: color 0.3s ease !important;
display: inline-block !important;
}
.nav-menu a:hover {
color: #d7ccc8 !important;
}
:root {
--bg: #f4ecd8;