zaine/org_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto-publish on Wed 6 Aug 15:20:44 BST 2025

Browse Source
This commit is contained in:
Zaine Arch
2025-08-06 15:20:44 +01:00
parent 20b25b3bff
commit fad62b981f
5 changed files with 132 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
output/about.html
View File

@@ -3,7 +3,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head> <head>
<!-- 2025-08-06 Wed 14:52 --> <!-- 2025-08-06 Wed 15:20 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>About Me</title> <title>About Me</title>
@@ -193,6 +193,7 @@
.org-svg { } .org-svg { }
</style> </style>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="theme-toggle.js" defer></script>
</head> </head>
<body> <body>
<div id="content" class="content"> <div id="content" class="content">
@@ -235,7 +236,7 @@ I'm building a personal site using <b>Emacs</b>, <b>Org-mode</b>, and <b>Cloudfl
</div> </div>
</div> </div>
<div id="postamble" class="status"> <div id="postamble" class="status">
<p class="date">Created: 2025-08-06 Wed 14:52</p> <p class="date">Created: 2025-08-06 Wed 15:20</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p> <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div> </div>
</body> </body>

5
output/index.html
View File

@@ -3,7 +3,7 @@
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head> <head>
<!-- 2025-08-06 Wed 14:52 --> <!-- 2025-08-06 Wed 15:20 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Welcome to My Org Website</title> <title>Welcome to My Org Website</title>
@@ -193,6 +193,7 @@
.org-svg { } .org-svg { }
</style> </style>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="theme-toggle.js" defer></script>
</head> </head>
<body> <body>
<div id="content" class="content"> <div id="content" class="content">
@@ -245,7 +246,7 @@ Feel free to reach out on GitHub: <a href="https://github.com/yourusername">http
</div> </div>
</div> </div>
<div id="postamble" class="status"> <div id="postamble" class="status">
<p class="date">Created: 2025-08-06 Wed 14:52</p> <p class="date">Created: 2025-08-06 Wed 15:20</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p> <p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div> </div>
</body> </body>

58
output/output/style.css Normal file
View File

@@ -0,0 +1,58 @@
:root {
--bg: #ffffff;
--fg: #000000;
--link: #1a0dab;
--heading: #004c99;
--code-bg: #f0f0f0;
}
body.dark {
--bg: #121212;
--fg: #e0e0e0;
--link: #8ab4f8;
--heading: #7baaf7;
--code-bg: #1e1e1e;
}
body {
font-family: sans-serif;
max-width: 700px;
margin: 2rem auto;
padding: 1rem;
line-height: 1.6;
background-color: var(--bg);
color: var(--fg);
transition: background-color 0.3s, color 0.3s;
}
h1, h2, h3 {
color: var(--heading);
}
a {
color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
pre, code {
background: var(--code-bg);
padding: 0.2em 0.4em;
border-radius: 4px;
font-family: monospace;
}
/* Toggle button */
#theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
padding: 0.4em 0.8em;
background: var(--code-bg);
border: none;
border-radius: 5px;
cursor: pointer;
}

39
output/style.css
View File

@@ -1,19 +1,36 @@
:root {
--bg: #ffffff;
--fg: #000000;
--link: #1a0dab;
--heading: #004c99;
--code-bg: #f0f0f0;
}
body.dark {
--bg: #121212;
--fg: #e0e0e0;
--link: #8ab4f8;
--heading: #7baaf7;
--code-bg: #1e1e1e;
}
body { body {
font-family: sans-serif; font-family: sans-serif;
max-width: 700px; max-width: 700px;
margin: 2rem auto; margin: 2rem auto;
padding: 1rem; padding: 1rem;
line-height: 1.6; line-height: 1.6;
background-color: #f9f9f9; background-color: var(--bg);
color: #333; color: var(--fg);
transition: background-color 0.3s, color 0.3s;
} }
h1, h2, h3 { h1, h2, h3 {
color: #004c99; color: var(--heading);
} }
a { a {
color: #0066cc; color: var(--link);
text-decoration: none; text-decoration: none;
} }
@@ -22,8 +39,20 @@ a:hover {
} }
pre, code { pre, code {
background: #eee; background: var(--code-bg);
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
border-radius: 4px; border-radius: 4px;
font-family: monospace; font-family: monospace;
} }
/* Toggle button */
#theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
padding: 0.4em 0.8em;
background: var(--code-bg);
border: none;
border-radius: 5px;
cursor: pointer;
}

34
output/theme-toggle.js Normal file
View File

@@ -0,0 +1,34 @@
function setTheme(mode) {
if (mode === 'dark') {
document.body.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
document.body.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}
function toggleTheme() {
const current = document.body.classList.contains('dark') ? 'dark' : 'light';
setTheme(current === 'dark' ? 'light' : 'dark');
}
window.addEventListener('DOMContentLoaded', () => {
const saved = localStorage.getItem('theme');
// Auto-detect system preference if no saved preference
if (!saved) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
setTheme('dark');
}
} else if (saved === 'dark') {
setTheme('dark');
}
// Add the toggle button
const button = document.createElement('button');
button.id = 'theme-toggle';
button.innerText = 'Toggle Theme';
button.onclick = toggleTheme;
document.body.appendChild(button);
});