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:
Xin
2023-09-20 23:36:00 +01:00
committed by GitHub
parent c799160e86
commit b51bfa3177
15 changed files with 87 additions and 13 deletions

View File

@ -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 }}" />