theme: fixing tags for dark mode and revamped header #151 #175

This commit is contained in:
Sören Weber 2022-02-18 00:38:32 +01:00
parent 0e3553c3a8
commit 1606a92689
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
4 changed files with 19 additions and 15 deletions

View file

@ -91,13 +91,13 @@
{{- partial "toc.html" . }}
{{- end }}
</div></div>
<div id="head-tags">
{{- partial "tags.html" . }}
</div>
{{- if .Params.chapter }}
<div id="chapter">
{{- end }}
<main id="body-inner">
<div id="head-tags">
{{- partial "tags.html" . }}
</div>
{{- if and (not .IsHome) (not .Params.chapter) }}
<h1>{{ if eq .Kind "term" }}{{ .Data.Singular }} :: {{ end }}{{ .Title }}</h1>
{{- end }}

View file

@ -1,12 +1,12 @@
/* Tags */
#head-tags{
margin-left:1em;
margin-top:1em;
margin-left:1rem;
margin-top:1rem;
}
#body .tags a.tag-link {
background: #7dc903; /* var(--MENU-HEADER-BG-color) */
background: #7dc903; /* var(--TAG-BG-color) */
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
@ -20,7 +20,7 @@
}
#body .tags a.tag-link:before {
border-color: transparent #7dc903 transparent transparent; /* var(--MENU-HEADER-BG-color) */
border-color: transparent #7dc903 transparent transparent; /* var(--TAG-BG-color) */
border-style: solid;
border-width: 1em 1em 1em 0;
content: "";

View file

@ -28,6 +28,8 @@
--CODE-INLINE-BG-color: #282a36; /* color for inline code background */
--CODE-INLINE-BORDER-color: #464646; /* color of inline code border */
--TAG-BG-color: #cccc00; /* Background color of menu header */
--MENU-HOME-LINK-color: #323232; /* Color of the home button text */
--MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */

View file

@ -1,10 +1,12 @@
:root {
--INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color , var(--MAIN-TEXT-color));
--INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color , var(--MAIN-TITLES-TEXT-color));
--INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color , var(--INTERNAL-MAIN-TITLES-H2-color));
--INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color , var(--INTERNAL-MAIN-TITLES-H3-color));
--INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color , var(--INTERNAL-MAIN-TITLES-H4-color));
--INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color , var(--INTERNAL-MAIN-TITLES-H5-color));
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--MENU-HEADER-BG-color));
--INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--MAIN-TEXT-color));
--INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--MAIN-TITLES-TEXT-color));
--INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-color));
--INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color, var(--INTERNAL-MAIN-TITLES-H3-color));
--INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color, var(--INTERNAL-MAIN-TITLES-H4-color));
--INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color, var(--INTERNAL-MAIN-TITLES-H5-color));
--INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color);
@ -188,12 +190,12 @@ pre .copy-to-clipboard-button:hover {
}
#body .tags a.tag-link {
background-color: var(--MENU-HEADER-BG-color);
background-color: var(--INTERNAL-TAG-BG-color);
color: var(--MAIN-BG-color, #ffffff);
}
#body .tags a.tag-link:before {
border-right-color: var(--MENU-HEADER-BG-color);
border-right-color: var(--INTERNAL-TAG-BG-color);
}
#body .tags a.tag-link:after {