v.1.2.4

SimonPadbury · Jan 17, 2024 · 4824878 · 4824878
1 parent 707ecf6
commit 4824878
Show file tree

Hide file tree

Showing 18 changed files with 46 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@
 
 # Baselayer 3 changelog
 
+## .v.1.2.4 -- 17 Jan 2024
+
+* Increased upper limit of `.t-long-read` to 1.5rem (24px). 
+
 ## v.1.2.3 -- 10 Jan 2024
 
 * Improved `box-sizing: border-box`.

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ## Baselayer 3
 
-v.1.2.2
+v.1.2.4
 
 A modern starter CSS library with container queries, a real CSS grid system, clamp() powered typography and spacing sizes, OKLCH color utilities, and custom properties.
 

diff --git a/_src/css/baselayer.css b/_src/css/baselayer.css
@@ -1,5 +1,5 @@
 /*!
-Baselayer 3 CSS v.1.2.3
+Baselayer 3 CSS v.1.2.4
 https://github.com/SimonPadbury/baselayer
 */
 

diff --git a/_src/css/min/baselayer.min.css b/_src/css/min/baselayer.min.css
diff --git a/_src/css/partials/variables.css b/_src/css/partials/variables.css
@@ -220,7 +220,7 @@ Alternatively, you could set these up using...
   Long-read utility
   =================
   */
-  --fs-long-read: clamp(1rem, 0.75rem + 0.625vw, 1.25rem);
+  --fs-long-read: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
 
   /* link decoration offset */
   --do-link: .3rem;
@@ -252,7 +252,7 @@ Container query powered spacing and typography
   --sp-3: clamp(2rem, 1rem + 2.5cqi, 3rem);
   --sp-4: clamp(3rem, 1.5rem + 3.75cqi, 4.5rem);
 
-  --fs-long-read: clamp(1rem, 0.75rem + 0.625cqi, 1.25rem);
+  --fs-long-read: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem);
 }
 
 /*

diff --git a/_src/data/metadata.json b/_src/data/metadata.json
@@ -1,6 +1,6 @@
 {
   "title": "Baselayer 3 CSS",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "licence": "MIT",
   "filesize": "24 KB",
   "developer": {

diff --git a/_src/typography.md b/_src/typography.md
@@ -319,9 +319,9 @@ If you have a lot of content in your table, it will probably break your page lay
 
 ## The long-lead utility class 
 
-Intended for long-read essays, articles and blog posts, the `t-long-read` utility class (used on a wrapping element around your article content) will enlarge all text, including headings, depending on how much width is available.
+Intended for long-read essays, articles and blog posts, the `t-long-read` utility class (used on a wrapping element around your article content) will enlarge all text, including any headings, depending on how much width is available.
 
-The base font size is expanded to 125% over the middle range — for container widths 640px to 1280px (i.e. same as the `sm` to `md` default breakpoints). Starting from 1rem (16px), this expands the base sext size to 20px. This `clamp()` has been calculated using Petter Walbø Johnsgård’s [Font-size Clamp Generator](https://clamp.font-size.app/).
+The base font size is expanded to 125% over the middle range — for container widths 640px to 1280px (i.e. same as the `sm` to `md` default breakpoints). Starting from 1rem (16px), this expands the base sext size to 24px. This `clamp()` has been calculated using Petter Walbø Johnsgård’s [Font-size Clamp Generator](https://clamp.font-size.app/).
 
 The default behavior of `t-long-read` is to be responsive to viewport width using the viewport width unit, `vw`. But the same `t-long-read` utility class _if used inside a `container`_ (see [container query powered layouts](/baselayer-3/layout/#container-query-powered-layouts)) will ramp up using the container query inline width unit, `cqi`.
 
@@ -332,14 +332,14 @@ These two CSS clamp variables are set in `variables.css`:
 Default long-read
 */
 :root {
-  --fs-long-read: clamp(1rem, 0.75rem + 0.625vw, 1.25rem);
+  --fs-long-read: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
 }
 
 /*
 Container query powered long-read
 */
 .container {
-  --fs-long-read: clamp(1rem, 0.75rem + 0.625cqi, 1.25rem);
+  --fs-long-read: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem);
 }
 ```
 

diff --git a/docs/buttons/index.html b/docs/buttons/index.html
@@ -7,7 +7,7 @@
 
   <title>Buttons · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     html {
@@ -249,7 +249,7 @@
           </svg>
         <span class="t-nowrap">Baselayer 3 CSS</span>
       </a>
-      <p class="mb-1 t-gray t-400">Version: 1.2.3 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
+      <p class="mb-1 t-gray t-400">Version: 1.2.4 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
       <p class="mb-1 t-gray t-400"><a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</p>
     </div>
 
@@ -519,7 +519,7 @@ <h2 id="stretch-buttons" tabindex="-1">Stretch buttons</h2>
 
               <p class="p-cell flex flex-center flex-wrap gap-2 t-center">
                 <span><a class="t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</span>
-                <span>Version: 1.2.3</span>
+                <span>Version: 1.2.4</span>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub Repository</a>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3/blob/main/LICENSE">MIT license</a>
               </p>

diff --git a/docs/colors/index.html b/docs/colors/index.html
@@ -7,7 +7,7 @@
 
   <title>Colors · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     html {
@@ -249,7 +249,7 @@
           </svg>
         <span class="t-nowrap">Baselayer 3 CSS</span>
       </a>
-      <p class="mb-1 t-gray t-400">Version: 1.2.3 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
+      <p class="mb-1 t-gray t-400">Version: 1.2.4 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
       <p class="mb-1 t-gray t-400"><a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</p>
     </div>
 
@@ -1008,7 +1008,7 @@ <h3 id="dark%2Flight-theme-toggle" tabindex="-1">Dark/light theme toggle</h3>
 
               <p class="p-cell flex flex-center flex-wrap gap-2 t-center">
                 <span><a class="t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</span>
-                <span>Version: 1.2.3</span>
+                <span>Version: 1.2.4</span>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub Repository</a>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3/blob/main/LICENSE">MIT license</a>
               </p>

diff --git a/docs/css/min/baselayer.min.css b/docs/css/min/baselayer.min.css
diff --git a/docs/decoration/index.html b/docs/decoration/index.html
@@ -7,7 +7,7 @@
 
   <title>Decoration · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     html {
@@ -249,7 +249,7 @@
           </svg>
         <span class="t-nowrap">Baselayer 3 CSS</span>
       </a>
-      <p class="mb-1 t-gray t-400">Version: 1.2.3 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
+      <p class="mb-1 t-gray t-400">Version: 1.2.4 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
       <p class="mb-1 t-gray t-400"><a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</p>
     </div>
 
@@ -506,7 +506,7 @@ <h2 id="opacity" tabindex="-1">Opacity</h2>
 
               <p class="p-cell flex flex-center flex-wrap gap-2 t-center">
                 <span><a class="t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</span>
-                <span>Version: 1.2.3</span>
+                <span>Version: 1.2.4</span>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub Repository</a>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3/blob/main/LICENSE">MIT license</a>
               </p>

diff --git a/docs/examples/index.html b/docs/examples/index.html
@@ -7,7 +7,7 @@
 
   <title>Examples · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     .resize-x {

diff --git a/docs/forms/index.html b/docs/forms/index.html
@@ -7,7 +7,7 @@
 
   <title>Forms · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     html {
@@ -249,7 +249,7 @@
           </svg>
         <span class="t-nowrap">Baselayer 3 CSS</span>
       </a>
-      <p class="mb-1 t-gray t-400">Version: 1.2.3 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
+      <p class="mb-1 t-gray t-400">Version: 1.2.4 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
       <p class="mb-1 t-gray t-400"><a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</p>
     </div>
 
@@ -533,7 +533,7 @@ <h2 id="form-buttons" tabindex="-1">Form buttons</h2>
 
               <p class="p-cell flex flex-center flex-wrap gap-2 t-center">
                 <span><a class="t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</span>
-                <span>Version: 1.2.3</span>
+                <span>Version: 1.2.4</span>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub Repository</a>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3/blob/main/LICENSE">MIT license</a>
               </p>

diff --git a/docs/index.html b/docs/index.html
@@ -7,7 +7,7 @@
 
   <title>Baselayer 3 · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     html {
@@ -249,7 +249,7 @@
           </svg>
         <span class="t-nowrap">Baselayer 3 CSS</span>
       </a>
-      <p class="mb-1 t-gray t-400">Version: 1.2.3 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
+      <p class="mb-1 t-gray t-400">Version: 1.2.4 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
       <p class="mb-1 t-gray t-400"><a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</p>
     </div>
 
@@ -464,7 +464,7 @@ <h3 id="(2.)-the-visually-hidden-class" tabindex="-1">(2.) The <code>visually-hi
 
               <p class="p-cell flex flex-center flex-wrap gap-2 t-center">
                 <span><a class="t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</span>
-                <span>Version: 1.2.3</span>
+                <span>Version: 1.2.4</span>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub Repository</a>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3/blob/main/LICENSE">MIT license</a>
               </p>

diff --git a/docs/layout/index.html b/docs/layout/index.html
@@ -7,7 +7,7 @@
 
   <title>Layout · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     html {
@@ -249,7 +249,7 @@
           </svg>
         <span class="t-nowrap">Baselayer 3 CSS</span>
       </a>
-      <p class="mb-1 t-gray t-400">Version: 1.2.3 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
+      <p class="mb-1 t-gray t-400">Version: 1.2.4 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
       <p class="mb-1 t-gray t-400"><a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</p>
     </div>
 
@@ -893,7 +893,7 @@ <h2 id="overflows" tabindex="-1">Overflows</h2>
 
               <p class="p-cell flex flex-center flex-wrap gap-2 t-center">
                 <span><a class="t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</span>
-                <span>Version: 1.2.3</span>
+                <span>Version: 1.2.4</span>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub Repository</a>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3/blob/main/LICENSE">MIT license</a>
               </p>

diff --git a/docs/typography/index.html b/docs/typography/index.html
@@ -7,7 +7,7 @@
 
   <title>Typography · Baselayer 3 CSS</title>
 
-  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.3">
+  <link rel="stylesheet" href="/baselayer-3/css/min/baselayer.min.css?v=1.2.4">
 
   <style>
     html {
@@ -249,7 +249,7 @@
           </svg>
         <span class="t-nowrap">Baselayer 3 CSS</span>
       </a>
-      <p class="mb-1 t-gray t-400">Version: 1.2.3 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
+      <p class="mb-1 t-gray t-400">Version: 1.2.4 • <a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub</a></p>
       <p class="mb-1 t-gray t-400"><a class="t-gray t-100 hover:t-200 t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</p>
     </div>
 
@@ -596,22 +596,22 @@ <h3 id="making-wide-tables-responsive" tabindex="-1">Making wide tables responsi
 &lt;/div&gt;
 </code></pre>
 <h2 id="the-long-lead-utility-class" tabindex="-1">The long-lead utility class</h2>
-<p>Intended for long-read essays, articles and blog posts, the <code>t-long-read</code> utility class (used on a wrapping element around your article content) will enlarge all text, including headings, depending on how much width is available.</p>
-<p>The base font size is expanded to 125% over the middle range — for container widths 640px to 1280px (i.e. same as the <code>sm</code> to <code>md</code> default breakpoints). Starting from 1rem (16px), this expands the base sext size to 20px. This <code>clamp()</code> has been calculated using Petter Walbø Johnsgård’s <a href="https://clamp.font-size.app/">Font-size Clamp Generator</a>.</p>
+<p>Intended for long-read essays, articles and blog posts, the <code>t-long-read</code> utility class (used on a wrapping element around your article content) will enlarge all text, including any headings, depending on how much width is available.</p>
+<p>The base font size is expanded to 125% over the middle range — for container widths 640px to 1280px (i.e. same as the <code>sm</code> to <code>md</code> default breakpoints). Starting from 1rem (16px), this expands the base sext size to 24px. This <code>clamp()</code> has been calculated using Petter Walbø Johnsgård’s <a href="https://clamp.font-size.app/">Font-size Clamp Generator</a>.</p>
 <p>The default behavior of <code>t-long-read</code> is to be responsive to viewport width using the viewport width unit, <code>vw</code>. But the same <code>t-long-read</code> utility class <em>if used inside a <code>container</code></em> (see <a href="/baselayer-3/layout/#container-query-powered-layouts">container query powered layouts</a>) will ramp up using the container query inline width unit, <code>cqi</code>.</p>
 <p>These two CSS clamp variables are set in <code>variables.css</code>:</p>
 <pre><code class="language-css">/*
 Default long-read
 */
 :root {
-  --fs-long-read: clamp(1rem, 0.75rem + 0.625vw, 1.25rem);
+  --fs-long-read: clamp(1rem, 0.5rem + 1.25vw, 1.5rem);
 }
 
 /*
 Container query powered long-read
 */
 .container {
-  --fs-long-read: clamp(1rem, 0.75rem + 0.625cqi, 1.25rem);
+  --fs-long-read: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem);
 }
 </code></pre>
 <p>The Baselayer docs make use of JavaScript and some extra CSS to enable a demo toggle, so that you can switch between normal and long-read font size in this main article column.</p>
@@ -720,7 +720,7 @@ <h2 id="simple-menus" tabindex="-1">Simple menus</h2>
 
               <p class="p-cell flex flex-center flex-wrap gap-2 t-center">
                 <span><a class="t-noline hover:t-line" href="https://raw.githubusercontent.com/SimonPadbury/baselayer-3/main/_src/css/min/baselayer.min.css">Download CSS</a> (24 KB)</span>
-                <span>Version: 1.2.3</span>
+                <span>Version: 1.2.4</span>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3">GitHub Repository</a>
                 <a class="t-noline hover:t-line" href="https://github.com/SimonPadbury/baselayer-3/blob/main/LICENSE">MIT license</a>
               </p>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "baselayer-3",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A modern starter CSS library with container queries, a real CSS grid system, clamp() powered typography and spacing sizes, OKLCH color utilities, and custom properties.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",