aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/default-fast.css5
-rw-r--r--assets/css/default-mathml.css26
-rw-r--r--assets/css/default-simple.css79
-rw-r--r--assets/css/default-syntax.css (renamed from assets/css/syntax-highlight-default.css)83
-rw-r--r--assets/css/default.css1492
-rw-r--r--assets/data/media/logo.pngbin170667 -> 9839 bytes
-rw-r--r--assets/js/index.js1200
-rw-r--r--assets/templates/markdown-feed.yaml17
8 files changed, 1896 insertions, 1006 deletions
diff --git a/assets/css/default-fast.css b/assets/css/default-fast.css
new file mode 100644
index 0000000..8d9d4d1
--- /dev/null
+++ b/assets/css/default-fast.css
@@ -0,0 +1,5 @@
+@keyframes paint {
+ 0% {
+ opacity: 1;
+ }
+}
diff --git a/assets/css/default-mathml.css b/assets/css/default-mathml.css
new file mode 100644
index 0000000..4aa437a
--- /dev/null
+++ b/assets/css/default-mathml.css
@@ -0,0 +1,26 @@
+@namespace mathml url(http://www.w3.org/1998/Math/MathML);
+
+mathml|math {
+ display: block;
+ display: block math;
+}
+
+mathml|mtd {
+ display: flex;
+ justify-content: center;
+ padding-right: 0.4em;
+ padding-left: 0.4em;
+ padding-bottom: 0.5rem;
+ padding-top: 0.5rem;
+}
+
+@-moz-document url-prefix() {
+ mathml|mtd {
+ display: flex;
+ justify-content: center;
+ padding-right: 0.4em;
+ padding-left: 0.4em;
+ padding-bottom: 0.5ex;
+ padding-top: 0.5ex;
+ }
+}
diff --git a/assets/css/default-simple.css b/assets/css/default-simple.css
new file mode 100644
index 0000000..29f7c0d
--- /dev/null
+++ b/assets/css/default-simple.css
@@ -0,0 +1,79 @@
+column-base[position="left"],
+column-base[position="right"] {
+ opacity: 0.1;
+ transition: 2s;
+}
+
+column-base[position="left"]:hover,
+column-base[position="right"]:hover {
+ opacity: 0.9;
+ transition: 0.1s;
+}
+
+micro-card[id] > header,
+micro-card[id] article math-ml figcaption {
+ display: block;
+}
+
+micro-card[id] {
+ flex-direction: row;
+ padding: 1.25rem 1rem;
+}
+
+micro-card[id] > article {
+ margin: auto 0;
+ min-width: 0;
+}
+
+micro-card[id] > article > * {
+ width: 100%;
+}
+
+micro-card[id] > article > :nth-last-child(2) {
+ margin-bottom: 0;
+}
+
+micro-card[id] micro-tags,
+micro-card[id] > header meta-data,
+micro-card[id] > article figcaption,
+[data-kind="page"] micro-card[id]:first-child > a {
+ display: none;
+}
+
+micro-card[id]
+ > article
+ footer:not(blockquote footer):not(code-block + footer) {
+ display: none;
+}
+
+micro-card[id] > a {
+ display: inline;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: 1;
+}
+
+micro-card[id] > a:focus {
+ background-color: transparent !important;
+ outline-offset: -0.15rem !important;
+}
+
+micro-card[id] article p,
+micro-card[id] article ul,
+micro-card[id] article dl,
+micro-card[id] article h1,
+micro-card[id] article h2,
+micro-card[id] article h3,
+micro-card[id] article video,
+micro-card[id] article iframe,
+micro-card[id] article article,
+micro-card[id] article details,
+micro-card[id] article figcaption,
+micro-card[id] header picture {
+ pointer-events: all;
+ position: relative;
+ z-index: 2;
+}
diff --git a/assets/css/syntax-highlight-default.css b/assets/css/default-syntax.css
index 1552e5f..e6f7021 100644
--- a/assets/css/syntax-highlight-default.css
+++ b/assets/css/default-syntax.css
@@ -1,29 +1,52 @@
-/* ----- Colors ----- */
-
/* ----- Format ----- */
.chroma .hl {
- display: flex;
padding: 0 0.5rem;
margin: 0 -0.5rem;
}
+.chroma .line {
+ display: block;
+}
+
+.chroma .hl > .cl:before,
+.chroma .ln a:hover:before,
+.chroma .ln:target a:before,
+.chroma .line > .cl:hover:before {
+ content: "";
+ position: absolute;
+ height: 1.5rem;
+ width: 100%;
+ left: 0;
+ z-index: -1;
+}
+
.chroma .ln a {
- background-color: #edf2f7;
- padding: 0.2rem 0.75rem;
+ padding: 0.05rem 0.75rem;
margin: 0 1rem 0 -0.75rem;
user-select: none;
text-decoration: none;
+ display: inline-block;
}
-.chroma .ln a:hover {
+.chroma .ln a:hover,
+.chroma .ln:target a {
outline: 0.15rem solid !important;
outline-offset: -0.3rem;
}
-.chroma .line:hover {
+.chroma .line .cl:hover {
+ text-shadow: 0 0 currentColor;
+}
+
+.chroma .ln a:hover:before,
+.chroma .ln:target a:before,
+.chroma .line > .cl:hover:before {
background-color: #f2f2f2;
- display: flex;
+}
+
+code-block code {
+ position: relative;
}
code-block button {
@@ -38,31 +61,29 @@ code-block header language-label a:hover {
/* ------ Tokens ------ */
:root {
- --code-chroma-background: #ffffff;
- --code-chroma-foreground: #333333;
- --code-chroma-error-background: #960050;
- --code-chroma-error-foreground: #960050;
- --code-chroma-label-background: #006894;
- --code-chroma-label-foreground: #e6e6e6;
- --code-chroma-line-highlight: #d9ddf2;
- --code-chroma-line-number: #375462;
- --code-chroma-line: var(--code-chroma-foreground);
-}
-
-/* ChromaForeground */ code-block, .chroma, .highlight { color: #333333; color: var(--code-chroma-foreground); }
-/* ChromaBackground */ code-block button, .chroma { background-color: #ffffff; background-color: var(--code-chroma-background); }
-/* ChromaErrorBackground */ .chroma .err { color: #960050; color: var(--code-chroma-error-background); }
-/* ChromaErrorForeground */ .chroma .err { color: #960050; color: var(--code-chroma-error-foreground); }
-/* ChromaLabelBackground */ .chroma code:before { background-color: #006894; background-color: var(--code-chroma-label-background); }
-/* ChromaLabelForeground */ .chroma code:before { color: #e6e6e6; color: var(--code-chroma-label-foreground); }
-/* ChromaLine */ .chroma .line { color: #333333; color: var(--code-chroma-line); }
-/* ChromaLineHighlight */ .chroma .hl { background-color: #d9ddf2; background-color: var(--code-chroma-line-highlight); }
-/* ChromaLineNumber */ .chroma .ln a { color: #375462 !important; color: var(--code-chroma-line-number) !important; }
-
-.chroma .hl {
- background-color: #fff8c5;
+--code-chroma-background: #ffffff;
+--code-chroma-foreground: #333333;
+--code-chroma-error-background: #960050;
+--code-chroma-error-foreground: #960050;
+--code-chroma-label-background: #006894;
+--code-chroma-label-foreground: #e6e6e6;
+--code-chroma-line-highlight: #fff8c5;
+--code-chroma-line-number: #375462;
+--code-chroma-line-number-background: #edf2f7;
+--code-chroma-line: var(--code-chroma-foreground);
}
+/* ChromaForeground */ code-block, .chroma, .highlight { color: #333333; color: var(--code-chroma-foreground); }
+/* ChromaBackground */ code-block button, .chroma { background-color: #ffffff; background-color: var(--code-chroma-background); }
+/* ChromaErrorBackground */ .chroma .err { color: #960050; color: var(--code-chroma-error-background); }
+/* ChromaErrorForeground */ .chroma .err { color: #960050; color: var(--code-chroma-error-foreground); }
+/* ChromaLabelBackground */ .chroma code:before { background-color: #006894; background-color: var(--code-chroma-label-background); }
+/* ChromaLabelForeground */ .chroma code:before { color: #e6e6e6; color: var(--code-chroma-label-foreground); }
+/* ChromaLine */ .chroma .line { color: #333333; color: var(--code-chroma-line); }
+/* ChromaLineHighlight */ .chroma .hl > span:before { background-color: #fff8c5; background-color: var(--code-chroma-line-highlight); }
+/* ChromaLineNumber */ .chroma .ln a { color: #375462 !important; color: var(--code-chroma-line-number) !important; }
+/* ChromaLineNumberBackground */ .chroma .ln a { background-color: #edf2f7; background-color: var(--code-chroma-line-number-background); }
+
:root {
--code-comment: #4f4f4f;
--code-comment-hashbang: var(--code-comment);
diff --git a/assets/css/default.css b/assets/css/default.css
index f688eaf..d3d2b6f 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -20,71 +20,100 @@
text-shadow: 0 0 currentColor;
}
+@media (prefers-color-scheme: dark) {
+ ::selection {
+ color: #000;
+ background-color: #aaa;
+ text-shadow: 0 0 currentColor;
+ }
+
+ ::-webkit-selection {
+ color: #000;
+ background-color: #aaa;
+ text-shadow: 0 0 currentColor;
+ }
+
+ ::-moz-selection {
+ color: #000;
+ background-color: #aaa;
+ text-shadow: 0 0 currentColor;
+ }
+}
+
/* ----- Colors ----- */
:root {
--primary: 230;
--secondary: 258;
--accent: 217;
- --foreground: hsl(var(--primary), 99%, 5%);
- --fade: hsl(var(--primary), 35%, 30%);
- --border-lighter: hsl(var(--primary), 35%, 92%);
+ --background-bolder: hsl(var(--secondary), 99%, 98%);
+ --background: hsl(var(--secondary), 99%, 99%);
--border-darker: hsl(var(--primary), 35%, 80%);
--border-darkest: hsl(var(--primary), 35%, 70%);
- --background: hsl(var(--secondary), 99%, 99%);
- --background-bolder: hsl(var(--secondary), 99%, 98%);
- --widget-background: hsl(var(--secondary), 25%, 97%);
- --hover-background: hsl(var(--secondary), 25%, 94%);
- --focus-within-background: hsl(var(--secondary), 52%, 95%);
- --table-even-background: hsl(var(--secondary), 25%, 99%);
- --table-odd-background: hsl(var(--secondary), 25%, 97%);
- --link: hsl(var(--accent), 99%, 37%);
- --hover-background-alternate: hsl(var(--accent), 100%, 96%);
- --active-background-alternate: hsl(var(--accent), 100%, 90%);
- --button-background: #fff;
+ --border-lighter: hsl(var(--primary), 35%, 92%);
+ --button-background: hsl(var(--primary), 0%, 100%);
--danger-background-lighter: #fff5f5;
--danger-background: #fcd2cf;
--danger: #8f0000;
+ --fade: hsl(var(--primary), 35%, 30%);
+ --focus-within-background: hsl(var(--secondary), 52%, 95%);
+ --foreground: hsl(var(--primary), 99%, 5%);
+ --hover-background-alternate: hsl(var(--accent), 100%, 96%);
+ --hover-background: hsl(var(--secondary), 25%, 94%);
+ --icon-focus-background: var(--icon-hover-background);
+ --icon-hover-background: hsl(var(--accent), 100%, 90%);
+ --link: hsl(var(--accent), 99%, 37%);
--shadow: #00000060;
- --spoiler: #444;
+ --spoiler: hsl(var(--primary), 0%, 27%);
--success-background: #d5f3c4;
--success: #1d3c0c;
+ --table-even-background: hsl(var(--secondary), 25%, 99%);
+ --table-odd-background: hsl(var(--secondary), 25%, 97%);
+ --text-background: var(--background);
--warning-background: #ffe699;
--warning: #332600;
- color-scheme: light dark;
+ --widget-background: hsl(var(--secondary), 25%, 97%);
+ color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
- --active-background-alternate: #425a8a;
- --background-bolder: #0d0d0d;
- --background-rgb: 17, 17, 17;
- --background: rgba(var(--background-rgb), 1);
- --border-darker: #555;
- --border-darkest: #999;
- --border-lighter: #262626;
- --button-background: #333;
- --danger-background-lighter: #1b0404;
+ --primary: 0;
+ --secondary: 0;
+ --accent: 219;
+ --background-bolder: hsl(var(--secondary), 0%, 5%);
+ --background: hsl(var(--secondary), 0%, 7%);
+ --border-darker: hsl(var(--secondary), 0%, 33%);
+ --border-darkest: hsl(var(--secondary), 0%, 60%);
+ --border-lighter: hsl(var(--secondary), 0%, 15%);
+ --button-background: hsl(var(--secondary), 0%, 20%);
+ --danger-background-lighter: #261717;
--danger-background: #4f1c1c;
--danger: #ff9494;
- --fade: rgba(var(--foreground-rgb), 0.75);
+ --fade: hsl(var(--secondary), 0%, 66%);
--focus-within-background: #291933;
- --foreground-rgb: 221, 221, 221;
- --foreground: rgba(var(--foreground-rgb), 1);
+ --foreground: hsl(var(--secondary), 0%, 87%);
--hover-background-alternate: #1c263a;
- --hover-background: rgba(var(--foreground-rgb), 0.08);
- --link: #a3c3ff;
- --shadow: #000;
- --spoiler: #aaa;
+ --hover-background: hsl(var(--secondary), 0%, 14%);
+ --icon-focus-background: #88aefb;
+ --icon-hover-background: hsl(var(--accent), 35%, 25%);
+ --link: hsl(var(--accent), 100%, 82%);
+ --shadow: hsl(var(--secondary), 0%, 0%);
+ --spoiler: hsl(var(--secondary), 0%, 67%);
--success-background: #2d3e0f;
--success: #d5f3c4;
- --table-even-background: rgba(var(--foreground-rgb), 0.06);
- --table-odd-background: rgba(var(--foreground-rgb), 0.02);
+ --table-even-background: hsl(var(--secondary), 0%, 12%);
+ --table-odd-background: hsl(var(--secondary), 0%, 9%);
+ --text-background: hsl(var(--secondary), 0%, 17%);
--warning-background: #a89700;
--warning: #000;
- --widget-background: rgba(var(--foreground-rgb), 0.02);
+ --widget-background: hsl(var(--secondary), 0%, 9%);
+ color-scheme: dark;
}
- img {
+ kbd,
+ img,
+ video,
+ figure span {
filter: brightness(75%);
}
code-block pre,
@@ -107,38 +136,52 @@
vertical-align: inherit;
}
-:target::before {
- content: "";
- display: block;
- height: 4rem;
- margin-top: -4rem;
- visibility: hidden;
+html,
+:target:not(nav span) {
+ scroll-margin-top: 6rem;
}
-:not(#main):target micro-summary,
-:not(#main):target micro-summary:hover {
- background-color: transparent;
+sup:target [role="doc-noteref"][href^="#fn\:"],
+li:target [role="doc-backlink"][href^="#fnref\:"],
+:focus:not(html):not(body):not(svg):not(pre):not(#search) {
+ outline: 0.15rem solid;
+ outline-offset: 0.05rem;
+ text-decoration: none;
border-radius: 0.5rem;
- outline-offset: -6px;
- outline: 2px dashed #ccc;
- outline: 2px dashed var(--border-darker);
}
-:focus:not(html):not(body):not(svg) {
+sup:target [role="doc-noteref"][href^="#fn\:"],
+li:target [role="doc-backlink"][href^="#fnref\:"] {
+ outline-offset: 1px;
+}
+
+nav a:focus,
+button:focus,
+menu a:focus,
+code-block a:focus,
+gallery-images a:focus {
+ outline-offset: -0.2rem !important;
+}
+
+pre:hover,
+pre:focus,
+pre:focus-within {
outline: 0.15rem solid;
- outline-offset: -0.15rem;
text-decoration: none;
}
+sup:target [role="doc-noteref"][href^="#fn\:"],
+li:target [role="doc-backlink"][href^="#fnref\:"],
:focus:not(html):not(body):not(pre):not(svg):not(button):not(input):not(video) {
- background-color: #ffe699;
- background-color: var(--warning-background);
- color: #111;
- color: var(--warning);
+ background-color: #ffe699 !important;
+ background-color: var(--warning-background) !important;
+ color: #111 !important;
+ color: var(--warning) !important;
}
-:hover:not(a):not(s):not(img):not(summary):not(nav):not(abbr):not(form):not(code):not(mark):not(td):not(tab-bar):not(tab-bar
- nav):not(blockquote p) {
+:hover:not(a):not(s):not(span):not(img):not(summary):not(nav):not(abbr):not(
+ form
+ ):not(code):not(mark):not(td):not(nav):not(p):not(object):not(tab-bar) {
border-radius: 0.5rem;
}
@@ -168,13 +211,47 @@ h3 {
margin: 0;
}
-p,
-ul,
-dd,
-ol,
-figure,
-blockquote {
- margin: 0;
+math {
+ font-family: "CMU Serif", serif;
+ font-size: 110%;
+}
+
+micro-card[id] article h1,
+micro-card[id] article h2,
+micro-card[id] article h3 {
+ font-family: Charter, Georgia, "Book Antiqua", serif;
+ font-size: 125%;
+ font-weight: 700;
+}
+
+micro-card[id] article h2,
+micro-card[id] article h3 {
+ font-size: 115%;
+}
+
+micro-card[id] article h3 {
+ font-style: italic;
+}
+
+html,
+samp,
+blockquote span {
+ font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+ "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol";
+}
+
+pre,
+kbd,
+code,
+svg text,
+following-list details summary:after,
+micro-card article details[data-disclosure] summary:after {
+ font-size: 0.95rem;
+ font-family: "Fira Code", "Lucida Console", "Andale Mono", "Roboto Mono",
+ "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
p:not(:last-child),
@@ -184,10 +261,15 @@ dl:not(:last-child),
table:not(:last-child),
figure:not(:last-child),
code-block:not(:last-child),
-blockquote:not(:last-child) {
+blockquote:not(:last-child),
+article > mark[id]:not(:last-child) {
margin-bottom: 0.75rem;
}
+dd {
+ margin: 0;
+}
+
dl {
margin: 0 0 0 1rem;
}
@@ -209,22 +291,37 @@ figcaption {
text-align: center;
}
+sup,
+sub {
+ display: inline-block;
+ vertical-align: bottom;
+}
+
sup {
- vertical-align: super;
+ vertical-align: text-top;
font-size: 85%;
}
sub {
- vertical-align: sub;
font-size: 85%;
}
-sup,
-sub {
- display: inline-block;
+article > mark[id] {
+ display: block;
+}
+
+mark:target a {
+ color: inherit;
+ text-decoration-thickness: 2px;
}
-mark {
+mark[id] {
+ background: none;
+ color: inherit;
+}
+
+mark,
+mark:target span {
background: linear-gradient(
to bottom,
transparent 10%,
@@ -239,8 +336,7 @@ mark {
var(--warning-background) 90%,
transparent 90%
);
- color: #332600;
- color: var(--warning);
+ color: #000;
}
ins {
@@ -310,7 +406,7 @@ input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
- border-radius: 0.5rem;
+ border-radius: 25%;
border: 1px solid;
border-color: inherit;
height: 1.25rem;
@@ -325,23 +421,27 @@ input[type="checkbox"]:checked {
}
input[type="checkbox"]:checked:after {
- content: "\2714";
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: 700;
+ border-bottom-style: solid;
+ border-left-style: solid;
+ border-width: 0.4rem;
+ content: "";
+ display: block;
height: 100%;
- width: 100%;
+ margin: auto;
+ transform: scale(0.5, -0.5) rotateZ(145deg);
+ width: 70%;
}
blockquote {
color: #444;
color: var(--fade);
+ margin: 0;
}
-blockquote p {
+blockquote p,
+blockquote p:not(:last-child) {
padding-left: 1rem;
- margin-left: 1rem;
+ margin: 0 0 0 1rem;
border-left: 2px solid;
border-color: #eee;
border-color: var(--border-darker);
@@ -353,122 +453,113 @@ blockquote footer {
}
video {
+ width: 100%;
color: #000;
border-radius: 0.5rem;
background-color: #000;
+ vertical-align: middle;
box-shadow: 0 0 3px #00000060;
box-shadow: 0 0 3px var(--shadow);
}
-video:hover {
- box-shadow: 0 0 14px #00000060;
- box-shadow: 0 0 14px var(--shadow);
-}
-
video[data-orientation="portrait"] {
width: 50%;
}
+video:focus {
+ filter: brightness(100%);
+}
+
video-container {
display: block;
text-align: center;
}
kbd {
- background-color: #eee;
+ background-color: #fff;
border-radius: 0.25rem;
- border: 1px solid #b4b4b4;
- box-shadow: 0 1px 1px #737373, 0 2px 0 0 #f2f2f2 inset;
+ border: 1px solid #bbb;
color: #333;
display: inline-block;
font-size: 0.85em;
font-weight: 700;
line-height: 1;
- padding: 2px 4px;
+ padding: 0.1rem 0.25rem;
white-space: nowrap;
}
/* ----- Elements ----- */
-html {
- font-size: 95%;
- line-height: 1.5;
- word-break: break-word;
- text-rendering: optimizeSpeed;
- margin-left: calc(100vw - 100%);
- margin-right: 0;
-}
-
-html,
-samp,
-blockquote span {
- font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
- Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
- "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
- "Segoe UI Symbol";
-}
-
-blockquote p {
- font-family: Charter, Georgia, "Book Antiqua", serif;
- font-size: 110%;
-}
-
-pre,
-kbd,
-code,
-svg text {
- font-family: "Fira Code", "Lucida Console", "Andale Mono", "Roboto Mono",
- "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-body,
button,
-input,
-select,
textarea {
margin: 0;
}
ol {
- counter-reset: ol;
padding-left: 3.5rem;
+ list-style: none;
+ margin: 0;
}
ol li {
overflow-wrap: break-word;
word-break: break-word;
- list-style: none;
+ position: relative;
+ min-height: 1rem;
+}
+
+ol li + li {
+ margin-top: 0.5rem;
}
ol li:before {
- border-radius: 100%;
+ border-radius: 0.5rem;
border: 1px solid;
- content: counter(ol);
- counter-increment: ol;
- margin-left: -2rem;
+ border-color: #111;
+ border-color: var(--foreground);
font-size: 85%;
- padding: 0 0.35rem;
+ font-weight: 700;
+ opacity: 0.85;
+ padding: 0 0.5rem;
position: absolute;
+ right: 0;
+ margin-right: 100%;
+ margin-left: -100%;
+ font-variant-numeric: tabular-nums lining-nums slashed-zero;
+ height: 100%;
+ max-height: 1.5rem;
+ display: flex;
+ align-items: center;
}
-ol li + li {
- margin-top: 0.5rem;
+ol:not([start]) {
+ counter-reset: ol;
}
-main {
- min-height: 100%;
+ol:not([start]) li:before {
+ content: counter(ol);
+ counter-increment: ol;
+}
+
+ol[start] li:before {
+ content: counter(list-item);
}
-main,
details,
+summary,
code-block,
+figure span,
diagram-container {
display: block;
}
-summary {
- display: list-item;
+main {
+ display: block;
+ min-height: 80vh;
+}
+
+summary::-webkit-details-marker {
+ display: none;
}
cite {
@@ -478,6 +569,7 @@ cite {
ul {
list-style: none;
padding-left: 0;
+ margin: 0;
}
nav ol,
@@ -503,8 +595,13 @@ q:after {
content: "\201D";
}
-details,
-micro-metadata-menu context-control label {
+pre code {
+ white-space: pre-line;
+}
+
+summary,
+abbr[title] label,
+menu label {
cursor: pointer;
}
@@ -521,10 +618,10 @@ a:hover {
}
a:hover,
-micro-metadata-menu:hover span,
-micro-metadata-view a:hover span,
-micro-metadata-draft a:hover span,
-micro-metadata-handle a:hover span {
+menu:hover span,
+meta-view a:hover span,
+meta-draft a:hover span,
+meta-handle a:hover span {
text-decoration-thickness: 0.15rem !important;
text-decoration-color: inherit !important;
}
@@ -549,15 +646,15 @@ document-attachment object p {
margin: 1rem;
}
-column-left nav {
+column-base[position="left"] nav {
position: sticky;
position: -webkit-sticky;
- align-self: flex-start;
top: 0.5rem;
text-align: right;
+ font-size: 100%;
}
-column-left nav a {
+column-base[position="left"] nav a {
align-items: center;
color: inherit;
color: var(--foreground);
@@ -569,28 +666,34 @@ column-left nav a {
border-radius: 0.5rem;
}
-column-left nav li {
+column-base[position="left"] nav li {
margin-bottom: 0.25rem;
}
-column-left nav li:hover a {
+column-base[position="left"] nav li:hover a {
background-color: #eee;
background-color: var(--hover-background);
border-radius: 0.5rem;
}
-column-left nav li:hover svg {
+column-base[position="left"] nav a:hover svg {
+ fill: #cce0ff;
+ fill: var(--icon-hover-background);
+ stroke-width: 0.1rem;
+}
+
+column-base[position="left"] nav a:focus svg {
fill: #cce1ff;
- fill: var(--active-background-alternate);
+ fill: var(--icon-focus-background);
}
-column-left nav a span {
+column-base[position="left"] nav a span {
padding: 0 1rem;
}
-column-left nav a svg {
- height: 1.5795rem;
- width: 1.5795rem;
+column-base[position="left"] nav a svg {
+ height: 1.5em;
+ width: 1.5em;
}
abbr[title] {
@@ -606,6 +709,14 @@ input[type="checkbox"]:checked ~ abbr[title]::after {
content: " (" attr(title) ")";
}
+input[type="checkbox"]:checked ~ input[type="checkbox"] ~ abbr[title] {
+ cursor: text;
+}
+
+input[type="checkbox"]:checked ~ input[type="checkbox"] ~ abbr[title] label {
+ pointer-events: none;
+}
+
samp {
font-variant: all-small-caps;
letter-spacing: 0.05rem;
@@ -621,26 +732,23 @@ small {
opacity: 0.85;
}
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
+canvas {
vertical-align: middle;
}
-video,
audio {
width: 100%;
-}
-
-audio {
margin: 0.75rem 0;
+ vertical-align: middle;
}
figure {
text-align: center;
+ margin: 0;
+}
+
+figure object {
+ pointer-events: none;
}
iframe {
@@ -649,8 +757,10 @@ iframe {
border: 2px solid #ccc;
border: 2px solid var(--border-darker);
background-color: #fefefe;
- border-radius: 0.5rem !important;
+ border-radius: 0.5rem;
min-height: 16rem;
+ user-select: none;
+ vertical-align: middle;
}
self-embed iframe {
@@ -658,10 +768,12 @@ self-embed iframe {
max-height: 11rem;
}
-img {
+img,
+figure object {
height: auto;
max-width: 100%;
- border: 1px solid;
+ border-width: 1px;
+ border-style: solid;
border-color: #ccc;
border-color: var(--border-darker);
border-radius: 0.5rem;
@@ -671,24 +783,24 @@ img {
justify-content: center;
align-items: center;
background-color: #fefefe;
+ user-select: none;
+ vertical-align: middle;
}
-img:hover {
+img:hover,
+video:hover,
+figure span:hover {
box-shadow: 0 0 14px #00000060;
box-shadow: 0 0 14px var(--shadow);
filter: brightness(90%);
}
-img,
-iframe {
- user-select: none;
-}
-
p {
- line-height: 1.4;
+ margin: 0;
}
svg {
+ vertical-align: middle;
stroke-width: 0.08rem;
}
@@ -700,33 +812,35 @@ svg:not(:root) {
overflow: hidden;
}
-button,
input {
+ margin: 0;
overflow: visible;
}
-button,
select {
text-transform: none;
+ margin: 0;
}
button,
+summary:after,
[type="reset"],
[type="button"],
[type="submit"],
micro-tags a,
-micro-expand label,
-paginator-navigation a,
-micro-author micro-summary > a {
+nav[data-type="pagination"] a,
+micro-author micro-card > a {
align-items: center;
appearance: none;
background-color: #fff;
background-color: var(--button-background);
+ border: 1px solid;
border-radius: 0.5rem;
- border: 1px solid #eee;
- border: 1px solid var(--border-lighter);
- box-shadow: 0 1px 2px #00000060;
- box-shadow: 0 1px 2px var(--shadow);
+ border-color: #eee;
+ border-color: var(--border-darker);
+ border-top-color: var(--border-lighter);
+ border-left-color: var(--border-lighter);
+ border-right-color: var(--border-lighter);
color: inherit;
cursor: pointer;
display: flex;
@@ -734,6 +848,8 @@ micro-author micro-summary > a {
height: 1.95rem;
padding: 0.125rem 0.5rem;
text-decoration: none;
+ text-transform: none;
+ overflow: visible;
}
button:hover,
@@ -741,24 +857,34 @@ button:hover,
[type="button"]:hover,
[type="submit"]:hover,
micro-tags a:hover,
-micro-expand label:hover,
-paginator-navigation a:hover,
-micro-author micro-summary > a:hover {
+nav[data-type="pagination"] a:hover,
+micro-author micro-card > a:hover {
border: 1px solid;
border-color: #aaa;
border-color: var(--border-darkest);
}
button svg,
-paginator-navigation svg,
-micro-author micro-summary > a svg {
+micro-author micro-card a svg,
+nav[data-type="pagination"] a svg {
height: 1.25rem;
width: 1.25rem;
- margin: 0 0.25rem;
+}
+
+micro-author a svg ~ span,
+micro-author a span ~ svg,
+nav[data-type="pagination"] a svg ~ span,
+nav[data-type="pagination"] a span ~ svg {
+ margin-left: 0.25rem;
}
hr {
+ border: 0;
border-top: 1px solid;
+ border-color: #ccc;
+ border-color: var(--border-darker);
+ opacity: 0.4;
+ margin: 0.5rem 0;
}
/* ----- Tables ----- */
@@ -821,6 +947,10 @@ tr:last-child td:last-child {
/* ----- Print ----- */
+article a[href*="pdf"]::after {
+ content: " [pdf]";
+}
+
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
@@ -833,50 +963,75 @@ tr:last-child td:last-child {
/* ----- Base ----- */
+html {
+ font-size: 95%;
+ height: 100%;
+ line-height: 1.5;
+ margin: 0;
+ overflow-y: scroll;
+ text-rendering: optimizeSpeed;
+ word-break: break-word;
+}
+
+html[data-document="html"],
+html[data-document="xhtml"] {
+ height: auto;
+ margin-left: calc(100vw - 100%);
+ margin-right: 0;
+ overflow-y: visible;
+}
+
+html[data-document="html"] body,
+html[data-document="xhtml"] body {
+ display: flex;
+ margin: 0 auto;
+ max-width: 1250px;
+}
+
body {
background-color: #fefefe;
background-color: var(--background);
color: #111;
color: var(--foreground);
- display: flex;
- margin: 0 auto;
- max-width: 1250px;
+ margin: 0;
+ max-width: 600px;
min-height: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: none;
}
-column-left {
- display: flex;
+column-base[position="left"] {
width: 14.25%;
- justify-content: flex-end;
}
-column-right {
+column-base[position="right"] {
width: 28%;
}
-column-left,
-column-right {
+column-base[position="left"],
+column-base[position="right"] {
margin: 0.5rem 2rem;
}
-column-middle {
+column-base[position="middle"] {
max-width: 600px;
min-height: 100vh;
width: 100%;
+ height: fit-content;
}
micro-card,
-micro-tags {
+micro-tags,
+profile-box {
display: block;
}
-history-archive h1,
-records-archive h1 {
+source-files h1,
+archive-list h1 {
text-align: center;
font-weight: 400;
font-size: 150%;
+ font-variant: all-small-caps;
}
micro-tags {
@@ -891,7 +1046,7 @@ micro-tags a {
margin: 0 0.25rem 0.5rem 0;
}
-micro-summary {
+micro-card {
border-bottom: 1px solid;
border-color: #eee;
border-color: var(--border-lighter);
@@ -901,59 +1056,80 @@ micro-summary {
position: relative;
}
-micro-author micro-summary {
- flex-direction: row;
+micro-card > a {
+ display: none;
+}
+
+micro-card:target {
+ border-radius: 0.5rem;
+ outline-offset: -6px;
+ outline: 2px dashed #ccc;
+ outline: 2px dashed var(--border-darker);
}
-micro-summary:hover {
+micro-card:hover {
background-color: #f5f9ff;
background-color: var(--hover-background-alternate);
}
-micro-summary:focus-within {
+micro-card:focus-within {
background-color: #f0ecf9;
background-color: var(--focus-within-background);
}
-micro-author micro-summary {
+micro-author micro-card {
+ flex-direction: row;
justify-content: start;
align-items: center;
border: none;
}
-micro-author micro-thumbnail {
- flex: none;
- margin-right: 0.5rem;
+micro-author micro-card header,
+micro-author micro-card > a,
+micro-author micro-card > article,
+micro-author micro-card > p:not(:last-child) {
+ margin: 0 0.5rem;
+}
+
+micro-author micro-card p:not(:last-child) {
+ flex: 1.75;
+ color: #444;
+ color: var(--fade);
+ max-width: 20rem;
}
-micro-author micro-header {
+micro-author article {
flex: 1;
min-width: 3rem;
- margin-right: 0.75rem;
}
-micro-author micro-header h2 {
- line-height: 1.25rem;
+micro-author article h2 {
+ line-height: 1.25;
}
-micro-author micro-summary p:not(:last-child) {
- flex: 1.75;
- margin: 0 0.75rem 0 0;
- color: #444;
- color: var(--fade);
- max-width: 20rem;
+micro-author article h3 {
+ font-weight: 400;
+}
+
+micro-author micro-card header figure:first-child {
+ margin: 0;
}
-micro-thumbnail figure {
+micro-card header figure:first-child {
margin: 0 0.75rem 0 0;
}
-micro-thumbnail figure > a {
+micro-card header figure > a,
+micro-card header figure > a:hover {
+ color: #000;
display: block;
+ text-decoration: none;
}
tag-card figure img,
-micro-thumbnail figure img {
+micro-card header figure img,
+micro-card header figure span,
+micro-card header figure object {
border-radius: 100%;
min-width: 3.5rem;
min-height: 3.5rem;
@@ -961,37 +1137,35 @@ micro-thumbnail figure img {
max-height: 3.5rem;
}
-micro-summary article {
+micro-card > article {
margin-left: 4.25rem;
}
-micro-summary article ul {
+micro-card article ul {
list-style-type: "\2012";
padding-left: 2rem;
}
-micro-summary article li {
+micro-card article li {
padding-left: 0.5rem;
}
-micro-summary article ul li + li {
- margin-top: 0.25rem;
+micro-card article li::marker {
+ opacity: 0.85;
}
-[data-kind] micro-summary article h1 a,
-[data-kind] micro-summary article h2 a,
-[data-kind] micro-summary article h3 a {
- color: inherit;
+micro-card article ul li + li {
+ margin-top: 0.25rem;
}
-micro-summary article figure img {
+micro-card article figure img {
border: none;
margin: 0 auto;
box-shadow: 0 0 3px #00000060;
box-shadow: 0 0 3px var(--shadow);
}
-micro-summary article figure img:before {
+micro-card article figure img:before {
background-color: #fefefe;
background-color: var(--background);
border-radius: 0.5rem;
@@ -1003,22 +1177,20 @@ micro-summary article figure img:before {
margin: 1rem;
}
-micro-summary article figure > a {
+micro-card article figure > a {
border-radius: 0.5rem;
display: inline-block;
}
-micro-summary article figure > a[data-orientation="landscape"] {
+micro-card article figure > a[data-orientation="landscape"] {
display: block;
}
-micro-summary article figure > a[data-orientation="landscape"] img {
+micro-card article figure > a[data-orientation="landscape"] img {
width: 100%;
- max-height: 20rem;
}
-micro-metadata {
- align-items: center;
+micro-card header {
color: #444;
color: var(--fade);
display: flex;
@@ -1026,144 +1198,153 @@ micro-metadata {
margin-bottom: 0.25rem;
}
-micro-metadata h2 {
+micro-card header h2 {
display: inline;
}
-micro-metadata header {
+micro-card header meta-data {
word-break: break-all;
word-break: break-word;
}
-micro-metadata header a {
+micro-card header meta-data a {
color: inherit;
}
-micro-metadata header > *:not(:last-child) {
+micro-card header meta-data > *:not(:last-child) {
margin-right: 0.5rem;
}
-micro-metadata header > *:hover {
+micro-card header meta-data > *:hover {
color: #111;
color: var(--foreground);
}
-micro-metadata-expiry,
-micro-metadata-draft em,
-micro-metadata-wordcount word-limit em {
+meta-expiry,
+meta-draft em,
+meta-wordcount word-limit em {
color: #8f0000;
color: var(--danger);
font-style: normal;
}
-micro-metadata-draft em {
+meta-draft em {
font-variant: all-small-caps;
}
-micro-header footer svg,
-micro-metadata header svg {
+profile-box footer svg,
+micro-card header meta-data svg {
height: 1rem;
width: 1rem;
- stroke-width: 0.1rem;
+ stroke-width: 0.105rem;
}
-micro-metadata-unlisted {
+meta-unlisted {
font-variant: all-small-caps;
}
s label,
abbr[title],
-abbr[title] label,
-micro-metadata-expiry,
-micro-metadata-readtime,
-micro-metadata-datetime,
-micro-metadata-unlisted,
-micro-metadata-wordcount {
+meta-expiry,
+meta-readtime,
+meta-datetime,
+meta-unlisted,
+meta-wordcount {
cursor: help;
}
-micro-metadata-anchored {
+meta-anchored {
display: flex;
margin-bottom: 0.25rem;
width: 100%;
}
-micro-metadata-anchored > * {
+meta-anchored > * {
margin-right: 0.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
+ text-decoration: none;
}
-micro-metadata-anchored svg {
+meta-anchored svg {
margin-right: 0.25rem;
}
-micro-metadata-menu {
+meta-anchored a[data-anchored="pinned"] svg {
+ fill: #9ed1fa;
+}
+
+meta-anchored a[data-anchored="marked"] svg {
+ fill: #cd5c5c;
+}
+
+menu {
display: inline-block;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
position: relative;
}
-micro-metadata-menu context-menu {
+menu context-menu {
min-width: 10rem;
}
-micro-metadata-menu context-menu svg {
+menu context-menu svg {
margin-right: 0.25rem;
}
-micro-metadata-menu context-menu a {
+menu context-menu a {
display: block;
padding: 0.5rem 1rem;
}
-micro-metadata-menu context-menu a:hover {
+menu context-menu a:hover {
background-color: #eee;
background-color: var(--hover-background);
border-radius: 0.25rem;
}
-[data-kind] micro-summary article h1 a,
-[data-kind] micro-summary article h2 a,
-[data-kind] micro-summary article h3 a,
-micro-metadata-view a,
-micro-metadata-name a,
-micro-metadata-draft a,
-micro-metadata-handle a,
-micro-metadata a:focus > span,
-micro-metadata context-menu a,
-micro-metadata context-menu a span {
- text-decoration: none;
-}
-
-[data-kind] micro-summary article h1 a:hover,
-[data-kind] micro-summary article h2 a:hover,
-[data-kind] micro-summary article h3 a:hover,
-micro-metadata-menu span,
-micro-metadata-view a span,
-micro-metadata-name a:hover,
-micro-metadata-draft a span,
-micro-metadata-handle a span {
- text-decoration: underline;
+micro-card[id] article h1 a,
+micro-card[id] article h2 a,
+micro-card[id] article h3 a {
+ color: inherit;
}
-anchored-pinned svg {
- fill: #9ed1fa;
+meta-view a,
+meta-name a,
+meta-draft a,
+meta-handle a,
+micro-card[id] article h1 a,
+micro-card[id] article h2 a,
+micro-card[id] article h3 a,
+micro-card header a:focus > span,
+micro-card menu context-menu a,
+micro-card menu context-menu a span {
+ text-decoration: none;
}
-anchored-liked svg {
- fill: #cd5c5c;
+menu span,
+meta-view a span,
+meta-name a:hover,
+meta-draft a span,
+meta-handle a span,
+micro-card[id] article h1 a:hover,
+micro-card[id] article h2 a:hover,
+micro-card[id] article h3 a:hover {
+ text-decoration: underline;
}
-micro-header micro-header-banner img {
+profile-box picture[data-type="banner"] img {
background-color: transparent;
border-radius: 0.125rem;
- height: 12rem;
+ height: 10rem;
width: 100%;
border: none;
}
-micro-header micro-header-picture img {
+profile-box picture[data-type="profile"] img {
border-radius: 100%;
height: 8rem;
margin: -4rem 2rem 0 2rem;
@@ -1172,104 +1353,134 @@ micro-header micro-header-picture img {
padding: 0.25rem;
}
-micro-header section {
+profile-box section {
margin: 1rem 2rem 0 2rem;
- line-height: 1;
display: flex;
align-items: baseline;
}
-micro-header-title {
+profile-box section aside {
flex: 1;
line-height: 1.25;
margin-right: 1rem;
+ display: inline;
}
-micro-header-description {
+profile-box section p {
flex: 6;
}
-micro-header h3 {
+profile-box h3 {
font-weight: 400;
color: #444;
color: var(--fade);
}
-micro-header footer,
-micro-header footer code {
+profile-box footer,
+profile-box footer code {
color: #444;
color: var(--fade);
}
-micro-header footer {
+profile-box footer {
margin: 1.25rem 2rem 0.25rem 2rem;
text-align: center;
font-size: 95%;
}
-micro-header footer p {
+profile-box footer p {
margin: 0.75rem 0.5rem 0.25em 0;
display: inline;
}
-micro-summary article details[data-disclosure] summary {
- display: block;
+micro-card details[data-disclosure] summary {
+ display: inline-block;
margin: 0 -0.25rem 0.5rem -0.25rem;
padding: 0.25rem;
- outline-offset: 0.05rem;
}
-micro-summary article details[data-disclosure] summary:focus a,
-micro-summary article details[data-disclosure] summary:focus:after,
-micro-summary article details[data-disclosure][open] summary:focus:after {
+micro-card details[data-disclosure] summary:focus a {
color: inherit;
- border-color: inherit;
}
-micro-summary article details[data-disclosure] summary:hover {
- text-shadow: 0 0 currentColor;
+following-list details summary:focus:after,
+following-list details[open] summary:focus:after,
+micro-card details[data-disclosure] summary:focus:after,
+micro-card details[data-disclosure][open] summary:focus:after {
+ color: #111;
+ color: var(--foreground);
+ border-color: #111;
}
-micro-summary article details[data-disclosure] summary:after,
-micro-summary article details[data-disclosure][open] summary:after {
- padding: 0 0.5rem;
- margin-left: 1ch;
- border: 2px solid;
- border-color: #ddd;
- border-color: var(--border-darker);
+following-list details summary:after,
+following-list details[open] summary:after,
+micro-card details[data-disclosure] summary:after,
+micro-card details[data-disclosure][open] summary:after {
border-radius: 0.5rem;
- font-variant: small-caps;
+ display: inline;
+ vertical-align: bottom;
}
-micro-summary article details[data-disclosure] summary:after {
- content: "show";
+micro-card details[data-disclosure] summary:hover,
+micro-card details[data-disclosure] summary:hover:after {
+ text-shadow: 0 0 currentColor;
}
-micro-summary article details[data-disclosure][open] summary:after {
- content: "hide";
+micro-card details[data-disclosure] summary:hover:after {
+ text-decoration: underline;
}
-micro-summary article details[data-disclosure] summary::-webkit-details-marker {
- display: none;
+micro-card details[data-disclosure] summary:after {
+ content: "HIDDEN";
}
-micro-summary article details[data-disclosure] ~ *:not(micro-tags) {
- display: none;
+micro-card details[data-disclosure][open] summary:after {
+ content: "OPENED";
}
-micro-summary article details[data-disclosure][open] ~ * {
+micro-card details[data-disclosure][open] ~ details summary:after {
+ content: none;
+}
+
+micro-card details[data-disclosure][open] ~ *:not(details):not(micro-tags) {
display: inherit;
}
+micro-card
+ details[data-disclosure][open]
+ ~ *:not(details):not(micro-tags):not(math-ml) {
+ color: #444;
+ color: var(--fade);
+}
+
+micro-card details[data-disclosure][open] ~ details summary {
+ cursor: text;
+}
+
+micro-card details[data-disclosure] ~ *:not(details):not(micro-tags) {
+ display: none;
+}
+
micro-thread related-content footer {
font-size: 100%;
border-bottom: 1px solid;
- border-color: #ccc;
+ border-color: #eee;
border-color: var(--border-lighter);
margin: 0;
padding: 0.5rem 0;
}
+micro-thread nav[data-type="pagination"] {
+ padding: 0.5rem 0;
+ border-bottom: 1px solid;
+ border-color: #eee;
+ border-color: var(--border-lighter);
+}
+
+micro-thread > nav[data-type="pagination"]:last-child {
+ border: none;
+}
+
tab-bar {
display: inline-block;
overflow-x: auto;
@@ -1303,7 +1514,7 @@ tab-bar nav a {
position: relative;
text-decoration: none;
top: 1px;
- border-bottom: 2px solid var(--background);
+ border-bottom: 2px solid transparent;
}
tab-bar nav a:not(:last-child) {
@@ -1315,11 +1526,34 @@ tab-bar nav a[data-draft] {
color: var(--danger);
}
+tab-bar nav a:after {
+ content: attr(data-label);
+ display: block;
+ font-weight: 700;
+ height: 0;
+ overflow: hidden;
+ pointer-events: none;
+ user-select: none;
+ visibility: hidden;
+}
+
tab-bar nav a:hover {
text-decoration: underline;
}
-column-middle main > nav {
+tab-bar nav a span[data-scroll] {
+ position: absolute;
+ top: -4.75rem;
+ left: 200%;
+ width: 0;
+ height: 0;
+}
+
+tab-bar nav a:nth-child(-n + 3) span[data-scroll] {
+ left: -200%;
+}
+
+column-base[position="middle"] > nav:first-child {
align-items: center;
background-color: #fefefe;
background-color: var(--background);
@@ -1332,31 +1566,39 @@ column-middle main > nav {
top: 0;
width: 100%;
z-index: 100;
- height: 4rem;
+ height: inherit;
}
-column-middle main > nav section h2,
-column-middle main > nav section small {
+column-base[position="middle"] > nav:first-child section h2,
+column-base[position="middle"] > nav:first-child section small {
margin: 0;
}
-micro-author micro-header h2,
-micro-author micro-header h3,
-micro-author micro-header time,
-column-middle main > nav section h2,
-column-middle main > nav section small {
- white-space: nowrap;
+micro-author article > *,
+column-base[position="middle"] > nav:first-child section h2,
+column-base[position="middle"] > nav:first-child section small {
overflow: hidden;
text-overflow: ellipsis;
+ white-space: nowrap;
}
-column-middle main > nav section {
+column-base[position="middle"] > nav:first-child section {
line-height: 1.25;
padding: 0 0.5rem;
+ margin-right: 0.5rem;
+}
+
+column-base[position="middle"] > footer:last-child {
+ margin: 1rem 0.25rem 3rem 0.25rem;
}
-column-middle main > footer {
- margin: 1rem 0;
+column-base[position="middle"] main > footer:last-child {
+ padding: 2rem 0 1rem 0;
+}
+
+icon-button,
+icon-navigator {
+ height: 4rem;
}
icon-button a {
@@ -1371,9 +1613,16 @@ icon-button a {
padding: 0.5rem 0;
}
-icon-button,
-icon-navigator {
- height: 4rem;
+icon-button a svg:nth-of-type(2),
+icon-button a small:nth-of-type(2),
+icon-button a[data-update="refresh"] svg:nth-of-type(1),
+icon-button a[data-update="refresh"] small:nth-of-type(1) {
+ display: none;
+}
+
+icon-button a[data-update="refresh"] svg:nth-of-type(2),
+icon-button a[data-update="refresh"] small:nth-of-type(2) {
+ display: block;
}
icon-button a:hover {
@@ -1413,6 +1662,7 @@ code-block pre code {
border-top: 1px solid #ccc;
border-top: 1px solid var(--border-darker);
padding: 0.75rem;
+ white-space: pre;
}
code-block[data-lines] pre code {
@@ -1421,7 +1671,7 @@ code-block[data-lines] pre code {
code-block header {
position: relative;
- top: 1.85rem;
+ top: 2.125rem;
margin-top: -1rem;
height: 1rem;
padding: 0 0.5rem;
@@ -1432,50 +1682,40 @@ code-block header {
}
code-block header language-label {
- padding: 0.125rem 1rem;
font-variant: all-small-caps;
}
code-block header language-label a {
text-decoration: none;
+ padding: 0.125rem 1rem;
}
code-block header language-label a:hover {
text-decoration: underline;
}
-paginator-navigation {
- padding: 1rem 0.25rem 0 0.25rem;
+code-content {
+ width: 100%;
+}
+
+nav[data-type="pagination"] {
+ padding: 1rem 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
-paginator-navigation a {
- margin: 0 0.25rem 0.5rem 0.25rem;
+nav[data-type="pagination"] a {
+ margin: 0.5rem 0.25rem;
font-size: 85%;
display: flex;
align-items: center;
justify-content: center;
}
-web-ring,
-author-list,
-following-list,
-gallery-images {
- padding-bottom: 1rem;
- display: block;
-}
-
-web-ring > h1,
-author-list > h1,
-following-list > h1,
-gallery-images > h1 {
- font-size: 95%;
- margin: 0.5rem 0 1rem 0;
- text-align: center;
- text-transform: uppercase;
+nav[data-type="pagination"] a[title="hidden"] {
+ visibility: hidden;
}
gallery-images aside {
@@ -1487,10 +1727,10 @@ gallery-images aside {
gallery-images a {
display: flex;
- flex-basis: 33.33%;
+ flex-basis: 25%;
flex-grow: 1;
height: 6rem;
- width: 33.333%;
+ width: 25%;
}
gallery-images picture,
@@ -1518,44 +1758,37 @@ gallery-overlay {
z-index: 1;
pointer-events: none;
border: 1px solid;
- border-color: #ccc;
+ border-color: #eee;
border-color: var(--border-lighter);
}
-web-ring {
+web-ring,
+[data-kind="home"] author-list,
+[data-kind="term"] author-list,
+[data-kind="taxonomy"] author-list {
border-radius: 1rem;
position: sticky;
position: -webkit-sticky;
top: 1rem;
}
-web-ring header {
- font-weight: 700;
-}
-
web-ring time,
-micro-author micro-header time {
+micro-author article time {
display: block;
color: #444;
color: var(--fade);
}
-web-ring time {
- font-variant: small-caps;
-}
-
-web-ring p,
-web-ring time {
- display: inline;
-}
-
web-ring p:not(:last-child) {
margin-bottom: 0;
}
-web-ring-item:not(:last-child) {
- margin-bottom: 2rem;
- display: block;
+web-ring article:not(:last-child) {
+ margin-bottom: 1.5rem;
+}
+
+web-ring aside {
+ padding: 1rem;
}
web-ring aside,
@@ -1563,7 +1796,7 @@ author-list aside,
following-list aside {
background-color: #f9f9f9;
background-color: var(--widget-background);
- border-radius: 1rem;
+ border-radius: 0.5rem;
}
web-ring aside footer,
@@ -1573,8 +1806,64 @@ following-list aside footer {
background-color: var(--background);
}
-web-ring aside {
- padding: 1rem;
+web-ring,
+author-list,
+following-list,
+gallery-images {
+ padding-bottom: 1rem;
+ display: block;
+}
+
+web-ring > h1,
+author-list > h1,
+gallery-images > h1,
+following-list details {
+ font-size: 95%;
+ margin: 0.5rem 0 1rem 0;
+ text-align: center;
+ text-transform: uppercase;
+}
+
+following-list details h1 {
+ display: inline-block;
+}
+
+following-list aside micro-author {
+ display: none;
+}
+
+following-list details[open] + aside micro-author,
+following-list aside micro-author:nth-child(-n + 3) {
+ display: inherit;
+}
+
+following-list:hover details[open] + aside {
+ outline: 2px solid #ccc;
+ outline: 2px solid var(--border-darker);
+}
+
+following-list details[data-expand="more"] summary:after {
+ content: "+";
+}
+
+following-list details[open][data-expand="more"] summary:after {
+ content: "-";
+}
+
+following-list details[data-expand="more"] summary:after,
+following-list details[open][data-expand="more"] summary:after {
+ padding: 0 0.5rem;
+ font-size: 100%;
+ margin-left: 0.25rem;
+}
+
+author-list:hover h1,
+following-list:hover details h1 {
+ text-decoration: underline;
+}
+
+author-list h1 a {
+ color: inherit;
}
author-list aside {
@@ -1585,23 +1874,23 @@ author-list p {
display: none;
}
-search-entry {
+search-box {
display: inherit;
width: 100%;
z-index: 1;
}
-search-entry[data-focus],
-search-entry:focus-within {
+search-box[data-focus],
+search-box:focus-within {
position: absolute;
}
-search-entry:focus-within form {
+search-box:focus-within form {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
-search-entry form {
+search-box form {
background-color: #fefefe;
background-color: var(--background);
border-radius: 0.5rem;
@@ -1609,12 +1898,12 @@ search-entry form {
border-color: #ccc;
border-color: var(--border-darker);
display: inline-flex;
- margin: 0 1rem;
width: 100%;
position: relative;
+ margin: 0 0.5rem;
}
-search-entry form button {
+search-box form button[type="submit"] {
background-color: transparent;
border: none;
box-shadow: none;
@@ -1630,32 +1919,32 @@ search-entry form button {
line-height: 1;
}
-search-entry form input {
+search-box form input {
-webkit-appearance: none;
- background-color: #fefefe;
- background-color: var(--background);
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
border: none;
font-size: 100%;
- line-height: 1.5;
+ line-height: inherit;
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
color: inherit;
}
-search-entry form button svg {
- stroke-width: 0.1rem;
+search-box form input,
+search-box form input:focus {
+ outline: none;
+ background-color: #fefefe;
+ background-color: var(--text-background);
}
-search-entry form input:focus {
- outline: none;
- background-color: #fefefe !important;
- background-color: var(--background) !important;
+search-box form button svg {
+ stroke-width: 0.1rem;
+ width: 100%;
}
-search-entry ul {
+search-box ul {
position: absolute;
background-color: inherit;
padding-top: 2.9rem;
@@ -1664,17 +1953,17 @@ search-entry ul {
border-radius: 0.5rem;
z-index: -1;
margin-right: 1rem;
- margin-left: -0.05rem;
+ margin-left: -0.065rem;
width: 100.3%;
box-shadow: 0 4px 6px #00000060;
box-shadow: 0 4px 6px var(--shadow);
}
-search-entry ul li a span {
+search-box ul li a span {
font-weight: 400;
}
-search-entry ul li a {
+search-box ul li a {
font-weight: 700;
color: inherit;
text-decoration: none;
@@ -1682,18 +1971,18 @@ search-entry ul li a {
padding: 0.25rem 0.75rem;
}
-search-entry ul li:first-child a {
+search-box ul li:first-child a {
background-color: #ebf3ff;
background-color: var(--hover-background-alternate);
}
-search-entry ul li:only-child a,
-search-entry ul li:last-child a:hover {
+search-box ul li:only-child a,
+search-box ul li:last-child a:hover {
border-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
-search-entry ul li a:hover {
+search-box ul li a:hover {
background-color: #eee;
background-color: var(--hover-background);
}
@@ -1719,8 +2008,7 @@ item-list li:hover span:last-child {
text-decoration: underline;
}
-item-list li > a,
-records-archive li {
+item-list li > a {
display: flex;
text-decoration: none;
align-items: baseline;
@@ -1754,6 +2042,60 @@ item-list a:focus span:last-child {
color: inherit;
}
+time-line h1 {
+ padding: 1rem;
+}
+
+time-line ul {
+ padding: 0 0.5rem;
+}
+
+time-line li:hover {
+ background-color: #eee;
+ background-color: var(--hover-background);
+}
+
+time-line li a {
+ position: relative;
+ border-left: 1px solid;
+ border-color: #ccc;
+ border-color: var(--border-darker);
+ padding: 0.75rem 0.5rem;
+ display: flex;
+ text-decoration: none;
+}
+
+time-line li a:before {
+ position: absolute;
+ background-color: #0149bc;
+ background-color: var(--link);
+ border-radius: 100%;
+ content: "";
+ height: 1rem;
+ width: 1rem;
+ top: 1rem;
+ left: -0.5rem;
+ border: 0.3rem solid #fefefe;
+ border: 0.3rem solid var(--background);
+}
+
+time-line a:focus time,
+time-line a:focus section p {
+ color: inherit;
+}
+
+time-line time,
+time-line section p {
+ color: #444;
+ color: var(--fade);
+}
+
+time-line time {
+ text-transform: uppercase;
+ white-space: nowrap;
+ margin: 0 1rem;
+}
+
tag-deck {
display: flex;
flex-wrap: wrap;
@@ -1822,21 +2164,21 @@ context-menu {
opacity: 0;
}
-context-menu[right] {
+context-menu[position="right"] {
right: 0;
}
-context-menu[left] {
+context-menu[position="left"] {
left: 0;
}
-context-menu[anchor] {
+context-menu[position="anchor"] {
left: -125%;
top: 0;
}
-context-menu[left],
-context-menu[right] {
+context-menu[position="left"],
+context-menu[position="right"] {
top: 1rem;
}
@@ -1869,7 +2211,7 @@ context-profile context-menu {
top: 0.5rem;
text-align: left;
max-width: 20rem;
- transition-delay: 0.3s;
+ transition-delay: 0.5s;
}
micro-card figure:hover context-menu,
@@ -1890,27 +2232,27 @@ diagram-container svg {
background-color: var(--background);
}
-reaction-tip {
+tool-tip[data-type="reaction"] {
text-decoration: underline;
- -webkit-text-decoration-style: wavy;
- text-decoration-style: wavy;
+ -webkit-text-decoration-style: dotted;
+ text-decoration-style: dotted;
text-decoration-thickness: 0.05rem;
- cursor: pointer;
+ cursor: default;
position: relative;
display: inline-block;
}
-reaction-tip:hover {
+tool-tip[data-type="reaction"]:hover {
text-decoration-thickness: 0.1rem;
}
-reaction-tip:hover img {
+tool-tip[data-type="reaction"]:hover img {
opacity: 1;
visibility: visible;
width: 100%;
}
-reaction-tip img {
+tool-tip[data-type="reaction"] img {
position: absolute;
z-index: 99;
visibility: hidden;
@@ -1922,9 +2264,11 @@ reaction-tip img {
transform: translateX(-50%);
max-width: fit-content;
border: none;
+ transition-delay: 0.5s;
}
-main micro-card:first-of-type reaction-tip img {
+body micro-card:first-of-type tool-tip[data-type="reaction"] img,
+main micro-card:first-of-type tool-tip[data-type="reaction"] img {
bottom: 0;
top: 100%;
}
@@ -1963,26 +2307,54 @@ link-card article a {
display: block;
}
+math-ml:not(:last-child) {
+ margin-bottom: 0.75rem;
+}
+
+math-ml figure[id] figure {
+ overflow-x: auto;
+ overflow-y: hidden;
+ border-radius: 0.5rem;
+ padding: 0.75rem 0.5rem;
+ background-color: #f9f9f9;
+ background-color: var(--widget-background);
+ border: 1px solid;
+ border-color: #ccc;
+ border-color: var(--border-darker);
+}
+
+math-ml figure[id] a:first-child {
+ margin: 0 0.125rem;
+ padding: 0 0.25rem;
+ font-weight: 700;
+ color: #0149bc;
+ color: var(--link);
+}
+
+math-ml figure[id]:target figure {
+ background-color: #ffe699;
+ background-color: var(--warning-background);
+ color: #000;
+ outline: 2px solid;
+ border-radius: 0.5rem;
+}
+
/* ----- Attributes ----- */
[tabindex="-1"]:focus {
outline: none;
}
-[hidden] {
+[hidden],
+nav[hidden] {
display: none;
}
-[data-invisible] {
- visibility: hidden;
-}
-
[data-hover] {
text-decoration: none;
}
[data-hover]:hover {
- color: inherit;
text-decoration: underline;
}
@@ -2006,74 +2378,93 @@ link-card article a {
}
[role="doc-endnotes"] hr {
- border-top: 1px solid #ccc;
- border-top: 1px solid var(--border-darker);
margin-bottom: 0.75rem;
- opacity: 0.25;
}
[role="doc-endnotes"] ol {
+ font-size: 90%;
padding-left: 2rem;
}
-[xml-data] micro-summary {
+[data-xml] micro-card {
flex-direction: row;
+ align-items: center;
}
-[xml-data] micro-summary article {
+[data-xml] micro-card article {
margin-left: 0;
}
-[xml-data] micro-thumbnail {
+[data-xml] micro-card header figure {
display: block;
}
-[xml-data] column-middle nav section {
+[data-xml] column-base[position="middle"] nav section {
flex-grow: 1;
}
-[xml-data="sitemap"] main section {
+[data-xml="sitemap"] main section {
padding: 1rem;
}
-[xml-data="sitemap"] section a {
+[data-xml="sitemap"] section a {
text-decoration: none;
}
-[xml-data="sitemap"] section a:hover {
+[data-xml="sitemap"] section a:hover {
text-decoration: underline;
}
/* ----- Responsive ----- */
@media screen and (max-width: 1220px) {
- column-left {
+ column-base[position="right"] {
+ width: 38%;
+ }
+ column-base[position="left"] {
flex: none;
- margin: 0.5rem;
+ width: auto;
}
- column-left nav a {
+ column-base[position="left"] nav a {
flex-direction: column-reverse;
justify-content: center;
white-space: nowrap;
overflow: hidden;
}
- column-left nav a span {
+ column-base[position="left"] nav a span {
padding-top: 0.5rem;
}
+ micro-author micro-card {
+ flex-direction: column;
+ text-align: center;
+ }
+ micro-author micro-card > *:not(:last-child),
+ micro-author micro-card > p:not(:last-child) {
+ margin-bottom: 0.5rem;
+ }
+ micro-author article {
+ flex: none;
+ }
+ micro-author article > * {
+ white-space: normal;
+ }
+ time-line ul {
+ padding: 0 2rem;
+ }
}
-@media screen and (max-width: 1055px) {
- column-left,
- search-entry,
- column-middle main > nav section {
+@media screen and (max-width: 1080px) {
+ search-box,
+ column-base[position="left"],
+ column-base[position="middle"] > nav:first-child section {
display: none;
}
- column-middle main > nav {
+ column-base[position="middle"] > nav:first-child {
justify-content: space-between;
overflow-x: auto;
overflow-y: hidden;
}
- column-middle main > nav icon-navigator[hidden] {
+ column-base[position="middle"] > nav:first-child icon-navigator[hidden] {
display: inline;
}
tag-deck {
@@ -2081,15 +2472,23 @@ link-card article a {
}
}
-@media screen and (max-width: 925px) {
- column-right {
+@media screen and (max-width: 920px) {
+ html[data-document="html"],
+ html[data-document="xhtml"] {
+ margin: 0;
+ }
+ nav + main,
+ profile-box {
+ margin-top: 4rem;
+ }
+ column-base[position="right"] {
display: none;
}
- column-middle {
+ column-base[position="middle"] {
display: block;
max-width: 100%;
}
- column-middle main > nav {
+ column-base[position="middle"] > nav:first-child {
position: fixed;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
}
@@ -2097,59 +2496,40 @@ link-card article a {
max-width: 600px;
margin: 0 auto;
}
- micro-metadata {
+ micro-card header {
line-height: inherit;
}
- micro-header section {
+ profile-box section {
display: block;
}
- micro-author micro-header h2,
- micro-author micro-header h3 {
- white-space: initial;
- }
- micro-author micro-summary {
+ micro-author micro-card {
flex-direction: column;
text-align: center;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--border-lighter);
}
- micro-author micro-summary micro-header,
- micro-author micro-summary micro-thumbnail,
- micro-author micro-summary p:not(:last-child) {
+ micro-author micro-card article,
+ micro-author micro-card header figure,
+ micro-author micro-card p:not(:last-child) {
flex: auto;
margin: 0 0 0.75rem 0;
}
- navigation-separator hr[hidden] {
- border-color: transparent;
- display: flex;
- height: 0;
- margin: 0;
- padding-top: 4rem;
- border: none;
- }
- html {
- margin: 0;
- }
- body {
- display: block;
- overflow-y: scroll;
- }
tab-bar:active,
tab-bar:hover,
tab-bar:focus,
tab-bar:focus-within,
tab-bar:focus-visible,
- column-middle main > nav:active,
- column-middle main > nav:hover,
- column-middle main > nav:focus,
- column-middle main > nav:focus-within,
- column-middle main > nav:focus-visible {
+ column-base[position="middle"] > nav:first-child:active,
+ column-base[position="middle"] > nav:first-child:hover,
+ column-base[position="middle"] > nav:first-child:focus,
+ column-base[position="middle"] > nav:first-child:focus-within,
+ column-base[position="middle"] > nav:first-child:focus-visible {
box-shadow: 1rem -0.2rem 1rem -1rem inset, -1rem -0.2rem 1rem -1rem inset;
}
}
@media screen and (max-width: 460px) {
- micro-summary article {
+ micro-card > article {
margin-left: 0;
}
tag-card {
@@ -2161,23 +2541,25 @@ link-card article a {
/* ----- Self Frames ----- */
@media (max-height: 12rem) {
+ nav + main {
+ margin-top: 0;
+ }
micro-card {
width: 100vw;
padding-right: 1rem;
}
- micro-summary {
+ micro-card {
min-height: 14rem;
}
- :not(#main):target micro-summary,
- :not(#main):target micro-summary:hover {
+ :not(#main):target micro-card,
+ :not(#main):target micro-card:hover {
outline: none;
}
:target::before {
display: none;
}
- main > footer,
- column-middle main > nav,
- navigation-separator hr[hidden] {
+ column-base[position="middle"] > nav:first-child,
+ column-base[position="middle"] > footer:last-child {
display: none;
}
}
@@ -2186,124 +2568,156 @@ link-card article a {
text-animation {
height: 0;
+ cursor: default;
}
text-animation,
text-animation span {
display: inline-block;
+ text-decoration: underline;
+ -webkit-text-decoration-style: double;
+ text-decoration-style: double;
}
-text-animation[rattle],
-text-animation[default] {
- animation: tilt-rightward 0.15s infinite, tilt-leftward 0.2s infinite;
+text-animation:hover,
+text-animation:hover span {
+ text-decoration: none;
}
-text-animation[hang] {
+text-animation[rattle]:hover,
+text-animation[default]:hover {
+ animation: tilt-rightward 0.1s infinite, tilt-leftward 0.15s infinite;
+}
+
+text-animation[hang]:hover {
animation: tilt-rightward 1.3s infinite, tilt-leftward 1.8s infinite;
}
-text-animation[squeeze] {
+text-animation[squeeze]:hover {
animation: squeeze 1s infinite;
}
-text-animation[twitch] {
+text-animation[twitch]:hover {
animation: quiver 2.25s infinite, quiver 1.45s infinite;
}
-text-animation[tremble] {
+text-animation[tremble]:hover {
animation: leftward 0.1s infinite, quiver 0.75s infinite,
quiver 1.35s infinite;
}
-text-animation[grow] {
+text-animation[grow]:hover {
animation: maximize 1.4s infinite;
}
-text-animation[shrink] {
+text-animation[shrink]:hover {
animation: minimize 1.25s infinite;
}
-text-animation[grow],
-text-animation[shrink] {
+text-animation[grow]:hover,
+text-animation[shrink]:hover {
transform-origin: right 1rem;
}
-text-animation[distort] span {
+text-animation[distort]:hover span {
animation: distort 0.25s infinite, distort 0.55s infinite,
distort 0.75s infinite;
}
-text-animation[roll] span {
- animation: rotateY 2s infinite;
- animation-delay: calc(0.2s * var(--frame));
+text-animation[roll]:hover span {
+ animation: rotateY 1.5s infinite;
+ animation-delay: calc(0.1s * var(--frame));
}
-text-animation[flip] span {
- animation: rotateX 2.35s infinite;
- animation-delay: calc(0.2s * var(--frame));
+text-animation[flip]:hover span {
+ animation: rotateX 1.5s infinite;
+ animation-delay: calc(0.1s * var(--frame));
}
-text-animation[twirl] span {
- animation: rotateZ 3s infinite;
- animation-delay: calc(0.2s * var(--frame));
+text-animation[twirl]:hover span {
+ animation: rotateZ 1.5s infinite;
+ animation-delay: calc(0.1s * var(--frame));
}
-text-animation[wave] span {
+text-animation[wave]:hover span {
animation: up 1s infinite;
animation-delay: calc(0.1s * var(--frame));
}
-text-animation[skip] span {
+text-animation[skip]:hover span {
animation: skip 1s infinite;
animation-delay: calc(0.1s * var(--frame));
}
-text-animation[jiggle] span {
+text-animation[jiggle]:hover span {
animation: up 0.2s infinite, down 0.3s infinite, leftward 0.25s infinite;
animation-delay: calc(0.1s * var(--frame));
}
-text-animation[float] span {
+text-animation[float]:hover span {
animation: up 1s infinite;
}
-text-animation[hop] span {
+text-animation[hop]:hover span {
animation: hop 1s infinite;
}
-text-animation[shake] span {
+text-animation[shake]:hover span {
animation: left 0.15s infinite;
}
-text-animation[waggle] span {
+text-animation[waggle]:hover span {
animation: left 0.5s infinite;
}
-text-animation[jump] span {
+text-animation[jump]:hover span {
animation: up 0.15s infinite;
}
-text-animation[vibrate] span {
+text-animation[vibrate]:hover span {
animation: up 0.125s infinite, left 0.15s infinite;
}
+main > * {
+ animation: paint ease-in 0.3s;
+}
+
+tab-bar,
+profile-box {
+ animation: paint ease-in 0.25s;
+}
+
+column-base[position="right"] time {
+ animation: paint ease-in 0.15s;
+}
+
+@keyframes paint {
+ 0%,
+ 90% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
@keyframes rotateY {
0%,
- 50% {
+ 10% {
transform: rotateY(360deg);
}
}
@keyframes rotateX {
0%,
- 50% {
+ 10% {
transform: rotateX(360deg);
}
}
@keyframes rotateZ {
0%,
- 50% {
+ 10% {
transform: rotateZ(360deg);
}
}
diff --git a/assets/data/media/logo.png b/assets/data/media/logo.png
index 51baf7d..98b4003 100644
--- a/assets/data/media/logo.png
+++ b/assets/data/media/logo.png
Binary files differ
diff --git a/assets/js/index.js b/assets/js/index.js
index cc61f84..d698127 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -3,41 +3,56 @@
if (cookiesDisabled) {
document.cookie = "disabled";
document.cookie.indexOf("disabled");
- return console.log("Pager is disabled due to cookie restrictions.");
+ return console.warn("WARNING: Pager disabled due to cookie restrictions");
}
- let settings = {
- pager: {}
+ let seek;
+ let pager = {};
+ const key = "config.scroll.pager.urls";
+ if (!localStorage[key]) localStorage[key] = JSON.stringify(pager);
+ let url = function() {
+ return self.location.href.split("#")[0].split("?")[0];
};
- const url = self.location.href.split("#")[0].split("?")[0];
- const scrollRestore = (url)=>{
+ const scrollHash = function(url) {
+ const hash = self.location.hash;
+ const fragment = hash.slice(1) && document.getElementById(hash.slice(1));
+ const fragmented = hash.length > 0;
+ const hashed = fragmented && document.body.contains(fragment);
+ if (hashed) {
+ self.location.hash = hash;
+ self.location.href = hash;
+ if ("scroll-margin-top" in document.body.style === false && fragment.textContent !== "") {
+ self.scrollBy(0, -6 * parseFloat(getComputedStyle(document.documentElement).fontSize));
+ }
+ }
+ return hashed;
+ };
+ const scrollRestore = function(url) {
if (history.scrollRestoration) history.scrollRestoration = "manual";
- if (localStorage["settings"]) {
- settings = JSON.parse(localStorage["settings"]);
- }
- const fragment = document.getElementById(location.hash.slice(1));
- const fragmentInURL = self.location.hash.length > 0;
- if (fragmentInURL && document.body.contains(fragment)) {
- settings["pager"][url] = self.pageYOffset;
- localStorage["settings"] = JSON.stringify(settings);
- fragment.scrollIntoView();
- self.addEventListener("load", function() {
- fragment.scrollIntoView();
- });
- return;
- }
- if (settings["pager"][url] > 0) {
- self.scrollTo(0, settings["pager"][url]);
- return;
- }
- settings["pager"][url] = self.pageYOffset;
- localStorage["settings"] = JSON.stringify(settings);
+ if (scrollHash(url)) return;
+ pager = JSON.parse(localStorage[key]);
+ if (pager[url] > 0) {
+ clearInterval(seek);
+ self.scrollTo(0, pager[url]);
+ let i1 = 0;
+ return seek = setInterval(function(position) {
+ i1++;
+ if (i1 > 100) clearInterval(seek);
+ if (document.documentElement.scrollHeight >= position + document.documentElement.clientHeight) {
+ clearInterval(seek);
+ self.scrollTo(0, position);
+ }
+ }, 4, pager[url]);
+ } else self.scrollTo(0, 0);
+ pager[url] = self.pageYOffset;
+ localStorage[key] = JSON.stringify(pager);
};
- const scrollTrack = (url)=>{
+ const scrollTrack = function(url) {
const currentPosition = self.pageYOffset;
- settings["pager"][url] = currentPosition;
- localStorage["settings"] = JSON.stringify(settings);
+ pager = JSON.parse(localStorage[key]);
+ pager[url] = currentPosition;
+ localStorage[key] = JSON.stringify(pager);
};
- const backTrack = (back, up, event)=>{
+ const scrollReverse = function(back, up, event) {
if (document.body.contains(up) && up.contains(event.target)) {
event.preventDefault();
window.scrollTo(0, 0);
@@ -48,19 +63,106 @@
history.go(-1);
}
};
- self.addEventListener("DOMContentLoaded", function() {
- scrollRestore(url);
- self.addEventListener("click", function(event) {
- const up = document.getElementById("top");
- const back = document.getElementById("back");
- backTrack(back, up, event);
+ [
+ "DOMContentLoaded",
+ "pageshow",
+ "hashchange",
+ "URLChangedCustomEvent"
+ ].forEach(function(event) {
+ self.addEventListener(event, function(event) {
+ if (event.type === "pageshow") {
+ return event.persisted && self.scrollTo(0, pager[url()]);
+ }
+ if (event.type === "DOMContentLoaded") {
+ self.addEventListener("click", function(event) {
+ const up = document.getElementById("top");
+ const back = document.getElementById("back");
+ scrollReverse(back, up, event);
+ });
+ }
+ scrollRestore(url());
});
});
+ [
+ "click",
+ "touchstart",
+ "scroll"
+ ].forEach(function(event) {
+ self.addEventListener(event, function() {
+ scrollTrack(url());
+ });
+ });
+})();
+(function() {
+ const cookiesDisabled = !navigator.cookieEnabled;
+ if (cookiesDisabled) {
+ document.cookie = "disabled";
+ document.cookie.indexOf("disabled");
+ return console.warn("WARNING: Update check disabled due to cookie restrictions");
+ }
+ function fetch(url, method, callback) {
+ const http = new XMLHttpRequest();
+ http.onreadystatechange = function() {
+ if (http.readyState === 4 && http.status === 200) {
+ if (callback) callback(http);
+ }
+ };
+ http.open(method, url);
+ http.setRequestHeader("Pragma", "no-cache");
+ http.setRequestHeader("Cache-Control", "no-cache");
+ http.send();
+ return http;
+ }
+ const key = "config.update";
+ let stamps = {};
+ if (!sessionStorage[key + ".urls"]) sessionStorage[key + ".urls"] = JSON.stringify(stamps);
+ function update() {
+ const url = self.location.href.split("#")[0].split("?")[0];
+ const indicator = document.querySelector("a[data-update]");
+ if (indicator === null || indicator.dataset.update === "refresh") return;
+ indicator.cloneNode();
+ fetch(url, "HEAD", function(request) {
+ const local = document.querySelector('meta[name="last-modified"]').content || document.lastModified;
+ const remote = request.getResponseHeader("last-modified") || '';
+ const modified = Date.parse(remote || local) > Date.parse(local);
+ const drift = Date.parse(remote || local) - Date.parse(local);
+ if (drift < 10000) return;
+ stamps = JSON.parse(sessionStorage[key + ".urls"]);
+ if (stamps[url] === remote) return;
+ stamps[url] = remote;
+ sessionStorage[key + ".urls"] = JSON.stringify(stamps);
+ if (remote && modified) {
+ fetch(url, "GET", function() {
+ indicator.href = url.replace(/^https:/, "http:");
+ indicator.removeAttribute("id");
+ indicator.dataset.update = "refresh";
+ console.log("INFO: R: " + remote);
+ console.log("INFO: L: " + local);
+ console.log("INFO: D: " + drift);
+ console.log("INFO: M: " + modified);
+ });
+ }
+ });
+ }
+ let scrolled;
+ let delay = 1000;
+ let delayed = 0;
self.addEventListener("scroll", function() {
- scrollTrack(url);
+ if (scrolled) clearTimeout(scrolled);
+ scrolled = setTimeout(function() {
+ update();
+ delay = delay + delayed;
+ delayed = delay - delayed;
+ }, delay);
});
- self.addEventListener("hashchange", function() {
- scrollRestore(url);
+ [
+ "focus",
+ "load",
+ "URLChangedCustomEvent"
+ ].forEach(function(event) {
+ self.addEventListener(event, function() {
+ update();
+ });
});
})();
(function() {
@@ -95,217 +197,92 @@
}
})();
(function() {
- self.addEventListener("DOMContentLoaded", function() {
- let mouseoverTimer;
- let lastTouchTimestamp;
- const prefetches = new Set();
- const prefetchElement = document.createElement("link");
- const isSupported = prefetchElement.relList && prefetchElement.relList.supports && prefetchElement.relList.supports("prefetch") && window.IntersectionObserver && "isIntersecting" in IntersectionObserverEntry.prototype;
- const allowQueryString = "instantAllowQueryString" in document.body.dataset;
- const allowExternalLinks = "instantAllowExternalLinks" in document.body.dataset;
- const useWhitelist = "instantWhitelist" in document.body.dataset;
- const mousedownShortcut = "instantMousedownShortcut" in document.body.dataset;
- let delayOnHover = 65;
- let useMousedown = false;
- let useMousedownOnly = false;
- let useViewport = false;
- if ("instantIntensity" in document.body.dataset) {
- const intensity = document.body.dataset.instantIntensity;
- if (intensity.substr(0, "mousedown".length) == "mousedown") {
- useMousedown = true;
- if (intensity == "mousedown-only") {
- useMousedownOnly = true;
- }
- } else if (intensity.substr(0, "viewport".length) == "viewport") {
- if (!(navigator.connection && (navigator.connection.saveData || navigator.connection.effectiveType && navigator.connection.effectiveType.includes("2g")))) {
- if (intensity == "viewport") {
- if (document.documentElement.clientWidth * document.documentElement.clientHeight < 450000) {
- useViewport = true;
- }
- } else if (intensity == "viewport-all") {
- useViewport = true;
- }
- }
- } else {
- const milliseconds = parseInt(intensity);
- if (!isNaN(milliseconds)) {
- delayOnHover = milliseconds;
- }
- }
- }
- if (isSupported) {
- const eventListenersOptions = {
- capture: true,
- passive: true
+ if (typeof Element !== "undefined") {
+ if (!Element.prototype.matches) {
+ Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+ }
+ if (!Element.prototype.closest) {
+ Element.prototype.closest = function(s) {
+ var el = this;
+ do {
+ if (el.matches(s)) return el;
+ el = el.parentElement || el.parentNode;
+ }while (el !== null && el.nodeType === 1)
+ return null;
};
- if (!useMousedownOnly) {
- document.addEventListener("touchstart", touchstartListener, eventListenersOptions);
- }
- if (!useMousedown) {
- document.addEventListener("mouseover", mouseoverListener, eventListenersOptions);
- } else if (!mousedownShortcut) {
- document.addEventListener("mousedown", mousedownListener, eventListenersOptions);
- }
- if (mousedownShortcut) {
- document.addEventListener("mousedown", mousedownShortcutListener, eventListenersOptions);
- }
- if (useViewport) {
- let triggeringFunction;
- if (window.requestIdleCallback) {
- triggeringFunction = function(callback) {
- requestIdleCallback(callback, {
- timeout: 1500
- });
- };
- } else {
- triggeringFunction = function(callback) {
- callback();
- };
- }
- triggeringFunction(function() {
- const intersectionObserver = new IntersectionObserver(function(entries) {
- entries.forEach(function(entry) {
- if (entry.isIntersecting) {
- const linkElement = entry.target;
- intersectionObserver.unobserve(linkElement);
- preload(linkElement.href);
- }
- });
- });
- document.querySelectorAll("a").forEach(function(linkElement) {
- if (isPreloadable(linkElement)) {
- intersectionObserver.observe(linkElement);
- }
- });
- });
- }
}
- function touchstartListener(event) {
- lastTouchTimestamp = performance.now();
- const linkElement = event.target.closest("a");
- if (!isPreloadable(linkElement)) {
- return;
- }
- preload(linkElement.href);
- }
- function mouseoverListener(event) {
- if (performance.now() - lastTouchTimestamp < 1111) {
- return;
- }
- const linkElement = event.target.closest("a");
- if (!isPreloadable(linkElement)) {
- return;
- }
- linkElement.addEventListener("mouseout", mouseoutListener, {
- passive: true
+ }
+ function fetch(url, method, callback) {
+ const http = new XMLHttpRequest();
+ http.onreadystatechange = function() {
+ if (http.readyState === 4 && http.status === 200) {
+ if (callback) callback(http);
+ }
+ };
+ http.open(method, url);
+ http.send();
+ return http;
+ }
+ self.addEventListener("DOMContentLoaded", function() {
+ [
+ "mouseout",
+ "mousedown",
+ "touchstart"
+ ].forEach(function(event) {
+ self.addEventListener(event, function(event) {
+ const url = event.target.closest("a");
+ if (preloadable(url) === undefined) return;
+ preload(url.href);
});
- mouseoverTimer = setTimeout(function() {
- preload(linkElement.href);
- mouseoverTimer = undefined;
- }, delayOnHover);
- }
- function mousedownListener(event) {
- const linkElement = event.target.closest("a");
- if (!isPreloadable(linkElement)) {
- return;
- }
- preload(linkElement.href);
- }
- function mouseoutListener(event) {
- if (event.relatedTarget && event.target.closest("a") == event.relatedTarget.closest("a")) {
- return;
- }
- if (mouseoverTimer) {
- clearTimeout(mouseoverTimer);
- mouseoverTimer = undefined;
- }
- }
- function mousedownShortcutListener(event) {
- if (performance.now() - lastTouchTimestamp < 1111) {
- return;
- }
- const linkElement = event.target.closest("a");
- if (event.which > 1 || event.metaKey || event.ctrlKey) {
- return;
- }
- if (!linkElement) {
- return;
- }
- linkElement.addEventListener("click", function(event) {
- if (event.detail == 1337) {
+ });
+ function preloadable(url) {
+ switch(true){
+ case url === null || url.href === null:
return;
- }
- event.preventDefault();
- }, {
- capture: true,
- passive: false,
- once: true
- });
- const customEvent = new MouseEvent("click", {
- view: window,
- bubbles: true,
- cancelable: false,
- detail: 1337
- });
- linkElement.dispatchEvent(customEvent);
- }
- function isPreloadable(linkElement) {
- if (!linkElement || !linkElement.href) {
- return;
- }
- if (useWhitelist && !("instant" in linkElement.dataset)) {
- return;
- }
- if (!allowExternalLinks && linkElement.origin != location.origin && !("instant" in linkElement.dataset)) {
- return;
- }
- if (![
- "http:",
- "https:"
- ].includes(linkElement.protocol)) {
- return;
- }
- if (linkElement.protocol == "http:" && location.protocol == "https:") {
- return;
- }
- if (!allowQueryString && linkElement.search && !("instant" in linkElement.dataset)) {
- return;
- }
- if (linkElement.hash && linkElement.pathname + linkElement.search == location.pathname + location.search) {
- return;
- }
- if ("noInstant" in linkElement.dataset) {
- return;
+ case url.origin !== location.origin:
+ return;
+ case [
+ "http:",
+ "https:"
+ ].includes(url.protocol) === null:
+ return;
+ case url.protocol === "http:" && location.protocol === "https:":
+ return;
+ case url.hash && url.pathname + url.search == location.pathname + location.search:
+ return;
+ default:
+ return true;
}
- return true;
}
function preload(url) {
- if (prefetches.has(url)) {
- return;
- }
const prefetcher = document.createElement("link");
- prefetcher.rel = "prefetch";
+ prefetcher.rel = "custom-prefetch";
prefetcher.href = url;
+ const selector = 'link[rel="'.concat(prefetcher.rel, '"][href="').concat(prefetcher.href, '"]');
+ const prefetched = document.head.contains(document.querySelector(selector));
+ if (prefetched) {
+ return;
+ }
document.head.appendChild(prefetcher);
- prefetches.add(url);
+ fetch(url, "GET", function() {});
}
});
})();
(function() {
- const hide = (triggers)=>{
- for(let i = 0; i < triggers.length; i++){
- triggers[i].checked = false;
+ const hide = function(triggers) {
+ for(let i1 = 0; i1 < triggers.length; i1++){
+ triggers[i1].checked = false;
}
};
- const hideIfClickedOutside = (menus, triggers, event)=>{
- for(let i = 0; i < menus.length; i++){
- const active = triggers[i].checked === true;
- const outside = !menus[i].contains(event.target);
+ const hideIfClickedOutside = function(menus, triggers, event) {
+ for(let i1 = 0; i1 < menus.length; i1++){
+ const active = triggers[i1].checked === true;
+ const outside = !menus[i1].contains(event.target);
if (outside && active) hide(triggers);
}
};
self.addEventListener("scroll", function() {
- const triggers = document.querySelectorAll("micro-metadata-menu input");
+ const triggers = document.querySelectorAll("menu input");
hide(triggers);
});
[
@@ -313,196 +290,512 @@
"touchstart"
].forEach(function(event) {
self.addEventListener(event, function(event) {
- const menus = document.querySelectorAll("micro-metadata-menu");
- const triggers = document.querySelectorAll("micro-metadata-menu input");
+ const menus = document.querySelectorAll("menu");
+ const triggers = document.querySelectorAll("menu input");
hideIfClickedOutside(menus, triggers, event);
});
});
})();
(function() {
- self.addEventListener("DOMContentLoaded", function() {
- const form = document.getElementById("search-form");
- const query = document.getElementById("search-input");
- const submit = document.getElementById("search-submit");
- const dropdown = document.getElementById("search-results");
- const container = document.getElementById("search-frame");
- function first(element) {
- return element.firstChild.nextElementSibling.firstChild.nextElementSibling;
- }
- function last(element) {
- return element.lastElementChild.firstChild.nextElementSibling;
- }
- function next(element) {
- return element.activeElement.parentElement.nextElementSibling.firstChild.nextElementSibling.focus();
- }
- function previous(element) {
- return element.activeElement.parentElement.previousElementSibling.firstChild.nextElementSibling.focus();
- }
- function press(keyname) {
- document.dispatchEvent(new KeyboardEvent("keydown", {
- "key": keyname
- }));
- }
- submit.addEventListener("click", function(event) {
- first(dropdown).focus();
- press("ArrowDown");
- });
- form.addEventListener("focusin", function() {
- container.setAttribute("data-focus", "");
- initialize();
- });
- form.addEventListener("submit", function(event) {
- event.preventDefault();
- return false;
- });
- form.addEventListener("keydown", function(event) {
- const head = first(dropdown);
- const tail = last(dropdown);
- if (query.contains(event.target)) {
- if (event.keyCode == 27) {
- document.activeElement.blur();
- dropdown.setAttribute("hidden", "");
- container.removeAttribute("data-focus");
+ [
+ "DOMContentLoaded",
+ "URLChangedCustomEvent"
+ ].forEach(function(event) {
+ self.addEventListener(event, function() {
+ const container = document.querySelector("search-box");
+ const dropdown = document.querySelector("search-box ul");
+ const form = document.querySelector("search-box form");
+ const query = document.querySelector("search-box input");
+ const submit = document.querySelector("search-box button");
+ function first(element) {
+ if (element.firstChild.nextElementSibling) {
+ return element.firstChild.nextElementSibling.firstChild.nextElementSibling;
}
}
- if (event.keyCode == 40) {
- event.preventDefault();
- if (document.activeElement == query) head.focus();
- else if (document.activeElement == tail) query.focus();
- else next(document);
+ function last(element) {
+ return element.lastElementChild.firstChild.nextElementSibling;
}
- if (event.keyCode == 38) {
- event.preventDefault();
- if (document.activeElement == query) tail.focus();
- else if (document.activeElement == head) query.focus();
- else previous(document);
+ function next(element) {
+ return element.activeElement.parentElement.nextElementSibling.firstChild.nextElementSibling.focus();
}
- if (event.keyCode == 8) {
- if (document.activeElement != query) {
+ function previous(element) {
+ return element.activeElement.parentElement.previousElementSibling.firstChild.nextElementSibling.focus();
+ }
+ function press(keyname) {
+ document.dispatchEvent(new KeyboardEvent("keydown", {
+ "key": keyname
+ }));
+ }
+ let selected;
+ if (submit === null) return;
+ submit.addEventListener("click", function(event) {
+ if (selected) {
event.preventDefault();
- query.focus();
+ selected.focus();
+ return selected.click();
}
- }
- if (event.keyCode == 13) {
- if (dropdown && document.activeElement == query) {
+ first(dropdown).focus();
+ press("ArrowDown");
+ document.activeElement.click();
+ });
+ [
+ "keyup",
+ "click"
+ ].forEach(function(event) {
+ form.addEventListener(event, function() {
+ if (document.activeElement.nodeName === "A") {
+ return selected = document.activeElement;
+ }
+ selected = undefined;
+ });
+ });
+ form.addEventListener("focusin", function() {
+ container.setAttribute("data-focus", "");
+ initialize();
+ });
+ form.addEventListener("submit", function(event) {
+ event.preventDefault();
+ return false;
+ });
+ form.addEventListener("keydown", function(event) {
+ if (form.contains(event.target)) {
+ if (event.keyCode == 27) {
+ document.activeElement.blur();
+ dropdown.setAttribute("hidden", "");
+ container.removeAttribute("data-focus");
+ }
+ }
+ if (event.keyCode == 8) {
+ if (document.activeElement != query) {
+ event.preventDefault();
+ query.focus();
+ }
+ }
+ const head = first(dropdown);
+ const tail = last(dropdown);
+ if (event.keyCode == 40) {
+ event.preventDefault();
+ if (document.activeElement == query) head.focus();
+ else if (document.activeElement == tail) query.focus();
+ else next(document);
+ }
+ if (event.keyCode == 38) {
event.preventDefault();
- head.focus();
- self.window.location = document.activeElement.href;
+ if (document.activeElement == query) tail.focus();
+ else if (document.activeElement == head) query.focus();
+ else previous(document);
+ }
+ if (event.keyCode == 13) {
+ if (dropdown && document.activeElement == query) {
+ event.preventDefault();
+ head.focus();
+ head.click();
+ }
+ }
+ });
+ let scrolls = 0;
+ self.addEventListener("scroll", function() {
+ if (scrolls > 3) {
+ scrolls = 0;
+ document.activeElement.blur();
+ dropdown.setAttribute("hidden", "");
+ container.removeAttribute("data-focus");
}
+ scrolls++;
+ });
+ self.addEventListener("click", function(event) {
+ if (!form.contains(event.target) && !(document.activeElement === query) && !(document.activeElement === submit)) {
+ dropdown.setAttribute("hidden", "");
+ container.removeAttribute("data-focus");
+ }
+ });
+ function fetch(url, callback) {
+ const http = new XMLHttpRequest();
+ http.onreadystatechange = function() {
+ if (http.readyState === 4 && http.status === 200 && callback) {
+ callback(http);
+ }
+ };
+ http.open("GET", url);
+ http.send();
+ }
+ function script(url) {
+ return new Promise(function(resolve, reject) {
+ const script = document.createElement("script");
+ script.onerror = reject;
+ script.onload = resolve;
+ if (document.currentScript) {
+ document.currentScript.parentNode.insertBefore(script, document.currentScript);
+ } else document.head.appendChild(script);
+ script.src = url;
+ });
}
- });
- let scrolls = 0;
- self.addEventListener("scroll", function() {
- if (scrolls > 3) {
- scrolls = 0;
- document.activeElement.blur();
- dropdown.setAttribute("hidden", "");
- container.removeAttribute("data-focus");
+ let data = {};
+ let boot = true;
+ const options = {
+ key: [
+ "title"
+ ]
+ };
+ function isEmpty(obj) {
+ return Object.keys(obj).length === 0;
+ }
+ function appendItemsTo(local, remote) {
+ const paginated = Object.keys(remote).includes("next_url");
+ if (isEmpty(local)) {
+ local = remote;
+ } else {
+ local.items = local.items.concat(remote.items);
+ }
+ if (paginated) {
+ fetch(remote.next_url, function(request) {
+ appendItemsTo(local, JSON.parse(request.responseText));
+ });
+ } else search(query.value, data.items, options);
+ data = local;
+ }
+ function initialize() {
+ if (boot) {
+ script(window.location.origin + "/js/fuzzysort.js").then(function() {
+ fetch("/index.json", function(request) {
+ appendItemsTo({}, JSON.parse(request.responseText));
+ search("", data.items, options);
+ boot = false;
+ });
+ [
+ "keyup",
+ "focusin"
+ ].forEach(function(event) {
+ query.addEventListener(event, function() {
+ if (data.items) search(query.value, data.items, options);
+ else {
+ boot = true;
+ initialize();
+ }
+ });
+ });
+ }).catch(function(error) {
+ console.error("ERROR: Failed to load fuzzy search", error);
+ });
+ }
+ }
+ function escape(text) {
+ const escaped = document.createElement("textarea");
+ escaped.textContent = text;
+ return escaped.innerHTML;
+ }
+ function search(term, data, options) {
+ const results = fuzzysort.go(term, data, options);
+ let items = "";
+ if (results.length === 0 && term.length >= 0) {
+ let separator = "—";
+ if (term.length === 0) separator = "";
+ items = '<li><a tabindex="0">'.concat(escape(term), " ").concat(separator, " No Results Found</a></li>");
+ dropdown.removeAttribute("hidden");
+ container.setAttribute("data-focus", "");
+ } else {
+ dropdown.removeAttribute("hidden");
+ for(var string in results.slice(0, 10)){
+ const title = results[string].obj.title;
+ let highlight = fuzzysort.highlight(fuzzysort.single(escape(term), escape(title)), "<span>", "</span>");
+ if (highlight === null) highlight = title;
+ items = items + '\n<li>\n<a href="'.concat(results[string].obj.url, '" tabindex="0">').concat(highlight, "</a>\n</li>\n");
+ }
+ }
+ dropdown.innerHTML = items;
}
- scrolls++;
});
- document.addEventListener("click", function(event) {
- if (!form.contains(event.target)) {
- dropdown.setAttribute("hidden", "");
- container.removeAttribute("data-focus");
+ });
+})();
+(function() {
+ function viewport(element) {
+ const options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+ offset: {
+ top: -50,
+ left: 0,
+ bottom: -50,
+ right: 0
+ }
+ };
+ const view = element.getBoundingClientRect();
+ return view.top >= -options.offset.top && view.left >= -options.offset.left && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset.bottom && view.right <= (self.innerWidth || document.documentElement.clientWidth) + options.offset.right;
+ }
+ [
+ "scroll",
+ "DOMContentLoaded"
+ ].forEach(function(event) {
+ self.addEventListener(event, function() {
+ let first = true;
+ let videos = document.querySelectorAll("video");
+ for(i = 0; i < videos.length; i++){
+ videos[i].autoplay = true;
+ videos[i].controls = true;
+ videos[i].loop = true;
+ videos[i].muted = true;
+ videos[i].playsinline = true;
+ videos[i].setAttribute("autoplay", true);
+ videos[i].setAttribute("controls", true);
+ videos[i].setAttribute("loop", true);
+ videos[i].setAttribute("muted", true);
+ videos[i].setAttribute("playsinline", true);
+ const onscreen = viewport(videos[i]);
+ if (first && onscreen) {
+ videos[i].play();
+ first = false;
+ } else {
+ videos[i].pause();
+ }
}
});
- let data = {};
- function isEmpty(obj) {
- return Object.keys(obj).length === 0;
+ });
+})();
+(function() {
+ if (typeof Element !== "undefined") {
+ if (!Element.prototype.matches) {
+ Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+ }
+ if (!Element.prototype.closest) {
+ Element.prototype.closest = function(s) {
+ var el = this;
+ do {
+ if (el.matches(s)) return el;
+ el = el.parentElement || el.parentNode;
+ }while (el !== null && el.nodeType === 1)
+ return null;
+ };
}
- function appendItemsTo(local, remote) {
- const paginated = Object.keys(remote).includes("next_url");
- if (isEmpty(local)) {
- local = remote;
- } else {
- local.items = local.items.concat(remote.items);
- }
- if (paginated) {
- fetchJson(remote.next_url, local);
- }
- data = local;
+ }
+ const disabled = "0s";
+ function walk(children, callback) {
+ for(let i1 = 0; i1 < children.length; i1++){
+ callback(children[i1]);
+ walk(children[i1].children, callback);
}
- function fetchJson(url, store) {
- const httpRequest = new XMLHttpRequest();
- httpRequest.onreadystatechange = function() {
- if (httpRequest.readyState === 4 && httpRequest.status === 200) {
- appendItemsTo(store, JSON.parse(httpRequest.responseText));
+ }
+ self.addEventListener("mousemove", function(event) {
+ if (typeof event.target.closest !== "function") return;
+ tree = event.target.closest("figure") || event.target.closest("article");
+ if (tree !== null) {
+ walk(tree.children, function(element) {
+ const delay = self.getComputedStyle(element).getPropertyValue("transition-delay");
+ if (delay !== disabled) {
+ element.style.setProperty("visibility", "hidden");
}
- };
- httpRequest.open("GET", url);
- httpRequest.send();
- }
- function loadScript(url) {
- return new Promise(function(resolve, reject) {
- const script = document.createElement("script");
- script.onerror = reject;
- script.onload = resolve;
- if (document.currentScript) {
- document.currentScript.parentNode.insertBefore(script, document.currentScript);
- } else {
- document.head.appendChild(script);
+ });
+ walk(tree.children, function(element) {
+ const delay = self.getComputedStyle(element).getPropertyValue("transition-delay");
+ if (delay !== disabled) {
+ element.style.removeProperty("visibility");
}
- script.src = url;
});
}
- let firstRun = true;
- function initialize() {
- if (firstRun) {
- loadScript(window.location.origin + "/js/fuzzysort.js").then(()=>{
- firstRun = false;
- fetchJson("/index.json", {});
- const options = {
- key: [
- "title"
- ]
- };
- query.addEventListener("keyup", function() {
- search(query.value, data.items, options);
- });
- query.addEventListener("focusin", function() {
- search(query.value, data.items, options);
- });
- search(query.value, data.items, options);
- }).catch((error)=>{
- console.log("Error failed to load fuzzy sort: " + error);
+ });
+})();
+(function() {
+ const cookiesDisabled = !navigator.cookieEnabled;
+ if (cookiesDisabled) {
+ document.cookie = "disabled";
+ document.cookie.indexOf("disabled");
+ return console.warn("WARNING: Cannot persist form state due to cookie restrictions");
+ }
+ const storage = document.createEvent("Event");
+ storage.initEvent("storage", true, true);
+ [
+ "pageshow",
+ "URLChangedCustomEvent",
+ "DOMContentLoaded"
+ ].forEach(function(event) {
+ self.addEventListener(event, function(event) {
+ const input = Array.prototype.slice.call(document.querySelectorAll("form input"));
+ const select = Array.prototype.slice.call(document.querySelectorAll("form select"));
+ const textarea = Array.prototype.slice.call(document.querySelectorAll("form textarea"));
+ const summary = Array.prototype.slice.call(document.querySelectorAll("details summary"));
+ const states = input.concat(select).concat(textarea);
+ for(var i1 = 0; i1 < states.length; i1++){
+ const state = states[i1];
+ const sync = i1 === states.length - 1;
+ if (localStorage[state.id]) {
+ if (state.type === "radio" || state.type === "checkbox") {
+ if (localStorage[state.id] === "on") state.checked = true;
+ } else state.value = localStorage[state.id];
+ }
+ if (sync) self.dispatchEvent(storage);
+ state.addEventListener("change", function(event) {
+ localStorage[event.target.id] = event.target.value;
+ const group = document.querySelectorAll("input[name='".concat(event.target.name, "']"));
+ for(var j = 0; j < group.length; j++){
+ const member = group[j];
+ if ((member.type === "radio" || member.type === "checkbox") && !member.checked) {
+ localStorage[member.id] = "off";
+ }
+ }
+ self.dispatchEvent(new Event("storage"));
});
}
- }
- function escape(text) {
- const escaped = document.createElement("textarea");
- escaped.textContent = text;
- return escaped.innerHTML;
- }
- function search(term, data, options) {
- const results = fuzzysort.go(term, data, options);
- let items = "";
- if (results.length === 0 && term.length >= 0) {
- let separator = "—";
- if (term.length === 0) separator = "";
- items = `
- <li>
- <a href="javascript: void(0)" tabindex="0">${escape(term)} ${separator} No Results Found</a>
- </li>
- `;
- dropdown.removeAttribute("hidden");
- container.setAttribute("data-focus", "");
- } else {
- dropdown.removeAttribute("hidden");
- for(const string in results.slice(0, 10)){
- const title = results[string].obj.title;
- let highlight = fuzzysort.highlight(fuzzysort.single(escape(term), escape(title)), "<span>", "</span>");
- if (highlight === null) {
- highlight = title;
+ for(var k = 0; k < summary.length; k++){
+ let child = summary[k];
+ let details = child.parentElement;
+ if (details.id && details.nodeName === "DETAILS") {
+ sessionStorage[details.id] === "false" && details.removeAttribute("open");
+ sessionStorage[details.id] === "true" && details.setAttribute("open", true);
+ child.addEventListener("click", function(event) {
+ let child = event.target.nodeName === "SUMMARY" && event.target || event.target.parentElement;
+ let details = child.parentElement;
+ if (details.id && details.nodeName === "DETAILS") {
+ sessionStorage[details.id] = !details.open;
+ }
+ });
+ }
+ }
+ });
+ });
+ [
+ "storage"
+ ].forEach(function(event) {
+ self.addEventListener(event, function() {
+ let stylesheet;
+ stylesheet = document.querySelector('link[href$="default-simple.css"]');
+ if (localStorage["config.layout.simple"] === "on") stylesheet.rel = "stylesheet";
+ if (localStorage["config.layout.default"] === "on") stylesheet.rel = "alternate stylesheet";
+ stylesheet = document.querySelector('link[href$="default-fast.css"]');
+ if (localStorage["config.navigation.fast"] === "on") stylesheet.rel = "stylesheet";
+ if (localStorage["config.navigation.slow"] === "on") stylesheet.rel = "alternate stylesheet";
+ for(var i1 = 0; i1 < document.styleSheets.length; i1++){
+ let stylesheet = document.styleSheets[i1];
+ for(var k = 0; k < stylesheet.rules.length; k++){
+ let media = stylesheet.rules[k].media;
+ if (media && media.mediaText.includes("prefers-color-scheme")) {
+ if (localStorage["config.theme.light"] === "on") {
+ media.mediaText = "(prefers-color-scheme: dark)";
+ if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "dark") {
+ media.mediaText = "(prefers-color-scheme: light)";
+ }
+ }
+ if (localStorage["config.theme.auto"] === "on") {
+ media.mediaText = "(prefers-color-scheme: dark)";
+ }
+ if (localStorage["config.theme.dark"] === "on") {
+ media.mediaText = "(prefers-color-scheme: light)";
+ if (getComputedStyle(document.body).getPropertyValue("color-scheme") === "light") {
+ media.mediaText = "(prefers-color-scheme: dark)";
+ }
+ }
}
- items = items + `
- <li>
- <a href="${results[string].obj.url}" tabindex="0">${highlight}</a>
- </li>
- `;
}
}
- dropdown.innerHTML = items;
+ });
+ });
+ const early = setInterval(persistence, 4);
+ function persistence() {
+ if (document.styleSheets.length > 0) {
+ self.dispatchEvent(storage);
+ clearInterval(early);
+ }
+ }
+ self.addEventListener("DOMContentLoaded", function() {
+ self.dispatchEvent(storage);
+ clearInterval(early);
+ });
+})();
+(function() {
+ const timeout = 300;
+ const state = "on";
+ const key = "config.navigation.fast";
+ function fetch(url, method, callback) {
+ const http = new XMLHttpRequest();
+ http.onreadystatechange = function() {
+ if (callback && http.readyState === 4) {
+ if (http.status === 200) callback(http);
+ else {
+ console.error("ERROR: Unable to navigate", http);
+ self.location.href = url;
+ }
+ }
+ };
+ http.open(method, url);
+ http.timeout = timeout;
+ http.send();
+ return http;
+ }
+ function styles(node) {
+ return node.nodeName === "LINK" && node.rel && node.rel.includes("stylesheet");
+ }
+ function scripts(node) {
+ return node.nodeName === "SCRIPT" && node.hasAttribute("src");
+ }
+ function filter(url, http) {
+ let live = document;
+ let node = live.head.childNodes.length;
+ let next = new DOMParser().parseFromString(http.responseText, "text/html");
+ if (next.doctype === null || !http.getResponseHeader("content-type").includes("text/html")) return false;
+ while(node--){
+ if (styles(live.head.childNodes[node]) || scripts(live.head.childNodes[node])) {} else {
+ live.head.removeChild(live.head.childNodes[node]);
+ }
+ }
+ while(next.head.firstChild){
+ if (styles(next.head.firstChild) || scripts(next.head.firstChild)) {
+ next.head.removeChild(next.head.firstChild);
+ } else {
+ live.head.appendChild(next.head.firstChild);
+ }
+ }
+ while(live.documentElement.attributes.length > 0){
+ live.documentElement.removeAttribute(live.documentElement.attributes[live.documentElement.attributes.length - 1].name);
+ }
+ while(next.documentElement.attributes.length > 0){
+ live.documentElement.setAttribute(next.documentElement.attributes[next.documentElement.attributes.length - 1].name, next.documentElement.attributes[next.documentElement.attributes.length - 1].value);
+ next.documentElement.removeAttribute(next.documentElement.attributes[next.documentElement.attributes.length - 1].name);
+ }
+ live.body.parentElement.replaceChild(next.body, live.body);
+ }
+ function persist() {
+ let persist = document.createElement("link");
+ persist.rel = "location";
+ persist.target = JSON.stringify(self.location);
+ document.head.appendChild(persist);
+ }
+ self.addEventListener("DOMContentLoaded", function() {
+ if (localStorage[key] !== state) return;
+ persist();
+ });
+ self.addEventListener("popstate", function(event) {
+ if (localStorage[key] !== state) return;
+ const link = JSON.parse(document.querySelector('link[rel="location"]').target);
+ const url = event.target.location;
+ const hashed = link.pathname === url.pathname;
+ if (hashed) return;
+ fetch(url, "GET", function(http) {
+ if (filter(url, http) === false) return self.location.href = url;
+ persist();
+ self.document.dispatchEvent(new CustomEvent("URLChangedCustomEvent", {
+ bubbles: true
+ }));
+ });
+ });
+ self.addEventListener("click", function(event) {
+ if (localStorage[key] !== state) return;
+ const links = document.querySelectorAll("a");
+ for(let i1 = 0; i1 < links.length; i1++){
+ const active = links[i1].contains(event.target);
+ const change = self.location.href !== links[i1].href;
+ const view = links[i1].attributes.hasOwnProperty("download") === false;
+ const local = self.location.origin === links[i1].origin && links[i1].target !== "_self";
+ const hashed = self.location.pathname === links[i1].pathname && links[i1].href.includes("#");
+ if (active && local && change && view && hashed === false) {
+ event.preventDefault();
+ const url = links[i1].href;
+ links[i1].style.cursor = "wait";
+ fetch(url, "GET", function(http) {
+ links[i1].removeAttribute("style");
+ if (filter(url, http) === false) return self.location.href = url;
+ history.pushState({}, "", links[i1].href);
+ persist();
+ self.document.dispatchEvent(new CustomEvent("URLChangedCustomEvent", {
+ bubbles: true
+ }));
+ });
+ }
}
});
})();
@@ -512,56 +805,101 @@
numeric: "always",
style: "long"
});
- const date = ()=>{
- [
- ...document.querySelectorAll("time")
- ].forEach((element)=>{
- try {
- const time = new Date(element.dateTime) || new Date();
- const interval = (new Date().getTime() - time.getTime()) / 1000;
- const seconds = Math.floor(interval);
- const minutes = Math.floor(seconds / 60);
- const hours = Math.floor(minutes / 60);
- const days = Math.floor(hours / 24);
- if (Math.sign(seconds) === 1) {
- if (seconds <= 60) {
- return element.textContent = relative.format(-1 * seconds, "second");
- }
- if (minutes <= 120) {
- return element.textContent = relative.format(-1 * minutes, "minute");
- }
- if (hours <= 48) {
- return element.textContent = relative.format(-1 * hours, "hour");
- }
- if (days <= 60) {
- return element.textContent = relative.format(-1 * days, "day");
+ function viewport(element) {
+ const options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+ offset: 250
+ };
+ const view = element.getBoundingClientRect();
+ return view.top >= -options.offset && view.left >= -options.offset && view.bottom <= (self.innerHeight || document.documentElement.clientHeight) + options.offset && view.right <= (self.innerWidth || document.documentElement.clientWidth) + options.offset;
+ }
+ const date = function(update) {
+ const elements = document.querySelectorAll("time");
+ for(let i1 = 0; i1 < elements.length; ++i1){
+ const offscreen = !viewport(elements[i1]);
+ const hidden = elements[i1].offsetParent === null;
+ if (update === "viewport" && (offscreen || hidden)) continue;
+ (function(element) {
+ try {
+ if (element.dataset.type === "disabled") return;
+ const time = new Date(element.dateTime) || new Date();
+ const interval = (new Date().getTime() - time.getTime()) / 1000;
+ const seconds = Math.round(interval);
+ const minutes = Math.round(seconds / 60);
+ const hours = Math.round(minutes / 60);
+ const days = Math.round(hours / 24);
+ const past = Math.sign(seconds) === 1;
+ const future = Math.sign(seconds) === -1;
+ let tiny = function(string, place) {
+ return string.split(" ").slice(0, place).join(" ") + string.split(" ")[place].charAt(0);
+ };
+ if (element.dataset.type === "default") {
+ tiny = function(string) {
+ return string;
+ };
}
- }
- if (Math.sign(seconds) === -1) {
- if (-1 * days >= 60) {
- return element.textContent = relative.format(-1 * days, "day");
+ if (element.dataset.type === "localDate") {
+ return element.textContent = new Intl.DateTimeFormat([], {
+ dateStyle: "medium"
+ }).format(time).replace(",", "");
}
- if (-1 * hours >= 48) {
- return element.textContent = relative.format(-1 * hours, "hour");
+ if (element.dataset.type === "localTime") {
+ return element.textContent = new Intl.DateTimeFormat([], {
+ hour12: false,
+ timeStyle: "short"
+ }).format(time) + " " + new Intl.DateTimeFormat([], {
+ timeZoneName: "short"
+ }).format(time).split(" ")[1];
}
- if (-1 * minutes >= 120) {
- return element.textContent = relative.format(-1 * minutes, "minute");
+ if (past) {
+ if (seconds <= 60) {
+ return element.textContent = tiny(relative.format(-1 * seconds, "second"), 1);
+ }
+ if (minutes <= 120) {
+ return element.textContent = tiny(relative.format(-1 * minutes, "minute"), 1);
+ }
+ if (hours <= 48) {
+ return element.textContent = tiny(relative.format(-1 * hours, "hour"), 1);
+ }
+ if (days <= 7) {
+ return element.textContent = tiny(relative.format(-1 * days, "day"), 1);
+ }
}
- if (-1 * seconds >= 0) {
- return element.textContent = relative.format(-1 * seconds, "second");
+ if (future) {
+ if (-1 * days >= 4) {
+ return element.textContent = tiny(relative.format(-1 * days, "day"), 2);
+ }
+ if (-1 * hours >= 3) {
+ return element.textContent = tiny(relative.format(-1 * hours, "hour"), 2);
+ }
+ if (-1 * minutes >= 2) {
+ return element.textContent = tiny(relative.format(-1 * minutes, "minute"), 2);
+ }
+ if (-1 * seconds >= 1) {
+ return element.textContent = tiny(relative.format(-1 * seconds, "second"), 2);
+ }
}
+ } catch (error) {
+ console.error("ERROR: Relative time resolution failed", error);
}
- } catch (error) {
- console.error("Error: Unable to resolve relative time format!", error);
- }
- });
+ })(elements[i1]);
+ }
};
const substitution = setInterval(date, 4);
- self.addEventListener("load", ()=>{
- setTimeout(()=>{
+ [
+ "scroll",
+ "URLChangedCustomEvent"
+ ].forEach(function(event) {
+ self.addEventListener(event, function() {
+ date("viewport");
+ });
+ });
+ self.addEventListener("DOMContentLoaded", function() {
+ setTimeout(function() {
clearInterval(substitution);
- setInterval(date, 1000);
+ setInterval(function() {
+ date("viewport");
+ }, 1000);
}, 1000);
});
})();
-console.log("Surface Control: Complete"); \ No newline at end of file
+console.log("INFO: Surface Control Complete"); \ No newline at end of file
diff --git a/assets/templates/markdown-feed.yaml b/assets/templates/markdown-feed.yaml
index fbe763b..ff0aae5 100644
--- a/assets/templates/markdown-feed.yaml
+++ b/assets/templates/markdown-feed.yaml
@@ -21,12 +21,19 @@ feed:
{{ end -}}
---
-{{ $content := .content | replaceRE "{" "&#123;" | replaceRE "}" "&#125;" -}}
+{{ $content := .content }}
+
+{{- $content = replace $content "{" "&#123;" -}}
+{{- $content = replace $content "}" "&#125;" -}}
+{{- $content = replace $content "[" "&#91;" -}}
+{{- $content = replace $content "]" "&#93;" -}}
+
{{ $content }}
-{{- $enclosureDescription := "Image/Picture" -}}
+{{- $caption := "Image/Picture" -}}
+
{{- with $content -}}
- {{ $enclosureDescription = $content | truncate 80 "" }}
+ {{ $caption = $content | truncate 80 "" }}
{{- end }}
{{ with .enclosure -}}
@@ -43,8 +50,8 @@ feed:
(in . ".svg")
(in . ".webp")
-}}
-![{{ $enclosureDescription }}]({{ . }} "
- {{ $enclosureDescription }}"
+![{{ $caption }}]({{ . }} "
+ {{ $caption }}"
)
{{- end -}}
{{- end }}
generated by cgit v1.2.3 (git 2.39.0) at 2024-05-09 23:35:30 +0000