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
parent a1b9b7dcbd
commit 443634c2f6
5 changed files with 185 additions and 25 deletions

View file

@ -7,6 +7,27 @@
/* ------------------------------------------------------------------------ */
/* Generic content, such as the index list pages */
/* ------------------------------------------------------------------------ */
:root * {
text-align: left;
text-rendering: optimizeLegibility;
}
:focus {
outline: medium auto currentColor;
outline: medium auto invert;
outline: 5px auto -webkit-focus-ring-color;
}
a.heading-anchor {
display: none;
visibility: collapse;
}
h2:hover > a.heading-anchor,
h3:hover > a.heading-anchor {
display: inline;
visibility: visible;
}
hr {
margin-left: 0;
@ -15,18 +36,6 @@ hr {
border-color: rgba(250,250,250,0.25);
}
/* Content Title styling. This is mostly to avoid underlying links. */
h1.content-title {
/*max-width: 50rem;*/
font-size: 4rem;
}
h1.content-title a:link,
h1.content-title a:visited {
background: transparent;
text-decoration: none;
color: inherit;
}
/* ------------------------------------------------------------------------ */
/* Styling for listing pages. */
/* ------------------------------------------------------------------------ */
@ -76,3 +85,140 @@ table.lntable {
border-spacing: 0;
padding: 0;
}
/* ------------------------------------------------------------------------ */
/* Styling for maths. */
/* ------------------------------------------------------------------------ */
/* mjx-container[jax="CHTML"][display="true"]::-webkit-scrollbar,
.katex-display::-webkit-scrollbar {
display: none;
}*/
mjx-container[jax="CHTML"][display="true"],
.katex-display {
overflow: auto;
overflow-y: hidden;
/* -ms-overflow-style: none;
scrollbar-width: none; */
}
/* ------------------------------------------------------------------------ */
/* Styling for margin/side notes. */
/* ------------------------------------------------------------------------ */
.marginnote .marginnote-ind,
.sidenote .sidenote-number {
margin-right: 5px;
}
/* prevent over-crowding */
.sidenote, .marginnote {
margin-bottom: 1rem;
}
.sidenote code,
.marginnote code {
font-size: 0.9rem;
}
/* ------------------------------------------------------------------------ */
/* Styling & fixes for cols. */
/* ------------------------------------------------------------------------ */
// create grid
.row {
/* mobile */
display: grid;
width: 75%;
gap: 0.3rem;
margin: 0 0 1rem 0;
}
.row .column:nth-of-type(2n) {
margin-left: 1rem;
}
.row .column:nth-of-type(3n) {
margin-left: 2rem;
}
.row .column > p:last-child {
margin-bottom: 0;
}
@media (min-width: 760px) {
/* desktop */
/* https://stackoverflow.com/a/62086985 */
.row {
grid-auto-columns: 1fr;
grid-auto-flow: column;
/* above 2 lines are equivalent as below 1 line */
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
gap: 1.3rem;
margin: 0 0 1rem 0;
}
.row .column {
margin-left: 0;
}
}
.column > p {
width: 100%;
}
.column > p > label.margin-toggle.marginnote-ind {
display: inline;
}
.column > p > .sidenote,
.column > p > .marginnote {
display: none;
}
.column > p > .margin-toggle:checked + .sidenote,
.column > p > .margin-toggle:checked + .marginnote {
display: block;
float: left;
left: 1rem;
clear: both;
width: 95%;
margin: 1rem 2.5%;
vertical-align: baseline;
position: relative;
}
/* ------------------------------------------------------------------------ */
/* Styling for buttons. */
/* ------------------------------------------------------------------------ */
.btn {
display: inline-block;
margin-top: 1.4rem;
}
.btn button {
font-size: 1.4rem;
}
.btn button .icon {
font-size: 1.2rem;
}
/* ------------------------------------------------------------------------ */
/* Styling for i18n. */
/* ------------------------------------------------------------------------ */
/* reduce zh & ja font-size to match en */
p:lang(zh),
p:lang(ja) {
font-size: 1.2rem;
}
.sidenote:lang(zh),
.marginnote:lang(zh) {
font-size: 0.5rem;
}
.sidenote:lang(ja),
.marginnote:lang(ja) {
font-size: 0.9rem;
}

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;

View file

@ -5,13 +5,11 @@
*/}}
{{ define "main" }}
<div id="layout" class="pure-g">
<article class="pure-u-1">
<article id="main">
{{ partial "content.header.html" . }}
{{ partial "toc.html" . }}
<section>{{ .Content }}</section>
<section>{{ partial "footer.html" . }}</section>
<section>{{ partial "nav.html" . }}</section>
</article>
</div>
{{ end }}

View file

@ -27,4 +27,4 @@
{{ $htstyle := resources.Get "scss/hugo-tufte.scss"| resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS $htoptions }}
<link rel="stylesheet" href="{{ $htstyle.Permalink | relURL }}">
<link rel="stylesheet" href="{{ "/css/hugo-tufte-override.css" | relURL }}">
<link rel="stylesheet" href="{{ "/css/hugo-tufte-override.css" | relURL }}">

View file

@ -33,18 +33,18 @@
{{- $icon = trim $icon " " }}
{{- $iconposition := .iconposition | default "left" }}
{{- with $context }}
<span class="btn cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
<span class="btn {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
{{- if $isButton }}
<button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}>
{{- else }}
<a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }}>
{{- end }}
{{- if and $icon (eq $iconposition "left") }}
{{ $icon }}
<span class="icon">{{ $icon }}</span>
{{- end }}
{{ $title | safeHTML }}
{{- if and $icon (eq $iconposition "right") }}
{{ $icon }}
<span class="icon">{{ $icon }}</span>
{{- end }}
{{- if $isButton }}
</button>