Skip to content

Commit 08e913e

Browse files
SimonPadburySimonPadbury
committed
v.5.2.11
1 parent 5f1979c commit 08e913e

File tree

69 files changed

+408
-397
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+408
-397
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22

33
<!-- Note: update version numbers need updating every time in `metadata.json`, `package.json`, `package-lock.json` (×2), `README.md`, `CHANGELOG.md`, and `codebase.scss` -->
44

5-
## 10 Feb 2024 -- v.5.2.11
5+
## 12 Feb 2024 -- v.5.2.11
66

7-
* Adjusted headings `h1` to `h6` so that they have a ×1.125 font size increase, that takes effect at `md` (1014px default).
7+
* Adjusted headings `h1` to `h6` so that they have a ×1.125 font size increase, that takes effect at `md` (1024px default).
88
* Improved `t-sm` so that its _minimum_ size is 13.5px, using `max(.75em, 13.5px)`.
9-
* Improved `t-lg` so that it uses a `clamp()` ramp instead of a media query for its size increase (×1.25 → 1.5).
9+
* Improved `t-lg` so that it simply upsizes by ×1.25.
1010
* Added `t-display` that increases font sizes (×1.25 → 2) using a `clamp()` ramp.
1111
* Added `w-fit-content`.
12-
* Removed `w-25%`, `w-50%`, `w-75%` as these are redundant.
12+
* Added `h-100dvh` and `h-max-100dvh`.
13+
* Removed `w-25%`, `w-50%`, `w-75%` as these are almost never used.
1314

1415
## 3 Jan 2024 -- v.5.2.10
1516

‎docs/_eleventy_redirect/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!doctype html>
2+
<meta http-equiv="refresh" content="0; url=/codebase-5/">
3+
<title>Browsersync pathPrefix Redirect</title>
4+
<a href="/codebase-5/">Go to /codebase-5/</a>

‎docs/dist/codebase.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/dist/codebase.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/docs/1-getting-started/accessibility/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -444,11 +444,10 @@
444444
>
445445
<ul class="list-style-type-none mt-1 flex flex-column gap-2">
446446
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/font-stacks">Font stacks</a></li>
447-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/headings">Heading formats</a></li>
447+
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Bigger text</a></li>
448448
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-alignment">Text alignment</a></li>
449449
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/inline-text">Inline text</a></li>
450450
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/lists">List formats</a></li>
451-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Making text bigger</a></li>
452451
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-columns">Text columns</a></li>
453452
</ul>
454453
</div>

‎docs/docs/1-getting-started/css-variables/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -444,11 +444,10 @@
444444
>
445445
<ul class="list-style-type-none mt-1 flex flex-column gap-2">
446446
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/font-stacks">Font stacks</a></li>
447-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/headings">Heading formats</a></li>
447+
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Bigger text</a></li>
448448
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-alignment">Text alignment</a></li>
449449
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/inline-text">Inline text</a></li>
450450
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/lists">List formats</a></li>
451-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Making text bigger</a></li>
452451
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-columns">Text columns</a></li>
453452
</ul>
454453
</div>

‎docs/docs/1-getting-started/element-grid/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -444,11 +444,10 @@
444444
>
445445
<ul class="list-style-type-none mt-1 flex flex-column gap-2">
446446
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/font-stacks">Font stacks</a></li>
447-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/headings">Heading formats</a></li>
447+
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Bigger text</a></li>
448448
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-alignment">Text alignment</a></li>
449449
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/inline-text">Inline text</a></li>
450450
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/lists">List formats</a></li>
451-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Making text bigger</a></li>
452451
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-columns">Text columns</a></li>
453452
</ul>
454453
</div>

‎docs/docs/1-getting-started/improvements-since-codebase-4/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -444,11 +444,10 @@
444444
>
445445
<ul class="list-style-type-none mt-1 flex flex-column gap-2">
446446
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/font-stacks">Font stacks</a></li>
447-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/headings">Heading formats</a></li>
447+
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Bigger text</a></li>
448448
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-alignment">Text alignment</a></li>
449449
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/inline-text">Inline text</a></li>
450450
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/lists">List formats</a></li>
451-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Making text bigger</a></li>
452451
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-columns">Text columns</a></li>
453452
</ul>
454453
</div>

‎docs/docs/1-getting-started/introduction/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -444,11 +444,10 @@
444444
>
445445
<ul class="list-style-type-none mt-1 flex flex-column gap-2">
446446
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/font-stacks">Font stacks</a></li>
447-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/headings">Heading formats</a></li>
447+
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Bigger text</a></li>
448448
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-alignment">Text alignment</a></li>
449449
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/inline-text">Inline text</a></li>
450450
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/lists">List formats</a></li>
451-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Making text bigger</a></li>
452451
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-columns">Text columns</a></li>
453452
</ul>
454453
</div>

‎docs/docs/1-getting-started/responsive-design/index.html‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -444,11 +444,10 @@
444444
>
445445
<ul class="list-style-type-none mt-1 flex flex-column gap-2">
446446
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/font-stacks">Font stacks</a></li>
447-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/headings">Heading formats</a></li>
447+
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Bigger text</a></li>
448448
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-alignment">Text alignment</a></li>
449449
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/inline-text">Inline text</a></li>
450450
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/lists">List formats</a></li>
451-
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/bigger-text">Making text bigger</a></li>
452451
<li><a class="block t-decoration-none t-gray-600 hover:t-black" href="/codebase-5/docs/5-typographic-utilities/text-columns">Text columns</a></li>
453452
</ul>
454453
</div>
@@ -610,9 +609,15 @@ <h2 id="widths-and-breakpoint-tiers" tabindex="-1">Widths and breakpoint tiers</
610609
<h2 id="typography" tabindex="-1">Typography</h2>
611610
<p>Codebase typography is also responsive to viewport width (device size):</p>
612611
<ul>
613-
<li><a href="/codebase-5/docs/2-classless-basics/headings">Headings</a> <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> have a slight downsize for phones. Below 768px (same as <code>sm:</code> default), headings become ×0.875 (87.5%) their base size</li>
614-
<li><a href="/codebase-5/docs/5-typographic-utilities/large-display-text">Large display text</a> (using the <code>t-lg</code> wrapper) is 1.25em (125%) of the default size of base text and headings, but for medium screens up (same as <code>md:</code> default), this increases to 1.5em (150%) of the default size.</li>
615-
<li><a href="/codebase-5/docs/5-typographic-utilities/long-read-text">Long read text</a> (using the <code>t-long-read</code> wrapper for essays and blog posts) starting as the normal size for base text and headings, and then these sizes proportionately using CSS <code>clamp()</code> to a comfortable maximum.</li>
612+
<li><a href="/codebase-5/docs/2-classless-basics/headings">Headings</a> <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> have a slight upsize for tablet devices and up. At 768px (same as <code>sm:</code> default), headings become ×1.125 their base size</li>
613+
<li><a href="/codebase-5/docs/5-typographic-utilities/bigger-text">Bigger text</a> utilities:
614+
<ul>
615+
<li>Heading sizes <code>h1</code> to <code>h6</code></li>
616+
<li><code>t-lg</code> wrapper to simply increase text size by ×1.25</li>
617+
<li><code>t-display</code> wrapper CSS <code>clamp()</code> ramp responsively increases text size by ×1.25 up to ×2 if viewport width allows</li>
618+
<li><code>t-long-read</code> wrapper CSS <code>clamp()</code> ramp responsively increases text size by ×1 up to ×1.25 if viewport width allows</li>
619+
</ul>
620+
</li>
616621
<li>Responsive <a href="/codebase-5/docs/5-typographic-utilities/text-alignment">text alignment</a> utilities</li>
617622
</ul>
618623
<h2 id="infographic" tabindex="-1">Infographic</h2>

0 commit comments

Comments
 (0)