seth.computer
this repo has no description
Rose pine!
+107
-47
+56
css/rose-pine-media.css
+56
css/rose-pine-media.css
···
1
+
:root {
2
+
/* Rosé Pine Dawn */
3
+
--rp-base: #faf4ed;
4
+
--rp-surface: #fffaf3;
5
+
--rp-overlay: #f2e9e1;
6
+
--rp-muted: #9893a5;
7
+
--rp-subtle: #797593;
8
+
--rp-text: #575279;
9
+
--rp-love: #b4637a;
10
+
--rp-gold: #ea9d34;
11
+
--rp-rose: #d7827e;
12
+
--rp-pine: #286983;
13
+
--rp-foam: #56949f;
14
+
--rp-iris: #907aa9;
15
+
--rp-highlight-low: #f4ede8;
16
+
--rp-highlight-med: #dfdad9;
17
+
--rp-highlight-high: #cecacd;
18
+
}
19
+
20
+
@media (prefers-color-scheme: dark) {
21
+
:root {
22
+
/* Rosé Pine */
23
+
--rp-base: #191724;
24
+
--rp-surface: #1f1d2e;
25
+
--rp-overlay: #26233a;
26
+
--rp-muted: #6e6a86;
27
+
--rp-subtle: #908caa;
28
+
--rp-text: #e0def4;
29
+
--rp-love: #eb6f92;
30
+
--rp-gold: #f6c177;
31
+
--rp-rose: #ebbcba;
32
+
--rp-pine: #31748f;
33
+
--rp-foam: #9ccfd8;
34
+
--rp-iris: #c4a7e7;
35
+
--rp-highlight-low: #21202e;
36
+
--rp-highlight-med: #403d52;
37
+
--rp-highlight-high: #524f67;
38
+
39
+
/* Rosé Pine Moon */
40
+
/* --rp-base: #232136; */
41
+
/* --rp-surface: #2a273f; */
42
+
/* --rp-overlay: #393552; */
43
+
/* --rp-muted: #6e6a86; */
44
+
/* --rp-subtle: #908caa; */
45
+
/* --rp-text: #e0def4; */
46
+
/* --rp-love: #eb6f92; */
47
+
/* --rp-gold: #f6c177; */
48
+
/* --rp-rose: #ea9a97; */
49
+
/* --rp-pine: #3e8fb0; */
50
+
/* --rp-foam: #9ccfd8; */
51
+
/* --rp-iris: #c4a7e7; */
52
+
/* --rp-highlight-low: #2a283e; */
53
+
/* --rp-highlight-med: #44415a; */
54
+
/* --rp-highlight-high: #56526e; */
55
+
}
56
+
}
+30
-46
css/style.css
+30
-46
css/style.css
···
1
1
@import "normalize.css";
2
-
@import "prism-duotone-light.css";
2
+
@import "rose-pine-media.css";
3
3
4
4
@font-face {
5
5
font-family: "Lato";
···
41
41
font-style: italic;
42
42
}
43
43
44
-
/**
45
-
* everforest (https://github.com/sainnhe/everforest)
46
-
*/
47
44
:root {
48
-
--color-bg: #fdf6e3;
49
-
--color-fg: #5c6a72;
50
-
--color-blue: #3a94c5;
51
-
--color-statusline2: #708089;
52
-
--color-green: #8da101;
53
-
--color-gray0: #a6b0a0;
54
-
--color-gray1: #eeeeee;
55
-
--color-gray2: #829181;
56
-
}
57
-
58
-
@media (prefers-color-scheme: dark) {
59
-
:root {
60
-
--color-bg: #2d353b;
61
-
--color-fg: #d2c6aa;
62
-
--color-blue: #7fbbb3;
63
-
--color-statusline2: #d3c6aa;
64
-
--color-green: #a7c080;
65
-
--color-gray0: #7a8478;
66
-
--color-gray1: #555555;
67
-
--color-gray2: #9da9a0;
68
-
}
45
+
--color-bg: var(--rp-base);
46
+
--color-fg: var(--rp-text);
47
+
--color-link: var(--rp-iris);
48
+
--color-link-hover: var(--rp-rose);
49
+
--color-heading: var(--rp-text);
50
+
--color-border: var(--rp-muted);
51
+
--color-muted: var(--rp-subtle);
52
+
--color-highlight: var(--rp-highlight-low);
69
53
}
70
54
71
55
ul.post-list {
···
82
66
}
83
67
84
68
ul.post-list li em {
85
-
color: var(--color-gray0);
69
+
color: var(--color-border);
86
70
}
87
71
88
72
ul.post-list li .subtext::before {
89
73
content: " — ";
90
74
font-size: 0.8em;
91
-
color: var(--color-gray0);
75
+
color: var(--color-border);
92
76
}
93
77
94
78
@media (max-width: 600px) {
···
118
102
119
103
a,
120
104
a:visited {
121
-
color: var(--color-green);
105
+
color: var(--color-link);
122
106
text-decoration: none;
123
107
}
124
108
125
109
a:hover,
126
110
a:focus {
127
-
color: var(--color-blue);
111
+
color: var(--color-link-hover);
128
112
}
129
113
130
114
div#header {
131
-
border-bottom: 1px solid var(--color-gray0);
115
+
border-bottom: 1px solid var(--color-border);
132
116
margin-bottom: 30px;
133
117
padding: 12px 0px 12px 0px;
134
118
display: flex;
···
147
131
148
132
div#header div#logo a,
149
133
div#header div#logo a:visited {
150
-
color: var(--color-gray2);
134
+
color: var(--color-muted);
151
135
}
152
136
153
137
div#header a,
154
138
div#header a:visited {
155
-
color: var(--color-green);
139
+
color: var(--color-link);
156
140
}
157
141
158
142
div#header a:active,
159
143
div#header a:hover {
160
-
color: var(--color-blue);
144
+
color: var(--color-link-hover);
161
145
}
162
146
163
147
div#header #navigation {
···
181
165
}
182
166
183
167
#footer {
184
-
border-top: solid 1px var(--color-gray0);
185
-
color: var(--color-gray2);
168
+
border-top: solid 1px var(--color-border);
169
+
color: var(--color-muted);
186
170
font-size: 12px;
187
171
margin-top: 30px;
188
172
padding: 12px 0px 12px 0px;
···
195
179
h5 {
196
180
font-family: Lato, sans;
197
181
font-weight: bold;
198
-
color: var(--color-statusline2);
182
+
color: var(--color-heading);
199
183
}
200
184
201
185
h1 {
···
207
191
}
208
192
209
193
div.info {
210
-
color: var(--color-gray2);
194
+
color: var(--color-muted);
211
195
font-size: 14px;
212
196
font-style: italic;
213
197
}
···
215
199
body pre {
216
200
font-size: 0.8em;
217
201
line-height: 1.5em;
218
-
background: var(--color-gray0);
202
+
background: var(--color-highlight);
219
203
overflow-x: scroll;
220
204
padding: 10px 15px;
221
205
}
222
206
223
207
blockquote {
224
-
border-left: 10px solid var(--color-gray0);
208
+
border-left: 10px solid var(--color-border);
225
209
margin-left: 0;
226
210
padding-left: 30px;
227
211
color: var(--color-fg);
···
231
215
232
216
hr {
233
217
border: 0;
234
-
border-bottom: 1px solid var(--color-gray0);
218
+
border-bottom: 1px solid var(--color-border);
235
219
}
236
220
237
221
section.header {
···
239
223
font-size: 16px;
240
224
padding-bottom: 15px;
241
225
color: var(--color-fg);
242
-
border-bottom: solid 1px var(--color-gray2);
226
+
border-bottom: solid 1px var(--color-muted);
243
227
}
244
228
245
229
.tag {
246
230
font-size: 0.8em;
247
231
display: inline-block;
248
232
padding-right: 5px;
249
-
color: var(--color-gray0);
233
+
color: var(--color-border);
250
234
white-space: nowrap;
251
235
}
252
236
253
237
.tag::before {
254
238
content: "#";
255
-
color: var(--color-gray2);
239
+
color: var(--color-muted);
256
240
}
257
241
258
242
.tag a:link,
259
243
.tag a:visited,
260
244
.tag a:active {
261
-
color: var(--color-gray2);
245
+
color: var(--color-muted);
262
246
}
263
247
264
248
.tag a:hover {
265
-
color: var(--color-blue);
249
+
color: var(--color-link-hover);
266
250
}
267
251
268
252
code {
269
253
color: var(--color-fg);
270
254
font-size: 0.9em;
271
-
background: var(--color-gray1);
255
+
background: var(--color-highlight);
272
256
padding: 1px 4px;
273
257
border-radius: 5px;
274
258
}
+16
package-lock.json
+16
package-lock.json
···
5
5
"packages": {
6
6
"": {
7
7
"name": "sethetter.com",
8
+
"dependencies": {
9
+
"@rose-pine/palette": "^4.0.1"
10
+
},
8
11
"devDependencies": {
9
12
"wrangler": "^3"
10
13
}
···
963
966
"@jridgewell/sourcemap-codec": "^1.4.10"
964
967
}
965
968
},
969
+
"node_modules/@rose-pine/palette": {
970
+
"version": "4.0.1",
971
+
"resolved": "https://registry.npmjs.org/@rose-pine/palette/-/palette-4.0.1.tgz",
972
+
"integrity": "sha512-4scxhgntd3Vov1vy3+oZTNAsovtLyd4Khukfwdj4BvRkkbHnFQcDRo6fUJ7zu07SUNI+avr+76QwLNpx/lvcLA==",
973
+
"license": "MIT",
974
+
"engines": {
975
+
"node": ">=16"
976
+
},
977
+
"funding": {
978
+
"url": "https://github.com/rose-pine/palette?sponsor=1"
979
+
}
980
+
},
966
981
"node_modules/acorn": {
967
982
"version": "8.14.0",
968
983
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
···
1483
1498
"dev": true,
1484
1499
"hasInstallScript": true,
1485
1500
"license": "Apache-2.0",
1501
+
"peer": true,
1486
1502
"bin": {
1487
1503
"workerd": "bin/workerd"
1488
1504
},
+5
-1
package.json
+5
-1
package.json
···
3
3
"private": true,
4
4
"scripts": {
5
5
"dev": "node serve.js",
6
-
"deploy": "wrangler pages deploy . --project-name=sethetter-com"
6
+
"deploy": "wrangler pages deploy . --project-name=sethetter-com",
7
+
"copy-theme": "cp node_modules/@rose-pine/palette/dist/css/rose-pine-media.css css/"
7
8
},
8
9
"devDependencies": {
9
10
"wrangler": "^3"
11
+
},
12
+
"dependencies": {
13
+
"@rose-pine/palette": "^4.0.1"
10
14
}
11
15
}