try to unify css; experimental accessibility feature for margin/side note

This commit is contained in:
loikein 2023-04-15 15:32:38 +01:00
commit 443634c2f6
5 changed files with 185 additions and 25 deletions
assets/scss/vendor

View file

@ -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;