diff --git a/public/css/base.css b/public/css/base.css index df41b68..2b54556 100644 --- a/public/css/base.css +++ b/public/css/base.css @@ -201,11 +201,11 @@ figcaption { /** Navigation bar */ -nav { +.navbar { margin-block: var(--spacing-block-sm); } -nav ul { +.navbar ul { grid-column: media-start / content-end; display: flex; justify-content: center; @@ -215,12 +215,12 @@ nav ul { } @media (min-width: 36rem) { - nav { + .navbar { display: grid; grid-template-columns: subgrid; } - nav ul { + .navbar ul { justify-content: end; } } @@ -296,3 +296,21 @@ pre code { padding-inline: var(--spacing-inline-xs); background-color: var(--color-primary-fg-accent); } + + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; + + outline: none; + outline-offset: 0; +} diff --git a/public/css/feed.css b/public/css/feed.css index fc665ec..c47a703 100644 --- a/public/css/feed.css +++ b/public/css/feed.css @@ -1,16 +1,23 @@ -/* Assumes there is at most one level of subheading for sub-dividing entries */ -.h-feed :is(h2, h3, h4, h5, h6) { - margin-block-start: var(--spacing-block-md); +.skip-to { + display: inline-block; + margin-block-start: var(--spacing-block-xs); } -.h-feed .h-entry { - margin-block-start: var(--spacing-block-xs); +.skip-to ul { + margin-block-start: var(--spacing-block-xs); } -.h-feed .full-feed-link { - text-align: end; +.skip-to :is(ul, li) { + display: inline-block; + list-style-type: disc; } -.h-feed :is(a.full-feed-link, .full-feed-link a)::after { - content: ' >' +.skip-to li:last-of-type { + list-style: none; +} + +.h-entry { + outline: 0.125rem solid var(--colour-primary-fg); + outline-offset: 1rem; + border-radius: 0.25rem; } diff --git a/templates/components/_navbar.html.twig b/templates/components/_navbar.html.twig index 9eac7cc..08f3d48 100644 --- a/templates/components/_navbar.html.twig +++ b/templates/components/_navbar.html.twig @@ -1,4 +1,4 @@ -