src

dwrz.css (6785B)

---

 html {
   background-color: #efefef;
   color: #1d1f21;
   font-family: serif;
   margin: 1em;
 }
 
 body {
   margin: 0em auto 0em auto;
 }
 
 main {
   background-color: #ffffff;
   margin: 1em auto 1em auto;
 }
 
 header {
   background-color: #ffffff;
   padding: 1em 0em 1em 0em;
 }
 
 footer {
   background-color: #ffffff;
   margin: 0em auto 1em auto;
   padding: 1em 0em 1em 0em;
 }
 
 article {
   line-height: 1.625;
   margin: 0em auto 0em auto;
   padding: 1em;
 }
 
 section {
   margin: 0em auto 0em auto;
 }
 
 
 /* Blocks */
 audio, video {
   display: block;
   height: 100%;
   margin: 1em auto;
   max-width: 100%;
   text-align: center;
   width: 100%;
 }
 
 aside {
   color: #4d4d4c;
   font-size: 0.75em;
   padding: 1em 0;
   width: 100%;
 }
 
 blockquote {
   color: #282a2e;
   font-family: serif;
   margin: 0 auto 0 auto;
   width: 80%;
 }
 
 canvas {
   display: block;
   margin: 0em auto 0em auto;
   padding: 0em;
 }
 
 p {
   font-size: 1.25em;
   margin: 0;
 }
 
 ol,
 ul {
   font-size: 1.25em;
   margin: 0;
 }
 
 ul ul, ul ol, ol ul, ol ol {
   font-size: 1em;
 }
 
 h1 {
   font-size: 2.5em;
   hyphens: none;
   margin: 0em;
   text-align: center;
 }
 
 h2 {
   font-size: 2em;
   margin: 1em 0;
   text-align: center;
 }
 
 h3 {
   font-size: 1.5em;
   margin: 0em;
 }
 
 h4 {
   font-size: 1em;
   margin: 0em;
 }
 
 iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
 }
 
 img {
   height: auto;
   max-width: 100%;
 }
 
 table {
   border-collapse: collapse;
   border: 3px solid;
   max-width: 100%;
   width: 100%;
 }
 
 td,
 th {
   border: 1px solid;
 }
 
 /* Inline */
 a {
   color: #4271ae;
   text-decoration: none;
 }
 
 a:hover {
   color: #3e999f;
 }
 
 a:visited {
   color: #8959a8;
   text-decoration: none;
 }
 
 blockquote > cite {
   color: #4d4d4c;
   margin: 0 auto 0 auto;
 }
 
 code {
   font: 1em, monospace;
 }
 
 pre {
   margin: 0;
 }
 
 pre > code {
   background-color: #efefef;
   display: block;
   padding: 0em 0.5em 0em 0.5em;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
 /* Classes */
 .bold {
   font-style: bold;
 }
 
 .bordered {
   border: solid 3px;
   box-sizing: border-box;
   max-width: 100%;
   padding: 1em;
 }
 
 .entry-nav {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin: 1em 0em 0em 0em;
 }
 
 .caption {
   display: block;
   font-size: 0.75em;
   margin: 0 auto 0 auto;
   text-align: center;
   width: 80%;
 }
 
 .excerpt {
   color: #222244;
   display: block;
   margin: 0 auto 0 auto;
   font-size: 1em;
   width: 100%;
 }
 
 .hlist li {
   display:inline-block;
 }
 
 .hlist li:before {
   content: "|";
   font-size: 1em;
 }
 
 .hlist li:first-child:before {
   content: '';
 }
 
 .nobullets {
   list-style-type: none;
 }
 
 .img-center {
   display: block;
   margin: 0 auto;
   width: 100%;
 }
 
 .img-center-small {
   display: block;
   margin: 0 auto;
   width: 75%;
 }
 
 .img-round {
   border-radius: 50%;
 }
 
 .italic {
   font-style: italic;
 }
 
 .nav {
   font-size: 1.25em;
   text-align: center;
 }
 
 .poetry {
   color: #4d4d4c;
   display: block;
   hyphens: none;
   margin: 0 auto 0 auto;
   width: 80%;
 }
 
 .text-center {
   text-align: center;
 }
 
 .text-large {
   font-size: 1.5em;
 }
 
 .text-normal {
   font-size: 1em;
 }
 
 .text-right {
   text-align: right;
 }
 
 .text-right-if-wide {
   text-align: left;
 }
 
 .text-small {
   font-size: 0.75em;
 }
 
 .split-row {
   display: grid;
   grid-template-columns: auto;
   max-width: 100%;
 }
 
 .timeline-row-single {
   display: grid;
   grid-column-gap: 1em;
   grid-template-columns: 1fr;
   line-height: 1.25;
   margin: 1em 0em 0em 0em;
   padding: 0;
 }
 
 .timeline-row {
   display: grid;
   grid-column-gap: 1em;
   grid-template-columns: 1fr;
   grid-template-rows: min-content;
   line-height: 1.25;
   margin: 1em 0em 0em 0em;
   padding: 0;
 }
 
 .video-container {
   padding-bottom: 56.25%; /* 16:9 */
   position: relative;
   width: 100%;
 }
 
 .wide64 {
   align-items: stretch;
   display: flex;
   flex-direction: column;
   gap: 1em;
   justify-content: center;
   margin: 0em auto 1em auto;
   max-width: 64ch;
 }
 
 .wide64 > a,
 .wide64 > img,
 .wide64 > video {
   align-self: center;
 }
 
 .wide64 > h2 { margin: 1em 0; }
 
 .wide128 {
   max-width: 128ch;
 }
 
 /* Background Colors */
 .bg-black {
   background-color: #1d1f21;
 }
 
 .bg-blue {
   background-color: #4271ae;
 }
 
 .bg-brown {
   background-color: #a3685a;
 }
 
 .bg-cyan {
   background-color: #3e999f;
 }
 
 .bg-gray0 {
   background-color: #efefef;
 }
 
 .bg-gray1 {
   background-color: #e0e0e0;
 }
 
 .bg-gray2 {
   background-color: #d6d6d6;
 }
 
 .bg-gray3 {
   background-color: #8e908c;
 }
 
 .bg-gray4 {
   background-color: #969896;
 }
 
 .bg-gray5 {
   background-color: #4d4d4c;
 }
 
 .bg-gray6 {
   background-color: #282a2e;
 }
 
 .bg-green {
   background-color: #718c00;
 }
 
 .bg-orange {
   background-color: #f5871f;
 }
 
 .bg-purple {
   background-color: #8959a8;
 }
 
 .bg-red {
   background-color: #c82829;
 }
 
 .bg-white {
   background-color: #ffffff;
 }
 
 .bg-yellow {
   background-color: #eab700;
 }
 
 /* Border Colors */
 .br-black {
   border-color: #1d1f21;
 }
 
 .br-blue {
   border-color: #4271ae;
 }
 
 .br-brown {
   border-color: #a3685a;
 }
 
 .br-cyan {
   border-color: #3e999f;
 }
 
 .br-gray0 {
   border-color: #efefef;
 }
 
 .br-gray1 {
   border-color: #e0e0e0;
 }
 
 .br-gray2 {
   border-color: #d6d6d6;
 }
 
 .br-gray3 {
   border-color: #8e908c;
 }
 
 .br-gray4 {
   border-color: #969896;
 }
 
 .br-gray5 {
   border-color: #4d4d4c;
 }
 
 .br-gray6 {
   border-color: #282a2e;
 }
 
 .br-green {
   border-color: #718c00;
 }
 
 .br-orange {
   border-color: #f5871f;
 }
 
 .br-purple {
   border-color: #8959a8;
 }
 
 .br-red {
   border-color: #c82829;
 }
 
 .br-white {
   border-color: #ffffff;
 }
 
 .br-yellow {
   border-color: #eab700;
 }
 
 /* Colors */
 .black {
   color: #1d1f21;
 }
 
 .blue {
   color: #4271ae;
 }
 
 .brown {
   color: #a3685a;
 }
 
 .cyan {
   color: #3e999f;
 }
 
 .gray0 {
   color: #efefef;
 }
 
 .gray1 {
   color: #e0e0e0;
 }
 
 .gray2 {
   color: #d6d6d6;
 }
 
 .gray3 {
   color: #8e908c;
 }
 
 .gray4 {
   color: #969896;
 }
 
 .gray5 {
   color: #4d4d4c;
 }
 
 .gray6 {
   color: #282a2e;
 }
 
 .green {
   color: #718c00;
 }
 
 .orange {
   color: #f5871f;
 }
 
 .purple {
   color: #8959a8;
 }
 
 .red {
   color: #c82829;
 }
 
 .white {
   color: #ffffff;
 }
 
 .yellow {
   color: #eab700;
 }
 
 /* Media */
 @media print {
   h1, h2, h3, h4, h5, h6 {
     page-break-after: avoid;
   }
 }
 
 @media only screen and (min-width: 1px) {
   body {
     max-width: 95%;
   }
 }
 
 @media only screen and (min-width: 600px) {
   body {
     max-width: 95%;
   }
   .timeline-row {
     grid-template-columns: 1fr 1fr;
   }
 }
 
 @media only screen and (min-width: 800px) {
   body {
     max-width: 80%;
   }
   .timeline-row {
     grid-template-columns: 1fr 1fr;
   }
 }
 
 @media only screen and (min-width: 1000px) {
   body {
     max-width: 66%;
   }
   .split-row {
     grid-template-columns: auto auto;
   }
   .text-right-if-wide {
     text-align: right;
   }
   .timeline-row {
     grid-template-columns: 1fr 1fr;
   }
 }
 
 @media only screen and (min-width: 1200px) {
   body {
     max-width: 50%;
   }
 }