davideisinger.com

style.scss (7563B)

---

 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;
 
   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;
 
   >li {
     &::before {
       color: #aaa;
       content: '∗';
       left: 0ch;
       position: absolute;
     }
   }
 }
 
 ol {
   margin: 0;
   padding: 0;
   counter-reset: item;
 
 
   li {
     counter-increment: item;
     display: table;
     table-layout: fixed;
     width: 100%;
   }
 
   li::before {
     content: counter(item) ".";
     display: table-cell;
     padding-right: 1ch;
     white-space: nowrap;
     width: 3ch;
   }
 
   &+a.footnote-backref {
     margin-left: -1ch;
   }
 }
 
 blockquote {
   border-left: 1ch solid #ddd;
   font-style: italic;
   margin: 0;
   padding-left: 1ch;
 
   em {
     font-style: normal;
   }
 }
 
 header,
 #content,
 footer {
   max-width: 800px;
 }
 
 footer {
   color: #aaa;
   text-align: center;
 
   hr {
     margin-bottom: 12px;
   }
 }
 
 @media only screen and (max-width: 600px) {
   footer {
     text-align: left;
 
     a {
       display: block;
     }
 
     .mobile-hidden {
       display: none;
     }
   }
 }
 
 sup {
   line-height: 0;
   font-size: 0.8em;
 }
 
 
 .nowrap {
   white-space: nowrap;
 }
 
 .references,
 .footnotes {
   font-size: 0.8em;
 
   h3 {
     margin-bottom: 0;
   }
 
   ul {
     margin-top: 0.5em;
   }
 }
 
 // IMAGES
 
 figure {
   margin: 0;
 }
 
 img {
   mix-blend-mode: multiply;
   width: 100%;
   height: auto;
 
   &.inline {
     width: auto;
     vertical-align: middle;
   }
 }
 
 p:has(img) {
   display: flex;
   gap: 1em;
   margin-block-start: 1em;
   margin-block-end: 1em;
   align-items: center;
 
   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;
 
   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;
 
   + #content > hr:first-child,
   + #content > section:first-child > hr:first-child {
     margin-top: 0;
   }
 
   &.home-intro-with-music {
     grid-template-columns: minmax(0, 1fr) 330px;
     grid-template-areas:
       "name music-heading"
       "bio music"
       "about more-music";
 
     .home-name,
     .home-bio,
     .home-about {
       padding-right: 26px;
     }
   }
 
   h1 {
     grid-area: name;
     margin: 0;
     padding-bottom: 14px;
   }
 
   p {
     margin: 0;
   }
 
   .home-bio {
     grid-area: bio;
     padding-bottom: 10px;
   }
 
   .home-about,
   .more-music {
     font-size: 14px;
     padding-bottom: 20px;
   }
 
   .home-about {
     grid-area: about;
     display: flex;
     flex-wrap: wrap;
     gap: 8px 24px;
 
     a {
       white-space: nowrap;
     }
   }
 
   .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;
 
   .track-title {
     font-size: inherit;
     font-weight: bold;
     margin-bottom: 4px;
   }
 
   .track-source {
     color: #666;
     font-size: 14px;
     line-height: 1.5;
     margin-bottom: 16px;
   }
 
   audio {
     display: block;
     width: 100%;
     min-width: 0;
     height: 42px;
   }
 }
 
 @media only screen and (max-width: 800px) {
   .home-intro {
     margin-bottom: 26px;
 
     &.home-intro-with-music {
       grid-template-columns: 1fr;
       grid-template-areas:
         "name"
         "bio"
         "about"
         "music-heading"
         "music"
         "more-music";
 
       .home-name,
       .home-bio,
       .home-about {
         padding-right: 0;
       }
     }
 
     .home-about,
     .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-icon {
     text-align: center;
     line-height: 1;
   }
 
   &:hover {
     background: #e3e3e3;
   }
 
   &: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.
   &:empty::before {
     content: "\00a0";
   }
 }
 
 .music-track {
   align-items: center;
   display: flex;
   gap: 2ch;
   padding: 1ch 0;
 
   > div {
     flex: 1;
     min-width: 0;
   }
 
   .track-heading {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 13ch;
     align-items: baseline;
     column-gap: 1ch;
   }
 
   .track-title {
     font-weight: bold;
     margin: 0;
   }
 
   .track-source {
     color: #666;
     font-size: 14px;
     line-height: 1.5;
     margin: 0;
   }
 }
 
 @media only screen and (max-width: 600px) {
   .music-track {
     display: block;
 
     .track-toggle {
       margin-bottom: 1ch;
     }
 
     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-music-cell {
       display: none;
     }
 
     .home-name,
     .home-bio,
     .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;
 
     &::before,
     &::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;
 }