refactor: improve width handling and introduce CSS variables #678
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Owner
imfing
commented
May 17, 2025
imfing
commented
- refactor: update page width handling and CSS structure
- feat: introduce CSS variables for layout widths and update footer/navbar styles
- 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.
…bar 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.
👷 Deploy Preview for hugo-hextra processing.
|
✅ Deploy Preview for hugo-hextra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
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.
Show a summary per file
| 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 |
imfing
changed the title
Remove head-config-css.html and update references to use variables.css instead of configs.css
Contributor
There was a problem hiding this comment.
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-widthhelper and introducevariables.csswith 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.
Show a summary per file
| 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, layouts/docs/.html, layouts/blog/.html, 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 |
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.