website

#astro#js#html#css

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

f612fe5 — pyrossh 2026-07-07T17:15:15+05:30 
fix: properly flatten multi-level CSS nesting, restore all original Astro selectors
Files changed (9) hide show
  1. assets/css/shared.css +59 -25
  2. assets/css/workers/cv.css +1 -1
  3. assets/css/workers/home.css +15 -15
  4. assets/css/workers/issues-detail.css +2 -2
  5. assets/css/workers/issues-index.css +3 -3
  6. assets/css/workers/only-bible-app-privacy.css +1 -1
  7. assets/css/workers/posts-detail.css +10 -10
  8. assets/css/workers/posts-index.css +7 -7
  9. packages/workers/assets/src/index.ts +100 -65
assets/css/shared.css CHANGED
@@ -1,25 +1,36 @@
1
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
2
+ html { -webkit-text-size-adjust: 100%; }
3
+ body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
4
+ img, picture, video, canvas, svg { display: block; max-width: 100%; }
5
+ input, button, textarea, select { font: inherit; }
6
+ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
7
+ a { color: inherit; text-decoration: none; }
8
+ ul, ol { list-style: none; }
9
+ table { border-collapse: collapse; }
10
+
11
+
1
12
  @view-transition {
2
13
  navigation: auto; /* enabled! */
3
14
  }
4
15
  :root {
5
- --color-black: hsl(0, 0%, 0%);
16
+ --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));
6
- --color-white: hsl(0, 0%, 100%);
17
+ --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
7
18
  --color-accent: hsl(57.25deg 100% 70%);
8
- --color-body-bg: hsl(0, 0%, 100%);
19
+ --color-body-bg: light-dark(hsl(0, 0%, 100%), hsl(210, 13%, 15%));
9
- --color-box-bg: hsl(0, 0%, 95%);
20
+ --color-box-bg: light-dark(hsl(0, 0%, 95%), hsl(210, 13%, 9%));
10
- --color-text: hsl(0, 0%, 13%);
21
+ --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));
11
- --color-link: hsl(211, 100%, 45%);
22
+ --color-link: light-dark(hsl(211, 100%, 45%), hsl(211, 100%, 60%));
12
- --color-post-link: hsl(0, 0%, 0%);
23
+ --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));
13
- --color-highlight-bg: hsl(183, 80%, 88%);
24
+ --color-highlight-bg: light-dark(hsl(183, 80%, 88%), hsl(183, 80%, 18%));
14
- --color-code-fg: hsl(348, 86%, 43%);
25
+ --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));
15
- --color-code-bg: hsl(0, 0%, 95%);
26
+ --color-code-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
16
- --color-pre-bg: hsl(0, 0%, 95%);
27
+ --color-pre-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
17
- --color-tag: hsl(152, 96%, 35%);
28
+ --color-tag: light-dark(hsl(152, 96%, 35%), hsl(152, 96%, 44%));
18
29
  --btn-light: none;
19
30
  --btn-dark: block;
20
31
 
21
32
  .astro-code,
22
- :root .astro-code span {
33
+ :root .astro-code span {
23
34
  background: var(--color-pre-bg) !important;
24
35
  }
25
36
  }
@@ -28,7 +39,7 @@
28
39
  --btn-light: block;
29
40
  --btn-dark: none;
30
41
 
31
- [data-theme="dark"] .expressive-code .frame pre {
42
+ [data-theme="dark"] .expressive-code .frame pre {
32
43
  background: var(--color-pre-bg) !important;
33
44
  }
34
45
  }
@@ -84,7 +95,9 @@
84
95
  margin-top: 1rem;
85
96
  margin-bottom: 1rem;
86
97
  padding-bottom: 1em;
98
+ }
99
+
87
- } header {
100
+ header {
88
101
  background: #131618;
89
102
  }
90
103
 
@@ -106,7 +119,7 @@
106
119
  margin-right: 8px;
107
120
 
108
121
  &.active,
109
- .logo:hover {
122
+ .logo:hover {
110
123
  color: var(--color-accent);
111
124
  text-decoration: underline;
112
125
  text-decoration-color: var(--color-accent);
@@ -122,19 +135,19 @@
122
135
  line-height: 56px;
123
136
  color: white;
124
137
 
125
- .links #astro-color-scheme-switch {
138
+ .links #astro-color-scheme-switch {
126
139
  display: flex;
127
140
  align-items: center;
128
141
  font-size: 1.3rem;
129
142
 
130
- .links #astro-color-scheme-switch button {
143
+ .links #astro-color-scheme-switch button {
131
144
  padding-right: 12px;
132
145
  cursor: pointer;
133
146
  margin-bottom: -2px;
134
147
  }
135
148
  }
136
149
 
137
- a {
150
+ .links a {
138
151
  display: inline-block;
139
152
  text-decoration: none;
140
153
  font-size: 22px;
@@ -144,19 +157,21 @@
144
157
  padding-left: 12px;
145
158
  padding-right: 12px;
146
159
 
147
- a:last-child {
160
+ .links a:last-child {
148
161
  padding-right: 0px;
149
162
  }
150
163
 
151
164
  &.active,
152
- &:hover {
165
+ .links a:hover {
153
166
  color: var(--color-gray-200);
154
167
  text-decoration: underline;
155
168
  text-decoration-color: var(--color-accent);
156
169
  text-underline-offset: 8px;
157
170
  }
158
171
  }
172
+ }
173
+
159
- } footer {
174
+ footer {
160
175
  background: #131618;
161
176
  }
162
177
 
@@ -199,11 +214,13 @@
199
214
  text-decoration-line: underline;
200
215
  text-decoration-color: white;
201
216
 
202
- .link:hover {
217
+ .link:hover {
203
218
  color: var(--color-gray-200);
204
219
  text-decoration-color: var(--color-gray-200);
205
220
  }
221
+ }
222
+
206
- } div {
223
+ div {
207
224
  flex: 1;
208
225
  width: min(70ch, 100% - 4rem); /* To make the website more readable */
209
226
  margin-right: auto;
@@ -216,4 +233,21 @@
216
233
  div {
217
234
  width: 100%;
218
235
  }
219
- }
236
+ }
237
+
238
+ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
239
+ [data-theme="dark"] {
240
+ --color-body-bg: hsl(210, 13%, 15%);
241
+ --color-box-bg: hsl(210, 13%, 9%);
242
+ --color-text: hsl(210, 17%, 98%);
243
+ --color-link: hsl(211, 100%, 60%);
244
+ --color-post-link: hsl(211, 100%, 60%);
245
+ --color-highlight-bg: hsl(183, 80%, 18%);
246
+ --color-code-fg: hsl(348, 86%, 60%);
247
+ --color-code-bg: hsl(0, 0%, 0%);
248
+ --color-pre-bg: hsl(0, 0%, 0%);
249
+ --color-tag: hsl(152, 96%, 44%);
250
+ --btn-light: block;
251
+ --btn-dark: none;
252
+ color-scheme: dark;
253
+ }
assets/css/workers/cv.css CHANGED
@@ -5,7 +5,7 @@
5
5
  font-size: 2rem;
6
6
  margin-bottom: 1rem;
7
7
 
8
- h1 a {
8
+ h1 a {
9
9
  margin-left: 0.4rem;
10
10
  margin-top: 0.8rem;
11
11
  color: var(--color-link);
assets/css/workers/home.css CHANGED
@@ -100,11 +100,11 @@
100
100
  color: var(--color-text);
101
101
  font-size: 0.95rem;
102
102
 
103
- .repo a {
103
+ .repo a {
104
104
  color: var(--color-link);
105
105
  }
106
106
 
107
- h4 {
107
+ .repo h4 {
108
108
  font-size: 1.05rem;
109
109
  font-weight: 500;
110
110
  line-height: 1.2;
@@ -116,14 +116,14 @@
116
116
  padding: 0;
117
117
  }
118
118
 
119
- .tags {
119
+ .repo .tags {
120
120
  margin-top: 0.5rem;
121
121
  display: flex;
122
122
  flex-wrap: wrap;
123
123
  gap: 0.25rem;
124
124
  }
125
125
 
126
- .tag {
126
+ .repo .tag {
127
127
  color: var(--color-tag);
128
128
  padding: 0.15rem 0.5rem 0.5rem 0rem;
129
129
  border-radius: 0.25rem;
@@ -133,7 +133,7 @@
133
133
  }
134
134
 
135
135
  .interests {
136
- .interests ul {
136
+ .interests ul {
137
137
  display: grid;
138
138
  gap: 0.5rem;
139
139
  grid-template-columns: auto auto auto;
@@ -141,7 +141,7 @@
141
141
  margin-top: 0.5rem;
142
142
  font-size: 1.1rem;
143
143
 
144
- .interests ul li {
144
+ .interests ul li {
145
145
  background-color: var(--color-box-bg);
146
146
  padding: 0.25rem;
147
147
  }
@@ -149,13 +149,13 @@
149
149
  }
150
150
 
151
151
  .contact {
152
- .contact ul {
152
+ .contact ul {
153
153
  display: grid;
154
154
  gap: 0.5rem;
155
155
  grid-template-columns: auto;
156
156
  margin-top: 0.5rem;
157
157
 
158
- .contact ul li {
158
+ .contact ul li {
159
159
  display: flex;
160
160
  flex-direction: row;
161
161
  align-items: baseline;
@@ -169,11 +169,11 @@
169
169
  }
170
170
  }
171
171
 
172
- .contact a {
172
+ .contact ul a {
173
173
  color: var(--color-link);
174
174
  }
175
175
 
176
- strong {
176
+ .contact ul strong {
177
177
  font-weight: 500;
178
178
  margin-left: 0.25rem;
179
179
  margin-right: 0.5rem;
@@ -182,12 +182,12 @@
182
182
  }
183
183
 
184
184
  .tools {
185
- .tools img {
185
+ .tools img {
186
186
  width: 36px;
187
187
  height: 36px;
188
188
  }
189
189
 
190
- ul {
190
+ .tools ul {
191
191
  display: grid;
192
192
  gap: 0.5rem;
193
193
  grid-template-columns: auto auto auto auto;
@@ -198,14 +198,14 @@
198
198
  grid-template-columns: auto auto auto;
199
199
  }
200
200
 
201
- li {
201
+ .tools ul li {
202
202
  display: flex;
203
203
  align-items: center;
204
204
  background-color: var(--color-box-bg);
205
205
  padding: 0.25rem;
206
206
  font-size: 1rem;
207
207
 
208
- li a {
208
+ .tools ul li a {
209
209
  display: flex;
210
210
  flex: 1;
211
211
  flex-direction: row;
@@ -214,7 +214,7 @@
214
214
  margin-left: 0.25rem;
215
215
  margin-right: 0.25rem;
216
216
 
217
- li a div {
217
+ .tools ul li a div {
218
218
  flex: 1;
219
219
  }
220
220
  }
assets/css/workers/issues-detail.css CHANGED
@@ -56,7 +56,7 @@
56
56
  background: var(--color-box-bg);
57
57
 
58
58
  textarea,
59
- .comment-form input {
59
+ .comment-form input {
60
60
  width: 100%;
61
61
  border: 1px solid var(--color-text);
62
62
  background: var(--color-body-bg);
@@ -65,7 +65,7 @@
65
65
  font: inherit;
66
66
  }
67
67
 
68
- textarea {
68
+ .comment-form textarea {
69
69
  min-height: 6rem;
70
70
  resize: vertical;
71
71
  }
assets/css/workers/issues-index.css CHANGED
@@ -28,7 +28,7 @@
28
28
  background: var(--color-box-bg);
29
29
 
30
30
  input,
31
- .new-issue textarea {
31
+ .new-issue textarea {
32
32
  width: 100%;
33
33
  border: 1px solid var(--color-text);
34
34
  background: var(--color-body-bg);
@@ -37,12 +37,12 @@
37
37
  font: inherit;
38
38
  }
39
39
 
40
- textarea {
40
+ .new-issue textarea {
41
41
  min-height: 6rem;
42
42
  resize: vertical;
43
43
  }
44
44
 
45
- button {
45
+ .new-issue button {
46
46
  border: 1px solid var(--color-text);
47
47
  background: var(--color-box-bg);
48
48
  color: var(--color-link);
assets/css/workers/only-bible-app-privacy.css CHANGED
@@ -37,7 +37,7 @@
37
37
  font-weight: 600;
38
38
  margin-top: 0.5rem;
39
39
 
40
- h6 span {
40
+ h6 span {
41
41
  font-family: sans-serif;
42
42
  font-weight: 400;
43
43
  font-size: 0.95rem;
assets/css/workers/posts-detail.css CHANGED
@@ -1,5 +1,5 @@
1
1
  article {
2
- article h1 {
2
+ article h1 {
3
3
  text-align: left;
4
4
  font-size: 1.8rem;
5
5
  font-weight: bold;
@@ -8,7 +8,7 @@
8
8
  margin-bottom: 0.1rem;
9
9
  }
10
10
 
11
- time {
11
+ article time {
12
12
  font-size: 1.1rem;
13
13
  text-align: left;
14
14
  color: light-dark(
@@ -17,32 +17,32 @@
17
17
  );
18
18
  }
19
19
 
20
- hr {
20
+ article hr {
21
21
  margin: 0.5rem 0;
22
22
  border-color: hsl(var(--color-text));
23
23
  }
24
24
 
25
- h2 {
25
+ article h2 {
26
26
  font-size: 1.1rem;
27
27
  font-weight: 500;
28
28
  }
29
29
 
30
- h3 {
30
+ article h3 {
31
31
  font-size: 1.25rem;
32
32
  font-weight: 700;
33
33
  margin-top: 0.5rem;
34
34
  margin-bottom: 0.1rem;
35
35
  }
36
36
 
37
- p {
37
+ article p {
38
38
  font-size: 1.1rem;
39
39
  padding-bottom: 1rem;
40
40
  }
41
41
 
42
42
  p,
43
- li {
43
+ article li {
44
44
  font-size: 1.1rem;
45
- li code {
45
+ article li code {
46
46
  color: var(--color-code-fg) !important;
47
47
  background: var(--color-code-bg) !important;
48
48
  word-wrap: break-word;
@@ -54,14 +54,14 @@
54
54
  }
55
55
  }
56
56
 
57
- blockquote {
57
+ article blockquote {
58
58
  font-size: 1.2rem;
59
59
  font-weight: 600;
60
60
  background: var(--color-highlight-bg);
61
61
  padding: 0.4rem;
62
62
  margin: 16px 0px;
63
63
 
64
- blockquote p {
64
+ article blockquote p {
65
65
  padding: 0;
66
66
  }
67
67
  }
assets/css/workers/posts-index.css CHANGED
@@ -14,7 +14,7 @@
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
 
17
- ul li {
17
+ ul li {
18
18
  display: grid;
19
19
  grid-template-columns: repeat(1, minmax(0, 1fr));
20
20
  gap: 0.4rem;
@@ -28,31 +28,31 @@
28
28
  gap: 0.75rem;
29
29
  }
30
30
 
31
- ul a {
31
+ ul li a {
32
32
  font-size: 1.1rem;
33
33
  color: var(--color-post-link);
34
34
  text-decoration-line: underline;
35
35
  text-underline-offset: 4px;
36
36
  }
37
37
 
38
- time {
38
+ ul li time {
39
39
  font-size: 1.1rem;
40
40
  }
41
41
 
42
- .content {
42
+ ul li .content {
43
43
  display: flex;
44
44
  flex-direction: column;
45
45
  }
46
46
 
47
- .description {
47
+ ul li .description {
48
48
  font-size: 13pt;
49
49
 
50
- .description:hover {
50
+ ul li .description:hover {
51
51
  cursor: default;
52
52
  }
53
53
  }
54
54
 
55
- .date-wrapper {
55
+ ul li .date-wrapper {
56
56
  display: flex;
57
57
  flex: 1;
58
58
  justify-content: flex-end;
packages/workers/assets/src/index.ts CHANGED
@@ -1,26 +1,37 @@
1
1
  const ASSETS: Record<string, { data: string; type: string }> = {
2
- "css/shared.css": { data: ` @view-transition {
2
+ "css/shared.css": { data: `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
3
+ html { -webkit-text-size-adjust: 100%; }
4
+ body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
5
+ img, picture, video, canvas, svg { display: block; max-width: 100%; }
6
+ input, button, textarea, select { font: inherit; }
7
+ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
8
+ a { color: inherit; text-decoration: none; }
9
+ ul, ol { list-style: none; }
10
+ table { border-collapse: collapse; }
11
+
12
+
13
+ @view-transition {
3
14
  navigation: auto; /* enabled! */
4
15
  }
5
16
  :root {
6
- --color-black: hsl(0, 0%, 0%);
17
+ --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));
7
- --color-white: hsl(0, 0%, 100%);
18
+ --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
8
19
  --color-accent: hsl(57.25deg 100% 70%);
9
- --color-body-bg: hsl(0, 0%, 100%);
20
+ --color-body-bg: light-dark(hsl(0, 0%, 100%), hsl(210, 13%, 15%));
10
- --color-box-bg: hsl(0, 0%, 95%);
21
+ --color-box-bg: light-dark(hsl(0, 0%, 95%), hsl(210, 13%, 9%));
11
- --color-text: hsl(0, 0%, 13%);
22
+ --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));
12
- --color-link: hsl(211, 100%, 45%);
23
+ --color-link: light-dark(hsl(211, 100%, 45%), hsl(211, 100%, 60%));
13
- --color-post-link: hsl(0, 0%, 0%);
24
+ --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));
14
- --color-highlight-bg: hsl(183, 80%, 88%);
25
+ --color-highlight-bg: light-dark(hsl(183, 80%, 88%), hsl(183, 80%, 18%));
15
- --color-code-fg: hsl(348, 86%, 43%);
26
+ --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));
16
- --color-code-bg: hsl(0, 0%, 95%);
27
+ --color-code-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
17
- --color-pre-bg: hsl(0, 0%, 95%);
28
+ --color-pre-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
18
- --color-tag: hsl(152, 96%, 35%);
29
+ --color-tag: light-dark(hsl(152, 96%, 35%), hsl(152, 96%, 44%));
19
30
  --btn-light: none;
20
31
  --btn-dark: block;
21
32
 
22
33
  .astro-code,
23
- :root .astro-code span {
34
+ :root .astro-code span {
24
35
  background: var(--color-pre-bg) !important;
25
36
  }
26
37
  }
@@ -29,7 +40,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
29
40
  --btn-light: block;
30
41
  --btn-dark: none;
31
42
 
32
- [data-theme="dark"] .expressive-code .frame pre {
43
+ [data-theme="dark"] .expressive-code .frame pre {
33
44
  background: var(--color-pre-bg) !important;
34
45
  }
35
46
  }
@@ -85,7 +96,9 @@ const ASSETS: Record<string, { data: string; type: string }> = {
85
96
  margin-top: 1rem;
86
97
  margin-bottom: 1rem;
87
98
  padding-bottom: 1em;
99
+ }
100
+
88
- } header {
101
+ header {
89
102
  background: #131618;
90
103
  }
91
104
 
@@ -107,7 +120,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
107
120
  margin-right: 8px;
108
121
 
109
122
  &.active,
110
- .logo:hover {
123
+ .logo:hover {
111
124
  color: var(--color-accent);
112
125
  text-decoration: underline;
113
126
  text-decoration-color: var(--color-accent);
@@ -123,19 +136,19 @@ const ASSETS: Record<string, { data: string; type: string }> = {
123
136
  line-height: 56px;
124
137
  color: white;
125
138
 
126
- .links #astro-color-scheme-switch {
139
+ .links #astro-color-scheme-switch {
127
140
  display: flex;
128
141
  align-items: center;
129
142
  font-size: 1.3rem;
130
143
 
131
- .links #astro-color-scheme-switch button {
144
+ .links #astro-color-scheme-switch button {
132
145
  padding-right: 12px;
133
146
  cursor: pointer;
134
147
  margin-bottom: -2px;
135
148
  }
136
149
  }
137
150
 
138
- a {
151
+ .links a {
139
152
  display: inline-block;
140
153
  text-decoration: none;
141
154
  font-size: 22px;
@@ -145,19 +158,21 @@ const ASSETS: Record<string, { data: string; type: string }> = {
145
158
  padding-left: 12px;
146
159
  padding-right: 12px;
147
160
 
148
- a:last-child {
161
+ .links a:last-child {
149
162
  padding-right: 0px;
150
163
  }
151
164
 
152
165
  &.active,
153
- &:hover {
166
+ .links a:hover {
154
167
  color: var(--color-gray-200);
155
168
  text-decoration: underline;
156
169
  text-decoration-color: var(--color-accent);
157
170
  text-underline-offset: 8px;
158
171
  }
159
172
  }
173
+ }
174
+
160
- } footer {
175
+ footer {
161
176
  background: #131618;
162
177
  }
163
178
 
@@ -200,11 +215,13 @@ const ASSETS: Record<string, { data: string; type: string }> = {
200
215
  text-decoration-line: underline;
201
216
  text-decoration-color: white;
202
217
 
203
- .link:hover {
218
+ .link:hover {
204
219
  color: var(--color-gray-200);
205
220
  text-decoration-color: var(--color-gray-200);
206
221
  }
222
+ }
223
+
207
- } div {
224
+ div {
208
225
  flex: 1;
209
226
  width: min(70ch, 100% - 4rem); /* To make the website more readable */
210
227
  margin-right: auto;
@@ -217,7 +234,25 @@ const ASSETS: Record<string, { data: string; type: string }> = {
217
234
  div {
218
235
  width: 100%;
219
236
  }
237
+ }
238
+
239
+ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
240
+ [data-theme="dark"] {
241
+ --color-body-bg: hsl(210, 13%, 15%);
242
+ --color-box-bg: hsl(210, 13%, 9%);
243
+ --color-text: hsl(210, 17%, 98%);
244
+ --color-link: hsl(211, 100%, 60%);
245
+ --color-post-link: hsl(211, 100%, 60%);
246
+ --color-highlight-bg: hsl(183, 80%, 18%);
247
+ --color-code-fg: hsl(348, 86%, 60%);
248
+ --color-code-bg: hsl(0, 0%, 0%);
249
+ --color-pre-bg: hsl(0, 0%, 0%);
250
+ --color-tag: hsl(152, 96%, 44%);
251
+ --btn-light: block;
252
+ --btn-dark: none;
253
+ color-scheme: dark;
254
+ }
220
- }`, type: "text/css" },
255
+ `, type: "text/css" },
221
256
  "css/workers/home.css": { data: ` .description {
222
257
  font-size: 1.1rem;
223
258
  @media (max-width: 720px) {
@@ -320,11 +355,11 @@ const ASSETS: Record<string, { data: string; type: string }> = {
320
355
  color: var(--color-text);
321
356
  font-size: 0.95rem;
322
357
 
323
- .repo a {
358
+ .repo a {
324
359
  color: var(--color-link);
325
360
  }
326
361
 
327
- h4 {
362
+ .repo h4 {
328
363
  font-size: 1.05rem;
329
364
  font-weight: 500;
330
365
  line-height: 1.2;
@@ -336,14 +371,14 @@ const ASSETS: Record<string, { data: string; type: string }> = {
336
371
  padding: 0;
337
372
  }
338
373
 
339
- .tags {
374
+ .repo .tags {
340
375
  margin-top: 0.5rem;
341
376
  display: flex;
342
377
  flex-wrap: wrap;
343
378
  gap: 0.25rem;
344
379
  }
345
380
 
346
- .tag {
381
+ .repo .tag {
347
382
  color: var(--color-tag);
348
383
  padding: 0.15rem 0.5rem 0.5rem 0rem;
349
384
  border-radius: 0.25rem;
@@ -353,7 +388,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
353
388
  }
354
389
 
355
390
  .interests {
356
- .interests ul {
391
+ .interests ul {
357
392
  display: grid;
358
393
  gap: 0.5rem;
359
394
  grid-template-columns: auto auto auto;
@@ -361,7 +396,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
361
396
  margin-top: 0.5rem;
362
397
  font-size: 1.1rem;
363
398
 
364
- .interests ul li {
399
+ .interests ul li {
365
400
  background-color: var(--color-box-bg);
366
401
  padding: 0.25rem;
367
402
  }
@@ -369,13 +404,13 @@ const ASSETS: Record<string, { data: string; type: string }> = {
369
404
  }
370
405
 
371
406
  .contact {
372
- .contact ul {
407
+ .contact ul {
373
408
  display: grid;
374
409
  gap: 0.5rem;
375
410
  grid-template-columns: auto;
376
411
  margin-top: 0.5rem;
377
412
 
378
- .contact ul li {
413
+ .contact ul li {
379
414
  display: flex;
380
415
  flex-direction: row;
381
416
  align-items: baseline;
@@ -389,11 +424,11 @@ const ASSETS: Record<string, { data: string; type: string }> = {
389
424
  }
390
425
  }
391
426
 
392
- .contact a {
427
+ .contact ul a {
393
428
  color: var(--color-link);
394
429
  }
395
430
 
396
- strong {
431
+ .contact ul strong {
397
432
  font-weight: 500;
398
433
  margin-left: 0.25rem;
399
434
  margin-right: 0.5rem;
@@ -402,12 +437,12 @@ const ASSETS: Record<string, { data: string; type: string }> = {
402
437
  }
403
438
 
404
439
  .tools {
405
- .tools img {
440
+ .tools img {
406
441
  width: 36px;
407
442
  height: 36px;
408
443
  }
409
444
 
410
- ul {
445
+ .tools ul {
411
446
  display: grid;
412
447
  gap: 0.5rem;
413
448
  grid-template-columns: auto auto auto auto;
@@ -418,14 +453,14 @@ const ASSETS: Record<string, { data: string; type: string }> = {
418
453
  grid-template-columns: auto auto auto;
419
454
  }
420
455
 
421
- li {
456
+ .tools ul li {
422
457
  display: flex;
423
458
  align-items: center;
424
459
  background-color: var(--color-box-bg);
425
460
  padding: 0.25rem;
426
461
  font-size: 1rem;
427
462
 
428
- li a {
463
+ .tools ul li a {
429
464
  display: flex;
430
465
  flex: 1;
431
466
  flex-direction: row;
@@ -434,7 +469,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
434
469
  margin-left: 0.25rem;
435
470
  margin-right: 0.25rem;
436
471
 
437
- li a div {
472
+ .tools ul li a div {
438
473
  flex: 1;
439
474
  }
440
475
  }
@@ -448,7 +483,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
448
483
  font-size: 2rem;
449
484
  margin-bottom: 1rem;
450
485
 
451
- h1 a {
486
+ h1 a {
452
487
  margin-left: 0.4rem;
453
488
  margin-top: 0.8rem;
454
489
  color: var(--color-link);
@@ -474,7 +509,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
474
509
  display: flex;
475
510
  flex-direction: column;
476
511
 
477
- ul li {
512
+ ul li {
478
513
  display: grid;
479
514
  grid-template-columns: repeat(1, minmax(0, 1fr));
480
515
  gap: 0.4rem;
@@ -488,31 +523,31 @@ const ASSETS: Record<string, { data: string; type: string }> = {
488
523
  gap: 0.75rem;
489
524
  }
490
525
 
491
- ul a {
526
+ ul li a {
492
527
  font-size: 1.1rem;
493
528
  color: var(--color-post-link);
494
529
  text-decoration-line: underline;
495
530
  text-underline-offset: 4px;
496
531
  }
497
532
 
498
- time {
533
+ ul li time {
499
534
  font-size: 1.1rem;
500
535
  }
501
536
 
502
- .content {
537
+ ul li .content {
503
538
  display: flex;
504
539
  flex-direction: column;
505
540
  }
506
541
 
507
- .description {
542
+ ul li .description {
508
543
  font-size: 13pt;
509
544
 
510
- .description:hover {
545
+ ul li .description:hover {
511
546
  cursor: default;
512
547
  }
513
548
  }
514
549
 
515
- .date-wrapper {
550
+ ul li .date-wrapper {
516
551
  display: flex;
517
552
  flex: 1;
518
553
  justify-content: flex-end;
@@ -525,7 +560,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
525
560
  }
526
561
  }`, type: "text/css" },
527
562
  "css/workers/posts-detail.css": { data: ` article {
528
- article h1 {
563
+ article h1 {
529
564
  text-align: left;
530
565
  font-size: 1.8rem;
531
566
  font-weight: bold;
@@ -534,7 +569,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
534
569
  margin-bottom: 0.1rem;
535
570
  }
536
571
 
537
- time {
572
+ article time {
538
573
  font-size: 1.1rem;
539
574
  text-align: left;
540
575
  color: light-dark(
@@ -543,32 +578,32 @@ const ASSETS: Record<string, { data: string; type: string }> = {
543
578
  );
544
579
  }
545
580
 
546
- hr {
581
+ article hr {
547
582
  margin: 0.5rem 0;
548
583
  border-color: hsl(var(--color-text));
549
584
  }
550
585
 
551
- h2 {
586
+ article h2 {
552
587
  font-size: 1.1rem;
553
588
  font-weight: 500;
554
589
  }
555
590
 
556
- h3 {
591
+ article h3 {
557
592
  font-size: 1.25rem;
558
593
  font-weight: 700;
559
594
  margin-top: 0.5rem;
560
595
  margin-bottom: 0.1rem;
561
596
  }
562
597
 
563
- p {
598
+ article p {
564
599
  font-size: 1.1rem;
565
600
  padding-bottom: 1rem;
566
601
  }
567
602
 
568
603
  p,
569
- li {
604
+ article li {
570
605
  font-size: 1.1rem;
571
- li code {
606
+ article li code {
572
607
  color: var(--color-code-fg) !important;
573
608
  background: var(--color-code-bg) !important;
574
609
  word-wrap: break-word;
@@ -580,14 +615,14 @@ const ASSETS: Record<string, { data: string; type: string }> = {
580
615
  }
581
616
  }
582
617
 
583
- blockquote {
618
+ article blockquote {
584
619
  font-size: 1.2rem;
585
620
  font-weight: 600;
586
621
  background: var(--color-highlight-bg);
587
622
  padding: 0.4rem;
588
623
  margin: 16px 0px;
589
624
 
590
- blockquote p {
625
+ article blockquote p {
591
626
  padding: 0;
592
627
  }
593
628
  }
@@ -636,7 +671,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
636
671
  background: var(--color-box-bg);
637
672
 
638
673
  input,
639
- .new-issue textarea {
674
+ .new-issue textarea {
640
675
  width: 100%;
641
676
  border: 1px solid var(--color-text);
642
677
  background: var(--color-body-bg);
@@ -645,12 +680,12 @@ const ASSETS: Record<string, { data: string; type: string }> = {
645
680
  font: inherit;
646
681
  }
647
682
 
648
- textarea {
683
+ .new-issue textarea {
649
684
  min-height: 6rem;
650
685
  resize: vertical;
651
686
  }
652
687
 
653
- button {
688
+ .new-issue button {
654
689
  border: 1px solid var(--color-text);
655
690
  background: var(--color-box-bg);
656
691
  color: var(--color-link);
@@ -727,7 +762,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
727
762
  background: var(--color-box-bg);
728
763
 
729
764
  textarea,
730
- .comment-form input {
765
+ .comment-form input {
731
766
  width: 100%;
732
767
  border: 1px solid var(--color-text);
733
768
  background: var(--color-body-bg);
@@ -736,7 +771,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
736
771
  font: inherit;
737
772
  }
738
773
 
739
- textarea {
774
+ .comment-form textarea {
740
775
  min-height: 6rem;
741
776
  resize: vertical;
742
777
  }
@@ -905,7 +940,7 @@ const ASSETS: Record<string, { data: string; type: string }> = {
905
940
  font-weight: 600;
906
941
  margin-top: 0.5rem;
907
942
 
908
- h6 span {
943
+ h6 span {
909
944
  font-family: sans-serif;
910
945
  font-weight: 400;
911
946
  font-size: 0.95rem;