From 87b51bb67f5fa524a4f3a38638be8adbbdd6189e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Thu, 5 Oct 2023 14:59:27 +0200 Subject: [PATCH] menu: make width configurable #677 --- .../content/basics/customization/_index.en.md | 26 ++++++++---- .../content/basics/migration/_index.en.md | 2 + static/css/ie.css | 31 +++++++++++++- static/css/theme.css | 41 +++++++++---------- static/css/variant-internal.css | 3 ++ 5 files changed, 74 insertions(+), 29 deletions(-) diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md index 0288187607..e7d1c4e53e 100644 --- a/exampleSite/content/basics/customization/_index.en.md +++ b/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 ``` -## 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. diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 3f42ff26d4..1e3c777870 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/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} diff --git a/static/css/ie.css b/static/css/ie.css index 518e425f37..fe90e48483 100644 --- a/static/css/ie.css +++ b/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) { diff --git a/static/css/theme.css b/static/css/theme.css index ca54493e87..c18174a8df 100644 --- a/static/css/theme.css +++ b/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; - max-width: 14.375rem; - width: 14.375rem; + min-width: var(--INTERNAL-MENU-WIDTH-M); + max-width: var(--INTERNAL-MENU-WIDTH-M); + width: var(--INTERNAL-MENU-WIDTH-M); } #R-body { - margin-inline-start: 14.375rem; - min-width: calc( 100% - 14.375rem); - max-width: calc( 100% - 14.375rem); - width: calc( 100% - 14.375rem); + margin-inline-start: var(--INTERNAL-MENU-WIDTH-M); + min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); + max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) ); + 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{ diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css index 36f4cc0d1d..ec118de686 100644 --- a/static/css/variant-internal.css +++ b/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); }