From d29186892211056822e976689c0c6b3eb026f6e9 Mon Sep 17 00:00:00 2001 From: Yann Herklotz Date: Fri, 12 May 2023 15:23:31 +0100 Subject: Fix colours and spacing --- layouts/partials/header.html | 4 +- static/css/style.css | 113 ++++++++++++++++++++++++++++++++++++------- 2 files changed, 97 insertions(+), 20 deletions(-) diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a88314b..90fe12d 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -12,9 +12,9 @@ diff --git a/static/css/style.css b/static/css/style.css index 0b51cd6..ef0104b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,51 +1,128 @@ +:root { + --bg-colour: #FAFCFA; + --fg-colour: #060806; + --primary-colour: #536E53; + --secondary-colour: #6E536E; + + --primary-colour-1: #F2F5F2; + --primary-colour-2: #E5ECE5; + --primary-colour-3: #D8E2D8; + --primary-colour-4: #BFCEBF; + --primary-colour-5: #7E9E7E; +} + +@media (prefers-color-scheme: dark) { + + :root { + --fg-colour: #FAFCFA; + --bg-colour: #060806; + --primary-colour: #536E53; + --secondary-colour: #C3AFC3; + + --primary-colour-1: #2D342D; + --primary-colour-2: #3B443B; + --primary-colour-3: #495349; + --primary-colour-4: #647364; + --primary-colour-5: #819181; + } + +} + body { - max-width: 800px; - margin: auto; - padding: 1em; - line-height: 1.5; + max-width: 800px; + margin: auto; + padding: 1em; + line-height: 1.5; + color: var(--fg-colour); + background-color: var(--bg-colour); } /* header and footer areas */ .menu { padding: 0; } .menu li { display: inline-block; } .article-meta, .menu a { - text-decoration: none; - background: #eee; - padding: 5px; - border-radius: 5px; + text-decoration: none; + padding: 5px; + border-radius: 5px; + background-color: var(--primary-colour-1); } .menu, .article-meta, footer { text-align: center; } .title { font-size: 1.1em; } footer a { text-decoration: none; } hr { border-style: dashed; - color: #ddd; + color: var(--primary-colour-3); } /* code */ pre { - border: 1px solid #ddd; - box-shadow: 5px 5px 5px #eee; + border: 1px solid var(--primary-colour-3); + box-shadow: 5px 5px 5px var(--primary-colour-1); padding: 1em; overflow-x: auto; } -code { background: #f9f9f9; } +code { + padding: 2px; + border: 0px solid white; + border-radius: 5px; + background: var(--primary-colour-2); +} pre code { background: none; } /* misc elements */ img, iframe, video { max-width: 100%; } main { hyphens: auto; } +.menu li { margin-right: 0.5em; } blockquote { - background: #f9f9f9; - border-left: 5px solid #ccc; + background: var(--primary-colour-2); + border-left: 5px solid var(--primary-colour-4);; padding: 3px 1em 3px; } table { margin: auto; - border-top: 1px solid #666; - border-bottom: 1px solid #666; + border-top: 1px solid var(--primary-colour); + border-bottom: 1px solid var(--primary-colour); } -table thead th { border-bottom: 1px solid #ddd; } +table thead th { border-bottom: 1px solid var(--primary-colour-3); } th, td { padding: 5px; } -thead, tfoot, tr:nth-child(even) { background: #eee; } +thead, tfoot, tr:nth-child(even) { background: var(--primary-colour-1); } + +table.post-list { + width: 100%; + border: none; + border-collapse: collapse; +} + +.post-list td { + background-color: var(--bg-colour); + border-top: thin solid var(--primary-colour); + margin: none; +} + +.post-list td.date-td { + text-align: right; +} + +a { + text-decoration: none; + color: var(--secondary-colour); +} + +.transclude-1, .transclude-2, .transclude-3 { + padding: 0.5em; + border: 0px solid var(--bg-colour); + border-radius: 5px; +} + +.transclude-1:hover { + background-color: var(--primary-colour-1); +} + +.transclude-2:hover { + background-color: var(--primary-colour-2); +} + +.transclude-3:hover { + background-color: var(--primary-colour-3); +} -- cgit