website

#astro#js#html#css

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

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


b346b17pyrossh 2026-07-07T17:07:51+05:30
refactor: per-worker CSS stylesheets, each worker loads its own CSS
assets/css/shared.css ADDED
@@ -0,0 +1,219 @@
1
+ @view-transition {
2
+ navigation: auto; /* enabled! */
3
+ }
4
+ :root {
5
+ --color-black: hsl(0, 0%, 0%);
6
+ --color-white: hsl(0, 0%, 100%);
7
+ --color-accent: hsl(57.25deg 100% 70%);
8
+ --color-body-bg: hsl(0, 0%, 100%);
9
+ --color-box-bg: hsl(0, 0%, 95%);
10
+ --color-text: hsl(0, 0%, 13%);
11
+ --color-link: hsl(211, 100%, 45%);
12
+ --color-post-link: hsl(0, 0%, 0%);
13
+ --color-highlight-bg: hsl(183, 80%, 88%);
14
+ --color-code-fg: hsl(348, 86%, 43%);
15
+ --color-code-bg: hsl(0, 0%, 95%);
16
+ --color-pre-bg: hsl(0, 0%, 95%);
17
+ --color-tag: hsl(152, 96%, 35%);
18
+ --btn-light: none;
19
+ --btn-dark: block;
20
+
21
+ .astro-code,
22
+ :root .astro-code span {
23
+ background: var(--color-pre-bg) !important;
24
+ }
25
+ }
26
+
27
+ [data-theme="dark"] {
28
+ --btn-light: block;
29
+ --btn-dark: none;
30
+
31
+ [data-theme="dark"] .expressive-code .frame pre {
32
+ background: var(--color-pre-bg) !important;
33
+ }
34
+ }
35
+
36
+ [data-tooltip] {
37
+ position: relative;
38
+ cursor: help;
39
+ }
40
+
41
+ [data-tooltip]::after {
42
+ position: absolute;
43
+ opacity: 0;
44
+ pointer-events: none;
45
+ content: attr(data-tooltip);
46
+ left: 0;
47
+ top: calc(100% + 10px);
48
+ border-radius: 3px;
49
+ box-shadow: 0 0 1px 1px var(--color-text);
50
+ background-color: var(--color-box-bg);
51
+ z-index: 10;
52
+ padding: 8px;
53
+ width: 300px;
54
+ transform: translateY(-20px);
55
+ transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
56
+ }
57
+
58
+ [data-tooltip]:hover::after {
59
+ opacity: 1;
60
+ transform: translateY(0);
61
+ transition-duration: 300ms;
62
+ }
63
+
64
+ body {
65
+ display: flex;
66
+ flex-direction: column;
67
+ flex: 1;
68
+ background-color: var(--color-body-bg);
69
+ color: var(--color-text);
70
+ font-family: system-ui;
71
+ text-rendering: optimizeLegibility;
72
+ font-variant-ligatures: common-ligatures;
73
+ font-kerning: normal;
74
+ font-size: 1.25rem;
75
+ line-height: 1.5;
76
+ min-height: 100vh;
77
+
78
+ @media (max-width: 720px) {
79
+ font-size: 1.1rem;
80
+ }
81
+ }
82
+
83
+ main {
84
+ margin-top: 1rem;
85
+ margin-bottom: 1rem;
86
+ padding-bottom: 1em;
87
+ } header {
88
+ background: #131618;
89
+ }
90
+
91
+ .safe-area {
92
+ background: #131618;
93
+ position: sticky;
94
+ top: 0;
95
+ padding-top: env(safe-area-inset-top);
96
+ }
97
+
98
+ .logo {
99
+ display: flex;
100
+ font-size: 22px;
101
+ line-height: 56px;
102
+ font-weight: 400;
103
+ margin-bottom: 0;
104
+ float: left;
105
+ color: var(--color-accent);
106
+ margin-right: 8px;
107
+
108
+ &.active,
109
+ .logo:hover {
110
+ color: var(--color-accent);
111
+ text-decoration: underline;
112
+ text-decoration-color: var(--color-accent);
113
+ text-underline-offset: 8px;
114
+ }
115
+ }
116
+
117
+ .links {
118
+ display: flex;
119
+ flex-direction: row;
120
+ float: right;
121
+ font-size: 1.4rem;
122
+ line-height: 56px;
123
+ color: white;
124
+
125
+ .links #astro-color-scheme-switch {
126
+ display: flex;
127
+ align-items: center;
128
+ font-size: 1.3rem;
129
+
130
+ .links #astro-color-scheme-switch button {
131
+ padding-right: 12px;
132
+ cursor: pointer;
133
+ margin-bottom: -2px;
134
+ }
135
+ }
136
+
137
+ a {
138
+ display: inline-block;
139
+ text-decoration: none;
140
+ font-size: 22px;
141
+ line-height: 56px;
142
+ color: white;
143
+ font-weight: 400;
144
+ padding-left: 12px;
145
+ padding-right: 12px;
146
+
147
+ a:last-child {
148
+ padding-right: 0px;
149
+ }
150
+
151
+ &.active,
152
+ &:hover {
153
+ color: var(--color-gray-200);
154
+ text-decoration: underline;
155
+ text-decoration-color: var(--color-accent);
156
+ text-underline-offset: 8px;
157
+ }
158
+ }
159
+ } footer {
160
+ background: #131618;
161
+ }
162
+
163
+ .safe-area {
164
+ background: #131618;
165
+ position: sticky;
166
+ bottom: 0;
167
+ padding-bottom: env(safe-area-inset-bottom);
168
+ }
169
+
170
+ .container {
171
+ display: flex;
172
+ flex-direction: row;
173
+ flex: 1;
174
+ padding: 16px 0px;
175
+ }
176
+
177
+ .spacer {
178
+ flex: 1;
179
+ }
180
+
181
+ .copyright-container {
182
+ display: flex;
183
+ align-items: center;
184
+ justify-content: center;
185
+ margin-left: 0.5rem;
186
+ margin-right: 0.5rem;
187
+ color: var(--color-white);
188
+ font-size: 1rem;
189
+ }
190
+
191
+ .link {
192
+ font-size: 1rem;
193
+ line-height: 1.5rem;
194
+ margin-left: 0.5rem;
195
+ color: var(--color-white);
196
+ font-weight: 500;
197
+ text-underline-offset: 2px;
198
+ text-decoration-thickness: 2px;
199
+ text-decoration-line: underline;
200
+ text-decoration-color: white;
201
+
202
+ .link:hover {
203
+ color: var(--color-gray-200);
204
+ text-decoration-color: var(--color-gray-200);
205
+ }
206
+ } div {
207
+ flex: 1;
208
+ width: min(70ch, 100% - 4rem); /* To make the website more readable */
209
+ margin-right: auto;
210
+ margin-left: auto;
211
+ padding-left: 1em;
212
+ padding-right: 1em;
213
+ }
214
+
215
+ @media (max-width: 720px) {
216
+ div {
217
+ width: 100%;
218
+ }
219
+ }
assets/css/shared/base.css DELETED
@@ -1,87 +0,0 @@
1
- @view-transition {
2
- navigation: auto; /* enabled! */
3
- }
4
- :root {
5
- --color-black: hsl(0, 0%, 0%);
6
- --color-white: hsl(0, 0%, 100%);
7
- --color-accent: hsl(57.25deg 100% 70%);
8
- --color-body-bg: hsl(0, 0%, 100%);
9
- --color-box-bg: hsl(0, 0%, 95%);
10
- --color-text: hsl(0, 0%, 13%);
11
- --color-link: hsl(211, 100%, 45%);
12
- --color-post-link: hsl(0, 0%, 0%);
13
- --color-highlight-bg: hsl(183, 80%, 88%);
14
- --color-code-fg: hsl(348, 86%, 43%);
15
- --color-code-bg: hsl(0, 0%, 95%);
16
- --color-pre-bg: hsl(0, 0%, 95%);
17
- --color-tag: hsl(152, 96%, 35%);
18
- --btn-light: none;
19
- --btn-dark: block;
20
-
21
- .astro-code,
22
- :root .astro-code span {
23
- background: var(--color-pre-bg) !important;
24
- }
25
- }
26
-
27
- [data-theme="dark"] {
28
- --btn-light: block;
29
- --btn-dark: none;
30
-
31
- [data-theme="dark"] .expressive-code .frame pre {
32
- background: var(--color-pre-bg) !important;
33
- }
34
- }
35
-
36
- [data-tooltip] {
37
- position: relative;
38
- cursor: help;
39
- }
40
-
41
- [data-tooltip]::after {
42
- position: absolute;
43
- opacity: 0;
44
- pointer-events: none;
45
- content: attr(data-tooltip);
46
- left: 0;
47
- top: calc(100% + 10px);
48
- border-radius: 3px;
49
- box-shadow: 0 0 1px 1px var(--color-text);
50
- background-color: var(--color-box-bg);
51
- z-index: 10;
52
- padding: 8px;
53
- width: 300px;
54
- transform: translateY(-20px);
55
- transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
56
- }
57
-
58
- [data-tooltip]:hover::after {
59
- opacity: 1;
60
- transform: translateY(0);
61
- transition-duration: 300ms;
62
- }
63
-
64
- body {
65
- display: flex;
66
- flex-direction: column;
67
- flex: 1;
68
- background-color: var(--color-body-bg);
69
- color: var(--color-text);
70
- font-family: system-ui;
71
- text-rendering: optimizeLegibility;
72
- font-variant-ligatures: common-ligatures;
73
- font-kerning: normal;
74
- font-size: 1.25rem;
75
- line-height: 1.5;
76
- min-height: 100vh;
77
-
78
- @media (max-width: 720px) {
79
- font-size: 1.1rem;
80
- }
81
- }
82
-
83
- main {
84
- margin-top: 1rem;
85
- margin-bottom: 1rem;
86
- padding-bottom: 1em;
87
- }
assets/css/shared/baselayout.css DELETED
@@ -1,87 +0,0 @@
1
- @view-transition {
2
- navigation: auto; /* enabled! */
3
- }
4
- :root {
5
- --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));
6
- --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));
7
- --color-accent: hsl(57.25deg 100% 70%);
8
- --color-body-bg: light-dark(hsl(0, 0%, 100%), hsl(210, 13%, 15%));
9
- --color-box-bg: light-dark(hsl(0, 0%, 95%), hsl(210, 13%, 9%));
10
- --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));
11
- --color-link: light-dark(hsl(211, 100%, 45%), hsl(211, 100%, 60%));
12
- --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));
13
- --color-highlight-bg: light-dark(hsl(183, 80%, 88%), hsl(183, 80%, 18%));
14
- --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));
15
- --color-code-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
16
- --color-pre-bg: light-dark(hsl(0, 0%, 95%), hsl(0, 0%, 0%));
17
- --color-tag: light-dark(hsl(152, 96%, 35%), hsl(152, 96%, 44%));
18
- --btn-light: none;
19
- --btn-dark: block;
20
-
21
- .astro-code,
22
- :root .astro-code span {
23
- background: var(--color-pre-bg) !important;
24
- }
25
- }
26
-
27
- [data-theme="dark"] {
28
- --btn-light: block;
29
- --btn-dark: none;
30
-
31
- [data-theme="dark"] .expressive-code .frame pre {
32
- background: var(--color-pre-bg) !important;
33
- }
34
- }
35
-
36
- [data-tooltip] {
37
- position: relative;
38
- cursor: help;
39
- }
40
-
41
- [data-tooltip]::after {
42
- position: absolute;
43
- opacity: 0;
44
- pointer-events: none;
45
- content: attr(data-tooltip);
46
- left: 0;
47
- top: calc(100% + 10px);
48
- border-radius: 3px;
49
- box-shadow: 0 0 1px 1px var(--color-text);
50
- background-color: var(--color-box-bg);
51
- z-index: 10;
52
- padding: 8px;
53
- width: 300px;
54
- transform: translateY(-20px);
55
- transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
56
- }
57
-
58
- [data-tooltip]:hover::after {
59
- opacity: 1;
60
- transform: translateY(0);
61
- transition-duration: 300ms;
62
- }
63
-
64
- body {
65
- display: flex;
66
- flex-direction: column;
67
- flex: 1;
68
- background-color: var(--color-body-bg);
69
- color: var(--color-text);
70
- font-family: system-ui;
71
- text-rendering: optimizeLegibility;
72
- font-variant-ligatures: common-ligatures;
73
- font-kerning: normal;
74
- font-size: 1.25rem;
75
- line-height: 1.5;
76
- min-height: 100vh;
77
-
78
- @media (max-width: 720px) {
79
- font-size: 1.1rem;
80
- }
81
- }
82
-
83
- main {
84
- margin-top: 1rem;
85
- margin-bottom: 1rem;
86
- padding-bottom: 1em;
87
- }
assets/css/shared/file-layout.css DELETED
@@ -1,35 +0,0 @@
1
- .nav {
2
- display: flex;
3
- align-items: center;
4
- margin-bottom: 0.5rem;
5
-
6
- @media (max-width: 720px) {
7
- margin-top: 0.5rem;
8
- }
9
-
10
- div {
11
- padding-right: 0.5rem;
12
- }
13
-
14
- a {
15
- font-size: 1rem;
16
- font-weight: 500;
17
- padding-right: 0.5rem;
18
- cursor: pointer;
19
- color: var(--color-link);
20
-
21
- a[aria-current="true"] {
22
- text-underline-offset: 4px;
23
- text-decoration: underline;
24
- }
25
- }
26
- }
27
-
28
- .title {
29
- display: flex;
30
- align-items: center;
31
- margin-top: 0.75rem;
32
- margin-bottom: 0.5rem;
33
- font-size: 1.1rem;
34
- font-weight: 500;
35
- }
assets/css/shared/filelayout.css DELETED
@@ -1,35 +0,0 @@
1
- .nav {
2
- display: flex;
3
- align-items: center;
4
- margin-bottom: 0.5rem;
5
-
6
- @media (max-width: 720px) {
7
- margin-top: 0.5rem;
8
- }
9
-
10
- div {
11
- padding-right: 0.5rem;
12
- }
13
-
14
- a {
15
- font-size: 1rem;
16
- font-weight: 500;
17
- padding-right: 0.5rem;
18
- cursor: pointer;
19
- color: var(--color-link);
20
-
21
- a[aria-current="true"] {
22
- text-underline-offset: 4px;
23
- text-decoration: underline;
24
- }
25
- }
26
- }
27
-
28
- .title {
29
- display: flex;
30
- align-items: center;
31
- margin-top: 0.75rem;
32
- margin-bottom: 0.5rem;
33
- font-size: 1.1rem;
34
- font-weight: 500;
35
- }
assets/css/shared/footer.css DELETED
@@ -1,48 +0,0 @@
1
- footer {
2
- background: #131618;
3
- }
4
-
5
- .safe-area {
6
- background: #131618;
7
- position: sticky;
8
- bottom: 0;
9
- padding-bottom: env(safe-area-inset-bottom);
10
- }
11
-
12
- .container {
13
- display: flex;
14
- flex-direction: row;
15
- flex: 1;
16
- padding: 16px 0px;
17
- }
18
-
19
- .spacer {
20
- flex: 1;
21
- }
22
-
23
- .copyright-container {
24
- display: flex;
25
- align-items: center;
26
- justify-content: center;
27
- margin-left: 0.5rem;
28
- margin-right: 0.5rem;
29
- color: var(--color-white);
30
- font-size: 1rem;
31
- }
32
-
33
- .link {
34
- font-size: 1rem;
35
- line-height: 1.5rem;
36
- margin-left: 0.5rem;
37
- color: var(--color-white);
38
- font-weight: 500;
39
- text-underline-offset: 2px;
40
- text-decoration-thickness: 2px;
41
- text-decoration-line: underline;
42
- text-decoration-color: white;
43
-
44
- .link:hover {
45
- color: var(--color-gray-200);
46
- text-decoration-color: var(--color-gray-200);
47
- }
48
- }
assets/css/shared/header.css DELETED
@@ -1,73 +0,0 @@
1
- header {
2
- background: #131618;
3
- }
4
-
5
- .safe-area {
6
- background: #131618;
7
- position: sticky;
8
- top: 0;
9
- padding-top: env(safe-area-inset-top);
10
- }
11
-
12
- .logo {
13
- display: flex;
14
- font-size: 22px;
15
- line-height: 56px;
16
- font-weight: 400;
17
- margin-bottom: 0;
18
- float: left;
19
- color: var(--color-accent);
20
- margin-right: 8px;
21
-
22
- &.active,
23
- .logo:hover {
24
- color: var(--color-accent);
25
- text-decoration: underline;
26
- text-decoration-color: var(--color-accent);
27
- text-underline-offset: 8px;
28
- }
29
- }
30
-
31
- .links {
32
- display: flex;
33
- flex-direction: row;
34
- float: right;
35
- font-size: 1.4rem;
36
- line-height: 56px;
37
- color: white;
38
-
39
- .links #astro-color-scheme-switch {
40
- display: flex;
41
- align-items: center;
42
- font-size: 1.3rem;
43
-
44
- .links #astro-color-scheme-switch button {
45
- padding-right: 12px;
46
- cursor: pointer;
47
- margin-bottom: -2px;
48
- }
49
- }
50
-
51
- a {
52
- display: inline-block;
53
- text-decoration: none;
54
- font-size: 22px;
55
- line-height: 56px;
56
- color: white;
57
- font-weight: 400;
58
- padding-left: 12px;
59
- padding-right: 12px;
60
-
61
- a:last-child {
62
- padding-right: 0px;
63
- }
64
-
65
- &.active,
66
- &:hover {
67
- color: var(--color-gray-200);
68
- text-decoration: underline;
69
- text-decoration-color: var(--color-accent);
70
- text-underline-offset: 8px;
71
- }
72
- }
73
- }
assets/css/shared/repo-layout.css DELETED
@@ -1,121 +0,0 @@
1
- .repo {
2
- text-overflow: ellipsis;
3
- overflow: hidden;
4
- padding: 0.5rem;
5
- background: var(--color-box-bg);
6
- color: var(--color-text);
7
- font-size: 0.95rem;
8
-
9
- .repo a {
10
- color: var(--color-link);
11
- }
12
- }
13
-
14
- .header {
15
- display: flex;
16
- flex-direction: row;
17
- align-items: baseline;
18
-
19
- @media (max-width: 720px) {
20
- flex-direction: column;
21
- align-items: start;
22
- }
23
- }
24
-
25
- h4 {
26
- font-size: 1.05rem;
27
- font-weight: 500;
28
- line-height: 1.2;
29
- border-bottom: 1px solid #495057;
30
- text-overflow: ellipsis;
31
- white-space: nowrap;
32
- overflow: hidden;
33
- margin-bottom: 0;
34
- padding: 0;
35
- }
36
-
37
- .tags {
38
- margin-top: 0.5rem;
39
- display: flex;
40
- flex-wrap: wrap;
41
- gap: 0.25rem;
42
- }
43
-
44
- .tag {
45
- color: var(--color-tag);
46
- padding: 0.15rem 0.5rem 0.5rem 0rem;
47
- border-radius: 0.25rem;
48
- font-size: 0.95rem;
49
- font-weight: 500;
50
- }
51
-
52
- h1 {
53
- font-size: 1.6rem;
54
- font-weight: 500;
55
- line-height: 1;
56
- margin-bottom: 0.1rem;
57
- flex: 1;
58
-
59
- h1 a {
60
- color: var(--color-link);
61
- }
62
- }
63
-
64
- h2 {
65
- display: flex;
66
- flex: 1;
67
- padding-top: 0.3rem;
68
- font-size: 0.95rem;
69
- }
70
-
71
- h3 {
72
- font-size: 1rem;
73
- font-weight: 500;
74
-
75
- h3 a {
76
- /* color: var(--color-tag) !important; */
77
- }
78
-
79
- span {
80
- font-size: 0.8rem;
81
- }
82
-
83
- svg {
84
- display: inline;
85
- /* color: var(--color-code-fg); */
86
- /* vertical-align: sub; */
87
- margin-bottom: 4px;
88
- }
89
- }
90
-
91
- hr {
92
- margin-top: 0.5rem;
93
- border-color: var(--color-text);
94
- }
95
-
96
- .nav {
97
- display: flex;
98
- align-items: center;
99
- margin-top: 0.5rem;
100
-
101
- @media (max-width: 720px) {
102
- margin-top: 0.5rem;
103
- }
104
-
105
- div {
106
- padding-right: 0.5rem;
107
- }
108
-
109
- a {
110
- font-size: 1rem;
111
- font-weight: 500;
112
- padding-right: 0.5rem;
113
- cursor: pointer;
114
- color: var(--color-link);
115
-
116
- a[aria-current="true"] {
117
- text-underline-offset: 4px;
118
- text-decoration: underline;
119
- }
120
- }
121
- }
assets/css/shared/repolayout.css DELETED
@@ -1,121 +0,0 @@
1
- .repo {
2
- text-overflow: ellipsis;
3
- overflow: hidden;
4
- padding: 0.5rem;
5
- background: var(--color-box-bg);
6
- color: var(--color-text);
7
- font-size: 0.95rem;
8
-
9
- .repo a {
10
- color: var(--color-link);
11
- }
12
- }
13
-
14
- .header {
15
- display: flex;
16
- flex-direction: row;
17
- align-items: baseline;
18
-
19
- @media (max-width: 720px) {
20
- flex-direction: column;
21
- align-items: start;
22
- }
23
- }
24
-
25
- h4 {
26
- font-size: 1.05rem;
27
- font-weight: 500;
28
- line-height: 1.2;
29
- border-bottom: 1px solid #495057;
30
- text-overflow: ellipsis;
31
- white-space: nowrap;
32
- overflow: hidden;
33
- margin-bottom: 0;
34
- padding: 0;
35
- }
36
-
37
- .tags {
38
- margin-top: 0.5rem;
39
- display: flex;
40
- flex-wrap: wrap;
41
- gap: 0.25rem;
42
- }
43
-
44
- .tag {
45
- color: var(--color-tag);
46
- padding: 0.15rem 0.5rem 0.5rem 0rem;
47
- border-radius: 0.25rem;
48
- font-size: 0.95rem;
49
- font-weight: 500;
50
- }
51
-
52
- h1 {
53
- font-size: 1.6rem;
54
- font-weight: 500;
55
- line-height: 1;
56
- margin-bottom: 0.1rem;
57
- flex: 1;
58
-
59
- h1 a {
60
- color: var(--color-link);
61
- }
62
- }
63
-
64
- h2 {
65
- display: flex;
66
- flex: 1;
67
- padding-top: 0.3rem;
68
- font-size: 0.95rem;
69
- }
70
-
71
- h3 {
72
- font-size: 1rem;
73
- font-weight: 500;
74
-
75
- h3 a {
76
- /* color: var(--color-tag) !important; */
77
- }
78
-
79
- span {
80
- font-size: 0.8rem;
81
- }
82
-
83
- svg {
84
- display: inline;
85
- /* color: var(--color-code-fg); */
86
- /* vertical-align: sub; */
87
- margin-bottom: 4px;
88
- }
89
- }
90
-
91
- hr {
92
- margin-top: 0.5rem;
93
- border-color: var(--color-text);
94
- }
95
-
96
- .nav {
97
- display: flex;
98
- align-items: center;
99
- margin-top: 0.5rem;
100
-
101
- @media (max-width: 720px) {
102
- margin-top: 0.5rem;
103
- }
104
-
105
- div {
106
- padding-right: 0.5rem;
107
- }
108
-
109
- a {
110
- font-size: 1rem;
111
- font-weight: 500;
112
- padding-right: 0.5rem;
113
- cursor: pointer;
114
- color: var(--color-link);
115
-
116
- a[aria-current="true"] {
117
- text-underline-offset: 4px;
118
- text-decoration: underline;
119
- }
120
- }
121
- }
assets/css/shared/wrapper.css DELETED
@@ -1,14 +0,0 @@
1
- div {
2
- flex: 1;
3
- width: min(70ch, 100% - 4rem); /* To make the website more readable */
4
- margin-right: auto;
5
- margin-left: auto;
6
- padding-left: 1em;
7
- padding-right: 1em;
8
- }
9
-
10
- @media (max-width: 720px) {
11
- div {
12
- width: 100%;
13
- }
14
- }
assets/css/styles.css DELETED
@@ -1,1155 +0,0 @@
1
- /* Reset */
2
- *, *::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
- /* wrapper */
14
- div {
15
- flex: 1;
16
- width: min(70ch, 100% - 4rem); /* To make the website more readable */
17
- margin-right: auto;
18
- margin-left: auto;
19
- padding-left: 1em;
20
- padding-right: 1em;
21
- }
22
-
23
- @media (max-width: 720px) {
24
- div {
25
- width: 100%;
26
- }
27
- }
28
-
29
- /* header */
30
- header {
31
- background: #131618;
32
- }
33
-
34
- .safe-area {
35
- background: #131618;
36
- position: sticky;
37
- top: 0;
38
- padding-top: env(safe-area-inset-top);
39
- }
40
-
41
- .logo {
42
- display: flex;
43
- font-size: 22px;
44
- line-height: 56px;
45
- font-weight: 400;
46
- margin-bottom: 0;
47
- float: left;
48
- color: var(--color-accent);
49
- margin-right: 8px;
50
-
51
- &.active,
52
- .logo:hover {
53
- color: var(--color-accent);
54
- text-decoration: underline;
55
- text-decoration-color: var(--color-accent);
56
- text-underline-offset: 8px;
57
- }
58
- }
59
-
60
- .links {
61
- display: flex;
62
- flex-direction: row;
63
- float: right;
64
- font-size: 1.4rem;
65
- line-height: 56px;
66
- color: white;
67
-
68
- .links #astro-color-scheme-switch {
69
- display: flex;
70
- align-items: center;
71
- font-size: 1.3rem;
72
-
73
- .links #astro-color-scheme-switch button {
74
- padding-right: 12px;
75
- cursor: pointer;
76
- margin-bottom: -2px;
77
- }
78
- }
79
-
80
- a {
81
- display: inline-block;
82
- text-decoration: none;
83
- font-size: 22px;
84
- line-height: 56px;
85
- color: white;
86
- font-weight: 400;
87
- padding-left: 12px;
88
- padding-right: 12px;
89
-
90
- a:last-child {
91
- padding-right: 0px;
92
- }
93
-
94
- &.active,
95
- &:hover {
96
- color: var(--color-gray-200);
97
- text-decoration: underline;
98
- text-decoration-color: var(--color-accent);
99
- text-underline-offset: 8px;
100
- }
101
- }
102
- }
103
-
104
- /* footer */
105
- footer {
106
- background: #131618;
107
- }
108
-
109
- .safe-area {
110
- background: #131618;
111
- position: sticky;
112
- bottom: 0;
113
- padding-bottom: env(safe-area-inset-bottom);
114
- }
115
-
116
- .container {
117
- display: flex;
118
- flex-direction: row;
119
- flex: 1;
120
- padding: 16px 0px;
121
- }
122
-
123
- .spacer {
124
- flex: 1;
125
- }
126
-
127
- .copyright-container {
128
- display: flex;
129
- align-items: center;
130
- justify-content: center;
131
- margin-left: 0.5rem;
132
- margin-right: 0.5rem;
133
- color: var(--color-white);
134
- font-size: 1rem;
135
- }
136
-
137
- .link {
138
- font-size: 1rem;
139
- line-height: 1.5rem;
140
- margin-left: 0.5rem;
141
- color: var(--color-white);
142
- font-weight: 500;
143
- text-underline-offset: 2px;
144
- text-decoration-thickness: 2px;
145
- text-decoration-line: underline;
146
- text-decoration-color: white;
147
-
148
- .link:hover {
149
- color: var(--color-gray-200);
150
- text-decoration-color: var(--color-gray-200);
151
- }
152
- }
153
-
154
- /* baselayout */
155
- @view-transition {
156
- navigation: auto; /* enabled! */
157
- }
158
- :root {
159
- --color-black: hsl(0, 0%, 0%);
160
- --color-white: hsl(0, 0%, 100%);
161
- --color-accent: hsl(57.25deg 100% 70%);
162
- --color-body-bg: hsl(0, 0%, 100%);
163
- --color-box-bg: hsl(0, 0%, 95%);
164
- --color-text: hsl(0, 0%, 13%);
165
- --color-link: hsl(211, 100%, 45%);
166
- --color-post-link: hsl(0, 0%, 0%);
167
- --color-highlight-bg: hsl(183, 80%, 88%);
168
- --color-code-fg: hsl(348, 86%, 43%);
169
- --color-code-bg: hsl(0, 0%, 95%);
170
- --color-pre-bg: hsl(0, 0%, 95%);
171
- --color-tag: hsl(152, 96%, 35%);
172
- --btn-light: none;
173
- --btn-dark: block;
174
-
175
- .astro-code,
176
- :root .astro-code span {
177
- background: var(--color-pre-bg) !important;
178
- }
179
- }
180
-
181
- [data-theme="dark"] {
182
- --btn-light: block;
183
- --btn-dark: none;
184
-
185
- [data-theme="dark"] .expressive-code .frame pre {
186
- background: var(--color-pre-bg) !important;
187
- }
188
- }
189
-
190
- [data-tooltip] {
191
- position: relative;
192
- cursor: help;
193
- }
194
-
195
- [data-tooltip]::after {
196
- position: absolute;
197
- opacity: 0;
198
- pointer-events: none;
199
- content: attr(data-tooltip);
200
- left: 0;
201
- top: calc(100% + 10px);
202
- border-radius: 3px;
203
- box-shadow: 0 0 1px 1px var(--color-text);
204
- background-color: var(--color-box-bg);
205
- z-index: 10;
206
- padding: 8px;
207
- width: 300px;
208
- transform: translateY(-20px);
209
- transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
210
- }
211
-
212
- [data-tooltip]:hover::after {
213
- opacity: 1;
214
- transform: translateY(0);
215
- transition-duration: 300ms;
216
- }
217
-
218
- body {
219
- display: flex;
220
- flex-direction: column;
221
- flex: 1;
222
- background-color: var(--color-body-bg);
223
- color: var(--color-text);
224
- font-family: system-ui;
225
- text-rendering: optimizeLegibility;
226
- font-variant-ligatures: common-ligatures;
227
- font-kerning: normal;
228
- font-size: 1.25rem;
229
- line-height: 1.5;
230
- min-height: 100vh;
231
-
232
- @media (max-width: 720px) {
233
- font-size: 1.1rem;
234
- }
235
- }
236
-
237
- main {
238
- margin-top: 1rem;
239
- margin-bottom: 1rem;
240
- padding-bottom: 1em;
241
- }
242
-
243
- /* repolayout */
244
- .repo {
245
- text-overflow: ellipsis;
246
- overflow: hidden;
247
- padding: 0.5rem;
248
- background: var(--color-box-bg);
249
- color: var(--color-text);
250
- font-size: 0.95rem;
251
-
252
- .repo a {
253
- color: var(--color-link);
254
- }
255
- }
256
-
257
- .header {
258
- display: flex;
259
- flex-direction: row;
260
- align-items: baseline;
261
-
262
- @media (max-width: 720px) {
263
- flex-direction: column;
264
- align-items: start;
265
- }
266
- }
267
-
268
- h4 {
269
- font-size: 1.05rem;
270
- font-weight: 500;
271
- line-height: 1.2;
272
- border-bottom: 1px solid #495057;
273
- text-overflow: ellipsis;
274
- white-space: nowrap;
275
- overflow: hidden;
276
- margin-bottom: 0;
277
- padding: 0;
278
- }
279
-
280
- .tags {
281
- margin-top: 0.5rem;
282
- display: flex;
283
- flex-wrap: wrap;
284
- gap: 0.25rem;
285
- }
286
-
287
- .tag {
288
- color: var(--color-tag);
289
- padding: 0.15rem 0.5rem 0.5rem 0rem;
290
- border-radius: 0.25rem;
291
- font-size: 0.95rem;
292
- font-weight: 500;
293
- }
294
-
295
- h1 {
296
- font-size: 1.6rem;
297
- font-weight: 500;
298
- line-height: 1;
299
- margin-bottom: 0.1rem;
300
- flex: 1;
301
-
302
- h1 a {
303
- color: var(--color-link);
304
- }
305
- }
306
-
307
- h2 {
308
- display: flex;
309
- flex: 1;
310
- padding-top: 0.3rem;
311
- font-size: 0.95rem;
312
- }
313
-
314
- h3 {
315
- font-size: 1rem;
316
- font-weight: 500;
317
-
318
- h3 a {
319
- /* color: var(--color-tag) !important; */
320
- }
321
-
322
- span {
323
- font-size: 0.8rem;
324
- }
325
-
326
- svg {
327
- display: inline;
328
- /* color: var(--color-code-fg); */
329
- /* vertical-align: sub; */
330
- margin-bottom: 4px;
331
- }
332
- }
333
-
334
- hr {
335
- margin-top: 0.5rem;
336
- border-color: var(--color-text);
337
- }
338
-
339
- .nav {
340
- display: flex;
341
- align-items: center;
342
- margin-top: 0.5rem;
343
-
344
- @media (max-width: 720px) {
345
- margin-top: 0.5rem;
346
- }
347
-
348
- div {
349
- padding-right: 0.5rem;
350
- }
351
-
352
- a {
353
- font-size: 1rem;
354
- font-weight: 500;
355
- padding-right: 0.5rem;
356
- cursor: pointer;
357
- color: var(--color-link);
358
-
359
- a[aria-current="true"] {
360
- text-underline-offset: 4px;
361
- text-decoration: underline;
362
- }
363
- }
364
- }
365
-
366
- /* filelayout */
367
- .nav {
368
- display: flex;
369
- align-items: center;
370
- margin-bottom: 0.5rem;
371
-
372
- @media (max-width: 720px) {
373
- margin-top: 0.5rem;
374
- }
375
-
376
- div {
377
- padding-right: 0.5rem;
378
- }
379
-
380
- a {
381
- font-size: 1rem;
382
- font-weight: 500;
383
- padding-right: 0.5rem;
384
- cursor: pointer;
385
- color: var(--color-link);
386
-
387
- a[aria-current="true"] {
388
- text-underline-offset: 4px;
389
- text-decoration: underline;
390
- }
391
- }
392
- }
393
-
394
- .title {
395
- display: flex;
396
- align-items: center;
397
- margin-top: 0.75rem;
398
- margin-bottom: 0.5rem;
399
- font-size: 1.1rem;
400
- font-weight: 500;
401
- }
402
-
403
-
404
- /* index */
405
- .description {
406
- font-size: 1.1rem;
407
- @media (max-width: 720px) {
408
- font-size: 1rem;
409
- }
410
- }
411
-
412
- h2 {
413
- font-size: 1.4rem;
414
- font-weight: 600;
415
- @media (max-width: 720px) {
416
- font-size: 1.15rem;
417
- }
418
- }
419
-
420
- section {
421
- display: flex;
422
- flex-direction: column;
423
- margin-top: 1.5rem;
424
- margin-bottom: 1rem;
425
-
426
- @media (max-width: 720px) {
427
- margin-top: 1.5rem;
428
- margin-bottom: 0rem;
429
- }
430
- }
431
-
432
- .rounded-md {
433
- border-radius: 0.375rem;
434
- }
435
-
436
- .repos {
437
- display: grid;
438
- grid-template-columns: auto auto;
439
- gap: 1rem;
440
- margin-top: 0.5rem;
441
-
442
- @media (max-width: 720px) {
443
- gap: 1rem;
444
- grid-template-columns: auto;
445
- }
446
- }
447
-
448
- .pageContainer {
449
- margin-left: auto;
450
- margin-right: auto;
451
- margin-bottom: 2.5rem;
452
- /* mb-10 */
453
- }
454
-
455
- .title {
456
- font-size: 1.875rem;
457
- line-height: 2.25rem;
458
- font-weight: 700;
459
- margin-bottom: 1rem;
460
- @media (max-width: 720px) {
461
- font-size: 1.6rem;
462
- }
463
- }
464
-
465
- .firstSection {
466
- display: flex;
467
- flex-direction: column;
468
- }
469
-
470
- .firstPara {
471
- display: flex;
472
- flex-direction: row;
473
- }
474
-
475
- .linkUnderline {
476
- text-decoration-line: underline;
477
- }
478
-
479
- .gridContainer {
480
- display: grid;
481
- grid-template-columns: repeat(1, minmax(0, 1fr));
482
- gap: 1rem;
483
-
484
- @media (max-width: 720px) {
485
- gap: 0rem;
486
- }
487
- }
488
-
489
- @media (min-width: 640px) {
490
- /* sm: */
491
- .gridContainer {
492
- grid-template-columns: repeat(2, minmax(0, 1fr));
493
- /* sm:grid-cols-2 */
494
- gap: 2rem;
495
- /* sm:gap-8 */
496
- }
497
- }
498
-
499
- .repo {
500
- text-overflow: ellipsis;
501
- overflow: hidden;
502
- padding: 0.5rem;
503
- background: var(--color-box-bg);
504
- color: var(--color-text);
505
- font-size: 0.95rem;
506
-
507
- .repo a {
508
- color: var(--color-link);
509
- }
510
-
511
- h4 {
512
- font-size: 1.05rem;
513
- font-weight: 500;
514
- line-height: 1.2;
515
- border-bottom: 1px solid #495057;
516
- text-overflow: ellipsis;
517
- white-space: nowrap;
518
- overflow: hidden;
519
- margin-bottom: 0;
520
- padding: 0;
521
- }
522
-
523
- .tags {
524
- margin-top: 0.5rem;
525
- display: flex;
526
- flex-wrap: wrap;
527
- gap: 0.25rem;
528
- }
529
-
530
- .tag {
531
- color: var(--color-tag);
532
- padding: 0.15rem 0.5rem 0.5rem 0rem;
533
- border-radius: 0.25rem;
534
- font-size: 0.95rem;
535
- font-weight: 500;
536
- }
537
- }
538
-
539
- .interests {
540
- .interests ul {
541
- display: grid;
542
- gap: 0.5rem;
543
- grid-template-columns: auto auto auto;
544
- text-align: center;
545
- margin-top: 0.5rem;
546
- font-size: 1.1rem;
547
-
548
- .interests ul li {
549
- background-color: var(--color-box-bg);
550
- padding: 0.25rem;
551
- }
552
- }
553
- }
554
-
555
- .contact {
556
- .contact ul {
557
- display: grid;
558
- gap: 0.5rem;
559
- grid-template-columns: auto;
560
- margin-top: 0.5rem;
561
-
562
- .contact ul li {
563
- display: flex;
564
- flex-direction: row;
565
- align-items: baseline;
566
- padding: 0.25rem;
567
- background-color: var(--color-box-bg);
568
- font-size: 1.1rem;
569
-
570
- @media (max-width: 720px) {
571
- font-size: 1rem;
572
- flex-direction: column;
573
- }
574
- }
575
-
576
- .contact a {
577
- color: var(--color-link);
578
- }
579
-
580
- strong {
581
- font-weight: 500;
582
- margin-left: 0.25rem;
583
- margin-right: 0.5rem;
584
- }
585
- }
586
- }
587
-
588
- .tools {
589
- .tools img {
590
- width: 36px;
591
- height: 36px;
592
- }
593
-
594
- ul {
595
- display: grid;
596
- gap: 0.5rem;
597
- grid-template-columns: auto auto auto auto;
598
- text-align: center;
599
- margin-top: 0.5rem;
600
-
601
- @media (max-width: 720px) {
602
- grid-template-columns: auto auto auto;
603
- }
604
-
605
- li {
606
- display: flex;
607
- align-items: center;
608
- background-color: var(--color-box-bg);
609
- padding: 0.25rem;
610
- font-size: 1rem;
611
-
612
- li a {
613
- display: flex;
614
- flex: 1;
615
- flex-direction: row;
616
- align-items: center;
617
- text-align: left;
618
- margin-left: 0.25rem;
619
- margin-right: 0.25rem;
620
-
621
- li a div {
622
- flex: 1;
623
- }
624
- }
625
- }
626
- }
627
- }
628
-
629
- /* cv */
630
- h1 {
631
- display: flex;
632
- align-items: flex-start;
633
- font-weight: 800;
634
- font-size: 2rem;
635
- margin-bottom: 1rem;
636
-
637
- h1 a {
638
- margin-left: 0.4rem;
639
- margin-top: 0.8rem;
640
- color: var(--color-link);
641
- }
642
- }
643
-
644
- .pdf {
645
- border: 1px solid black;
646
- }
647
-
648
- /* posts-index */
649
- h1 {
650
- display: flex;
651
- align-items: flex-start;
652
- font-weight: 800;
653
- font-size: 2rem;
654
- }
655
-
656
- .container {
657
- display: flex;
658
- float: left;
659
- }
660
-
661
- ul {
662
- display: flex;
663
- flex-direction: column;
664
-
665
- ul li {
666
- display: grid;
667
- grid-template-columns: repeat(1, minmax(0, 1fr));
668
- gap: 0.4rem;
669
- justify-items: start;
670
- align-items: end;
671
- margin-top: 1.25rem;
672
- line-height: 1.5rem;
673
-
674
- @media (min-width: 640px) {
675
- grid-template-columns: repeat(2, minmax(0, 1fr));
676
- gap: 0.75rem;
677
- }
678
-
679
- ul a {
680
- font-size: 1.1rem;
681
- color: var(--color-post-link);
682
- text-decoration-line: underline;
683
- text-underline-offset: 4px;
684
- }
685
-
686
- time {
687
- font-size: 1.1rem;
688
- }
689
-
690
- .content {
691
- display: flex;
692
- flex-direction: column;
693
- }
694
-
695
- .description {
696
- font-size: 13pt;
697
-
698
- .description:hover {
699
- cursor: default;
700
- }
701
- }
702
-
703
- .date-wrapper {
704
- display: flex;
705
- flex: 1;
706
- justify-content: flex-end;
707
- font-size: 1rem;
708
- line-height: 1.5rem;
709
- @media (min-width: 640px) {
710
- margin-left: 1rem;
711
- }
712
- }
713
- }
714
- }
715
-
716
- /* posts-detail */
717
- article {
718
- article h1 {
719
- text-align: left;
720
- font-size: 1.8rem;
721
- font-weight: bold;
722
- line-height: 1;
723
- margin-top: 0.5rem;
724
- margin-bottom: 0.1rem;
725
- }
726
-
727
- time {
728
- font-size: 1.1rem;
729
- text-align: left;
730
- color: light-dark(
731
- hsl(from var(--color-text) h s 40%),
732
- hsl(from var(--color-text) h s 80%)
733
- );
734
- }
735
-
736
- hr {
737
- margin: 0.5rem 0;
738
- border-color: hsl(var(--color-text));
739
- }
740
-
741
- h2 {
742
- font-size: 1.1rem;
743
- font-weight: 500;
744
- }
745
-
746
- h3 {
747
- font-size: 1.25rem;
748
- font-weight: 700;
749
- margin-top: 0.5rem;
750
- margin-bottom: 0.1rem;
751
- }
752
-
753
- p {
754
- font-size: 1.1rem;
755
- padding-bottom: 1rem;
756
- }
757
-
758
- p,
759
- li {
760
- font-size: 1.1rem;
761
- li code {
762
- color: var(--color-code-fg) !important;
763
- background: var(--color-code-bg) !important;
764
- word-wrap: break-word;
765
- box-decoration-break: clone;
766
- padding: 2px 4px;
767
- border-radius: 0.2rem;
768
- font-weight: 400;
769
- font-size: 0.8rem;
770
- }
771
- }
772
-
773
- blockquote {
774
- font-size: 1.2rem;
775
- font-weight: 600;
776
- background: var(--color-highlight-bg);
777
- padding: 0.4rem;
778
- margin: 16px 0px;
779
-
780
- blockquote p {
781
- padding: 0;
782
- }
783
- }
784
- }
785
-
786
- /* issues-index */
787
- .issues {
788
- margin-top: 0.5rem;
789
- }
790
-
791
- .summary {
792
- display: flex;
793
- flex-wrap: wrap;
794
- gap: 0.5rem;
795
- align-items: baseline;
796
- padding: 0.5rem;
797
- background: var(--color-box-bg);
798
- color: var(--color-text);
799
- font-size: 0.95rem;
800
- }
801
-
802
- .empty {
803
- margin-top: 0.5rem;
804
- padding: 0.5rem;
805
- background: var(--color-box-bg);
806
- color: var(--color-text);
807
- }
808
-
809
- .new-issue {
810
- display: grid;
811
- gap: 0.5rem;
812
- margin: 0.5rem 0;
813
- padding: 0.5rem;
814
- background: var(--color-box-bg);
815
-
816
- input,
817
- .new-issue textarea {
818
- width: 100%;
819
- border: 1px solid var(--color-text);
820
- background: var(--color-body-bg);
821
- color: var(--color-text);
822
- padding: 0.35rem 0.5rem;
823
- font: inherit;
824
- }
825
-
826
- textarea {
827
- min-height: 6rem;
828
- resize: vertical;
829
- }
830
-
831
- button {
832
- border: 1px solid var(--color-text);
833
- background: var(--color-box-bg);
834
- color: var(--color-link);
835
- padding: 0.35rem 0.75rem;
836
- font: inherit;
837
- cursor: pointer;
838
- }
839
- }
840
-
841
- .form-row {
842
- display: grid;
843
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
844
- gap: 0.5rem;
845
-
846
- @media (max-width: 720px) {
847
- grid-template-columns: 1fr;
848
- }
849
- }
850
-
851
- /* issues-detail */
852
- .state-form,
853
- .comment-form {
854
- margin-top: 0.5rem;
855
- }
856
-
857
- button {
858
- border: 1px solid var(--color-text);
859
- background: var(--color-box-bg);
860
- color: var(--color-link);
861
- padding: 0.35rem 0.75rem;
862
- font: inherit;
863
- cursor: pointer;
864
- }
865
-
866
- .body,
867
- .comments {
868
- margin-top: 0.5rem;
869
- }
870
-
871
- .body,
872
- .comment {
873
- background-color: var(--color-box-bg);
874
- color: var(--color-text);
875
- padding: 0.5rem;
876
- }
877
-
878
- h3 {
879
- margin: 0.5rem 0;
880
- font-size: 1.05rem;
881
- font-weight: 500;
882
- }
883
-
884
- .comment {
885
- margin: 0.5rem 0;
886
- }
887
-
888
- .comment-meta {
889
- display: flex;
890
- flex-wrap: wrap;
891
- gap: 0.5rem;
892
- margin-bottom: 0.35rem;
893
- font-size: 0.85rem;
894
- }
895
-
896
- pre {
897
- white-space: pre-wrap;
898
- overflow-x: auto;
899
- margin: 0;
900
- font-family: inherit;
901
- }
902
-
903
- .comment-form {
904
- display: grid;
905
- gap: 0.5rem;
906
- padding: 0.5rem;
907
- background: var(--color-box-bg);
908
-
909
- textarea,
910
- .comment-form input {
911
- width: 100%;
912
- border: 1px solid var(--color-text);
913
- background: var(--color-body-bg);
914
- color: var(--color-text);
915
- padding: 0.35rem 0.5rem;
916
- font: inherit;
917
- }
918
-
919
- textarea {
920
- min-height: 6rem;
921
- resize: vertical;
922
- }
923
- }
924
-
925
- .comment-actions {
926
- display: grid;
927
- grid-template-columns: minmax(0, 1fr) auto;
928
- gap: 0.5rem;
929
-
930
- @media (max-width: 720px) {
931
- grid-template-columns: 1fr;
932
- }
933
- }
934
-
935
- /* files-index */
936
- .container {
937
- display: flex;
938
- margin-top: 0.25rem;
939
- }
940
-
941
- .file-tree {
942
- display: flex;
943
- flex: 1;
944
- flex-direction: column;
945
- font-size: 0.95rem;
946
- font-weight: 500;
947
- list-style: none;
948
- margin: 0;
949
- }
950
-
951
- /* only-bible */
952
- .page-container {
953
- display: flex;
954
- flex: 1;
955
- flex-direction: column;
956
- padding-bottom: 16rem; /* pb-64 */
957
- }
958
-
959
- .content-column {
960
- display: flex;
961
- flex-direction: column;
962
- align-items: center;
963
- }
964
-
965
- .hero-section {
966
- display: block;
967
- margin-bottom: 1rem; /* mb-4 */
968
- }
969
-
970
- .main-title {
971
- display: flex;
972
- flex-direction: column;
973
- align-items: center;
974
- font-size: 1.875rem; /* text-3xl */
975
- line-height: 2.25rem; /* text-3xl */
976
- font-weight: 700; /* font-bold */
977
- text-align: center;
978
- }
979
-
980
- .app-icon-title {
981
- margin-right: 0.5rem; /* mr-2 */
982
- border-radius: 0.75rem; /* rounded-xl */
983
- }
984
-
985
- .features-list {
986
- text-align: center;
987
- display: flex;
988
- flex-direction: column;
989
- font-size: 1.125rem; /* text-lg */
990
- line-height: 1.75rem; /* text-lg */
991
- }
992
-
993
- .cta-section {
994
- display: flex;
995
- flex: 1;
996
- flex-direction: column;
997
- align-items: center;
998
- }
999
-
1000
- .cta-title {
1001
- margin: 0;
1002
- margin-top: 1rem; /* my-4 */
1003
- margin-bottom: 1rem; /* my-4 */
1004
- font-weight: 700; /* font-bold */
1005
- font-size: 1.25rem; /* text-xl */
1006
- line-height: 1.75rem; /* text-xl */
1007
- }
1008
-
1009
- .store-links-container {
1010
- display: flex;
1011
- flex-direction: column;
1012
- }
1013
-
1014
- .playstore-link {
1015
- margin-top: 1rem; /* mt-4 */
1016
- }
1017
-
1018
- .appstore-link {
1019
- margin-top: 2rem; /* mt-8 */
1020
- }
1021
-
1022
- /* Small screen adjustments (sm:) */
1023
- @media (min-width: 640px) {
1024
- .page-container {
1025
- flex-direction: row;
1026
- }
1027
- .content-column {
1028
- align-items: flex-start;
1029
- }
1030
- .main-title {
1031
- flex-direction: row; /* default for flex, but explicit here */
1032
- align-items: flex-start;
1033
- margin: 0; /* sm:m-0 */
1034
- text-align: left; /* sm:text-left */
1035
- }
1036
- .features-list {
1037
- text-align: left; /* sm:text-left */
1038
- margin-top: 1.25rem; /* sm:mt-5 */
1039
- }
1040
- .cta-section {
1041
- align-items: flex-start;
1042
- }
1043
- .store-links-container {
1044
- flex-direction: row;
1045
- }
1046
- .playstore-link {
1047
- margin-top: 0; /* sm:mt-0 */
1048
- margin-right: 0.5rem; /* sm:mr-2 */
1049
- }
1050
- .appstore-link {
1051
- margin-top: 0; /* sm:mt-0 */
1052
- }
1053
- /* .screenshots-section {
1054
- display: flex;
1055
- flex: 1;
1056
- justify-content: flex-end;
1057
- padding-bottom: 9rem;
1058
- } */
1059
- }
1060
-
1061
- /* Large screen adjustments (lg:) */
1062
- @media (min-width: 1024px) {
1063
- .main-title {
1064
- line-height: 1; /* lg:leading-tight */
1065
- }
1066
- }
1067
-
1068
- /* only-bible-privacy */
1069
- h1 {
1070
- font-size: 1.875rem; /* text-3xl */
1071
- line-height: 2.25rem; /* text-3xl */
1072
- font-weight: 700; /* font-bold */
1073
- }
1074
- b {
1075
- font-weight: 600;
1076
- }
1077
-
1078
- ul {
1079
- margin: 0.5rem;
1080
- padding-left: 1rem;
1081
- }
1082
-
1083
- li {
1084
- list-style-type: disc;
1085
- list-style-position: outside;
1086
- }
1087
-
1088
- h3 {
1089
- font-weight: 700;
1090
- font-size: 1.4rem;
1091
- margin-top: 0.5rem;
1092
- margin-bottom: 0.5rem;
1093
- }
1094
-
1095
- h4 {
1096
- font-weight: 600;
1097
- margin-top: 0.5rem;
1098
- }
1099
-
1100
- h5 {
1101
- margin-top: 0.5rem;
1102
- }
1103
-
1104
- h6 {
1105
- font-weight: 600;
1106
- margin-top: 0.5rem;
1107
-
1108
- h6 span {
1109
- font-family: sans-serif;
1110
- font-weight: 400;
1111
- font-size: 0.95rem;
1112
- }
1113
- }
1114
-
1115
- /* only-bible-terms */
1116
- .terms-container {
1117
- padding-bottom: 2.5rem; /* pb-10 */
1118
- margin-top: 2.5rem; /* mt-10 */
1119
- }
1120
-
1121
- h1 {
1122
- font-weight: 700; /* font-bold */
1123
- font-size: 1.875rem; /* text-3xl */
1124
- line-height: 2.25rem; /* text-3xl */
1125
- }
1126
-
1127
- /* Basic styling for h4 and strong for consistency, can be adjusted or removed if global styles exist */
1128
- h4 {
1129
- font-weight: 600;
1130
- margin-top: 0.5rem;
1131
- font-size: 1.17em; /* Default h4 size */
1132
- }
1133
-
1134
- strong {
1135
- font-weight: bold;
1136
- }
1137
-
1138
-
1139
- /* Dark theme */
1140
- @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
1141
- [data-theme="dark"] {
1142
- --color-body-bg: hsl(210, 13%, 15%);
1143
- --color-box-bg: hsl(210, 13%, 9%);
1144
- --color-text: hsl(210, 17%, 98%);
1145
- --color-link: hsl(211, 100%, 60%);
1146
- --color-post-link: hsl(211, 100%, 60%);
1147
- --color-highlight-bg: hsl(183, 80%, 18%);
1148
- --color-code-fg: hsl(348, 86%, 60%);
1149
- --color-code-bg: hsl(0, 0%, 0%);
1150
- --color-pre-bg: hsl(0, 0%, 0%);
1151
- --color-tag: hsl(152, 96%, 44%);
1152
- --btn-light: block;
1153
- --btn-dark: none;
1154
- color-scheme: dark;
1155
- }
packages/shared/ui/src/file-layout.tsx CHANGED
@@ -7,15 +7,16 @@ interface FileLayoutProps {
7
7
  file: FileNode;
8
8
  request: Request;
9
9
  children: any;
10
+ css?: string;
10
11
  }
11
12
 
12
- export function FileLayout({ repo, file, request, children }: FileLayoutProps) {
13
+ export function FileLayout({ repo, file, request, children, css }: FileLayoutProps) {
13
14
  const url = new URL(request.url);
14
15
  const pathname = url.pathname;
15
16
  const currentTab = pathname.includes("/files/") ? "Files" : "Readme";
16
17
 
17
18
  return (
18
- <RepoLayout repo={repo} request={request} currentTab={currentTab}>
19
+ <RepoLayout repo={repo} request={request} currentTab={currentTab} css={css}>
19
20
  <div class="file-layout">
20
21
  <hr />
21
22
  <div class="title">
packages/shared/ui/src/layout.tsx CHANGED
@@ -6,10 +6,11 @@ interface LayoutProps {
6
6
  title: string;
7
7
  description?: string;
8
8
  request?: Request;
9
+ css?: string;
9
10
  children: any;
10
11
  }
11
12
 
12
- export function Layout({ title, description, request, children }: LayoutProps) {
13
+ export function Layout({ title, description, request, css, children }: LayoutProps) {
13
14
  const url = request ? new URL(request.url) : undefined;
14
15
  const canonicalURL = url ? `${SITE_URL}${url.pathname}` : SITE_URL;
15
16
  return (
@@ -21,7 +22,8 @@ export function Layout({ title, description, request, children }: LayoutProps) {
21
22
  <link rel="icon" type="image/svg+xml" href="/assets/icons/icon.svg" />
22
23
  <link rel="alternate" type="application/rss+xml" title={title} href="/rss.xml" />
23
24
  <link rel="canonical" href={canonicalURL} />
24
- <link rel="stylesheet" href="/assets/css/styles.css" />
25
+ <link rel="stylesheet" href="/assets/css/shared.css" />
26
+ {css && <link rel="stylesheet" href={css} />}
25
27
  <title>{title}</title>
26
28
  <meta name="title" content={title} />
27
29
  <meta name="description" content={description || SITE_DESCRIPTION} />
packages/shared/ui/src/repo-layout.tsx CHANGED
@@ -6,15 +6,16 @@ interface RepoLayoutProps {
6
6
  request: Request;
7
7
  children: any;
8
8
  currentTab: string;
9
+ css?: string;
9
10
  }
10
11
 
11
- export function RepoLayout({ repo, request, children, currentTab }: RepoLayoutProps) {
12
+ export function RepoLayout({ repo, request, children, currentTab, css }: RepoLayoutProps) {
12
13
  const { title, description, tags } = repo.data;
13
14
  const url = new URL(request.url);
14
15
  const pathname = url.pathname;
15
16
 
16
17
  return (
17
- <Layout title={`${title} — pyrossh`} description={description} request={request}>
18
+ <Layout title={`${title} — pyrossh`} description={description} request={request} css={css}>
18
19
  <div class="repo">
19
20
  <div class="header">
20
21
  <h1>
packages/workers/assets/src/index.ts CHANGED
@@ -1,34 +1,91 @@
1
1
  const ASSETS: Record<string, { data: string; type: string }> = {
2
- "css/styles.css": { data: `/* Reset */
2
+ "css/shared.css": { data: ` @view-transition {
3
- *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
4
- html { -webkit-text-size-adjust: 100%; }
5
- body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
6
- img, picture, video, canvas, svg { display: block; max-width: 100%; }
7
- input, button, textarea, select { font: inherit; }
8
- p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
9
- a { color: inherit; text-decoration: none; }
10
- ul, ol { list-style: none; }
11
- table { border-collapse: collapse; }
12
-
13
-
14
- /* wrapper */
3
+ navigation: auto; /* enabled! */
4
+ }
15
- div {
5
+ :root {
6
+ --color-black: hsl(0, 0%, 0%);
7
+ --color-white: hsl(0, 0%, 100%);
8
+ --color-accent: hsl(57.25deg 100% 70%);
9
+ --color-body-bg: hsl(0, 0%, 100%);
10
+ --color-box-bg: hsl(0, 0%, 95%);
16
- flex: 1;
11
+ --color-text: hsl(0, 0%, 13%);
12
+ --color-link: hsl(211, 100%, 45%);
13
+ --color-post-link: hsl(0, 0%, 0%);
17
- width: min(70ch, 100% - 4rem); /* To make the website more readable */
14
+ --color-highlight-bg: hsl(183, 80%, 88%);
15
+ --color-code-fg: hsl(348, 86%, 43%);
16
+ --color-code-bg: hsl(0, 0%, 95%);
17
+ --color-pre-bg: hsl(0, 0%, 95%);
18
+ --color-tag: hsl(152, 96%, 35%);
18
- margin-right: auto;
19
+ --btn-light: none;
19
- margin-left: auto;
20
+ --btn-dark: block;
21
+
20
- padding-left: 1em;
22
+ .astro-code,
21
- padding-right: 1em;
23
+ :root .astro-code span {
24
+ background: var(--color-pre-bg) !important;
25
+ }
22
26
  }
23
27
 
28
+ [data-theme="dark"] {
29
+ --btn-light: block;
30
+ --btn-dark: none;
31
+
32
+ [data-theme="dark"] .expressive-code .frame pre {
33
+ background: var(--color-pre-bg) !important;
34
+ }
35
+ }
36
+
37
+ [data-tooltip] {
38
+ position: relative;
39
+ cursor: help;
40
+ }
41
+
42
+ [data-tooltip]::after {
43
+ position: absolute;
44
+ opacity: 0;
45
+ pointer-events: none;
46
+ content: attr(data-tooltip);
47
+ left: 0;
48
+ top: calc(100% + 10px);
49
+ border-radius: 3px;
50
+ box-shadow: 0 0 1px 1px var(--color-text);
51
+ background-color: var(--color-box-bg);
52
+ z-index: 10;
53
+ padding: 8px;
54
+ width: 300px;
55
+ transform: translateY(-20px);
56
+ transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
57
+ }
58
+
59
+ [data-tooltip]:hover::after {
60
+ opacity: 1;
61
+ transform: translateY(0);
62
+ transition-duration: 300ms;
63
+ }
64
+
65
+ body {
66
+ display: flex;
67
+ flex-direction: column;
68
+ flex: 1;
69
+ background-color: var(--color-body-bg);
70
+ color: var(--color-text);
71
+ font-family: system-ui;
72
+ text-rendering: optimizeLegibility;
73
+ font-variant-ligatures: common-ligatures;
74
+ font-kerning: normal;
75
+ font-size: 1.25rem;
76
+ line-height: 1.5;
77
+ min-height: 100vh;
78
+
24
- @media (max-width: 720px) {
79
+ @media (max-width: 720px) {
25
- div {
26
- width: 100%;
80
+ font-size: 1.1rem;
27
81
  }
28
82
  }
29
83
 
84
+ main {
85
+ margin-top: 1rem;
30
- /* header */
86
+ margin-bottom: 1rem;
87
+ padding-bottom: 1em;
31
- header {
88
+ } header {
32
89
  background: #131618;
33
90
  }
34
91
 
@@ -100,10 +157,7 @@ table { border-collapse: collapse; }
100
157
  text-underline-offset: 8px;
101
158
  }
102
159
  }
103
- }
104
-
105
- /* footer */
106
- footer {
160
+ } footer {
107
161
  background: #131618;
108
162
  }
109
163
 
@@ -150,260 +204,21 @@ table { border-collapse: collapse; }
150
204
  color: var(--color-gray-200);
151
205
  text-decoration-color: var(--color-gray-200);
152
206
  }
153
- }
154
-
155
- /* baselayout */
156
- @view-transition {
157
- navigation: auto; /* enabled! */
158
- }
159
- :root {
160
- --color-black: hsl(0, 0%, 0%);
161
- --color-white: hsl(0, 0%, 100%);
162
- --color-accent: hsl(57.25deg 100% 70%);
163
- --color-body-bg: hsl(0, 0%, 100%);
164
- --color-box-bg: hsl(0, 0%, 95%);
165
- --color-text: hsl(0, 0%, 13%);
166
- --color-link: hsl(211, 100%, 45%);
167
- --color-post-link: hsl(0, 0%, 0%);
168
- --color-highlight-bg: hsl(183, 80%, 88%);
169
- --color-code-fg: hsl(348, 86%, 43%);
170
- --color-code-bg: hsl(0, 0%, 95%);
171
- --color-pre-bg: hsl(0, 0%, 95%);
172
- --color-tag: hsl(152, 96%, 35%);
173
- --btn-light: none;
174
- --btn-dark: block;
175
-
176
- .astro-code,
177
- :root .astro-code span {
178
- background: var(--color-pre-bg) !important;
179
- }
180
- }
181
-
182
- [data-theme="dark"] {
183
- --btn-light: block;
184
- --btn-dark: none;
185
-
186
- [data-theme="dark"] .expressive-code .frame pre {
187
- background: var(--color-pre-bg) !important;
188
- }
189
- }
190
-
191
- [data-tooltip] {
192
- position: relative;
193
- cursor: help;
194
- }
195
-
196
- [data-tooltip]::after {
197
- position: absolute;
198
- opacity: 0;
199
- pointer-events: none;
200
- content: attr(data-tooltip);
201
- left: 0;
202
- top: calc(100% + 10px);
203
- border-radius: 3px;
204
- box-shadow: 0 0 1px 1px var(--color-text);
205
- background-color: var(--color-box-bg);
206
- z-index: 10;
207
- padding: 8px;
208
- width: 300px;
209
- transform: translateY(-20px);
210
- transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
211
- }
212
-
213
- [data-tooltip]:hover::after {
214
- opacity: 1;
215
- transform: translateY(0);
216
- transition-duration: 300ms;
217
- }
218
-
219
- body {
207
+ } div {
220
- display: flex;
221
- flex-direction: column;
222
208
  flex: 1;
223
- background-color: var(--color-body-bg);
224
- color: var(--color-text);
225
- font-family: system-ui;
226
- text-rendering: optimizeLegibility;
227
- font-variant-ligatures: common-ligatures;
209
+ width: min(70ch, 100% - 4rem); /* To make the website more readable */
228
- font-kerning: normal;
229
- font-size: 1.25rem;
230
- line-height: 1.5;
231
- min-height: 100vh;
210
+ margin-right: auto;
232
-
233
- @media (max-width: 720px) {
234
- font-size: 1.1rem;
235
- }
236
- }
237
-
238
- main {
239
- margin-top: 1rem;
211
+ margin-left: auto;
240
- margin-bottom: 1rem;
241
- padding-bottom: 1em;
212
+ padding-left: 1em;
242
- }
243
-
244
- /* repolayout */
245
- .repo {
246
- text-overflow: ellipsis;
247
- overflow: hidden;
248
- padding: 0.5rem;
249
- background: var(--color-box-bg);
250
- color: var(--color-text);
251
- font-size: 0.95rem;
252
-
253
- .repo a {
254
- color: var(--color-link);
255
- }
256
- }
257
-
258
- .header {
259
- display: flex;
260
- flex-direction: row;
261
- align-items: baseline;
262
-
263
- @media (max-width: 720px) {
264
- flex-direction: column;
265
- align-items: start;
266
- }
267
- }
268
-
269
- h4 {
270
- font-size: 1.05rem;
271
- font-weight: 500;
272
- line-height: 1.2;
273
- border-bottom: 1px solid #495057;
274
- text-overflow: ellipsis;
275
- white-space: nowrap;
276
- overflow: hidden;
277
- margin-bottom: 0;
278
- padding: 0;
279
- }
280
-
281
- .tags {
282
- margin-top: 0.5rem;
283
- display: flex;
284
- flex-wrap: wrap;
285
- gap: 0.25rem;
286
- }
287
-
288
- .tag {
289
- color: var(--color-tag);
290
- padding: 0.15rem 0.5rem 0.5rem 0rem;
291
- border-radius: 0.25rem;
292
- font-size: 0.95rem;
293
- font-weight: 500;
294
- }
295
-
296
- h1 {
297
- font-size: 1.6rem;
298
- font-weight: 500;
299
- line-height: 1;
300
- margin-bottom: 0.1rem;
301
- flex: 1;
302
-
303
- h1 a {
304
- color: var(--color-link);
305
- }
306
- }
307
-
308
- h2 {
309
- display: flex;
310
- flex: 1;
311
- padding-top: 0.3rem;
312
- font-size: 0.95rem;
313
- }
314
-
315
- h3 {
316
- font-size: 1rem;
317
- font-weight: 500;
318
-
319
- h3 a {
320
- /* color: var(--color-tag) !important; */
321
- }
322
-
323
- span {
324
- font-size: 0.8rem;
325
- }
326
-
327
- svg {
328
- display: inline;
329
- /* color: var(--color-code-fg); */
330
- /* vertical-align: sub; */
331
- margin-bottom: 4px;
332
- }
333
- }
334
-
335
- hr {
336
- margin-top: 0.5rem;
337
- border-color: var(--color-text);
338
- }
339
-
340
- .nav {
341
- display: flex;
342
- align-items: center;
343
- margin-top: 0.5rem;
344
-
345
- @media (max-width: 720px) {
346
- margin-top: 0.5rem;
347
- }
348
-
349
- div {
350
- padding-right: 0.5rem;
213
+ padding-right: 1em;
351
- }
352
-
353
- a {
354
- font-size: 1rem;
355
- font-weight: 500;
356
- padding-right: 0.5rem;
357
- cursor: pointer;
358
- color: var(--color-link);
359
-
360
- a[aria-current="true"] {
361
- text-underline-offset: 4px;
362
- text-decoration: underline;
363
- }
364
- }
365
214
  }
366
215
 
367
- /* filelayout */
368
- .nav {
369
- display: flex;
370
- align-items: center;
371
- margin-bottom: 0.5rem;
372
-
373
- @media (max-width: 720px) {
216
+ @media (max-width: 720px) {
374
- margin-top: 0.5rem;
375
- }
376
-
377
217
  div {
378
- padding-right: 0.5rem;
379
- }
380
-
381
- a {
382
- font-size: 1rem;
383
- font-weight: 500;
218
+ width: 100%;
384
- padding-right: 0.5rem;
385
- cursor: pointer;
386
- color: var(--color-link);
387
-
388
- a[aria-current="true"] {
389
- text-underline-offset: 4px;
390
- text-decoration: underline;
391
- }
392
219
  }
393
- }
394
-
395
- .title {
396
- display: flex;
397
- align-items: center;
398
- margin-top: 0.75rem;
399
- margin-bottom: 0.5rem;
400
- font-size: 1.1rem;
401
- font-weight: 500;
402
- }
403
-
404
-
405
- /* index */
220
+ }`, type: "text/css" },
406
- .description {
221
+ "css/workers/home.css": { data: ` .description {
407
222
  font-size: 1.1rem;
408
223
  @media (max-width: 720px) {
409
224
  font-size: 1rem;
@@ -625,10 +440,8 @@ table { border-collapse: collapse; }
625
440
  }
626
441
  }
627
442
  }
628
- }
629
-
630
- /* cv */
443
+ }`, type: "text/css" },
631
- h1 {
444
+ "css/workers/cv.css": { data: ` h1 {
632
445
  display: flex;
633
446
  align-items: flex-start;
634
447
  font-weight: 800;
@@ -644,10 +457,8 @@ table { border-collapse: collapse; }
644
457
 
645
458
  .pdf {
646
459
  border: 1px solid black;
647
- }
648
-
649
- /* posts-index */
460
+ }`, type: "text/css" },
650
- h1 {
461
+ "css/workers/posts-index.css": { data: ` h1 {
651
462
  display: flex;
652
463
  align-items: flex-start;
653
464
  font-weight: 800;
@@ -712,10 +523,8 @@ table { border-collapse: collapse; }
712
523
  }
713
524
  }
714
525
  }
715
- }
716
-
717
- /* posts-detail */
526
+ }`, type: "text/css" },
718
- article {
527
+ "css/workers/posts-detail.css": { data: ` article {
719
528
  article h1 {
720
529
  text-align: left;
721
530
  font-size: 1.8rem;
@@ -782,10 +591,22 @@ table { border-collapse: collapse; }
782
591
  padding: 0;
783
592
  }
784
593
  }
594
+ }`, type: "text/css" },
595
+ "css/workers/files-index.css": { data: ` .container {
596
+ display: flex;
597
+ margin-top: 0.25rem;
785
598
  }
786
599
 
787
- /* issues-index */
788
- .issues {
600
+ .file-tree {
601
+ display: flex;
602
+ flex: 1;
603
+ flex-direction: column;
604
+ font-size: 0.95rem;
605
+ font-weight: 500;
606
+ list-style: none;
607
+ margin: 0;
608
+ }`, type: "text/css" },
609
+ "css/workers/issues-index.css": { data: ` .issues {
789
610
  margin-top: 0.5rem;
790
611
  }
791
612
 
@@ -847,10 +668,8 @@ table { border-collapse: collapse; }
847
668
  @media (max-width: 720px) {
848
669
  grid-template-columns: 1fr;
849
670
  }
850
- }
851
-
852
- /* issues-detail */
671
+ }`, type: "text/css" },
853
- .state-form,
672
+ "css/workers/issues-detail.css": { data: ` .state-form,
854
673
  .comment-form {
855
674
  margin-top: 0.5rem;
856
675
  }
@@ -931,26 +750,8 @@ table { border-collapse: collapse; }
931
750
  @media (max-width: 720px) {
932
751
  grid-template-columns: 1fr;
933
752
  }
934
- }
935
-
936
- /* files-index */
753
+ }`, type: "text/css" },
937
- .container {
938
- display: flex;
939
- margin-top: 0.25rem;
940
- }
941
-
942
- .file-tree {
943
- display: flex;
944
- flex: 1;
945
- flex-direction: column;
946
- font-size: 0.95rem;
947
- font-weight: 500;
948
- list-style: none;
949
- margin: 0;
950
- }
951
-
952
- /* only-bible */
754
+ "css/workers/only-bible-app.css": { data: ` .page-container {
953
- .page-container {
954
755
  display: flex;
955
756
  flex: 1;
956
757
  flex-direction: column;
@@ -1064,10 +865,8 @@ table { border-collapse: collapse; }
1064
865
  .main-title {
1065
866
  line-height: 1; /* lg:leading-tight */
1066
867
  }
1067
- }
868
+ }`, type: "text/css" },
1068
-
1069
- /* only-bible-privacy */
869
+ "css/workers/only-bible-app-privacy.css": { data: ` h1 {
1070
- h1 {
1071
870
  font-size: 1.875rem; /* text-3xl */
1072
871
  line-height: 2.25rem; /* text-3xl */
1073
872
  font-weight: 700; /* font-bold */
@@ -1111,10 +910,8 @@ table { border-collapse: collapse; }
1111
910
  font-weight: 400;
1112
911
  font-size: 0.95rem;
1113
912
  }
1114
- }
1115
-
1116
- /* only-bible-terms */
913
+ }`, type: "text/css" },
1117
- .terms-container {
914
+ "css/workers/only-bible-app-terms.css": { data: ` .terms-container {
1118
915
  padding-bottom: 2.5rem; /* pb-10 */
1119
916
  margin-top: 2.5rem; /* mt-10 */
1120
917
  }
@@ -1134,27 +931,7 @@ table { border-collapse: collapse; }
1134
931
 
1135
932
  strong {
1136
933
  font-weight: bold;
1137
- }
1138
-
1139
-
1140
- /* Dark theme */
1141
- @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
1142
- [data-theme="dark"] {
1143
- --color-body-bg: hsl(210, 13%, 15%);
1144
- --color-box-bg: hsl(210, 13%, 9%);
1145
- --color-text: hsl(210, 17%, 98%);
1146
- --color-link: hsl(211, 100%, 60%);
1147
- --color-post-link: hsl(211, 100%, 60%);
1148
- --color-highlight-bg: hsl(183, 80%, 18%);
1149
- --color-code-fg: hsl(348, 86%, 60%);
1150
- --color-code-bg: hsl(0, 0%, 0%);
1151
- --color-pre-bg: hsl(0, 0%, 0%);
1152
- --color-tag: hsl(152, 96%, 44%);
1153
- --btn-light: block;
1154
- --btn-dark: none;
1155
- color-scheme: dark;
1156
- }
1157
- `, type: "text/css" },
934
+ }`, type: "text/css" },
1158
935
  };
1159
936
 
1160
937
  export default {
packages/workers/cv/src/index.tsx CHANGED
@@ -3,7 +3,7 @@ import { Layout } from "@pyrossh/ui";
3
3
  export default {
4
4
  async fetch(request: Request): Promise<Response> {
5
5
  return new Response(
6
- <Layout title="Curriculum Vitae" description="Peter John CV" request={request}>
6
+ <Layout css="/assets/css/workers/cv.css" title="Curriculum Vitae" description="Peter John CV" request={request}>
7
7
  <div>
8
8
  <h1 style="display:flex;align-items:flex-start;font-weight:800;font-size:2rem;margin-bottom:1rem">
9
9
  Curriculum Vitae
packages/workers/home/src/index.tsx CHANGED
@@ -5,6 +5,7 @@ export default {
5
5
  async fetch(request: Request): Promise<Response> {
6
6
  return new Response(
7
7
  <Layout
8
+ css="/assets/css/workers/home.css"
8
9
  title={SITE_TITLE}
9
10
  description="Tech Lead from Bangalore who likes to create frameworks and programming languages."
10
11
  request={request}
packages/workers/only-bible-app/index/src/index.tsx CHANGED
@@ -4,6 +4,7 @@ export default {
4
4
  async fetch(request: Request): Promise<Response> {
5
5
  return new Response(
6
6
  <Layout
7
+ css="/assets/css/workers/only-bible-app.css"
7
8
  title="Only Bible App"
8
9
  description="The only bible app you will ever need"
9
10
  request={request}
packages/workers/only-bible-app/privacy/src/index.tsx CHANGED
@@ -4,6 +4,7 @@ export default {
4
4
  async fetch(request: Request): Promise<Response> {
5
5
  return new Response(
6
6
  <Layout
7
+ css="/assets/css/workers/only-bible-app-privacy.css"
7
8
  title="Privacy Policy | Only Bible App"
8
9
  description="Privacy Policy | Only Bible App"
9
10
  request={request}
packages/workers/only-bible-app/terms/src/index.tsx CHANGED
@@ -4,6 +4,7 @@ export default {
4
4
  async fetch(request: Request): Promise<Response> {
5
5
  return new Response(
6
6
  <Layout
7
+ css="/assets/css/workers/only-bible-app-terms.css"
7
8
  title="Terms and Conditions | Only Bible App"
8
9
  description="Terms and Conditions | Only Bible App"
9
10
  request={request}
packages/workers/posts/detail/src/index.tsx CHANGED
@@ -14,7 +14,7 @@ export default {
14
14
  return Response.redirect(`${url.origin}/404`, 302);
15
15
  }
16
16
  return new Response(
17
- <Layout title={post.data.title} description={post.data.description} request={request}>
17
+ <Layout css="/assets/css/workers/posts-detail.css" title={post.data.title} description={post.data.description} request={request}>
18
18
  <article>
19
19
  <h1 style="text-align:left;font-size:1.8rem;font-weight:bold;line-height:1;margin-top:0.5rem;margin-bottom:0.1rem">
20
20
  {post.data.title}
packages/workers/posts/index/src/index.tsx CHANGED
@@ -6,7 +6,7 @@ export default {
6
6
  async fetch(request: Request, env: Env): Promise<Response> {
7
7
  const posts = await getPosts(env.REPOS);
8
8
  return new Response(
9
- <Layout title="Posts" description="Posts" request={request}>
9
+ <Layout css="/assets/css/workers/posts-index.css" title="Posts" description="Posts" request={request}>
10
10
  <h1 style="font-weight:800;font-size:2rem">Posts</h1>
11
11
  <ul style="display:flex;flex-direction:column;list-style:none;padding:0">
12
12
  {posts.map((post) => (
packages/workers/repos/files/index/src/index.tsx CHANGED
@@ -14,7 +14,7 @@ export default {
14
14
  const sortedFiles = sortChildren(buildFileTree(files));
15
15
 
16
16
  return new Response(
17
- <RepoLayout repo={repo} request={request} currentTab="Files">
17
+ <RepoLayout css="/assets/css/workers/files-index.css" repo={repo} request={request} currentTab="Files">
18
18
  <FileTree nodes={sortedFiles} repoId={repo.id} />
19
19
  </RepoLayout>,
20
20
  {
packages/workers/repos/issues/detail/src/index.tsx CHANGED
@@ -148,7 +148,7 @@ export default {
148
148
  }
149
149
 
150
150
  return new Response(
151
- <RepoLayout repo={repo} request={request} currentTab="Issues">
151
+ <RepoLayout css="/assets/css/workers/issues-detail.css" repo={repo} request={request} currentTab="Issues">
152
152
  {IssueHeader(repo.id, issue)}
153
153
  {StateForm(repo.id, issue)}
154
154
  {issue.body && (
packages/workers/repos/issues/index/src/index.tsx CHANGED
@@ -50,7 +50,7 @@ export default {
50
50
  const closedIssues = issues.filter((issue) => issue.state === "closed");
51
51
 
52
52
  return new Response(
53
- <RepoLayout repo={repo} request={request} currentTab="Issues">
53
+ <RepoLayout css="/assets/css/workers/issues-index.css" repo={repo} request={request} currentTab="Issues">
54
54
  <section class="issues">
55
55
  <div class="summary">
56
56
  <strong>{issues.length}</strong> issues