v.3.4.0

SimonPadbury · Nov 28, 2024 · 731601e · 731601e
1 parent 2a209f2
commit 731601e
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 36 deletions.
diff --git a/_src/templates/base.njk b/_src/templates/base.njk
@@ -43,7 +43,7 @@
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             {{ content | toc | safe }}
           </nav>

diff --git a/_src/templates/includes/docs.css b/_src/templates/includes/docs.css
@@ -75,14 +75,14 @@ pre code {
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }

diff --git a/docs/buttons/index.html b/docs/buttons/index.html
@@ -87,14 +87,14 @@
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }
@@ -327,7 +327,7 @@ <h1 class="my-4 t-balance t-heavy">Buttons</h1>
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             <nav class="toc" >
         <ul><li><a href="#button-types-and-link-%E2%80%9Cpseudo-buttons%E2%80%9D">Button types and link “pseudo-buttons”</a></li><li><a href="#full-width-buttons">Full-width buttons</a></li><li><a href="#adding-colors">Adding colors</a></li><li><a href="#buttons-with-icons">Buttons with icons</a></li><li><a href="#pill-buttons">Pill buttons</a></li><li><a href="#button-sizes">Button sizes</a></li></ul>

diff --git a/docs/colors/index.html b/docs/colors/index.html
@@ -87,14 +87,14 @@
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }
@@ -327,7 +327,7 @@ <h1 class="my-4 t-balance t-heavy">Colors</h1>
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             <nav class="toc" >
         <ul><li><a href="#rationale-for-baselayer%E2%80%99s-color-system">Rationale for Baselayer’s color system</a></li><li><a href="#color-and-shade-utility-classes">Color and shade utility classes</a></li><li><a href="#colors-and-accessibility">Colors and accessibility</a></li><li><a href="#adding-more-colors">Adding more colors</a></li><li><a href="#dark-theme">Dark theme</a><ul><li><a href="#light-and-dark-theme-classes">Light and dark theme classes</a></li><li><a href="#inverting-lightness-levels-for-the-dark-theme">Inverting lightness levels for the dark theme</a></li><li><a href="#dark-theme-html-body-background-color">Dark theme HTML body background color</a></li><li><a href="#what-if-you-don%E2%80%99t-want-a-dark-theme%3F">What if you don’t want a dark theme?</a></li></ul></li><li><a href="#other-baselayer-color-utilities">Other Baselayer color utilities</a><ul><li><a href="#black-and-white">Black and white</a><ul><li><a href="#inverting-black-and-white-for-the-dark-theme">Inverting black and white for the dark theme</a></li></ul></li><li><a href="#transparent-background">Transparent background</a></li></ul></li></ul>

diff --git a/docs/decoration/index.html b/docs/decoration/index.html
@@ -87,14 +87,14 @@
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }
@@ -327,7 +327,7 @@ <h1 class="my-4 t-balance t-heavy">Decoration</h1>
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             <nav class="toc" >
         <ul><li><a href="#spacing">Spacing</a><ul><li><a href="#spacing-extras">Spacing extras</a></li></ul></li><li><a href="#borders">Borders</a><ul><li><a href="#border-extra">Border extra</a></li></ul></li><li><a href="#rounded-corners">Rounded corners</a></li><li><a href="#the-img-cover-class">The img-cover class</a></li><li><a href="#opacity">Opacity</a></li></ul>

diff --git a/docs/forms/index.html b/docs/forms/index.html
@@ -87,14 +87,14 @@
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }
@@ -327,7 +327,7 @@ <h1 class="my-4 t-balance t-heavy">Forms</h1>
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             <nav class="toc" >
         <ul><li><a href="#textual-form-input-fields">Textual form input fields</a></li><li><a href="#number-inputs">Number inputs</a></li><li><a href="#date-and-time-inputs">Date and time inputs</a></li><li><a href="#color-picker">Color picker</a></li><li><a href="#file-upload">File upload</a></li><li><a href="#select-and-multi-select">Select and multi-select</a></li><li><a href="#list-and-datalist">List and datalist</a></li><li><a href="#text-area-(multiline)">Text area (multiline)</a></li><li><a href="#radio-boxes-and-checkboxes">Radio boxes and checkboxes</a></li><li><a href="#fieldsets-and-legends">Fieldsets and legends</a></li><li><a href="#form-buttons">Form buttons</a></li></ul>

diff --git a/docs/index.html b/docs/index.html
@@ -87,14 +87,14 @@
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }
@@ -327,7 +327,7 @@ <h1 class="my-4 t-balance t-heavy">Getting started with Baselayer</h1>
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             <nav class="toc" >
         <ul><li><a href="#introduction">Introduction</a></li><li><a href="#modern-css-technologies">Modern CSS technologies</a></li><li><a href="#baselayer%E2%80%99s-design-philosophy">Baselayer’s design philosophy</a></li><li><a href="#built-using-postcss">Built using PostCSS</a></li><li><a href="#a-modern-css-reset">A modern CSS reset</a></li><li><a href="#baselayer%E2%80%99s-built-in-accessibility-features">Baselayer’s built-in accessibility features</a><ul><li><a href="#(1.)-focus-states">(1.) Focus states</a></li><li><a href="#(2.)-the-visually-hidden-class">(2.) The visually-hidden class</a></li></ul></li></ul>

diff --git a/docs/layout/index.html b/docs/layout/index.html
@@ -87,14 +87,14 @@
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }
@@ -327,7 +327,7 @@ <h1 class="my-4 t-balance t-heavy">Layout</h1>
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             <nav class="toc" >
         <ul><li><a href="#container-query-contexts">Container query contexts</a></li><li><a href="#blocks">Blocks</a></li><li><a href="#dimensions">Dimensions</a><ul><li><a href="#wrappers-(f.k.a.-containers)">Wrappers (f.k.a. containers)</a></li><li><a href="#widths">Widths</a></li><li><a href="#heights">Heights</a></li><li><a href="#box">Box</a></li></ul></li><li><a href="#positions">Positions</a></li><li><a href="#container-query-powered-layouts">Container query powered layouts</a></li><li><a href="#responsive-blocks">Responsive blocks</a></li><li><a href="#flex-layouts">Flex layouts</a><ul><li><a href="#flex-gaps">Flex gaps</a></li><li><a href="#flex-modifiers">Flex modifiers</a></li><li><a href="#flex-item-grow">Flex-item grow</a></li><li><a href="#flex-and-container-queries">Flex and container queries</a></li></ul></li><li><a href="#grid-layouts">Grid layouts</a><ul><li><a href="#setting-up-a-grid">Setting up a grid</a></li><li><a href="#grid-gaps">Grid gaps</a></li><li><a href="#controlling-grid-items">Controlling grid items</a></li><li><a href="#grid-items-and-dense-packing">Grid items and dense packing</a></li><li><a href="#grid-and-container-queries">Grid and container queries</a></li><li><a href="#responsive-grid-layout-tiers-can-be-combined">Responsive grid layout tiers can be combined</a></li></ul></li><li><a href="#invisibility-(hidden)-classes">Invisibility (hidden) classes</a></li><li><a href="#content-grid">Content-grid</a><ul><li><a href="#popout-panels">Popout panels</a></li><li><a href="#expanded-panels">Expanded panels</a></li><li><a href="#full-bleed-panels">Full-bleed panels</a></li></ul></li><li><a href="#aspect-ratios">Aspect ratios</a></li><li><a href="#overflows">Overflows</a><ul><li><a href="#overflow-clip">Overflow clip</a></li></ul></li><li><a href="#floats">Floats</a></li></ul>

diff --git a/docs/typography/index.html b/docs/typography/index.html
@@ -87,14 +87,14 @@
 }
 
 @container (min-width: 1280px) {
-  #toc-wrapper > p {
+  #toc-outer > p {
     padding-top: var(--s-3);
   }
-  .ms-windows #toc-wrapper > div {
+  .ms-windows #toc-outer > div {
     scrollbar-gutter: stable;
     overflow-y: hidden;
   }
-  .ms-windows #toc-wrapper:hover > div {
+  .ms-windows #toc-outer:hover > div {
     overflow-y: auto;
   }
 }
@@ -327,7 +327,7 @@ <h1 class="my-4 t-balance t-heavy">Typography</h1>
           </header>
         </div>
         <div class="lg:col-4 lg:row-span-3">
-          <nav id="toc-wrapper" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
+          <nav id="toc-outer" class="sticky top wrapper-sm h-max-100dvh mb-3 pr-2 links-underlined-hover-only overflow-y">
             <p class="h4 t-semibold">On this page</p>
             <nav class="toc" >
         <ul><li><a href="#font-stacks">Font stacks</a><ul><li><a href="#setting-font-stacks">Setting font stacks</a></li></ul></li><li><a href="#base-font-size">Base font size</a></li><li><a href="#typographic-block-elements">Typographic block elements</a><ul><li><a href="#headings">Headings</a></li><li><a href="#block-quotes">Block quotes</a></li><li><a href="#lists">Lists</a></li></ul></li><li><a href="#the-link-tag">The link tag</a></li><li><a href="#menus">Menus</a></li><li><a href="#text-alignment">Text alignment</a></li><li><a href="#tables">Tables</a><ul><li><a href="#making-wide-tables-responsive">Making wide tables responsive</a></li></ul></li><li><a href="#making-text-bigger">Making text bigger</a></li><li><a href="#code">Code</a></li><li><a href="#other-typographic-utility-classes">Other typographic utility classes</a></li></ul>
@@ -763,18 +763,18 @@ <h2 id="other-typographic-utility-classes" tabindex="-1">Other typographic utili
         <div class="lg:col-span-3">
           <footer class="mt-3 content-grid">
             <nav class="popout grid gap-2 sm:equal-2-cols links-not-underlined">
-              
+
               <a class="sm:col-1 my-1 b-thin b-blue b-300 hover:b-500 b-dark-invert rad-1 p-cell flex flex-column gap-1 t-blue t-600 hover:t-700 t-dark-invert hover:bg-blue hover:bg-100 bg-dark-invert"  href="/baselayer-3/">
                 Previous page
                 <span class="h2 m-0 t-normal"> Introduction</span>
               </a>
-              
-              
+
+
               <a class="sm:col-2 my-1 b-thin b-blue b-300 hover:b-500 b-dark-invert rad-1 p-cell flex flex-column gap-1 t-blue t-600 hover:t-700 t-dark-invert t-right hover:bg-blue hover:bg-100 bg-dark-invert" href="/baselayer-3/layout/">
                 Next page
                 <span class="h2 m-0 t-normal">Layout</span>
               </a>
-              
+
             </nav>
             <div class="mt-4 mb-3 p-2 flex flex-column flex-middle t-center">
               <a href="/baselayer-3/" class="mb-1 flex flex-column flex-center gap-1 t-no-underline">