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.

layouts/partials/head-config-css.html

@@ -1,15 +1,20 @@
 {{- $pageWidth := .Site.Params.page.width | default .Params.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") -}}
+
 <style>
 :root {
   --hextra-max-page-width: {{ $maxPageWidth }};
+  --hextra-max-navbar-width: {{ $maxNavbarWidth }};
 }
 
 .hextra-max-page-width {
-  width: 100%;
   max-width: var(--hextra-max-page-width);
-  margin-left: auto;
-  margin-right: auto;
+}
+
+.hextra-max-navbar-width {
+  max-width: var(--hextra-max-navbar-width);
 }
 </style>