davideisinger.com

style.css (8144B)

---

 @charset "UTF-8";
 body {
   margin: 8px;
   font-family: "courier", monospace;
   font-size: 18px;
   padding: 50px;
   line-height: 1.5em;
   background-color: #f6f6f6;
   color: #333;
 }
 
 @media only screen and (max-width: 800px) {
   body {
     -webkit-text-size-adjust: 100%;
     font-size: 16px;
   }
 }
 
 @media only screen and (max-width: 600px) {
   body {
     padding: 10px;
   }
 }
 
 h1,
 h2,
 h3 {
   font-size: 1em;
   margin: 1em 0;
 }
 
 h1 span,
 h2 span,
 h3 span {
   color: #aaa;
 }
 
 h3 {
   color: #aaa;
 }
 
 a {
   color: #00a;
   text-underline-offset: 2px;
 }
 
 header > h1 {
   margin: 1em 0;
 }
 
 hr {
   border: 0;
   border-top: 2px solid #ddd;
 }
 
 ul {
   list-style: none;
   padding: 0 0 0 2ch;
   position: relative;
 }
 
 ul > li::before {
   color: #aaa;
   content: "∗";
   left: 0ch;
   position: absolute;
 }
 
 ol {
   margin: 0;
   padding: 0;
   counter-reset: item;
 }
 
 ol li {
   counter-increment: item;
   display: table;
   table-layout: fixed;
   width: 100%;
 }
 
 ol li::before {
   content: counter(item) ".";
   display: table-cell;
   padding-right: 1ch;
   white-space: nowrap;
   width: 3ch;
 }
 
 ol + a.footnote-backref {
   margin-left: -1ch;
 }
 
 blockquote {
   border-left: 1ch solid #ddd;
   font-style: italic;
   margin: 0;
   padding-left: 1ch;
 }
 
 blockquote em {
   font-style: normal;
 }
 
 header,
 #content,
 footer {
   max-width: 800px;
 }
 
 footer {
   color: #aaa;
   text-align: center;
 }
 
 footer hr {
   margin-bottom: 12px;
 }
 
 @media only screen and (max-width: 600px) {
   footer {
     text-align: left;
   }
   footer a {
     display: block;
   }
   footer .mobile-hidden {
     display: none;
   }
 }
 
 sup {
   line-height: 0;
   font-size: 0.8em;
 }
 
 .nowrap {
   white-space: nowrap;
 }
 
 .references,
 .footnotes {
   font-size: 0.8em;
 }
 
 .references h3,
 .footnotes h3 {
   margin-bottom: 0;
 }
 
 .references ul,
 .footnotes ul {
   margin-top: 0.5em;
 }
 
 /* IMAGES */
 figure {
   margin: 0;
 }
 
 .captioned-image {
   margin: 1em 0;
 }
 
 .captioned-image > a {
   display: block;
   line-height: 0;
 }
 
 .captioned-image figcaption {
   margin-top: 0.5em;
   font-size: 0.8em;
   font-style: italic;
   line-height: 1.5;
 }
 
 img {
   mix-blend-mode: multiply;
   width: 100%;
   height: auto;
 }
 
 img.inline {
   width: auto;
   vertical-align: middle;
 }
 
 p:has(img) {
   display: flex;
   gap: 1em;
   margin-block-start: 1em;
   margin-block-end: 1em;
   align-items: center;
 }
 
 p:has(img) a {
   line-height: 0;
 }
 
 a:has(> img.float-right) {
   display: block;
   float: right;
   width: 50%;
   margin: 0 0 1em 1.5em;
   line-height: 0;
 }
 
 @media only screen and (max-width: 600px) {
   a:has(> img.float-right) {
     float: none;
     width: 100%;
     margin: 1em 0;
   }
 }
 
 /* CODE */
 code {
   background-color: #ddd;
   border-radius: 3px;
   font-family: "courier", monospace;
   padding: 1px 1ch;
 }
 
 .highlight,
 pre {
   overflow: auto;
 }
 
 .highlight code,
 pre code {
   background: none;
   padding: 0;
   border-radius: 0;
 }
 
 pre {
   background-color: #2e3440;
   color: #d8dee9;
   margin: 0;
   padding: 1ch 1ch;
   border-radius: 3px;
 }
 
 /* HOMEPAGE INTRO */
 .home-intro {
   display: grid;
   grid-template-areas: "name" "bio" "about";
   margin-top: 1em;
   margin-bottom: 0;
 }
 
 .home-intro + #content > hr:first-child,
 .home-intro + #content > section:first-child > hr:first-child {
   margin-top: 0;
 }
 
 .home-intro.home-intro-with-music {
   grid-template-columns: minmax(0, 1fr) 330px;
   grid-template-areas: "name music-heading" "bio music" "about more-music";
 }
 
 .home-intro.home-intro-with-music .home-name,
 .home-intro.home-intro-with-music .home-bio,
 .home-intro.home-intro-with-music .home-about {
   padding-right: 26px;
 }
 
 .home-intro h1 {
   grid-area: name;
   margin: 0;
   padding-bottom: 14px;
 }
 
 .home-intro p {
   margin: 0;
 }
 
 .home-intro .home-bio {
   grid-area: bio;
   padding-bottom: 10px;
 }
 
 .home-intro .home-about,
 .home-intro .more-music {
   font-size: 14px;
   padding-bottom: 20px;
 }
 
 .home-intro .home-about {
   grid-area: about;
   display: flex;
   flex-wrap: wrap;
   gap: 8px 24px;
 }
 
 .home-intro .home-about a {
   white-space: nowrap;
 }
 
 .home-intro .more-music {
   grid-area: more-music;
 }
 
 .home-music-cell {
   border-left: 2px solid #ddd;
   padding-left: 26px;
   min-width: 0;
 }
 
 .home-music-heading {
   grid-area: music-heading;
   color: #666;
   font-size: 13px;
   font-weight: normal;
   letter-spacing: 1.1px;
   line-height: 28.8px;
   text-transform: uppercase;
   margin: 0;
   padding-top: 4px;
   padding-bottom: 10px;
 }
 
 .home-music {
   grid-area: music;
   padding-bottom: 18px;
 }
 
 .home-music .track-title {
   font-size: inherit;
   font-weight: bold;
   margin-bottom: 4px;
 }
 
 .home-music .track-source {
   color: #666;
   font-size: 14px;
   line-height: 1.5;
   margin-bottom: 16px;
 }
 
 .home-music audio {
   display: block;
   width: 100%;
   min-width: 0;
   height: 42px;
 }
 
 @media only screen and (max-width: 800px) {
   .home-intro {
     margin-bottom: 26px;
   }
   .home-intro.home-intro-with-music {
     grid-template-columns: 1fr;
     grid-template-areas: "name" "bio" "about" "music-heading" "music" "more-music";
   }
   .home-intro.home-intro-with-music .home-name,
   .home-intro.home-intro-with-music .home-bio,
   .home-intro.home-intro-with-music .home-about {
     padding-right: 0;
   }
   .home-intro .home-about,
   .home-intro .more-music {
     padding-bottom: 0;
   }
   .home-music-cell {
     border-left: 0;
     padding-left: 0;
   }
   .home-music-heading {
     border-top: 2px solid #ddd;
     padding-top: 20px;
     margin-top: 26px;
   }
 }
 
 /* AUDIO */
 .track-toggle {
   flex: 0 0 96px;
   display: inline-grid;
   grid-template-columns: 1.25em 1fr;
   align-items: center;
   column-gap: 0;
   box-sizing: border-box;
   width: 96px;
   text-align: center;
   padding: 8px 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   background: #eee;
   color: #00a;
   font: inherit;
   font-size: 14px;
   cursor: pointer;
 }
 
 .track-toggle .track-toggle-icon {
   text-align: center;
   line-height: 1;
 }
 
 .track-toggle:hover {
   background: #e3e3e3;
 }
 
 .track-toggle:focus-visible {
   outline: 2px solid #00a;
   outline-offset: 3px;
 }
 
 .track-playback {
   display: block;
   color: #666;
   font-size: 14px;
   font-variant-numeric: tabular-nums;
   text-align: right;
   white-space: nowrap;
   /* Preserve the text baseline before a timestamp appears. */
 }
 
 .track-playback:empty::before {
   content: "\00a0";
 }
 
 .music-track {
   align-items: center;
   display: flex;
   gap: 2ch;
   padding: 1ch 0;
 }
 
 .music-track > div {
   flex: 1;
   min-width: 0;
 }
 
 .music-track .track-heading {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 13ch;
   align-items: baseline;
   column-gap: 1ch;
 }
 
 .music-track .track-title {
   font-weight: bold;
   margin: 0;
 }
 
 .music-track .track-source {
   color: #666;
   font-size: 14px;
   line-height: 1.5;
   margin: 0;
 }
 
 @media only screen and (max-width: 600px) {
   .music-track {
     display: block;
   }
   .music-track .track-toggle {
     margin-bottom: 1ch;
   }
   .music-track audio {
     padding-bottom: 1ch;
   }
 }
 
 audio::-webkit-media-controls-panel {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
 @media print {
   body {
     background-color: white;
     font-size: 18px;
     padding: 0;
   }
   @page {
     size: a5;
     margin: 1in 0.8in;
   }
   footer {
     display: none;
   }
   .home-intro.home-intro-with-music {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas: "name" "bio" "about";
   }
   .home-intro.home-intro-with-music .home-music-cell {
     display: none;
   }
   .home-intro.home-intro-with-music .home-name,
   .home-intro.home-intro-with-music .home-bio,
   .home-intro.home-intro-with-music .home-about {
     padding-right: 0;
   }
   h2,
   h3,
   hr {
     page-break-after: avoid;
   }
   blockquote,
   li {
     page-break-inside: avoid;
   }
   #content {
     max-width: none;
   }
   .page-break {
     page-break-after: always;
   }
   a.footnote-backref {
     display: none;
   }
   code {
     background: none;
     border-radius: 0;
     padding: 0;
   }
   code::before,
   code::after {
     content: "`";
   }
   ol p {
     display: inline;
   }
 }
 
 .visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
 }
 
 #content:focus {
   outline: none;
 }