Last active
January 24, 2026 04:03
-
-
Save masawada/1fb74991b29305a984aad862c1412468 to your computer and use it in GitHub Desktop.
theme for https://github.com/masawada/mdp
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"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>{.Title}</title> | |
| <!-- Highlight.js for syntax highlighting (Solarized Light theme) --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/solarized-light.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script> | |
| <!-- Mermaid for diagrams --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.12.0/mermaid.min.js"></script> | |
| <style> | |
| /* Solarized Light Color Palette */ | |
| :root { | |
| --base03: #002b36; | |
| --base02: #073642; | |
| --base01: #586e75; | |
| --base00: #657b83; | |
| --base0: #839496; | |
| --base1: #93a1a1; | |
| --base2: #eee8d5; | |
| --base3: #fdf6e3; | |
| --yellow: #b58900; | |
| --orange: #cb4b16; | |
| --red: #dc322f; | |
| --magenta: #d33682; | |
| --violet: #6c71c4; | |
| --blue: #268bd2; | |
| --cyan: #2aa198; | |
| --green: #859900; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| background-color: var(--base3); | |
| color: var(--base00); | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| } | |
| /* Table of Contents */ | |
| #toc { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 280px; | |
| height: 100vh; | |
| background-color: var(--base2); | |
| border-right: 1px solid var(--base1); | |
| padding: 20px; | |
| overflow-y: auto; | |
| } | |
| #toc h2 { | |
| font-size: 1rem; | |
| color: var(--base01); | |
| margin-top: 0; | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid var(--base1); | |
| } | |
| #toc ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #toc li { | |
| margin: 5px 0; | |
| } | |
| #toc a { | |
| color: var(--base01); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| display: block; | |
| padding: 3px 0; | |
| transition: color 0.2s; | |
| } | |
| #toc a:hover { | |
| color: var(--blue); | |
| } | |
| #toc .toc-h2 { padding-left: 0; } | |
| #toc .toc-h3 { padding-left: 15px; } | |
| #toc .toc-h4 { padding-left: 30px; } | |
| #toc .toc-h5 { padding-left: 45px; } | |
| #toc .toc-h6 { padding-left: 60px; } | |
| /* Main Content */ | |
| #content { | |
| margin-left: 280px; | |
| padding: 40px 60px; | |
| flex: 1; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: var(--base01); | |
| margin-top: 1.5em; | |
| margin-bottom: 0.5em; | |
| } | |
| h1 { font-size: 2rem; border-bottom: 2px solid var(--base1); padding-bottom: 0.3em; } | |
| h2 { font-size: 1.5rem; border-bottom: 1px solid var(--base1); padding-bottom: 0.3em; } | |
| h3 { font-size: 1.25rem; } | |
| h4 { font-size: 1rem; } | |
| h5 { font-size: 0.875rem; } | |
| h6 { font-size: 0.85rem; color: var(--base00); } | |
| a { | |
| color: var(--blue); | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| code { | |
| font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace; | |
| background-color: var(--base2); | |
| padding: 0.2em 0.4em; | |
| border-radius: 3px; | |
| font-size: 0.9em; | |
| } | |
| pre { | |
| background-color: var(--base2); | |
| border: 1px solid var(--base1); | |
| border-radius: 5px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| } | |
| pre code { | |
| background: none; | |
| padding: 0; | |
| } | |
| blockquote { | |
| border-left: 4px solid var(--cyan); | |
| margin: 1em 0; | |
| padding: 0.5em 1em; | |
| background-color: var(--base2); | |
| color: var(--base01); | |
| } | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| margin: 1em 0; | |
| } | |
| th, td { | |
| border: 1px solid var(--base1); | |
| padding: 8px 12px; | |
| text-align: left; | |
| } | |
| th { | |
| background-color: var(--base2); | |
| color: var(--base01); | |
| } | |
| tr:nth-child(even) { | |
| background-color: var(--base2); | |
| } | |
| hr { | |
| border: none; | |
| border-top: 1px solid var(--base1); | |
| margin: 2em 0; | |
| } | |
| ul, ol { | |
| padding-left: 1.5em; | |
| } | |
| li { | |
| margin: 0.3em 0; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| /* Mermaid diagrams */ | |
| .mermaid { | |
| background-color: var(--base3); | |
| text-align: center; | |
| margin: 1em 0; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 900px) { | |
| #toc { | |
| position: static; | |
| width: 100%; | |
| height: auto; | |
| border-right: none; | |
| border-bottom: 1px solid var(--base1); | |
| } | |
| body { | |
| flex-direction: column; | |
| } | |
| #content { | |
| margin-left: 0; | |
| padding: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav id="toc"> | |
| <h2>Table of Contents</h2> | |
| <ul id="toc-list"></ul> | |
| </nav> | |
| <main id="content"> | |
| {{.Content}} | |
| </main> | |
| <script> | |
| // Initialize Mermaid | |
| mermaid.initialize({ | |
| startOnLoad: false, | |
| theme: 'default', | |
| themeVariables: { | |
| background: '#fdf6e3', | |
| primaryColor: '#eee8d5', | |
| primaryTextColor: '#657b83', | |
| primaryBorderColor: '#93a1a1', | |
| lineColor: '#657b83', | |
| secondaryColor: '#eee8d5', | |
| tertiaryColor: '#fdf6e3' | |
| } | |
| }); | |
| // Render Mermaid diagrams from code blocks with language-mermaid class | |
| mermaid.run({ | |
| querySelector: '.language-mermaid', | |
| }); | |
| // Initialize Highlight.js | |
| hljs.highlightAll(); | |
| // Generate Table of Contents | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const content = document.getElementById('content'); | |
| const tocList = document.getElementById('toc-list'); | |
| const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6'); | |
| headings.forEach(function(heading, index) { | |
| // Add ID to heading if it doesn't have one | |
| if (!heading.id) { | |
| heading.id = 'heading-' + index; | |
| } | |
| // Create TOC item | |
| const li = document.createElement('li'); | |
| const a = document.createElement('a'); | |
| a.href = '#' + heading.id; | |
| a.textContent = heading.textContent; | |
| a.className = 'toc-' + heading.tagName.toLowerCase(); | |
| li.appendChild(a); | |
| tocList.appendChild(li); | |
| }); | |
| // Hide TOC if no headings | |
| if (headings.length === 0) { | |
| document.getElementById('toc').style.display = 'none'; | |
| document.getElementById('content').style.marginLeft = '0'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment