nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

theme: support full page width #752

Browse source
This commit is contained in:
Sören Weber 2024-03-11 23:52:26 +01:00
parent 2bf75b4ab3
commit 91752cc6b2
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
exampleSite/content/basics/customization/_index.en.md
View file

@ -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.

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -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).

14
static/css/theme.css
View file

@ -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 {

1
static/css/variant-internal.css
View file

@ -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);
}

24
static/js/theme.js
View file

@ -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 );
})();