From 8320697658328f8f2a10450cbe626a1675cc5503 Mon Sep 17 00:00:00 2001 From: bekucera Date: Wed, 12 Jun 2024 13:47:50 +0200 Subject: [PATCH] some edits --- index.html | 338 +++++++++++++++++++++--------------------- retro.css | 0 scriptsandstyles.html | 206 ------------------------- splender.css | 229 ++++++++++++++++++++++++++++ 4 files changed, 397 insertions(+), 376 deletions(-) delete mode 100644 retro.css create mode 100644 splender.css diff --git a/index.html b/index.html index 40e0652..3f8170d 100644 --- a/index.html +++ b/index.html @@ -121,210 +121,208 @@ padding: 0px; display: none; } + \ No newline at end of file +blockquote { + border-left: 3px solid #01ff70; + padding-left: 1rem; +} \ No newline at end of file diff --git a/retro.css b/retro.css deleted file mode 100644 index e69de29..0000000 diff --git a/scriptsandstyles.html b/scriptsandstyles.html index 2bb5f9e..a3b2745 100644 --- a/scriptsandstyles.html +++ b/scriptsandstyles.html @@ -61,210 +61,4 @@ padding: 0px; display: none; } - - /* - CSS retro style for markdown from https://github.com/markdowncss/retro - */ - - 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 */ - - 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: 48rem; - padding: .25rem; - } - - pre { - background-color: #333; - } - - blockquote { - border-left: 3px solid #01ff70; - padding-left: 1rem; - } \ No newline at end of file diff --git a/splender.css b/splender.css new file mode 100644 index 0000000..d86b78f --- /dev/null +++ b/splender.css @@ -0,0 +1,229 @@ +/* + CSS retro style for markdown from https://github.com/markdowncss/splendor +*/ + +@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; + } +} + +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, +.splendor-p { + font-size: 1rem; + margin-bottom: 1.3rem; +} + +h1, +.splendor-h1, +h2, +.splendor-h2, +h3, +.splendor-h3, +h4, +.splendor-h4 { + margin: 1.414rem 0 .5rem; + font-weight: inherit; + line-height: 1.42; +} + +h1, +.splendor-h1 { + margin-top: 0; + font-size: 3.998rem; +} + +h2, +.splendor-h2 { + font-size: 2.827rem; +} + +h3, +.splendor-h3 { + font-size: 1.999rem; +} + +h4, +.splendor-h4 { + font-size: 1.414rem; +} + +h5, +.splendor-h5 { + font-size: 1.121rem; +} + +h6, +.splendor-h6 { + font-size: .88rem; +} + +small, +.splendor-small { + font-size: .707em; +} + +/* https://github.com/mrmrs/fluidity */ + +img, +canvas, +iframe, +video, +svg, +select, +textarea { + max-width: 100%; +} + +@import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300); + +html { + font-size: 18px; + max-width: 100%; +} + +body { + color: #444; + font-family: 'Merriweather', Georgia, serif; + margin: 0; + max-width: 100%; +} + +/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */ + +p, +*:not(div):not(img):not(body):not(html):not(li):not(blockquote):not(p) { + margin: 1rem auto 1rem; + max-width: 36rem; + padding: .25rem; +} + +div { + width: 100%; +} + +div img { + width: 100%; +} + +blockquote p { + font-size: 1.5rem; + font-style: italic; + margin: 1rem auto 1rem; + max-width: 48rem; +} + +li { + margin-left: 2rem; +} + +/* Counteract the specificity of the gross *:not() chain. */ + +h1 { + padding: 4rem 0 !important; +} + +/* === End gross hack */ + +p { + color: #555; + height: auto; + line-height: 1.45; +} + +pre, +code { + font-family: Menlo, Monaco, "Courier New", monospace; +} + +pre { + background-color: #fafafa; + font-size: .8rem; + overflow-x: scroll; + padding: 1.125em; +} + +a, +a:visited { + color: #3498db; +} + +a:hover, +a:focus, +a:active { + color: #2980b9; +}