X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/554c7e00901b25e1262f44ee82d57427bcf47b75..f2677410bb90736cef0e0c08c4183a89346c8550:/css/style.css?ds=sidebyside diff --git a/css/style.css b/css/style.css index 8e3f212..a1e9b6e 100644 --- a/css/style.css +++ b/css/style.css @@ -1,17 +1,69 @@ +html { + scroll-behavior: smooth; +} + body { - font-family: "Hiragino Mincho ProN", sans-serif; + font-family: "Hoefler Text", "Times New Roman", serif; + font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1; + line-height: 1.6; + letter-spacing: 0.02em; } +@media only screen and (min-width: 500px) { + body { + overflow-x: auto; + } + + .columned { + height: calc(100vh - 200px); + width: max-content; + } + + .columned .h2:not(:only-child) { + float: left; + margin: 0 40px; + height: calc(100vh - 200px); + } + + .columned .h2:not(:only-child) h2 { + width: 14.6em; + } + + .columned .h2:not(:only-child) .h3, + .columned .h2:not(:only-child) li, + .columned .h2:not(:only-child) p { + width: 22em; + } + + .columned .h2:not(:only-child) pre { width: 25em } +} + +.columned .h2:first-of-type pre { + line-height: 1; +} + +blockquote, p { max-width: 45em } +pre { max-width: 55em } +blockquote { + border-left: 4px solid #ccc; + padding-left: 10px; +} + +h1, h2, h3 { font-weight: normal } +br { display: none } pre { - font-family: Monaco, monospace; - background-color: #222; + font-family: courier, monospace; + font-size: 14px; + background-color: #eee; + overflow-x: auto; } canvas { width: 64px; height: 64px; display: inline-block; - background-color: gainsboro; + background-color: #000; + border: 1px solid #000; } @media (prefers-color-scheme: dark) { @@ -20,11 +72,22 @@ canvas { background: #000; } + canvas { + background-color: #fff; + border: 1px solid #fff; + } + a { color: #5dc1fd; + display: inline-block; + min-height: 48px; } a:visited { color: #ed6eff; } + + pre { + background-color: #222; + } }