theme: support full page width #752

McShelby · Mar 11, 2024 · 91752cc · 91752cc
1 parent 2bf75b4
commit 91752cc
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 );
+})();