diff --git a/docs/configuration.md b/docs/configuration.md index 20e1bf2..0681386 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -264,6 +264,7 @@ pages: | ---- | ---- | -------- | ------- | | title | string | yes | | | slug | string | no | | +| width | string | no | | | show-mobile-header | boolean | no | false | | columns | array | yes | | @@ -273,6 +274,18 @@ The name of the page which gets shown in the navigation bar. #### `slug` The URL friendly version of the title which is used to access the page. For example if the title of the page is "RSS Feeds" you can make the page accessible via `localhost:8080/feeds` by setting the slug to `feeds`. If not defined, it will automatically be generated from the title. +#### `width` +The maximum width of the page on desktop. Possible values are `slim` and `wide`. + +* default: `1600px` +* slim: `1100px` +* wide: `1920px` + +> [!NOTE] +> +> When using `slim`, the maximum number of columns allowed for that page is `2`. + + #### `show-mobile-header` Whether to show a header displaying the name of the page on mobile. The header purposefully has a lot of vertical whitespace in order to push the content down and make it easier to reach on tall devices. diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 8b34b78..65577e3 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -428,6 +428,14 @@ kbd:active { padding: 0 var(--content-bounds-padding); } +.page-width-wide .content-bounds { + max-width: 1920px; +} + +.page-width-slim .content-bounds { + max-width: 1100px; +} + .dynamic-columns { gap: calc(var(--widget-content-vertical-padding) / 2); display: grid; diff --git a/internal/assets/templates/page.html b/internal/assets/templates/page.html index 98bb111..c83923b 100644 --- a/internal/assets/templates/page.html +++ b/internal/assets/templates/page.html @@ -10,7 +10,7 @@ {{ end }} -{{ define "document-root-attrs" }}{{ if .App.Config.Theme.Light }}class="light-scheme"{{ end }}{{ end }} +{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if ne "" .Page.Width }}page-width-{{ .Page.Width }}{{ end }}"{{ end }} {{ define "document-head-after" }} {{ template "page-style-overrides.gotmpl" . }} {{ if ne "" .App.Config.Theme.CustomCSSFile }} diff --git a/internal/glance/config.go b/internal/glance/config.go index 2f2b1eb..718988c 100644 --- a/internal/glance/config.go +++ b/internal/glance/config.go @@ -60,12 +60,22 @@ func configIsValid(config *Config) error { return fmt.Errorf("Page %d has no title", i+1) } + if config.Pages[i].Width != "" && (config.Pages[i].Width != "wide" && config.Pages[i].Width != "slim") { + return fmt.Errorf("Page %d: width can only be either wide or slim", i+1) + } + if len(config.Pages[i].Columns) == 0 { return fmt.Errorf("Page %d has no columns", i+1) } - if len(config.Pages[i].Columns) > 3 { - return fmt.Errorf("Page %d has more than 3 columns: %d", i+1, len(config.Pages[i].Columns)) + if config.Pages[i].Width == "slim" { + if len(config.Pages[i].Columns) > 2 { + return fmt.Errorf("Page %d is slim and cannot have more than 2 columns", i+1) + } + } else { + if len(config.Pages[i].Columns) > 3 { + return fmt.Errorf("Page %d has more than 3 columns: %d", i+1, len(config.Pages[i].Columns)) + } } columnSizesCount := make(map[string]int) diff --git a/internal/glance/glance.go b/internal/glance/glance.go index 7187023..9d854a0 100644 --- a/internal/glance/glance.go +++ b/internal/glance/glance.go @@ -60,6 +60,7 @@ type templateData struct { type Page struct { Title string `yaml:"name"` Slug string `yaml:"slug"` + Width string `yaml:"width"` ShowMobileHeader bool `yaml:"show-mobile-header"` Columns []Column `yaml:"columns"` mu sync.Mutex