diff options
author | dataCobra <datacobra@thinkbot.de> | 2021-03-27 12:33:02 +0300 |
---|---|---|
committer | dataCobra <datacobra@thinkbot.de> | 2021-03-27 12:33:02 +0300 |
commit | d07e23884cc9babb155cb99a9e0480bac4762183 (patch) | |
tree | f515455db36bbe3037da58113b07beccb35d86f4 | |
parent | 235574ca6a0b38d4e738b5cb0ed32de0542d7128 (diff) |
Use CSS variables for the different colors
The use of CSS variables means that in the future the file can be better
maintained and the implementation of a dark mode is easier.
-rw-r--r-- | static/css/main.css | 77 |
1 files changed, 45 insertions, 32 deletions
diff --git a/static/css/main.css b/static/css/main.css index 3cff111..c69b58c 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -38,15 +38,28 @@ src: local('Roboto Mono'), url('../webfonts/RobotoMono-Regular.woff') format('woff'); } +:root { + --bg-color: #FDFDFD; + --txt-color: #333; + --line-color: #EEE; + --fn-color: #CCC; + --ft-txt-color: #777; + --lk-color: #00E; + --hover-color: #808080; + --bq-color: #E00; + --tb1-color: #DEE2E6; + --inline-cd-color: #DDD; +} + html { - background-color: #FBFBFB; + background-color: var(--bg-color); } body { font-family: "Roboto Regular", serif; font-weight: 400; font-size: 18px; - color: #333; + color: var(--txt-color); line-height: 1.6rem; max-width: 800px; margin: 20px auto 0 auto; @@ -70,21 +83,21 @@ footer { font-family: "Roboto Slab Regular", serif; text-align: right; font-size: 0.75em; - border-top: 1px solid #eee; + border-top: 1px solid var(--line-color); margin-top: 10px; padding: 5px 0; } footer a { - color: #777; + color: var(--ft-txt-color); } footer a:hover { - color: #00E + color: var(--lk-color); } html,button,input,select,textarea { - color: #333; + color: var(--txt-color); } b, strong { @@ -92,19 +105,19 @@ b, strong { } a { - color: #00E; + color: var(--lk-color); text-decoration: none; word-break: break-word; } a:hover { - color: #808080; + color: var(--hover-color); } hr { display: block; height: 1px; border: 0; - border-top: 1px solid #ccc; + border-top: 1px solid var(--fn-color); margin: 1rem 0; padding: 0; } @@ -136,7 +149,7 @@ textarea { blockquote { margin-left: 1rem; - border-left: 2px solid #E00; + border-left: 2px solid var(--bq-color); padding-left: 20px; } @@ -150,7 +163,7 @@ blockquote em { } h1, h2, h3, h4, h5, h6 { - color: #333; + color: var(--txt-color); font-weight: 500; line-height: 1.3em; margin: 30px 0 20px 0; @@ -196,29 +209,29 @@ table { table th, table td { - border-bottom: 1px solid #dee2e6; + border-bottom: 1px solid var(--tb1-color); padding: 0.75rem; vertical-align: top; } table thead th { - border-bottom: 2px solid #dee2e6; + border-bottom: 2px solid var(--tb1-color); vertical-align: bottom; } table tbody + tbody { - border-top: 2px solid #dee2e6; + border-top: 2px solid var(--tb1-color); } table tbody tr:nth-of-type(even) { - background-color: #808080; - color: #fff; + background-color: var(--hover-color); + color: var(--bg-color); } table th { - background-color: #333; - border-color: #333; - color: #fff; + background-color: var(--txt-color); + border-color: var(--txt-color); + color: var(--bg-color); } #avatar { @@ -238,11 +251,11 @@ table th { } #title a { - color: #333; + color: var(--txt-color); } #title a:hover { - color: #808080; + color: var(--hover-color); } #titleonly { @@ -251,11 +264,11 @@ table th { } #titleonly a { - color: #333; + color: var(--txt-color); } #titleonly a:hover { - color: #808080; + color: var(--hover-color); } #title-description { @@ -284,8 +297,8 @@ table th { } #mainmenu nav { - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; + border-top: 1px solid var(--line-color); + border-bottom: 1px solid var(--line-color); padding: 5px 0 5px 0; } @@ -300,12 +313,12 @@ table th { } .icons { - color: #333; + color: var(--txt-color); font-size: 1.4rem; } .icons:hover { - color: #808080; + color: var(--hover-color); } .recent-posts .posts .post { @@ -354,7 +367,7 @@ table th { } .post .draft-label { - color: #E00; + color: var(--bq-color); text-decoration: underline; padding: 2px 4px; margin-left: 6px; @@ -377,7 +390,7 @@ table th { } .post .tags a:hover { - border: 1px solid #FFFFFF; + border: 1px solid var(--bg-color); } .post ul li { @@ -483,7 +496,7 @@ code, kbd, pre, samp { .highlight { background: 0 0; - background-color: #FAFAFA; + background-color: var(--bg-color); } pre, textarea { @@ -509,7 +522,7 @@ legend, td, th { p code { border-radius: 5px; - background: #F1F1F1; + background: var(--inline-cd-color); padding: 0px 4px; } @@ -541,7 +554,7 @@ p code { blockquote { margin-left: 1rem; - border-left: 2px solid #E00; + border-left: 2px solid var(--bq-color); padding-left: 20px; } |