my website, hosted on wisp.place
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: remove theme switcher and use catppuccin

it's annoying and hacky and broken so whatever

intergrav 5043e402 759db7cc

+210 -543
public/apple-touch-icon.png

This is a binary file and will not be displayed.

+185
public/dp-giscus.css
··· 1 + main { 2 + --font-family-sans: system-ui, sans-serif; 3 + --font-family-monospace: 4 + ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, 5 + "DejaVu Sans Mono", monospace; 6 + } 7 + 8 + a { 9 + text-decoration: none; 10 + } 11 + 12 + a:hover { 13 + text-decoration: underline; 14 + } 15 + 16 + /* a modified version of catppuccin's giscus theme for devins.page */ 17 + main { 18 + --color-prettylights-syntax-comment: #8c8fa1; 19 + --color-prettylights-syntax-constant: #1e66f5; 20 + --color-prettylights-syntax-entity: #1e66f5; 21 + --color-prettylights-syntax-storage-modifier-import: #fe640b; 22 + --color-prettylights-syntax-entity-tag: #179299; 23 + --color-prettylights-syntax-keyword: #ea76cb; 24 + --color-prettylights-syntax-string: #40a02b; 25 + --color-prettylights-syntax-variable: #fe640b; 26 + --color-prettylights-syntax-invalid-illegal-text: #d20f39; 27 + --color-prettylights-syntax-invalid-illegal-bg: rgb(210 15 57 / 15%); 28 + --color-prettylights-syntax-markup-heading: #179299; 29 + --color-prettylights-syntax-markup-italic: #df8e1d; 30 + --color-prettylights-syntax-markup-bold: #df8e1d; 31 + --color-prettylights-syntax-markup-deleted-text: #4c4f69; 32 + --color-prettylights-syntax-markup-deleted-bg: rgb(210 15 57 / 40%); 33 + --color-prettylights-syntax-markup-inserted-text: #4c4f69; 34 + --color-prettylights-syntax-markup-inserted-bg: rgb(64 160 43 / 40%); 35 + --color-prettylights-syntax-markup-changed-text: #4c4f69; 36 + --color-prettylights-syntax-markup-changed-bg: rgb(223 142 29 / 40%); 37 + --color-prettylights-syntax-markup-ignored-text: #4c4f69; 38 + --color-btn-text: #4c4f69; 39 + --color-btn-bg: #ccd0da; 40 + --color-btn-border: #bcc0cc; 41 + --color-btn-hover-bg: #bcc0cc; 42 + --color-btn-hover-border: #acb0be; 43 + --color-btn-active-bg: #acb0be; 44 + --color-btn-selected-bg: #acb0be; 45 + --color-btn-counter-bg: #acb0be; 46 + --color-btn-outline-text: #8839ef; 47 + --color-btn-shadow: 0 0 transparent; 48 + --color-btn-inset-shadow: 0 0 transparent; 49 + --color-btn-primary-text: #eff1f5; 50 + --color-btn-primary-bg: #40a02b; 51 + --color-btn-primary-border: transparent; 52 + --color-btn-primary-shadow: 0 0 transparent; 53 + --color-btn-primary-inset-shadow: 0 0 transparent; 54 + --color-btn-primary-hover-bg: #50c836; 55 + --color-btn-primary-hover-border: #50c836; 56 + --color-btn-primary-selected-bg: #50c836; 57 + --color-btn-primary-selected-shadow: 0 0 transparent; 58 + --color-btn-primary-disabled-text: #dce0e8; 59 + --color-btn-primary-disabled-bg: rgb(64 160 43 / 40%); 60 + --color-btn-primary-disabled-border: transparent; 61 + --color-action-list-item-default-hover-bg: #bcc0cc; 62 + --color-segmented-control-bg: #acb0be; 63 + --color-segmented-control-button-bg: #eff1f5; 64 + --color-segmented-control-button-selected-border: #9ca0b0; 65 + --color-fg-default: #4c4f69; 66 + --color-fg-muted: #5c5f77; 67 + --color-fg-subtle: #5c5f77; 68 + --color-canvas-default: #eff1f5; 69 + --color-canvas-overlay: #ccd0da; 70 + --color-canvas-inset: #dce0e8; 71 + --color-canvas-subtle: #e6e9ef; 72 + --color-border-default: #bcc0cc; 73 + --color-border-muted: #ccd0da; 74 + --color-neutral-muted: rgb(156 160 176 / 20%); 75 + --color-accent-fg: hsl(266deg 85% 55%); 76 + --color-accent-emphasis: #8839ef; 77 + --color-accent-muted: rgb(136 57 239 / 40%); 78 + --color-accent-subtle: rgb(136 57 239 / 15%); 79 + --color-success-fg: #40a02b; 80 + --color-attention-fg: #fe640b; 81 + --color-attention-muted: #8839ef; 82 + --color-attention-subtle: rgb(136 57 239 / 15%); 83 + --color-danger-fg: #d20f39; 84 + --color-danger-muted: rgb(210 15 57 / 40%); 85 + --color-danger-subtle: rgb(210 15 57 / 20%); 86 + --color-primer-shadow-inset: 0 0 transparent; 87 + --color-scale-gray-7: #bcc0cc; 88 + --color-scale-blue-8: #0a4ed6; 89 + --color-social-reaction-bg-hover: var(--color-scale-gray-7); 90 + --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8); 91 + } 92 + 93 + main .gsc-comment-box-textarea::placeholder { 94 + color: #6c6f85; 95 + } 96 + 97 + main .gsc-loading-image { 98 + background-image: none; 99 + } 100 + 101 + @media (prefers-color-scheme: dark) { 102 + main { 103 + --color-prettylights-syntax-comment: #7f849c; 104 + --color-prettylights-syntax-constant: #89b4fa; 105 + --color-prettylights-syntax-entity: #89b4fa; 106 + --color-prettylights-syntax-storage-modifier-import: #fab387; 107 + --color-prettylights-syntax-entity-tag: #94e2d5; 108 + --color-prettylights-syntax-keyword: #f5c2e7; 109 + --color-prettylights-syntax-string: #a6e3a1; 110 + --color-prettylights-syntax-variable: #fab387; 111 + --color-prettylights-syntax-invalid-illegal-text: #f38ba8; 112 + --color-prettylights-syntax-invalid-illegal-bg: rgb(243 139 168 / 15%); 113 + --color-prettylights-syntax-markup-heading: #94e2d5; 114 + --color-prettylights-syntax-markup-italic: #f9e2af; 115 + --color-prettylights-syntax-markup-bold: #f9e2af; 116 + --color-prettylights-syntax-markup-deleted-text: #cdd6f4; 117 + --color-prettylights-syntax-markup-deleted-bg: rgb(243 139 168 / 40%); 118 + --color-prettylights-syntax-markup-inserted-text: #cdd6f4; 119 + --color-prettylights-syntax-markup-inserted-bg: rgb(166 227 161 / 40%); 120 + --color-prettylights-syntax-markup-changed-text: #cdd6f4; 121 + --color-prettylights-syntax-markup-changed-bg: rgb(249 226 175 / 40%); 122 + --color-prettylights-syntax-markup-ignored-text: #cdd6f4; 123 + --color-btn-text: #cdd6f4; 124 + --color-btn-bg: #313244; 125 + --color-btn-border: #45475a; 126 + --color-btn-hover-bg: #45475a; 127 + --color-btn-hover-border: #585b70; 128 + --color-btn-active-bg: #585b70; 129 + --color-btn-selected-bg: #585b70; 130 + --color-btn-counter-bg: #585b70; 131 + --color-btn-outline-text: #cba6f7; 132 + --color-btn-shadow: 0 0 transparent; 133 + --color-btn-inset-shadow: 0 0 transparent; 134 + --color-btn-primary-text: #1e1e2e; 135 + --color-btn-primary-bg: #a6e3a1; 136 + --color-btn-primary-border: transparent; 137 + --color-btn-primary-shadow: 0 0 transparent; 138 + --color-btn-primary-inset-shadow: 0 0 transparent; 139 + --color-btn-primary-hover-bg: #cbefc8; 140 + --color-btn-primary-hover-border: #cbefc8; 141 + --color-btn-primary-selected-bg: #cbefc8; 142 + --color-btn-primary-selected-shadow: 0 0 transparent; 143 + --color-btn-primary-disabled-text: #11111b; 144 + --color-btn-primary-disabled-bg: rgb(166 227 161 / 40%); 145 + --color-btn-primary-disabled-border: transparent; 146 + --color-action-list-item-default-hover-bg: #45475a; 147 + --color-segmented-control-bg: #585b70; 148 + --color-segmented-control-button-bg: #1e1e2e; 149 + --color-segmented-control-button-selected-border: #6c7086; 150 + --color-fg-default: #cdd6f4; 151 + --color-fg-muted: #bac2de; 152 + --color-fg-subtle: #bac2de; 153 + --color-canvas-default: #1e1e2e; 154 + --color-canvas-overlay: #313244; 155 + --color-canvas-inset: #11111b; 156 + --color-canvas-subtle: #181825; 157 + --color-border-default: #45475a; 158 + --color-border-muted: #313244; 159 + --color-neutral-muted: rgb(108 112 134 / 40%); 160 + --color-accent-fg: #cba6f7; 161 + --color-accent-emphasis: #cba6f7; 162 + --color-accent-muted: rgb(203 166 247 / 40%); 163 + --color-accent-subtle: rgb(203 166 247 / 15%); 164 + --color-success-fg: #a6e3a1; 165 + --color-attention-fg: #fab387; 166 + --color-attention-muted: #cba6f7; 167 + --color-attention-subtle: rgb(203 166 247 / 15%); 168 + --color-danger-fg: #f38ba8; 169 + --color-danger-muted: rgb(243 139 168 / 40%); 170 + --color-danger-subtle: rgb(243 139 168 / 20%); 171 + --color-primer-shadow-inset: 0 0 transparent; 172 + --color-scale-gray-7: #45475a; 173 + --color-scale-blue-8: #5895f8; 174 + --color-social-reaction-bg-hover: var(--color-scale-gray-7); 175 + --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8); 176 + } 177 + 178 + main .gsc-comment-box-textarea::placeholder { 179 + color: #a6adc8; 180 + } 181 + 182 + main .gsc-loading-image { 183 + background-image: none; 184 + } 185 + }
public/favicon.png

This is a binary file and will not be displayed.

+1
public/favicon.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 211 211" width="32" height="32"><g clip-path="url(#a)"><path fill="#F58A0D" stroke="#000" stroke-width="6" d="M323.115 471.308c52.196-13.863 118.79-33.147 160.013-47.287-10.362-19.056-35.239-62.767-51.855-85.161-20.771-27.994-88.489-19.582-98.947-18.4s-22.978-3.471-44.502-10.52-31.878-82.489-33.611-102.773-14.572-95.064-19.729-109.652c-5.156-14.587-26.959-45.498-31.507-50.673-3.977-4.525-18.1-12.745-24.102-14.343-6.711-1.785 1.083-35.393-.464-39.77-1.547-4.376-1.918-36.191-.464-39.77 1.454-3.577 11.397-6.218 12.851-9.795 2.681-6.597-4.125-11.67-10.128-13.267-12.374-3.293-26.918.766-33.859 4.206-6.941 3.439-8.302 14.97.701 17.366s6.003 1.597 8.065 7.432c2.063 5.835-2.722 23.064-2.63 31.018s-4.084 34.595-3.053 37.512c1.032 2.918-29.403 1.427-49.803 5.25s-37.283 9.902-41.739 12.681-8.488-.937-5.672-16.046c2.253-12.088 1.819-43.568 1.32-57.797-.828.22-.703-.451 6.426-4.898 8.91-5.558 9.85-10.595 8.302-14.97-1.547-4.377-16.037-6.911-26.495-5.73-10.458 1.183-15.429 2.503-21.338 8.86S19.017-35.146 23.05-31.43c3.226 2.973 8.519 3.588 12.52 4.653-4.146 29.292-13.123 89.016-15.862 93.573-3.424 5.697-19.303 22.832-28.001 36.16-8.698 13.329-18.06 33.52-22.567 74.61-4.767 43.46 2.977 69.953 6.084 94.127-3.142 1.367-14.003 4.996-32.311 8.582-22.886 4.483-35.076-14.619-54.208-30.282s-37.045-12.501-42.016-11.18-22.37 5.941-15.574 32.859 42.388 42.996 77.887 51.12c28.399 6.5 64.637-1.743 79.207-6.676 2.499 14.761 9.578 51.71 17.903 81.413 10.406 37.13 67.191 74.706 113.241 89.602s151.566-1.959 203.762-15.823Z"/><path fill="#000" d="M169.69 94.297c-1.922.405-3.889.73-7.273 2.889-2.338 1.49-2.757 3.161-2.653 4.083-.012.643.083.377 2.385 1.025 2.352.822 7.989-.862 11.78-1.869s7.175-3.165 6.768-4.317c-.325-.92-3.477-2.015-5.012-2.447-1.399-.048-4.066.23-5.995.636"/><path stroke="#000" stroke-width="6" d="M159.847 101.646a1.7 1.7 0 0 1-.083-.377m0 0c-.104-.922.315-2.592 2.653-4.084 3.384-2.158 5.351-2.483 7.273-2.888 1.929-.407 4.596-.684 5.995-.636 1.535.432 4.687 1.526 5.012 2.447.407 1.152-2.977 3.31-6.768 4.317s-9.428 2.691-11.78 1.869c-2.302-.648-2.397-.382-2.385-1.025Z"/><path fill="#000" stroke="#000" stroke-width="6" d="M38.045 128.947c-4.441 1.18-6.468 2.316-7.815 5.378-.594.609.969 1.365 3.095 1.883 2.657.646 13.759-2.302 15.542-4.128s3.567-3.652.91-4.299c-2.658-.646-7.292-.013-11.732 1.166Z"/><path stroke="#000" stroke-width="6" d="M84.018 129.502c11.129-.062 8.58.615 16.693-.093 8.112-.708 10.661-1.385 17.838-4.738 5.742-2.682 11.651-6.47 13.887-8.028"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h211v211H0z"/></clipPath></defs></svg>
-105
public/sc-giscus.css
··· 1 - :root { 2 - --sc-prose-bd: rgba(0, 0, 0, 0.2); 3 - --sc-prose-bg: rgba(0, 0, 0, 0.1); 4 - } 5 - @supports (color: light-dark(white, black)) { 6 - :root { 7 - --sc-prose-bd: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)); 8 - --sc-prose-bg: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); 9 - } 10 - } 11 - 12 - main { 13 - --color-prettylights-syntax-comment: #6e7781; 14 - --color-prettylights-syntax-constant: #0550ae; 15 - --color-prettylights-syntax-entity: #8250df; 16 - --color-prettylights-syntax-storage-modifier-import: #24292f; 17 - --color-prettylights-syntax-entity-tag: #116329; 18 - --color-prettylights-syntax-keyword: #cf222e; 19 - --color-prettylights-syntax-string: #0a3069; 20 - --color-prettylights-syntax-variable: #953800; 21 - --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; 22 - --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; 23 - --color-prettylights-syntax-invalid-illegal-bg: #82071e; 24 - --color-prettylights-syntax-carriage-return-text: #f6f8fa; 25 - --color-prettylights-syntax-carriage-return-bg: #cf222e; 26 - --color-prettylights-syntax-string-regexp: #116329; 27 - --color-prettylights-syntax-markup-list: #3b2300; 28 - --color-prettylights-syntax-markup-heading: #0550ae; 29 - --color-prettylights-syntax-markup-italic: #24292f; 30 - --color-prettylights-syntax-markup-bold: #24292f; 31 - --color-prettylights-syntax-markup-deleted-text: #82071e; 32 - --color-prettylights-syntax-markup-deleted-bg: #ffebe9; 33 - --color-prettylights-syntax-markup-inserted-text: #116329; 34 - --color-prettylights-syntax-markup-inserted-bg: #dafbe1; 35 - --color-prettylights-syntax-markup-changed-text: #953800; 36 - --color-prettylights-syntax-markup-changed-bg: #ffd8b5; 37 - --color-prettylights-syntax-markup-ignored-text: #eaeef2; 38 - --color-prettylights-syntax-markup-ignored-bg: #0550ae; 39 - --color-prettylights-syntax-meta-diff-range: #8250df; 40 - --color-prettylights-syntax-brackethighlighter-angle: #57606a; 41 - --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; 42 - --color-prettylights-syntax-constant-other-reference-link: #0a3069; 43 - } 44 - 45 - @media (prefers-color-scheme: dark) { 46 - main { 47 - --color-prettylights-syntax-comment: #8b949e; 48 - --color-prettylights-syntax-constant: #79c0ff; 49 - --color-prettylights-syntax-entity: #d2a8ff; 50 - --color-prettylights-syntax-storage-modifier-import: #c9d1d9; 51 - --color-prettylights-syntax-entity-tag: #7ee787; 52 - --color-prettylights-syntax-keyword: #ff7b72; 53 - --color-prettylights-syntax-string: #a5d6ff; 54 - --color-prettylights-syntax-variable: #ffa657; 55 - --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; 56 - --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; 57 - --color-prettylights-syntax-invalid-illegal-bg: #8e1519; 58 - --color-prettylights-syntax-carriage-return-text: #f0f6fc; 59 - --color-prettylights-syntax-carriage-return-bg: #b62324; 60 - --color-prettylights-syntax-string-regexp: #7ee787; 61 - --color-prettylights-syntax-markup-list: #f2cc60; 62 - --color-prettylights-syntax-markup-heading: #1f6feb; 63 - --color-prettylights-syntax-markup-italic: #c9d1d9; 64 - --color-prettylights-syntax-markup-bold: #c9d1d9; 65 - --color-prettylights-syntax-markup-deleted-text: #ffdcd7; 66 - --color-prettylights-syntax-markup-deleted-bg: #67060c; 67 - --color-prettylights-syntax-markup-inserted-text: #aff5b4; 68 - --color-prettylights-syntax-markup-inserted-bg: #033a16; 69 - --color-prettylights-syntax-markup-changed-text: #ffdfb6; 70 - --color-prettylights-syntax-markup-changed-bg: #5a1e02; 71 - --color-prettylights-syntax-markup-ignored-text: #c9d1d9; 72 - --color-prettylights-syntax-markup-ignored-bg: #1158c7; 73 - --color-prettylights-syntax-meta-diff-range: #d2a8ff; 74 - --color-prettylights-syntax-brackethighlighter-angle: #8b949e; 75 - --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; 76 - --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; 77 - } 78 - } 79 - 80 - .gsc-main, 81 - .gsc-comments { 82 - gap: 1rem !important; 83 - } 84 - 85 - * { 86 - border-radius: 0 !important; 87 - border-color: var(--sc-prose-bd) !important; 88 - } 89 - 90 - .gsc-comment, 91 - .gsc-comment-box, 92 - .gsc-reactions-button, 93 - .gsc-reactions-popover, 94 - .BtnGroup-item--selected { 95 - background-color: var(--sc-prose-bg) !important; 96 - } 97 - 98 - .BtnGroup-item .btn { 99 - background-color: transparent !important; 100 - } 101 - 102 - main .gsc-loading-image { 103 - background: none !important; 104 - display: none !important; 105 - }
+1 -1
src/components/Comments.astro
··· 14 14 script.setAttribute("data-reactions-enabled", "0"); 15 15 script.setAttribute("data-emit-metadata", "1"); 16 16 script.setAttribute("data-input-position", "bottom"); 17 - script.setAttribute("data-theme", "https://devins.page/sc-giscus.css"); 17 + script.setAttribute("data-theme", "https://devins.page/dp-giscus.css"); 18 18 script.setAttribute("data-lang", "en"); 19 19 script.setAttribute("data-loading", "lazy"); 20 20 script.crossOrigin = "anonymous";
+3 -13
src/components/Footer.astro
··· 14 14 <footer 15 15 style="display: flex; justify-content: space-between; align-items: center" 16 16 > 17 - <select id="theme-selector"> 18 - <option value="default">default</option> 19 - <option value="catppuccin-mocha">catppuccin mocha</option> 20 - <option value="catppuccin-macchiato">catppuccin macchiato</option> 21 - <option value="catppuccin-frappe">catppuccin frappe</option> 22 - <option value="gruvbox-material-hard">gruvbox material hard</option> 23 - <option value="gruvbox-material-medium">gruvbox material medium</option> 24 - <option value="gruvbox-material-soft">gruvbox material soft</option> 25 - <option value="gruvbox-hard">gruvbox hard</option> 26 - <option value="gruvbox-medium">gruvbox medium</option> 27 - <option value="gruvbox-soft">gruvbox soft</option> 28 - <option value="solarized">solarized</option> 29 - </select> 17 + <nav> 18 + subscribe to <a href="/rss.xml">rss</a> 19 + </nav> 30 20 <div style="text-align: right"> 31 21 <code 32 22 ><a href={`https://github.com/intergrav/devins.page/commit/${commitHash}`}
+2 -2
src/components/Header.astro
··· 2 2 <nav> 3 3 <strong>devins.page:</strong> 4 4 <a href="/">home</a>, 5 - <a href="/blog">blog</a>, 6 - <a href="/rss.xml">rss</a> 5 + <a href="/blog">blog</a> 7 6 </nav> 8 7 <nav style="text-align: right"> 9 8 <strong>external:</strong> 10 9 <a href="mailto:devin@devins.page">email</a>, 11 10 <a href="https://github.com/intergrav">github</a>, 11 + <a href="https://git.devins.page">forgejo</a>, 12 12 <a href="https://www.last.fm/user/devin_real">last.fm</a> 13 13 </nav> 14 14 </header>
-30
src/layouts/Layout.astro
··· 24 24 <meta property="og:type" content="website" /> 25 25 <meta property="og:url" content={Astro.url.pathname} /> 26 26 27 - <link 28 - rel="icon" 29 - type="image/png" 30 - href="https://github.com/intergrav.png?size=64" 31 - /> 32 27 <link rel="sitemap" href="/sitemap-index.xml" /> 33 28 <link 34 29 rel="alternate" ··· 38 33 /> 39 34 40 35 <ClientRouter /> 41 - <script is:inline> 42 - (function () { 43 - function applyTheme() { 44 - const theme = localStorage.getItem("theme") || "default"; 45 - document.documentElement[ 46 - theme === "default" ? "removeAttribute" : "setAttribute" 47 - ]("data-theme", theme); 48 - } 49 - 50 - function init() { 51 - const selector = document.getElementById("theme-selector"); 52 - if (selector) { 53 - selector.value = localStorage.getItem("theme") || "default"; 54 - selector.onchange = () => { 55 - localStorage.setItem("theme", selector.value); 56 - applyTheme(); 57 - }; 58 - } 59 - applyTheme(); 60 - } 61 - 62 - init(); 63 - document.addEventListener("astro:page-load", init); 64 - })(); 65 - </script> 66 36 </head> 67 37 <body class="prose"> 68 38 <Header />
+18 -392
src/styles/global.css
··· 1 + /* catppuccin latte */ 1 2 :root { 2 - --shiki-foreground: #24292f; 3 - --shiki-background: var(--sc-prose-bg); 4 - --shiki-token-constant: #0550ae; 5 - --shiki-token-string: #0a3069; 6 - --shiki-token-comment: #6e7781; 7 - --shiki-token-keyword: #cf222e; 8 - --shiki-token-parameter: #24292f; 9 - --shiki-token-function: #8250df; 10 - --shiki-token-string-expression: #0a3069; 11 - --shiki-token-punctuation: #24292f; 12 - --shiki-token-link: #0550ae; 3 + --bg: #eff1f5; /* base */ 4 + --text: #4c4f69; /* text */ 5 + --accent: #fe640b; /* peach */ 6 + --sc-prose-bg: #e6e9ef; /* mantle */ 7 + --sc-prose-bd: #dce0e8; /* surface 0 */ 13 8 } 14 9 10 + /* catppuccin mocha */ 15 11 @media (prefers-color-scheme: dark) { 16 12 :root { 17 - --shiki-foreground: #e6edf3; 18 - --shiki-background: var(--sc-prose-bg); 19 - --shiki-token-constant: #79c0ff; 20 - --shiki-token-string: #a5d6ff; 21 - --shiki-token-comment: #8b949e; 22 - --shiki-token-keyword: #ff7b72; 23 - --shiki-token-parameter: #e6edf3; 24 - --shiki-token-function: #d2a8ff; 25 - --shiki-token-string-expression: #a5d6ff; 26 - --shiki-token-punctuation: #e6edf3; 27 - --shiki-token-link: #79c0ff; 28 - } 29 - } 30 - 31 - [data-theme="catppuccin-mocha"] { 32 - --bg: #1e1e2e; /* base */ 33 - --text: #cdd6f4; /* text */ 34 - --link: #89b4fa; /* blue */ 35 - --sc-prose-bg: #181825; /* mantle */ 36 - --sc-prose-bd: #313244; /* surface 0 */ 37 - /* shiki variables */ 38 - --shiki-foreground: #cdd6f4; /* text */ 39 - --shiki-background: #181825; /* mantle */ 40 - --shiki-token-constant: #cba6f7; /* mauve */ 41 - --shiki-token-string: #a6e3a1; /* green */ 42 - --shiki-token-comment: #6c7086; /* overlay0 */ 43 - --shiki-token-keyword: #f38ba8; /* pink */ 44 - --shiki-token-parameter: #cdd6f4; /* text */ 45 - --shiki-token-function: #89b4fa; /* blue */ 46 - --shiki-token-string-expression: #a6e3a1; /* green */ 47 - --shiki-token-punctuation: #cdd6f4; /* text */ 48 - --shiki-token-link: #89b4fa; /* blue */ 49 - } 50 - 51 - [data-theme="catppuccin-macchiato"] { 52 - --bg: #24273a; /* base */ 53 - --text: #cad3f5; /* text */ 54 - --link: #8aadf4; /* blue */ 55 - --sc-prose-bg: #1e2030; /* mantle */ 56 - --sc-prose-bd: #363a4f; /* surface 0 */ 57 - /* shiki variables */ 58 - --shiki-foreground: #cad3f5; /* text */ 59 - --shiki-background: #1e2030; /* mantle */ 60 - --shiki-token-constant: #c6a0f6; /* mauve */ 61 - --shiki-token-string: #a6da95; /* green */ 62 - --shiki-token-comment: #6e738d; /* overlay0 */ 63 - --shiki-token-keyword: #f5bde6; /* pink */ 64 - --shiki-token-parameter: #cad3f5; /* text */ 65 - --shiki-token-function: #8aadf4; /* blue */ 66 - --shiki-token-string-expression: #a6da95; /* green */ 67 - --shiki-token-punctuation: #cad3f5; /* text */ 68 - --shiki-token-link: #8aadf4; /* blue */ 69 - } 70 - 71 - [data-theme="catppuccin-frappe"] { 72 - --bg: #303446; /* base */ 73 - --text: #c6d0f5; /* text */ 74 - --link: #8caaee; /* blue */ 75 - --sc-prose-bg: #292c3c; /* mantle */ 76 - --sc-prose-bd: #414559; /* surface 0 */ 77 - /* shiki variables */ 78 - --shiki-foreground: #c6d0f5; /* text */ 79 - --shiki-background: #292c3c; /* mantle */ 80 - --shiki-token-constant: #ca9ee6; /* mauve */ 81 - --shiki-token-string: #a6d189; /* green */ 82 - --shiki-token-comment: #737994; /* overlay0 */ 83 - --shiki-token-keyword: #f4b8e4; /* pink */ 84 - --shiki-token-parameter: #c6d0f5; /* text */ 85 - --shiki-token-function: #8caaee; /* blue */ 86 - --shiki-token-string-expression: #a6d189; /* green */ 87 - --shiki-token-punctuation: #c6d0f5; /* text */ 88 - --shiki-token-link: #8caaee; /* blue */ 89 - } 90 - 91 - [data-theme="gruvbox-hard"] { 92 - --bg: #1d2021; /* bg0_h */ 93 - --text: #ebdbb2; /* fg */ 94 - --link: #fe8019; /* orange */ 95 - --sc-prose-bg: #32302f; /* bg1 */ 96 - --sc-prose-bd: #504945; /* bg2 */ 97 - /* shiki variables */ 98 - --shiki-foreground: #ebdbb2; /* fg */ 99 - --shiki-background: #32302f; /* bg1 */ 100 - --shiki-token-constant: #d3869b; /* purple */ 101 - --shiki-token-string: #b8bb26; /* green */ 102 - --shiki-token-comment: #928374; /* gray */ 103 - --shiki-token-keyword: #fb4934; /* red */ 104 - --shiki-token-parameter: #ebdbb2; /* fg */ 105 - --shiki-token-function: #83a598; /* blue */ 106 - --shiki-token-string-expression: #b8bb26; /* green */ 107 - --shiki-token-punctuation: #ebdbb2; /* fg */ 108 - --shiki-token-link: #fe8019; /* orange */ 109 - } 110 - 111 - [data-theme="gruvbox-medium"] { 112 - --bg: #282828; /* bg0 */ 113 - --text: #ebdbb2; /* fg */ 114 - --link: #fe8019; /* orange */ 115 - --sc-prose-bg: #3c3836; /* bg1 */ 116 - --sc-prose-bd: #504945; /* bg2 */ 117 - /* shiki variables */ 118 - --shiki-foreground: #ebdbb2; /* fg */ 119 - --shiki-background: #3c3836; /* bg1 */ 120 - --shiki-token-constant: #d3869b; /* purple */ 121 - --shiki-token-string: #b8bb26; /* green */ 122 - --shiki-token-comment: #928374; /* gray */ 123 - --shiki-token-keyword: #fb4934; /* red */ 124 - --shiki-token-parameter: #ebdbb2; /* fg */ 125 - --shiki-token-function: #83a598; /* blue */ 126 - --shiki-token-string-expression: #b8bb26; /* green */ 127 - --shiki-token-punctuation: #ebdbb2; /* fg */ 128 - --shiki-token-link: #fe8019; /* orange */ 129 - } 130 - 131 - [data-theme="gruvbox-soft"] { 132 - --bg: #32302f; /* bg0_s */ 133 - --text: #ebdbb2; /* fg */ 134 - --link: #fe8019; /* orange */ 135 - --sc-prose-bg: #3c3836; /* bg1 */ 136 - --sc-prose-bd: #504945; /* bg2 */ 137 - /* shiki variables */ 138 - --shiki-foreground: #ebdbb2; /* fg */ 139 - --shiki-background: #3c3836; /* bg1 */ 140 - --shiki-token-constant: #d3869b; /* purple */ 141 - --shiki-token-string: #b8bb26; /* green */ 142 - --shiki-token-comment: #928374; /* gray */ 143 - --shiki-token-keyword: #fb4934; /* red */ 144 - --shiki-token-parameter: #ebdbb2; /* fg */ 145 - --shiki-token-function: #83a598; /* blue */ 146 - --shiki-token-string-expression: #b8bb26; /* green */ 147 - --shiki-token-punctuation: #ebdbb2; /* fg */ 148 - --shiki-token-link: #fe8019; /* orange */ 149 - } 150 - 151 - [data-theme="gruvbox-material-hard"] { 152 - --bg: #1d2021; /* bg0_h */ 153 - --text: #d4be98; /* fg1 */ 154 - --link: #d8a657; /* yellow */ 155 - --sc-prose-bg: #32302f; /* bg1 */ 156 - --sc-prose-bd: #504945; /* bg2 */ 157 - /* shiki variables */ 158 - --shiki-foreground: #d4be98; /* fg1 */ 159 - --shiki-background: #32302f; /* bg1 */ 160 - --shiki-token-constant: #d3869b; /* purple */ 161 - --shiki-token-string: #a9b665; /* green */ 162 - --shiki-token-comment: #928374; /* gray */ 163 - --shiki-token-keyword: #ea6962; /* red */ 164 - --shiki-token-parameter: #d4be98; /* fg1 */ 165 - --shiki-token-function: #7daea3; /* aqua */ 166 - --shiki-token-string-expression: #a9b665; /* green */ 167 - --shiki-token-punctuation: #d4be98; /* fg1 */ 168 - --shiki-token-link: #d8a657; /* yellow */ 169 - } 170 - 171 - [data-theme="gruvbox-material-medium"] { 172 - --bg: #282828; /* bg0 */ 173 - --text: #d4be98; /* fg1 */ 174 - --link: #d8a657; /* yellow */ 175 - --sc-prose-bg: #3c3836; /* bg1 */ 176 - --sc-prose-bd: #504945; /* bg2 */ 177 - /* shiki variables */ 178 - --shiki-foreground: #d4be98; /* fg1 */ 179 - --shiki-background: #3c3836; /* bg1 */ 180 - --shiki-token-constant: #d3869b; /* purple */ 181 - --shiki-token-string: #a9b665; /* green */ 182 - --shiki-token-comment: #928374; /* gray */ 183 - --shiki-token-keyword: #ea6962; /* red */ 184 - --shiki-token-parameter: #d4be98; /* fg1 */ 185 - --shiki-token-function: #7daea3; /* aqua */ 186 - --shiki-token-string-expression: #a9b665; /* green */ 187 - --shiki-token-punctuation: #d4be98; /* fg1 */ 188 - --shiki-token-link: #d8a657; /* yellow */ 189 - } 190 - 191 - [data-theme="gruvbox-material-soft"] { 192 - --bg: #32302f; /* bg0_s */ 193 - --text: #d4be98; /* fg1 */ 194 - --link: #d8a657; /* yellow */ 195 - --sc-prose-bg: #3c3836; /* bg1 */ 196 - --sc-prose-bd: #504945; /* bg2 */ 197 - /* shiki variables */ 198 - --shiki-foreground: #d4be98; /* fg1 */ 199 - --shiki-background: #3c3836; /* bg1 */ 200 - --shiki-token-constant: #d3869b; /* purple */ 201 - --shiki-token-string: #a9b665; /* green */ 202 - --shiki-token-comment: #928374; /* gray */ 203 - --shiki-token-keyword: #ea6962; /* red */ 204 - --shiki-token-parameter: #d4be98; /* fg1 */ 205 - --shiki-token-function: #7daea3; /* aqua */ 206 - --shiki-token-string-expression: #a9b665; /* green */ 207 - --shiki-token-punctuation: #d4be98; /* fg1 */ 208 - --shiki-token-link: #d8a657; /* yellow */ 209 - } 210 - 211 - [data-theme="solarized"] { 212 - --bg: #002b36; /* base03 */ 213 - --text: #93a1a1; /* base1 */ 214 - --link: #268bd2; /* blue */ 215 - --sc-prose-bg: #073642; /* base02 */ 216 - --sc-prose-bd: #586e75; /* base01 */ 217 - /* shiki variables */ 218 - --shiki-foreground: #93a1a1; /* base1 */ 219 - --shiki-background: #073642; /* base02 */ 220 - --shiki-token-constant: #6c71c4; /* violet */ 221 - --shiki-token-string: #859900; /* green */ 222 - --shiki-token-comment: #586e75; /* base01 */ 223 - --shiki-token-keyword: #dc322f; /* red */ 224 - --shiki-token-parameter: #93a1a1; /* base1 */ 225 - --shiki-token-function: #268bd2; /* blue */ 226 - --shiki-token-string-expression: #859900; /* green */ 227 - --shiki-token-punctuation: #93a1a1; /* base1 */ 228 - --shiki-token-link: #268bd2; /* blue */ 229 - } 230 - 231 - @media (prefers-color-scheme: light) { 232 - [data-theme="catppuccin-mocha"], 233 - [data-theme="catppuccin-macchiato"], 234 - [data-theme="catppuccin-frappe"] { 235 - --bg: #eff1f5; /* base */ 236 - --text: #4c4f69; /* text */ 237 - --link: #1e66f5; /* blue */ 238 - --sc-prose-bg: #e6e9ef; /* mantle */ 239 - --sc-prose-bd: #dce0e8; /* surface 0 */ 240 - /* shiki variables */ 241 - --shiki-foreground: #4c4f69; /* text */ 242 - --shiki-background: #e6e9ef; /* mantle */ 243 - --shiki-token-constant: #8839ef; /* mauve */ 244 - --shiki-token-string: #40a02b; /* green */ 245 - --shiki-token-comment: #acb0be; /* subtext0 */ 246 - --shiki-token-keyword: #d20f39; /* red */ 247 - --shiki-token-parameter: #4c4f69; /* text */ 248 - --shiki-token-function: #1e66f5; /* blue */ 249 - --shiki-token-string-expression: #40a02b; /* green */ 250 - --shiki-token-punctuation: #4c4f69; /* text */ 251 - --shiki-token-link: #1e66f5; /* blue */ 252 - } 253 - 254 - [data-theme="gruvbox-hard"] { 255 - --bg: #f9f5d7; /* bg0_h */ 256 - --text: #3c3836; /* fg */ 257 - --link: #af3a03; /* orange */ 258 - --sc-prose-bg: #ebdbb2; /* bg1 */ 259 - --sc-prose-bd: #d5c4a1; /* bg2 */ 260 - /* shiki variables */ 261 - --shiki-foreground: #3c3836; /* fg */ 262 - --shiki-background: #ebdbb2; /* bg1 */ 263 - --shiki-token-constant: #8f3f71; /* purple */ 264 - --shiki-token-string: #79740e; /* green */ 265 - --shiki-token-comment: #928374; /* gray */ 266 - --shiki-token-keyword: #9d0006; /* red */ 267 - --shiki-token-parameter: #3c3836; /* fg */ 268 - --shiki-token-function: #076678; /* blue */ 269 - --shiki-token-string-expression: #79740e; /* green */ 270 - --shiki-token-punctuation: #3c3836; /* fg */ 271 - --shiki-token-link: #af3a03; /* orange */ 272 - } 273 - 274 - [data-theme="gruvbox-medium"] { 275 - --bg: #fbf1c7; /* bg0 */ 276 - --text: #3c3836; /* fg */ 277 - --link: #af3a03; /* orange */ 278 - --sc-prose-bg: #f2e5bc; /* bg1 */ 279 - --sc-prose-bd: #ebdbb2; /* bg2 */ 280 - /* shiki variables */ 281 - --shiki-foreground: #3c3836; /* fg */ 282 - --shiki-background: #f2e5bc; /* bg1 */ 283 - --shiki-token-constant: #8f3f71; /* purple */ 284 - --shiki-token-string: #79740e; /* green */ 285 - --shiki-token-comment: #928374; /* gray */ 286 - --shiki-token-keyword: #9d0006; /* red */ 287 - --shiki-token-parameter: #3c3836; /* fg */ 288 - --shiki-token-function: #076678; /* blue */ 289 - --shiki-token-string-expression: #79740e; /* green */ 290 - --shiki-token-punctuation: #3c3836; /* fg */ 291 - --shiki-token-link: #af3a03; /* orange */ 292 - } 293 - 294 - [data-theme="gruvbox-soft"] { 295 - --bg: #f2e5bc; /* bg0_s */ 296 - --text: #3c3836; /* fg */ 297 - --link: #af3a03; /* orange */ 298 - --sc-prose-bg: #ebdbb2; /* bg1 */ 299 - --sc-prose-bd: #d5c4a1; /* bg2 */ 300 - /* shiki variables */ 301 - --shiki-foreground: #3c3836; /* fg */ 302 - --shiki-background: #ebdbb2; /* bg1 */ 303 - --shiki-token-constant: #8f3f71; /* purple */ 304 - --shiki-token-string: #79740e; /* green */ 305 - --shiki-token-comment: #928374; /* gray */ 306 - --shiki-token-keyword: #9d0006; /* red */ 307 - --shiki-token-parameter: #3c3836; /* fg */ 308 - --shiki-token-function: #076678; /* blue */ 309 - --shiki-token-string-expression: #79740e; /* green */ 310 - --shiki-token-punctuation: #3c3836; /* fg */ 311 - --shiki-token-link: #af3a03; /* orange */ 312 - } 313 - 314 - [data-theme="gruvbox-material-hard"] { 315 - --bg: #f9f5d7; /* bg0_h */ 316 - --text: #654735; /* fg1 */ 317 - --link: #b57614; /* yellow */ 318 - --sc-prose-bg: #ebdbb2; /* bg1 */ 319 - --sc-prose-bd: #d5c4a1; /* bg2 */ 320 - /* shiki variables */ 321 - --shiki-foreground: #654735; /* fg1 */ 322 - --shiki-background: #ebdbb2; /* bg1 */ 323 - --shiki-token-constant: #8f3f71; /* purple */ 324 - --shiki-token-string: #6f8352; /* green */ 325 - --shiki-token-comment: #928374; /* gray */ 326 - --shiki-token-keyword: #c14a4a; /* red */ 327 - --shiki-token-parameter: #654735; /* fg1 */ 328 - --shiki-token-function: #45707a; /* aqua */ 329 - --shiki-token-string-expression: #6f8352; /* green */ 330 - --shiki-token-punctuation: #654735; /* fg1 */ 331 - --shiki-token-link: #b57614; /* yellow */ 332 - } 333 - 334 - [data-theme="gruvbox-material-medium"] { 335 - --bg: #fbf1c7; /* bg0 */ 336 - --text: #654735; /* fg1 */ 337 - --link: #b57614; /* yellow */ 338 - --sc-prose-bg: #f2e5bc; /* bg1 */ 339 - --sc-prose-bd: #ebdbb2; /* bg2 */ 340 - /* shiki variables */ 341 - --shiki-foreground: #654735; /* fg1 */ 342 - --shiki-background: #f2e5bc; /* bg1 */ 343 - --shiki-token-constant: #8f3f71; /* purple */ 344 - --shiki-token-string: #6f8352; /* green */ 345 - --shiki-token-comment: #928374; /* gray */ 346 - --shiki-token-keyword: #c14a4a; /* red */ 347 - --shiki-token-parameter: #654735; /* fg1 */ 348 - --shiki-token-function: #45707a; /* aqua */ 349 - --shiki-token-string-expression: #6f8352; /* green */ 350 - --shiki-token-punctuation: #654735; /* fg1 */ 351 - --shiki-token-link: #b57614; /* yellow */ 352 - } 353 - 354 - [data-theme="gruvbox-material-soft"] { 355 - --bg: #f2e5bc; /* bg0_s */ 356 - --text: #654735; /* fg1 */ 357 - --link: #b57614; /* yellow */ 358 - --sc-prose-bg: #ebdbb2; /* bg1 */ 359 - --sc-prose-bd: #d5c4a1; /* bg2 */ 360 - /* shiki variables */ 361 - --shiki-foreground: #654735; /* fg1 */ 362 - --shiki-background: #ebdbb2; /* bg1 */ 363 - --shiki-token-constant: #8f3f71; /* purple */ 364 - --shiki-token-string: #6f8352; /* green */ 365 - --shiki-token-comment: #928374; /* gray */ 366 - --shiki-token-keyword: #c14a4a; /* red */ 367 - --shiki-token-parameter: #654735; /* fg1 */ 368 - --shiki-token-function: #45707a; /* aqua */ 369 - --shiki-token-string-expression: #6f8352; /* green */ 370 - --shiki-token-punctuation: #654735; /* fg1 */ 371 - --shiki-token-link: #b57614; /* yellow */ 372 - } 373 - 374 - [data-theme="solarized"] { 375 - --bg: #fdf6e3; /* base3 */ 376 - --text: #586e75; /* base01 */ 377 - --link: #268bd2; /* blue */ 378 - --sc-prose-bg: #eee8d5; /* base2 */ 379 - --sc-prose-bd: #93a1a1; /* base1 */ 380 - /* shiki variables */ 381 - --shiki-foreground: #586e75; /* base01 */ 382 - --shiki-background: #eee8d5; /* base2 */ 383 - --shiki-token-constant: #6c71c4; /* violet */ 384 - --shiki-token-string: #859900; /* green */ 385 - --shiki-token-comment: #93a1a1; /* base1 */ 386 - --shiki-token-keyword: #dc322f; /* red */ 387 - --shiki-token-parameter: #586e75; /* base01 */ 388 - --shiki-token-function: #268bd2; /* blue */ 389 - --shiki-token-string-expression: #859900; /* green */ 390 - --shiki-token-punctuation: #586e75; /* base01 */ 391 - --shiki-token-link: #268bd2; /* blue */ 13 + --bg: #1e1e2e; /* base */ 14 + --text: #cdd6f4; /* text */ 15 + --accent: #fab387; /* peach */ 16 + --sc-prose-bg: #181825; /* mantle */ 17 + --sc-prose-bd: #313244; /* surface 0 */ 392 18 } 393 19 } 394 20 395 - html[data-theme] { 21 + body { 396 22 background-color: var(--bg); 397 23 color: var(--text); 398 24 } 399 25 400 - html[data-theme] a { 401 - color: var(--link); 26 + a { 27 + color: var(--accent); 402 28 text-decoration: none; 403 29 } 404 30 405 - html[data-theme] a:hover { 406 - color: var(--link); 31 + a:hover { 32 + color: var(--accent); 407 33 text-decoration: underline; 408 34 } 409 35 410 - html[data-theme] hr { 36 + hr { 411 37 border-color: var(--sc-prose-bd); 412 38 border-style: solid; 413 39 }