summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorjaseg <git@jaseg.de>2023-03-19 23:24:27 +0100
committerjaseg <git@jaseg.de>2023-03-19 23:24:27 +0100
commit9d2ecb11fdc6d48702b0b9bd3f29dab4fb73457c (patch)
tree65b67f8699b547fcc0a171241003fcb0b340a4b9
parent6658952dcf963d2aed146fff70d9da2e54e6402d (diff)
downloadblog-9d2ecb11fdc6d48702b0b9bd3f29dab4fb73457c.tar.gz
blog-9d2ecb11fdc6d48702b0b9bd3f29dab4fb73457c.tar.bz2
blog-9d2ecb11fdc6d48702b0b9bd3f29dab4fb73457c.zip
Make light mode prettier
-rw-r--r--themes/conspiracy/assets/css/style.css66
-rw-r--r--themes/conspiracy/layouts/partials/header.html33
2 files changed, 58 insertions, 41 deletions
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);
}
diff --git a/themes/conspiracy/layouts/partials/header.html b/themes/conspiracy/layouts/partials/header.html
index 675f899..e252f1f 100644
--- a/themes/conspiracy/layouts/partials/header.html
+++ b/themes/conspiracy/layouts/partials/header.html
@@ -1,17 +1,20 @@
<nav>
- {{- $currentPage := . }}
- <!-- todo: put this in a "pages" drop down on mobile -->
- {{- range site.Menus.main }}
- {{- $menu_item_url := .URL | absURL }}
- {{- $page_url:= $currentPage.Permalink | absURL }}
- <a href="{{ .URL }}" title="{{ .Title | default .Name }}" {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
- {{- .Pre }}
- {{- .Name -}}
- {{ .Post -}}
- </a>
- {{- end }}
- <span class="spacer"></span>
- {{- range site.Params.profile_links }}
- <a href="{{ .url | absURL }}" title="{{ .name }}">{{ .name }}</a>
- {{- end }}
+ <div class="internal">
+ {{- $currentPage := . }}
+ <!-- todo: put this in a "pages" drop down on mobile -->
+ {{- range site.Menus.main }}
+ {{- $menu_item_url := .URL | absURL }}
+ {{- $page_url:= $currentPage.Permalink | absURL }}
+ <a href="{{ .URL }}" title="{{ .Title | default .Name }}" {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
+ {{- .Pre }}
+ {{- .Name -}}
+ {{ .Post -}}
+ </a>
+ {{- end }}
+ </div>
+ <div class="external">
+ {{- range site.Params.profile_links }}
+ <a href="{{ .url | absURL }}" title="{{ .name }}">{{ .name }}</a>
+ {{- end }}
+ </span>
</nav>