forked from drowl87/hextra_mirror
feat: support wide and full page modes (#69)
* feat: add page width config and partial * feat: use page-width partial in layouts * chore: revert changes in navbar and footer * feat: customize footer width from site config * chore: update styles * docs: add page width * feat: allow overriding navbar width * fix: navbar width variable * docs: add instruction for navbar and footer
This commit is contained in:
@ -4,11 +4,19 @@
|
||||
{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
|
||||
{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
|
||||
|
||||
{{- $navWidth := "max-w-[90rem]" -}}
|
||||
{{- with .Site.Params.navbar.width -}}
|
||||
{{ if eq . "normal" -}}
|
||||
{{ $navWidth = "max-w-screen-xl" -}}
|
||||
{{ else if eq . "full" -}}
|
||||
{{ $navWidth = "max-w-full" -}}
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
|
||||
<div class="nav-container-blur pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
|
||||
|
||||
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 max-w-[90rem]">
|
||||
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 {{ $navWidth }}">
|
||||
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">
|
||||
{{- if (.Site.Params.navbar.displayLogo | default true) }}
|
||||
<img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
|
Reference in New Issue
Block a user