paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 1d44d882037e3801a29c7245b724e0c3edfcf904
parent 223fd1ae9f193e710d8620a6a55be1e1d3ad1a4f
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Sun, 12 Apr 2020 19:59:32 -0400

Clean up css

Diffstat:
Mstyle/main.css | 108++++++++++++++++++++++++++-----------------------------------------------------
1 file changed, 35 insertions(+), 73 deletions(-)

diff --git a/style/main.css b/style/main.css @@ -15,66 +15,55 @@ --info-fg: #ffffff; --border-dark: #585858; --shadow: #000000; + --font-size: 20px; + --small-font: 0.9em; + --large-font: 1.1em; + --line-height: 1.3em; } body { background-color: var(--bg); color: var(--fg); font-family: "DejaVu Sans", "Open Sans", "Noto Sans", "Roboto", "Droid Sans", sans-serif; - font-size: 18px; - line-height: 1.3em; - width: 50rem; - max-width: 60rem; + font-size: var(--font-size); + line-height: var(--line-height); + max-width: 50rem; margin: auto; -} - -h2 { - line-height: 1.3em; + padding: 0rem 0.7rem; } nav { text-align: center; } -nav > a { - padding: 0 0.5em; - font-size: 1.1em; +nav a { + padding: 0em 0.5em; + font-size: var(--large-font); font-weight: bold; text-decoration: none; } -nav > a:visited { +a, nav a:visited { color: var(--unvis-link); } -nav > a:hover { - text-decoration: underline; +a:hover, li a:hover, .feed-item:hover, nav a:hover { color: var(--hov-link); -} - -a { - background-color: transparent; - color: var(--unvis-link); + text-decoration: underline; } a:visited { color: var(--vis-link); } -a:hover { +li a, .feed-item, a:hover { text-decoration: none; - color: var(--hov-link); } li a, .feed-item { - text-decoration: none; font-weight: bold; } -li a:hover, .feed-item:hover { - text-decoration: underline; -} - pre { background-color: var(--bg-alt); font-family: "DejaVu Sans Mono", monospace; @@ -87,7 +76,7 @@ pre { code { background-color: var(--bg-alt); color: var(--fg-alt); - font-size: 0.9em; + font-size: var(--small-font); padding: 1px 4px; } @@ -96,9 +85,9 @@ kbd { color: var(--kbd-fg); border-radius: 3px; display: inline-block; - font-size: 0.9em; + font-size: var(--small-font); font-weight: 700; - padding: 0 4px; + padding: 0px 4px; } img, video { @@ -114,8 +103,7 @@ input { background-color: var(--input-bg); border: 2px inset var(--shadow); border-radius: 5px; - padding: 0.1em; - height: 1.5em; + padding: 0.5em; } button { @@ -139,16 +127,7 @@ select { } .byline { - font-size: 0.8em; -} - -.spoiler { - background-color: #000; - color: #000; -} - -.spoiler:hover{ - color: #fff; + font-size: var(--small-font); } .eff-banner { @@ -168,9 +147,9 @@ select { margin-left: 0.5em; } -.rss-icon > img { - width: 15px; - height: 15px; +.rss-icon img { + width: 1rem; + height: 1rem; } .feed-wrapper { @@ -183,15 +162,15 @@ select { .inline-notice, .inline-warning, .inline-danger { color: var(--info-fg); - font-size: 0.9em; + font-size: var(--small-font); padding: 0.5em; margin: auto; - width: 50%; + max-width: 80%; border-radius: 10px; box-shadow: 4px 4px 4px var(--shadow); } -.inline-notice > p, .inline-warning > p, .inline-danger > p { +.inline-notice p, .inline-warning p, .inline-danger p { margin: 0; } @@ -211,7 +190,7 @@ select { background-color: var(--notice-bg); color: var(--info-fg); font-weight: bold; - font-size: 0.9em; + font-size: var(--small-font); text-align: center; padding: 1em; margin: auto; @@ -221,19 +200,19 @@ select { text-align: center; clear: both; margin: 1em auto; - font-size: 1.1em; + font-size: var(--large-font); } #table-of-contents { float: right; - margin: 0 0 1em 1em; + margin: 0em 0em 1em 1em; width: 40%; border: 2px var(--border-dark) solid; background-color: var(--kbd-fg); } #toc-title { - font-size: 1.1em; + font-size: var(--large-font); font-weight: bold; padding-left: 1em; } @@ -244,35 +223,18 @@ select { #footer > p { text-align: center; - font-size: .8em; - padding: 0 6em; + font-size: var(--small-font); + padding: 0em 6em; } @media print { body { - font-size: 14px; + font-size: 100%; } } - -@media only screen and (max-width: 820px) { - body { - width: 90%; - } - - nav > a { - line-height: 1.5em; - font-size: 1.2em; - } - - .inline-notice, .inline-warning, .inline-danger { - width: 80%; - } -} - -@media only screen and (max-width: 480px) { +@media only screen and (max-width: 600px) { body { - font-size: 16px; - width: 95%; + font-size: 100%; } #table-of-contents { width: 70%;