diff --git a/CHANGELOG.md b/CHANGELOG.md index ed10468c..07fe4efb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,34 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +## [2.3.0] - 2022-06-27 + +### 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 + +- ⚠️ Footer configuration parameters are now in their own `footer` sub-group +- Search will now return results for all page types, including lists and taxonomies +- Comments partials are now better considered within the page layout +- Reduced whitespace at the top of the main content block ([#226](https://github.com/jpanther/congo/discussions/226)) +- Upgrade to Tailwind v3.1.4 ([#225](https://github.com/jpanther/congo/pull/225)) + +### Fixed + +- Hugo v0.101.0 breaks the link to the homepage ([#230](https://github.com/jpanther/congo/issues/230)) +- Search link does not appear in header if main menu has no items to display +- Search only returns results in the primary language when multiple languages are available ([#229](https://github.com/jpanther/congo/issues/229)) +- Arrow on external article links not aligned correctly when title wraps onto multiple lines +- Arrow on external article links points the wrong direction for RTL languages +- Scroll to top misaligned with the footer at small viewport heights +- Link to homepage would be incorrect in some deployments if `baseURL` contained sub-directories in the path + ## [2.2.3] - 2022-06-22 ### Changed @@ -106,7 +134,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ### Changed - Upgrade SVG icons to FontAwesome 6: - - New icons for Hashnode, bug, check, comment, light bulb, list, pencil, skull, tag, and information. + - New icons for Hashnode, bug, check, comment, light bulb, list, pencil, skull, tag, and information. ([#136](https://github.com/jpanther/congo/discussions/136)) - ⚠️ The `exclamation-triangle` icon has been renamed `triangle-exclamation` - ⚠️ The `times` icon has been renamed `xmark` - ⚠️ The `stackoverflow` icon has been renamed `stack-overflow` @@ -191,7 +219,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Site search powered by Fuse.js - Automatic Markdown image resizing and srcset generation - Performance and Accessibility improvements to achieve perfect Lighthouse scores -- Tables of contents on article pages +- Tables of contents on article pages ([#47](https://github.com/jpanther/congo/discussions/47)) - Code copy buttons in article content - Taxonomy and term listings now support Markdown content - Taxonomies on article and list pages @@ -457,7 +485,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Advanced customisation using simple Tailwind colour definitions and styles - Fully documented -[unreleased]: https://github.com/jpanther/congo/compare/v2.2.3...HEAD +[unreleased]: https://github.com/jpanther/congo/compare/v2.3.0...HEAD +[2.3.0]: https://github.com/jpanther/congo/compare/v2.2.3...v2.3.0 [2.2.3]: https://github.com/jpanther/congo/compare/v2.2.2...v2.2.3 [2.2.2]: https://github.com/jpanther/congo/compare/v2.2.1...v2.2.2 [2.2.1]: https://github.com/jpanther/congo/compare/v2.2.0...v2.2.1 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index a4370d53..998714b5 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,6 +1,6 @@ -/*! Congo v2.2.3 | MIT License | https://github.com/jpanther/congo */ +/*! Congo v2.3.0 | MIT License | https://github.com/jpanther/congo */ -/*! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) @@ -16,7 +16,7 @@ /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; + border-color: currentColor; /* 2 */ } @@ -187,6 +187,8 @@ textarea { /* 1 */ font-size: 100%; /* 1 */ + font-weight: inherit; + /* 1 */ line-height: inherit; /* 1 */ color: inherit; @@ -415,15 +417,103 @@ video { height: auto; } -/* -Ensure the default browser behavior of the `hidden` attribute. -*/ - -[hidden] { - display: none; +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } -*, ::before, ::after { +::-webkit-backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -485,14 +575,14 @@ Ensure the default browser behavior of the `hidden` attribute. color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; - -webkit-text-decoration-color: rgb(var(--color-primary-300)); - text-decoration-color: rgb(var(--color-primary-300)); + -webkit-text-decoration-color: rgba(var(--color-primary-300), 1); + text-decoration-color: rgba(var(--color-primary-300), 1); } .prose :where(a):not(:where([class~="not-prose"] *)):hover { - color: rgb(var(--color-neutral)); + color: rgba(var(--color-neutral), 1); text-decoration: none; - background-color: rgb(var(--color-primary-600)); + background-color: rgba(var(--color-primary-600), 1); border-radius: 0.09rem; } @@ -742,38 +832,38 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose { - --tw-prose-body: rgb(var(--color-neutral-700)); - --tw-prose-headings: rgb(var(--color-neutral-800)); - --tw-prose-lead: rgb(var(--color-neutral-500)); - --tw-prose-links: rgb(var(--color-primary-700)); - --tw-prose-bold: rgb(var(--color-neutral-900)); - --tw-prose-counters: rgb(var(--color-neutral-800)); - --tw-prose-bullets: rgb(var(--color-neutral-500)); - --tw-prose-hr: rgb(var(--color-neutral-200)); - --tw-prose-quotes: rgb(var(--color-neutral-700)); - --tw-prose-quote-borders: rgb(var(--color-primary-200)); - --tw-prose-captions: rgb(var(--color-neutral-500)); - --tw-prose-code: rgb(var(--color-secondary-700)); - --tw-prose-pre-code: rgb(var(--color-neutral-700)); - --tw-prose-pre-bg: rgb(var(--color-neutral-50)); - --tw-prose-th-borders: rgb(var(--color-neutral-500)); - --tw-prose-td-borders: rgb(var(--color-neutral-300)); - --tw-prose-invert-body: rgb(var(--color-neutral-300)); - --tw-prose-invert-headings: rgb(var(--color-neutral-50)); - --tw-prose-invert-lead: rgb(var(--color-neutral-500)); - --tw-prose-invert-links: rgb(var(--color-primary-400)); - --tw-prose-invert-bold: rgb(var(--color-neutral)); - --tw-prose-invert-counters: rgb(var(--color-neutral-400)); - --tw-prose-invert-bullets: rgb(var(--color-neutral-600)); - --tw-prose-invert-hr: rgb(var(--color-neutral-500)); - --tw-prose-invert-quotes: rgb(var(--color-neutral-200)); - --tw-prose-invert-quote-borders: rgb(var(--color-primary-900)); - --tw-prose-invert-captions: rgb(var(--color-neutral-400)); - --tw-prose-invert-code: rgb(var(--color-secondary-400)); - --tw-prose-invert-pre-code: rgb(var(--color-neutral-200)); - --tw-prose-invert-pre-bg: rgb(var(--color-neutral-700)); - --tw-prose-invert-th-borders: rgb(var(--color-neutral-500)); - --tw-prose-invert-td-borders: rgb(var(--color-neutral-700)); + --tw-prose-body: rgba(var(--color-neutral-700), 1); + --tw-prose-headings: rgba(var(--color-neutral-800), 1); + --tw-prose-lead: rgba(var(--color-neutral-500), 1); + --tw-prose-links: rgba(var(--color-primary-700), 1); + --tw-prose-bold: rgba(var(--color-neutral-900), 1); + --tw-prose-counters: rgba(var(--color-neutral-800), 1); + --tw-prose-bullets: rgba(var(--color-neutral-500), 1); + --tw-prose-hr: rgba(var(--color-neutral-200), 1); + --tw-prose-quotes: rgba(var(--color-neutral-700), 1); + --tw-prose-quote-borders: rgba(var(--color-primary-200), 1); + --tw-prose-captions: rgba(var(--color-neutral-500), 1); + --tw-prose-code: rgba(var(--color-secondary-700), 1); + --tw-prose-pre-code: rgba(var(--color-neutral-700), 1); + --tw-prose-pre-bg: rgba(var(--color-neutral-50), 1); + --tw-prose-th-borders: rgba(var(--color-neutral-500), 1); + --tw-prose-td-borders: rgba(var(--color-neutral-300), 1); + --tw-prose-invert-body: rgba(var(--color-neutral-300), 1); + --tw-prose-invert-headings: rgba(var(--color-neutral-50), 1); + --tw-prose-invert-lead: rgba(var(--color-neutral-500), 1); + --tw-prose-invert-links: rgba(var(--color-primary-400), 1); + --tw-prose-invert-bold: rgba(var(--color-neutral), 1); + --tw-prose-invert-counters: rgba(var(--color-neutral-400), 1); + --tw-prose-invert-bullets: rgba(var(--color-neutral-600), 1); + --tw-prose-invert-hr: rgba(var(--color-neutral-500), 1); + --tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1); + --tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1); + --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1); + --tw-prose-invert-code: rgba(var(--color-secondary-400), 1); + --tw-prose-invert-pre-code: rgba(var(--color-neutral-200), 1); + --tw-prose-invert-pre-bg: rgba(var(--color-neutral-700), 1); + --tw-prose-invert-th-borders: rgba(var(--color-neutral-500), 1); + --tw-prose-invert-td-borders: rgba(var(--color-neutral-700), 1); font-size: 1rem; line-height: 1.75; } @@ -886,7 +976,7 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(kbd):not(:where([class~="not-prose"] *)) { - background-color: rgb(var(--color-neutral-200)); + background-color: rgba(var(--color-neutral-200), 1); padding: 0.1rem 0.4rem; border-radius: 0.25rem; font-size: 0.9rem; @@ -894,13 +984,14 @@ Ensure the default browser behavior of the `hidden` attribute. } .prose :where(mark):not(:where([class~="not-prose"] *)) { - color: rgb(var(--color-neutral-800)); - background-color: rgb(var(--color-secondary-200)); + color: rgba(var(--color-neutral-800), 1); + background-color: rgba(var(--color-secondary-200), 1); padding: 0.1rem 0.2rem; border-radius: 0.12rem; } -body a, body button { +body a, +body button { transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; @@ -917,10 +1008,29 @@ body a, body button { /* Search */ -#search-query::-webkit-search-cancel-button, #search-query::-webkit-search-decoration, #search-query::-webkit-search-results-button, #search-query::-webkit-search-results-decoration { +#search-query::-webkit-search-cancel-button, +#search-query::-webkit-search-decoration, +#search-query::-webkit-search-results-button, +#search-query::-webkit-search-results-decoration { 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 { @@ -929,28 +1039,39 @@ body a, body button { padding-right: 1rem; } -[dir="rtl"] .prose ul > li, [dir="rtl"] .prose ol > li { +[dir="rtl"] .prose ul > li, [dir="rtl"] +.prose ol > li { margin-right: 1.75rem; padding-left: 0px; padding-right: 0.5rem; } -[dir="rtl"] .prose ol > li:before, [dir="rtl"] .prose ul > li:before { +[dir="rtl"] .prose ol > li:before, [dir="rtl"] +.prose ul > li:before { left: auto; right: 0.25rem; } -[dir="rtl"] .prose thead td:first-child, [dir="rtl"] .prose thead th:first-child { +[dir="rtl"] .prose thead td:first-child, [dir="rtl"] +.prose thead th:first-child { padding-right: 0px; } -[dir="rtl"] .prose thead td:last-child, [dir="rtl"] .prose thead th:last-child { +[dir="rtl"] .prose thead td:last-child, [dir="rtl"] +.prose thead th:last-child { padding-left: 0px; } +/* Adjust first child within prose */ + +.prose div.min-w-0.max-w-prose > *:first-child { + margin-top: 0.75rem; +} + /* Table of Contents */ -.toc ul, .toc li { +.toc ul, +.toc li { list-style-type: none; padding-left: 0px; padding-right: 0px; @@ -1025,12 +1146,18 @@ body a, body button { color: rgba(var(--color-neutral-200), var(--tw-text-opacity)); } -.copy-button:hover, .copy-button:focus, .copy-button:active, .copy-button:active:hover { +.copy-button:hover, +.copy-button:focus, +.copy-button:active, +.copy-button:active:hover { --tw-bg-opacity: 1; background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); } -.dark .copy-button:hover, .dark .copy-button:focus, .dark .copy-button:active, .dark .copy-button:active:hover { +.dark .copy-button:hover, .dark +.copy-button:focus, .dark +.copy-button:active, .dark +.copy-button:active:hover { --tw-bg-opacity: 1; background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); } @@ -1063,7 +1190,8 @@ body a, body button { /* LineTableTD */ -.chroma .lntd, .chroma .lntd pre { +.chroma .lntd, +.chroma .lntd pre { margin: 0px; border-style: none; padding: 0px; @@ -1112,7 +1240,8 @@ body a, body button { /* LineNumbers */ -.chroma .lnt, .chroma .ln { +.chroma .lnt, +.chroma .ln { margin-right: 0.4em; padding-left: 0.4em; padding-right: 0.4em; @@ -1122,7 +1251,8 @@ body a, body button { color: rgba(var(--color-neutral-600), var(--tw-text-opacity)); } -.dark .chroma .lnt, .dark .chroma .ln { +.dark .chroma .lnt, .dark +.chroma .ln { --tw-text-opacity: 1; color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); } @@ -1147,12 +1277,30 @@ body a, body button { /* Operator */ -.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o { +.chroma .k, +.chroma .kd, +.chroma .kn, +.chroma .kp, +.chroma .kr, +.chroma .nc, +.chroma .fm, +.chroma .nn, +.chroma .vc, +.chroma .o { --tw-text-opacity: 1; color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } -.dark .chroma .k, .dark .chroma .kd, .dark .chroma .kn, .dark .chroma .kp, .dark .chroma .kr, .dark .chroma .nc, .dark .chroma .fm, .dark .chroma .nn, .dark .chroma .vc, .dark .chroma .o { +.dark .chroma .k, .dark +.chroma .kd, .dark +.chroma .kn, .dark +.chroma .kp, .dark +.chroma .kr, .dark +.chroma .nc, .dark +.chroma .fm, .dark +.chroma .nn, .dark +.chroma .vc, .dark +.chroma .o { --tw-text-opacity: 1; color: rgba(var(--color-primary-300), var(--tw-text-opacity)); } @@ -1192,12 +1340,32 @@ body a, body button { /* LiteralNumberOct */ -.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { +.chroma .kt, +.chroma .nv, +.chroma .vi, +.chroma .vm, +.chroma .m, +.chroma .mb, +.chroma .mf, +.chroma .mh, +.chroma .mi, +.chroma .il, +.chroma .mo { --tw-text-opacity: 1; color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } -.dark .chroma .kt, .dark .chroma .nv, .dark .chroma .vi, .dark .chroma .vm, .dark .chroma .m, .dark .chroma .mb, .dark .chroma .mf, .dark .chroma .mh, .dark .chroma .mi, .dark .chroma .il, .dark .chroma .mo { +.dark .chroma .kt, .dark +.chroma .nv, .dark +.chroma .vi, .dark +.chroma .vm, .dark +.chroma .m, .dark +.chroma .mb, .dark +.chroma .mf, .dark +.chroma .mh, .dark +.chroma .mi, .dark +.chroma .il, .dark +.chroma .mo { --tw-text-opacity: 1; color: rgba(var(--color-secondary-600), var(--tw-text-opacity)); } @@ -1210,12 +1378,18 @@ body a, body button { /* NameLabel */ -.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl { +.chroma .n, +.chroma .nd, +.chroma .ni, +.chroma .nl { --tw-text-opacity: 1; color: rgba(var(--color-secondary-900), var(--tw-text-opacity)); } -.dark .chroma .n, .dark .chroma .nd, .dark .chroma .ni, .dark .chroma .nl { +.dark .chroma .n, .dark +.chroma .nd, .dark +.chroma .ni, .dark +.chroma .nl { --tw-text-opacity: 1; color: rgba(var(--color-secondary-200), var(--tw-text-opacity)); } @@ -1232,12 +1406,22 @@ body a, body button { /* NameTag */ -.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt { +.chroma .na, +.chroma .nb, +.chroma .bp, +.chroma .nx, +.chroma .py, +.chroma .nt { --tw-text-opacity: 1; color: rgba(var(--color-secondary-800), var(--tw-text-opacity)); } -.dark .chroma .na, .dark .chroma .nb, .dark .chroma .bp, .dark .chroma .nx, .dark .chroma .py, .dark .chroma .nt { +.dark .chroma .na, .dark +.chroma .nb, .dark +.chroma .bp, .dark +.chroma .nx, .dark +.chroma .py, .dark +.chroma .nt { --tw-text-opacity: 1; color: rgba(var(--color-secondary-300), var(--tw-text-opacity)); } @@ -1248,13 +1432,17 @@ body a, body button { /* NameVariableGlobal */ -.chroma .no, .chroma .ne, .chroma .vg { +.chroma .no, +.chroma .ne, +.chroma .vg { font-weight: 600; --tw-text-opacity: 1; color: rgba(var(--color-secondary-400), var(--tw-text-opacity)); } -.dark .chroma .no, .dark .chroma .ne, .dark .chroma .vg { +.dark .chroma .no, .dark +.chroma .ne, .dark +.chroma .vg { --tw-text-opacity: 1; color: rgba(var(--color-secondary-500), var(--tw-text-opacity)); } @@ -1303,12 +1491,42 @@ body a, body button { /* GenericPrompt */ -.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp { +.chroma .l, +.chroma .ld, +.chroma .s, +.chroma .sa, +.chroma .sb, +.chroma .sc, +.chroma .dl, +.chroma .sd, +.chroma .s2, +.chroma .sh, +.chroma .si, +.chroma .sx, +.chroma .s1, +.chroma .gi, +.chroma .go, +.chroma .gp { --tw-text-opacity: 1; color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } -.dark .chroma .l, .dark .chroma .ld, .dark .chroma .s, .dark .chroma .sa, .dark .chroma .sb, .dark .chroma .sc, .dark .chroma .dl, .dark .chroma .sd, .dark .chroma .s2, .dark .chroma .sh, .dark .chroma .si, .dark .chroma .sx, .dark .chroma .s1, .dark .chroma .gi, .dark .chroma .go, .dark .chroma .gp { +.dark .chroma .l, .dark +.chroma .ld, .dark +.chroma .s, .dark +.chroma .sa, .dark +.chroma .sb, .dark +.chroma .sc, .dark +.chroma .dl, .dark +.chroma .sd, .dark +.chroma .s2, .dark +.chroma .sh, .dark +.chroma .si, .dark +.chroma .sx, .dark +.chroma .s1, .dark +.chroma .gi, .dark +.chroma .go, .dark +.chroma .gp { --tw-text-opacity: 1; color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } @@ -1330,13 +1548,15 @@ body a, body button { /* LiteralStringSymbol */ -.chroma .sr, .chroma .ss { +.chroma .sr, +.chroma .ss { font-weight: 600; --tw-text-opacity: 1; color: rgba(var(--color-primary-800), var(--tw-text-opacity)); } -.dark .chroma .sr, .dark .chroma .ss { +.dark .chroma .sr, .dark +.chroma .ss { --tw-text-opacity: 1; color: rgba(var(--color-primary-400), var(--tw-text-opacity)); } @@ -1366,13 +1586,23 @@ body a, body button { /* CommentPreprocFile */ -.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { +.chroma .c, +.chroma .cm, +.chroma .c1, +.chroma .cs, +.chroma .cp, +.chroma .cpf { font-style: italic; --tw-text-opacity: 1; color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } -.dark .chroma .c, .dark .chroma .cm, .dark .chroma .c1, .dark .chroma .cs, .dark .chroma .cp, .dark .chroma .cpf { +.dark .chroma .c, .dark +.chroma .cm, .dark +.chroma .c1, .dark +.chroma .cs, .dark +.chroma .cp, .dark +.chroma .cpf { --tw-text-opacity: 1; color: rgba(var(--color-neutral-400), var(--tw-text-opacity)); } @@ -1415,7 +1645,8 @@ body a, body button { /* GenericTraceback */ -.chroma .gu, .chroma .gt { +.chroma .gu, +.chroma .gt { --tw-text-opacity: 1; color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } @@ -1463,8 +1694,8 @@ body a, body button { left: 0px; } -.top-\[110vh\] { - top: 110vh; +.top-\[100vh\] { + top: 100vh; } .bottom-0 { @@ -1491,6 +1722,14 @@ body a, body button { z-index: 10; } +.z-40 { + z-index: 40; +} + +.z-30 { + z-index: 30; +} + .order-first { order: -9999; } @@ -1533,6 +1772,11 @@ body a, body button { margin-bottom: 0px; } +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + .mb-3 { margin-bottom: 0.75rem; } @@ -1561,10 +1805,6 @@ body a, body button { margin-top: 1.5rem; } -.-mt-2 { - margin-top: -0.5rem; -} - .mr-3 { margin-right: 0.75rem; } @@ -1721,14 +1961,14 @@ body a, body button { max-width: 65ch; } -.max-w-\[10rem\] { - max-width: 10rem; -} - .max-w-3xl { max-width: 48rem; } +.max-w-\[10rem\] { + max-width: 10rem; +} + .flex-none { flex: none; } @@ -1804,6 +2044,10 @@ body a, body button { overflow: hidden; } +.overflow-visible { + overflow: visible; +} + .scroll-smooth { scroll-behavior: smooth; } @@ -1850,16 +2094,16 @@ body a, body button { border-color: rgba(var(--color-neutral-400), var(--tw-border-opacity)); } -.border-neutral-200 { - --tw-border-opacity: 1; - border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity)); -} - .border-neutral-300 { --tw-border-opacity: 1; border-color: rgba(var(--color-neutral-300), var(--tw-border-opacity)); } +.border-neutral-200 { + --tw-border-opacity: 1; + border-color: rgba(var(--color-neutral-200), var(--tw-border-opacity)); +} + .border-primary-400 { --tw-border-opacity: 1; border-color: rgba(var(--color-primary-400), var(--tw-border-opacity)); @@ -1907,6 +2151,10 @@ body a, 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; @@ -1970,11 +2218,6 @@ body a, body button { padding-bottom: 2.5rem; } -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -1990,18 +2233,23 @@ body a, body button { padding-bottom: 0.75rem; } +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + .pt-8 { padding-top: 2rem; } -.pl-2 { - padding-left: 0.5rem; -} - .pt-3 { padding-top: 0.75rem; } +.pl-2 { + padding-left: 0.5rem; +} + .pb-4 { padding-bottom: 1rem; } @@ -2018,6 +2266,10 @@ body a, body button { text-align: right; } +.align-top { + vertical-align: top; +} + .align-text-bottom { vertical-align: text-bottom; } @@ -2157,13 +2409,13 @@ body a, body button { } .decoration-primary-500 { - -webkit-text-decoration-color: rgb(var(--color-primary-500)); - text-decoration-color: rgb(var(--color-primary-500)); + -webkit-text-decoration-color: rgba(var(--color-primary-500), 1); + text-decoration-color: rgba(var(--color-primary-500), 1); } .decoration-neutral-300 { - -webkit-text-decoration-color: rgb(var(--color-neutral-300)); - text-decoration-color: rgb(var(--color-neutral-300)); + -webkit-text-decoration-color: rgba(var(--color-neutral-300), 1); + text-decoration-color: rgba(var(--color-neutral-300), 1); } .opacity-0 { @@ -2249,8 +2501,8 @@ body a, body button { } .hover\:decoration-primary-400:hover { - -webkit-text-decoration-color: rgb(var(--color-primary-400)); - text-decoration-color: rgb(var(--color-primary-400)); + -webkit-text-decoration-color: rgba(var(--color-primary-400), 1); + text-decoration-color: rgba(var(--color-primary-400), 1); } .hover\:decoration-2:hover { @@ -2299,8 +2551,8 @@ body a, body button { } .group:hover .group-hover\:decoration-primary-500 { - -webkit-text-decoration-color: rgb(var(--color-primary-500)); - text-decoration-color: rgb(var(--color-primary-500)); + -webkit-text-decoration-color: rgba(var(--color-primary-500), 1); + text-decoration-color: rgba(var(--color-primary-500), 1); } .group:hover .group-hover\:opacity-100 { @@ -2447,17 +2699,17 @@ body a, body button { } .dark .dark\:prose-invert :where(a):not(:where([class~="not-prose"] *)) { - -webkit-text-decoration-color: rgb(var(--color-neutral-600)); - text-decoration-color: rgb(var(--color-neutral-600)); + -webkit-text-decoration-color: rgba(var(--color-neutral-600), 1); + text-decoration-color: rgba(var(--color-neutral-600), 1); } .dark .dark\:prose-invert :where(kbd):not(:where([class~="not-prose"] *)) { - color: rgb(var(--color-neutral-200)); - background-color: rgb(var(--color-neutral-700)); + color: rgba(var(--color-neutral-200), 1); + background-color: rgba(var(--color-neutral-700), 1); } .dark .dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) { - background-color: rgb(var(--color-secondary-400)); + background-color: rgba(var(--color-secondary-400), 1); } .dark .dark\:inline { @@ -2620,10 +2872,6 @@ body a, body button { flex-direction: row; } - .sm\:items-center { - align-items: center; - } - .sm\:p-6 { padding: 1.5rem; } @@ -2638,6 +2886,10 @@ body a, body button { padding-bottom: 2.5rem; } + .sm\:pt-10 { + padding-top: 2.5rem; + } + .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -2689,10 +2941,6 @@ body a, body button { order: 9999; } - .lg\:mt-3 { - margin-top: 0.75rem; - } - .lg\:hidden { display: none; } diff --git a/assets/css/main.css b/assets/css/main.css index 8a0d7428..7cc40e36 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,4 +1,4 @@ -/*! Congo v2.2.3 | MIT License | https://github.com/jpanther/congo */ +/*! Congo v2.3.0 | MIT License | https://github.com/jpanther/congo */ @tailwind base; @tailwind components; @@ -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; @@ -42,6 +53,11 @@ body button { @apply rtl:pl-0; } +/* Adjust first child within prose */ +.prose div.min-w-0.max-w-prose > *:first-child { + @apply mt-3; +} + /* Table of Contents */ .toc ul, .toc li { 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 d1a1f312..bcdfd4d8 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -8,14 +8,21 @@ colorScheme = "congo" defaultAppearance = "light" # valid options: light or dark autoSwitchAppearance = true -showAppearanceSwitcher = false enableSearch = false enableCodeCopy = false # mainSections = ["section1", "section2"] # robots = "" -showScrollToTop = true + +[header] + layout = "basic" # valid options: basic, hamburger, custom + +[footer] + showCopyright = true + showThemeAttribution = true + showAppearanceSwitcher = false + showScrollToTop = true [homepage] layout = "page" # valid options: page, profile, custom @@ -37,6 +44,7 @@ showScrollToTop = true showTableOfContents = false showTaxonomies = false showWordCount = false + showComments = false # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"] [list] diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index bc880d35..07579abe 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -8,14 +8,21 @@ colorScheme = "congo" defaultAppearance = "light" # valid options: light or dark autoSwitchAppearance = true -showAppearanceSwitcher = true enableSearch = true enableCodeCopy = true mainSections = ["samples"] # robots = "" -showScrollToTop = true + +[header] + layout = "basic" # valid options: basic, hamburger, custom + +[footer] + showCopyright = true + showThemeAttribution = true + showAppearanceSwitcher = true + showScrollToTop = true [homepage] layout = "custom" # valid options: page, profile, custom @@ -37,6 +44,7 @@ showScrollToTop = true showTableOfContents = true showTaxonomies = false showWordCount = false + showComments = false # sharingLinks = ["facebook", "twitter", "pinterest", "reddit", "linkedin", "email"] [list] diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index 588402e3..4b3b0d48 100644 --- a/exampleSite/content/docs/configuration.md +++ b/exampleSite/content/docs/configuration.md @@ -116,13 +116,16 @@ Many of the article defaults here can be overridden on a per article basis by sp |`colorScheme`|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| |`defaultAppearance`|`"light"`|The default theme appearance, either `light` or `dark`.| |`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.| -|`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.| |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.| |`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.| |`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.| -|`showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.| +|`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.| +|`footer.showScrollToTop`|`true`|When set to `true` the scroll to top arrow is displayed.| |`homepage.layout`|`"page"`|The layout of the homepage. Valid values are `page`, `profile` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/home/custom.html` file. Refer to the [Homepage Layout]({{< ref "homepage-layout" >}}) section for more details.| |`homepage.showRecent`|`false`|Whether or not to display the recent articles list on the homepage.| |`article.showDate`|`true`|Whether or not article dates are displayed.| @@ -140,6 +143,7 @@ Many of the article defaults here can be overridden on a per article basis by sp |`article.showTableOfContents`|`false`|Whether or not the table of contents is displayed on articles.| |`article.showTaxonomies`|`false`|Whether or not the taxonomies related to this article are displayed.| |`article.showWordCount`|`false`|Whether or not article word counts are displayed.| +|`article.showComments`|`false`|Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.| |`article.sharingLinks`|_Not set_|Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.| |`list.showBreadcrumbs`|`false`|Whether or not breadcrumbs are displayed in the header on list pages.| |`list.showTableOfContents`|`false`|Whether or not the table of contents is displayed on list pages.| diff --git a/exampleSite/content/docs/front-matter.md b/exampleSite/content/docs/front-matter.md index 170f49f3..d50bc7d1 100644 --- a/exampleSite/content/docs/front-matter.md +++ b/exampleSite/content/docs/front-matter.md @@ -35,6 +35,7 @@ Front matter parameter default values are inherited from the theme's [base confi |`showTaxonomies`|`article.showTaxonomies`|Whether or not the taxonomies that relate to this article are displayed.| |`showTableOfContents`|`article.showTableOfContents`|Whether or not the table of contents is displayed on this article.| |`showWordCount`|`article.showWordCount`|Whether or not the article word count is displayed.| +|`showComments`|`article.showComments`|Whether or not the [comments partial]({{< ref "partials#comments" >}}) is included after the article footer.| |`showSummary`|`list.showSummary`|Whether or not the article summary should be displayed on list pages.| |`summary`|Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}}))|When `showSummary` is enabled, this is the Markdown string to be used as the summary for this article.| |`xml`|`true` unless excluded by `sitemap.excludedKinds`|Whether or not this article is included in the generated `/sitemap.xml` file.| 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 c999751a..b9a6a22d 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,3 +1,4 @@ +{{- partial "partials/functions/warnings.html" .Site -}} {{ 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 }} - {{ if and (.Site.Params.showScrollToTop | default true) (gt .WordCount 200) }} + {{ block "main" . }}{{ end }} + {{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }}
+
+
+ {{ partial "comments.html" . }} +
+
+ {{ else }} + {{ warnf "[CONGO] Comments are enabled for %s but no comments partial exists." .File.Path }} + {{ end }} + {{ end }} - {{ if templates.Exists "partials/comments.html" }} - {{ partial "comments.html" . }} - {{ end }} {{ end }} diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html index 8916b312..152812d3 100644 --- a/layouts/partials/article-link.html +++ b/layouts/partials/article-link.html @@ -1,19 +1,22 @@

{{ with .Params.externalUrl }} - {{ $.Title | emojify }} - - ↗ - +
+ {{ $.Title | emojify }} + + ↗ + ↖ + +
{{ else }} {{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} -
+
{{ partial "badge.html" (i18n "article.draft" | emojify) }}
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a9b45df9..2103e34a 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -18,20 +18,22 @@ {{ end }} -
+
{{/* Appearance switch */}} - {{ if .Site.Params.showAppearanceSwitcher | default false }} + {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
diff --git a/layouts/partials/functions/warnings.html b/layouts/partials/functions/warnings.html new file mode 100644 index 00000000..ecc6db9c --- /dev/null +++ b/layouts/partials/functions/warnings.html @@ -0,0 +1,6 @@ +{{ if ne .Site.Params.showAppearanceSwitcher nil }} + {{ warnf "[CONGO] Theme parameter `showAppearanceSwitcher` has been renamed to `footer.showAppearanceSwitcher`. Please update your site configuration." }} +{{ end }} +{{ if ne .Site.Params.showScrollToTop nil }} + {{ warnf "[CONGO] Theme parameter `showScrollToTop` has been renamed to `footer.showScrollToTop`. Please update your site configuration." }} +{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html deleted file mode 100644 index 06a0f63f..00000000 --- a/layouts/partials/header.html +++ /dev/null @@ -1,61 +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 .Site.Menus.main }} - - {{ 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/search.html b/layouts/partials/search.html index feed6f9e..841af518 100644 --- a/layouts/partials/search.html +++ b/layouts/partials/search.html @@ -1,7 +1,7 @@