mirror of
https://github.com/loikein/hugo-tufte.git
synced 2025-08-31 20:52:45 +02:00
try to unify css; experimental accessibility feature for margin/side note
This commit is contained in:
parent
a1b9b7dcbd
commit
443634c2f6
5 changed files with 185 additions and 25 deletions
assets/scss/vendor
28
assets/scss/vendor/tufte.scss
vendored
28
assets/scss/vendor/tufte.scss
vendored
|
@ -361,20 +361,39 @@ span.newthought {
|
|||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.margin-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// accessibility feature: make label focus-able
|
||||
input.margin-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
label:has(+ input.margin-toggle:focus) {
|
||||
outline: medium auto currentColor;
|
||||
outline: medium auto invert;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
label.sidenote-number {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
label.margin-toggle:not(.sidenote-number) {
|
||||
label.marginnote-ind {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
label.margin-toggle:not(.sidenote-number) {
|
||||
label.marginnote-ind {
|
||||
display: inline;
|
||||
}
|
||||
.sidenote,
|
||||
|
@ -392,9 +411,6 @@ label.margin-toggle:not(.sidenote-number) {
|
|||
vertical-align: baseline;
|
||||
position: relative;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
pre.code {
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue