cupcakearmy/liquet
1
0
Fork 0
mirror of https://github.com/cupcakearmy/liquet.git synced 2024-10-31 23:54:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

focus arrow keys for scrolling

Browse Source
This commit is contained in:
cupcakearmy 2019-09-06 22:45:56 +02:00
parent 9324a3905a
commit 6f94029999
4 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
liquet/index.php
View File

@ -6,7 +6,7 @@ get_header();
$tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] ); $tags = get_tags( [ 'orderby' => 'count', 'order' => 'desc' ] );
?> ?>
<div id="home"> <div id="home" data-focusme>
<a id="lights" href="javascript:void(0);" onclick="window.toggleLights();"> <a id="lights" href="javascript:void(0);" onclick="window.toggleLights();">
<img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/> <img src="<?= get_template_directory_uri() . '/vendor/icons/contrast.svg' ?>" alt="lights"/>
</a> </a>

8
liquet/js/lights.js → liquet/js/main.js
View File

@ -1,4 +1,5 @@
;((window) => { ;((window) => {
// Lights
const key = 'nicco.io:blog:lights' const key = 'nicco.io:blog:lights'
const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} ' const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} '
const style = window.document.createElement('style') const style = window.document.createElement('style')
@ -19,4 +20,11 @@
if (isDark()) off() if (isDark()) off()
window.toggleLights = () => isDark() ? on() : off() window.toggleLights = () => isDark() ? on() : off()
// Focus scrolling
document.addEventListener('DOMContentLoaded', ()=> {
const toFocus = document.querySelector('[data-focusme]')
toFocus.tabIndex = '1'
toFocus.focus({preventScroll: true})
})
})(window) })(window)

2
liquet/singular.php
View File

@ -43,7 +43,7 @@ $dates = getDates();
<div class="alt-font">previous</div> <div class="alt-font">previous</div>
</a> </a>
<div class="flex item grow" id="main"> <div class="flex item grow" id="main" data-focusme>
<div class="flex container vertical middle"> <div class="flex container vertical middle">
<!-- Title --> <!-- Title -->

4
liquet/style.css
View File

@ -25,6 +25,10 @@ Theme URI: https://github.com/cupcakearmy/liquet
scroll-behavior: smooth; scroll-behavior: smooth;
} }
*[tabindex]:focus {
outline: none;
}
html, body { html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;