diff options
| -rw-r--r-- | footer | 1 | ||||
| -rw-r--r-- | header | 6 | ||||
| -rw-r--r-- | retro.css | 208 |
3 files changed, 215 insertions, 0 deletions
@@ -0,0 +1 @@ +</body></html> @@ -0,0 +1,6 @@ +<html> + <header> + <link href="retro.css" media="screen, projection" rel="stylesheet" type="text/css"> + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + </header> +<body> diff --git a/retro.css b/retro.css new file mode 100644 index 0000000..32470be --- /dev/null +++ b/retro.css @@ -0,0 +1,208 @@ + + +pre, +code { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +pre { + padding: .5rem; + line-height: 1.25; + overflow-x: scroll; +} + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} + +a, +a:visited { + color: #01ff70; +} + +a:hover, +a:focus, +a:active { + color: #2ecc40; +} + +.retro-no-decoration { + text-decoration: none; +} + +html { + font-size: 12px; +} + +@media screen and (min-width: 32rem) and (max-width: 48rem) { + html { + font-size: 15px; + } +} + +@media screen and (min-width: 48rem) { + html { + font-size: 16px; + } +} + +body { + line-height: 1.85; +} + +p, +.retro-p { + font-size: 1rem; + margin-bottom: 1.3rem; +} + +h1, +.retro-h1, +h2, +.retro-h2, +h3, +.retro-h3, +h4, +.retro-h4 { + margin: 1.414rem 0 .5rem; + font-weight: inherit; + line-height: 1.42; +} + +h1, +.retro-h1 { + margin-top: 0; + font-size: 3.998rem; +} + +h2, +.retro-h2 { + font-size: 2.827rem; +} + +h3, +.retro-h3 { + font-size: 1.999rem; +} + +h4, +.retro-h4 { + font-size: 1.414rem; +} + +h5, +.retro-h5 { + font-size: 1.121rem; +} + +h6, +.retro-h6 { + font-size: .88rem; +} + +small, +.retro-small { + font-size: .707em; +} + +/* https://github.com/mrmrs/fluidity/blob/master/css/fluidity.css */ + +img, +canvas, +iframe, +video, +svg, +select, +textarea { + max-width: 100%; +} + +html, +body { + background-color: #222; + min-height: 100%; +} + +html { + /* font-size: 18px; */ +} + +body { + color: #fafafa; + font-family: "Courier New"; + line-height: 1.45; + margin: 6rem auto 1rem; + max-width: 60rem; + padding: .25rem; +} + +pre { + background-color: #333; +} + +blockquote { + border-left: 3px solid #01ff70; + padding-left: 1rem; +} + + +dt { + color: #df0101; + color: #ff8000; +} |