Blob
1 body {2 font-family: monospace;3 font-size: 14px;4 max-width: 780px;5 margin: 0 auto;6 padding: 20px;7 }9 h1::before {10 content: "# ";11 }13 h2 {14 margin-top: 40px;15 }17 h2::before {18 content: "## ";19 }21 h3::before {22 content: "### ";23 }25 blockquote {26 margin: 0;27 padding: 0;28 }30 blockquote::before {31 content: "> ";32 }34 blockquote p {35 font-style: italic;36 display: inline;37 }39 p.link::before {40 content: "→ ";41 }43 strong::before { content: "*" }44 strong::after { content: "*" }46 hr {47 border: 0;48 height: 1px;49 background-color: #222;50 width: 100%;51 display: block;52 margin: 2em auto;53 }55 img {56 margin: 10px;57 display: inline-block;58 }60 section.with-image {61 }63 @media only screen and (min-width: 768px) {64 section.with-image {65 display: flex;66 flex-direction: row;67 }68 }70 section.with-image img {71 object-fit: contain;72 }74 section.with-image div {75 overflow: auto;76 }78 pre {79 overflow: auto;80 padding: 1rem;81 background-color: #f0f0f0;82 border-radius: 3px;83 }85 pre.banner {86 display: flex;87 flex-direction: row;88 justify-content: center;89 }91 code, kbd {92 color: #9d109d;93 }95 ul.link-list {96 list-style: disclosure-closed;97 }99 footer {100 margin-top: 4rem;101 font-size: 0.8rem;102 border-top: 1px solid;103 }105 @media (prefers-color-scheme: dark) {106 body {107 background-color: #222;108 color: white;109 }111 a {112 color: aqua;113 }115 hr {116 background-color: #ddd;117 }119 pre {120 background-color: #353535;121 }123 code, kbd {124 color: #ff4cff;125 }127 img {128 opacity: 0.8;129 transition: opacity .2s ease-in-out;130 }132 img:hover {133 opacity: 1;134 }135 }137 @media (max-width: 400px) {138 pre.banner { font-size: 9px; }139 }141 @media (max-width: 500px) {142 pre.banner { font-size: 10px; }143 }