mirror of
https://github.com/alex-shpak/hugo-book.git
synced 2024-11-25 04:43:04 +00:00
Improve accessibility and keyboard navigation
This commit is contained in:
Alex Shpak
parent
f416a71bf8
commit
bf93dafdfa
@ -38,6 +38,10 @@ img {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
:focus {
|
||||
@include outline;
|
||||
}
|
||||
|
||||
aside nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -98,7 +102,6 @@ ul.pagination {
|
||||
nav {
|
||||
width: $menu-width;
|
||||
padding: $padding-16;
|
||||
z-index: 1;
|
||||
background: $body-background;
|
||||
|
||||
@include fixed;
|
||||
@ -195,10 +198,8 @@ ul.pagination {
|
||||
@include spin(1s);
|
||||
}
|
||||
|
||||
#book-search-results {
|
||||
small {
|
||||
opacity: .5;
|
||||
}
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@ -279,7 +280,7 @@ ul.pagination {
|
||||
|
||||
li.active img,
|
||||
li:hover img {
|
||||
opacity: 1;
|
||||
opacity: initial;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -304,10 +305,16 @@ aside nav,
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-breakpoint) {
|
||||
#menu-control,
|
||||
#toc-control {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.book-menu {
|
||||
visibility: hidden;
|
||||
margin-inline-start: -$menu-width;
|
||||
font-size: $font-size-base;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.book-toc {
|
||||
@ -318,7 +325,11 @@ aside nav,
|
||||
display: block;
|
||||
}
|
||||
|
||||
#menu-control:checked + main {
|
||||
#menu-control:focus ~ main label[for="menu-control"] {
|
||||
@include outline;
|
||||
}
|
||||
|
||||
#menu-control:checked ~ main {
|
||||
.book-menu {
|
||||
visibility: initial;
|
||||
}
|
||||
@ -342,16 +353,22 @@ aside nav,
|
||||
}
|
||||
}
|
||||
|
||||
#toc-control:focus ~ main label[for="toc-control"] {
|
||||
@include outline;
|
||||
}
|
||||
|
||||
#toc-control:checked ~ main {
|
||||
.book-header aside {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
//for RTL support
|
||||
body[dir="rtl"] #menu-control:checked + main {
|
||||
.book-menu nav {
|
||||
transform: translateX(-$menu-width);
|
||||
}
|
||||
}
|
||||
|
||||
#toc-control:checked + aside {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra space for big screens
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
a.anchor {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
font-size: .75em;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover a.anchor {
|
||||
display: initial;
|
||||
&:hover a.anchor, a.anchor:focus {
|
||||
opacity: initial;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -59,6 +59,9 @@
|
||||
input[type="radio"]:checked + label + .book-tabs-content {
|
||||
display: block;
|
||||
}
|
||||
input[type="radio"]:focus + label {
|
||||
@include outline
|
||||
}
|
||||
}
|
||||
|
||||
// {{< columns >}}
|
||||
|
||||
@ -54,6 +54,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
input.toggle {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: table;
|
||||
@ -76,3 +84,9 @@
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@mixin outline {
|
||||
outline-style: auto;
|
||||
outline-color: currentColor;
|
||||
outline-color: -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# hugo server --minify --themesDir ... --baseURL=http://0.0.0.0:1313/theme/hugo-book/
|
||||
|
||||
baseURL = 'https://example.com/'
|
||||
title = 'Hugo Book'
|
||||
title = 'Hugo Book having long site title'
|
||||
theme = 'hugo-book'
|
||||
|
||||
# Book configuration
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
{"Target":"book.min.f11f00e4d2659e7749c679f7a29960dab5462bcb609a767e0f2ea963159b9024.css","MediaType":"text/css","Data":{"Integrity":"sha256-8R8A5NJlnndJxnn3oplg2rVGK8tgmnZ+Dy6pYxWbkCQ="}}
|
||||
{"Target":"book.min.6cd8553a6854f4812343f0f0c8baca31271e686434f381fbe3c7226f66639176.css","MediaType":"text/css","Data":{"Integrity":"sha256-bNhVOmhU9IEjQ/DwyLrKMSceaGQ084H748cib2ZjkXY="}}
|
||||
@ -7,7 +7,8 @@
|
||||
</head>
|
||||
|
||||
<body dir={{ .Site.Language.LanguageDirection }}>
|
||||
<input type="checkbox" class="hidden" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="menu-control" />
|
||||
<input type="checkbox" class="hidden toggle" id="toc-control" />
|
||||
<main class="container flex">
|
||||
<aside class="book-menu">
|
||||
{{ template "menu" . }} <!-- Left menu Content -->
|
||||
@ -52,7 +53,6 @@
|
||||
{{ partial "docs/header" . }}
|
||||
|
||||
{{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
|
||||
<input type="checkbox" class="hidden" id="toc-control" />
|
||||
<aside class="hidden clearfix">
|
||||
{{ template "toc" . }}
|
||||
</aside>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<div class="book-tabs">
|
||||
{{- range $index, $tab := .Scratch.Get $group -}}
|
||||
<input type="radio" class="hidden" name="{{ $group }}" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
|
||||
<input type="radio" class="toggle" name="{{ $group }}" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
|
||||
<label for="{{ printf "%s-%d" $group $index }}">
|
||||
{{- $tab.Name -}}
|
||||
</label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user