diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 881b6dc..8ae9f4f 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -1,4 +1,98 @@ -/* Calmer homepage styling */ +/* ── Shared THectic navbar lockup ─────────────────────────────────────────── + Styles the markup in layouts/_partials/navbar-title.html. Kept as plain CSS, + not Tailwind utilities: Hextra ships a precompiled bundle and never reruns + Tailwind against the site's own templates, so a `hx:` class the theme does + not already use (gap-2.5, hover:opacity-80, ...) silently compiles to + nothing. This block is standardised across the THectic repos — keep it + together with navbar-title.html. */ + +.brand-lockup { + display: flex; + align-items: center; + gap: 0.625rem; + min-width: 0; +} + +.brand-mark, +.brand-title { + display: flex; + align-items: center; + transition: opacity 0.15s ease; +} + +.brand-mark { + flex-shrink: 0; +} + +.brand-mark:hover, +.brand-title:hover { + opacity: 0.75; +} + +.brand-title span { + font-weight: 800; + user-select: none; +} + +/* GitHub-style hover card on the monogram tile: appears on hover and on + keyboard focus, after a short delay. */ +.brand-home { + position: relative; + display: inline-flex; +} + +.brand-home-card { + position: absolute; + top: calc(100% + 0.5rem); + left: 0; + z-index: 30; + padding: 0.25rem 0.5rem; + border-radius: 0.375rem; + font-size: 0.75rem; + line-height: 1; + font-weight: 600; + white-space: nowrap; + color: #f6f8fa; + background: #1f2328; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); + opacity: 0; + transform: translateY(-0.25rem); + pointer-events: none; + transition: opacity 0.15s ease, transform 0.15s ease; +} + +.brand-home-card::before { + content: ""; + position: absolute; + bottom: 100%; + left: 0.75rem; + border: 0.3125rem solid transparent; + border-bottom-color: #1f2328; +} + +.brand-home:hover .brand-home-card, +.brand-home:focus-within .brand-home-card { + opacity: 1; + transform: translateY(0); + transition-delay: 0.35s; +} + +.dark .brand-home-card { + color: #1f2328; + background: #f6f8fa; +} + +.dark .brand-home-card::before { + border-bottom-color: #f6f8fa; +} + +@media (prefers-reduced-motion: reduce) { + .brand-home-card { + transition: none; + } +} + +/* ── Calmer homepage styling ────────────────────────────────────────────── */ /* Reduce hero title size */ .hx-hero-headline { @@ -104,15 +198,12 @@ } -/* Language/theme controls live in the navbar — hide sidebar and footer duplicates */ +/* The footer's duplicate language/theme switches are dropped in + _partials/footer.html; this only handles the sidebar's copy on mobile. + Language and theme both live in the navbar. */ .hextra-sidebar-container > [data-toggle-animation="show"] { display: none !important; } -.hextra-footer .hextra-language-switcher, -.hextra-footer .hextra-theme-toggle, -.hextra-footer hr { - display: none !important; -} /* Hero badge sizing */ .hx-hero-badge { diff --git a/src/hugo.toml b/src/hugo.toml index 46a00e6..76a11ef 100644 --- a/src/hugo.toml +++ b/src/hugo.toml @@ -2,18 +2,24 @@ baseURL = 'https://zephyrus-linux.thectic.nl/' title = 'Zephyrus Linux' defaultContentLanguage = 'en' enableRobotsTXT = true -disableKinds = ['taxonomy', 'term'] +disableKinds = ['taxonomy', 'term', 'RSS'] enableGitInfo = true +# Hugo otherwise injects a tab-indented into , +# which trips HTML linters and tells every visitor the exact Hugo version. +disableHugoGeneratorInject = true + [languages] [languages.en] label = 'English' weight = 1 title = 'Zephyrus Linux' + locale = 'en-US' [languages.nl] label = 'Nederlands' weight = 2 title = 'Zephyrus Linux' + locale = 'nl-NL' [menu] [[menu.main]] diff --git a/src/layouts/_partials/custom/footer.html b/src/layouts/_partials/custom/footer.html index f92ce93..5b860e0 100644 --- a/src/layouts/_partials/custom/footer.html +++ b/src/layouts/_partials/custom/footer.html @@ -1,4 +1,4 @@
- {{ if eq site.Language.Lang "nl" }}Door{{ else }}By{{ end }} - Sten Tijhuis + © {{ now.Year }} + THectic
diff --git a/src/layouts/_partials/footer.html b/src/layouts/_partials/footer.html new file mode 100644 index 0000000..f197303 --- /dev/null +++ b/src/layouts/_partials/footer.html @@ -0,0 +1,35 @@ +{{- /* Overrides the Hextra partial to drop the footer's language/theme + switches. Both already live in the navbar (GitHub, Language, Theme menu + items), and on pages without a sidebar Hextra otherwise repeats the + language switch down here. Everything else matches the theme version. */ -}} +{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}} + +{{- $copyright := (T "copyright") | default "© 2024 Hextra." -}} +{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}} + + + +{{- define "theme-credit" -}} + + + {{- . | markdownify -}} + {{- if strings.Contains . "Hextra" -}} + {{- partial "utils/icon.html" (dict "name" "hextra" "attributes" `height=1em class="hx:inline-block hx:ltr:ml-1 hx:rtl:mr-1 hx:align-[-2.5px]"`) -}} + {{- end -}} + + +{{- end -}} diff --git a/src/layouts/_partials/navbar-title.html b/src/layouts/_partials/navbar-title.html new file mode 100644 index 0000000..f3515a8 --- /dev/null +++ b/src/layouts/_partials/navbar-title.html @@ -0,0 +1,38 @@ +{{- /* Overrides the Hextra partial. The navbar's left edge is a logo lockup: + the THectic monogram tile links to the umbrella site (thectic.nl, which + fronts every project subdomain) and shows a GitHub-style hover card + naming that destination; the wordmark links to this site's own home. + + Standardised across the THectic project repos: keep this file byte-for- + byte identical everywhere, and onboard a new repo by copying it in + alongside the .brand-* block in assets/css/custom.css. + + The monogram is inlined twice, one variant per theme, so the tile stays + readable on both the light and the near-black navbar. Its plate colour + and glyph path match THectic.nl's own brand mark. + + Layout lives in custom.css rather than Tailwind utility classes: Hextra + ships a precompiled bundle and never reruns Tailwind against the site's + own templates, so a `hx:` class not already used by the theme itself + (gap-2.5, hover:opacity-80, ...) silently compiles to nothing. */ -}} +{{- $displayTitle := .Site.Params.navbar.displayTitle | default true -}} +
+ + + + + + + + + + + + + + {{- if $displayTitle }} + + {{- .Site.Title -}} + + {{- end }} +