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

assets/scss/general.scss

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

assets/scss/vendor/tufte.scss

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

layouts/_default/single.html

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

layouts/partials/header.includes.html

@@ -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 }}">

layouts/partials/shortcodes/button.html

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