forked from
devins.page/devins.page
my website, hosted on wisp.place
feat: new site theme
+161
-200
+2
-2
astro.config.mjs
+2
-2
astro.config.mjs
-185
public/dpgiscustheme.css
-185
public/dpgiscustheme.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 !important;
10
-
}
11
-
12
-
a:hover {
13
-
text-decoration: underline !important;
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: #fe640b;
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: #fe640b;
76
-
--color-accent-emphasis: #fe640b;
77
-
--color-accent-muted: rgb(254 100 11 / 40%);
78
-
--color-accent-subtle: rgb(254 100 11 / 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: #fab387;
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: #fab387;
161
-
--color-accent-emphasis: #fab387;
162
-
--color-accent-muted: rgb(250 179 135 / 40%);
163
-
--color-accent-subtle: rgb(250 179 135 / 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
-
}
+135
public/gt.css
+135
public/gt.css
···
1
+
/* modified Fro theme */
2
+
3
+
:host, html {
4
+
--font-family-serif: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
5
+
--font-family-default: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, 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: #744253;
40
+
--text-normal-color: #744253;
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: #f3d9dc;
77
+
--text-normal-color: #f3d9dc;
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-main .gsc-comment-box-write textarea.gsc-comment-box-textarea {
117
+
border-radius: 0;
118
+
border-bottom-style: solid;
119
+
}
120
+
121
+
.gsc-comment-box-buttons button {
122
+
border-radius: 0;
123
+
}
124
+
125
+
.gsc-comment-box-bottom button:hover {
126
+
color: var(--text-normal-color);
127
+
}
128
+
129
+
.gsc-comment-box-buttons .btn-primary {
130
+
color: var(--text-normal-color);
131
+
}
132
+
133
+
.gsc-comment-box-buttons .btn-primary:disabled {
134
+
color: var(--text-muted-color);
135
+
}
+1
-1
src/components/Comments.astro
+1
-1
src/components/Comments.astro
+23
-12
src/styles/global.css
+23
-12
src/styles/global.css
···
1
-
/* catppuccin latte */
2
1
:root {
3
-
--bg: #eff1f5; /* base */
4
-
--text: #4c4f69; /* text */
5
-
--accent: #fe640b; /* peach */
6
-
--sc-prose-bg: #e6e9ef; /* mantle */
7
-
--sc-prose-bd: #bcc0cc; /* surface 1 */
2
+
--bg: #f3d9dc;
3
+
--text: #744253;
4
+
--accent: #bc6364;
5
+
--sc-prose-bg: #ddc2c5;
6
+
--sc-prose-bd: #b49094;
8
7
}
9
8
10
-
/* catppuccin mocha */
11
9
@media (prefers-color-scheme: dark) {
12
10
:root {
13
-
--bg: #1e1e2e; /* base */
14
-
--text: #cdd6f4; /* text */
15
-
--accent: #fab387; /* peach */
16
-
--sc-prose-bg: #181825; /* mantle */
17
-
--sc-prose-bd: #45475a; /* surface 1 */
11
+
--bg: #3e2f35;
12
+
--text: #f3d9dc;
13
+
--accent: #cf8182;
14
+
--sc-prose-bg: #4e3e44;
15
+
--sc-prose-bd: #68575d;
18
16
}
17
+
}
18
+
19
+
:root {
20
+
--sc-font: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
21
+
}
22
+
23
+
h1,
24
+
h2,
25
+
h3,
26
+
h4,
27
+
h5,
28
+
h6 {
29
+
font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
19
30
}
20
31
21
32
body {