From a881ce922f4963019cbd77b0967b54795e914e00 Mon Sep 17 00:00:00 2001 From: loikein Date: Fri, 14 Apr 2023 23:34:42 +0100 Subject: [PATCH] address https://github.com/loikein/hugo-tufte/issues/2 --- assets/scss/general.scss | 6 +-- assets/scss/vendor/tufte.scss | 61 ++++++--------------------- layouts/partials/header.includes.html | 4 +- layouts/shortcodes/marginnote.html | 4 +- layouts/shortcodes/sidenote.html | 14 ++++-- 5 files changed, 29 insertions(+), 60 deletions(-) diff --git a/assets/scss/general.scss b/assets/scss/general.scss index f35e432..9ac20fe 100644 --- a/assets/scss/general.scss +++ b/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; } diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss index 6e2bf11..9a06867 100644 --- a/assets/scss/vendor/tufte.scss +++ b/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; -} - -.sidenote-number:after, -.sidenote:before { - content: counter(sidenote-counter) " "; - font-family: et-book-roman-old-style; + // font-family: et-book-roman-old-style, "Noto Emoji"; position: relative; vertical-align: baseline; + user-select: none; } -.sidenote-number:after { - content: counter(sidenote-counter); +// note indicator +label.marginnote-ind, +label.sidenote-number { font-size: 1rem; top: -0.5rem; left: 0.1rem; } -.sidenote:before { - content: counter(sidenote-counter) " "; - top: -0.5rem; +// inside sidenote +span.marginnote-ind, +span.sidenote-number { + font-size: 1.1rem; } p, diff --git a/layouts/partials/header.includes.html b/layouts/partials/header.includes.html index 9d64511..34d5ab0 100644 --- a/layouts/partials/header.includes.html +++ b/layouts/partials/header.includes.html @@ -11,9 +11,9 @@ + href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Noto+Emoji&display=swap" />