| @@ -1,108 +1,21 @@ |
| 1 | | :root { |
| 2 | | --bg: #fafafa; |
| 3 | | --bg-light: #f0f0f0; |
| 4 | | --fg: #1b2229; |
| 5 | | --fg-light: #383a42; |
| 6 | | --link: #0f62fe; |
| 7 | | --code: #8c2117; |
| 8 | | } |
| 9 | | |
| 10 | 1 | body { |
| 11 | | background-color: var(--bg); |
| 12 | | color: var(--fg-light); |
| 13 | 2 | font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace; |
| 14 | 3 | font-size: 0.85rem; |
| 15 | | line-height: 1.4; |
| 4 | line-height: 1.5; |
| 16 | 5 | margin: 0 auto; |
| 17 | 6 | max-width: 50em; |
| 18 | | padding: 1.5rem; |
| 19 | | } |
| 20 | | |
| 21 | | a, |
| 22 | | a:active { |
| 23 | | color: var(--link); |
| 24 | | } |
| 25 | | |
| 26 | | a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"]) { |
| 27 | | display: inline; |
| 28 | | } |
| 29 | | |
| 30 | | a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::before { |
| 31 | | background-color: var(--bg); |
| 32 | | color: var(--fg); |
| 33 | | content: "["; |
| 34 | | display: inline-block; |
| 35 | | padding-right: 0.15em; |
| 36 | | pointer-events: none; |
| 37 | | position: relative; |
| 38 | | text-decoration: none; |
| 39 | | z-index: 1; |
| 40 | | } |
| 41 | | |
| 42 | | a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::after { |
| 43 | | background-color: var(--bg); |
| 44 | | color: var(--fg); |
| 45 | | content: "]"; |
| 46 | | display: inline-block; |
| 47 | | padding-left: 0.15em; |
| 48 | | pointer-events: none; |
| 49 | | position: relative; |
| 50 | | text-decoration: none; |
| 51 | | z-index: 1; |
| 52 | | } |
| 53 | | |
| 54 | | h1, |
| 55 | | h2, |
| 56 | | h3, |
| 57 | | h4, |
| 58 | | h5, |
| 59 | | h6, |
| 60 | | nav, |
| 61 | | time, |
| 62 | | code, |
| 63 | | pre, |
| 64 | | .metadata-block { |
| 65 | | font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace; |
| 66 | | } |
| 67 | | |
| 68 | | h1, |
| 69 | | h2, |
| 70 | | h3, |
| 71 | | h4, |
| 72 | | h5, |
| 73 | | h6 { |
| 74 | | color: var(--fg); |
| 75 | | font-size: 0.85rem; |
| 76 | | font-weight: bold; |
| 77 | | margin-bottom: 1rem; |
| 78 | | margin-top: 1rem; |
| 79 | 7 | } |
| 80 | 8 | |
| 81 | | h1 { |
| 82 | | font-size: 0.85rem; |
| 83 | | } |
| 84 | | |
| 85 | | .skip-link { |
| 86 | | height: 1px; |
| 87 | | left: -10000px; |
| 88 | | overflow: hidden; |
| 89 | | position: absolute; |
| 90 | | top: auto; |
| 91 | | width: 1px; |
| 92 | | } |
| 93 | | |
| 94 | | .skip-link:focus { |
| 95 | | height: auto; |
| 96 | | position: static; |
| 97 | | width: auto; |
| 9 | body, |
| 10 | footer { |
| 11 | padding: 1rem 0; |
| 98 | 12 | } |
| 99 | 13 | |
| 100 | 14 | nav { |
| 101 | 15 | align-items: center; |
| 102 | 16 | display: flex; |
| 103 | 17 | justify-content: space-around; |
| 104 | | margin: 3rem 0; |
| 105 | | width: 100%; |
| 18 | margin: 1rem 0; |
| 106 | 19 | } |
| 107 | 20 | |
| 108 | 21 | nav ul { |
| @@ -120,216 +33,45 @@ nav ul li { |
| 120 | 33 | text-align: center; |
| 121 | 34 | } |
| 122 | 35 | |
| 123 | | .context-box { |
| 124 | | background-color: var(--bg-light); |
| 125 | | color: var(--fg); |
| 126 | | display: grid; |
| 127 | | font-size: 0.85rem; |
| 128 | | grid-template-columns: auto 1fr; |
| 129 | | gap: 0.5rem 1rem; |
| 130 | | margin-bottom: 3rem; |
| 131 | | margin-top: 3rem; |
| 132 | | padding: 1rem; |
| 133 | | } |
| 134 | | |
| 135 | | .context-label { |
| 136 | | color: var(--link); |
| 137 | | font-weight: bold; |
| 138 | | text-transform: uppercase; |
| 139 | | } |
| 140 | | |
| 141 | | blockquote { |
| 142 | | background-color: var(--bg-light); |
| 143 | | border-left: 8px solid var(--link); |
| 144 | | margin: 1rem 0; |
| 145 | | padding: 0.5rem 1rem; |
| 146 | | } |
| 147 | | |
| 148 | | blockquote p { |
| 149 | | margin: 0; |
| 150 | | } |
| 151 | | |
| 152 | | .reply-link { |
| 153 | | border: 1px dotted var(--fg-light); |
| 154 | | margin-top: 3rem; |
| 155 | | padding: 0.5rem 1rem; |
| 156 | | } |
| 157 | | |
| 158 | 36 | img { |
| 159 | | border-style: none; |
| 160 | | width: 100%; |
| 161 | | } |
| 162 | | |
| 163 | | table { |
| 164 | | border: 1px dotted var(--fg); |
| 165 | | border-collapse: collapse; |
| 166 | | width: 100%; |
| 167 | | } |
| 168 | | |
| 169 | | colgroup, |
| 170 | | thead, |
| 171 | | tbody { |
| 172 | | border: 1px dotted var(--fg); |
| 173 | | } |
| 174 | | |
| 175 | | pre, |
| 176 | | pre>code, |
| 177 | | code { |
| 178 | | font-size: 0.85rem; |
| 37 | max-width: 100%; |
| 179 | 38 | } |
| 180 | 39 | |
| 181 | 40 | pre { |
| 182 | | background-color: var(--bg-light); |
| 183 | | margin: 0.5rem 0; |
| 184 | | overflow-x: auto; |
| 41 | border: 1px solid black; |
| 185 | 42 | padding: 0.5rem; |
| 186 | 43 | } |
| 187 | 44 | |
| 188 | | time { |
| 189 | | margin-right: 0.5rem; |
| 190 | | } |
| 191 | | |
| 192 | | :not(pre)>code { |
| 193 | | color: var(--code); |
| 45 | :not(pre) > code { |
| 46 | color: red; |
| 194 | 47 | } |
| 195 | 48 | |
| 196 | | .post { |
| 197 | | align-items: flex-start; |
| 198 | | display: flex; |
| 199 | | margin: 0.5rem 0; |
| 200 | | } |
| 201 | | |
| 202 | | .post time { |
| 203 | | flex-shrink: 0; |
| 204 | | font-size: 0.85rem; |
| 205 | | margin-right: 1rem; |
| 206 | | } |
| 207 | | |
| 208 | | article { |
| 209 | | border-bottom: 1px dotted var(--fg-light); |
| 210 | | margin-bottom: 3rem; |
| 211 | | padding-bottom: 3rem; |
| 212 | | } |
| 213 | | |
| 214 | | p { |
| 215 | | margin-top: 0.5rem; |
| 216 | | margin-bottom: 1rem; |
| 217 | | } |
| 218 | | |
| 219 | | footer { |
| 220 | | margin: 3rem 0; |
| 221 | | } |
| 222 | | |
| 223 | | #table-of-contents { |
| 224 | | border: 1px dotted var(--fg-light); |
| 225 | | font-family: Menlo, Consolas, Monaco, "Liberation Mono", monospace; |
| 226 | | font-size: 0.85rem; |
| 227 | | margin-bottom: 3rem; |
| 228 | | margin-top: 3rem; |
| 229 | | max-width: 100%; |
| 230 | | padding: 3rem; |
| 231 | | } |
| 232 | | |
| 233 | | #table-of-contents h2 { |
| 234 | | border: none; |
| 235 | | font-family: inherit; |
| 236 | | font-size: 0.85rem; |
| 237 | | text-transform: none; |
| 238 | | font-weight: normal; |
| 239 | | margin-bottom: 1rem; |
| 240 | | margin-top: 0; |
| 241 | | padding: 0; |
| 242 | | } |
| 243 | | |
| 244 | | #text-table-of-contents ul { |
| 245 | | list-style: none; |
| 246 | | padding-left: 0; |
| 247 | | margin: 0; |
| 248 | | } |
| 249 | | |
| 250 | | #text-table-of-contents ul ul { |
| 251 | | padding-left: 2ch; |
| 252 | | } |
| 253 | | |
| 254 | | #text-table-of-contents li a { |
| 255 | | align-items: baseline; |
| 256 | | display: flex; |
| 257 | | padding: 0.2rem 0; |
| 258 | | } |
| 259 | | |
| 260 | | #text-table-of-contents li a::after { |
| 261 | | background-image: radial-gradient(circle, var(--fg-light) 1px, transparent 1px); |
| 262 | | background-position: 0 bottom; |
| 263 | | background-repeat: repeat-x; |
| 264 | | background-size: 8px 100%; |
| 265 | | border-bottom: none; |
| 266 | | content: ""; |
| 267 | | flex-grow: 1; |
| 268 | | height: 4px; |
| 269 | | margin-left: 1ch; |
| 270 | | opacity: 0.6; |
| 271 | | padding-left: 1ch; |
| 272 | | text-align: right; |
| 273 | | } |
| 274 | | |
| 275 | | #text-table-of-contents li a:hover { |
| 276 | | background-color: transparent; |
| 277 | | color: var(--link); |
| 278 | | } |
| 279 | | |
| 280 | | #text-table-of-contents ul { |
| 281 | | list-style: none; |
| 282 | | margin: 0; |
| 283 | | padding-left: 0; |
| 284 | | } |
| 285 | | |
| 286 | | #text-table-of-contents ul ul { |
| 287 | | margin-top: 0.2rem; |
| 288 | | padding-left: 3ch; |
| 289 | | } |
| 290 | | |
| 291 | | .outline-2 ul li { |
| 292 | | list-style: none; |
| 293 | | } |
| 294 | | |
| 295 | | .outline-2 ul li::before { |
| 296 | | color: var(--fg-light); |
| 297 | | content: "- "; |
| 49 | .skip-link { |
| 50 | height: 1px; |
| 51 | left: -10000px; |
| 52 | overflow: hidden; |
| 53 | position: absolute; |
| 54 | top: auto; |
| 55 | width: 1px; |
| 298 | 56 | } |
| 299 | 57 | |
| 300 | | .outline-2 { |
| 301 | | |
| 302 | | p, |
| 303 | | ul, |
| 304 | | ol, |
| 305 | | blockquote, |
| 306 | | pre, |
| 307 | | table { |
| 308 | | margin-left: 3ch; |
| 309 | | } |
| 310 | | |
| 311 | | blockquote p { |
| 312 | | margin-left: 0; |
| 313 | | } |
| 58 | .skip-link:focus { |
| 59 | height: auto; |
| 60 | position: static; |
| 61 | width: auto; |
| 314 | 62 | } |
| 315 | 63 | |
| 316 | | .recent-posts { |
| 317 | | h2 { |
| 318 | | margin-bottom: 1.5rem; |
| 64 | @media (prefers-color-scheme: dark) { |
| 65 | body { |
| 66 | background-color: #000000; |
| 67 | color: #dfdfdf; |
| 319 | 68 | } |
| 320 | 69 | |
| 321 | | p { |
| 322 | | margin-top: 1.5rem; |
| 70 | a { |
| 71 | color: #67c0ff; |
| 323 | 72 | } |
| 324 | | } |
| 325 | 73 | |
| 326 | | @media (prefers-color-scheme: dark) { |
| 327 | | :root { |
| 328 | | --bg: #000000; |
| 329 | | --bg-light: #1B2229; |
| 330 | | --fg: #DFDFDF; |
| 331 | | --fg-light: #BBC2CF; |
| 332 | | --link: #67C0FF; |
| 333 | | --code: #FF6C6B; |
| 74 | pre { |
| 75 | border-color: white; |
| 334 | 76 | } |
| 335 | 77 | } |