Skip to content

Commit 71f5940

Browse files
SimonPadburySimonPadbury
committed
v.5.3.7
1 parent 4fba198 commit 71f5940

File tree

69 files changed

+1332
-909
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

+1332
-909
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ Notes:
66
(2.) Remember to do `npx -y pagefind --site docs` before deployment
77
-->
88

9+
## 18 July 2025 -- v.5.3.7
10+
11+
* Improved `t-loose` and `t-tight` by making them based on `ch` units. And set them as CSS variables.
12+
913
## 19 Mar 2025 -- v.5.3.6
1014

1115
* Changed utility classes `t-no-underline` to `t-underline-none` and `links-no-underline` and `links-underline-none`.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Install via Git: https://github.com/codebase-frontend-library/codebase-5.git
2020

2121
***
2222

23-
* Current version: 5.3.6 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
23+
* Current version: 5.3.7 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
2424
* CSS file size: 96 KB
2525
* Licence: MIT
2626
* Developer: Simon Padbury

‎docs/dist/codebase.css‎

Lines changed: 2 additions & 2 deletions
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: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>Accessibility - Codebase</title>
99

1010
<link href="/codebase-5/prism/prism.css" rel="stylesheet">
11-
<link href="/codebase-5/dist/codebase.css?v=5.3.6" rel="stylesheet">
11+
<link href="/codebase-5/dist/codebase.css?v=5.3.7" rel="stylesheet">
1212

1313
<link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
1414
<link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -36,16 +36,22 @@
3636

3737
pre code {
3838
white-space: pre-wrap !important;
39+
max-width: calc(100vw - 2rem);
40+
}
41+
.table,
42+
.overflow-x:has(.table),
43+
pre code {
44+
max-width: calc(100vw - 2rem);
3945
}
4046

41-
@media (max-width: 767px) {
47+
@media (max-width: 1023px) {
4248
#side-menu-wrap {
4349
max-height: calc(100vh - 42px);
4450
overflow-y: auto;
4551
}
4652
}
4753

48-
@media (min-width: 768px) {
54+
@media (min-width: 1024px) {
4955
#site-page {
5056
grid-template-columns: 256px 1fr;
5157
max-width: 100vw;
@@ -205,8 +211,8 @@
205211
let viewportWidth = window.innerWidth;
206212

207213
Alpine.store('docsNav', {
208-
open: window.innerWidth >= 768,
209-
belowBP: window.innerWidth < 768,
214+
open: window.innerWidth >= 1024,
215+
belowBP: window.innerWidth < 1024,
210216
menu1open: false,
211217
menu2open: false,
212218
menu3open: false,
@@ -248,7 +254,7 @@
248254

249255
viewportWidth = currentWidth;
250256

251-
if (viewportWidth >= 768) {
257+
if (viewportWidth >= 1024) {
252258
this.open = true,
253259
this.belowBP = false
254260
} else {
@@ -263,7 +269,7 @@
263269
})
264270
</script>
265271

266-
<div id="site-top-bar" class="py-1 md:py-0 sm:sticky bg-black-glass-5">
272+
<div id="site-top-bar" class="py-1 md:py-0 md:sticky bg-black-glass-5">
267273
<div class="w-xxl mx-auto h-100% relative flex flex-middle">
268274

269275
<!-- Navicon -->
@@ -276,7 +282,7 @@
276282
class="btn-icon rounded-full ml-1 b-gray-300 hover:b-gray-300 t-gray-300 hover:t-white hover:bg-transparent"
277283
@click="$store.docsNav.open = true"
278284
aria-label="Site menu"
279-
:aria-expanded="$store.docsNav"
285+
:aria-expanded="$store.docsNav.open"
280286
x-show="$store.docsNav.belowBP"
281287
>
282288
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></line><line x1="40" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></line><line x1="40" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></line></svg>
@@ -295,13 +301,13 @@
295301
<svg viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2">
296302
<path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path>
297303
</svg>
298-
<span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.6</span>
304+
<span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.7</span>
299305
</a>
300306
</div>
301307

302308
<div class="grow">
303309
<div class="menu pr-1 flex flex-end sm:hidden-below links-underline-none">
304-
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.6">Download CSS</a></div>
310+
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.7">Download CSS</a></div>
305311
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
306312
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
307313
</div>
@@ -316,8 +322,8 @@
316322
</div>
317323
<div id="site-page" class="w-xxl mx-auto grid sm:auto-2-cols md:auto-3-cols">
318324

319-
<nav id="site-navigation" class="sm:rows-1-4 lg:rows-1-3 relative">
320-
<div class="sm:sticky">
325+
<nav id="site-navigation" class="sm:rows-1-5 lg:rows-1-4 relative">
326+
<div class="md:sticky">
321327

322328
<div
323329
x-data
@@ -331,7 +337,7 @@
331337
x-transition:leave-start="translate-0"
332338
x-transition:leave-end="translate-left-100%"
333339
x-trap.noscroll.inert="$store.docsNav.open && $store.docsNav.belowBP"
334-
class="offcanvas offcanvas-left sm:offcanvas-override w-xxs bs-1 bg-white-glass-5"
340+
class="offcanvas offcanvas-left md:offcanvas-override w-xxs bs-1 bg-white-glass-5"
335341
@click.outside="$store.docsNav.open = !$store.docsNav.belowBP || false"
336342
@keyup.escape="$store.docsNav.open = !$store.docsNav.belowBP || false"
337343
>
@@ -357,7 +363,7 @@
357363
<div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
358364

359365
<div class="mb-3 sm:hidden">
360-
<div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.6">Download</a></div>
366+
<div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.7">Download</a></div>
361367
<div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
362368
</div>
363369

@@ -569,7 +575,7 @@
569575
</div>
570576
</div>
571577

572-
<header id="docs-header" class="col-1 row-1 sm:col-2 sm:row-2">
578+
<header id="docs-header" class="col-1 row-2 sm:col-2 sm:row-2">
573579
<div class="container-sm py-3 xs:py-6 md:aspect-ratio-3x1 flex flex-column flex-center t-display">
574580
<div class="m-0">
575581

@@ -582,7 +588,7 @@ <h1 class="h2 mt-0 t-bold t-balance">Accessibility features in Codebase</h1>
582588
</div>
583589
</header>
584590

585-
<nav id="nav-on-this-page" class="col-1 row-2 sm:col-2 lg:col-3 lg:rows-1-3">
591+
<nav id="nav-on-this-page" class="col-1 row-3 sm:col-2 lg:col-3 lg:rows-1-3">
586592
<div class="container-sm mx-auto lg:sticky mb-6">
587593
<div class="b-thin b-gray-400 rounded px-2 pt-2 lg:pt-4 lg:b-0">
588594
<div class="h5 mb-2 t-semibold">On this page</div>
@@ -773,7 +779,7 @@ <h3 id="apps-and-browser-extensions" tabindex="-1">Apps and browser extensions</
773779
</p>
774780

775781
<menu class="container-lg pt-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
776-
<div>Version: 5.3.6</div>
782+
<div>Version: 5.3.7</div>
777783
<div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
778784
<div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
779785
<div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/dist/codebase.css">CSS (minified)</a> 96 KB</div>

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

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>CSS Variables - Codebase</title>
99

1010
<link href="/codebase-5/prism/prism.css" rel="stylesheet">
11-
<link href="/codebase-5/dist/codebase.css?v=5.3.6" rel="stylesheet">
11+
<link href="/codebase-5/dist/codebase.css?v=5.3.7" rel="stylesheet">
1212

1313
<link rel="icon" type="image/svg+xml" href="/codebase-5/favicon.svg">
1414
<link rel="apple-touch-icon" sizes="180x180" href="/codebase-5/apple-touch-icon.png">
@@ -36,16 +36,22 @@
3636

3737
pre code {
3838
white-space: pre-wrap !important;
39+
max-width: calc(100vw - 2rem);
40+
}
41+
.table,
42+
.overflow-x:has(.table),
43+
pre code {
44+
max-width: calc(100vw - 2rem);
3945
}
4046

41-
@media (max-width: 767px) {
47+
@media (max-width: 1023px) {
4248
#side-menu-wrap {
4349
max-height: calc(100vh - 42px);
4450
overflow-y: auto;
4551
}
4652
}
4753

48-
@media (min-width: 768px) {
54+
@media (min-width: 1024px) {
4955
#site-page {
5056
grid-template-columns: 256px 1fr;
5157
max-width: 100vw;
@@ -205,8 +211,8 @@
205211
let viewportWidth = window.innerWidth;
206212

207213
Alpine.store('docsNav', {
208-
open: window.innerWidth >= 768,
209-
belowBP: window.innerWidth < 768,
214+
open: window.innerWidth >= 1024,
215+
belowBP: window.innerWidth < 1024,
210216
menu1open: false,
211217
menu2open: false,
212218
menu3open: false,
@@ -248,7 +254,7 @@
248254

249255
viewportWidth = currentWidth;
250256

251-
if (viewportWidth >= 768) {
257+
if (viewportWidth >= 1024) {
252258
this.open = true,
253259
this.belowBP = false
254260
} else {
@@ -263,7 +269,7 @@
263269
})
264270
</script>
265271

266-
<div id="site-top-bar" class="py-1 md:py-0 sm:sticky bg-black-glass-5">
272+
<div id="site-top-bar" class="py-1 md:py-0 md:sticky bg-black-glass-5">
267273
<div class="w-xxl mx-auto h-100% relative flex flex-middle">
268274

269275
<!-- Navicon -->
@@ -276,7 +282,7 @@
276282
class="btn-icon rounded-full ml-1 b-gray-300 hover:b-gray-300 t-gray-300 hover:t-white hover:bg-transparent"
277283
@click="$store.docsNav.open = true"
278284
aria-label="Site menu"
279-
:aria-expanded="$store.docsNav"
285+
:aria-expanded="$store.docsNav.open"
280286
x-show="$store.docsNav.belowBP"
281287
>
282288
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></line><line x1="40" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></line><line x1="40" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"></line></svg>
@@ -295,13 +301,13 @@
295301
<svg viewBox="0 0 340 180" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-miterlimit="2">
296302
<path d="M195.956 115.956c14.059-14.059 36.853-14.059 50.912 0 14.058 14.059 14.058 36.853 0 50.912L323.235 90.5l-76.367-76.368c14.058 14.059 14.058 36.853 0 50.912-14.059 14.059-36.853 14.059-50.912 0-14.059-14.059-36.853-14.059-50.912 0-14.059 14.059-14.059 36.853 0 50.912 14.059 14.059 36.853 14.059 50.912 0M17.765 90.5l76.367-76.368c-42.176 42.177-42.176 110.559 0 152.736L17.765 90.5z" fill-rule="nonzero" fill="currentColor" stroke="currentColor" stroke-width="10"></path>
297303
</svg>
298-
<span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.6</span>
304+
<span class="t-loose t-semibold">Codebase CSS</span> <span class="ml-1 t-sm t-gray-400">v.5.3.7</span>
299305
</a>
300306
</div>
301307

302308
<div class="grow">
303309
<div class="menu pr-1 flex flex-end sm:hidden-below links-underline-none">
304-
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.6">Download CSS</a></div>
310+
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="/codebase-5/dist/codebase.css?v=5.3.7">Download CSS</a></div>
305311
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
306312
<div class="p-cell"><a class="t-gray-100 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md">Changelog</a></div>
307313
</div>
@@ -316,8 +322,8 @@
316322
</div>
317323
<div id="site-page" class="w-xxl mx-auto grid sm:auto-2-cols md:auto-3-cols">
318324

319-
<nav id="site-navigation" class="sm:rows-1-4 lg:rows-1-3 relative">
320-
<div class="sm:sticky">
325+
<nav id="site-navigation" class="sm:rows-1-5 lg:rows-1-4 relative">
326+
<div class="md:sticky">
321327

322328
<div
323329
x-data
@@ -331,7 +337,7 @@
331337
x-transition:leave-start="translate-0"
332338
x-transition:leave-end="translate-left-100%"
333339
x-trap.noscroll.inert="$store.docsNav.open && $store.docsNav.belowBP"
334-
class="offcanvas offcanvas-left sm:offcanvas-override w-xxs bs-1 bg-white-glass-5"
340+
class="offcanvas offcanvas-left md:offcanvas-override w-xxs bs-1 bg-white-glass-5"
335341
@click.outside="$store.docsNav.open = !$store.docsNav.belowBP || false"
336342
@keyup.escape="$store.docsNav.open = !$store.docsNav.belowBP || false"
337343
>
@@ -357,7 +363,7 @@
357363
<div id="side-menu-wrap" class="p-2 md:pt-4 pb-6">
358364

359365
<div class="mb-3 sm:hidden">
360-
<div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.6">Download</a></div>
366+
<div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.3.7">Download</a></div>
361367
<div><a class="block py-1 t-underline-hover-only t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
362368
</div>
363369

@@ -569,7 +575,7 @@
569575
</div>
570576
</div>
571577

572-
<header id="docs-header" class="col-1 row-1 sm:col-2 sm:row-2">
578+
<header id="docs-header" class="col-1 row-2 sm:col-2 sm:row-2">
573579
<div class="container-sm py-3 xs:py-6 md:aspect-ratio-3x1 flex flex-column flex-center t-display">
574580
<div class="m-0">
575581

@@ -582,7 +588,7 @@ <h1 class="h2 mt-0 t-bold t-balance">CSS variables in Codebase</h1>
582588
</div>
583589
</header>
584590

585-
<nav id="nav-on-this-page" class="col-1 row-2 sm:col-2 lg:col-3 lg:rows-1-3">
591+
<nav id="nav-on-this-page" class="col-1 row-3 sm:col-2 lg:col-3 lg:rows-1-3">
586592
<div class="container-sm mx-auto lg:sticky mb-6">
587593
<div class="b-thin b-gray-400 rounded px-2 pt-2 lg:pt-4 lg:b-0">
588594
<div class="h5 mb-2 t-semibold">On this page</div>
@@ -663,7 +669,7 @@ <h3 id="example%3A-how-codebase-uses-color-variables" tabindex="-1">Example: How
663669
</p>
664670

665671
<menu class="container-lg pt-3 grid xs:equal-2-cols sm:equal-3-cols md:equal-4-cols lg:equal-6-cols gap-2 t-center">
666-
<div>Version: 5.3.6</div>
672+
<div>Version: 5.3.7</div>
667673
<div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
668674
<div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
669675
<div><a class="t-gray-200 hover:t-white t-underline-hover-only" href="/codebase-5/dist/codebase.css">CSS (minified)</a> 96 KB</div>

0 commit comments

Comments
 (0)