feat: add content-width meta option

Author: aksiome

src/sphinx_breeze_theme/assets/styles/sections/content.css

@@ -4,7 +4,7 @@
 
 .bz-content {
   min-height: calc(100vh - var(--bz-header-height) - var(--bz-header-tabs-height) - var(--bz-footer-height));
-  padding-inline: calc(var(--bz-page-width) + clamp(1.5rem, 1.375rem + 0.625vw, 2rem));
+  padding-inline: calc(var(--bz-page-padding) + clamp(1.5rem, 1.375rem + 0.625vw, 2rem));
 
   @media (width > 52rem) {
     display: flex;

src/sphinx_breeze_theme/assets/styles/sections/footer.css

@@ -6,7 +6,7 @@
   column-gap: 1.5rem;
   min-height: var(--bz-footer-height);
   padding-block: .5rem;
-  padding-inline: calc(var(--bz-page-width) + clamp(1.25rem, 1rem + 1.25vw, 2rem));
+  padding-inline: calc(var(--bz-page-padding) + clamp(1.25rem, 1rem + 1.25vw, 2rem));
   color: var(--bz-footer-color);
   font-size: var(--bz-footer-font-size);
   font-family: var(--bz-footer-font-family);

src/sphinx_breeze_theme/assets/styles/sections/header-main.css

@@ -10,7 +10,7 @@
   font-size: var(--bz-header-font-size);
   font-family: var(--bz-header-font-family);
   background-color: var(--bz-header-background-color);
-  padding-inline: calc(var(--bz-page-width) + clamp(1rem, 0.826rem + 0.87vw, 1.5rem));
+  padding-inline: calc(var(--bz-page-padding) + clamp(1rem, 0.826rem + 0.87vw, 1.5rem));
 
   &:not(:has(+ .bz-header-tabs)) {
     border-bottom: 1px solid var(--bz-header-border-color);

src/sphinx_breeze_theme/assets/styles/sections/header-tabs.css

@@ -11,7 +11,7 @@
   font-family: var(--bz-header-font-family);
   background-color: var(--bz-header-background-color);
   border-bottom: 1px solid var(--bz-header-border-color);
-  padding-inline: calc(var(--bz-page-width) + clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem));
+  padding-inline: calc(var(--bz-page-padding) + clamp(0.75rem, 0.45rem + 1.5vw, 1.5rem));
   box-shadow:
     0 1px 1px var(--bz-color-shadow),
     0 2px 2px var(--bz-color-shadow),

src/sphinx_breeze_theme/assets/styles/variables/content.css

@@ -46,7 +46,8 @@
   --bz-page-background-color: var(--bz-color-surface-3);
   --bz-page-font-size: var(--bz-size-md);
   --bz-page-font-family: var(--bz-font-sans);
-  --bz-page-width: calc((100vw - clamp(17.5rem, 100vw, 94rem)) / 2);
+  --bz-page-padding: calc((100vw - clamp(17.5rem, 100vw, var(--bz-page-width))) / 2);
+  --bz-page-width: 94rem;
 
   --bz-sidebar-primary-border-color: color-mix(in oklab, var(--bz-color-outline) 75%, transparent);
   --bz-sidebar-primary-drawer-background-color: var(--bz-color-surface-3);

src/sphinx_breeze_theme/theme/breeze/layout.html

@@ -7,6 +7,11 @@
       .bz-js-only { display: none !important; }
     </style>
   </noscript>
+  {% if meta and "content-width" in meta %}
+    <style>
+      #bz-main-content { max-width: {{ meta["content-width"] }}; }
+    </style>
+  {%- endif -%}
 {%- endblock css -%}
 
 {%- block scripts -%}