From 9d2ecb11fdc6d48702b0b9bd3f29dab4fb73457c Mon Sep 17 00:00:00 2001 From: jaseg Date: Sun, 19 Mar 2023 23:24:27 +0100 Subject: Make light mode prettier --- themes/conspiracy/assets/css/style.css | 66 ++++++++++++++++++++-------------- 1 file changed, 40 insertions(+), 26 deletions(-) (limited to 'themes/conspiracy/assets/css') diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css index 96dc56b..d365591 100644 --- a/themes/conspiracy/assets/css/style.css +++ b/themes/conspiracy/assets/css/style.css @@ -16,6 +16,8 @@ html { --c-bg-secondary: #ff9449; --shadow-opacity: 0.8; + + --default-border: 0.5px dotted rgba(255, 255, 255, 0.3); } @font-face { @@ -72,16 +74,6 @@ strong { font-style: italic; } -nav { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - overflow-x: scroll; - background-color: var(--c-bg-front); - box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity)); - padding: 0 10px 0 10px; -} - a:hover, a:visited, a:active, a:link { color: var(--c-fg-secondary); text-decoration: none; @@ -92,20 +84,36 @@ a:hover { color: var(--c-text); } -nav > a:link, nav > a:active, nav > a:visited, nav > a:hover { +nav { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background-color: var(--c-bg-front); + box-shadow: 0 0 3px 2px rgba(0, 0, 0, var(--shadow-opacity)); + padding: 0 10px 0 10px; + justify-content: space-between; +} + +nav > div { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + border-top: var(--default-border); + margin-top: -1px; +} + +nav a:link, nav a:active, nav a:visited, nav a:hover { flex-grow: 1; + text-align: center; color: inherit; padding: 10px 10px 10px 10px; } -nav > a:hover { +nav a:hover { background: var(--c-bg-primary); } -nav > .spacer { - flex-grow: 100; -} - .breadcrumbs { max-width: 40em; text-align: center; @@ -136,13 +144,6 @@ main { hyphens: auto; } -@media (max-width: 30em) { - main { - padding-left: 20px; - padding-right: 20px; - } -} - main > .intro { margin-top: 40px; } @@ -238,7 +239,7 @@ main.cards { .card > .links { margin-left: -20px; margin-bottom: -30px; - border-top: 0.5px dotted rgba(255, 255, 255, 0.3); + border-top: var(--default-border); margin-top: 20px; width: calc(100% + 40px); display: flex; @@ -254,7 +255,7 @@ main.cards { main > .links { margin: 20px 0px 40px 0px; - border: 0.5px dotted rgba(255, 255, 255, 0.3); + border: var(--default-border); border-left: none; border-right: none; width: calc(100%); @@ -475,6 +476,17 @@ body .s1 { color: var(--c-text); font-weight: 600 } /* Literal.String.Single */ body .ss { color: var(--c-text); font-weight: 600 } /* Literal.String.Symbol */ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.Long */ +@media (max-width: 40em) { + nav > div { + flex-grow: 1; + } + + main { + padding-left: 20px; + padding-right: 20px; + } +} + @media print, (prefers-color-scheme: light) { html { --c-bg-backdrop: hsl(220, 10%, 90%); @@ -493,13 +505,15 @@ body .il { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L --c-bg-secondary: hsl(319, 98%, 52%); --shadow-opacity: 0.2; + + --default-border: 0.5px dotted hsla(220, 10%, 30%, 50%); } body > header > h1 { filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); } - a:hover, nav > a:hover { + a:hover, nav a:hover { color: var(--c-text-inverted); } -- cgit