Compare commits

...

19 Commits

Author SHA1 Message Date
c36a1efea4 make padding consistent for copyright section and custom footer 2024-12-20 10:24:46 +00:00
243f4f5173 Merge remote-tracking branch 'upstream/main' into custom-footer 2024-12-20 10:03:57 +00:00
655148f329 docs: add advanced theme customization instruction (#519)
Some checks failed
Deploy Hugo site to Pages / build (push) Has been cancelled
Deploy Hugo site to Pages / deploy (push) Has been cancelled
* Add docs on how to customize theme

* fix heading level

* extend description

* Add missing classes

* Update exampleSite/content/docs/advanced/customization.md

---------

Co-authored-by: Xin <fuxin1997@gmail.com>
2024-12-18 22:48:42 +00:00
Xin
b6d14afca3 docs(showcase): update link for lutheran-confessions
fixes #520
2024-12-18 22:35:52 +00:00
e3d29ca81a Added necessary variables for correct styling of the custom footer in some cases 2024-12-18 14:40:29 +00:00
1a5a34b00c Add missing compiled css 2024-12-18 11:09:50 +00:00
13e11d59d2 Only show footer section for copyright and PoweredBy if they are enabled 2024-12-18 10:37:49 +00:00
aa557df8aa update hugo_stats 2024-12-18 10:32:17 +00:00
869731e9de Remove context variable and flag in hugo.yaml 2024-12-18 10:30:34 +00:00
797b485c9b add missing class 2024-12-17 18:07:18 +00:00
71b2b1176f Add missing class 2024-12-17 17:58:53 +00:00
756769d6d3 amend how the custom footer section is displayed 2024-12-17 17:43:33 +00:00
0c2c148f5e Merge branch 'main' into custom-footer 2024-12-17 10:21:27 +00:00
bc778ee243 fix: only display footer switches section if it actually has content (#517)
Some checks failed
Deploy Hugo site to Pages / build (push) Has been cancelled
Deploy Hugo site to Pages / deploy (push) Has been cancelled
2024-12-16 22:21:15 +00:00
aea9235285 Add support for custom footer 2024-12-16 17:58:47 +00:00
Xin
f377609eba docs: update HUGO_VERSION to 0.138.0 in deployment documentation
Some checks are pending
Deploy Hugo site to Pages / build (push) Waiting to run
Deploy Hugo site to Pages / deploy (push) Blocked by required conditions
2024-12-15 20:32:54 +00:00
Xin
a9b992436e chore: update HUGO_VERSION to 0.138.0 in GitHub Actions workflow
* add FUNDING.yml
2024-12-15 20:26:11 +00:00
7f5a7f2f5a chore(deps-dev): bump cross-spawn from 7.0.3 to 7.0.6 (#515) 2024-12-15 16:33:44 +00:00
30fddec3fa chore(deps): bump nanoid from 3.3.7 to 3.3.8 (#514)
Some checks are pending
Deploy Hugo site to Pages / build (push) Waiting to run
Deploy Hugo site to Pages / deploy (push) Blocked by required conditions
2024-12-15 14:20:52 +00:00
10 changed files with 192 additions and 20 deletions

15
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1,15 @@
# These are supported funding model platforms
github: imfing
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
thanks_dev: # Replace with a single thanks.dev username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

View File

@ -31,7 +31,7 @@ jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:
HUGO_VERSION: 0.136.5 HUGO_VERSION: 0.138.0
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4

View File

@ -875,6 +875,9 @@ video {
.hx-gap-4 { .hx-gap-4 {
gap: 1rem; gap: 1rem;
} }
.hx-gap-6 {
gap: 1.5rem;
}
.hx-gap-x-1\.5 { .hx-gap-x-1\.5 {
-moz-column-gap: 0.375rem; -moz-column-gap: 0.375rem;
column-gap: 0.375rem; column-gap: 0.375rem;
@ -1152,6 +1155,9 @@ video {
.hx-pb-px { .hx-pb-px {
padding-bottom: 1px; padding-bottom: 1px;
} }
.hx-pl-\[max\(env\(safe-area-inset-left\)\,0rem\)\] {
padding-left: max(env(safe-area-inset-left),0rem);
}
.hx-pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] { .hx-pl-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
padding-left: max(env(safe-area-inset-left),1.5rem); padding-left: max(env(safe-area-inset-left),1.5rem);
} }
@ -1167,6 +1173,9 @@ video {
.hx-pr-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] { .hx-pr-\[max\(env\(safe-area-inset-left\)\,1\.5rem\)\] {
padding-right: max(env(safe-area-inset-left),1.5rem); padding-right: max(env(safe-area-inset-left),1.5rem);
} }
.hx-pr-\[max\(env\(safe-area-inset-right\)\,0rem\)\] {
padding-right: max(env(safe-area-inset-right),0rem);
}
.hx-pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\] { .hx-pr-\[max\(env\(safe-area-inset-right\)\,1\.5rem\)\] {
padding-right: max(env(safe-area-inset-right),1.5rem); padding-right: max(env(safe-area-inset-right),1.5rem);
} }

View File

@ -44,6 +44,129 @@ The primary color of the theme can be customized by setting the `--primary-hue`,
} }
``` ```
### Further Theme Customization
The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element:
```css {filename="assets/css/custom.css"}
.hextra-footer {
/* Styles will be applied to the footer element */
}
.hextra-footer:is(html[class~="dark"] *) {
/* Styles will be applied to the footer element in dark mode */
}
```
The following classes can be used to customize various parts of the theme.
#### General
- `hextra-scrollbar` - The scrollbar element
- `content` - Page content container
#### Shortcodes
##### Badge
- `hextra-badge` - The badge element
##### Card
- `hextra-card` - The card element
- `hextra-card-image` - The card image element
- `hextra-card-icon` - The card icon element
- `hextra-card-subtitle` - The card subtitle element
##### Cards
- `hextra-cards` - The cards grid container
##### Jupyter Notebook
- `hextra-jupyter-code-cell` - The Jupyter code cell container
- `hextra-jupyter-code-cell-outputs-container` - The Jupyter code cell outputs container
- `hextra-jupyter-code-cell-outputs` - The Jupyter code cell output div element
##### PDF
- `hextra-pdf` - The PDF container element
##### Steps
- `steps` - The steps container
##### Tabs
- `hextra-tabs-panel` - The tabs panel container
- `hextra-tabs-toggle` - The tabs toggle button
##### Filetree
- `hextra-filetree` - The filetree container
##### Folder
- `hextra-filetree-folder` - The filetree folder container
#### Navbar
- `nav-container` - The navbar container
- `nav-container-blur` - The navbar container in blur element
- `hamburger-menu` - The hamburger menu button
#### Footer
- `hextra-footer` - The footer element
- `custom-footer` - The custom footer section container
#### Search
- `search-wrapper` - The search wrapper container
- `search-input` - The search input element
- `search-results` - The search results list container
#### Table of Contents
- `hextra-toc` - The table of contents container
#### Sidebar
- `mobile-menu-overlay` - The overlay element for the mobile menu
- `sidebar-container` - The sidebar container
- `sidebar-active-item` - The active item in the sidebar
#### Language Switcher
- `language-switcher` - The language switcher button
- `language-options` - The language options container
#### Theme Toggle
- `theme-toggle` - The theme toggle button
#### Cody Copy Button
- `hextra-code-copy-btn-container` - The code copy button container
- `hextra-code-copy-btn` - The code copy button
#### Code Block
- `hextra-code-block` - The code block container
#### Feature Card
- `hextra-feature-card` - The feature card link element
#### Feature Grid
- `hextra-feature-grid` - The feature grid container
#### Breadcrumbs
No specific class is available for breadcrumbs.
### Syntax Highlighting ### Syntax Highlighting
List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command: List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
@ -62,6 +185,21 @@ You may add custom scripts to the end of the head for every page by adding the f
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
``` ```
## Custom Footer Section
You can add a custom section the footer between the language/theme buttons and the Copyright/Powered By section by creating a file `layouts/partials/custom/footer.html` in your site.
```html {filename="layouts/partials/custom/footer.html"}
<!-- Your footer element here -->
```
Available variables in the footer section are:
- `.aboveVisible`: `true` if the Language or Theme button(s) are visible above the footer along with a horizontal separator.
- `.belowVisible`: `true` if the Copyright or PoweredBy text are visible below the footer.
_Note: The custom footer inherits the default footer background color text color and the `width` setting in `hugo.yaml#footer` section._
## Custom Layouts ## Custom Layouts
The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site. The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.

View File

@ -54,7 +54,7 @@ jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:
HUGO_VERSION: 0.131.0 HUGO_VERSION: 0.138.0
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4
@ -146,7 +146,7 @@ For more details, check out:
3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually: 3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
- Configure the Build command to `hugo --gc --minify` - Configure the Build command to `hugo --gc --minify`
- Specify the Publish directory to `public` - Specify the Publish directory to `public`
- Add Environment variable `HUGO_VERSION` and set to `0.132.2` - Add Environment variable `HUGO_VERSION` and set to `0.138.0`, or alternatively, set it in `netlify.toml` file
4. Deploy! 4. Deploy!
Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details. Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.

View File

@ -95,7 +95,7 @@ Open source projects powered by Hextra
>}} >}}
{{< card {{< card
link="https://lutheranconfessions.org/" link="https://github.com/remysheppard/lutheran-confessions"
title="LutheranConfessions" title="LutheranConfessions"
image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359" image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
imageStyle="object-fit:cover; aspect-ratio:16/9;" imageStyle="object-fit:cover; aspect-ratio:16/9;"

View File

@ -327,6 +327,7 @@
"hx-gap-1", "hx-gap-1",
"hx-gap-2", "hx-gap-2",
"hx-gap-4", "hx-gap-4",
"hx-gap-6",
"hx-gap-x-1.5", "hx-gap-x-1.5",
"hx-gap-y-2", "hx-gap-y-2",
"hx-grid", "hx-grid",
@ -430,12 +431,14 @@
"hx-pb-8", "hx-pb-8",
"hx-pb-[env(safe-area-inset-bottom)]", "hx-pb-[env(safe-area-inset-bottom)]",
"hx-pb-px", "hx-pb-px",
"hx-pl-[max(env(safe-area-inset-left),0rem)]",
"hx-pl-[max(env(safe-area-inset-left),1.5rem)]", "hx-pl-[max(env(safe-area-inset-left),1.5rem)]",
"hx-pointer-events-none", "hx-pointer-events-none",
"hx-pr-2", "hx-pr-2",
"hx-pr-4", "hx-pr-4",
"hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]", "hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]",
"hx-pr-[max(env(safe-area-inset-left),1.5rem)]", "hx-pr-[max(env(safe-area-inset-left),1.5rem)]",
"hx-pr-[max(env(safe-area-inset-right),0rem)]",
"hx-pr-[max(env(safe-area-inset-right),1.5rem)]", "hx-pr-[max(env(safe-area-inset-right),1.5rem)]",
"hx-pt-4", "hx-pt-4",
"hx-pt-6", "hx-pt-6",

View File

View File

@ -1,5 +1,7 @@
{{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}} {{- $enableFooterSwitches := .Scratch.Get "enableFooterSwitches" | default false -}}
{{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}} {{- $displayThemeToggle := site.Params.theme.displayToggle | default true -}}
{{- $footerSwitchesVisible := and $enableFooterSwitches (or hugo.IsMultilingual $displayThemeToggle) -}}
{{- $copyrightSectionVisible := or (.Site.Params.footer.displayPoweredBy | default true) .Site.Params.footer.displayCopyright -}}
{{- $copyright := (T "copyright") | default "© 2024 Hextra." -}} {{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
{{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}} {{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
@ -15,7 +17,7 @@
<footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent"> <footer class="hextra-footer hx-bg-gray-100 hx-pb-[env(safe-area-inset-bottom)] dark:hx-bg-neutral-900 print:hx-bg-transparent">
{{- if $enableFooterSwitches -}} {{- if $footerSwitchesVisible -}}
<div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}"> <div class="hx-mx-auto hx-flex hx-gap-2 hx-py-2 hx-px-4 {{ $footerWidth }}">
{{- partial "language-switch.html" (dict "context" .) -}} {{- partial "language-switch.html" (dict "context" .) -}}
{{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}} {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
@ -24,14 +26,21 @@
<hr class="dark:hx-border-neutral-800" /> <hr class="dark:hx-border-neutral-800" />
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
<div <div
class="{{ $footerWidth }} hx-mx-auto hx-flex hx-justify-center hx-py-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400 md:hx-justify-start" class="custom-footer {{ $footerWidth }} hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400"
> >
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start"> {{ partial "custom/footer.html" (dict "context" . "aboveVisible" $footerSwitchesVisible "belowVisible" $copyrightSectionVisible ) }}
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
{{- if .Site.Params.footer.displayCopyright }}<div class="hx-mt-6 hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
</div> </div>
</div> {{- if $copyrightSectionVisible -}}
<div
class="{{ $footerWidth }} hx-mx-auto hx-flex hx-justify-center hx-py-12 hx-pl-[max(env(safe-area-inset-left),1.5rem)] hx-pr-[max(env(safe-area-inset-right),1.5rem)] hx-text-gray-600 dark:hx-text-gray-400 md:hx-justify-start"
>
<div class="hx-flex hx-w-full hx-flex-col hx-items-center sm:hx-items-start hx-gap-6">
{{- if (.Site.Params.footer.displayPoweredBy | default true) }}<div class="hx-font-semibold">{{ template "theme-credit" $poweredBy }}</div>{{ end }}
{{- if .Site.Params.footer.displayCopyright }}<div class="hx-text-xs">{{ $copyright | markdownify }}</div>{{ end }}
</div>
</div>
{{- end -}}
</footer> </footer>
{{- define "theme-credit" -}} {{- define "theme-credit" -}}

14
package-lock.json generated
View File

@ -523,11 +523,10 @@
} }
}, },
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
"version": "7.0.3", "version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"path-key": "^3.1.0", "path-key": "^3.1.0",
"shebang-command": "^2.0.0", "shebang-command": "^2.0.0",
@ -1031,9 +1030,9 @@
} }
}, },
"node_modules/nanoid": { "node_modules/nanoid": {
"version": "3.3.7", "version": "3.3.8",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -1041,7 +1040,6 @@
"url": "https://github.com/sponsors/ai" "url": "https://github.com/sponsors/ai"
} }
], ],
"license": "MIT",
"bin": { "bin": {
"nanoid": "bin/nanoid.cjs" "nanoid": "bin/nanoid.cjs"
}, },