drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 00:21:25 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support wide and full page modes (#69)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/_default/list.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-screen-xl">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">

2
layouts/_default/single.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-screen-xl">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">

2
layouts/blog/list.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-screen-xl">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">

2
layouts/blog/single.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-screen-xl">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">

2
layouts/docs/list.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-screen-xl">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">

2
layouts/docs/single.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-screen-xl">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">

2
layouts/hextra-home.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-screen-xl">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
<div class="w-full break-words flex flex-col min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-start pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 md:pt-12">

2
layouts/index.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<div class="mx-auto flex max-w-[90rem]">
<div class='mx-auto flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" . }}
<article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">

12
layouts/partials/footer.html
View File

@ -2,17 +2,25 @@
{{- $copyright := (T "copyright") | default "© 2023 Hextra." -}}
{{- $footerWidth := "max-w-screen-xl" -}}
{{- with .Site.Params.footer.width -}}
{{ if eq . "wide" -}}
{{ $footerWidth = "max-w-[90rem]" -}}
{{ else if eq . "full" -}}
{{ $footerWidth = "max-w-full" -}}
{{ end -}}
{{- end -}}
<footer class="hextra-footer bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
{{- if $enableFooterSwitches }}
<div class="mx-auto flex max-w-screen-xl gap-2 py-2 px-4">
<div class='mx-auto flex gap-2 py-2 px-4 {{ $footerWidth }}'>
{{- partial "language-switch.html" (dict "context" .) -}}
{{- partial "theme-toggle.html" -}}
</div>
{{ end -}}
<hr class="dark:border-neutral-800" />
<div
class="mx-auto flex max-w-screen-xl justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start"
class='{{ $footerWidth }} mx-auto flex justify-center py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-gray-600 dark:text-gray-400 md:justify-start'
>
<div class="flex w-full flex-col items-center sm:items-start">
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="font-semibold">{{ template "theme-credit" . }}</div>{{ end }}

10
layouts/partials/navbar.html
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 }}" />

27
layouts/partials/utils/page-width.html Normal file
View File

@ -0,0 +1,27 @@
{{/* Get page width from site configuration */}}
{{/* Default page width */}}
{{- $pageWidth := "" -}}
{{/* Get page width setting from page front matter or site params */}}
{{ with .Params.width -}}
{{ $pageWidth = . -}}
{{ else -}}
{{ with .Site.Params.page.width -}}
{{ $pageWidth = . -}}
{{ end -}}
{{ end -}}
{{- with $pageWidth -}}
{{ if eq . "wide" -}}
{{ $pageWidth = "max-w-[90rem]" -}}
{{ else if eq . "full" -}}
{{ $pageWidth = "max-w-full" -}}
{{ else -}}
{{ $pageWidth = "max-w-screen-xl" -}}
{{ end -}}
{{ else -}}
{{ $pageWidth = "max-w-screen-xl" -}}
{{ end -}}
{{ return $pageWidth }}