website

#astro#js#html#css

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

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

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