This commit is contained in:
loikein 2023-04-14 23:34:42 +01:00
parent e6d583a987
commit a881ce922f
5 changed files with 29 additions and 60 deletions

View file

@ -4,8 +4,6 @@
/* accomodate a blog-like site. */ /* 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 */ /* When setting the primary font stack, apply it to the Pure grid units along */
/* with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use */ /* with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use */
/* specific font stacks to ensure the greatest OS/browser compatibility. */ /* specific font stacks to ensure the greatest OS/browser compatibility. */
@ -21,7 +19,7 @@ article,
header, header,
footer, footer,
.pure-g [class*="pure-u"] { .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 { p {
@ -29,7 +27,7 @@ p {
} }
code { code {
font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-family: Menlo, Meslo, Courier, monospace;
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.6; line-height: 1.6;
} }

View file

@ -64,11 +64,11 @@ body {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: 12.5%; 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; background-color: #fffff8;
color: #111; color: #111;
max-width: 1400px; max-width: 1400px;
counter-reset: sidenote-counter; counter-reset: sidenote;
} }
h1 { h1 {
@ -227,41 +227,6 @@ a:visited {
color: inherit; 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 */ /* Sidenotes, margin notes, figures, captions */
img { img {
max-width: 100%; max-width: 100%;
@ -292,28 +257,26 @@ img {
line-height: 1.6; line-height: 1.6;
} }
.marginnote-ind,
.sidenote-number { .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; position: relative;
vertical-align: baseline; vertical-align: baseline;
user-select: none;
} }
.sidenote-number:after { // note indicator
content: counter(sidenote-counter); label.marginnote-ind,
label.sidenote-number {
font-size: 1rem; font-size: 1rem;
top: -0.5rem; top: -0.5rem;
left: 0.1rem; 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, p,

View file

@ -11,9 +11,9 @@
<!-- https://csswizardry.com/2020/05/the-fastest-google-fonts/#google-fonts-async-snippet --> <!-- https://csswizardry.com/2020/05/the-fastest-google-fonts/#google-fonts-async-snippet -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" <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" <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'" /> media="print" onload="this.media='all'" />
<noscript> <noscript>
<link rel="stylesheet" <link rel="stylesheet"

View file

@ -1,4 +1,4 @@
{{ $marginnoteDomIdSuffix := .Ordinal }} {{ $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"/> <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>

View file

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