Skip to content

Commit 86b399d

Browse files
SimonPadburySimonPadbury
committed
v.5.2.4
1 parent 840b572 commit 86b399d

File tree

69 files changed

+995
-657
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

+995
-657
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
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-
## 23 July 2025 -- v.5.2.3
5+
## 30 Oct 2024 -- v.5.2.4
6+
7+
* Reverted to the browser built-in accessibility focus ring outline (no longer using a box shadow). But set 2px outline thickness and 2px offset. Evergreen browsers have outlines that now follow rounded corners on inputs and buttons.
8+
9+
## 23 July 2024 -- v.5.2.3
610

711
* Improved `t-tight` and `t-loose` letter spacing.
812
* Improved `t-link-inside` / `t-link` (i.e. panel links) and examples.

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Install via Git: https://github.com/codebase-frontend-library/codebase-5.git
1818

1919
***
2020

21-
* Current version: 5.2.3 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
22-
* CSS file size: 95 KB
21+
* Current version: 5.2.4 -- see [changelog](https://github.com/codebase-frontend-library/codebase-5/blob/main/CHANGELOG.md)
22+
* CSS file size: 92.5 KB
2323
* Licence: MIT
2424
* 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: 18 additions & 12 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.2.3" rel="stylesheet">
11+
<link href="/codebase-5/dist/codebase.css?v=5.2.4" 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">
@@ -21,15 +21,20 @@
2121
<meta name="theme-color" content="#ffffff">
2222

2323
<style>
24+
2425
html {
2526
scroll-behavior: smooth;
2627
}
2728
#site-top-bar {
2829
z-index: 990;
2930
}
3031
#site-title svg {
31-
height: 35px;
32-
width: 70px;
32+
height: 30px;
33+
width: 60px;
34+
}
35+
36+
pre code {
37+
white-space: pre-wrap !important;
3338
}
3439

3540
@media (max-width: 767px) {
@@ -42,6 +47,7 @@
4247
@media (min-width: 768px) {
4348
#site-page {
4449
grid-template-columns: 256px calc(100vw - 256px);
50+
max-width: 100vw;
4551
}
4652
#site-navigation > div {
4753
top: 57px;
@@ -230,10 +236,10 @@
230236
</button>
231237
</div>
232238

233-
<div class="p-2">
239+
<div class="p-1">
234240
<a
235241
id="site-title"
236-
class="flex flex-middle gap-1 h3 mb-0 pl-1 t-decoration-none t-teal-600 hover:t-black"
242+
class="flex flex-middle gap-1 h4 mb-0 pl-1 t-decoration-none t-teal-600 hover:t-black"
237243
:class="scrollAtTop ? 'enlarged' : ''"
238244
href="/codebase-5/"
239245
tabindex="1"
@@ -251,7 +257,7 @@
251257

252258
<div class="grow">
253259
<div class="menu pr-1 flex flex-end sm:hidden-below">
254-
<div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.3">Download CSS</a></div>
260+
<div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.4">Download CSS</a></div>
255261
<div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black t-semibold" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
256262
</div>
257263
</div>
@@ -306,11 +312,11 @@
306312
<div id="side-menu-wrap" class="p-2 pb-6">
307313

308314
<div class="mb-3 sm:hidden">
309-
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.3">Download</a></div>
315+
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.4">Download</a></div>
310316
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
311317
</div>
312318

313-
<p class="h4 lg:mt-3 t-semibold">Documentation</p>
319+
<p class="h5 lg:mt-1 t-semibold">Documentation</p>
314320

315321
<div x-id="['menu']">
316322
<button class="w-100% flex-start b-0 px-0 unrounded hover:bg-transparent" @click="$store.docsNav.menu1open = !$store.docsNav.menu1open" :aria-controls="$id('menu')" :aria-expanded="$store.docsNav.menu1open" @keyup.escape="$store.docsNav.menu1open = false">
@@ -511,15 +517,15 @@
511517

512518
</div>
513519
<div class="t-display">
514-
<h1 class="t-thin">Accessibility features in Codebase 5</h1>
520+
<h1 class="h2 t-thin">Accessibility features in Codebase 5</h1>
515521
</div>
516522
</div>
517523
</header>
518524

519525
<nav id="nav-on-this-page" class="col-1 row-2 sm:col-2 lg:col-3 lg:rows-1-3">
520526
<div class="container-sm mx-auto lg:sticky mb-6" style="top: 55px;">
521527
<div class="b-thin b-gray-400 rounded px-2 pt-2 lg:b-0">
522-
<div class="h4 mb-2 lg:pt-5 t-semibold">Contents</div>
528+
<div class="h5 lg:mt-1 t-semibold">Contents</div>
523529
<div id="toc"></div>
524530
</div>
525531
</div>
@@ -683,7 +689,7 @@ <h3 id="apps-and-browser-extensions" tabindex="-1">Apps and browser extensions</
683689
<path d="M220 270.13 109.87 380 90 399.87l.13.13-.13.13 130 129.74 20.815-20.37L129.87 400 240.5 290.8 220 270.13Z" transform="translate(-90 -270.13)" fill="currentColor" />
684690
</svg>
685691
<span class="inline-block mt-2 t-semibold">
686-
Codebase <span class="t-sm t-teal-300">v.5.2.3</span>
692+
Codebase <span class="t-sm t-teal-300">v.5.2.4</span>
687693
</span>
688694
</span>
689695
</a>
@@ -692,7 +698,7 @@ <h3 id="apps-and-browser-extensions" tabindex="-1">Apps and browser extensions</
692698
<div class="container-md py-3 flex flex-space-around flex-wrap gap-3 t-center">
693699
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
694700
<div><a class="t-teal-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
695-
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (95 KB)</div>
701+
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (92.5 KB)</div>
696702
<div>Licence: <a class="t-teal-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/LICENCE">MIT</a></div>
697703
<div>Developer: <a class="t-teal-200 hover:t-white" href="https://github.com/SimonPadbury">Simon Padbury</a></div>
698704
</div>

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

Lines changed: 18 additions & 12 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.2.3" rel="stylesheet">
11+
<link href="/codebase-5/dist/codebase.css?v=5.2.4" 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">
@@ -21,15 +21,20 @@
2121
<meta name="theme-color" content="#ffffff">
2222

2323
<style>
24+
2425
html {
2526
scroll-behavior: smooth;
2627
}
2728
#site-top-bar {
2829
z-index: 990;
2930
}
3031
#site-title svg {
31-
height: 35px;
32-
width: 70px;
32+
height: 30px;
33+
width: 60px;
34+
}
35+
36+
pre code {
37+
white-space: pre-wrap !important;
3338
}
3439

3540
@media (max-width: 767px) {
@@ -42,6 +47,7 @@
4247
@media (min-width: 768px) {
4348
#site-page {
4449
grid-template-columns: 256px calc(100vw - 256px);
50+
max-width: 100vw;
4551
}
4652
#site-navigation > div {
4753
top: 57px;
@@ -230,10 +236,10 @@
230236
</button>
231237
</div>
232238

233-
<div class="p-2">
239+
<div class="p-1">
234240
<a
235241
id="site-title"
236-
class="flex flex-middle gap-1 h3 mb-0 pl-1 t-decoration-none t-teal-600 hover:t-black"
242+
class="flex flex-middle gap-1 h4 mb-0 pl-1 t-decoration-none t-teal-600 hover:t-black"
237243
:class="scrollAtTop ? 'enlarged' : ''"
238244
href="/codebase-5/"
239245
tabindex="1"
@@ -251,7 +257,7 @@
251257

252258
<div class="grow">
253259
<div class="menu pr-1 flex flex-end sm:hidden-below">
254-
<div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.3">Download CSS</a></div>
260+
<div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.4">Download CSS</a></div>
255261
<div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black t-semibold" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
256262
</div>
257263
</div>
@@ -306,11 +312,11 @@
306312
<div id="side-menu-wrap" class="p-2 pb-6">
307313

308314
<div class="mb-3 sm:hidden">
309-
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.3">Download</a></div>
315+
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.4">Download</a></div>
310316
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
311317
</div>
312318

313-
<p class="h4 lg:mt-3 t-semibold">Documentation</p>
319+
<p class="h5 lg:mt-1 t-semibold">Documentation</p>
314320

315321
<div x-id="['menu']">
316322
<button class="w-100% flex-start b-0 px-0 unrounded hover:bg-transparent" @click="$store.docsNav.menu1open = !$store.docsNav.menu1open" :aria-controls="$id('menu')" :aria-expanded="$store.docsNav.menu1open" @keyup.escape="$store.docsNav.menu1open = false">
@@ -511,15 +517,15 @@
511517

512518
</div>
513519
<div class="t-display">
514-
<h1 class="t-thin">CSS variables in Codebase</h1>
520+
<h1 class="h2 t-thin">CSS variables in Codebase</h1>
515521
</div>
516522
</div>
517523
</header>
518524

519525
<nav id="nav-on-this-page" class="col-1 row-2 sm:col-2 lg:col-3 lg:rows-1-3">
520526
<div class="container-sm mx-auto lg:sticky mb-6" style="top: 55px;">
521527
<div class="b-thin b-gray-400 rounded px-2 pt-2 lg:b-0">
522-
<div class="h4 mb-2 lg:pt-5 t-semibold">Contents</div>
528+
<div class="h5 lg:mt-1 t-semibold">Contents</div>
523529
<div id="toc"></div>
524530
</div>
525531
</div>
@@ -595,7 +601,7 @@ <h2 id="how-you-can-use-and-override-codebase-css-variables" tabindex="-1">How y
595601
<path d="M220 270.13 109.87 380 90 399.87l.13.13-.13.13 130 129.74 20.815-20.37L129.87 400 240.5 290.8 220 270.13Z" transform="translate(-90 -270.13)" fill="currentColor" />
596602
</svg>
597603
<span class="inline-block mt-2 t-semibold">
598-
Codebase <span class="t-sm t-teal-300">v.5.2.3</span>
604+
Codebase <span class="t-sm t-teal-300">v.5.2.4</span>
599605
</span>
600606
</span>
601607
</a>
@@ -604,7 +610,7 @@ <h2 id="how-you-can-use-and-override-codebase-css-variables" tabindex="-1">How y
604610
<div class="container-md py-3 flex flex-space-around flex-wrap gap-3 t-center">
605611
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
606612
<div><a class="t-teal-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
607-
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (95 KB)</div>
613+
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (92.5 KB)</div>
608614
<div>Licence: <a class="t-teal-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/LICENCE">MIT</a></div>
609615
<div>Developer: <a class="t-teal-200 hover:t-white" href="https://github.com/SimonPadbury">Simon Padbury</a></div>
610616
</div>

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

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<title>Element grid - Codebase</title>
99

1010
<link href="/codebase-5/prism/prism.css" rel="stylesheet">
11-
<link href="/codebase-5/dist/codebase.css?v=5.2.3" rel="stylesheet">
11+
<link href="/codebase-5/dist/codebase.css?v=5.2.4" 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">
@@ -21,15 +21,20 @@
2121
<meta name="theme-color" content="#ffffff">
2222

2323
<style>
24+
2425
html {
2526
scroll-behavior: smooth;
2627
}
2728
#site-top-bar {
2829
z-index: 990;
2930
}
3031
#site-title svg {
31-
height: 35px;
32-
width: 70px;
32+
height: 30px;
33+
width: 60px;
34+
}
35+
36+
pre code {
37+
white-space: pre-wrap !important;
3338
}
3439

3540
@media (max-width: 767px) {
@@ -42,6 +47,7 @@
4247
@media (min-width: 768px) {
4348
#site-page {
4449
grid-template-columns: 256px calc(100vw - 256px);
50+
max-width: 100vw;
4551
}
4652
#site-navigation > div {
4753
top: 57px;
@@ -230,10 +236,10 @@
230236
</button>
231237
</div>
232238

233-
<div class="p-2">
239+
<div class="p-1">
234240
<a
235241
id="site-title"
236-
class="flex flex-middle gap-1 h3 mb-0 pl-1 t-decoration-none t-teal-600 hover:t-black"
242+
class="flex flex-middle gap-1 h4 mb-0 pl-1 t-decoration-none t-teal-600 hover:t-black"
237243
:class="scrollAtTop ? 'enlarged' : ''"
238244
href="/codebase-5/"
239245
tabindex="1"
@@ -251,7 +257,7 @@
251257

252258
<div class="grow">
253259
<div class="menu pr-1 flex flex-end sm:hidden-below">
254-
<div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.3">Download CSS</a></div>
260+
<div><a class="p-block t-gray-600 t-decoration-none t-semibold hover:t-decoration-underline hover:t-black t-semibold" href="/codebase-5/dist/codebase.css?v=5.2.4">Download CSS</a></div>
255261
<div><a class="p-block t-gray-600 t-decoration-none hover:t-decoration-underline hover:t-black t-semibold" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
256262
</div>
257263
</div>
@@ -306,11 +312,11 @@
306312
<div id="side-menu-wrap" class="p-2 pb-6">
307313

308314
<div class="mb-3 sm:hidden">
309-
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.3">Download</a></div>
315+
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="/codebase-5/dist/codebase.css?v=5.2.4">Download</a></div>
310316
<div><a class="block py-1 t-decoration-none hover:t-decoration-underline t-gray-600 hover:t-gray-900" href="https://github.com/codebase-frontend-library/codebase-5">Github</a></div>
311317
</div>
312318

313-
<p class="h4 lg:mt-3 t-semibold">Documentation</p>
319+
<p class="h5 lg:mt-1 t-semibold">Documentation</p>
314320

315321
<div x-id="['menu']">
316322
<button class="w-100% flex-start b-0 px-0 unrounded hover:bg-transparent" @click="$store.docsNav.menu1open = !$store.docsNav.menu1open" :aria-controls="$id('menu')" :aria-expanded="$store.docsNav.menu1open" @keyup.escape="$store.docsNav.menu1open = false">
@@ -511,15 +517,15 @@
511517

512518
</div>
513519
<div class="t-display">
514-
<h1 class="t-thin">The Codebase element grid</h1>
520+
<h1 class="h2 t-thin">The Codebase element grid</h1>
515521
</div>
516522
</div>
517523
</header>
518524

519525
<nav id="nav-on-this-page" class="col-1 row-2 sm:col-2 lg:col-3 lg:rows-1-3">
520526
<div class="container-sm mx-auto lg:sticky mb-6" style="top: 55px;">
521527
<div class="b-thin b-gray-400 rounded px-2 pt-2 lg:b-0">
522-
<div class="h4 mb-2 lg:pt-5 t-semibold">Contents</div>
528+
<div class="h5 lg:mt-1 t-semibold">Contents</div>
523529
<div id="toc"></div>
524530
</div>
525531
</div>
@@ -613,7 +619,7 @@ <h2 id="utility-class-spacing" tabindex="-1">Utility class spacing</h2>
613619
<path d="M220 270.13 109.87 380 90 399.87l.13.13-.13.13 130 129.74 20.815-20.37L129.87 400 240.5 290.8 220 270.13Z" transform="translate(-90 -270.13)" fill="currentColor" />
614620
</svg>
615621
<span class="inline-block mt-2 t-semibold">
616-
Codebase <span class="t-sm t-teal-300">v.5.2.3</span>
622+
Codebase <span class="t-sm t-teal-300">v.5.2.4</span>
617623
</span>
618624
</span>
619625
</a>
@@ -622,7 +628,7 @@ <h2 id="utility-class-spacing" tabindex="-1">Utility class spacing</h2>
622628
<div class="container-md py-3 flex flex-space-around flex-wrap gap-3 t-center">
623629
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/docs/1-getting-started/introduction/">Documentation</a></div>
624630
<div><a class="t-teal-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5">GitHub Repository</a></div>
625-
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (95 KB)</div>
631+
<div><a class="t-teal-200 hover:t-white" href="/codebase-5/dist/codebase.css">CSS (minified)</a> (92.5 KB)</div>
626632
<div>Licence: <a class="t-teal-200 hover:t-white" href="https://github.com/codebase-frontend-library/codebase-5/blob/main/LICENCE">MIT</a></div>
627633
<div>Developer: <a class="t-teal-200 hover:t-white" href="https://github.com/SimonPadbury">Simon Padbury</a></div>
628634
</div>

0 commit comments

Comments
 (0)