Skip to content

Commit befce4c

Browse files
imfingCopilot
imfing
and
Copilot
authored
refactor: improve width handling and introduce CSS variables (#678)
* refactor: update page width handling and CSS structure - Changed the default page width from 1280px to 80rem in hugo.yaml. - Replaced dynamic page width partials with a new CSS class 'hextra-max-page-width' across multiple layout files for consistency. - Introduced a new head-config-css.html partial for managing CSS styles related to page width. - Removed the outdated page-width utility partial to streamline the codebase. * feat: introduce CSS variables for layout widths and update footer/navbar styles - Added a new configs.css file to define CSS variables for page, navbar, and footer widths. - Updated footer and navbar partials to utilize the new CSS classes for consistent width management. - Refactored head-config-css.html to include the new navbar width variable. - Enhanced the overall styling structure for better maintainability and responsiveness. * Refactor: Rename configs.css to variables.css and update references Remove head-config-css.html and update references to use variables.css instead of configs.css * Update assets/css/variables.css Co-authored-by: Copilot <[email protected]> * Update layouts/partials/head.html Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent 128235e commit befce4c

File tree

17 files changed

+70
-90
lines changed

17 files changed

+70
-90
lines changed

‎assets/css/variables.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* Hugo template to derive CSS variables from site and page parameters */
2+
3+
/* Do not remove the following comment. It is used by Hugo to render CSS variables.
4+
{{- $pageWidth := .Params.width | default .Site.Params.page.width -}}
5+
{{- $maxPageWidth := cond (eq $pageWidth "wide") "90rem" (cond (eq $pageWidth "full") "100%" "80rem") -}}
6+
7+
{{- $navbarWidth := .Site.Params.navbar.width -}}
8+
{{- $maxNavbarWidth := cond (eq $navbarWidth "wide") "90rem" (cond (eq $navbarWidth "full") "100%" "80rem") -}}
9+
10+
{{- $footerWidth := .Site.Params.footer.width -}}
11+
{{- $maxFooterWidth := cond (eq $footerWidth "wide") "90rem" (cond (eq $footerWidth "full") "100%" "80rem") -}}
12+
*/
13+
14+
:root {
15+
--hextra-max-page-width: {{ $maxPageWidth }};
16+
--hextra-max-navbar-width: {{ $maxNavbarWidth }};
17+
--hextra-max-footer-width: {{ $maxFooterWidth }};
18+
}
19+
20+
.hextra-max-page-width {
21+
max-width: var(--hextra-max-page-width);
22+
}
23+
24+
.hextra-max-navbar-width {
25+
max-width: var(--hextra-max-navbar-width);
26+
}
27+
28+
.hextra-max-footer-width {
29+
max-width: var(--hextra-max-footer-width);
30+
}

‎exampleSite/hugo.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ params:
122122
width: wide
123123

124124
page:
125-
# full (100%), wide (90rem), normal (1280px)
125+
# full (100%), wide (90rem), normal (80rem)
126126
width: normal
127127

128128
theme:

‎layouts/_default/list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
2+
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
33
{{ partial "sidebar.html" (dict "context" .) }}
44
{{ partial "toc.html" . }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">

‎layouts/_default/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
2+
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
33
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
44
{{ partial "toc.html" . }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">

‎layouts/_default/taxonomy.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
2+
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
33
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
44
{{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">

‎layouts/_default/term.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
2+
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
33
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
44
{{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">

‎layouts/blog/list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{ define "main" }}
22
{{- $readMore := (T "readMore") | default "Read more →" -}}
3-
<div class="hx:mx-auto hx:flex {{ partial `utils/page-width` . }}">
3+
<div class="hx:mx-auto hx:flex hextra-max-page-width">
44
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
66
<main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">

‎layouts/blog/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<div class="hx:mx-auto hx:flex {{ partial `utils/page-width` . }}">
2+
<div class="hx:mx-auto hx:flex hextra-max-page-width">
33
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
44
{{ partial "toc.html" . }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">

‎layouts/docs/list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
2+
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
33
{{ partial "sidebar.html" (dict "context" .) }}
44
{{ partial "toc.html" . }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">

‎layouts/docs/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ define "main" }}
2-
<div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
2+
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
33
{{ partial "sidebar.html" (dict "context" .) }}
44
{{ partial "toc.html" . }}
55
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">

0 commit comments

Comments
 (0)