mirror of
https://github.com/loikein/hugo-tufte.git
synced 2024-12-23 05:54:47 +01:00
try to unify css; experimental accessibility feature for margin/side note
This commit is contained in:
loikein
parent
a1b9b7dcbd
commit
443634c2f6
5 changed files with 185 additions and 25 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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 }}">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue