diff --git a/CHANGELOG.md b/CHANGELOG.md index 5571dcd5..b022e5f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Added +- Header layouts for selecting a preferred header style +- Hamburger menu header layout with popover main menu ([#167](https://github.com/jpanther/congo/discussions/167), [#88](https://github.com/jpanther/congo/discussions/88), [#43](https://github.com/jpanther/congo/discussions/43), [#29](https://github.com/jpanther/congo/discussions/29)) - Front matter support for showing or hiding comments on a per article basis ([#207](https://github.com/jpanther/congo/discussions/207)) - `showCopyright` and `showThemeAttribution` parameters that allow more control over how the site footer is displayed ([#192](https://github.com/jpanther/congo/discussions/192)) +- `bars` SVG icon ### Changed diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index c7633db6..7e0d9ddd 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1015,6 +1015,22 @@ body button { display: none; } +/* Hamburger menu */ + +body:has(#menu-controller:checked) { + position: fixed; + overflow-y: scroll; +} + +#menu-button:has(#menu-controller:checked) { + visibility: hidden; +} + +#menu-controller:checked ~ #menu-wrapper { + visibility: visible; + opacity: 1; +} + /* RTL support */ [dir="rtl"] .prose blockquote { @@ -1706,6 +1722,14 @@ body button { z-index: 10; } +.z-40 { + z-index: 40; +} + +.z-30 { + z-index: 30; +} + .order-first { order: -9999; } @@ -1748,6 +1772,11 @@ body button { margin-bottom: 0px; } +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + .mb-3 { margin-bottom: 0.75rem; } @@ -2015,6 +2044,10 @@ body button { overflow: hidden; } +.overflow-visible { + overflow: visible; +} + .scroll-smooth { scroll-behavior: smooth; } @@ -2118,6 +2151,10 @@ body button { background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); } +.bg-neutral-100\/50 { + background-color: rgba(var(--color-neutral-100), 0.5); +} + .object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; @@ -2849,6 +2886,10 @@ body button { padding-bottom: 2.5rem; } + .sm\:pt-10 { + padding-top: 2.5rem; + } + .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; diff --git a/assets/css/main.css b/assets/css/main.css index 7285f736..c1ce3339 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -21,6 +21,17 @@ body button { @apply hidden; } +/* Hamburger menu */ +body:has(#menu-controller:checked) { + @apply fixed overflow-y-scroll; +} +#menu-button:has(#menu-controller:checked) { + @apply invisible; +} +#menu-controller:checked ~ #menu-wrapper { + @apply visible opacity-100; +} + /* RTL support */ .prose blockquote { @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4; diff --git a/assets/icons/bars.svg b/assets/icons/bars.svg new file mode 100644 index 00000000..6e5941da --- /dev/null +++ b/assets/icons/bars.svg @@ -0,0 +1 @@ + diff --git a/config/_default/params.toml b/config/_default/params.toml index 1f9bcf8a..bcdfd4d8 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -15,6 +15,9 @@ enableCodeCopy = false # mainSections = ["section1", "section2"] # robots = "" +[header] + layout = "basic" # valid options: basic, hamburger, custom + [footer] showCopyright = true showThemeAttribution = true diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 5ce3dc2b..07579abe 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -15,6 +15,9 @@ enableCodeCopy = true mainSections = ["samples"] # robots = "" +[header] + layout = "basic" # valid options: basic, hamburger, custom + [footer] showCopyright = true showThemeAttribution = true diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index a692026d..4b3b0d48 100644 --- a/exampleSite/content/docs/configuration.md +++ b/exampleSite/content/docs/configuration.md @@ -121,6 +121,7 @@ Many of the article defaults here can be overridden on a per article basis by sp |`logo`|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.| |`mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.| |`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.| +|`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.| |`footer.showCopyright`|`true`|Whether or not to show the copyright string in the site footer. Note that the string itself can be customised using the `copyright` parameter in the [languages configuration](#language-and-i18n).| |`footer.showThemeAttribution`|`true`|Whether or not to show the "powered by" theme attribution in the site footer. If you choose to disable this message, please consider attributing the theme somewhere else on your site (for example, on your about page).| |`footer.showAppearanceSwitcher`|`false`|Whether or not to show the appearance switcher in the site footer. The browser's local storage is used to persist the visitor's preference.| diff --git a/exampleSite/content/samples/icons.md b/exampleSite/content/samples/icons.md index 1559a393..f55c058d 100644 --- a/exampleSite/content/samples/icons.md +++ b/exampleSite/content/samples/icons.md @@ -19,6 +19,7 @@ The full list of built-in icons and their corresponding names can referenced bel | -------------------- | --------------------------------- | | amazon | {{< icon amazon >}} | | apple | {{< icon apple >}} | +| bars | {{< icon bars >}} | | blogger | {{< icon blogger >}} | | bug | {{< icon bug >}} | | check | {{< icon check >}} | diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3e80305f..86baac14 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -25,7 +25,12 @@ >{{ i18n "nav.skip_to_main" }} - {{- partial "header.html" . -}} + {{ $header := print "partials/header/" .Site.Params.header.layout ".html" }} + {{ if templates.Exists $header }} + {{ partial $header . }} + {{ else }} + {{ partial "partials/header/basic.html" . }} + {{ end }}
{{ block "main" . }}{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html deleted file mode 100644 index fec98296..00000000 --- a/layouts/partials/header.html +++ /dev/null @@ -1,63 +0,0 @@ -
- {{/* Site logo/title */}} -
- {{ if .Site.Params.Logo -}} - {{ $logo := resources.Get .Site.Params.Logo }} - {{ if $logo }} - - {{ .Site.Title }} - - {{ end }} - {{ else }} - {{ .Site.Title | markdownify | emojify }} - {{- end }} - {{ partial "translations.html" . }} -
- {{/* Main menu */}} - {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }} - - {{ end }} -
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html new file mode 100644 index 00000000..bb214f57 --- /dev/null +++ b/layouts/partials/header/basic.html @@ -0,0 +1,57 @@ +
+ +
diff --git a/layouts/partials/header/hamburger.html b/layouts/partials/header/hamburger.html new file mode 100644 index 00000000..d28f98ca --- /dev/null +++ b/layouts/partials/header/hamburger.html @@ -0,0 +1,75 @@ +
+ +
diff --git a/layouts/partials/translations.html b/layouts/partials/translations.html index 001e38cd..e4724e3e 100644 --- a/layouts/partials/translations.html +++ b/layouts/partials/translations.html @@ -1,7 +1,7 @@ {{ if .IsTranslated }} - +
{{ end }}