lytedev/site.lyte.dev
1
0
Fork 0
Code Issues Pull requests 1 Releases Wiki Activity

Accessibility fixes and system color scheme #1

Open
lytedev wants to merge 1 commit from df/accessibility-and-system-color-scheme into master
pull from: df/accessibility-and-system-color-scheme
merge into: lytedev:master
Conversation 0 Commits 1 Files changed 4 +19 -34
4 changed files with 19 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
layouts/_default/baseof.html
View file

@ -15,7 +15,7 @@
<header>
<a href="#start-of-content" class="hide-unless-focused">Skip to Content</a>
<section>
<a href="/" aria-label="index link" id="logo">
<a href="/" aria-label="index link" id="logo" title="go to site index">
{{ partial "logo.svg.html" . }}
</a>
<a href="/">
@ -25,18 +25,18 @@
<section>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ $active := or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
{{ $active = or $active (eq .Name $currentPage.Title) }}
{{ $active = or $active (and (eq .Name "Blog") (eq $currentPage.Section "post")) }}
{{ $active = or $active (and (eq .Name "Tags") (eq $currentPage.Section "tags")) }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ $active := or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
{{ $active = or $active (eq .Name $currentPage.Title) }}
{{ $active = or $active (and (eq .Name "Blog") (eq $currentPage.Section "post")) }}
{{ $active = or $active (and (eq .Name "Tags") (eq $currentPage.Section "tags")) }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</section>
<section style="position:absolute;height:100%;right:0">
<button class="no-bg theme-toggler js-only centerize" aria-label="toggle dark theme">
<section style="position:absolute;height:100%;right:0" aria-hidden="true">
<button class="no-bg theme-toggler js-only centerize" aria-label="toggle dark theme" title="toggle dark theme">
{{ partial "theme-toggle.html" . }}
</button>
<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle text alignment">
<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle text alignment" title="toggle text alignment">
{{ partial "align-toggle.html" . }}
</button>
</section>

4
src/stylus/core.styl
View file

@ -221,7 +221,7 @@ ul.horizontal-blocks
flex-grow 1
display flex
padding 0.5em 2em
background-color rgba(255, 255, 255, 0.05)
background-color var(--header-bg)
text-align center
justify-content center
align-items center
@ -229,5 +229,5 @@ ul.horizontal-blocks
white-space nowrap
&:hover
background-color rgba(255, 255, 255, 0.1)
background-color var(--header-hover-bg)

4
src/stylus/theme.styl
View file

@ -101,3 +101,7 @@ body.dark-theme .hide-in-dark-theme { display: none }
body.dark-theme .hide-in-light-theme { display: inherit }
body.light-theme .hide-in-dark-theme { display: inherit }
body.light-theme .hide-in-light-theme { display: none }
@media (prefers-reduced-motion: no-preference) {
* { transition: background-color 0.2s ease, color 0.2s ease }
}

27
static/global.js
View file

@ -1,27 +1,11 @@
const body = document.body
const queryAll = sel => document.querySelectorAll(sel)
const initTheme = () => {
const curTheme = localStorage.getItem('theme')
const oldTheme = curTheme == 'dark' ? 'light' : 'dark'
body.classList.add(`${curTheme}-theme`)
body.classList.remove(`${oldTheme}-theme`)
const resetTheme = () => {
body.classList.remove('dark-theme', 'light-theme')
}
if (localStorage.getItem('theme') === null) {
localStorage.setItem('theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
}
initTheme()
const toggleTheme = ev => {
localStorage.setItem('theme', localStorage.getItem('theme') == 'dark' ? 'light' : 'dark')
initTheme()
if (!!ev.target) ev.preventDefault()
return false
}
queryAll('.theme-toggler').forEach(a => a.addEventListener('click', toggleTheme))
queryAll('.theme-toggler').forEach(a => a.addEventListener('click', () => console.log('yo')))
queryAll('.js-only').forEach(a => a.classList.remove('js-only'))
queryAll('.js-disabled-only').forEach(a => a.remove())
@ -39,18 +23,15 @@ initAlign()
const toggleAlign = ev => {
localStorage.setItem('align', localStorage.getItem('align') == 'center' ? 'left' : 'center')
initAlign()
if (!!ev.target) ev.preventDefault()
if (ev.target) ev.preventDefault()
return false
}
queryAll('.align-toggler').forEach(a => a.addEventListener('click', toggleAlign))
window.addEventListener('load', _ev => {
console.log('loaded')
const selector = [1, 2, 3, 4, 5, 6].map(n => `h${n}[id]`).join(',')
console.log(selector)
queryAll(selector).forEach(el => {
console.log(el)
const anchorLink = document.createElement('a')
anchorLink.classList.add('anchor-link')
anchorLink.textContent = '§'