diff options
Diffstat (limited to 'includes/www.css')
| -rw-r--r-- | includes/www.css | 358 |
1 files changed, 198 insertions, 160 deletions
diff --git a/includes/www.css b/includes/www.css index f3bb626..6a78e00 100644 --- a/includes/www.css +++ b/includes/www.css @@ -1,161 +1,199 @@ -body { - max-width: 50em; -} - -hr { - color: var(--white); -} - -a:link { - color: var(--slate); -} - -a:visited { - color: var(--charcoal); -} - -a:visited code { - color: var(--slate); -} - -header a:link, -header a:visited, -header a:active, -nav a:link, -nav a:visited, -nav a:active { - background-color: var(--balboa); - color: var(--white); - text-decoration: underline solid var(--balboa); -} - -a:hover { - transition: 0.25s; - color: var(--white); -} - -nav a:hover { - transition: 0.25s; - text-decoration: underline solid var(--slate); -} - -p code { - background-color: var(--charcoal); - border-radius: var(--box-radius); -} - -pre { - white-space: pre-wrap; - display: block; - background-color: var(--charcoal); - padding: 1em; - border-radius: var(--box-radius); - border-left: var(--box-border); - border-right: var(--box-border); - overflow: auto; -} - -.description { - background-color: var(--ruby); - padding: 1em; - border-radius: var(--box-radius); - border-left: var(--box-border); - border-right: var(--box-border); -} - -h1, -blockquote { - font-style: oblique; -} - -ul { - list-style: none; - padding: 0; - margin: 0; -} - -article ul li { - padding: 0.5em; -} - -ul li:before { - content: "▸"; - padding-right: 0.5em; -} - -article ol li { - padding: 0.5em; -} - -p img { - display: block; - margin-top: 1em; - margin-left: auto; - margin-right: auto; - max-width: 75%; - height: auto; - border-radius: var(--box-radius); - border-left: var(--box-border); - border-right: var(--box-border); -} - -iframe { - display: block; - margin-left: auto; - margin-right: auto; -} - -.list { - overflow-x: auto; -} - -.list table { - width: 100%; -} - -.list td, -th { - padding: 0.5em; - text-align: left; - border-bottom: 1px solid var(--charcoal); -} - -.form { - text-align: center; -} - -.form input { - font-size: 1em; - margin-top: 1em; - border-radius: 3em; - box-sizing: border-box; - padding: 0.5em; - border: 0; -} - -.form .description { - display: none; -} - -footer p { - font-size: 0.75em; -} - -.centered { - text-align: center; -} - -a.donation, -a.donation:visited { - background-color: var(--ruby); - border-radius: var(--box-radius); - padding: 1em; - text-decoration: none; - color: var(--slate); - border-left: var(--box-border); - border-right: var(--box-border); -} - -a.donation:hover { - color: var(--white); +@media screen { + body { + max-width: 50em; + } + + hr { + color: var(--white); + } + + a:link { + color: var(--slate); + } + + a:visited { + color: var(--charcoal); + } + + a:visited code { + color: var(--slate); + } + + header a:link, + header a:visited, + header a:active, + nav a:link, + nav a:visited, + nav a:active { + background-color: var(--balboa); + color: var(--white); + text-decoration: underline solid var(--balboa); + } + + a:hover { + transition: 0.25s; + color: var(--white); + } + + nav a:hover { + transition: 0.25s; + text-decoration: underline solid var(--slate); + } + + p code { + background-color: var(--charcoal); + border-radius: var(--box-radius); + } + + pre { + white-space: pre-wrap; + display: block; + background-color: var(--charcoal); + padding: 1em; + border-radius: var(--box-radius); + border-left: var(--box-border); + border-right: var(--box-border); + overflow: auto; + } + + .description { + background-color: var(--ruby); + padding: 1em; + border-radius: var(--box-radius); + border-left: var(--box-border); + border-right: var(--box-border); + } + + h1, + blockquote { + font-style: oblique; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + article ul li { + padding: 0.5em; + } + + ul li:before { + content: "▸"; + padding-right: 0.5em; + } + + article ol li { + padding: 0.5em; + } + + p img { + display: block; + margin-top: 1em; + margin-left: auto; + margin-right: auto; + max-width: 75%; + height: auto; + border-radius: var(--box-radius); + border-left: var(--box-border); + border-right: var(--box-border); + } + + iframe { + display: block; + margin-left: auto; + margin-right: auto; + } + + .list { + overflow-x: auto; + } + + .list table { + width: 100%; + } + + .list td, + th { + padding: 0.5em; + text-align: left; + border-bottom: 1px solid var(--charcoal); + } + + .form { + text-align: center; + } + + .form input { + font-size: 1em; + margin-top: 1em; + border-radius: 3em; + box-sizing: border-box; + padding: 0.5em; + border: 0; + } + + .form .description { + display: none; + } + + footer p { + font-size: 0.75em; + } + + .centered { + text-align: center; + } + + a.donation, + a.donation:visited { + background-color: var(--ruby); + border-radius: var(--box-radius); + padding: 1em; + text-decoration: none; + color: var(--slate); + border-left: var(--box-border); + border-right: var(--box-border); + } + + a.donation:hover { + color: var(--white); + } + + button { + background-color: var(--white); + color: var(--balboa); + border-radius: var(--box-radius); + font-size: 1.5em; + font-family: "Iosevka Slab"; + } +} + +.row { + display: flex; + justify-content: space-between; +} + +.set { + display: flex; + justify-content: space-evenly; +} + +@media print { + body { + font-size: 10pt; + } + + body, a { + color: #195970; + } + + * { + margin: 6px; + } + + .printhide { + display: none; + } } |