davideisinger.com

style.scss (3479B)

---

 body {
   font-family: "courier", monospace;
   font-size: 18px;
   padding: 50px;
   line-height: 1.5em;
   background-color: #f6f6f6;
   color: #333;
 }
 
 @media only screen and (max-width: 600px) {
   body {
     -webkit-text-size-adjust: 100%;
     padding: 10px;
   }
 }
 
 h1,
 h2,
 h3 {
   font-size: 1em;
   margin: 1em 0;
 
   span {
     color: #aaa;
   }
 }
 
 h3 {
   color: #aaa;
 }
 
 a {
   color: #00a;
 }
 
 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;
 }
 
 // AUDIO
 
 .music-track {
   align-items: center;
   display: flex;
   gap: 2ch;
   padding: 2ch 0;
 }
 
 @media only screen and (max-width: 600px) {
   .music-track {
     display: block;
 
     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;
   }
 
   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;
     }
   }
 }