address https://github.com/loikein/hugo-tufte/issues/2

assets/scss/general.scss

@@ -4,8 +4,6 @@
 /* accomodate a blog-like site. */
 /* ------------------------------------------------------------------------ */
 
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@351&display=swap");
-
 /* When setting the primary font stack, apply it to the Pure grid units along */
 /* with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use */
 /* specific font stacks to ensure the greatest OS/browser compatibility. */
@@ -21,7 +19,7 @@ article,
 header,
 footer,
 .pure-g [class*="pure-u"] {
-    font-family: et-book, "Noto Serif SC", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
+    font-family: et-book, "Noto Serif SC", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif, "Noto Emoji";
 }
 
 p {
@@ -29,7 +27,7 @@ p {
 }
 
 code {
-    font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-family: Menlo, Meslo, Courier, monospace;
     font-size: 1.125rem;
     line-height: 1.6;
 }

assets/scss/vendor/tufte.scss

@@ -64,11 +64,11 @@ body {
     margin-left: auto;
     margin-right: auto;
     padding-left: 12.5%;
-    font-family: et-book, "Noto Serif SC", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
+    font-family: et-book, "Noto Serif SC", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif, "Noto Emoji";
     background-color: #fffff8;
     color: #111;
     max-width: 1400px;
-    counter-reset: sidenote-counter;
+    counter-reset: sidenote;
 }
 
 h1 {
@@ -227,41 +227,6 @@ a:visited {
     color: inherit;
 }
 
-a:link {
-    text-decoration: none;
-    background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8),
-        -webkit-linear-gradient(#333, #333);
-    background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333);
-    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
-    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
-    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
-    background-repeat: no-repeat, no-repeat, repeat-x;
-    text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8,
-        -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8,
-        -0.15em 0 #fffff8;
-    background-position: 0% 93%, 100% 93%, 0% 93%;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-    a:link {
-        background-position-y: 87%, 87%, 87%;
-    }
-}
-
-a:link::selection {
-    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe,
-        -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe,
-        -0.15em 0 #b4d5fe;
-    background: #b4d5fe;
-}
-
-a:link::-moz-selection {
-    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe,
-        -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe,
-        -0.15em 0 #b4d5fe;
-    background: #b4d5fe;
-}
-
 /* Sidenotes, margin notes, figures, captions */
 img {
     max-width: 100%;
@@ -292,28 +257,26 @@ img {
     line-height: 1.6;
 }
 
+.marginnote-ind,
 .sidenote-number {
-    counter-increment: sidenote-counter;
+    // font-family: et-book-roman-old-style, "Noto Emoji";
-}
-
-.sidenote-number:after,
-.sidenote:before {
-    content: counter(sidenote-counter) " ";
-    font-family: et-book-roman-old-style;
     position: relative;
     vertical-align: baseline;
+    user-select: none;
 }
 
-.sidenote-number:after {
+// note indicator
-    content: counter(sidenote-counter);
+label.marginnote-ind,
+label.sidenote-number {
     font-size: 1rem;
     top: -0.5rem;
     left: 0.1rem;
 }
 
-.sidenote:before {
+// inside sidenote
-    content: counter(sidenote-counter) " ";
+span.marginnote-ind,
-    top: -0.5rem;
+span.sidenote-number {
+    font-size: 1.1rem;
 }
 
 p,

layouts/partials/header.includes.html

@@ -11,9 +11,9 @@
 <!-- https://csswizardry.com/2020/05/the-fastest-google-fonts/#google-fonts-async-snippet -->
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link rel="preload" as="style"
-      href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap" />
+      href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Noto+Emoji&display=swap" />
 <link rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap"
+      href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Noto+Emoji&display=swap"
       media="print" onload="this.media='all'" />
 <noscript>
 <link rel="stylesheet"

layouts/shortcodes/marginnote.html

@@ -1,4 +1,4 @@
 {{ $marginnoteDomIdSuffix := .Ordinal }}
-<label for="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle">&#8853;</label>
+<label for="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle marginnote-ind">&#128172;</label>
 <input type="checkbox" id="marginnote-{{.Page.File.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle"/>
-<span class="marginnote">{{ .Inner | markdownify}}</span>
+<span class="marginnote"><span class="marginnote-ind">&#128172;</span> {{ .Inner | markdownify}}</span>

layouts/shortcodes/sidenote.html

@@ -1,3 +1,11 @@
-{{ $sidenoteDomIdSuffix := .Ordinal }}<label for="sidenote-{{.Page.File.UniqueID}}-{{ $sidenoteDomIdSuffix }}" class="margin-toggle sidenote-number"></label>
+{{- with $.Page.Scratch.Get "sidenoteCounter" -}}
-<input type="checkbox" id="sidenote-{{.Page.File.UniqueID}}-{{ $sidenoteDomIdSuffix }}" class="margin-toggle"/>
+{{- $.Page.Scratch.Set "sidenoteCounter" (add . 1) -}}
-<span class="sidenote">{{ .Inner | markdownify }}</span>
+{{- else -}}
+{{- $.Page.Scratch.Set "sidenoteCounter" 1 -}}
+{{- end -}}
+{{ $sidenoteDomIdSuffix := $.Page.Scratch.Get "sidenoteCounter" }}
+<label for="sidenote-{{ $sidenoteDomIdSuffix }}" class="margin-toggle sidenote-number">({{ $sidenoteDomIdSuffix }})</label>
+<input type="checkbox" id="sidenote-{{ $sidenoteDomIdSuffix }}" class="margin-toggle"/>
+<span class="sidenote">
+<span class="sidenote-number">({{ $sidenoteDomIdSuffix }})</span> {{ .Inner | markdownify }}
+</span>