rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wcag improvements

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-16 11:06:33 +01:00
parent 5b068ac51a
commit 4e650899c8
7 changed files with 754 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
css/styles.css
View File

@@ -1,25 +1,3 @@
/* ==========================================================================
Font Definitions
========================================================================== */
@font-face {
font-family: "Outline";
src: url("../fonts/Outline-Regular.woff2") format("woff2"),
url("../fonts/Outline-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Outline";
src: url("../fonts/Outline-Light.woff2") format("woff2"),
url("../fonts/Outline-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
CSS Reset & Normalize (Modern Best Practices)
Based on normalize.css v8.0.1 + modern resets
@@ -110,22 +88,6 @@ textarea:not([rows]) {
scroll-margin-block: 5ex;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Remove the inner border and padding in Firefox */
::-moz-focus-inner {
border-style: none;
@@ -212,12 +174,10 @@ table {
--color-warning: #f59e0b;
/* Typography */
--font-family-base: "Outline", system-ui, -apple-system, BlinkMacSystemFont,
--font-family-base: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
--font-family-heading: var(--font-family-base);
--font-family-outfit: "Outfit", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
@@ -367,6 +327,30 @@ site-content {
border: 0;
}
/* Skip to Content Link */
.skip-to-content {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: var(--spacing-sm) var(--spacing-md);
background-color: var(--color-button-primary);
color: var(--color-text-inverse);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-decoration: none;
border-radius: var(--radius-sm);
transition: top var(--transition-fast);
}
.skip-to-content:focus {
top: var(--spacing-sm);
outline: 2px solid var(--color-text-inverse);
outline-offset: 2px;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;