|
1 | | -@import "@fontsource/fira-mono"; |
| 1 | +@import '@fontsource/fira-mono'; |
| 2 | +@import 'prismjs/themes/prism-tomorrow'; |
| 3 | +@import '@shikijs/twoslash/style-rich.css'; |
2 | 4 |
|
3 | 5 | :root { |
4 | | - font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, |
5 | | - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; |
6 | | - --font-mono: "Fira Mono", monospace; |
7 | | - --pure-white: #ffffff; |
8 | | - --primary-color: #b9c6d2; |
9 | | - --secondary-color: #676778; |
10 | | - --tertiary-color: #edf0f8; |
11 | | - --accent-color: #ff3e00; |
12 | | - --heading-color: rgba(0, 0, 0, 0.7); |
13 | | - --text-color: #444444; |
14 | | - --background-without-opacity: rgba(255, 255, 255, 0.7); |
15 | | - --column-width: 42rem; |
16 | | - --column-margin-top: 4rem; |
| 6 | + font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif; |
| 7 | + --font-mono: 'Fira Mono', monospace; |
| 8 | + --pure-white: #ffffff; |
| 9 | + --primary-color: #ffffff; |
| 10 | + --secondary-color: #676778; |
| 11 | + --tertiary-color: #edf0f8; |
| 12 | + --accent-color: #ff3e00; |
| 13 | + --heading-color: rgba(0, 0, 0, 0.7); |
| 14 | + --text-color: #444444; |
| 15 | + --background-without-opacity: rgba(255, 255, 255, 0.95); |
| 16 | + --column-width: 42rem; |
| 17 | + --column-margin-top: 4rem; |
17 | 18 | } |
18 | 19 |
|
19 | 20 | body { |
20 | | - min-height: 100vh; |
21 | | - margin: 0; |
22 | | - background-color: var(--primary-color); |
23 | | -} |
24 | | - |
25 | | -body::before { |
26 | | - content: ""; |
27 | | - width: 80vw; |
28 | | - height: 100vh; |
29 | | - position: absolute; |
30 | | - top: 0; |
31 | | - left: 10vw; |
32 | | - z-index: -1; |
33 | | - background: radial-gradient( |
34 | | - 50% 50% at 50% 50%, |
35 | | - var(--pure-white) 0%, |
36 | | - rgba(255, 255, 255, 0) 100% |
37 | | - ); |
38 | | - opacity: 0.05; |
| 21 | + min-height: 100vh; |
| 22 | + margin: 0; |
| 23 | + background-color: var(--primary-color); |
| 24 | + color: var(--text-color); |
39 | 25 | } |
40 | 26 |
|
41 | 27 | #svelte { |
42 | | - min-height: 100vh; |
43 | | - display: flex; |
44 | | - flex-direction: column; |
| 28 | + min-height: 100vh; |
| 29 | + display: flex; |
| 30 | + flex-direction: column; |
45 | 31 | } |
46 | 32 |
|
47 | 33 | h1, |
48 | 34 | h2, |
49 | 35 | p { |
50 | | - font-weight: 400; |
51 | | - color: var(--heading-color); |
| 36 | + font-weight: 400; |
| 37 | + color: var(--heading-color); |
52 | 38 | } |
53 | 39 |
|
54 | 40 | p { |
55 | | - line-height: 1.5; |
| 41 | + line-height: 1.5; |
56 | 42 | } |
57 | 43 |
|
58 | 44 | a { |
59 | | - color: var(--accent-color); |
60 | | - text-decoration: none; |
| 45 | + color: var(--accent-color); |
| 46 | + text-decoration: none; |
61 | 47 | } |
62 | | - |
63 | 48 | a:hover { |
64 | | - text-decoration: underline; |
| 49 | + text-decoration: underline; |
65 | 50 | } |
66 | 51 |
|
67 | 52 | h1 { |
68 | | - font-size: 2rem; |
69 | | - text-align: center; |
| 53 | + font-size: 2rem; |
| 54 | + margin: 1rem 0; |
| 55 | +} |
| 56 | +@media (min-width: 720px) { |
| 57 | + h1 { |
| 58 | + font-size: 2.4rem; |
| 59 | + } |
70 | 60 | } |
71 | 61 |
|
72 | 62 | h2 { |
73 | | - font-size: 1rem; |
| 63 | + font-size: 1.6rem; |
| 64 | + margin: 1rem 0; |
| 65 | +} |
| 66 | + |
| 67 | +h3, |
| 68 | +h4, |
| 69 | +h5, |
| 70 | +h6 { |
| 71 | + margin: 0.5rem 0; |
| 72 | + font-weight: 400; |
| 73 | + color: var(--heading-color); |
| 74 | + font-size: 1rem; |
| 75 | +} |
| 76 | + |
| 77 | +h1 + h2, |
| 78 | +h2 + h3, |
| 79 | +h3 + h4, |
| 80 | +h4 + h5, |
| 81 | +h5 + h6 { |
| 82 | + margin-top: 0; |
| 83 | +} |
| 84 | + |
| 85 | +ul { |
| 86 | + margin: 1rem 0; |
74 | 87 | } |
75 | 88 |
|
76 | 89 | pre { |
77 | | - font-size: 16px; |
78 | | - font-family: var(--font-mono); |
79 | | - background-color: rgba(255, 255, 255, 0.45); |
80 | | - border-radius: 3px; |
81 | | - box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); |
82 | | - padding: 0.5em; |
83 | | - overflow-x: auto; |
84 | | - color: var(--text-color); |
| 90 | + font-size: 16px; |
| 91 | + font-family: var(--font-mono); |
| 92 | + background-color: rgba(255, 255, 255, 0.45); |
| 93 | + border-radius: 3px; |
| 94 | + box-shadow: 2px 2px 6px rgb(255 255 255 / 25%); |
| 95 | + padding: 0.5em; |
| 96 | + overflow-x: auto; |
| 97 | + color: var(--text-color); |
| 98 | + margin: 0.5rem 0; |
85 | 99 | } |
86 | 100 |
|
87 | 101 | input, |
88 | 102 | button { |
89 | | - font-size: inherit; |
90 | | - font-family: inherit; |
| 103 | + font-size: inherit; |
| 104 | + font-family: inherit; |
91 | 105 | } |
92 | 106 |
|
93 | 107 | button:focus:not(:focus-visible) { |
94 | | - outline: none; |
| 108 | + outline: none; |
95 | 109 | } |
96 | 110 |
|
97 | | -@media (min-width: 720px) { |
98 | | - h1 { |
99 | | - font-size: 2.4rem; |
100 | | - } |
| 111 | +:target { |
| 112 | + scroll-margin-top: 80px; |
101 | 113 | } |
102 | 114 |
|
103 | | -:target { |
104 | | - scroll-margin-top: 80px; |
| 115 | +/* twoslash */ |
| 116 | +.twoslash .twoslash-popup-container { |
| 117 | + transform: translateY(2em); |
| 118 | + white-space: pre-wrap; |
| 119 | + margin-right: 32px; |
| 120 | +} |
| 121 | +.twoslash .twoslash-error > span:not(.twoslash-popup-container):not(:has(*)) { |
| 122 | + min-width: 6px; |
| 123 | + display: inline-block; |
| 124 | +} |
| 125 | + |
| 126 | +/*** markdown ***/ |
| 127 | +:not(pre) > code { |
| 128 | + padding: 0.1rem 0.4rem
179B
; |
| 129 | + margin: 0 0.2rem; |
| 130 | + background: #e5eef5; |
| 131 | + position: relative; |
| 132 | + border-radius: 0.3em; |
| 133 | + white-space: nowrap; |
| 134 | + color: #444; |
| 135 | + -webkit-font-smoothing: initial; |
| 136 | + transform: translateY(-2px); |
| 137 | + display: inline-block; |
| 138 | +} |
| 139 | + |
| 140 | +blockquote { |
| 141 | + padding: 0.5rem 2.4rem; |
| 142 | + color: #09f; |
| 143 | + border: 1px solid #40b3ff; |
| 144 | + margin: 1.6rem 2.4rem 2.4rem; |
| 145 | + border-radius: 0.4rem; |
| 146 | +} |
| 147 | +blockquote p { |
| 148 | + color: #09f; |
| 149 | +} |
| 150 | + |
| 151 | +table { |
| 152 | + margin: 0 0 2em; |
| 153 | + width: 100%; |
| 154 | + font-size: 1rem; /* var(--h5)は未定義なので1remに */ |
| 155 | +} |
| 156 | +td, |
| 157 | +th { |
| 158 | + text-align: left; |
| 159 | + border-bottom: 1px solid rgba(0 0 0 / 0.1); |
| 160 | + padding: 0.4rem 0.8rem 0.4rem 0; |
| 161 | +} |
| 162 | + |
| 163 | +/* custom container */ |
| 164 | +.custom-block .custom-block-title { |
| 165 | + font-weight: 600; |
| 166 | + margin-bottom: -0.4rem; |
| 167 | +} |
| 168 | + |
| 169 | +.custom-block.danger, |
| 170 | +.custom-block.tip, |
| 171 | +.custom-block.warning { |
| 172 | + padding: 0.1rem 1.5rem; |
| 173 | + border-left-width: 4px; |
| 174 | + border-left-style: solid; |
| 175 | + margin: 1rem 0; |
| 176 | +} |
| 177 | + |
| 178 | +.custom-block.tip { |
| 179 | + background-color: #f3f5f7; |
| 180 | + border-color: #42b983; |
| 181 | +} |
| 182 | + |
| 183 | +.custom-block.warning { |
| 184 | + background-color: rgba(255, 229, 100, 0.3); |
| 185 | + border-color: #e7c000; |
| 186 | + color: #6b5900; |
| 187 | +} |
| 188 | +.custom-block.warning .custom-block-title { |
| 189 | + color: #b29400; |
| 190 | +} |
| 191 | +.custom-block.warning a { |
| 192 | + color: #2c3e50; |
| 193 | +} |
| 194 | + |
| 195 | +.custom-block.danger { |
| 196 | + background-color: #ffe6e6; |
| 197 | + border-color: #c00; |
| 198 | + color: #4d0000; |
| 199 | +} |
| 200 | +.custom-block.danger .custom-block-title { |
| 201 | + color: #900; |
| 202 | +} |
| 203 | +.custom-block.danger a { |
| 204 | + color: #2c3e50; |
| 205 | +} |
| 206 | + |
| 207 | +.custom-block.details { |
| 208 | + display: block; |
| 209 | + position: relative; |
| 210 | + border-radius: 2px; |
| 211 | + margin: 1.6em 0; |
| 212 | + padding: 1.6em; |
| 213 | + background-color: #eee; |
| 214 | +} |
| 215 | +.custom-block.details h4 { |
| 216 | + margin-top: 0; |
| 217 | +} |
| 218 | +.custom-block.details figure:last-child, |
| 219 | +.custom-block.details p:last-child { |
| 220 | + margin-bottom: 0; |
| 221 | + padding-bottom: 0; |
| 222 | +} |
| 223 | +.custom-block.details summary { |
| 224 | + outline: none; |
| 225 | + cursor: pointer; |
105 | 226 | } |
0 commit comments