From 953042a0c03f98a0587f8d3bb1d744aa9f435324 Mon Sep 17 00:00:00 2001
From: Xin <5097752+imfing@users.noreply.github.com>
Date: Wed, 13 Aug 2025 16:01:09 +0800
Subject: [PATCH] docs(customization): add docs for layout css vars

---
 .../content/docs/advanced/customization.md      | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md
index e9fe654..95271c8 100644
--- a/exampleSite/content/docs/advanced/customization.md
+++ b/exampleSite/content/docs/advanced/customization.md
@@ -44,6 +44,23 @@ The primary color of the theme can be customized by setting the `--primary-hue`,
 }
 ```
 
+### Component Layout Variables
+
+Hextra provides CSS variables to customize the width of pages, navbar, and footer:
+
+```css {filename="assets/css/custom.css"}
+:root {
+  /* Page width - also configurable via hugo.yaml params.page.width */
+  --hextra-max-page-width: 80rem;    /* default: 80rem (normal), 90rem (wide), 100% (full) */
+  
+  /* Navbar width - also configurable via hugo.yaml params.navbar.width */
+  --hextra-max-navbar-width: 90rem;  /* independent navbar width */
+  
+  /* Footer width - also configurable via hugo.yaml params.footer.width */
+  --hextra-max-footer-width: 80rem;  /* independent footer width */
+}
+```
+
 ### 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: