mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-27 14:12: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) {
|
@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;
|
||||||
|
|
|
@ -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,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">
|
||||||
|
|
Loading…
Reference in a new issue