diff options
Diffstat (limited to 'assets/css/default.css')
-rw-r--r-- | assets/css/default.css | 2389 |
1 files changed, 1759 insertions, 630 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index 157543d..d3d2b6f 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -20,79 +20,109 @@ 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 { - color-scheme: light dark; - --active-background-alternate: #cce1ff; - --background-bolder: #fff; - --background-transparent: rgba(255, 255, 255, 0.9); - --background: #fefefe; - --border-darker: #ccc; - --border-lighter: #eee; - --button-background: #fff; + --primary: 230; + --secondary: 258; + --accent: 217; + --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%); + --border-lighter: hsl(var(--primary), 35%, 92%); + --button-background: hsl(var(--primary), 0%, 100%); --danger-background-lighter: #fff5f5; --danger-background: #fcd2cf; --danger: #8f0000; - --disabled: #999; - --fade: #555; - --focus-within-background: #f0ecf9; - --foreground: #111; - --hover-background-alternate: #ebf3ff; - --hover-background: #eee; - --input-background: #eff3f4; - --link: #0149bc; - --shadow: #999; - --spoiler: #333; + --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: hsl(var(--primary), 0%, 27%); --success-background: #d5f3c4; --success: #1d3c0c; - --table-row-even-background: #f9f9f9; - --table-row-odd-background: #f3f3f3; + --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; - --widget-background: #f9f9f9; + --widget-background: hsl(var(--secondary), 25%, 97%); + color-scheme: light; } @media (prefers-color-scheme: dark) { :root { - --active-background-alternate: #425a8a; - --background-bolder: #0d0d0d; - --background-transparent: rgba(28, 28, 28, 0.9); - --background: #111; - --border-darker: #555; - --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; - --disabled: #999; - --fade: #aaa; + --fade: hsl(var(--secondary), 0%, 66%); --focus-within-background: #291933; - --foreground: #ddd; + --foreground: hsl(var(--secondary), 0%, 87%); --hover-background-alternate: #1c263a; - --hover-background: #303030; - --input-background: #333; - --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-row-even-background: #273030; - --table-row-odd-background: #2e3838; + --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: #171717; + --widget-background: hsl(var(--secondary), 0%, 9%); + color-scheme: dark; } - img { + kbd, + img, + video, + figure span { filter: brightness(75%); } - code-block { + code-block pre, + code-block header { filter: invert(90%); - display: block; } } -/* ----- Psuedo ----- */ +/* ----- Pseudo ----- */ *, ::before, @@ -106,37 +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; } -:focus:not(html):not(body):not(pre):not(svg):not(button):not(input) { - background-color: #ffe699; - background-color: var(--warning-background); - color: #111; - color: var(--warning); +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 !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) { +: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; } @@ -157,81 +202,364 @@ skip-link a:focus { border-radius: 0.5rem; } -/* ----- Elements ----- */ +/* ----- Typography ----- */ -html { - font-size: 95%; - line-height: 1.5; - word-break: break-word; - text-rendering: optimizeSpeed; - margin-left: calc(100vw - 100%); - margin-right: 0; +h1, +h2, +h3 { + font-size: 100%; + 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 { +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"; } -body, -dl dl, -dl ol, -dl ul, -ol dl, -ul dl, -ol ol, -ol ul, -ul ol, -ul ul, +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), +ol:not(:last-child), +ul:not(:last-child), +dl:not(:last-child), +table:not(:last-child), +figure:not(:last-child), +code-block: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; +} + +dt { + font-weight: 700; +} + +dt:not(:first-child) { + margin-top: 0.5rem; +} + +footer, +figcaption { + color: #444; + color: var(--fade); + font-size: 85%; + margin: 0.5rem 0; + text-align: center; +} + +sup, +sub { + display: inline-block; + vertical-align: bottom; +} + +sup { + vertical-align: text-top; + font-size: 85%; +} + +sub { + font-size: 85%; +} + +article > mark[id] { + display: block; +} + +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%, + #ffe699 10%, + #ffe699 90%, + transparent 90% + ); + background: linear-gradient( + to bottom, + transparent 10%, + var(--warning-background) 10%, + var(--warning-background) 90%, + transparent 90% + ); + color: #000; +} + +ins { + background: linear-gradient( + to bottom, + transparent 10%, + #d5f3c4 10%, + #d5f3c4 90%, + transparent 90% + ); + background: linear-gradient( + to bottom, + transparent 10%, + var(--success-background) 10%, + var(--success-background) 90%, + transparent 90% + ); + color: #1d3c0c; + color: var(--success); + text-decoration: none; +} + +del { + background: linear-gradient( + to bottom, + transparent 10%, + #fcd2cf 10%, + #fcd2cf 90%, + transparent 90% + ); + background: linear-gradient( + to bottom, + transparent 10%, + var(--danger-background) 10%, + var(--danger-background) 90%, + transparent 90% + ); + color: #8f0000; + color: var(--danger); +} + +s { + background: linear-gradient( + to bottom, + transparent 10%, + #444 10%, + #444 90%, + transparent 90% + ); + background: linear-gradient( + to bottom, + transparent 10%, + var(--spoiler) 10%, + var(--spoiler) 90%, + transparent 90% + ); + color: transparent; + text-decoration: none; +} + +input[type="checkbox"]:checked + s { + background: inherit; + color: inherit; +} + +input[type="checkbox"] { + -webkit-appearance: none; + appearance: none; + background-color: transparent; + border-radius: 25%; + border: 1px solid; + border-color: inherit; + height: 1.25rem; + margin: 0 0.25rem; + vertical-align: middle; + vertical-align: text-bottom; + width: 1.25rem; +} + +input[type="checkbox"]:checked { + color: inherit; +} + +input[type="checkbox"]:checked:after { + border-bottom-style: solid; + border-left-style: solid; + border-width: 0.4rem; + content: ""; + display: block; + height: 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:not(:last-child) { + padding-left: 1rem; + margin: 0 0 0 1rem; + border-left: 2px solid; + border-color: #eee; + border-color: var(--border-darker); +} + +blockquote footer { + text-align: right; + font-size: 100%; +} + +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[data-orientation="portrait"] { + width: 50%; +} + +video:focus { + filter: brightness(100%); +} + +video-container { + display: block; + text-align: center; +} + +kbd { + background-color: #fff; + border-radius: 0.25rem; + border: 1px solid #bbb; + color: #333; + display: inline-block; + font-size: 0.85em; + font-weight: 700; + line-height: 1; + padding: 0.1rem 0.25rem; + white-space: nowrap; +} + +/* ----- Elements ----- */ + 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 { @@ -239,13 +567,13 @@ cite { } ul { - list-style: disc; - padding-left: 2rem; + list-style: none; + padding-left: 0; + margin: 0; } nav ol, nav ul { - list-style: none; display: inline-block; padding: 0; } @@ -267,22 +595,16 @@ q:after { content: "\201D"; } -object { - width: 100%; - border: 1px solid #ccc; - border: 1px solid var(--border-lighter); - min-height: 16rem; - border-radius: 0.5rem; +pre code { + white-space: pre-line; } -details { +summary, +abbr[title] label, +menu label { cursor: pointer; } -details:hover summary span { - text-decoration: underline; -} - a { color: #0149bc; color: var(--link); @@ -293,24 +615,46 @@ a { a:hover { color: #111; color: var(--foreground); +} + +a:hover, +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; } -a:hover img { - box-shadow: 0 0 14px #999; - box-shadow: 0 0 14px var(--shadow); - filter: unset; +a[data-internal] { + text-decoration-color: #aaa; + text-decoration-thickness: 0.15rem; +} + +document-attachment object { + width: 100%; + border: 2px solid #ccc; + border: 2px solid var(--border-darker); + min-height: 16rem; + border-radius: 0.5rem; + display: flex; + align-items: center; + text-align: center; } -column-left nav { +document-attachment object p { + margin: 1rem; +} + +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); @@ -322,32 +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; } -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"; +column-base[position="left"] nav a svg { + height: 1.5em; + width: 1.5em; } abbr[title] { @@ -359,10 +705,18 @@ abbr[title]:hover { border-bottom: 2px dashed; } -[type="checkbox"]:checked ~ abbr[title]::after { +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; @@ -378,35 +732,35 @@ 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 { - width: 100%; + width: 1px; + min-width: 100%; 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 { @@ -414,27 +768,39 @@ self-embed iframe { max-height: 11rem; } -img { +img, +figure object { height: auto; max-width: 100%; - border: 1px solid #ccc; - border: 1px solid var(--border-darker); + border-width: 1px; + border-style: solid; + border-color: #ccc; + border-color: var(--border-darker); border-radius: 0.5rem; object-fit: cover; display: block; + display: flex; + justify-content: center; + align-items: center; background-color: #fefefe; + user-select: none; + vertical-align: middle; } -img, -iframe { - user-select: none; +img:hover, +video:hover, +figure span:hover { + box-shadow: 0 0 14px #00000060; + box-shadow: 0 0 14px var(--shadow); + filter: brightness(90%); } p { - line-height: 1.35; + margin: 0; } svg { + vertical-align: middle; stroke-width: 0.08rem; } @@ -446,31 +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, -paginator-navigation a, -micro-author micro-summary > a { +nav[data-type="pagination"] a, +micro-author micro-card > a { align-items: center; - appearance: button; + appearance: none; background-color: #fff; background-color: var(--button-background); + border: 1px solid; border-radius: 0.5rem; - border: 1px solid #ccc; - border: 1px solid var(--border-lighter); - box-shadow: 0 1px 1px #999; + 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; @@ -478,16 +848,43 @@ micro-author micro-summary > a { height: 1.95rem; padding: 0.125rem 0.5rem; text-decoration: none; + text-transform: none; + overflow: visible; +} + +button:hover, +[type="reset"]:hover, +[type="button"]:hover, +[type="submit"]:hover, +micro-tags 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, -micro-author micro-summary > a svg { +micro-author micro-card a svg, +nav[data-type="pagination"] a svg { height: 1.25rem; - margin: 0 0.25rem; + width: 1.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 ----- */ @@ -497,7 +894,6 @@ table { border-spacing: 0; border: 1px solid #ccc; border: 1px solid var(--border-darker); - padding: 0.5rem 0 0 0; width: 100%; background-color: #fefefe; background-color: var(--background); @@ -506,20 +902,19 @@ table { th { border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--border-darker); - padding: 0 0.5rem 0.5rem 0.5rem; - text-align: left; } +th, td { - padding: 0.5rem 0 0.5rem 0.5rem; border-right: 1px solid #ccc; border-right: 1px solid var(--border-darker); border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--border-darker); + padding: 0.5rem 1rem; } -td:last-child { - padding-right: 0.5rem; +td:last-child, +th:last-child { border-right: none; } @@ -529,12 +924,12 @@ tr:last-child td { tbody tr:nth-child(odd) td { background-color: #f3f3f3; - background-color: var(--table-row-odd-background); + background-color: var(--table-odd-background); } tbody tr:nth-child(even) td { background-color: #f9f9f9; - background-color: var(--table-row-even-background); + background-color: var(--table-even-background); } tbody tr:hover td { @@ -552,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) ")"; @@ -564,53 +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; - flex: 1; - justify-content: flex-end; +column-base[position="left"] { + width: 14.25%; } -column-right { - flex: 2; - max-width: 400px; +column-base[position="right"] { + width: 28%; } -column-left, -column-right { +column-base[position="left"], +column-base[position="right"] { margin: 0.5rem 2rem; } -column-middle { - flex: 6; +column-base[position="middle"] { max-width: 600px; min-height: 100vh; width: 100%; + height: fit-content; } micro-card, micro-tags, -micro-expires, -micro-article { +profile-box { display: block; } -message-archive h1 { +source-files h1, +archive-list h1 { text-align: center; font-weight: 400; font-size: 150%; + font-variant: all-small-caps; } micro-tags { @@ -625,53 +1046,90 @@ micro-tags a { margin: 0 0.25rem 0.5rem 0; } -micro-summary, -micro-article { +micro-card { border-bottom: 1px solid; border-color: #eee; border-color: var(--border-lighter); display: flex; + flex-direction: column; padding: 1rem; position: relative; } -micro-summary:hover { +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-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; +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 { - line-height: 1; - margin: 0 1.25rem 0 0.5rem; +micro-author micro-card p:not(:last-child) { + flex: 1.75; + color: #444; + color: var(--fade); + max-width: 20rem; +} + +micro-author article { flex: 1; - height: 3rem; - padding: 0 0.5rem; + min-width: 3rem; } -micro-thumbnail a { - display: block; +micro-author article h2 { + line-height: 1.25; +} + +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 img { +micro-card header figure > a, +micro-card header figure > a:hover { + color: #000; + display: block; + text-decoration: none; +} + +tag-card 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; @@ -679,111 +1137,214 @@ micro-thumbnail figure img { max-height: 3.5rem; } -micro-content { - flex: 8; - width: 0; +micro-card > article { + margin-left: 4.25rem; } -micro-content > figure img { +micro-card article ul { + list-style-type: "\2012"; + padding-left: 2rem; +} + +micro-card article li { + padding-left: 0.5rem; +} + +micro-card article li::marker { + opacity: 0.85; +} + +micro-card article ul li + li { + margin-top: 0.25rem; +} + +micro-card article figure img { border: none; margin: 0 auto; + box-shadow: 0 0 3px #00000060; + box-shadow: 0 0 3px var(--shadow); } -micro-content > figure > a { - background-color: #000; +micro-card article figure img:before { + background-color: #fefefe; + background-color: var(--background); border-radius: 0.5rem; + box-shadow: 0 1px 6px #00000060; + box-shadow: 0 1px 6px var(--shadow); + color: #111; + color: var(--foreground); + padding: 0.5rem 0.75rem; + margin: 1rem; +} + +micro-card article figure > a { + border-radius: 0.5rem; + display: inline-block; +} + +micro-card article figure > a[data-orientation="landscape"] { display: block; } -micro-metadata { - align-items: center; +micro-card article figure > a[data-orientation="landscape"] img { + width: 100%; +} + +micro-card header { color: #444; color: var(--fade); display: flex; - line-height: 1.25; - margin-bottom: 0.5rem; + align-items: center; + margin-bottom: 0.25rem; } -micro-metadata h2 { +micro-card header h2 { display: inline; } -micro-metadata section a { +micro-card header meta-data { + word-break: break-all; + word-break: break-word; +} + +micro-card header meta-data a { color: inherit; } -micro-metadata expiry-date, -micro-metadata word-limit em, -micro-metadata draft-label em { +micro-card header meta-data > *:not(:last-child) { + margin-right: 0.5rem; +} + +micro-card header meta-data > *:hover { + color: #111; + color: var(--foreground); +} + +meta-expiry, +meta-draft em, +meta-wordcount word-limit em { color: #8f0000; color: var(--danger); font-style: normal; } -micro-metadata draft-label em { +meta-draft em { font-variant: all-small-caps; } -micro-header footer svg, -micro-metadata expiry-date svg, -micro-metadata anchored-entry svg, -micro-metadata unlisted-entry 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-entry { +meta-unlisted { font-variant: all-small-caps; } s label, abbr[title], -abbr[title] label, -micro-metadata read-time, -micro-metadata word-limit, -micro-metadata expiry-date, -micro-metadata unlisted-entry { +meta-expiry, +meta-readtime, +meta-datetime, +meta-unlisted, +meta-wordcount { cursor: help; } -anchored-entry { +meta-anchored { display: flex; - align-items: center; margin-bottom: 0.25rem; - margin-top: -0.5rem; + width: 100%; +} + +meta-anchored > * { + margin-right: 0.5rem; + display: flex; + flex-wrap: wrap; + align-items: center; + text-decoration: none; } -anchored-entry svg { +meta-anchored svg { margin-right: 0.25rem; } -anchored-entry span { +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; +} + +menu context-menu { + min-width: 10rem; +} + +menu context-menu svg { margin-right: 0.25rem; } -anchored-entry span:not(:last-child):after { - content: "\00B7"; - margin-left: 0.25rem; +menu context-menu a { + display: block; + padding: 0.5rem 1rem; } -anchored-pinned svg { - fill: #9ed1fa; +menu context-menu a:hover { + background-color: #eee; + background-color: var(--hover-background); + border-radius: 0.25rem; } -anchored-liked svg { - fill: #cd5c5c; +micro-card[id] article h1 a, +micro-card[id] article h2 a, +micro-card[id] article h3 a { + color: inherit; } -micro-header micro-header-image img { +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; +} + +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; +} + +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; @@ -792,123 +1353,144 @@ 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 { - margin-right: 1rem; +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 h2 { - margin-bottom: 0.25rem; - font-size: 700; -} - -micro-header h3 { +profile-box h3 { font-weight: 400; color: #444; color: var(--fade); - margin: 0; } -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-unsafe-content * { - visibility: hidden; - opacity: 0; - pointer-events: none; +micro-card details[data-disclosure] summary { + display: inline-block; + margin: 0 -0.25rem 0.5rem -0.25rem; + padding: 0.25rem; } -micro-unsafe details svg { - stroke-width: 0.1rem; - margin-right: 0.15rem; +micro-card details[data-disclosure] summary:focus a { + color: inherit; } -micro-unsafe details summary { - font-variant: all-small-caps; - letter-spacing: 0.025rem; - line-height: 1.25; - color: #8f0000; - color: var(--danger); - list-style: none; +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-unsafe details > summary::-webkit-details-marker { - display: none; +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; + display: inline; + vertical-align: bottom; } -micro-unsafe-content { - border-radius: 0.25rem; - display: block; - background: repeating-linear-gradient( - 180deg, - #ff9999, - #ff9999 1rem, - #eee 1rem, - #eee 2rem - ); +micro-card details[data-disclosure] summary:hover, +micro-card details[data-disclosure] summary:hover:after { + text-shadow: 0 0 currentColor; } -micro-unsafe details[open] + micro-unsafe-content * { - filter: none; - transition: 1s; - visibility: visible; - opacity: 1; - background: none; - outline: none; - pointer-events: auto; +micro-card details[data-disclosure] summary:hover:after { + text-decoration: underline; } -micro-unsafe details[open] + micro-unsafe-content { - background: none; +micro-card details[data-disclosure] summary:after { + content: "HIDDEN"; } -@supports (filter: blur(2rem)) { - micro-unsafe-content * { - filter: blur(2rem); - visibility: unset; - opacity: unset; - } - micro-unsafe-content { - outline: none; - background: unset; - } +micro-card details[data-disclosure][open] summary:after { + content: "OPENED"; +} + +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: #eee; + border-color: var(--border-lighter); + margin: 0; + padding: 0.5rem 0; } -tab-list { +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; - text-overflow: ellipsis; + overflow-y: hidden; vertical-align: top; white-space: nowrap; width: 100%; } -tab-list aside { +tab-bar nav { display: flex; justify-content: center; border-bottom: 1px solid; @@ -917,7 +1499,7 @@ tab-list aside { min-width: 450px; } -tab-list aside a { +tab-bar nav a { border-left: 1px solid; border-right: 1px solid; border-top-left-radius: 0.5rem; @@ -925,32 +1507,53 @@ tab-list aside a { border-top: 1px solid; border-color: #ddd; border-color: var(--border-darker); - color: #555; + color: #444; color: var(--fade); padding: 0.5rem 1rem; margin-top: 0.5rem; position: relative; text-decoration: none; top: 1px; - border-bottom: 2px solid var(--background); + border-bottom: 2px solid transparent; } -tab-list aside a:not(:last-child) { +tab-bar nav a:not(:last-child) { margin-right: 0.5rem; } -tab-list aside a:last-child { +tab-bar nav a[data-draft] { color: #8f0000; color: var(--danger); } -tab-list aside a:hover { - background-color: #eee; - background-color: var(--hover-background); - color: inherit; +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; } -column-middle nav { +tab-bar nav a:hover { + text-decoration: underline; +} + +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); @@ -963,29 +1566,39 @@ column-middle nav { top: 0; width: 100%; z-index: 100; - height: 4rem; + height: inherit; } -column-middle nav section h2, -column-middle 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, -column-middle nav section h2, -column-middle 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 nav section { +column-base[position="middle"] > nav:first-child section { line-height: 1.25; padding: 0 0.5rem; + margin-right: 0.5rem; } -column-middle main > footer { - margin: 1rem 0; +column-base[position="middle"] > footer:last-child { + margin: 1rem 0.25rem 3rem 0.25rem; +} + +column-base[position="middle"] main > footer:last-child { + padding: 2rem 0 1rem 0; +} + +icon-button, +icon-navigator { + height: 4rem; } icon-button a { @@ -1000,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 { @@ -1018,11 +1638,31 @@ icon-button p { margin: 0; } +code-block pre { + border-radius: 0.5rem; + border: 1px solid #ccc; + border: 1px solid var(--border-darker); + display: block; + font-size: 95%; + margin: 0; + overflow-x: auto; + overflow-y: hidden; + padding: 2.65rem 0 0 0; + tab-size: 2; + word-break: break-word; + white-space: pre; + resize: both; + position: relative; + z-index: 2; +} + code-block pre code { display: inline-block; min-width: 100%; - border-top: 1px solid #bbb; + border-top: 1px solid #ccc; + border-top: 1px solid var(--border-darker); padding: 0.75rem; + white-space: pre; } code-block[data-lines] pre code { @@ -1031,69 +1671,51 @@ 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; display: flex; justify-content: space-between; align-items: center; + z-index: 3; } code-block header language-label { - padding: 0.125rem 1rem; font-variant: all-small-caps; } -code-block pre { - border-radius: 0.5rem; - border: 1px solid #ccc; - border: 1px solid var(--border-darker); - display: block; - font-size: 95%; - margin: 0; - overflow-x: auto; - overflow-y: hidden; - padding: 2.65rem 0 0 0; - tab-size: 2; - word-break: break-word; - white-space: pre; +code-block header language-label a { + text-decoration: none; + padding: 0.125rem 1rem; +} + +code-block header language-label a:hover { + text-decoration: underline; +} + +code-content { + width: 100%; } -paginator-navigation { - padding: 1rem 1rem 0 1rem; +nav[data-type="pagination"] { + padding: 1rem 0; display: flex; align-items: center; justify-content: center; + flex-wrap: wrap; } -paginator-navigation a, -paginator-navigation button { - margin: 0 0.25rem; +nav[data-type="pagination"] a { + margin: 0.5rem 0.25rem; font-size: 85%; display: flex; align-items: center; justify-content: center; } -paginator-navigation svg { - height: 1.316rem; -} - -web-ring, -author-list, -gallery-images { - padding-bottom: 1rem; - display: block; -} - -web-ring > h1, -author-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 { @@ -1103,16 +1725,24 @@ gallery-images aside { position: relative; } -gallery-images picture { +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, gallery-images picture img { + border-color: #ccc; border-radius: 0; + height: 100%; + width: 100%; +} + +gallery-images picture img:hover { + box-shadow: none; } gallery-overlay { @@ -1122,81 +1752,145 @@ gallery-overlay { outline: 4px solid #fefefe; outline: 4px solid var(--background); position: absolute; + left: 0; + top: 0; width: 100%; z-index: 1; + pointer-events: none; + border: 1px solid; + border-color: #eee; + border-color: var(--border-lighter); } -main web-ring { - display: none; -} - -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 a { - text-decoration: none; -} - -anchored-entry a:hover, -web-ring a[href^="http"]:hover { - text-decoration: underline; -} - -web-ring time { - font-variant: small-caps; +web-ring time, +micro-author article time { + display: block; color: #444; color: var(--fade); } -web-ring header { - font-weight: 700; +web-ring p:not(:last-child) { + margin-bottom: 0; } -web-ring p { - margin-bottom: 0 !important; +web-ring article:not(:last-child) { + margin-bottom: 1.5rem; } -web-ring-item:not(:last-child) { - margin-bottom: 2rem; - display: block; +web-ring aside { + padding: 1rem; } web-ring aside, -author-list section { +author-list aside, +following-list aside { background-color: #f9f9f9; background-color: var(--widget-background); + border-radius: 0.5rem; } -web-ring aside { - border-radius: 1rem; - padding: 1rem; +web-ring aside footer, +author-list aside footer, +following-list aside footer { + background-color: #fefefe; + background-color: var(--background); } -author-list section { +web-ring, +author-list, +following-list, +gallery-images { + padding-bottom: 1rem; display: block; - border-radius: 1rem; } -search-entry { +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 { + display: block; +} + +author-list p { + display: none; +} + +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; @@ -1204,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; @@ -1225,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; @@ -1259,15 +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; @@ -1275,12 +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 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-box ul li a:hover { background-color: #eee; background-color: var(--hover-background); } @@ -1295,7 +1997,6 @@ item-list h1 { item-list ul { padding: 0 0.5rem 0 0.5rem; - list-style: none; } item-list li:hover { @@ -1307,7 +2008,7 @@ item-list li:hover span:last-child { text-decoration: underline; } -item-list li a { +item-list li > a { display: flex; text-decoration: none; align-items: baseline; @@ -1315,25 +2016,120 @@ item-list li a { padding: 0.5rem; } -item-list a span:first-child { +item-list span:first-child { flex: 1; text-transform: uppercase; } -item-list a span:nth-child(2) { +item-list span:nth-child(2) { flex: 3; margin: 0 0.5rem; } -item-list a span:last-child { +item-list span:last-child { flex: 1; text-align: right; } -item-list a span:first-child, -item-list a span:last-child { +item-list span:first-child, +item-list span:last-child { + color: #444; + color: var(--fade); +} + +item-list a:focus span:first-child, +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; + margin: 0.5rem 0; + justify-content: space-between; +} + +tag-card { + border: 1px solid; + border-color: #eee; + border-color: var(--border-lighter); + border-radius: 0.5rem; + box-shadow: 0 0 1rem -0.85rem #00000060; + box-shadow: 0 0 1rem -0.85rem var(--shadow); + display: block; + padding: 2rem; + text-align: center; + width: 49%; + margin: 1% 0; +} + +tag-card h2 { + margin: 0 0 0.5rem 0; +} + +tag-card img { + margin: 0 auto; +} + +tag-card time { color: #444; color: var(--fade); + display: block; + margin-bottom: 0.5rem; } source-files footer { @@ -1356,35 +2152,42 @@ context-menu { background-color: #fff; background-color: var(--background-bolder); border: 1px solid; - border-color: #ddd; + border-color: #eee; border-color: var(--border-lighter); - border-radius: 4px; - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), - 0 0 0 1px rgba(10, 10, 10, 0.02); - padding-bottom: 0.5rem; - padding-top: 0.5rem; + border-radius: 0.5rem; + box-shadow: 0 0 1rem -0.5rem #00000060; + box-shadow: 0 0 1rem -0.5rem var(--shadow); min-width: 6.25rem; position: absolute; z-index: 99; - max-width: 20rem; visibility: hidden; opacity: 0; } -context-profile context-menu { - color: #111; - color: var(--foreground); - display: block; - padding: 1rem; - text-align: left; +context-menu[position="right"] { + right: 0; } -context-profile a { - display: inline; +context-menu[position="left"] { + left: 0; +} + +context-menu[position="anchor"] { + left: -125%; + top: 0; +} + +context-menu[position="left"], +context-menu[position="right"] { + top: 1rem; +} + +context-profile p a { + text-decoration: underline; } context-profile aside p { - color: #555; + color: #444; color: var(--fade); margin: 0; } @@ -1392,18 +2195,34 @@ context-profile aside p { context-profile div { display: flex; align-items: center; + margin-bottom: 0.5rem; } context-profile aside:nth-child(2) { line-height: 1.25; } -micro-thumbnail figure:hover context-menu { - visibility: visible; +context-profile context-menu { + color: #111; + color: var(--foreground); + display: block; + padding: 0.9rem; + left: 0.5rem; + top: 0.5rem; + text-align: left; + max-width: 20rem; + transition-delay: 0.5s; +} + +micro-card figure:hover context-menu, +input[type="checkbox"]:checked + context-menu { + margin-right: 1rem; opacity: 1; + visibility: visible; } diagram-container svg { + width: 100%; border: 2px solid; border-radius: 0.5rem; border-color: #ccc; @@ -1413,151 +2232,111 @@ diagram-container svg { background-color: var(--background); } -twitter-tweet { - min-height: 20rem; - max-height: 20rem; - display: block; - overflow-y: auto; -} - -twitter-tweet iframe { - border: none; -} - -/* ----- Typography ----- */ - -h1, -h2, -h3 { - font-size: 100%; - margin: 0; -} - -p, -ul, -dd, -dl, -ol, -figure, -blockquote { - margin: 0; -} - -p:not(:last-child), -ol:not(:last-child), -ul:not(:last-child), -dl:not(:last-child), -table:not(:last-child), -figure:not(:last-child), -code-block:not(:last-child), -blockquote:not(:last-child) { - margin-bottom: 0.75rem; -} - -footer, -figcaption { - color: #444; - color: var(--fade); - font-size: 85%; - margin: 0.5rem 0; - text-align: center; -} - -sup { - vertical-align: super; - font-size: 85%; +tool-tip[data-type="reaction"] { + text-decoration: underline; + -webkit-text-decoration-style: dotted; + text-decoration-style: dotted; + text-decoration-thickness: 0.05rem; + cursor: default; + position: relative; + display: inline-block; } -sub { - vertical-align: sub; - font-size: 85%; +tool-tip[data-type="reaction"]:hover { + text-decoration-thickness: 0.1rem; } -s, -del, -mark, -ins { - padding: 0 0.15rem; - line-height: 1.5; +tool-tip[data-type="reaction"]:hover img { + opacity: 1; + visibility: visible; + width: 100%; } -mark { - background-color: #ffe699; - background-color: var(--warning-background); - color: #332600; - color: var(--warning); +tool-tip[data-type="reaction"] img { + position: absolute; + z-index: 99; + visibility: hidden; + opacity: 0; + max-height: 80px; + object-fit: cover; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + max-width: fit-content; + border: none; + transition-delay: 0.5s; } -ins { - background-color: #d5f3c4; - background-color: var(--success-background); - color: #1d3c0c; - color: var(--success); - text-decoration: none; +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%; } -del { - background-color: #fcd2cf; - background-color: var(--danger-background); - color: #8f0000; - color: var(--danger); +link-card { + display: flex; + border: 1px solid; + border-color: #ccc; + border-color: var(--border-darker); + border-radius: 0.5rem; + margin-bottom: 0.75rem; } -s { - text-decoration: none; - background-color: #333; - background-color: var(--spoiler); - color: transparent; +link-card a img { + min-width: 5rem; + max-width: 5rem; + border: none; } -[type="checkbox"]:checked ~ s { - background-color: inherit; - color: inherit; +link-card > a { + border-right: 1px solid; + border-color: #ccc; + border-color: var(--border-darker); + display: flex; + align-items: center; + padding: 1rem; } -blockquote { - color: #555; - color: var(--fade); - padding-left: 2rem; +link-card article { + padding: 1rem; + width: 100%; } -blockquote p { - font-style: italic; - font-family: Charter, Georgia, "Book Antiqua", serif; - font-size: 125%; +link-card article a { + word-break: break-all; + display: block; } -blockquote p span { - display: block; - text-align: right; - color: #111; - color: var(--foreground); - font-style: normal; - font-size: 80%; - margin-top: 0.75rem; +math-ml:not(:last-child) { + margin-bottom: 0.75rem; } -video { +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); } -video:hover { - box-shadow: 0 0 14px #999; - box-shadow: 0 0 14px var(--shadow); +math-ml figure[id] a:first-child { + margin: 0 0.125rem; + padding: 0 0.25rem; + font-weight: 700; + color: #0149bc; + color: var(--link); } -kbd { - background-color: #eee; - border-radius: 3px; - border: 1px solid #b4b4b4; - box-shadow: 0 1px 1px #737373, 0 2px 0 0 #f2f2f2 inset; - color: #333; - display: inline-block; - font-size: 0.85em; - font-weight: 700; - line-height: 1; - padding: 2px 4px; - white-space: nowrap; +math-ml figure[id]:target figure { + background-color: #ffe699; + background-color: var(--warning-background); + color: #000; + outline: 2px solid; + border-radius: 0.5rem; } /* ----- Attributes ----- */ @@ -1566,30 +2345,32 @@ kbd { outline: none; } -[hidden] { +[hidden], +nav[hidden] { display: none; } -[data-invisible] { - visibility: hidden; -} - [data-hover] { text-decoration: none; } +[data-hover]:hover { + text-decoration: underline; +} + [draft] { background-color: #fff5f5; background-color: var(--danger-background-lighter); + border-color: #fcd2cf; border-color: var(--danger-background); } [disabled] { cursor: not-allowed; - border-color: #ddd; + border-color: #eee; border-color: var(--border-lighter); - color: #999; - color: var(--disabled); + color: #444; + color: var(--fade); } [role="doc-endnotes"] { @@ -1597,126 +2378,474 @@ kbd { } [role="doc-endnotes"] hr { - border-top: 1px solid #ccc; margin-bottom: 0.75rem; } [role="doc-endnotes"] ol { + font-size: 90%; padding-left: 2rem; } +[data-xml] micro-card { + flex-direction: row; + align-items: center; +} + +[data-xml] micro-card article { + margin-left: 0; +} + +[data-xml] micro-card header figure { + display: block; +} + +[data-xml] column-base[position="middle"] nav section { + flex-grow: 1; +} + +[data-xml="sitemap"] main section { + padding: 1rem; +} + +[data-xml="sitemap"] section a { + text-decoration: none; +} + +[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 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 nav { + column-base[position="middle"] > nav:first-child { justify-content: space-between; overflow-x: auto; overflow-y: hidden; } - icon-navigator { - display: inline !important; + column-base[position="middle"] > nav:first-child icon-navigator[hidden] { + display: inline; + } + tag-deck { + margin: 0.5rem 0.75rem; } } -@media screen and (max-width: 925px) { - column-right { - display: none; +@media screen and (max-width: 920px) { + html[data-document="html"], + html[data-document="xhtml"] { + margin: 0; } - micro-metadata { - line-height: inherit; + nav + main, + profile-box { + margin-top: 4rem; } - micro-header section { - display: block; + column-base[position="right"] { + display: none; } - column-middle { + column-base[position="middle"] { display: block; max-width: 100%; } - column-middle nav { + column-base[position="middle"] > nav:first-child { position: fixed; - } - navigation-separator hr[hidden] { - border-color: transparent; - display: flex; - height: 0; - margin: 0; - padding-top: 4rem; - border: none; + box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); } micro-card { max-width: 600px; margin: 0 auto; } - html { - margin: 0; + micro-card header { + line-height: inherit; } - body { + profile-box section { display: block; - overflow-y: scroll; } - nav { - box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); + 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-card article, + micro-author micro-card header figure, + micro-author micro-card p:not(:last-child) { + flex: auto; + margin: 0 0 0.75rem 0; } - nav:active, - nav:hover, - nav:focus, - nav:focus-within, - nav:focus-visible { - box-shadow: 15px 0 15px -15px inset, -15px 0 15px -15px inset; + tab-bar:active, + tab-bar:hover, + tab-bar:focus, + tab-bar:focus-within, + tab-bar: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-card micro-summary > micro-thumbnail { - display: none; + micro-card > article { + margin-left: 0; } - micro-metadata micro-thumbnail[hidden], - micro-author micro-card micro-summary > micro-thumbnail { - display: block; + tag-card { + width: 100%; + margin: 0.5rem; } } /* ----- 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 nav, - navigation-separator hr[hidden] { + column-base[position="middle"] > nav:first-child, + column-base[position="middle"] > footer:last-child { display: none; } } + +/* ----- Animations ----- */ + +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]: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]:hover { + animation: squeeze 1s infinite; +} + +text-animation[twitch]:hover { + animation: quiver 2.25s infinite, quiver 1.45s infinite; +} + +text-animation[tremble]:hover { + animation: leftward 0.1s infinite, quiver 0.75s infinite, + quiver 1.35s infinite; +} + +text-animation[grow]:hover { + animation: maximize 1.4s infinite; +} + +text-animation[shrink]:hover { + animation: minimize 1.25s infinite; +} + +text-animation[grow]:hover, +text-animation[shrink]:hover { + transform-origin: right 1rem; +} + +text-animation[distort]:hover span { + animation: distort 0.25s infinite, distort 0.55s infinite, + distort 0.75s infinite; +} + +text-animation[roll]:hover span { + animation: rotateY 1.5s infinite; + animation-delay: calc(0.1s * var(--frame)); +} + +text-animation[flip]:hover span { + animation: rotateX 1.5s infinite; + animation-delay: calc(0.1s * var(--frame)); +} + +text-animation[twirl]:hover span { + animation: rotateZ 1.5s infinite; + animation-delay: calc(0.1s * var(--frame)); +} + +text-animation[wave]:hover span { + animation: up 1s infinite; + animation-delay: calc(0.1s * var(--frame)); +} + +text-animation[skip]:hover span { + animation: skip 1s infinite; + animation-delay: calc(0.1s * var(--frame)); +} + +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]:hover span { + animation: up 1s infinite; +} + +text-animation[hop]:hover span { + animation: hop 1s infinite; +} + +text-animation[shake]:hover span { + animation: left 0.15s infinite; +} + +text-animation[waggle]:hover span { + animation: left 0.5s infinite; +} + +text-animation[jump]:hover span { + animation: up 0.15s infinite; +} + +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%, + 10% { + transform: rotateY(360deg); + } +} + +@keyframes rotateX { + 0%, + 10% { + transform: rotateX(360deg); + } +} + +@keyframes rotateZ { + 0%, + 10% { + transform: rotateZ(360deg); + } +} + +@keyframes tilt-rightward { + 50% { + transform: rotateZ(5deg); + } +} + +@keyframes tilt-leftward { + 50% { + transform: rotateZ(-5deg); + } +} + +@keyframes up { + 50% { + transform: translateY(-0.15rem); + } +} + +@keyframes down { + 50% { + transform: translateY(0.15rem); + } +} + +@keyframes left { + 50% { + transform: translateX(-0.15rem); + } +} + +@keyframes leftward { + 50% { + transform: translateX(-0.05rem); + } +} + +@keyframes squeeze { + 50% { + transform: scale(0.95, 1); + } +} + +@keyframes maximize { + 0% { + transform: scale(1, 1.25); + } + 10% { + transform: scale(1, 1.05); + } + 20% { + transform: scale(1, 1.25); + } + 30% { + transform: scale(1, 1.1); + } + 40% { + transform: scale(1, 1.25); + } + 50% { + transform: none; + } +} + +@keyframes minimize { + 0% { + transform: scale(0.75); + } + 10% { + transform: scale(0.95); + } + 20% { + transform: scale(0.75); + } + 30% { + transform: scale(0.85); + } + 40% { + transform: scale(0.75); + } + 50% { + transform: none; + } +} + +@keyframes skip { + 0%, + 50%, + 100% { + transform: translateY(0); + } + 10% { + transform: translateY(-0.25rem); + } +} + +@keyframes hop { + 0%, + 30%, + 50% { + transform: translateY(0); + } + 10%, + 40% { + transform: translateY(-0.25rem); + } +} + +@keyframes quiver { + 5% { + transform: translateY(-0.025rem) skewX(-5deg) scale(0.9); + } + 10% { + transform: none; + } +} + +@keyframes distort { + 20% { + text-shadow: 4px 0 var(--background); + } + 50% { + text-shadow: -4px 0 var(--background); + } + 100% { + text-shadow: none; + } +} |