dwrz.css (6604B)
1 html { 2 background-color: #efefef; 3 color: #1d1f21; 4 font-family: serif; 5 margin: 1em; 6 } 7 8 body { 9 margin: 0em auto 0em auto; 10 } 11 12 main { 13 background-color: #ffffff; 14 margin: 1em auto 1em auto; 15 } 16 17 header { 18 background-color: #ffffff; 19 padding: 1em 0em 1em 0em; 20 } 21 22 footer { 23 background-color: #ffffff; 24 margin: 0em auto 1em auto; 25 padding: 1em 0em 1em 0em; 26 } 27 28 article { 29 line-height: 1.625; 30 margin: 0em auto 0em auto; 31 padding: 1em; 32 max-width: 95%; 33 } 34 35 section { 36 margin: 0em auto 0em auto; 37 } 38 39 40 /* Blocks */ 41 audio, video { 42 display: block; 43 height: 100%; 44 margin: 0 auto 1em auto; 45 max-width: 100; 46 text-align: center; 47 width: 100%; 48 } 49 50 aside { 51 color: #4d4d4c; 52 font-size: 0.75em; 53 width: 100%; 54 } 55 56 blockquote { 57 color: #282a2e; 58 font-family: serif; 59 margin: 0 auto 0 auto; 60 width: 80%; 61 } 62 63 canvas { 64 display: block; 65 margin: 0em auto 0em auto; 66 padding: 0em; 67 } 68 69 p { 70 font-size: 1.25em; 71 } 72 73 ol, 74 ul { 75 font-size: 1.25em; 76 margin: 1em auto 1em auto; 77 } 78 79 ul ul, ul ol, ol ul, ol ol { 80 font-size: 1em; 81 } 82 83 h1 { 84 font-size: 2.5em; 85 hyphens: none; 86 margin: 0em; 87 text-align: center; 88 } 89 90 h2 { 91 font-size: 2em; 92 margin: 1em 0em 1em 0em; 93 text-align: center; 94 } 95 96 h3 { 97 font-size: 1.5em; 98 margin: 0em; 99 } 100 101 h4 { 102 font-size: 1em; 103 margin: 0em; 104 } 105 106 iframe { 107 border: 0; 108 height: 100%; 109 left: 0; 110 position: absolute; 111 top: 0; 112 width: 100%; 113 } 114 115 img { 116 height: auto; 117 max-width: 100%; 118 } 119 120 table { 121 border-collapse: collapse; 122 border: 3px solid; 123 max-width: 100%; 124 width: 100%; 125 } 126 127 td, 128 th { 129 border: 1px solid; 130 } 131 132 /* Inline */ 133 a { 134 color: #4271ae; 135 text-decoration: none; 136 } 137 138 a:hover { 139 color: #3e999f; 140 } 141 142 a:visited { 143 color: #8959a8; 144 text-decoration: none; 145 } 146 147 blockquote > cite { 148 color: #4d4d4c; 149 margin: 0 auto 0 auto; 150 } 151 152 code { 153 font: 1em, monospace; 154 } 155 156 pre > code { 157 background-color: #efefef; 158 display: block; 159 padding: 0em 0.5em 0em 0.5em; 160 white-space: pre-wrap; 161 word-wrap: break-word; 162 } 163 164 /* Classes */ 165 .bold { 166 font-style: bold; 167 } 168 169 .bordered { 170 border: solid 3px; 171 box-sizing: border-box; 172 margin: 1em 0em 1em 0em; 173 max-width: 100%; 174 padding: 0em 1em 0em 1em; 175 } 176 177 .entry-nav { 178 display: grid; 179 grid-template-columns: 1fr 1fr; 180 margin: 1em 0em 0em 0em; 181 } 182 183 .caption { 184 display: block; 185 font-size: 0.75em; 186 margin: 0 auto 0 auto; 187 text-align: center; 188 width: 80%; 189 } 190 191 .excerpt { 192 color: #222244; 193 display: block; 194 margin: 0 auto 0 auto; 195 font-size: 1em; 196 width: 100%; 197 } 198 199 .hlist li { 200 display:inline-block; 201 } 202 203 .hlist li:before { 204 content: "|"; 205 font-size: 1em; 206 } 207 208 .hlist li:first-child:before { 209 content: ''; 210 } 211 212 .nobullets { 213 list-style-type: none; 214 } 215 216 .img-center { 217 display: block; 218 margin: 1em auto 1em auto; 219 width: 100%; 220 } 221 222 .img-center-small { 223 display: block; 224 margin: 1em auto 1em auto; 225 width: 75%; 226 } 227 228 .img-round { 229 border-radius: 50%; 230 } 231 232 .italic { 233 font-style: italic; 234 } 235 236 .nav { 237 font-size: 1.25em; 238 text-align: center; 239 } 240 241 .poetry { 242 color: #4d4d4c; 243 display: block; 244 hyphens: none; 245 margin: 0 auto 0 auto; 246 width: 80%; 247 } 248 249 .text-center { 250 text-align: center; 251 } 252 253 .text-large { 254 font-size: 1.5em; 255 } 256 257 .text-normal { 258 font-size: 1em; 259 } 260 261 .text-right { 262 text-align: right; 263 } 264 265 .text-right-if-wide { 266 text-align: left; 267 } 268 269 .text-small { 270 font-size: 0.75em; 271 } 272 273 .split-row { 274 display: grid; 275 grid-template-columns: auto; 276 max-width: 100%; 277 } 278 279 .timeline-row-single { 280 display: grid; 281 grid-column-gap: 1em; 282 grid-template-columns: 1fr; 283 line-height: 1.25; 284 margin: 1em 0em 0em 0em; 285 padding: 0; 286 } 287 288 .timeline-row { 289 display: grid; 290 grid-column-gap: 1em; 291 grid-template-columns: 1fr; 292 grid-template-rows: min-content; 293 line-height: 1.25; 294 margin: 1em 0em 0em 0em; 295 padding: 0; 296 } 297 298 .video-container { 299 padding-bottom: 56.25%; /* 16:9 */ 300 position: relative; 301 width: 100%; 302 } 303 304 .wide64 { 305 max-width: 64ch; 306 } 307 308 .wide128 { 309 max-width: 128ch; 310 } 311 312 /* Background Colors */ 313 .bg-black { 314 background-color: #1d1f21; 315 } 316 317 .bg-blue { 318 background-color: #4271ae; 319 } 320 321 .bg-brown { 322 background-color: #a3685a; 323 } 324 325 .bg-cyan { 326 background-color: #3e999f; 327 } 328 329 .bg-gray0 { 330 background-color: #efefef; 331 } 332 333 .bg-gray1 { 334 background-color: #e0e0e0; 335 } 336 337 .bg-gray2 { 338 background-color: #d6d6d6; 339 } 340 341 .bg-gray3 { 342 background-color: #8e908c; 343 } 344 345 .bg-gray4 { 346 background-color: #969896; 347 } 348 349 .bg-gray5 { 350 background-color: #4d4d4c; 351 } 352 353 .bg-gray6 { 354 background-color: #282a2e; 355 } 356 357 .bg-green { 358 background-color: #718c00; 359 } 360 361 .bg-orange { 362 background-color: #f5871f; 363 } 364 365 .bg-purple { 366 background-color: #8959a8; 367 } 368 369 .bg-red { 370 background-color: #c82829; 371 } 372 373 .bg-white { 374 background-color: #ffffff; 375 } 376 377 .bg-yellow { 378 background-color: #eab700; 379 } 380 381 /* Border Colors */ 382 .br-black { 383 border-color: #1d1f21; 384 } 385 386 .br-blue { 387 border-color: #4271ae; 388 } 389 390 .br-brown { 391 border-color: #a3685a; 392 } 393 394 .br-cyan { 395 border-color: #3e999f; 396 } 397 398 .br-gray0 { 399 border-color: #efefef; 400 } 401 402 .br-gray1 { 403 border-color: #e0e0e0; 404 } 405 406 .br-gray2 { 407 border-color: #d6d6d6; 408 } 409 410 .br-gray3 { 411 border-color: #8e908c; 412 } 413 414 .br-gray4 { 415 border-color: #969896; 416 } 417 418 .br-gray5 { 419 border-color: #4d4d4c; 420 } 421 422 .br-gray6 { 423 border-color: #282a2e; 424 } 425 426 .br-green { 427 border-color: #718c00; 428 } 429 430 .br-orange { 431 border-color: #f5871f; 432 } 433 434 .br-purple { 435 border-color: #8959a8; 436 } 437 438 .br-red { 439 border-color: #c82829; 440 } 441 442 .br-white { 443 border-color: #ffffff; 444 } 445 446 .br-yellow { 447 border-color: #eab700; 448 } 449 450 /* Colors */ 451 .black { 452 color: #1d1f21; 453 } 454 455 .blue { 456 color: #4271ae; 457 } 458 459 .brown { 460 color: #a3685a; 461 } 462 463 .cyan { 464 color: #3e999f; 465 } 466 467 .gray0 { 468 color: #efefef; 469 } 470 471 .gray1 { 472 color: #e0e0e0; 473 } 474 475 .gray2 { 476 color: #d6d6d6; 477 } 478 479 .gray3 { 480 color: #8e908c; 481 } 482 483 .gray4 { 484 color: #969896; 485 } 486 487 .gray5 { 488 color: #4d4d4c; 489 } 490 491 .gray6 { 492 color: #282a2e; 493 } 494 495 .green { 496 color: #718c00; 497 } 498 499 .orange { 500 color: #f5871f; 501 } 502 503 .purple { 504 color: #8959a8; 505 } 506 507 .red { 508 color: #c82829; 509 } 510 511 .white { 512 color: #ffffff; 513 } 514 515 .yellow { 516 color: #eab700; 517 } 518 519 /* Media */ 520 @media print { 521 h1, h2, h3, h4, h5, h6 { 522 page-break-after: avoid; 523 } 524 } 525 526 @media only screen and (min-width: 1px) { 527 body { 528 max-width: 95%; 529 } 530 } 531 532 @media only screen and (min-width: 600px) { 533 body { 534 max-width: 95%; 535 } 536 .timeline-row { 537 grid-template-columns: 1fr 1fr; 538 } 539 } 540 541 @media only screen and (min-width: 800px) { 542 body { 543 max-width: 80%; 544 } 545 .timeline-row { 546 grid-template-columns: 1fr 1fr; 547 } 548 } 549 550 @media only screen and (min-width: 1000px) { 551 body { 552 max-width: 66%; 553 } 554 .split-row { 555 grid-template-columns: auto auto; 556 } 557 .text-right-if-wide { 558 text-align: right; 559 } 560 .timeline-row { 561 grid-template-columns: 1fr 1fr; 562 } 563 } 564 565 @media only screen and (min-width: 1200px) { 566 body { 567 max-width: 50%; 568 } 569 }