From 91752cc6b217d08bd58202f2080ff6654aa78052 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Mon, 11 Mar 2024 23:52:26 +0100 Subject: [PATCH] theme: support full page width #752 --- .../content/basics/customization/_index.en.md | 12 ++++++++++ .../content/basics/migration/_index.en.md | 2 ++ static/css/theme.css | 16 ++++++------- static/css/variant-internal.css | 1 + static/js/theme.js | 24 ++++++++++++++----- 5 files changed, 40 insertions(+), 15 deletions(-) diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md index 153b4dd005..dcbda7c9a1 100644 --- a/exampleSite/content/basics/customization/_index.en.md +++ b/exampleSite/content/basics/customization/_index.en.md @@ -160,6 +160,18 @@ If you want to adjust the menu width you can define the following CSS variables } ```` +## Change the Main Area's Max Width + +By default the main area width will only grow to a certain extent if more vertical screen space is available. This is done for readability purposes as long line are usually harder to read. + +If you are unhappy with the default, you can define the following CSS variable in your `custom-header.html` and set the value to your liking. If you want to use all available space, select a really big value like `1000rem`; + +````css +:root { + --MAIN-WIDTH-MAX: 80.25rem; +} +```` + ## Own Shortcodes with JavaScript Dependencies Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files. diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 0567eca2a5..154e40f8ae 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -20,6 +20,8 @@ This document shows you what's new in the latest release and flags it with one o ## 5.26.0.beta (XXX) {#5260} +- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to [adjust the max width of the main area](basics/customization#change-the-main-areas-max-width), eg. in case you want to use the full page width for your content. + - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Images and Codefences are now respecting [Hugo's Markdown attributes](https://gohugo.io/content-management/markdown-attributes/). - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 10.6.0. This adds support for [block diagrams](shortcodes/mermaid#block-diagram). diff --git a/static/css/theme.css b/static/css/theme.css index 2a03435236..e0e8bcbcff 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -470,20 +470,18 @@ article a:focus > img:only-child:empty{ #R-body .flex-block-wrapper { margin-left: auto; margin-right: auto; - max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); + max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); width: 100%; } body:not(.print) #R-body .narrow .flex-block-wrapper { - max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem ); + max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - 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 - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); - } - body:not(.print) #R-body .narrow .flex-block-wrapper { - width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem ); - } +body.main-width-max #R-body .flex-block-wrapper { + width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem ); +} +body.main-width-max:not(.print) #R-body .narrow .flex-block-wrapper { + width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem ); } body:not(.print) #R-body-inner.narrow { diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css index cea4eb4031..daa3932baf 100644 --- a/static/css/variant-internal.css +++ b/static/css/variant-internal.css @@ -112,4 +112,5 @@ --INTERNAL-MENU-WIDTH-S: var(--MENU-WIDTH-S, 14.375rem); --INTERNAL-MENU-WIDTH-M: var(--MENU-WIDTH-M, 14.375rem); --INTERNAL-MENU-WIDTH-L: var(--MENU-WIDTH-L, 18.75rem); + --INTERNAL-MAIN-WIDTH-MAX: var(--MAIN-WIDTH-MAX, 81.25rem); } diff --git a/static/js/theme.js b/static/js/theme.js index fef8238c65..7356e81e4b 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1601,9 +1601,9 @@ ready( function(){ }); } function moveTopbarButtons(){ - var isS = body.classList.contains( 'width-s' ); - var isM = body.classList.contains( 'width-m' ); - var isL = body.classList.contains( 'width-l' ); + var isS = body.classList.contains( 'menu-width-s' ); + var isM = body.classList.contains( 'menu-width-m' ); + var isL = body.classList.contains( 'menu-width-l' ); // move buttons once, width has a distinct value if( isS && !isM && !isL ){ moveAreaTopbarButtons( 's' ) @@ -1647,9 +1647,9 @@ ready( function(){ } }) } - function setWidthS(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-s' ); } - function setWidthM(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-m' ); } - function setWidthL(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-l' ); } + function setWidthS(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-s' ); } + function setWidthM(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-m' ); } + function setWidthL(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-l' ); } function onWidthChange( setWidth, e ){ setWidth( e ); moveTopbarButtons(); @@ -1669,3 +1669,15 @@ ready( function(){ moveTopbarButtons(); adjustEmptyTopbarContents(); })(); + +(function(){ + var body = document.querySelector( 'body' ); + function setWidth(e){ body.classList[ e.matches ? "add" : "remove" ]( 'main-width-max' ); } + function onWidthChange( setWidth, e ){ + setWidth( e ); + } + var width = variants.getColorValue( 'MAIN-WIDTH-MAX' ); + var mqm = window.matchMedia( 'screen and ( min-width: ' + width + ')' ); + mqm.addEventListener( 'change', onWidthChange.bind( null, setWidth ) ); + setWidth( mqm ); +})();