mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
Add skip link
Should now be full wcag AA with some AAA.
This commit is contained in:
parent
7726d8341e
commit
00da18b36e
3 changed files with 20 additions and 4 deletions
|
@ -1,12 +1,16 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
/* I've been told that pure white on black is a bit harsh */
|
||||
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;
|
||||
}
|
||||
|
||||
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. */
|
||||
a:link {
|
||||
color: #fe8;
|
||||
|
|
|
@ -215,6 +215,17 @@ a:focus,
|
|||
outline: 3px solid;
|
||||
}
|
||||
|
||||
.skip {
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: .25em;
|
||||
color: #00e;
|
||||
background-color: #fff;
|
||||
}
|
||||
.skip:focus {
|
||||
top: .5em;
|
||||
}
|
||||
|
||||
/* Todo:
|
||||
* - Some browsers don't scale SVGs properly; the img container
|
||||
* dimensions crop the image rather than scale it. Investigate
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
<a href="#content" class="skip">Skip to content</a>
|
||||
<header id="banner" itemscope itemtype="https://schema.org/WPHeader">
|
||||
<nav aria-label="Main navigation">
|
||||
<ul class="unstyled-list">
|
||||
|
|
Loading…
Reference in a new issue