From 5a15f71b7dafe41bd83e9dfe989b0c8845eb5d6e Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Sat, 25 Mar 2023 19:36:55 -0500 Subject: main.scss: change color scheme and width --- assets/main.scss | 89 +++++++++++++++++++++++++++++++++----------------------- 1 file changed, 53 insertions(+), 36 deletions(-) (limited to 'assets/main.scss') diff --git a/assets/main.scss b/assets/main.scss index 4381427..ee7f15a 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -1,65 +1,86 @@ +html { + font-family: sans-serif; +} + body { color: #212529; background: #fff; - font-family: sans-serif; + + @media(prefers-color-scheme: dark) { + background-color: #121415; + color: #e1dfdc + } +} + +main { + padding: 0 128px; max-width: 800px; margin: 0 auto; - padding: 0 0.5rem; + + @media(max-width: 1000px) { + padding: 0; + } } a { color: #007bff; - text-decoration: none; -} - -a:hover { - color: #0056b3; text-decoration: underline; -} -header { - text-align: center; -} + &:hover { + color: #0056b3; + text-decoration: none; + } -footer { - text-align: center; - margin: 4rem 0; + @media(prefers-color-scheme: dark) { + color: #78bef8; + } } nav { - text-align: center; - margin-bottom: 4rem; + text-align: center; + margin-bottom: 4rem; } nav ul { - list-style: none; - padding-left: 0; + list-style: none; + padding-left: 0; } nav ul li { - display: inline; + display: inline; } nav ul li:not(:first-child) { - display: inline; - padding-left: 2rem; - @media only screen and (max-width: 600px) { - padding: 0.2rem; - } + display: inline; + padding-left: 2rem; + + @media only screen and (max-width: 600px) { + padding: 0.2rem; + } } -nav a { - text-decoration: underline; +footer { + text-align: center; + margin: 4rem 0; } -nav a:hover { - text-decoration: none; + +h1 { + text-align: center; } .post h3 { margin-bottom: 0; } +h2 small { + font-weight: normal; + font-size: 1.2rem; + display: block; + border-bottom: 1px solid #555; + margin-top: 0.5rem; +} + dl { display: grid; grid-template-columns: auto 1fr; @@ -76,12 +97,8 @@ dl { } } -@media (prefers-color-scheme: dark) { - body { - background: #212529; - color: #f8f9fa; - } - a { - color: #3395ff; - } +blockquote { + border-left: 4px solid #888; + margin-left: 0; + padding-left: 1rem; } -- cgit v1.2.3