aboutsummaryrefslogtreecommitdiff
path: root/assets/css/default.css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/default.css')
-rw-r--r--assets/css/default.css1451
1 files changed, 930 insertions, 521 deletions
diff --git a/assets/css/default.css b/assets/css/default.css
index f688eaf..0d670b5 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 {
+mark:target a {
+ color: inherit;
+ text-decoration-thickness: 2px;
+}
+
+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,38 +453,38 @@ 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;
}
@@ -399,76 +499,76 @@ html {
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 +578,7 @@ cite {
ul {
list-style: none;
padding-left: 0;
+ margin: 0;
}
nav ol,
@@ -503,8 +604,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 +627,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 +655,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 +675,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 +718,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 +741,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 +766,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 +777,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 +792,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 +821,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 +857,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 +866,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 +956,10 @@ tr:last-child td:last-child {
/* ----- Print ----- */
+article a[href*="pdf"]::after {
+ content: " [pdf]";
+}
+
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
@@ -838,45 +977,52 @@ body {
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 {
+html[data-document="html"] body,
+html[data-document="xhtml"] body {
display: flex;
+ margin: 0 auto;
+ max-width: 1250px;
+}
+
+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 +1037,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 +1047,80 @@ micro-summary {
position: relative;
}
-micro-author micro-summary {
- flex-direction: row;
+micro-card > a {
+ display: none;
}
-micro-summary:hover {
+micro-card:target {
+ border-radius: 0.5rem;
+ outline-offset: -6px;
+ outline: 2px dashed #ccc;
+ outline: 2px dashed var(--border-darker);
+}
+
+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-header {
+micro-author micro-card p:not(:last-child) {
+ flex: 1.75;
+ color: #444;
+ color: var(--fade);
+ max-width: 20rem;
+}
+
+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-thumbnail figure {
+micro-author micro-card header figure:first-child {
+ margin: 0;
+}
+
+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 +1128,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 +1168,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 +1189,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 +1344,135 @@ 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;
+ font-size: 85%;
+ 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-card details[data-disclosure][open] ~ details summary:after {
+ content: none;
}
-micro-summary article details[data-disclosure][open] ~ * {
+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 +1506,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 +1518,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 +1558,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 +1605,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 +1654,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 +1663,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 +1674,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 +1719,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 +1750,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 +1788,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 +1798,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 +1866,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 +1890,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 +1911,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 +1945,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 +1963,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 +2000,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 +2034,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 +2156,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 +2203,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 +2224,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 +2256,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 +2299,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 +2370,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="left"] {
flex: none;
margin: 0.5rem;
}
- 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;
}
+ column-base[position="right"] {
+ width: 38%;
+ }
+ 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 +2464,19 @@ link-card article a {
}
}
-@media screen and (max-width: 925px) {
- column-right {
+@media screen and (max-width: 920px) {
+ 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,36 +2484,24 @@ 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;
}
@@ -2139,17 +2514,17 @@ link-card article a {
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 +2536,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 +2563,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:hover,
+text-animation:hover span {
+ text-decoration: none;
}
-text-animation[rattle],
-text-animation[default] {
- animation: tilt-rightward 0.15s infinite, tilt-leftward 0.2s infinite;
+text-animation[rattle]:hover,
+text-animation[default]:hover {
+ animation: tilt-rightward 0.1s infinite, tilt-leftward 0.15s infinite;
}
-text-animation[hang] {
+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);
}
}
generated by cgit v1.2.3 (git 2.39.0) at 2024-04-28 17:36:07 +0000