fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-14 01:32:11 +00:00
Code Issues Projects Releases Wiki Activity

Add skip link

Browse source 
Should now be full wcag AA with some AAA.
This commit is contained in:
Rohan Kumar 2022-04-14 22:15:54 -07:00
parent 7726d8341e
commit 00da18b36e
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/css/dark.css
View file

@ -1,12 +1,16 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
/* I've been told that pure white on black is a bit harsh */
html { html {
/* "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need
* I've been told that pure white on black is a bit harsh */
background-color: #0e0e0e;
color: #eee; color: #eee;
} }
html,
.skip {
/* "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need */
background-color: #0e0e0e;
}
/* Only color <a> if it's a link; if href is empty, let it be. */ /* Only color <a> if it's a link; if href is empty, let it be. */
a:link { a:link {
color: #fe8; color: #fe8;

11
assets/css/main.css
View file

@ -215,6 +215,17 @@ a:focus,
outline: 3px solid; outline: 3px solid;
} }
.skip {
position: absolute;
top: -2em;
left: .25em;
color: #00e;
background-color: #fff;
}
.skip:focus {
top: .5em;
}
/* Todo: /* Todo:
* - Some browsers don't scale SVGs properly; the img container * - Some browsers don't scale SVGs properly; the img container
* dimensions crop the image rather than scale it. Investigate * dimensions crop the image rather than scale it. Investigate

1
layouts/partials/header.html
View file

@ -1,3 +1,4 @@
<a href="#content" class="skip">Skip to content</a>
<header id="banner" itemscope itemtype="https://schema.org/WPHeader"> <header id="banner" itemscope itemtype="https://schema.org/WPHeader">
<nav aria-label="Main navigation"> <nav aria-label="Main navigation">
<ul class="unstyled-list"> <ul class="unstyled-list">