Rockingcool/paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the narrow-and-wide look

Browse Source
This commit is contained in:
Will Faught
2024-06-05 23:08:12 -07:00
parent 62756fcf20
commit 21fbf8a1fc
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@@ -163,7 +163,7 @@ please share it by [posting a link](https://github.com/willfaught/paige/discussi
See Hugo's [installation](https://gohugo.io/installation/), [getting started](https://gohugo.io/getting-started/), and [module](https://gohugo.io/hugo-modules/) guides for more information.
See the [minimal look](#minimal-look), [narrow look](#narrow-look), and [menu navigation only](#menu-navigation-only) sections for common customizations.
See the [minimal look](#minimal-look), [narrow look](#narrow-look), [narrow-and-wide look](#narrow-and-wide-look), and [menu navigation only](#menu-navigation-only) sections for common customizations.
## Configure
@@ -1059,6 +1059,25 @@ try the following in `yoursite/hugo.toml`:
style = "#paige-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }"
```
### Narrow-and-wide look
By default, the content expands to fill the whole window.
This can result in very long lines, depending on the window width.
To use [the recommended line length of 66 characters](https://en.wikipedia.org/wiki/Line_length#Printed_text) (40rem)
for all content except media,
try the following in `yoursite/hugo.toml`:
```toml
[params.paige]
style = """
#paige-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
#paige-content > img,
#paige-content > .paige-image,
#paige-content > .paige-vimeo,
#paige-content > .paige-youtube { max-width: 100%; }
"""
```
### Menu navigation only
If you configure a menu, and intend for it to be sufficient for all navigation,