chrisbell/hexstudios-co
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testing dark/light mode

Browse Source
This commit is contained in:
chris bell
2026-08-13 12:21:37 -05:00
parent 1aad2224e2
commit d7d60dc0f6
5 changed files with 277 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@@ -3,16 +3,37 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hex Studios</title>
<script>
(function() {
var stored = localStorage.getItem('theme');
if (stored === 'light') document.documentElement.setAttribute('data-theme', 'light');
})();
function toggleTheme() {
var isLight = document.documentElement.getAttribute('data-theme') === 'light';
if (isLight) {
document.documentElement.removeAttribute('data-theme');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
</script>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<button id="theme-toggle" onclick="toggleTheme()">toggle theme</button>
<h1>// Hex Studios</h1>
<i>Developer, biker, musician, engineer, and an unapologetic centrist in the deep red south. The real @hexstudios.</i>
<div id="stick-posts-section">
<h2>Pinned posts</h2>
<ul>
<li><a href="posts/about.html">About Hex Studios</a></li>
<li><a href="posts/about.html">About</a></li>
</ul>
</div>

201
post.html
View File

@@ -1,179 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post</title>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/common.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/common.min.js"></script>
<style>
:root {
--ink: #26241f;
--ink-soft: #6b6a63;
--paper: #fbfaf7;
--rule: #e4e1d8;
--accent: #3a5a40;
--code-bg: #f1efe8;
}
<script>
(function() {
var stored = localStorage.getItem('theme');
if (stored === 'light') document.documentElement.setAttribute('data-theme', 'light');
})();
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
line-height: 1.7;
}
.wrap {
max-width: 680px;
margin: 0 auto;
padding: 4rem 1.5rem 6rem;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 0.85rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: none;
margin-bottom: 3rem;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease, color 0.15s ease;
}
.back-link:hover {
color: var(--accent);
border-color: var(--accent);
}
.meta {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 0.85rem;
color: var(--ink-soft);
margin: 0 0 0.5rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
#content h1:first-child {
font-size: 2.1rem;
line-height: 1.25;
margin: 0 0 0.75rem;
letter-spacing: -0.01em;
}
#content h1, #content h2, #content h3 {
font-family: Georgia, serif;
color: var(--ink);
margin-top: 2.2em;
margin-bottom: 0.6em;
}
#content h2 { font-size: 1.5rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.3em; }
#content h3 { font-size: 1.2rem; }
#content p { margin: 1.1em 0; }
#content a { color: var(--accent); text-decoration-color: rgba(58,90,64,0.35); }
#content a:hover { text-decoration-color: var(--accent); }
#content img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 1.5em 0;
}
#content blockquote {
margin: 1.5em 0;
padding: 0.2em 1.2em;
border-left: 3px solid var(--accent);
color: var(--ink-soft);
font-style: italic;
}
#content ul, #content ol {
padding-left: 1.4em;
}
#content li { margin: 0.4em 0; }
#content hr {
border: none;
border-top: 1px solid var(--rule);
margin: 2.5em 0;
}
#content code {
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.85em;
background: var(--code-bg);
padding: 0.15em 0.4em;
border-radius: 3px;
}
#content pre {
background: var(--code-bg);
padding: 1em 1.2em;
border-radius: 6px;
overflow-x: auto;
line-height: 1.5;
}
#content pre code {
background: none;
padding: 0;
font-size: 0.85em;
}
#content table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 0.9rem;
}
#content th, #content td {
text-align: left;
padding: 0.5em 0.8em;
border-bottom: 1px solid var(--rule);
}
#content th { color: var(--ink-soft); font-weight: 600; }
.state {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
color: var(--ink-soft);
font-size: 0.95rem;
}
.state.error { color: #a3413a; }
@media (prefers-reduced-motion: no-preference) {
.wrap { animation: rise 0.35s ease-out both; }
@keyframes rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
function toggleTheme() {
var isLight = document.documentElement.getAttribute('data-theme') === 'light';
if (isLight) {
document.documentElement.removeAttribute('data-theme');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
</style>
</head>
<body>
</script>
<div class="wrap">
<a class="back-link" href="index.html">&larr; All posts</a>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="wrap">
<button id="theme-toggle" onclick="toggleTheme()">toggle theme</button>
<a class="back-link" href="index.html">&larr; Return home</a>
<p class="meta" id="meta" hidden></p>
<div id="content"><p class="state">Loading post&hellip;</p></div>
</div>
</div>
<script>
<script>
function parseFrontMatter(raw) {
const match = raw.match(/^---\r?\n([\s\S]+?)\r?\n---\r?\n([\s\S]*)$/);
if (!match) return { meta: {}, body: raw };
@@ -273,7 +139,6 @@
}
document.addEventListener('DOMContentLoaded', loadPost);
</script>
</body>
</script>
</body>
</html>

52
posts/about.html
View File

@@ -1,52 +0,0 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hex Studios</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div id="page-header">
<h1>// Hex Studios</h1>
<i>Developer, biker, musician, engineer, and an unapologetic centrist in the deep red south. The real @hexstudios.</i>
</div>
<div id="post-body">
<a href="../index.html">&lt;-- Back to home</a>
<h1>// ABout Hex Studios</h1>
<h2>// What is this?</h2>
<p>Good question. It <i>was</i> my personal portfolio site, used for listing on applications to corporate slop jobs, but over time I just grew into wanting this place to be a space where I can be unapologetically <i><b>me</b></i>. You can still visit the old site <a href="old2/index.html">here</a> if you want. It's pretty cool.</p>
<p>So thats what this is. I'll still list my credentials and who I am, but I won't shy away from being me.</p>
<h2>// Well then, who are you?</h2>
<p>My name is Chris. I make stuff, sometimes. By day I'm a software engineer working with C# and unity. I love programming and old technology, I spend my time outside of work learning the ins-and-outs of computers and electronics in general, using C and C++ to mess with native applications and embedded firmware, hoping to one day reclaim the magic of technology from the souless corporate sphere it currently lives in.</p>
<p>Some of my hobbies include: Making and enjoying music, motorcycles, game development, light gaming (mostly indie games and older titles), homelabbing, poking at old technology</p>
<p>Oh yeah I also run a small company with my wife called Bellsworne. You should <a href="https://bellsworne.com">check us out.</a></p>
<h2>// My creds</h2>
<h3>Education:</h3>
<ul>
<li>B.S. Software Engineering</li>
<li>A.S. Computer Science</li>
<li>CompTIA Project Managment+ Certification</li>
</ul>
<h3>Professional:</h3>
<ul>
<li>5+ years of software engineering, primarily in C#/.NET</li>
<li>~2 years of electronics repair (phones, laptops, etc)</li>
</ul>
<i>I was also a barista for two years, who'uld've thunk it</i>
<h3>Personal:</h3>
<ul>
<li>13+ years of linux experience (I use NixOS, btw)</li>
<li>10+ years of C/C++</li>
<li>10+ years of HTML/CSS</li>
<li>Other languages, experience varies: Odin, Python, JS, Java</li>
</ul>
</div>
</body>
</html>

3
posts/about.md
View File

@@ -11,7 +11,7 @@ Good question. It *was* my personal portfolio site, used for listing on applicat
So thats what this is. I'll still list my credentials and who I am, but I won't shy away from being me.
## // Well than, who are you?
## // Well then, who are you?
My name is Chris. I make stuff, sometimes. By day I'm a software engineer working with C# and unity. I love programming and old technology, I spend my time outside of work learning the ins-and-outs of computers and electronics in general, using C and C++ to mess with native applications and embedded firmware, hoping to one day reclaim the magic of technology from the souless corporate sphere it currently lives in.
Some of my hobbies include: Making and enjoying music, motorcycles, game development, light gaming (mostly indie games and older titles), homelabbing, poking at old technology.
@@ -27,6 +27,7 @@ Oh yeah I also run a small company with my wife called Bellsworne. You should [c
### Professional:
- 5+ years of software engineering, primarily in C#/.NET
- ~2 years of electronics repair (phones, laptops, etc)
*I was also a barista for two years, who'uld've thunk it lol*
### Personal:

128
styles/main.css
View File

@@ -1,17 +1,143 @@
:root {
--background-color: #1a1a1a;
--foreground-color: #f5f5f5;
--foreground-color: #f0f0ea;
--soft-color: #8a8a82;
--accent-color: #a5453a;
--rule-color: #333330;
--code-bg: #242422;
}
[data-theme="light"] {
--background-color: #f2f0ea;
--foreground-color: #1a1a1a;
--soft-color: #6b6a63;
--accent-color: #8c2e24;
--rule-color: #d8d5cb;
--code-bg: #e8e5da;
}
* {
font-family: 'Times New Roman', Times, serif;
color: var(--foreground-color);
box-sizing: border-box;
}
body {
background-color: var(--background-color);
width: 80%;
max-width: 700px;
margin: auto;
padding-top: 4%;
padding-bottom: 6%;
font-size: 12pt;
line-height: 1.6;
}
a {
color: var(--accent-color);
}
a:hover {
text-decoration: none;
}
hr {
border: none;
border-top: 1px solid var(--rule-color);
margin: 2em 0;
}
/* theme toggle */
#theme-toggle {
background: none;
border: 1px solid var(--rule-color);
color: var(--soft-color);
font-size: 10pt;
padding: 0.2em 0.6em;
cursor: pointer;
}
#theme-toggle:hover {
color: var(--accent-color);
border-color: var(--accent-color);
}
/* post lists on the main page */
#posts-section ul,
#sticky-posts-section ul {
list-style: none;
padding: 0;
}
#posts-section li,
#sticky-posts-section li {
margin: 0.5em 0;
}
/* post.html */
.back-link {
display: inline-block;
font-size: 10pt;
color: var(--soft-color);
text-decoration: none;
margin-bottom: 2em;
}
.back-link:hover {
color: var(--accent-color);
}
.meta {
font-size: 10pt;
color: var(--soft-color);
margin: 0 0 1em;
}
#content h1:first-child {
font-size: 1.8em;
margin: 0 0 0.4em;
}
#content h1,
#content h2,
#content h3 {
margin-top: 1.6em;
margin-bottom: 0.5em;
}
#content h2 {
border-bottom: 1px solid var(--rule-color);
padding-bottom: 0.2em;
}
#content p {
margin: 1em 0;
}
#content blockquote {
margin: 1.2em 0;
padding-left: 1em;
border-left: 2px solid var(--accent-color);
color: var(--soft-color);
font-style: italic;
}
#content code {
font-family: Consolas, Menlo, monospace;
font-size: 0.9em;
background: var(--code-bg);
padding: 0.1em 0.35em;
}
#content pre {
background: var(--code-bg);
padding: 1em;
overflow-x: auto;
line-height: 1.5;
}
#content pre code {
background: none;
padding: 0;
}
.state {
color: var(--soft-color);
font-size: 10pt;
}
.state.error {
color: var(--accent-color);
}