src

Go monorepo.
git clone git://code.dwrz.net/src
Log | Files | Refs

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 }