theme: support for colored borders between menu and content #626

McShelby · Aug 25, 2023 · ed1715d · ed1715d
1 parent 5d0a1cf
commit ed1715d
Show file tree

Hide file tree

Showing 17 changed files with 307 additions and 114 deletions.
diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
@@ -22,7 +22,7 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme has updated its Swagger dependency to 5.4.1 for the [`openapi` shortcode]({{% relref "shortcodes/openapi" %}}).
 
-  With this comes a change in the light variants of `Relearn Bright`, `Relearn Light` and `Zen Light` of the theme by switching the syntaxhighlightning inside of openapi to a light scheme. This brings it more in sync with the style used by the theme variants itself.
+  With this comes a change in the light theme variants of `Relearn Bright`, `Relearn Light` and `Zen Light` by switching the syntaxhighlightning inside of openapi to a light scheme. This brings it more in sync with the style used by the theme variants itself.
 
   Additionally, the syntaxhighlightning inside of openapi for printing was switched to a light scheme for all theme variants.
 
@@ -33,6 +33,14 @@ This document shows you what's new in the latest release. For a detailed list of
     --PRINT-OPENAPI-CODE-theme: obsidian;
     ````
 
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} For consistency reasons, we renamed the CSS variable `--MENU-SECTION-HR-color` to `--MENU-SECTION-SEPARATOR-color`. You don't need to change anything in your custom color stylesheet as the old name will be used as a fallback.
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme variants `Zen Light` and `Zen Dark` now add more contrast between menu, topbar and content by adding thin borders.
+
+  Those borders are now configurable by using the CSS variables `--MAIN-TOPBAR-BORDER-color`, `--MENU-BORDER-color`, `--MENU-TOPBAR-BORDER-color`, `--MENU-TOPBAR-SEPARATOR-color`, `--MENU-HEADER-SEPARATOR-color` and `--MENU-SECTION-ACTIVE-CATEGORY-BORDER-color`.
+
+  For existing variants nothing has changed visually.
+
 ---
 
 ## 5.19.0 (2023-08-12) {#5190}

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -8,6 +8,7 @@
     {{- end }}
     <aside id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}">
       {{- $currentNode := . }}
+      <div id="header-topbar" class="default-animation"></div>
       <div id="header-wrapper" class="default-animation">
         <div id="header" class="default-animation">
 {{ partial "logo.html" . }}
@@ -16,31 +17,34 @@
 {{ partial "search.html" . }}
         {{- end }}
       </div>
+      <div id="homelinks" class="default-animation{{ if not .Site.Params.disableLandingPageButton }} homelinks{{ end }}">
       {{- if not .Site.Params.disableLandingPageButton }}
         {{- if (ne .Site.Params.landingPageURL nil) }}
           {{- warnf "%q: UNSUPPORTED usage of 'landingPageURL' config parameter found, remove it and optionally overwrite the `logo.html` partial to provide a link if it should not point to the project's home page; see https://mcshelby.github.io/hugo-theme-relearn/basics/migration/#420" .File.Path }}
         {{- end }}
-      <div id="homelinks" class="default-animation">
         <ul>
           <li><a class="padding" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .Site.Home) }}">{{ .Site.Params.landingPageName | default `<i class="fas fa-home"></i> Home` | safeHTML }}</a></li>
         </ul>
-      </div>
       {{- end }}
+        <hr class="padding">
+      </div>
       <div id="content-wrapper" class="highlightable">
-        <ul class="topics enlarge morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
-          {{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
-          {{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
-          {{- $defaultAlwaysopen := .Site.Params.alwaysopen | default false }}
-          {{- if eq $currentOrdersectionsby "title" }}
-            {{- range .Site.Home.Pages.ByTitle }}
-              {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
-            {{- end }}
-          {{- else }}
-            {{- range .Site.Home.Pages.ByWeight }}
-              {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
+        <div id="topics">
+          <ul class="enlarge morespace{{ if .Site.Params.collapsibleMenu }} collapsible-menu{{ end }}">
+            {{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
+            {{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
+            {{- $defaultAlwaysopen := .Site.Params.alwaysopen | default false }}
+            {{- if eq $currentOrdersectionsby "title" }}
+              {{- range .Site.Home.Pages.ByTitle }}
+                {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
+              {{- end }}
+            {{- else }}
+              {{- range .Site.Home.Pages.ByWeight }}
+                {{- template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen }}
+              {{- end }}
             {{- end }}
-          {{- end }}
-        </ul>
+          </ul>
+        </div>
         {{- $page := . }}
         {{- $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle }}
         {{- with .Site.Menus.shortcuts }}
@@ -66,73 +70,75 @@
         {{- $footer := partial "menu-footer.html" . }}
         {{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }}
         <div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div>
-        <hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
-        <div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
-          <ul>
-            <li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
-              <div class="padding menu-control">
-                <i class="fas fa-language fa-fw"></i>
-                <span>&nbsp;</span>
-                <div class="control-style">
-                  <label class="a11y-only" for="select-language">{{ T "Language" }}</label>
-                  <select id="select-language" onchange="location = baseUri + this.value;">
-                    {{- $page := .Page }}
-                    {{- $pageLang := .Page.Lang }}
-                    {{- range .Page.AllTranslations }}
-                      {{- $translation := . }}
-                      {{- range $siteLanguages }}
-                        {{- if eq $translation.Lang .Lang }}
-                          {{- if eq $pageLang .Lang }}
-                    <option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}" selected>{{ .LanguageName }}</option>
-                          {{- else }}
-                    <option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}">{{ .LanguageName }}</option>
+        <div id="menu-footer">
+          <hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
+          <div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
+            <ul>
+              <li id="select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
+                <div class="padding menu-control">
+                  <i class="fas fa-language fa-fw"></i>
+                  <span>&nbsp;</span>
+                  <div class="control-style">
+                    <label class="a11y-only" for="select-language">{{ T "Language" }}</label>
+                    <select id="select-language" onchange="location = baseUri + this.value;">
+                      {{- $page := .Page }}
+                      {{- $pageLang := .Page.Lang }}
+                      {{- range .Page.AllTranslations }}
+                        {{- $translation := . }}
+                        {{- range $siteLanguages }}
+                          {{- if eq $translation.Lang .Lang }}
+                            {{- if eq $pageLang .Lang }}
+                      <option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}" selected>{{ .LanguageName }}</option>
+                            {{- else }}
+                      <option lang="{{ $translation.Lang }}" id="{{ $translation.Lang }}" value="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" $translation "basename" $basename) }}">{{ .LanguageName }}</option>
+                            {{- end }}
                           {{- end }}
                         {{- end }}
                       {{- end }}
-                    {{- end }}
-                  </select>
+                    </select>
+                  </div>
+                  <div class="clear"></div>
                 </div>
-                <div class="clear"></div>
-              </div>
-            </li>
-            <li id="select-variant-container" class="footerVariantSwitch{{if $showvariantswitch}} showVariantSwitch{{end}}">
-              <div class="padding menu-control">
-                <i class="fas fa-paint-brush fa-fw"></i>
-                <span>&nbsp;</span>
-                <div class="control-style">
-                  <label class="a11y-only" for="select-variant">{{ T "Theme" }}</label>
-                  <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
-                    {{- $firstvariant := true }}
-                    {{- range $themevariants }}
-                      {{- $themevariant := . }}
-                      {{- $variantname := replaceRE "[-_]+" " " $themevariant }}
-                      {{- if $firstvariant }}
-                        {{- $firstvariant = false }}
-                    <option id="{{ $themevariant }}" value="{{ $themevariant }}" selected>{{ $variantname | title }}</option>
-                      {{- else }}
-                    <option id="{{ $themevariant }}" value="{{ $themevariant }}">{{ $variantname | title }}</option>
+              </li>
+              <li id="select-variant-container" class="footerVariantSwitch{{if $showvariantswitch}} showVariantSwitch{{end}}">
+                <div class="padding menu-control">
+                  <i class="fas fa-paint-brush fa-fw"></i>
+                  <span>&nbsp;</span>
+                  <div class="control-style">
+                    <label class="a11y-only" for="select-variant">{{ T "Theme" }}</label>
+                    <select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
+                      {{- $firstvariant := true }}
+                      {{- range $themevariants }}
+                        {{- $themevariant := . }}
+                        {{- $variantname := replaceRE "[-_]+" " " $themevariant }}
+                        {{- if $firstvariant }}
+                          {{- $firstvariant = false }}
+                      <option id="{{ $themevariant }}" value="{{ $themevariant }}" selected>{{ $variantname | title }}</option>
+                        {{- else }}
+                      <option id="{{ $themevariant }}" value="{{ $themevariant }}">{{ $variantname | title }}</option>
+                        {{- end }}
                       {{- end }}
-                    {{- end }}
-                  </select>
+                    </select>
+                  </div>
+                  <div class="clear"></div>
                 </div>
-                <div class="clear"></div>
-              </div>
-              <script>window.variants && variants.markSelectedVariant();</script>
-            </li>
-            <li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
-              <div class="padding menu-control">
-                <i class="fas fa-history fa-fw"></i>
-                <span>&nbsp;</span>
-                <div class="control-style">
-                  <button onclick="clearHistory();">{{ T "Clear-History" }}</button>
+                <script>window.variants && variants.markSelectedVariant();</script>
+              </li>
+              <li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
+                <div class="padding menu-control">
+                  <i class="fas fa-history fa-fw"></i>
+                  <span>&nbsp;</span>
+                  <div class="control-style">
+                    <button onclick="clearHistory();">{{ T "Clear-History" }}</button>
+                  </div>
+                  <div class="clear"></div>
                 </div>
-                <div class="clear"></div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div id="footer" class="footerFooter{{if $showfooter}} showFooter{{end}}">
-          {{- $footer }}
+              </li>
+            </ul>
+          </div>
+          <div id="footer" class="footerFooter{{if $showfooter}} showFooter{{end}}">
+            {{- $footer }}
+          </div>
         </div>
       </div>
     </aside>

diff --git a/static/css/ie.css b/static/css/ie.css
@@ -18,6 +18,9 @@
 	#sidebar {
 		left: 0;
 	}
+	#header {
+		border-right: 1px solid transparent;
+	}
 	.searchbox > :first-child {
 		left: .5rem;
 	}
@@ -84,6 +87,10 @@
 	#sidebar-toggle-span {
 		border-right: thin solid rgba( 134, 134, 134, .333 );
 	}
+	#body #breadcrumbs {
+		border-left-style: solid;
+		border-left-width: 1px;
+	}
 	html[dir="rtl"] #body #breadcrumbs {
 		float: left;
 	}
@@ -199,6 +206,18 @@
 		transform: scaleX(1);
 	}
 
+	#header-topbar {
+		border-right-style: solid;
+		border-right-width: 1px;
+	}
+
+	#header-wrapper,
+	#homelinks,
+	#content-wrapper > * {
+		border-right-style: solid;
+		border-right-width: 1px;
+	}
+
 	/* ----------------------------------------------- */
 	/* set default colors as in variant.css for IE11 */
 	html {
@@ -217,6 +236,15 @@
 		color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
 	}
 
+	#body #breadcrumbs {
+		border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */
+	}
+	@media screen and (max-width: 48rem) {
+		#body #breadcrumbs {
+			border-left-color: transparent;
+		}
+	}
+
 	a:hover,
 	.anchor:hover,
 	#toc-menu:hover {
@@ -231,7 +259,6 @@
 		/* initially use section background to avoid flickering on load when a
 		non default variant is active */
 		background-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
-		border-bottom-color: rgba( 0, 0, 0, 0 );  /* var(--MENU-SECTIONS-BG-color) */
 		color: rgba( 224, 224, 224, 1 ); /* var(--MENU-SEARCH-color) */
 	}
 
@@ -295,8 +322,8 @@
 		color: rgba( 186, 186, 186, 1 ); /* var(--MENU-SECTIONS-LINK-color) */
 	}
 
-	#sidebar hr {
-		border-color: rgba( 96, 96, 96, 1 ); /* var(--MENU-SECTION-HR-color) */
+	#content-wrapper hr {
+		border-color: rgba( 96, 96, 96, 1 ); /* var(--MENU-SECTION-SEPARATOR-color) */
 	}
 
 	#footer {
@@ -502,6 +529,10 @@
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
 	}
 
+	#body #breadcrumbs {
+		border-left-color: rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color) */
+	}
+
 	#body a[aria-disabled="true"],
 	#searchresults .autocomplete-suggestion > .context {
 		color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */
@@ -536,7 +567,6 @@
 
 	#homelinks {
 		background-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-BORDER-color) */
-		border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-BORDER-color) */
 	}
 
 	#homelinks a {
@@ -547,6 +577,10 @@
 		color: rgba( 128, 128, 128, 1 ) /* var(--MENU-HOME-LINK-HOVER-color) */;
 	}
 
+	#homelinks hr {
+		border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-SEPARATOR-color) */
+	}
+
 	.progress {
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
 	}
@@ -795,6 +829,28 @@
 		color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
 	}
 
+	#topbar {
+		border-bottom-color: transparent; /* var(--MAIN-TOPBAR-BORDER-color) */
+	}
+
+	#header-topbar {
+		border-bottom-color: transparent;
+		border-right-color: transparent; /* var(--MENU-TOPBAR-BORDER-color) */
+	}
+
+	#header-wrapper,
+	#homelinks,
+	#content-wrapper > * {
+		border-right-color: transparent; /* var(--MENU-BORDER-color) */
+	}
+
+	#sidebar ul.collapsible-menu li.active > a{
+		border-bottom-color: transparent; /* var(--MENU-BORDER-color) */
+		border-top-color: transparent; /* var(--MENU-BORDER-color) */
+		border-left-color: transparent; /* var(--MENU-BORDER-color) */
+		border-right-color: transparent; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BORDER-color) */
+	}
+
 	/* ----------------------------------------------- */
 	/* set further styles to fix broken stuff in IE11 */
 

diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css
@@ -40,7 +40,7 @@
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */
 
     --MENU-VISITED-color: rgba( 28, 144, 243, 1 ); /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: rgba( 32, 39, 43, 1 ); /* Color of <hr> separator in menu */
+    --MENU-SECTION-SEPARATOR-color: rgba( 32, 39, 43, 1 ); /* Color of <hr> separator in menu */
 
     /* base styling for boxes */
     --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */

diff --git a/static/css/theme-green.css b/static/css/theme-green.css
@@ -40,7 +40,7 @@
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */
 
     --MENU-VISITED-color: rgba( 89, 154, 62, 1 ); /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: rgba( 24, 33, 28, 1 ); /* Color of <hr> separator in menu */
+    --MENU-SECTION-SEPARATOR-color: rgba( 24, 33, 28, 1 ); /* Color of <hr> separator in menu */
 
     /* base styling for boxes */
     --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */

diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css
@@ -40,7 +40,7 @@
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: rgba( 255, 255, 255, 1 ); /* Color of background for the active category (only) */
 
     --MENU-VISITED-color: rgba( 0, 189, 243, 1 ); /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: rgba( 42, 35, 47, 1 ); /* Color of <hr> separator in menu */
+    --MENU-SECTION-SEPARATOR-color: rgba( 42, 35, 47, 1 ); /* Color of <hr> separator in menu */
 
     /* base styling for boxes */
     --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */

diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css
@@ -50,7 +50,7 @@
     --MENU-SECTIONS-LINK-color: rgba( 255, 255, 255, 1 ); /* link color of menu topics */
     --MENU-SECTIONS-LINK-HOVER-color: rgba( 208, 208, 208, 1 ); /* hovered link color of menu topics */
     --MENU-SECTION-ACTIVE-CATEGORY-color: rgba( 86, 255, 232, 1 ); /* text color of the displayed menu topic */
-    --MENU-SECTION-HR-color: rgba( 186, 186, 186, 1 ); /* separator color of menu footer */
+    --MENU-SECTION-SEPARATOR-color: rgba( 186, 186, 186, 1 ); /* separator color between menu sections and menu footer */
 
     --MENU-VISITED-color: rgba( 51, 161, 255, 1 ); /* icon color of visited menu topics if configured */