From 45feb1a7d99ccb0fe3e567c61b59232f20108ca3 Mon Sep 17 00:00:00 2001 From: Landon Curt Noll Date: Wed, 6 Dec 2023 00:53:12 -0800 Subject: [PATCH] update ioccc.css Now code, pre, mono font set starts with "Menlo, Monaco, Consolas" before going to the other font defaults. Established IOCCC defaults for body, pre, code, blockquote, a (link, visited, focus, hover, active). Added pandoc --standalone defaults for some property settings that we NOT part of the "Establish IOCCC defaults" set above. The assumption is that the tools that convert markdown to HTML via pandoc will NOT use --standalone because we want finer control over CSS. Even so, there may be good reasons to go with most of what pandoc recommends: unless we have good reason to NOT do so. Reduce font size to 90% (0.9em) for screen that is >= 401 pixels AND <= 800 pixels wide. Reduce font size to 80% (0.8em) for screen is <- 400 pixels wide. Added print media property based on pandoc --standalone. This is still rather experimental. --- ioccc.css | 184 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 181 insertions(+), 3 deletions(-) diff --git a/ioccc.css b/ioccc.css index b85c288c8..0af6a5c05 100644 --- a/ioccc.css +++ b/ioccc.css @@ -359,7 +359,7 @@ template { } .mono { - font-family: "Lucida Console", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace; } * { @@ -371,7 +371,7 @@ h1, h2, h3, h4, h5, h6 { } pre, code { - font-family: "Lucida Console", "Courier New", monospace; + font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace; } body { @@ -380,15 +380,163 @@ body { /* Top level ===================================================================================== */ +/* Establish IOCCC defaults */ + * { box-sizing: border-box; background: whitesmoke; } body { + margin: 0 auto; padding: 10px; + hyphens: auto; + overflow-wrap: break-word; + text-rendering: optimizeLegibility; + font-kerning: normal; } +pre, code { + margin: 1em 0; + hyphens: manual; + overflow-wrap: normal; + overflow: visible; + white-space: pre-wrap; +} + +blockquote { + margin: 1em 0 1em 1.7em; + padding-left: 1em; + border-left: 2px solid #e6e6e6; + color: #606060; +} + +a { + outline-color: transparent; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +/* + * Pandoc recommended defaults + * + * These values are produced by pandoc when converting markdown to HTML + * when using the --standalone option as of 2023 Nov 6. + * + * We removed pandoc --standalone CSS for: + * code + * pre + * blockquote + * a + * a:visited + * because they are handled above in the Establish IOCCC defaults section. + */ +p { + margin: 1em 0; +} +img { + max-width: 100%; +} +svg { + height: auto; + max-width: 100%; +} +h1, h2, h3, h4, h5, h6 { + margin-top: 1.4em; +} +h5, h6 { + font-size: 1em; + font-style: italic; +} +h6 { + font-weight: normal; +} +ol, ul { + padding-left: 1.7em; + margin-top: 1em; +} +li > ol, li > ul { + margin-top: 0; +} +.sourceCode { + background-color: transparent; + overflow: visible; +} +hr { + background-color: #1a1a1a; + border: none; + height: 1px; + margin: 1em 0; +} +table { + margin: 1em 0; + border-collapse: collapse; + width: 100%; + overflow-x: auto; + display: block; + font-variant-numeric: lining-nums tabular-nums; +} +table caption { + margin-bottom: 0.75em; +} +tbody { + margin-top: 0.5em; + border-top: 1px solid #1a1a1a; + border-bottom: 1px solid #1a1a1a; +} +th { + border-top: 1px solid #1a1a1a; + padding: 0.25em 0.5em 0.25em 0.5em; +} +td { + padding: 0.125em 0.5em 0.25em 0.5em; +} +header { + margin-bottom: 4em; + text-align: center; +} +#TOC li { + list-style: none; +} +#TOC ul { + padding-left: 1.3em; +} +#TOC > ul { + padding-left: 0; +} +#TOC a:not(:hover) { + text-decoration: none; +} +span.smallcaps{font-variant: small-caps;} +div.columns{display: flex; gap: min(4vw, 1.5em);} +div.column{flex: auto; overflow-x: auto;} +div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} +/* The extra [class] is a hack that increases specificity enough to override a similar rule in reveal.js */ +ul.task-list[class]{list-style: none;} +ul.task-list li input[type="checkbox"] { + font-size: inherit; + width: 0.8em; + margin: 0 0.8em 0.2em -1.6em; + vertical-align: middle; +} +.display.math{display: block; text-align: center; margin: 0.5rem auto;} + /* Header ======================================================================================== */ /* Style the header */ @@ -533,13 +681,16 @@ body { * and adjust the defaults for a somewhat smaller screen. */ @media screen and (max-width: 800px) { + body { + font-size: 0.9em; + } .header { padding: 0; border: 0; text-align: center; } .header h1 { - font-size: 2em; + font-size: 1.75em; } .header h2 { font-size: 1.5em; @@ -572,6 +723,9 @@ body { * and adjust the defaults for a small screen. */ @media screen and (max-width: 400px) { + body { + font-size: 0.8em; + } .header { padding: 0; border: 0; @@ -611,3 +765,27 @@ body { font-size: 1em; } } + +/* + * When printing + * + * These values are produced by pandoc when converting markdown to HTML + * when using the --standalone option. + */ +@media print { + html { + background-color: white; + } + body { + background-color: transparent; + color: black; + font-size: 12pt; + } + p, h2, h3 { + orphans: 3; + widows: 3; + } + h2, h3, h4 { + page-break-after: avoid; + } +}