Repository: imfing/hextra
Pull request #678: refactor: improve width handling and introduce CSS variables
Author: login: imfing
Created: 2025-05-17T18:28:36Z | Merged: 2025-05-22T23:57:12Z

- **refactor: update page width handling and CSS structure**
- **feat: introduce CSS variables for layout widths and update footer/navbar styles**



Diff:
diff --git a/assets/css/variables.css b/assets/css/variables.css
new file mode 100644
index 000000000..5cc96ac48
--- /dev/null
+++ b/assets/css/variables.css
@@ -0,0 +1,30 @@
+/* Hugo template to derive CSS variables from site and page parameters */
+
+/* Do not remove the following comment. It is used by Hugo to render CSS variables.
+{{- $pageWidth := .Params.width | default .Site.Params.page.width -}}
+{{- $maxPageWidth := cond (eq $pageWidth "wide") "90rem" (cond (eq $pageWidth "full") "100%" "80rem") -}}
+
+{{- $navbarWidth := .Site.Params.navbar.width -}}
+{{- $maxNavbarWidth := cond (eq $navbarWidth "wide") "90rem" (cond (eq $navbarWidth "full") "100%" "80rem") -}}
+
+{{- $footerWidth := .Site.Params.footer.width -}}
+{{- $maxFooterWidth := cond (eq $footerWidth "wide") "90rem" (cond (eq $footerWidth "full") "100%" "80rem") -}}
+*/
+
+:root {
+  --hextra-max-page-width: {{ $maxPageWidth }};
+  --hextra-max-navbar-width: {{ $maxNavbarWidth }};
+  --hextra-max-footer-width: {{ $maxFooterWidth }};
+}
+
+.hextra-max-page-width {
+  max-width: var(--hextra-max-page-width);
+}
+
+.hextra-max-navbar-width {
+  max-width: var(--hextra-max-navbar-width);
+}
+
+.hextra-max-footer-width {
+  max-width: var(--hextra-max-footer-width);
+}
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index 9c42586cb..f948971ed 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -122,7 +122,7 @@ params:
     width: wide
 
   page:
-    # full (100%), wide (90rem), normal (1280px)
+    # full (100%), wide (90rem), normal (80rem)
     width: normal
 
   theme:
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ee041d676..653f6f1fe 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
     <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)]">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6d5239472..fe9f338a6 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
     <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)]">
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index ea4b982bf..41add74a9 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
     <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)]">
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index ed4c6a4fb..07ae1913e 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
     <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)]">
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 16dfa6e70..5b2cad145 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
   {{- $readMore := (T "readMore") | default "Read more →" -}}
-  <div class="hx:mx-auto hx:flex {{ partial `utils/page-width` . }}">
+  <div class="hx:mx-auto hx:flex hextra-max-page-width">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     <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)]">
       <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index 009f755d0..605fd502f 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="hx:mx-auto hx:flex {{ partial `utils/page-width` . }}">
+  <div class="hx:mx-auto hx:flex hextra-max-page-width">
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
     <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)]">
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 9b9ca94b3..3c8012672 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
     <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)]">
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 9b9ca94b3..3c8012672 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
     <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)]">
diff --git a/layouts/hextra-home.html b/layouts/hextra-home.html
index c0a27cf63..8feb85f84 100644
--- a/layouts/hextra-home.html
+++ b/layouts/hextra-home.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
     <div class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pb-8 hx:pt-8 hx:md:pt-12 hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-left),1.5rem)]">
       <div class="hx:flex hx:flex-col hx:items-start">
diff --git a/layouts/index.html b/layouts/index.html
index c4a8239b9..6353140af 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
     {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
     {{ partial "toc.html" . }}
     <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)]">
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 6deeb18ed..4fd691100 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,19 +6,10 @@
 {{- $copyright := (T "copyright") | default "© 2024 Hextra." -}}
 {{- $poweredBy := (T "poweredBy") | default "Powered by Hextra" -}}
 
-{{- $footerWidth := "hx:max-w-screen-xl" -}}
-{{- with .Site.Params.footer.width -}}
-  {{ if eq . "wide" -}}
-    {{ $footerWidth = "hx:max-w-[90rem]" -}}
-  {{ else if eq . "full" -}}
-    {{ $footerWidth = "max-w-full" -}}
-  {{ end -}}
-{{- end -}}
-
 
 <footer class="hextra-footer hx:bg-gray-100 hx:pb-[env(safe-area-inset-bottom)] hx:dark:bg-neutral-900 hx:print:bg-transparent">
   {{- 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 hextra-max-footer-width">
       {{- partial "language-switch.html" (dict "context" .) -}}
       {{- with $displayThemeToggle }}{{ partial "theme-toggle.html" }}{{ end -}}
     </div>
@@ -26,21 +17,19 @@
       <hr class="hx:border-gray-200 hx:dark:border-neutral-800" />
     {{- end -}}
   {{- end -}}
+  <div class="hextra-custom-footer hextra-max-footer-width hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400">
+    {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
+  </div>
+  {{- if $copyrightSectionVisible -}}
     <div
-      class="hextra-custom-footer {{ $footerWidth }} hx:mx-auto hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-right),1.5rem)] hx:text-gray-600 hx:dark:text-gray-400"
+      class="hextra-max-footer-width 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 hx:dark:text-gray-400 hx:md:justify-start"
     >
-      {{- partial "custom/footer.html" (dict "context" . "switchesVisible" $footerSwitchesVisible "copyrightVisible" $copyrightSectionVisible) -}}
-    </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 hx:dark:text-gray-400 hx:md:justify-start"
-      >
-        <div class="hx:flex hx:w-full hx:flex-col hx:items-center hx:sm:items-start">
-            {{- 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 class="hx:flex hx:w-full hx:flex-col hx:items-center hx:sm:items-start">
+        {{- 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>
-    {{- end -}}
+    </div>
+  {{- end -}}
 </footer>
 
 {{- define "theme-credit" -}}
diff --git a/layouts/partials/head-css.html b/layouts/partials/head-css.html
deleted file mode 100644
index d4f999fd3..000000000
--- a/layouts/partials/head-css.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{{- if and (not hugo.IsProduction) (eq hugo.Environment "theme") }}
-  {{- $styles := resources.Get "css/styles.css" }}
-  {{- $styles = $styles | postCSS (dict "inlineImports" true) }}
-  <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
-{{- else }}
-  {{- $styles := resources.Get "css/compiled/main.css" -}}
-
-  {{- if hugo.IsProduction }}
-    {{- $styles = $styles | minify | fingerprint }}
-    <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" integrity="{{ $styles.Data.Integrity }}" />
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.Integrity }}" />
-  {{- else }}
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
-  {{- end }}
-{{- end }}
-
-
-<!-- Custom CSS -->
-{{- $custom := resources.Get "css/custom.css" }}
-{{- if hugo.IsProduction -}}
-  {{- $custom = $custom | minify | fingerprint }}
-  <link href="{{ $custom.RelPermalink }}" rel="stylesheet" integrity="{{ $custom.Data.Integrity }}" />
-{{- else }}
-  <link href="{{ $custom.RelPermalink }}" rel="stylesheet" />
-{{- end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index a1f49542b..662ab08c2 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -11,7 +11,7 @@
     {{- if .IsHome -}}
       {{ .Site.Title -}}
     {{ else -}}
-      {{ with .Title }}{{ . }} – {{ end -}}
+      {{ with .Title }}{{ . }} –{{ end -}}
       {{ .Site.Title -}}
     {{ end -}}
   </title>
@@ -27,13 +27,26 @@
   {{- template "_internal/schema.html" . -}}
   {{- template "_internal/twitter_cards.html" . -}}
 
-  {{- partialCached "head-css.html" . -}}
+  {{- $mainCss := resources.Get "css/compiled/main.css" -}}
+  {{- $customCss := resources.Get "css/custom.css" -}}
+  {{- $variablesCss := resources.Get "css/variables.css" | resources.ExecuteAsTemplate "css/variables.css" . -}}
+
+  {{- if hugo.IsProduction }}
+    {{- $styles := slice $variablesCss $mainCss $customCss | resources.Concat "css/compiled/main.css" | minify | fingerprint }}
+    <link rel="preload" href="{{ $styles.RelPermalink }}" as="style" integrity="{{ $styles.Data.Integrity }}" />
+    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.Integrity }}" />
+  {{- else }}
+    {{- $styles := resources.Get "css/styles.css" | postCSS (dict "inlineImports" true) }}
+    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+    <link href="{{ $variablesCss.RelPermalink }}" rel="stylesheet" />
+    <link href="{{ $customCss.RelPermalink }}" rel="stylesheet" />
+  {{- end }}
 
 
   <!-- Google Analytics -->
-  {{- if and (eq hugo.Environment "production") .Site.Config.Services.GoogleAnalytics.ID }}
+  {{- if and hugo.IsProduction .Site.Config.Services.GoogleAnalytics.ID }}
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
-    {{ partial "google-analytics.html" . }}
+    {{ partial "google-analytics.html" . -}}
   {{- end }}
 
   <script>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 419dfade3..a4001b0ff 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -16,7 +16,7 @@
 <div class="nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden">
   <div class="nav-container-blur hx:pointer-events-none hx:absolute hx:z-[-1] hx:h-full hx:w-full hx:bg-white hx:dark:bg-dark hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] hx:contrast-more:shadow-[0_0_0_1px_#000] hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] hx:contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
 
-  <nav class="hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6 {{ $navWidth }}">
+  <nav class="hextra-max-navbar-width hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6">
     <a class="hx:flex hx:items-center hx:hover:opacity-75 hx:ltr:mr-auto hx:rtl:ml-auto" href="{{ $logoLink }}">
       {{- if (.Site.Params.navbar.displayLogo | default true) }}
         <img class="hx:mr-2 hx:block hx:dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
diff --git a/layouts/partials/utils/page-width.html b/layouts/partials/utils/page-width.html
deleted file mode 100644
index 8ae1674cc..000000000
--- a/layouts/partials/utils/page-width.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{{/* 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 = "hx:max-w-[90rem]" -}}
-  {{ else if eq . "full" -}}
-    {{ $pageWidth = "max-w-full" -}}
-  {{ else -}}
-    {{ $pageWidth = "hx:max-w-screen-xl" -}}
-  {{ end -}}
-{{ else -}}
-  {{ $pageWidth = "hx:max-w-screen-xl" -}}
-{{ end -}}
-
-{{ return $pageWidth }}


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This pull request refactors the page width handling and CSS structure while introducing CSS variables to better manage layout widths across the site. Key changes include the removal of the legacy page-width partial, updates to navbar/footer templates to use new CSS classes, and the addition of new CSS configuration files to centralize layout width definitions.

### Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 1 comment.

<details>
<summary>Show a summary per file</summary>

| File                                  | Description                                                       |
| ------------------------------------- | ----------------------------------------------------------------- |
| layouts/partials/utils/page-width.html  | Removed legacy width utility in favor of CSS variables            |
| layouts/partials/navbar.html          | Replaced dynamic nav width variable with a static CSS class        |
| layouts/partials/head.html            | Replaced head-css partial with inline resource handling for CSS      |
| layouts/partials/head-config-css.html | Added inline CSS for page and navbar width variables               |
| layouts/partials/footer.html          | Updated footer to use a new CSS class for maximum width              |
| layouts/* (index, docs, blog, term, taxonomy, single, list) | Replaced usage of legacy width partial with the new CSS class         |
| exampleSite/hugo.yaml                | Updated comment on available page widths                          |
| assets/css/configs.css                | Added CSS file to derive CSS variables from site parameters         |
</details>





state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-17T21:52:38Z
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR refactors the site’s width management by replacing the Go template helper with CSS custom properties, streamlining CSS imports, and updating layout components to use new utility classes.

- Remove the `page-width` helper and introduce `variables.css` with CSS custom properties for widths.
- Consolidate CSS loading in `head.html`, bundling main, variables, and custom styles.
- Update navbar, footer, and page templates to use the new `hextra-max-*` utility classes.

### Reviewed Changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

<details>
<summary>Show a summary per file</summary>

| File                                          | Description                                                      |
| --------------------------------------------- | ---------------------------------------------------------------- |
| layouts/partials/utils/page-width.html        | Removed legacy page-width helper partial                        |
| layouts/partials/head.html                    | Consolidated CSS pipeline and added `variables.css` integration   |
| layouts/partials/navbar.html                  | Replaced dynamic `$navWidth` with `hextra-max-navbar-width`       |
| layouts/partials/footer.html                  | Replaced dynamic `$footerWidth` with `hextra-max-footer-width`    |
| layouts/index.html, hextra-home.html,<br/>layouts/docs/*.html,<br/>layouts/blog/*.html,<br/>layouts/_default/*.html | Swapped calls to the old helper with the `hextra-max-page-width` class |
| exampleSite/hugo.yaml                         | Updated default page width comment to `80rem`                    |
| assets/css/variables.css                      | Introduced CSS custom properties and utility classes             |
</details>





state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-22T23:53:05Z

Review comments:
diff_hunk: @@ -0,0 +1,20 @@
+{{- $pageWidth := .Site.Params.page.width | default .Params.width -}}
path: layouts/partials/head-config-css.html
user: login: Copilot
body: There is similar CSS variable definition logic in assets/css/configs.css. Consider consolidating these definitions to a single source to avoid potential discrepancies and reduce maintenance overhead.
created_at: 2025-05-17T21:52:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,30 @@
+/* Hugo template to derive CSS variables from site and page parameters */
+
+/* Do not remove the following comment. It is used by Hugo to render CSS variables.
+{{- $pageWidth := .Site.Params.page.width | default .Params.width -}}
path: assets/css/variables.css
user: login: Copilot
body: The precedence for page width is reversed: this uses the site-level setting over a page front-matter override. Swap the order to `.Params.width | default .Site.Params.page.width` so individual pages can override the global default.
```suggestion
{{- $pageWidth := .Params.width | default .Site.Params.page.width -}}
```
created_at: 2025-05-22T23:53:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,13 +27,26 @@
   {{- template "_internal/schema.html" . -}}
   {{- template "_internal/twitter_cards.html" . -}}
 
-  {{- partialCached "head-css.html" . -}}
+  {{- $mainCss := resources.Get "css/compiled/main.css" -}}
+  {{- $customCss := resources.Get "css/custom.css" -}}
+  {{- $variablesCss := resources.Get "css/variables.css" | resources.ExecuteAsTemplate "css/variables.css" . -}}
+
+  {{- if hugo.IsProduction }}
+    {{- $styles := slice $mainCss $variablesCss $customCss | resources.Concat "css/compiled/main.css" | minify | fingerprint }}
path: layouts/partials/head.html
user: login: Copilot
body: [nitpick] Consider concatenating `variables.css` before `main.css` so that custom properties are defined prior to their usage in your main stylesheet, improving clarity and reducing potential cascading issues.
```suggestion
    {{- $styles := slice $variablesCss $mainCss $customCss | resources.Concat "css/compiled/main.css" | minify | fingerprint }}
```
created_at: 2025-05-22T23:53:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class='hx:mx-auto hx:flex {{ partial "utils/page-width" . }}'>
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
path: layouts/index.html
user: login: Copilot
body: [nitpick] Custom utility classes like `hextra-max-page-width` don’t follow the `hx:` prefix convention used elsewhere. Consider standardizing on a single prefix (e.g., `hx:hextra-max-page-width`) or documenting the exception.
```suggestion
  <div class='hx:mx-auto hx:flex hx:hextra-max-page-width'>
```
created_at: 2025-05-22T23:53:05Z
author_association: CONTRIBUTOR

PR comments:
user: login: netlify[bot]
created_at: 2025-05-17T18:28:48Z
body: ### <span aria-hidden="true">👷</span> Deploy Preview for *hugo-hextra* processing.


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 13d7680886fa5b603eae1dc7a04edb614da79a37 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/projects/hugo-hextra/deploys/6828d556fcc51a000827d7bb |
author_association: NONE
user: login: netlify[bot]
created_at: 2025-05-17T18:29:11Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *hugo-hextra* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | cdf00a7c283158db545c1f9e8e24a97c14e4d280 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/projects/hugo-hextra/deploys/682fb955e5e1b80008d8487f |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-678--hugo-hextra.netlify.app](https://deploy-preview-678--hugo-hextra.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTY3OC0taHVnby1oZXh0cmEubmV0bGlmeS5hcHAifQ.NFS4elPvTkwcihYY3J6A6tmIKO4iRdPY_lqBKVujrpE)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [hugo-hextra Preview](https://deploy-preview-678--hugo-hextra.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify project configuration](https://app.netlify.com/projects/hugo-hextra/configuration/notifications#deploy-notifications)._
author_association: NONE