my website, hosted on wisp.place

feat: giscus theme

+127 -1
+126
public/devin-giscus.css
··· 1 + /* modified from fro theme */ 2 + 3 + :host, html { 4 + --font-family-default: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, 5 + sans-serif; 6 + } 7 + 8 + main { 9 + --color-prettylights-syntax-comment: #66707b; 10 + --color-prettylights-syntax-constant: #023b95; 11 + --color-prettylights-syntax-entity: #622cbc; 12 + --color-prettylights-syntax-storage-modifier-import: #0e1116; 13 + --color-prettylights-syntax-entity-tag: #024c1a; 14 + --color-prettylights-syntax-keyword: #a0111f; 15 + --color-prettylights-syntax-string: #032563; 16 + --color-prettylights-syntax-variable: #702c00; 17 + --color-prettylights-syntax-brackethighlighter-unmatched: #6e011a; 18 + --color-prettylights-syntax-invalid-illegal-text: #fff; 19 + --color-prettylights-syntax-invalid-illegal-bg: #6e011a; 20 + --color-prettylights-syntax-carriage-return-text: #fff; 21 + --color-prettylights-syntax-carriage-return-bg: #a0111f; 22 + --color-prettylights-syntax-string-regexp: #024c1a; 23 + --color-prettylights-syntax-markup-list: #2e1800; 24 + --color-prettylights-syntax-markup-heading: #023b95; 25 + --color-prettylights-syntax-markup-italic: #0e1116; 26 + --color-prettylights-syntax-markup-bold: #0e1116; 27 + --color-prettylights-syntax-markup-deleted-text: #6e011a; 28 + --color-prettylights-syntax-markup-deleted-bg: #fff0ee; 29 + --color-prettylights-syntax-markup-inserted-text: #024c1a; 30 + --color-prettylights-syntax-markup-inserted-bg: #d2fedb; 31 + --color-prettylights-syntax-markup-changed-text: #702c00; 32 + --color-prettylights-syntax-markup-changed-bg: #ffc67b; 33 + --color-prettylights-syntax-markup-ignored-text: #e7ecf0; 34 + --color-prettylights-syntax-markup-ignored-bg: #023b95; 35 + --color-prettylights-syntax-meta-diff-range: #622cbc; 36 + --color-prettylights-syntax-brackethighlighter-angle: #4b535d; 37 + --color-prettylights-syntax-sublimelinter-gutter-mark: #88929d; 38 + --color-prettylights-syntax-constant-other-reference-link: #032563; 39 + --text-muted-color: #685151; 40 + --text-normal-color: #56393a; 41 + --color-segmented-control-bg: transparent; 42 + } 43 + 44 + @media (prefers-color-scheme: dark) { 45 + main { 46 + --color-prettylights-syntax-comment: #bdc4cc; 47 + --color-prettylights-syntax-constant: #91cbff; 48 + --color-prettylights-syntax-entity: #dbb7ff; 49 + --color-prettylights-syntax-storage-modifier-import: #f0f3f6; 50 + --color-prettylights-syntax-entity-tag: #72f088; 51 + --color-prettylights-syntax-keyword: #ff9492; 52 + --color-prettylights-syntax-string: #addcff; 53 + --color-prettylights-syntax-variable: #ffb757; 54 + --color-prettylights-syntax-brackethighlighter-unmatched: #ff6a69; 55 + --color-prettylights-syntax-invalid-illegal-text: #fff; 56 + --color-prettylights-syntax-invalid-illegal-bg: #e82a2f; 57 + --color-prettylights-syntax-carriage-return-text: #fff; 58 + --color-prettylights-syntax-carriage-return-bg: #ff4445; 59 + --color-prettylights-syntax-string-regexp: #72f088; 60 + --color-prettylights-syntax-markup-list: #fbd669; 61 + --color-prettylights-syntax-markup-heading: #409eff; 62 + --color-prettylights-syntax-markup-italic: #f0f3f6; 63 + --color-prettylights-syntax-markup-bold: #f0f3f6; 64 + --color-prettylights-syntax-markup-deleted-text: #ffdedb; 65 + --color-prettylights-syntax-markup-deleted-bg: #cc1421; 66 + --color-prettylights-syntax-markup-inserted-text: #acf7b6; 67 + --color-prettylights-syntax-markup-inserted-bg: #007728; 68 + --color-prettylights-syntax-markup-changed-text: #ffe1b4; 69 + --color-prettylights-syntax-markup-changed-bg: #a74c00; 70 + --color-prettylights-syntax-markup-ignored-text: #f0f3f6; 71 + --color-prettylights-syntax-markup-ignored-bg: #318bf8; 72 + --color-prettylights-syntax-meta-diff-range: #dbb7ff; 73 + --color-prettylights-syntax-brackethighlighter-angle: #bdc4cc; 74 + --color-prettylights-syntax-sublimelinter-gutter-mark: #7a828e; 75 + --color-prettylights-syntax-constant-other-reference-link: #addcff; 76 + --text-muted-color: #e4d6cd; 77 + --text-normal-color: #f9eae1; 78 + --color-segmented-control-bg: transparent; 79 + } 80 + } 81 + 82 + .gsc-comments .gsc-header .gsc-left-header em a { 83 + color: var(--text-muted-color); 84 + text-underline-offset: 4px; 85 + transition: all 0.2s; 86 + } 87 + 88 + .gsc-comments .gsc-header .gsc-left-header em a:hover { 89 + color: var(--text-normal-color); 90 + } 91 + 92 + .gsc-right-header { 93 + border-radius: none; 94 + } 95 + 96 + .gsc-right-header li:not(.BtnGroup-item--selected) { 97 + border-top: none; 98 + border-left: none; 99 + border-right: none; 100 + } 101 + 102 + .gsc-right-header li:not(.BtnGroup-item--selected) .btn:hover { 103 + background-color: transparent; 104 + color: var(--text-normal-color); 105 + } 106 + 107 + .gsc-comment-box-tabs { 108 + display: none; 109 + } 110 + 111 + .gsc-comment-box { 112 + border: none; 113 + background-color: transparent; 114 + } 115 + 116 + .gsc-comment-box-bottom button:hover { 117 + color: var(--text-normal-color); 118 + } 119 + 120 + .gsc-comment-box-buttons .btn-primary { 121 + color: var(--text-normal-color); 122 + } 123 + 124 + .gsc-comment-box-buttons .btn-primary:disabled { 125 + color: var(--text-muted-color); 126 + }
+1 -1
src/components/Comments.astro
··· 9 9 data-reactions-enabled="1" 10 10 data-emit-metadata="0" 11 11 data-input-position="top" 12 - data-theme="fro" 12 + data-theme="https://devins.page/devin-giscus.css" 13 13 data-lang="en" 14 14 crossorigin="anonymous" 15 15 async></script>