From 6aa64d77e0f8ef2e42bdb90bc5ed3f6557e3ed81 Mon Sep 17 00:00:00 2001 From: Case Duckworth Date: Sun, 17 Jul 2022 23:10:22 -0500 Subject: Initial commit --- style.css | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100644 index 0000000..0fa9d6b --- /dev/null +++ b/style.css @@ -0,0 +1,176 @@ +body { + background: #888; +} + +main { + position: relative; + display: flex; + flex: column nowrap; +} + +#items { + max-width: 70ch; +} + +.entries tr { + vertical-align: baseline; +} + +.fresh { + font-weight: bold; +} + +.entry-timestamp { + font-family: monospace; + padding-right: 8px; +} + +#list { + padding: 2ch; +} + +aside { + flex-grow: 1; +} + +aside li { + list-style: none; + text-align: right; +} + +aside li:nth-child(even), +tr:nth-child(even) +{ + background: inherit; +} + +aside li:nth-child(odd), +tr:nth-child(odd) +{ + background: #aaa; +} + +a { display: block; } + +a:link { + text-decoration: none; + color: black; +} +a:visited { + font-style: italic; + color: inherit; +} +aside a:visited { font-style: normal; } +a:hover { + background: yellow; +} +a:active{ + background: cyan; +} + +header { + display: flex; + flex: row wrap; + margin: 1ch 0; + align-items: baseline; + justify-content: space-between; +} +header h2, header h1 { + margin: 0; +} +header h2 a { display: inline; } +header .top { + font-size: 80%; + text-align: right; + flex-grow: 1; +} + +body>nav { + border-bottom: 1px solid black; + margin-top: 0; + text-align: right; +} +body>nav a { display: inline; } + +.last-updated { + font-style: italic; + font-size: 80%; + text-align: right; +} + +.entries { border-collapse: collapse; } + +.entries, .entry-title { width: 100%; } +.entry-extra a { color: blue; display: inline; } + +header a { display: inline; } + +@media screen and (max-width: 720px) { + main, header { + flex-flow: row wrap; + padding:0; margin: 0; + } + * { border: none; } + .entries, .entry-title { width: 100%; } + html, body, #list, #items { padding: 0; margin: 0; max-width: 100%; } + header h2, header p { margin: 4px; } + aside a { display: inline; } + aside { + padding: 2ch; + order: 1; + border-bottom: 1px solid black; + } + aside ul { margin: 0; padding: 0; } + #list { order: 2; } + aside li { + display: inline; + background: inherit !important; + } + aside li::after { + background: inherit; + font-weight: normal; + content: " //"; + } + aside li:last-child::after { + content: ""; + } + .entry-timestamp { + display: none; + } +} + +@media (prefers-color-scheme: light) { + body { background: white; color: black; } + aside li:nth-child(even), + tr:nth-child(even) { background: white; } + aside li:nth-child(odd), + tr:nth-child(odd) { background: #eee; } + a:link { color: black; } + a:hover { background: yellow; } + a:active { background: cyan; } + .entry-extra a { color: blue; } + body>nav { border-bottom: 1px solid black; } +} + +@media (prefers-color-scheme: dark) { + body { background: black; color: white; } + aside li:nth-child(even), + tr:nth-child(even) { background: black; } + aside li:nth-child(odd), + tr:nth-child(odd) { background: #222; } + a:link { color: white; } + a:hover { color: yellow; background: inherit; } + a:active { color: cyan; background: inherit; } + .entry-extra a { color: cyan; } + body>nav { border-bottom: 1px solid white; } +} + +@media screen and (max-width: 720px) and (prefers-color-scheme: dark) { + aside { border-bottom: 1px solid white; } + aside li { background: black !important; } +} + +@media screen and (max-width: 720px) and (prefers-color-scheme: light) { + aside { border-bottom: 1px solid black; } + aside li { background: white !important; } +} -- cgit 1.4.1-21-gabe81