/* ================================================================================ GitHubDHC for GitHub Pages A standalone CSS stylesheet extracted from the GitHubDHC Obsidian theme for use with GitHub Pages (Jekyll) or any static HTML site. Author: Scott Kirvan Based on: GitHub's Primer Design System - Dark High Contrast theme Version: 2.0.2 Usage: Add to your GitHub Pages _config.yml or HTML : ================================================================================ */ /* ───────────────────────────────────────────────────────────────────────── COLOR SYSTEM - GitHub Dark High Contrast ───────────────────────────────────────────────────────────────────────── */ :root { /* Background colors */ --color-bg-default: #010409; --color-bg-muted: #010409; --color-bg-emphasis: #7a828e; /* Text colors */ --color-text-primary: #f0f3f6; --color-text-secondary: #9ea7b3; --color-text-link: #71b7ff; --color-text-link-hover: #409eff; /* Border colors */ --color-border-default: #3d444d; --color-border-emphasis: #7a828e; /* Code colors */ --color-code-bg: #161b22; --color-inline-code-bg: rgba(110, 118, 129, 0.4); /* Table colors */ --color-table-row-alt: #151b23; /* Callout/Alert colors */ --color-note: #71b7ff; --color-tip: #26a148; --color-important: #b87fff; --color-warning: #e09b13; --color-caution: #e5534b; } /* ───────────────────────────────────────────────────────────────────────── BASE STYLES ───────────────────────────────────────────────────────────────────────── */ body { background-color: var(--color-bg-default); color: var(--color-text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; max-width: 85%; margin: 0 auto; padding: 54pt 54pt 54pt 54pt; /* 3/4 inch margins on all sides */ border: 1px solid var(--color-border-emphasis); border-radius: 6px; box-sizing: border-box; } /* ───────────────────────────────────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); font-weight: 600; line-height: 1.25; margin-top: 24px; margin-bottom: 16px; } h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border-emphasis); } h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border-emphasis); } h3 { font-size: 1.25em; } h4 { font-size: 1em; } h5 { font-size: 0.875em; } h6 { font-size: 0.85em; } p { margin-top: 0; margin-bottom: 16px; } /* ───────────────────────────────────────────────────────────────────────── LINKS ───────────────────────────────────────────────────────────────────────── */ a { color: var(--color-text-link); text-decoration: underline; } a:hover { color: var(--color-text-link-hover); } /* Links in headers - no underline */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; } /* ───────────────────────────────────────────────────────────────────────── CODE BLOCKS ───────────────────────────────────────────────────────────────────────── */ /* Inline code */ code { background-color: var(--color-inline-code-bg); padding: 0.2em 0.4em; border-radius: 6px; font-family: "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; font-size: 85%; } /* Code blocks */ pre { background-color: var(--color-code-bg); border-radius: 6px; padding: 1rem; margin: 16px 0; overflow-x: auto; } pre code { background-color: transparent; padding: 0; border-radius: 0; font-size: 100%; } /* ───────────────────────────────────────────────────────────────────────── LISTS ───────────────────────────────────────────────────────────────────────── */ ul, ol { margin-top: 0; margin-bottom: 16px; padding-left: 2em; } li { margin-top: 0.25em; margin-bottom: 0.25em; } /* ───────────────────────────────────────────────────────────────────────── TABLES ───────────────────────────────────────────────────────────────────────── */ table { border-collapse: collapse; width: 100%; margin: 16px 0; border-spacing: 0; } table thead tr { background-color: var(--color-bg-default); } table tbody tr { background-color: var(--color-bg-default); border-top: 1px solid var(--color-border-default); } table tbody tr:nth-child(2n) { background-color: var(--color-table-row-alt); } table th, table td { padding: 6px 13px; border: 1px solid var(--color-border-default); } table th { font-weight: 600; text-align: left; } /* ───────────────────────────────────────────────────────────────────────── BLOCKQUOTES ───────────────────────────────────────────────────────────────────────── */ blockquote { margin: 0 0 16px 0; padding: 0 1em; color: var(--color-text-secondary); border-left: 0.25em solid var(--color-bg-emphasis); } blockquote > :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } /* ───────────────────────────────────────────────────────────────────────── GITHUB ALERTS (Callouts) ───────────────────────────────────────────────────────────────────────── */ /* Note: GitHub Pages may render alerts differently depending on your setup. IMPORTANT: Standard Jekyll/GitHub Pages does NOT automatically convert [!NOTE] syntax to styled callouts. You need to either: 1. Use HTML with classes in your markdown:

Note

Your content here

2. Add a Jekyll plugin like jekyll-github-alerts to auto-convert the syntax 3. Use the data-callout attribute:

Your content here

*/ /* Base callout styling - GitHub style */ blockquote[data-callout], blockquote.alert, blockquote.alert-note, blockquote.alert-tip, blockquote.alert-important, blockquote.alert-warning, blockquote.alert-caution, blockquote.alert-info, blockquote.alert-success, blockquote.alert-danger, blockquote.alert-error { border: none; border-left: 4px solid #71b7ff; background-color: var(--color-bg-default); padding: 11px 16px; margin: 11px 0; border-radius: 0; } /* Callout titles - make them bold and colored */ blockquote[data-callout] > p:first-child strong:first-child, blockquote.alert > p:first-child strong:first-child, blockquote[data-callout] > p:first-child b:first-child, blockquote.alert > p:first-child b:first-child { color: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } /* Add icon support using SVG icons before callout titles */ blockquote[data-callout="note"] > p:first-child::before, blockquote[data-callout="info"] > p:first-child::before, blockquote.alert-note > p:first-child::before, blockquote.alert-info > p:first-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; vertical-align: text-bottom; } blockquote[data-callout="tip"] > p:first-child::before, blockquote[data-callout="success"] > p:first-child::before, blockquote.alert-tip > p:first-child::before, blockquote.alert-success > p:first-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; vertical-align: text-bottom; } blockquote[data-callout="important"] > p:first-child::before, blockquote.alert-important > p:first-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; vertical-align: text-bottom; } blockquote[data-callout="warning"] > p:first-child::before, blockquote.alert-warning > p:first-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; vertical-align: text-bottom; } blockquote[data-callout="caution"] > p:first-child::before, blockquote[data-callout="danger"] > p:first-child::before, blockquote[data-callout="error"] > p:first-child::before, blockquote.alert-caution > p:first-child::before, blockquote.alert-danger > p:first-child::before, blockquote.alert-error > p:first-child::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; vertical-align: text-bottom; } /* Alert type colors - BRIGHT GitHub colors */ blockquote[data-callout="note"], blockquote[data-callout="info"], blockquote.alert-note, blockquote.alert-info { border-left-color: #71b7ff; } blockquote[data-callout="note"] > p:first-child, blockquote[data-callout="info"] > p:first-child, blockquote.alert-note > p:first-child, blockquote.alert-info > p:first-child { color: #71b7ff; } blockquote[data-callout="tip"], blockquote[data-callout="success"], blockquote.alert-tip, blockquote.alert-success { border-left-color: #2bd853; } blockquote[data-callout="tip"] > p:first-child, blockquote[data-callout="success"] > p:first-child, blockquote.alert-tip > p:first-child, blockquote.alert-success > p:first-child { color: #2bd853; } blockquote[data-callout="important"], blockquote.alert-important { border-left-color: #d2a8ff; } blockquote[data-callout="important"] > p:first-child, blockquote.alert-important > p:first-child { color: #d2a8ff; } blockquote[data-callout="warning"], blockquote.alert-warning { border-left-color: #f0b72f; } blockquote[data-callout="warning"] > p:first-child, blockquote.alert-warning > p:first-child { color: #f0b72f; } blockquote[data-callout="caution"], blockquote[data-callout="danger"], blockquote[data-callout="error"], blockquote.alert-caution, blockquote.alert-danger, blockquote.alert-error { border-left-color: #ff9492; } blockquote[data-callout="caution"] > p:first-child, blockquote[data-callout="danger"] > p:first-child, blockquote[data-callout="error"] > p:first-child, blockquote.alert-caution > p:first-child, blockquote.alert-danger > p:first-child, blockquote.alert-error > p:first-child { color: #ff9492; } /* ───────────────────────────────────────────────────────────────────────── IMAGES ───────────────────────────────────────────────────────────────────────── */ img { max-width: 100%; height: auto; display: block; margin: 8px 0; } /* Inline images (like badges) */ p img, a img { display: inline-block; margin: 0 2px; vertical-align: middle; } /* ───────────────────────────────────────────────────────────────────────── HORIZONTAL RULES ───────────────────────────────────────────────────────────────────────── */ hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: var(--color-border-default); border: 0; } /* ───────────────────────────────────────────────────────────────────────── DETAILS/SUMMARY ───────────────────────────────────────────────────────────────────────── */ details { margin-top: 16px; margin-bottom: 16px; } summary { cursor: pointer; margin-bottom: 8px; font-weight: 600; } /* ───────────────────────────────────────────────────────────────────────── SYNTAX HIGHLIGHTING (Optional) ───────────────────────────────────────────────────────────────────────── */ /* If using syntax highlighting, add these classes. Adjust colors as needed for your syntax highlighter. */ .highlight .c { color: #7a828e; } /* Comment */ .highlight .k { color: #ff7b72; } /* Keyword */ .highlight .s { color: #a5d6ff; } /* String */ .highlight .n { color: #f0f3f6; } /* Name */ .highlight .o { color: #ff7b72; } /* Operator */ .highlight .p { color: #f0f3f6; } /* Punctuation */ .highlight .m { color: #79c0ff; } /* Number */ /* ───────────────────────────────────────────────────────────────────────── RESPONSIVE DESIGN ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { body { max-width: 100%; padding: 20px; font-size: 14px; } h1 { font-size: 1.75em; } h2 { font-size: 1.4em; } pre { padding: 0.5rem; } } @media (max-width: 480px) { body { padding: 10px; } table { display: block; overflow-x: auto; } } /* ───────────────────────────────────────────────────────────────────────── PRINT STYLES ───────────────────────────────────────────────────────────────────────── */ @media print { body { background-color: white; color: black; max-width: 100%; } a { color: black; text-decoration: underline; } pre, code { background-color: #f6f8fa; color: black; } }