Last active
October 1, 2025 20:38
-
-
Save jonmagic/68ab935ce0f32b84791045c4d3cf48a9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- SCROLL TO BOTTOM FOR INSTRUCTIONS --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| /* jonmagic.com-inspired theme with warm, readable aesthetics */ | |
| :root { | |
| /* Light theme */ | |
| --bg: #fffef9; | |
| --text: #2d2d2d; | |
| --muted: #666666; | |
| --subtle-bg: #f8f6f0; | |
| --subtle-border: #e6e2da; | |
| --card-bg: #fefefe; | |
| --card-border: #e8e4dc; | |
| --accent: #2563eb; | |
| --accent-text: #ffffff; | |
| --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.15); | |
| /* Typography */ | |
| --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; | |
| --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; | |
| /* Spacing and layout */ | |
| --spacing: 1.5rem; | |
| --border-radius-small: 4px; | |
| --border-radius-medium: 8px; | |
| --border-radius-large: 12px; | |
| --max-width: 768px; | |
| --max-width-large: 1024px; | |
| } | |
| /* Dark theme */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0d1117; | |
| --text: #e6edf3; | |
| --muted: #7d8590; | |
| --subtle-bg: #161b22; | |
| --subtle-border: #30363d; | |
| --card-bg: #0d1117; | |
| --card-border: #21262d; | |
| --accent: #58a6ff; | |
| --accent-text: #0d1117; | |
| --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.3); | |
| --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.4); | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-stack); | |
| font-size: 16px; | |
| line-height: 1.6; | |
| color: var(--text); | |
| background-color: var(--bg); | |
| margin: 0; | |
| padding: 0; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .container { | |
| max-width: var(--max-width-large); | |
| margin: 0 auto; | |
| padding: var(--spacing); | |
| } | |
| /* Headers */ | |
| h1, h2, h3, h4, h5, h6 { | |
| margin-top: 2rem; | |
| margin-bottom: 1rem; | |
| font-weight: 600; | |
| line-height: 1.25; | |
| color: var(--text); | |
| } | |
| h1 { | |
| font-size: 2.25rem; | |
| margin-top: 0; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid var(--subtle-border); | |
| font-family: var(--font-mono); | |
| } | |
| h2 { | |
| font-size: 1.75rem; | |
| padding-bottom: 0.3em; | |
| border-bottom: 1px solid var(--subtle-border); | |
| margin-top: 2.5rem; | |
| } | |
| h3 { | |
| font-size: 1.375rem; | |
| margin-top: 2rem; | |
| } | |
| /* Paragraphs */ | |
| p { | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| color: var(--text); | |
| } | |
| /* Links */ | |
| a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| transition: color 0.15s ease; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| color: var(--accent); | |
| } | |
| /* Strong text */ | |
| strong, b { | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| /* Emphasis */ | |
| em, i { | |
| font-style: italic; | |
| } | |
| /* Code */ | |
| code { | |
| padding: 0.2em 0.4em; | |
| margin: 0; | |
| font-size: 0.9rem; | |
| background-color: var(--subtle-bg); | |
| border: 1px solid var(--subtle-border); | |
| border-radius: var(--border-radius-small); | |
| font-family: var(--font-mono); | |
| color: var(--text); | |
| } | |
| /* Horizontal rules */ | |
| hr { | |
| height: 1px; | |
| padding: 0; | |
| margin: 2rem 0; | |
| background-color: var(--subtle-border); | |
| border: 0; | |
| } | |
| /* Lists */ | |
| ul, ol { | |
| padding-left: 2em; | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| } | |
| li { | |
| margin: 0.5em 0; | |
| color: var(--text); | |
| } | |
| /* Blockquotes */ | |
| blockquote { | |
| padding: 0 1em; | |
| color: var(--muted); | |
| border-left: 0.25em solid var(--subtle-border); | |
| margin: 0 0 1rem 0; | |
| font-style: italic; | |
| } | |
| /* Figures and images */ | |
| figure { | |
| margin: 2rem 0; | |
| text-align: center; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: var(--border-radius-medium); | |
| box-shadow: var(--shadow-medium); | |
| } | |
| figcaption { | |
| font-size: 0.875rem; | |
| color: var(--muted); | |
| margin-top: 0.5rem; | |
| font-style: italic; | |
| font-family: var(--font-mono); | |
| } | |
| /* Citations */ | |
| .citation { | |
| color: var(--muted); | |
| font-family: var(--font-mono); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 16px; | |
| } | |
| h1 { | |
| font-size: 1.75em; | |
| } | |
| h2 { | |
| font-size: 1.375em; | |
| } | |
| } | |
| </style> | |
| <title>UPDATE TITLE</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- pandoc /path/to/post.md | pbcopy --> | |
| <!-- paste into here --> | |
| <!-- convert images to base64 and use them like this: --> | |
| <!-- base64 -i /path/to/image.webp | pbcopy --> | |
| <!-- paste over UklGRo4... in: <img src="data:image/webp;base64,UklGRo4..." alt="" /> --> | |
| <!-- Don't forget to update the title in the header! --> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment