diff options
Diffstat (limited to 'template/style.css')
| -rwxr-xr-x | template/style.css | 436 |
1 files changed, 0 insertions, 436 deletions
diff --git a/template/style.css b/template/style.css deleted file mode 100755 index 20ed862..0000000 --- a/template/style.css +++ /dev/null | |||
| @@ -1,436 +0,0 @@ | |||
| 1 | /*@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');*/ | ||
| 2 | |||
| 3 | :root { | ||
| 4 | --base-document-width: 640px; | ||
| 5 | --base-font-size: 16px; | ||
| 6 | --base-line-heigh: 1.6em; | ||
| 7 | --base-color: #111111; | ||
| 8 | |||
| 9 | --link-color: #111111; | ||
| 10 | --link-color-hover: #111111; | ||
| 11 | |||
| 12 | --label-color: #222222; | ||
| 13 | |||
| 14 | --border-color: #eeeeee; | ||
| 15 | |||
| 16 | --badge-background-color: #eeeeee; | ||
| 17 | --badge-label-color: #111111; | ||
| 18 | |||
| 19 | --code-font-size: 13px; | ||
| 20 | |||
| 21 | --comment-form-font: 16px 'Times New Roman', Times, serif; | ||
| 22 | } | ||
| 23 | |||
| 24 | * { | ||
| 25 | box-sizing: border-box; | ||
| 26 | } | ||
| 27 | |||
| 28 | body { | ||
| 29 | background: white; | ||
| 30 | /*font-family: 'Times New Roman', Times, serif;*/ | ||
| 31 | /*font-family: 'IBM Plex Sans', sans-serif;*/ | ||
| 32 | font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; | ||
| 33 | color: var(--base-color); | ||
| 34 | font-size: var(--base-font-size); | ||
| 35 | line-height: var(--base-line-heigh); | ||
| 36 | padding: 0; | ||
| 37 | margin: 0; | ||
| 38 | padding-bottom: 100px; | ||
| 39 | } | ||
| 40 | |||
| 41 | hr { | ||
| 42 | border: 0; | ||
| 43 | border-top: 5px solid #f7f7f7; | ||
| 44 | } | ||
| 45 | |||
| 46 | |||
| 47 | ::selection { | ||
| 48 | background: rgb(255, 241, 177); | ||
| 49 | color: #000; | ||
| 50 | } | ||
| 51 | |||
| 52 | ::-moz-selection { | ||
| 53 | background: rgb(255, 241, 177); | ||
| 54 | color: #000; | ||
| 55 | } | ||
| 56 | |||
| 57 | .cursor { | ||
| 58 | cursor: pointer; | ||
| 59 | } | ||
| 60 | |||
| 61 | /* width of the page */ | ||
| 62 | |||
| 63 | .wrapper { | ||
| 64 | max-width: var(--base-document-width); | ||
| 65 | margin: 0 auto; | ||
| 66 | } | ||
| 67 | |||
| 68 | /* links */ | ||
| 69 | |||
| 70 | a { | ||
| 71 | color: black; | ||
| 72 | } | ||
| 73 | |||
| 74 | a:hover { | ||
| 75 | background: rgb(255, 241, 177); | ||
| 76 | } | ||
| 77 | |||
| 78 | |||
| 79 | /* headings */ | ||
| 80 | |||
| 81 | h1 { | ||
| 82 | font-size: 220%; | ||
| 83 | line-height: 1.2em; | ||
| 84 | } | ||
| 85 | |||
| 86 | h2 { | ||
| 87 | font-size: 180%; | ||
| 88 | line-height: 1.2em; | ||
| 89 | } | ||
| 90 | |||
| 91 | h3 { | ||
| 92 | font-size: 160%; | ||
| 93 | line-height: 1.2em; | ||
| 94 | } | ||
| 95 | |||
| 96 | h4 { | ||
| 97 | font-size: 140%; | ||
| 98 | line-height: 1.2em; | ||
| 99 | } | ||
| 100 | |||
| 101 | h5 { | ||
| 102 | font-size: 120%; | ||
| 103 | line-height: 1.2em; | ||
| 104 | } | ||
| 105 | |||
| 106 | h6 { | ||
| 107 | font-size: 100%; | ||
| 108 | line-height: 1.2em; | ||
| 109 | } | ||
| 110 | |||
| 111 | h1[itemtype="headline"] { | ||
| 112 | padding-bottom: 0; | ||
| 113 | margin-bottom: 20px; | ||
| 114 | font-size: 230%; | ||
| 115 | line-height: 1.2em; | ||
| 116 | font-weight: 800; | ||
| 117 | } | ||
| 118 | |||
| 119 | /* tables */ | ||
| 120 | |||
| 121 | table { | ||
| 122 | width: 100%; | ||
| 123 | } | ||
| 124 | |||
| 125 | table, | ||
| 126 | th, | ||
| 127 | td { | ||
| 128 | border: 1px solid black; | ||
| 129 | text-align: left; | ||
| 130 | } | ||
| 131 | |||
| 132 | th, | ||
| 133 | td { | ||
| 134 | padding: 5px 10px; | ||
| 135 | } | ||
| 136 | |||
| 137 | |||
| 138 | /* quotes */ | ||
| 139 | |||
| 140 | blockquote { | ||
| 141 | position: relative; | ||
| 142 | margin-block-start: 30px; | ||
| 143 | margin-block-end: 30px; | ||
| 144 | margin-right: 0; | ||
| 145 | } | ||
| 146 | |||
| 147 | blockquote:before { | ||
| 148 | content: ' '; | ||
| 149 | background-image: url('/assets/general/alert-light.svg'); | ||
| 150 | background-size: 30px 30px; | ||
| 151 | height: 30px; | ||
| 152 | width: 30px; | ||
| 153 | position: absolute; | ||
| 154 | left: -40px; | ||
| 155 | top: 6px; | ||
| 156 | } | ||
| 157 | |||
| 158 | blockquote p { | ||
| 159 | padding-left: 10px; | ||
| 160 | } | ||
| 161 | |||
| 162 | |||
| 163 | /* header navigation */ | ||
| 164 | |||
| 165 | .navigation { | ||
| 166 | margin-block-start: 10px; | ||
| 167 | margin-block-end: 30px; | ||
| 168 | } | ||
| 169 | |||
| 170 | .navigation header { | ||
| 171 | display: flex; | ||
| 172 | align-items: center; | ||
| 173 | } | ||
| 174 | |||
| 175 | .navigation header a { | ||
| 176 | text-decoration: none; | ||
| 177 | } | ||
| 178 | |||
| 179 | .navigation header a:hover { | ||
| 180 | text-decoration: underline; | ||
| 181 | } | ||
| 182 | |||
| 183 | .navigation header .home { | ||
| 184 | font-size: 130%; | ||
| 185 | font-weight: 700; | ||
| 186 | } | ||
| 187 | |||
| 188 | .navigation header .home a { | ||
| 189 | color: var(--base-color); | ||
| 190 | } | ||
| 191 | |||
| 192 | .navigation header .home a:hover { | ||
| 193 | text-decoration: none; | ||
| 194 | } | ||
| 195 | |||
| 196 | .navigation header nav { | ||
| 197 | flex-grow: 1; | ||
| 198 | text-align: right; | ||
| 199 | } | ||
| 200 | |||
| 201 | .navigation header nav a { | ||
| 202 | padding: 0 10px; | ||
| 203 | font-size: 100%; | ||
| 204 | font-weight: 500; | ||
| 205 | } | ||
| 206 | |||
| 207 | /* index post list */ | ||
| 208 | |||
| 209 | .post-list { | ||
| 210 | list-style-type: none; | ||
| 211 | padding: 0; | ||
| 212 | margin: 0; | ||
| 213 | } | ||
| 214 | |||
| 215 | .post-list li { | ||
| 216 | margin: 0 0 15px 0; | ||
| 217 | } | ||
| 218 | |||
| 219 | .post-list li time { | ||
| 220 | display: block; | ||
| 221 | font-size: 80%; | ||
| 222 | font-weight: 500; | ||
| 223 | line-height: 1.2em; | ||
| 224 | color: #a7a7a7; | ||
| 225 | } | ||
| 226 | |||
| 227 | .post-list li a { | ||
| 228 | display: inline-block; | ||
| 229 | text-decoration: none; | ||
| 230 | } | ||
| 231 | |||
| 232 | .post-list li a:hover {} | ||
| 233 | |||
| 234 | .post-list li a h2 { | ||
| 235 | font-weight: 400; | ||
| 236 | font-size: 100%; | ||
| 237 | margin: 0; | ||
| 238 | } | ||
| 239 | |||
| 240 | |||
| 241 | /* project list */ | ||
| 242 | |||
| 243 | .project-list { | ||
| 244 | margin-top: 60px; | ||
| 245 | } | ||
| 246 | |||
| 247 | .project-list a {} | ||
| 248 | |||
| 249 | .project-list li { | ||
| 250 | list-style-type: disclosure-closed; | ||
| 251 | padding-left: 10px; | ||
| 252 | } | ||
| 253 | |||
| 254 | |||
| 255 | /* webring */ | ||
| 256 | |||
| 257 | .webring a { | ||
| 258 | font-weight: 500; | ||
| 259 | } | ||
| 260 | |||
| 261 | |||
| 262 | /* tag badges */ | ||
| 263 | |||
| 264 | .tags { | ||
| 265 | margin-top: 5px; | ||
| 266 | } | ||
| 267 | |||
| 268 | .tags a { | ||
| 269 | font-size: 80%; | ||
| 270 | padding: 2px 10px; | ||
| 271 | border-radius: 20px; | ||
| 272 | |||
| 273 | background: var(--badge-background-color); | ||
| 274 | color: var(--badge-label-color) !important; | ||
| 275 | } | ||
| 276 | |||
| 277 | .tags a:hover { | ||
| 278 | filter: brightness(90%); | ||
| 279 | } | ||
| 280 | |||
| 281 | |||
| 282 | /* helpers */ | ||
| 283 | |||
| 284 | .top-margin { | ||
| 285 | margin-top: 60px; | ||
| 286 | } | ||
| 287 | |||
| 288 | .top-margin-huge { | ||
| 289 | margin-top: 100px; | ||
| 290 | } | ||
| 291 | |||
| 292 | code { | ||
| 293 | font-family: monospace; | ||
| 294 | background: rgb(255, 241, 177); | ||
| 295 | border-radius: 5px; | ||
| 296 | padding: 2px 8px; | ||
| 297 | font-size: var(--code-font-size); | ||
| 298 | font-weight: 500; | ||
| 299 | } | ||
| 300 | |||
| 301 | pre>code { | ||
| 302 | background: unset; | ||
| 303 | padding: unset; | ||
| 304 | |||
| 305 | padding: 15px 20px !important; | ||
| 306 | border-radius: 5px !important; | ||
| 307 | font-weight: 400; | ||
| 308 | } | ||
| 309 | |||
| 310 | pre { | ||
| 311 | font-size: var(--code-font-size); | ||
| 312 | line-height: 1.5em; | ||
| 313 | |||
| 314 | margin-block-start: 40px; | ||
| 315 | margin-block-end: 40px; | ||
| 316 | } | ||
| 317 | |||
| 318 | img, | ||
| 319 | video { | ||
| 320 | max-width: 100%; | ||
| 321 | margin: 30px auto; | ||
| 322 | display: block; | ||
| 323 | border-radius: 5px; | ||
| 324 | } | ||
| 325 | |||
| 326 | video { | ||
| 327 | background: var(--badge-background-color); | ||
| 328 | } | ||
| 329 | |||
| 330 | time { | ||
| 331 | color: var(--label-color); | ||
| 332 | font-size: 90%; | ||
| 333 | } | ||
| 334 | |||
| 335 | /* article */ | ||
| 336 | |||
| 337 | article a { | ||
| 338 | overflow-wrap: break-word; | ||
| 339 | word-wrap: break-word; | ||
| 340 | -webkit-hyphens: auto; | ||
| 341 | -ms-hyphens: auto; | ||
| 342 | -moz-hyphens: auto; | ||
| 343 | hyphens: auto; | ||
| 344 | } | ||
| 345 | |||
| 346 | article img { | ||
| 347 | max-width: 120%; | ||
| 348 | width: 120%; | ||
| 349 | position: relative; | ||
| 350 | left: -10%; | ||
| 351 | margin: 40px auto; | ||
| 352 | /* border: 1px solid #eee; */ | ||
| 353 | } | ||
| 354 | |||
| 355 | article strong { | ||
| 356 | font-weight: 600; | ||
| 357 | } | ||
| 358 | |||
| 359 | article ol { | ||
| 360 | padding-inline-start: 30px; | ||
| 361 | } | ||
| 362 | |||
| 363 | article .katex-display { | ||
| 364 | margin: 3em 0 !important; | ||
| 365 | } | ||
| 366 | |||
| 367 | /* audio */ | ||
| 368 | |||
| 369 | audio { | ||
| 370 | width: 100%; | ||
| 371 | outline: none; | ||
| 372 | } | ||
| 373 | |||
| 374 | |||
| 375 | /* footer */ | ||
| 376 | |||
| 377 | .footer { | ||
| 378 | margin-top: 70px; | ||
| 379 | padding-top: 20px; | ||
| 380 | padding-bottom: 50px; | ||
| 381 | font-size: 90%; | ||
| 382 | color: #888; | ||
| 383 | } | ||
| 384 | |||
| 385 | .footer a { | ||
| 386 | color: #666; | ||
| 387 | } | ||
| 388 | |||
| 389 | /* responsive */ | ||
| 390 | |||
| 391 | @media only screen and (max-width: 960px) { | ||
| 392 | main { | ||
| 393 | padding: 0 20px; | ||
| 394 | } | ||
| 395 | |||
| 396 | footer { | ||
| 397 | padding: 0 20px; | ||
| 398 | } | ||
| 399 | |||
| 400 | h1[itemtype="headline"] { | ||
| 401 | font-size: 220%; | ||
| 402 | } | ||
| 403 | |||
| 404 | .navigation header { | ||
| 405 | padding: 0 20px; | ||
| 406 | } | ||
| 407 | |||
| 408 | article img { | ||
| 409 | max-width: 100%; | ||
| 410 | position: initial; | ||
| 411 | margin: 20px auto; | ||
| 412 | } | ||
| 413 | } | ||
| 414 | |||
| 415 | @media only screen and (max-width: 600px) { | ||
| 416 | .navigation header { | ||
| 417 | display: block; | ||
| 418 | } | ||
| 419 | |||
| 420 | .navigation header h3 { | ||
| 421 | text-align: center; | ||
| 422 | margin-bottom: 10px; | ||
| 423 | } | ||
| 424 | |||
| 425 | .navigation header nav { | ||
| 426 | text-align: center; | ||
| 427 | } | ||
| 428 | |||
| 429 | .post-list li a h2 { | ||
| 430 | font-weight: 500; | ||
| 431 | } | ||
| 432 | |||
| 433 | .search-trigger { | ||
| 434 | display: none; | ||
| 435 | } | ||
| 436 | } \ No newline at end of file | ||
