menu: make width configurable #677

exampleSite/content/basics/customization/_index.en.md

@@ -31,7 +31,7 @@ This theme defines the following partials :
 - `content-header.html`: header above the title, has a default implementation but you can overwrite it if you don't like it.
 - `content-footer.html`: footer below the content, has a default implementation but you can overwrite it if you don't like it.
 
-## Change the logo
+## Change the Logo
 
 Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want.
 You could use an `img` HTML tag and reference an image created under the _static_ folder, or you could paste a SVG definition!
@@ -40,7 +40,7 @@ You could use an `img` HTML tag and reference an image created under the _static
 The size of the logo will adapt automatically
 {{% /notice %}}
 
-## Change the favicon
+## Change the Favicon
 
 If your favicon is a SVG, PNG or ICO, just drop off your image in your local `static/images/` folder and name it `favicon.svg`, `favicon.png` or `favicon.ico` respectively.
 
@@ -59,13 +59,25 @@ If you need to change this default behavior, create a new file in `layouts/parti
 <link rel="icon" href="/images/favicon.bmp" type="image/bmp">
 ```
 
-## Change the colors {#theme-variant}
+## Change the Menu Width
+
+If you want to adjust the menu width you can define the following CSS variables in you `custom-header.html`. Note that `--MENU-WIDTH-S` isn't adjustable because the menu is
+hidden for small screen widths.
+
+````css
+:root {
+    --MENU-WIDTH-M: 15rem;
+    --MENU-WIDTH-L: 20rem;
+}
+````
+
+## Change the Colors {#theme-variant}
 
 The Relearn theme lets you choose between some predefined color variants in light or dark mode, but feel free to add one yourself!
 
 You can preview the shipped variants by changing them in the variant selector at the bottom of the menu.
 
-### Single variant
+### Single Variant
 
 Set the `themeVariant` value with the name of your theme file. That's it!
 
@@ -76,7 +88,7 @@ Set the `themeVariant` value with the name of your theme file. That's it!
 
 In the above example your theme file has to be named `theme-relearn-light.css`
 
-### Multiple variants
+### Multiple Variants
 
 You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant switch will be shown in the menu footer.
 
@@ -125,10 +137,10 @@ document.addEventListener( 'themeVariantLoaded', function( e ){
 });
 ````
 
-### Roll your own
+### Roll your Own
 
 If you are not happy with the shipped variants you can either copy and rename one of the shipped files from `themes/hugo-theme-relearn/static/css` to `static/css`, edit them afterwards to your liking in a text editor and configure the `themeVariant` parameter in your `config.toml` or just use the [interactive variant generator]({{%relref "basics/generator" %}}).
 
-### Output formats
+### Output Formats
 
 Certain parts of the theme can be changed for support of your own [output formats](https://gohugo.io/templates/output-formats/). Eg. if you define a new output format `PLAINTEXT` in your `config.toml`, you can add a file `layouts/partials/header.plaintext.html` to change the way, the page header should look like for that output format.

exampleSite/content/basics/migration/_index.en.md

@@ -22,6 +22,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to print custom taxonomies anywhere in you page. [See the docs]({{% relref "cont/taxonomy#customization" %}}).
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to adjust the menu width for your whole site. [See the docs]({{% relref "basics/customization#change-the-menu-width" %}}).
+
 ---
 
 ## 5.22.0 (2023-10-02) {#5220}

static/css/ie.css

@@ -17,6 +17,9 @@
 	/* theme */
 	#R-sidebar {
 		left: 0;
+		min-width: 18.75rem;
+		max-width: 18.75rem;
+		width: 18.75rem;
 	}
 	#R-header {
 		border-right: 1px solid transparent;
@@ -42,6 +45,24 @@
 	}
 	#R-body {
 		margin-left: 18.75rem;
+		min-width: calc( 100% - 18.75rem );
+		max-width: calc( 100% - 18.75rem );
+		width: calc( 100% - 18.75rem );
+	 }
+	#R-body .flex-block-wrapper {
+		max-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
+	}
+	body:not(.print) #R-body .narrow .flex-block-wrapper {
+		max-width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
+	}
+	/* we limit width if we have large screens */
+	@media screen and ( min-width: 81.25rem ){ /* #R-sidebar/width + ./max-width */
+		#R-body .flex-block-wrapper {
+			width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
+		}
+		body:not(.print) #R-body .narrow .flex-block-wrapper {
+			width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
+		}
 	}
 	h2, h3, h4, h5, h6 {
 		padding-right: 2rem;
@@ -89,8 +110,16 @@
 		left: 1rem;
 	}
 	@media screen and (max-width: 59.999rem) {
-		#R-body {
+		#R-sidebar {
+			min-width: 14.375rem;
+			max-width: 14.375rem;
+			width: 14.375rem;
+		}
+ 		#R-body {
 			margin-left: 14.375rem;
+			min-width: calc( 100% - 14.375rem );
+			max-width: calc( 100% - 14.375rem );
+			width: calc( 100% - 14.375rem );
 		}
 	}
 	@media screen and (max-width: 47.999rem) {

static/css/theme.css

@@ -160,10 +160,10 @@ dd {
     inset-inline-start: 0;
     line-height: 1.574;
     min-height: 100%;
-    min-width: 18.75rem;
-    max-width: 18.75rem;
     position: fixed;
-    width: 18.75rem;
+    min-width: var(--INTERNAL-MENU-WIDTH-L);
+    max-width: var(--INTERNAL-MENU-WIDTH-L);
+    width: var(--INTERNAL-MENU-WIDTH-L);
 }
 
 #R-sidebar a{
@@ -333,13 +333,13 @@ dd {
     flex-grow: 1;
     flex-shrink: 0;
     height: 100%;
-    margin-inline-start: 18.75rem;
+    margin-inline-start: var(--INTERNAL-MENU-WIDTH-L);
     min-height: 100%;
-    min-width: calc( 100% - 18.75rem);
-    max-width: calc( 100% - 18.75rem);
     overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
     position: relative; /* PS */
-    width: calc( 100% - 18.75rem);
+    min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
+    max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
+    width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
     z-index: 70;
 }
 
@@ -424,20 +424,19 @@ article a:focus {
 #R-body .flex-block-wrapper {
     margin-left: auto;
     margin-right: auto;
-    max-width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
+    max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
     width: 100%;
 }
 body:not(.print) #R-body .narrow .flex-block-wrapper {
-    max-width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
+    max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
 }
-
 /* we limit width if we have large screens */
 @media screen and ( min-width: 81.25rem ){ /* #R-sidebar/width + ./max-width */
     #R-body .flex-block-wrapper {
-        width: calc( 81.25rem - 18.75rem - 2 * 3.25rem );
+        width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
     }
     body:not(.print) #R-body .narrow .flex-block-wrapper {
-        width: calc( 81.25rem - 18.75rem - 2 * 9.75rem );
+        width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
     }
 }
 
@@ -1098,21 +1097,21 @@ html[dir="rtl"] .topbar-button-next i {
 
 @media screen and (max-width: 59.999rem) {
     #R-sidebar {
-        min-width: 14.375rem;
+        min-width: var(--INTERNAL-MENU-WIDTH-M);
-        max-width: 14.375rem;
+        max-width: var(--INTERNAL-MENU-WIDTH-M);
-        width: 14.375rem;
+        width: var(--INTERNAL-MENU-WIDTH-M);
     }
     #R-body {
-        margin-inline-start: 14.375rem;
+        margin-inline-start: var(--INTERNAL-MENU-WIDTH-M);
-        min-width: calc( 100% - 14.375rem);
+        min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
-        max-width: calc( 100% - 14.375rem);
+        max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
-        width: calc( 100% - 14.375rem);
+        width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
     }
 }
 @media screen and (max-width: 47.999rem) {
     /* we don't support sidebar flyout in mobile */
     .mobile-support #R-sidebar {
-        inset-inline-start: -14.375rem;
+        inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-M) );
     }
     .mobile-support #navshow{
         display: inline;
@@ -1133,7 +1132,7 @@ html[dir="rtl"] .topbar-button-next i {
         z-index: 90;
     }
     .mobile-support.sidebar-flyout #R-body {
-        margin-inline-start: 14.375rem;
+        margin-inline-start: var(--INTERNAL-MENU-WIDTH-M);
         overflow: hidden;
     }
     .mobile-support.sidebar-flyout #R-body-overlay{

static/css/variant-internal.css

@@ -109,4 +109,7 @@
     --INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default);
     --INTERNAL-PRINT-OPENAPI-theme: var(--PRINT-OPENAPI-theme, var(--PRINT-SWAGGER-theme, light));
     --INTERNAL-PRINT-OPENAPI-CODE-theme: var(--PRINT-OPENAPI-CODE-theme, idea);
+
+    --INTERNAL-MENU-WIDTH-M: var(--MENU-WIDTH-M, 14.375rem);
+    --INTERNAL-MENU-WIDTH-L: var(--MENU-WIDTH-L, 18.75rem);
 }