Blob
1 /* -*- css-indent-offset: 2; -*- */2 @charset "utf-8";4 html, body, div, span, applet, object, iframe,5 h1, h2, h3, h4, h5, h6, p, blockquote, pre,6 a, abbr, acronym, address, big, cite, code,7 del, dfn, em, img, ins, kbd, q, s, samp,8 small, strike, strong, sub, sup, tt, var,9 b, u, i, center,10 dl, dt, dd, ol, ul, li,11 fieldset, form, label, legend,12 table, caption, tbody, tfoot, thead, tr, th, td,13 article, aside, canvas, details, embed,14 figure, figcaption, footer, header, hgroup,15 menu, nav, output, ruby, section, summary,16 time, mark, audio, video {17 margin: 0;18 padding: 0;19 border: 0;20 font-size: 100%;21 font: inherit;22 vertical-align: baseline;23 box-sizing: border-box;24 }26 html, body {27 line-height: 1;28 font-size: 18px;29 }31 body {32 background-color: #ffffea;33 color: #383838;34 padding: 1rem;35 }37 #wrapper>header>nav>ul {38 padding: 0;39 list-style: none;40 }42 #wrapper>header>nav>ul li {43 display: inline-block;44 margin: 3px 20px;45 }47 #wrapper>header>nav>ul li:first-of-type {48 margin-left: 0;49 }51 #wrapper>header>nav>ul li a {52 text-decoration: none;53 }55 /* HTML5 display-role reset for older browsers */56 article, aside, details, figcaption, figure,57 footer, header, hgroup, menu, nav, section {58 display: block;59 }61 #wrapper {62 max-width: 840px;63 margin: 0 auto;64 }66 body > header {67 max-width: 840px;68 margin: 0 auto;69 }71 body > header > nav ul {72 list-style: none;73 padding: 0;74 margin: 0;75 }77 body > header > nav li {78 display: inline;79 margin-right: 20px;80 }82 [data-title~=":"] {83 display: none;84 }86 .heading {87 margin-bottom: 30px;88 }90 h1.main-title::after {91 content: '-----------------------------------------------------------------';92 }94 p.subtitle {95 font-style: italic;96 font-size: 120%;97 margin: 0;98 }101 body main {102 margin: 0 auto;103 max-width: 840px;104 }106 article {107 margin-bottom: 30px;108 }110 h2::before, h3::before, h4::before, h5::before, h6::before {111 font-family: monospace;112 }114 h2::before { content: "## "; }115 h3::before { content: "### "; }116 h4::before { content: "#### "; }117 h5::before { content: "##### "; }118 h6::before { content: "###### "; }120 h1 {121 position: relative;122 display: table-cell;123 padding: 20px 0 30px;124 margin: 0;125 overflow: hidden;127 font-size: 200%;128 }130 /* a cool hack stolen from blog.soykaf.com */131 h1::after, h2.fragment::after {132 /* should be long enough */133 content: '=================================================================';134 position: absolute;135 bottom: 0px;136 left: 0;137 white-space: nowrap;138 font-family: monospace;139 }141 h2.fragment {142 position: relative;143 display: table-cell;144 padding: 20px 0 20px;145 margin: 0;146 overflow: hidden;147 }149 h2.fragment::after {150 content: '-----------------------------------------------------------------';151 font-family: monospace;152 z-index: -1;153 }155 h2.fragment::before {156 content: '';157 }159 h1::after, h2::before, h3::before, h4::before, h5::before, h6::before {160 /* color: hsla(0, 0%, 36%, 1); */161 color: #242424;162 }164 h1>a, h2.fragment>a {165 text-decoration: none;166 }168 h1>a:hover, h2.fragment>a:hover {169 text-decoration: underline;170 }172 h2, h3, h4, h5, h6 {173 margin: 2rem 0 1rem;174 }176 h2 {177 font-size: 180%;178 }180 h3 {181 font-size: 160%;182 }184 h4 {185 font-size: 140%;186 }188 h5 {189 font-size: 120%;190 }192 h6 {193 font-size: 100%;194 }196 ul.tags {197 padding: 0;198 margin: 0;199 list-style: none;200 }202 ul.tags::before {203 content: 'tagged with: ';204 }206 ul.tags li {207 display: inline-block;208 margin: 0 5px;209 }211 header > p {212 margin: 0;213 }215 p {216 margin: 1rem 0;217 text-align: justify;218 hyphens: auto;219 white-space: pre-wrap;220 }222 p, li {223 line-height: 1.7;224 }226 p.link::before {227 content: ' => ';228 font-family: monospace;229 }231 a {232 text-decoration: none;233 color: #4b4baf;234 }236 a:hover {237 text-decoration: underline;238 }240 /* other bit stolen from blog.soykaf.com */241 a[href*="://"]::after, a[rel*="external"]::after {242 content: " "url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");243 }245 ul, ol {246 padding-left: 30px;247 list-style: disc;248 }250 ol {251 list-style: decimal;252 }254 code {255 color: #971174;256 font-family: monospace;257 }259 pre {260 position: relative;261 padding: 20px;262 overflow-x: auto;263 border-width: 1px;264 border-color: #999999;265 border-style: solid;266 border-radius: 3px;267 line-height: 1.4;268 background-color: #fdf6e3;269 }271 pre code {272 color: #333;273 }275 em {276 font-style: italic;277 }279 strong {280 font-weight: bold;281 }283 hr {284 border: 0;285 height: 1px;286 background-color: hsla(0, 0%, 25%, 1);287 width: 70%;288 margin: 2rem auto;289 }291 blockquote, q {292 quotes: none;293 }295 blockquote {296 border-left: 3px solid hsla(113, 80%, 45%, 1);297 padding-left: 10px;298 font-style: italic;299 }301 blockquote em {302 font-style: normal;303 }305 blockquote:before, blockquote:after,306 q:before, q:after {307 content: '';308 content: none;309 }311 img {312 max-width: 100%;313 height: auto;314 display: block;315 margin: 1rem auto;316 }318 figure figcaption {319 padding: 5px 0;320 text-align: center;321 }323 table {324 border-collapse: collapse;325 border-spacing: 0;326 }328 nav.post-navigation {329 margin-top: 50px;330 display: flex;331 flex-direction: row;332 }334 nav.post-navigation a.next {335 margin-left: auto;336 }338 footer {339 border-top: 1px solid #e6e0e0;340 margin-top: 100px;341 padding-top: 10px;342 font-style: italic;343 text-align: center;344 }346 footer p {347 margin: 0;348 }351 /* dark theme */352 @media (prefers-color-scheme: dark) {353 body {354 color: #ffffea;355 background-color: #383838;356 }358 h1::after, h2.fragment::after {359 color: #5c5c5c;360 }362 h2::before, h3::before, h4::before, h5::before, h6::before {363 color: #5c5c5c;364 }366 a {367 color: #8e8eff;368 }370 code {371 color: #ea7acd;372 }374 pre {375 border-color: #999999;376 background-color: #2f2e2d;377 }379 pre code {380 color: #ffffea;381 }382 }