X-Git-Url: https://git.r.bdr.sh/rbdr/r.bdr.sh/blobdiff_plain/ad06827e061b7dd12a880955f8288a70a4070b1e..7a85c70af3300bb6055235241a5155c478a2f82d:/css/style.css?ds=inline diff --git a/css/style.css b/css/style.css index d5afdac..59bca81 100644 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,25 @@ +html { + scroll-behavior: smooth; +} + body { - font-family: "Times New Roman", serif; - text-rendering: optimizeLegibility; - font-variant: historical-ligatures; - font-feature-settings: "hlig" 1, "dlig" 1, "onum" 1, "zero" 1, "swsh" 1, "kern" 1, "medi" 1; + font-size: 1em; + font: -apple-system-body; + 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; + text-align: justify; +} + +aside { + clear: both; + padding-top: 2em; +} + +::selection { + color: #00f; + background-color: #e8e8e8; } @media only screen and (min-width: 500px) { @@ -12,48 +27,68 @@ body { overflow-x: auto; } + main { + padding: 0 0 0 66px + } + .columned { - height: calc(100vh - 200px); width: max-content; } - .columned .h2 { + .columned .h2:not(:only-child) { float: left; margin: 0 40px; - height: calc(100vh - 200px); } - .columned h2 { + .columned .h2:not(:only-child) h2 { width: 14.6em; } - .columned .h3, .columned p { - width: 22em; + .columned .h2:not(:only-child) .h3, + .columned .h2:not(:only-child) li, + .columned .h2:not(:only-child) p { + width: 24em; + } + + .columned .h2:not(:only-child) pre { width: 25em } + + header { + float: left; + margin-top: 1.2em; } +} - .columned pre { width: 25em } +.columned .h2:first-of-type pre { + line-height: 1; } -blockquote, p { max-width: 45em } +blockquote, p, article > div { + margin: 0 0.3em; + 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 } +h1, h2, h3 { font-weight: normal } +h1, h2 { font-size: 1.65em } +main h1 { font-size: 1em } +h3 { font-size: 1.25em } pre { font-family: courier, monospace; - font-size: 14px; + font-size: 0.875em; background-color: #eee; overflow-x: auto; + padding: 1em; } canvas { width: 64px; height: 64px; - display: inline-block; + display: block; background-color: #000; border: 1px solid #000; } @@ -69,6 +104,11 @@ canvas { border: 1px solid #fff; } + h1 a { + display: block; + width: 64px; + } + a { color: #5dc1fd; display: inline-block;