zaine/org_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removing author and cleaning js / css

Browse Source
This commit is contained in:
gitea-actions
2026-07-08 22:28:43 +01:00
parent d0610a5907
commit 0db2151f92
81 changed files with 18580 additions and 18565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
assets/styles/base/elements.css Normal file
View File

@@ -0,0 +1,226 @@
@font-face {
font-family: 'Noto';
src: url('../../fonts/NotoSans-Regular.ttf') format('truetype');
}
html, body{
background:
radial-gradient(circle at 18% 12%, var(--theme-glow-wine, transparent), transparent 28%),
radial-gradient(circle at 84% 18%, var(--theme-glow-green, transparent), transparent 24%),
linear-gradient(135deg, var(--theme-bg-start, var(--bg)) 0%, var(--theme-bg-mid, var(--bg)) 42%, var(--theme-bg-end, var(--bg)) 100%);
color: var(--fg);
font-size: 16px;
transition: background-color .3s, color .3s;
margin: 0;
font-family: 'Noto', system-ui, sans-serif;
line-height: 1.65;
}
body {
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
:root[data-theme="dark-academia"] body {
--theme-glow-wine: rgba(125, 47, 54, 0.24);
--theme-glow-green: rgba(68, 106, 87, 0.24);
--theme-bg-start: #0f0e0b;
--theme-bg-mid: #17140f;
--theme-bg-end: #211b14;
}
:root[data-theme="dark-academia"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.16;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 34px 34px, 34px 34px;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
}
::selection {
background: color-mix(in oklab, var(--accent) 24%, transparent);
}
h1, h2, h3{
color: var(--heading);
line-height: 1.18;
letter-spacing: 0;
}
h1 {
margin-top: 2.25rem;
margin-bottom: 1rem;
font-size: clamp(2rem, 4vw, 3.4rem);
}
h2 {
margin-top: 2.2rem;
}
p {
margin: 0 0 1.15rem;
}
a {
color: var(--link);
text-decoration: none;
text-underline-offset: 0.18em;
}
a:hover {
text-decoration: underline;
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: 2rem 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
overflow: hidden;
}
th,
td {
border-bottom: 1px solid var(--border);
padding: 0.65rem 0.75rem;
text-align: left;
}
th {
color: var(--heading);
background: color-mix(in oklab, var(--surface-soft) 80%, transparent);
}
blockquote {
margin: 1.5rem 0;
padding: 0.9rem 1.1rem;
border-left: 4px solid var(--heading);
background: color-mix(in oklab, var(--surface-soft) 72%, transparent);
border-radius: 0 8px 8px 0;
color: color-mix(in oklab, var(--fg) 84%, var(--muted) 16%);
}
ul, ol {
margin: 1rem 0 1.5rem 1.5rem;
padding: 0;
line-height: 1.5;
}
ul {
list-style: none;
}
ul li {
position: relative;
padding-left: 1.2em;
}
ul li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: var(--heading);
font-weight: bold;
}
ol {
counter-reset: list-counter;
list-style: none;
}
ol li {
counter-increment: list-counter;
position: relative;
padding-left: 1.8em;
}
ol li::before {
content: counter(list-counter) ".";
position: absolute;
left: 0;
top: 0;
color: var(--heading);
font-weight: bold;
}
li {
margin-bottom: 8px;
display: flow-root;
}
li::after {
content: none;
}
li ul,
li ol {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
li ul li::before {
content: "–";
font-weight: normal;
color: var(--note-color);
}
li ol li::before {
font-weight: normal;
color: var(--note-color);
}
.epigraph {
margin: 2rem auto;
max-width: 80%;
font-style: italic;
}
.epigraph blockquote {
margin: 0;
padding: 1rem 1.5rem;
border-left: 4px solid var(--heading);
background-color: rgba(0, 0, 0, 0.02);
color: var(--fg);
line-height: 1.6;
}
.epigraph blockquote footer {
margin-top: 0.75rem;
font-style: normal;
font-size: 0.9em;
color: var(--note-color);
text-align: right;
}
.epigraph blockquote cite {
font-style: italic;
font-weight: 500;
color: var(--link);
}
.epigraph blockquote::before,
.epigraph blockquote::after {
content: none;
}
.epigraph blockquote{
border-left-color: var(--heading);
background-color: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
color: var(--fg);
}
.epigraph blockquote footer{ color: var(--muted); }

9
assets/styles/bigger-picture.min.css vendored
View File

@@ -1,8 +1 @@
/**
* Minified by jsDelivr using clean-css v5.3.2.
* Original file: /npm/bigger-picture@1.1.19/dist/bigger-picture.css
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
@keyframes bp-fadein{from{opacity:.01}to{opacity:1}}@keyframes bp-bar{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes bp-o{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bp-wrap{top:0;left:0;width:100%;height:100%;position:fixed;z-index:999;contain:strict;touch-action:none;-webkit-tap-highlight-color:transparent}.bp-wrap>div:first-child{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);animation:bp-fadein .48s cubic-bezier(.215,.61,.355,1)}.bp-vid audio{position:absolute;left:14px;width:calc(100% - 28px);bottom:14px;height:50px}.bp-inner{top:0;left:0;width:100%;height:100%;position:absolute;display:flex}.bp-html{display:contents}.bp-html>:first-child{margin:auto}.bp-img-wrap{top:0;left:0;width:100%;height:100%;position:absolute;contain:strict}.bp-img-wrap .bp-canzoom{cursor:zoom-in}.bp-img-wrap .bp-drag{cursor:grabbing}.bp-close{contain:layout size}.bp-img{position:absolute;top:50%;left:50%;user-select:none;background-size:100% 100%}.bp-img div,.bp-img img{position:absolute;top:0;left:0;width:100%;height:100%}.bp-img .bp-o{display:none}.bp-zoomed .bp-img:not(.bp-drag){cursor:grab}.bp-zoomed .bp-cap{opacity:0;animation:none!important}.bp-zoomed.bp-small .bp-controls{opacity:0}.bp-zoomed.bp-small .bp-controls button{pointer-events:none}.bp-controls{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;text-align:left;transition:opacity .3s;animation:bp-fadein .3s}.bp-controls button{pointer-events:auto;cursor:pointer;position:absolute;border:0;background:rgba(0,0,0,.15);opacity:.9;transition:all .1s;contain:content}.bp-controls button:hover{background-color:rgba(0,0,0,.2);opacity:1}.bp-controls svg{fill:#fff}.bp-count{position:absolute;color:rgba(255,255,255,.9);line-height:1;margin:16px;height:50px;width:100px}.bp-next,.bp-prev{top:50%;right:0;margin-top:-32px;height:64px;width:58px;border-radius:3px 0 0 3px}.bp-next:hover:before,.bp-prev:hover:before{transform:translateX(-2px)}.bp-next:before,.bp-prev:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E");position:absolute;left:7px;top:9px;width:46px;transition:all .2s}.bp-prev{right:auto;left:0;transform:scalex(-1)}.bp-x{top:0;right:0;height:55px;width:58px;border-radius:0 0 0 3px}.bp-x:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'%3E%3Cpath d='M24 10l-2-2-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6z'/%3E%3C/svg%3E");position:absolute;width:37px;top:8px;right:10px}.bp-if,.bp-vid{position:relative;margin:auto;background:#000;background-size:100% 100%}.bp-if div,.bp-if iframe,.bp-if video,.bp-vid div,.bp-vid iframe,.bp-vid video{top:0;left:0;width:100%;height:100%;position:absolute;border:0}.bp-load{display:flex;background-size:100% 100%;overflow:hidden;z-index:1}.bp-bar{position:absolute;top:0;left:0;height:3px;width:100%;transform:translateX(-100%);background:rgba(255,255,255,.9);border-radius:0 3px 3px 0;animation:bp-bar 4s both}.bp-o,.bp-o:after{border-radius:50%;width:90px;height:90px}.bp-o{margin:auto;border:10px solid rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.9);animation:bp-o 1s infinite linear}.bp-cap{position:absolute;bottom:2%;background:rgba(9,9,9,.8);color:rgba(255,255,255,.9);border-radius:4px;max-width:95%;line-height:1.3;padding:.6em 1.2em;left:50%;transform:translateX(-50%);width:fit-content;width:-moz-fit-content;display:table;transition:opacity .3s;animation:bp-fadein .2s}.bp-cap a{color:inherit}.bp-inline{position:absolute}.bp-lock{overflow-y:hidden}.bp-lock body{overflow:scroll}.bp-noclose .bp-x{display:none}.bp-noclose:not(.bp-zoomed){touch-action:pan-y}.bp-noclose:not(.bp-zoomed) .bp-img-wrap{cursor:zoom-in}@media (prefers-reduced-motion){.bp-wrap *{animation-duration:0s!important}}@media (max-width:500px){.bp-x{height:47px;width:47px}.bp-x:before{width:34px;top:6px;right:6px}.bp-next,.bp-prev{margin-top:-27px;height:54px;width:45px}.bp-next:before,.bp-prev:before{top:7px;left:2px;width:43px}.bp-o,.bp-o:after{border-width:6px;width:60px;height:60px}.bp-count{margin:12px 10px}}
/*# sourceMappingURL=/sm/15e96278e1e731ce40eef8d6284cefc81b81dda67c3a0aa386ec893f183bd57f.map */
@import url("./vendor/bigger-picture.min.css");

119
assets/styles/comments.css
View File

@@ -1,118 +1 @@
.comments {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid var(--border-muted, #ddd);
}
.comments h2 {
margin: 0 0 1rem 0;
font-size: 1.4rem;
}
.comments-list {
margin: 1.5rem 0 2rem;
}
.comments-empty {
font-style: italic;
color: var(--text-muted, #777);
}
.comment {
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border-muted, #eee);
}
.comment:last-child {
border-bottom: none;
}
.comment strong {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}
.comment p {
margin: 0.25rem 0 0.5rem;
}
.comment-date {
display: block;
font-size: 0.8rem;
color: var(--text-muted, #777);
}
.comment-children {
margin-top: 1rem;
margin-left: 1.25rem;
padding-left: 1rem;
border-left: 2px solid var(--border-muted, #ddd);
}
.comment-reply {
margin-top: 0.4rem;
padding: 0;
font-size: 0.85rem;
background: none;
border: none;
color: var(--text-muted, #555);
cursor: pointer;
}
.comment-reply:hover {
text-decoration: underline;
}
.comment-form {
max-width: 40rem;
}
.comment-author {
display: block;
margin-bottom: 1rem;
}
.comment-form span {
display: block;
margin-bottom: 0.25rem;
font-size: 0.85rem;
color: var(--fg);
}
.comment-form input,
.comment-form textarea {
width: 100%;
padding: 0;
font-family: inherit;
font-size: 1rem;
color: var(--fg);
background: var(--bg);
border: 1px solid var(--border-muted, #ccc);
border-radius: 3px;
}
.comment-form textarea {
min-height: 6rem;
resize: vertical;
}
.comment-form button {
margin-top: 0.75rem;
padding: 0.45rem 1rem;
font-family: inherit;
font-size: 0.9rem;
color: var(--fg);
background: transparent;
border: 1px solid var(--border-muted, #aaa);
cursor: pointer;
}
@import url("./components/comments.css");

118
assets/styles/components/comments.css Normal file
View File

@@ -0,0 +1,118 @@
.comments {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid var(--border-muted, #ddd);
}
.comments h2 {
margin: 0 0 1rem 0;
font-size: 1.4rem;
}
.comments-list {
margin: 1.5rem 0 2rem;
}
.comments-empty {
font-style: italic;
color: var(--text-muted, #777);
}
.comment {
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--border-muted, #eee);
}
.comment:last-child {
border-bottom: none;
}
.comment strong {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}
.comment p {
margin: 0.25rem 0 0.5rem;
}
.comment-date {
display: block;
font-size: 0.8rem;
color: var(--text-muted, #777);
}
.comment-children {
margin-top: 1rem;
margin-left: 1.25rem;
padding-left: 1rem;
border-left: 2px solid var(--border-muted, #ddd);
}
.comment-reply {
margin-top: 0.4rem;
padding: 0;
font-size: 0.85rem;
background: none;
border: none;
color: var(--text-muted, #555);
cursor: pointer;
}
.comment-reply:hover {
text-decoration: underline;
}
.comment-form {
max-width: 40rem;
}
.comment-author {
display: block;
margin-bottom: 1rem;
}
.comment-form span {
display: block;
margin-bottom: 0.25rem;
font-size: 0.85rem;
color: var(--fg);
}
.comment-form input,
.comment-form textarea {
width: 100%;
padding: 0;
font-family: inherit;
font-size: 1rem;
color: var(--fg);
background: var(--bg);
border: 1px solid var(--border-muted, #ccc);
border-radius: 3px;
}
.comment-form textarea {
min-height: 6rem;
resize: vertical;
}
.comment-form button {
margin-top: 0.75rem;
padding: 0.45rem 1rem;
font-family: inherit;
font-size: 0.9rem;
color: var(--fg);
background: transparent;
border: 1px solid var(--border-muted, #aaa);
cursor: pointer;
}

251
assets/styles/components/kanban.css Normal file
View File

@@ -0,0 +1,251 @@
#kanban-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.kanban-column {
background: #f8f9fa;
border-radius: 8px;
padding: 0.6rem;
display: flex;
flex-direction: column;
}
.kanban-column h3 {
text-align: center;
font-size: 0.9rem;
margin: 0.4rem 0 0.6rem;
font-weight: 600;
}
.kanban-list {
flex-grow: 1;
min-height: 3rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.kanban-card {
background: var(--bg);
border-radius: 6px;
padding: 0.5rem 0.6rem;
font-size: 0.85rem;
cursor: grab;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
color: var(--fg);
}
.kanban-card.dragging {
opacity: 0.5;
cursor: grabbing;
}
.kanban-column[data-state="completed"] {
background: var(--kb-bg-completed);
}
.kanban-column[data-state="manager_review"] {
background: var(--kb-bg-manager-review);
}
.kanban-column[data-state="in_progress"] {
background: var(--kb-bg-in-progress);
}
.kanban-column[data-state="not_started"] {
background: var(--kb-bg-not-started);
}
.kanban-column[data-state="comments"] {
background: var(--kb-bg-comments);
}
#mobile-move-panel {
display: none;
max-width: 22rem;
margin: 1.5rem auto 0 auto;
padding: 1rem;
box-sizing: border-box;
border: 1px solid var(--border-color, #ddd);
border-radius: 0.5rem;
background: var(--bg);
color: var(--fg);
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
font-size: 0.9rem;
}
#mobile-move-panel * {
box-sizing: border-box;
}
#mobile-move-panel h4 {
margin: 0 0 0.75rem 0;
font-size: 0.95rem;
font-weight: 600;
}
#mobile-move-panel label {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
}
#mobile-move-panel select,
#mobile-move-panel button {
font-size: 0.9rem;
padding: 0.4rem 0.5rem;
min-width: 0;
}
#mobile-move-panel button {
margin-top: 0.5rem;
align-self: flex-start;
}
#mobile-move-panel select {
width: 100%;
max-width: 100%;
padding: 0.45rem 2rem 0.45rem 0.6rem;
font-size: 0.9rem;
line-height: 1.2;
border: 1px solid var(--border-color, #ccc);
border-radius: 0.4rem;
background-color: var(--bg, #fff);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-image:
linear-gradient(45deg, transparent 50%, #666 50%),
linear-gradient(135deg, #666 50%, transparent 50%),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 1.2rem) 50%,
calc(100% - 0.9rem) 50%,
100% 0;
background-size:
6px 6px,
6px 6px,
2.5rem 100%;
background-repeat: no-repeat;
margin-bottom: 1em;
}
#mobile-move-panel select:focus {
outline: none;
border-color: #666;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
#mobile-move-panel button {
width: 100%;
padding: 0.5rem 0.6rem;
font-size: 0.9rem;
border-radius: 0.4rem;
border: 1px solid #888;
background: #f8f8f8;
cursor: pointer;
}
#mobile-move-panel button:active {
background: #eee;
}
#mobile-move-panel select:disabled {
background-color: #f3f3f3;
color: #555;
border-color: #ccc;
opacity: 1;
cursor: default;
background-image: none;
}
#progress-wrapper {
margin-bottom: 16px;
}
#progress-label {
font-size: 14px;
margin-bottom: 6px;
text-align: right;
color: #555;
}
#progress-bar {
width: 100%;
height: 10px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
#progress-fill {
height: 100%;
width: 0%;
background: #22c55e;
transition: width 0.3s ease;
}
#level-tabs {
display: inline-flex;
align-items: center;
gap: 0;
margin-bottom: 1rem;
border-radius: 999px;
padding: 3px;
background: var(--bg, #fff);
width: fit-content;
}
.level-tab {
border: none;
background: transparent;
padding: 0.35rem 1rem;
font-size: 0.85rem;
border-radius: 999px;
cursor: pointer;
color: var(--fg, #333);
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.1s ease;
}
.level-tab:hover {
background: rgba(0,0,0,0.05);
}
.level-tab.active {
background: #333;
color: white;
font-weight: 500;
}
.level-tab:active {
transform: scale(0.97);
}

76
assets/styles/components/mermaid.css Normal file
View File

@@ -0,0 +1,76 @@
/* Mermaid container for zooming and panning */
.mermaid-container {
overflow: auto;
width: 100%;
min-height: 26rem;
max-height: 800px;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
position: relative;
margin: 1.5rem 0;
}
/* Make SVG scale properly */
.mermaid-container .mermaid svg {
transform-origin: top left; /* needed for scaling */
transition: transform 0.2s ease; /* smooth zoom */
width: 100%;
height: auto;
}
.mermaid-container--site-map {
width: min(96vw, 1400px);
height: min(82vh, 980px);
max-height: none;
margin-left: 50%;
transform: translateX(-50%);
}
.mermaid-container--site-map .mermaid {
display: inline-block;
min-width: max-content;
padding: 3rem 2rem 2rem;
}
.mermaid-container--site-map .mermaid svg {
width: auto;
max-width: none;
min-width: 1100px;
}
@media (max-width: 700px) {
.mermaid-container--site-map {
width: 100%;
height: 78vh;
margin-left: 0;
transform: none;
}
.mermaid-container--site-map .mermaid svg {
min-width: 900px;
}
}
/* Zoom buttons */
.mermaid-zoom-controls {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
}
.mermaid-zoom-controls button {
padding: 5px 10px;
margin-left: 5px;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
}
.mermaid-zoom-controls button:hover {
background: var(--accent);
color: var(--surface);
}

281
assets/styles/components/notes-board.css Normal file
View File

@@ -0,0 +1,281 @@
/* =========================
NOTES BOARD
========================= */
#notes-tools {
display: flex;
align-items: end;
justify-content: flex-end;
gap: 0.65rem;
margin: 1.25rem 0 0;
}
#notes-tools label {
color: var(--muted);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#notes-author-filter {
min-width: min(220px, 100%);
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--fg);
font: inherit;
font-size: 0.9rem;
line-height: 1.2;
padding: 0.45rem 0.65rem;
}
#notes-author-filter:focus {
outline: 2px solid color-mix(in oklab, var(--accent) 45%, transparent);
outline-offset: 2px;
}
#notes-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
margin: 2.5rem 0;
align-items: start;
}
/* =========================
NOTE CARD
========================= */
.note {
position: relative;
padding: 1rem 1rem 0.9rem;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 12px 24px rgba(0, 0, 0, 0.06);
transform: rotate(var(--note-tilt, 0deg));
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
/* subtle randomness */
.note:nth-child(3n) { --note-tilt: -0.6deg; }
.note:nth-child(4n) { --note-tilt: 0.4deg; }
.note:nth-child(5n) { --note-tilt: -0.3deg; }
.note:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.12),
0 18px 36px rgba(0, 0, 0, 0.10);
}
/* =========================
PIN
========================= */
.note::before {
content: "";
position: absolute;
top: 0.6rem;
left: 50%;
width: 10px;
height: 10px;
background: #c33;
border-radius: 50%;
transform: translateX(-50%);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0.85;
}
/* =========================
META
========================= */
.note-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.7rem;
margin-bottom: 0.5rem;
color: var(--muted);
}
.note-author {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.note-meta time {
font-variant-numeric: tabular-nums;
opacity: 0.7;
}
/* =========================
CONTENT
========================= */
.note-content {
font-size: 0.95rem;
line-height: 1.45;
white-space: pre-wrap;
color: var(--fg);
}
/* =========================
MOBILE TWEAKS
========================= */
@media (max-width: 600px) {
#notes-wall {
grid-template-columns: 1fr;
}
#notes-tools {
align-items: stretch;
flex-direction: column;
}
.note {
transform: none;
}
.note::before {
left: 0.75rem;
transform: none;
}
}
/* =========================
NOTES FORM
========================= */
#notes-form-wrapper {
margin-top: 3rem;
display: flex;
justify-content: center;
}
#notes-form {
width: 100%;
max-width: 420px;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
padding: 1.25rem 1.25rem 1.1rem;
border-radius: 10px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 14px 30px rgba(0, 0, 0, 0.06);
position: relative;
}
/* pin */
#notes-form::before {
content: "";
position: absolute;
top: 0.6rem;
left: 50%;
width: 12px;
height: 12px;
background: #c33;
border-radius: 50%;
transform: translateX(-50%);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.35);
}
/* =========================
LABELS
========================= */
#notes-form label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.25rem;
}
/* =========================
INPUTS
========================= */
#notes-form input,
#notes-form textarea {
width: 100%;
border: none;
background: transparent;
color: var(--fg);
font-family: inherit;
font-size: 0.95rem;
line-height: 1.45;
padding: 0.3rem 0;
margin-bottom: 0.9rem;
border-bottom: 1px solid var(--border);
}
#notes-form textarea {
resize: vertical;
min-height: 4.5rem;
}
/* focus state */
#notes-form input:focus,
#notes-form textarea:focus {
outline: none;
border-bottom-color: var(--accent);
}
/* placeholder */
#notes-form ::placeholder {
color: var(--muted);
}
/* =========================
SUBMIT BUTTON
========================= */
#notes-form button {
margin-top: 0.5rem;
padding: 0.35rem 0.9rem;
font-family: inherit;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
border: none;
background: var(--fg);
color: var(--bg);
cursor: pointer;
float: right;
}
#notes-form button:hover {
background: var(--accent);
color: var(--surface);
}
#notes-form button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================
MOBILE
========================= */
@media (max-width: 600px) {
#notes-form {
max-width: 100%;
}
}

502
assets/styles/components/org-content.css Normal file
View File

@@ -0,0 +1,502 @@
#updated{
font-size: .76rem;
color: var(--muted);
margin: .45rem 0 0;
text-align: right;
}
.sidenote,
.marginnote{
float: right;
width: var(--margin);
margin-right: calc(-1 * ((100vi - var(--content)) / 2));
padding-right: var(--gutter);
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
margin-top: .3rem;
margin-bottom: .6rem;
font-size: .95rem;
line-height: 1.35;
color: var(--note-color);
background: var(--note-bg);
box-sizing: border-box;
}
.sidenote,
.marginnote{
display: block;
clear: right;
}
.sidenote + .sidenote,
.sidenote + .marginnote,
.marginnote + .sidenote,
.marginnote + .marginnote{
margin-top: .4rem;
}
.footnote-sidenote::before{
content: attr(data-fn) " ";
font-size: 0.85em;
vertical-align: super;
margin-right: 0.2rem;
opacity: 0.85;
}
body{ counter-reset: sidenote-counter; }
.sidenote-number:after{
counter-increment: sidenote-counter;
content: counter(sidenote-counter);
font-size: .85em;
vertical-align: super;
margin-left: .15rem;
}
.margin-toggle{
position: absolute;
opacity: 0;
pointer-events: none;
}
.fullwidth{
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
height: auto;
margin: 1.25rem 0 1.75rem;
width: 100%;
max-width: min(
calc(var(--content) + var(--bleed) * 2),
var(--fullwidth-cap),
calc(100vw - 2 * var(--body-pad))
);
}
.figure .fullwidth{ width: inherit; }
.figure figcaption{
text-align: center; font-size: .95rem; color: #666; margin-top: .4rem;
}
.post-date{
color: var(--muted);
font-size: .86em;
margin-left: 8px;
}
.post-tag{
float: right;
display: inline-block;
background-color: var(--chip-bg);
color: var(--chip-fg);
border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
border-radius: 999px;
padding: 0.08rem 0.5rem;
margin-left: 6px;
font-size: 0.8em;
line-height: 1.7;
}
.filetags {
margin-top: .5rem;
display: flex;
flex-wrap: wrap;
gap: .3rem .4rem;
font-size: .9rem;
color: #666;
}
.filetags .tag {
display: inline-block;
padding: .1rem .45rem;
border-radius: 999px;
background: var(--chip-bg);
color: var(--chip-fg);
border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
line-height: 1.6;
}
.figure figcaption{ color: var(--muted); }
.org-src-container{
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: none;
overflow: hidden;
background: var(--code-bg);
}
:not(pre) > code{
border: 1px solid var(--border);
background-color: var(--code-bg);
color: var(--fg);
border-radius: 5px;
padding: 0.05rem 0.28rem;
}
.theme-toggle {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--surface-soft) 82%, transparent);
color: var(--fg);
min-height: 2.25rem;
padding: 0 0.75rem;
border-radius: 7px;
cursor: pointer;
font: inherit;
font-size: 0.9rem;
font-weight: 750;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
background-color: color-mix(in oklab, var(--accent) 12%, transparent);
color: var(--heading);
border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
outline: 0;
}
.web-logo {
position: absolute;
top: 0.75rem;
left: 1rem;
z-index: 1000;
width: 10%;
padding: .25rem;
border-radius: 6px;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.sidenote .mn-fig,
.marginnote .mn-fig{
margin: 0;
}
.sidenote .mn-img,
.marginnote .mn-img{
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--border, #d7d7d7);
border-radius: 6px;
background: var(--bg);
}
.sidenote .mn-fig figcaption,
.marginnote .mn-fig figcaption{
margin-top: .35rem;
font-size: .85rem;
color: var(--muted, #666);
line-height: 1.35;
}
.sidenote img {
margin-top: 0.35rem;
display: block;
}
.countdown-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: 1em 0;
font-family: system-ui, sans-serif;
font-size: 1.2rem;
color: var(--fg, #222);
background: var(--bg-alt, transparent);
text-align: center;
}
time.countdown {
font-weight: 600;
color: var(--accent, #2a7fff);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
padding: 0.25em 0.6em;
border-radius: 0.5em;
background: color-mix(in srgb, var(--accent, #2a7fff) 10%, transparent);
box-shadow: 0 0 8px rgba(0,0,0,0.1);
transition: color 0.3s ease, background 0.3s ease;
}
time.countdown.expired {
color: #999;
background: none;
font-weight: 500;
text-decoration: line-through;
}
/* SEARCH */
#search-input {
width: 100%;
min-height: 2.25rem;
padding: 0.35rem 0.7rem;
font-size: 0.9rem;
border: 1px solid var(--border);
border-radius: 7px;
font-family: var(--font-body);
font-weight: 450;
background-color: var(--surface);
color: var(--fg);
}
#search-btn {
display: inline-grid;
place-items: center;
flex: 0 0 2.25rem;
width: 2.25rem;
height: 2.25rem;
background: color-mix(in oklab, var(--surface-soft) 82%, transparent);
border: 1px solid var(--border);
border-radius: 7px;
color: var(--fg);
cursor: pointer;
font-size: 0.95rem;
line-height: 1;
}
#search-input:focus,
#search-btn:focus-visible {
outline: 0;
border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}
@media (max-width: 700px) {
#search-input {
display: none;
}
#search-btn {
font-size: 1rem;
}
}
.site-actions {
position: relative;
}
.search-inline-panel {
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
width: min(38rem, calc(100vw - 2rem));
max-height: min(64vh, 34rem);
display: none;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
background: color-mix(in oklab, var(--surface) 94%, var(--bg));
border: 1px solid color-mix(in oklab, var(--border) 78%, var(--fg));
border-radius: 8px;
box-shadow:
0 18px 56px rgba(0, 0, 0, 0.22),
0 2px 12px rgba(0, 0, 0, 0.12);
z-index: 1000;
}
.site-actions.search-inline-open .search-inline-panel {
display: grid;
}
.search-pane-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 1rem 0.55rem;
border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
}
.search-pane-meta h2 {
margin: 0;
color: var(--fg);
font-size: 0.95rem;
line-height: 1.2;
}
#search-pane-count {
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
}
.search-pane-results {
min-height: 8rem;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.45rem;
}
.search-result {
display: grid;
gap: 0.26rem;
padding: 0.7rem 0.8rem;
border: 1px solid transparent;
border-radius: 7px;
color: inherit;
cursor: pointer;
text-decoration: none;
}
.search-result:hover,
.search-result.active {
background: var(--accent-bg);
border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
text-decoration: none;
}
.search-result-title {
color: var(--fg);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.25;
}
.search-result-preview {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.search-result-path {
color: color-mix(in oklab, var(--muted) 82%, var(--accent));
font-size: 0.72rem;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-empty {
display: grid;
min-height: 9rem;
place-items: center;
padding: 1rem;
color: var(--muted);
text-align: center;
font-size: 0.9rem;
}
.search-pane-help {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
padding: 0.65rem 0.8rem;
border-top: 1px solid var(--border);
color: var(--muted);
background: color-mix(in oklab, var(--surface-soft) 82%, transparent);
font-size: 0.72rem;
}
.search-pane-help span {
padding: 0.22rem 0.45rem;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--surface);
}
mark {
background: rgba(255, 230, 150, 0.8);
color: inherit;
padding: 0 0.15em;
border-radius: 3px;
}
.search-result.active mark {
background: rgba(255, 230, 150, 0.9);
}
@media (max-width: 700px) {
.site-actions.search-inline-open {
flex-wrap: wrap;
}
.site-actions.search-inline-open .site-search {
display: block;
order: 1;
flex: 1 1 calc(100% - 2.75rem);
min-width: 0;
}
.site-actions.search-inline-open #search-input {
display: block;
}
.site-actions.search-inline-open #search-btn,
.site-actions.search-inline-open .theme-toggle {
order: 2;
}
.search-inline-panel {
position: static;
order: 3;
flex: 1 1 100%;
width: 100%;
max-height: min(58vh, 30rem);
}
.search-pane-results {
min-height: 7rem;
}
}
@media (max-width: 560px) {
.search-pane-meta {
align-items: flex-start;
flex-direction: column;
gap: 0.2rem;
}
}
/* Table of contents */
#table-of-contents{
float: left;
width: var(--margin);
margin-left: calc(-1 * ((100vi - var(--content)) / 2));
padding-left: var(--gutter);
box-sizing: border-box;
position: sticky;
top: 5.5rem;
max-height: calc(100vh - 6rem);
overflow: auto;
font-size: .95rem;
border-right: 1px solid var(--border, #d7d7d7);
padding-top: .25rem;
}
#table-of-contents > h2{
margin: 0 0 .5rem;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--muted, #666);
}
#text-table-of-contents ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#text-table-of-contents li{
margin: .25rem 0;
}
#text-table-of-contents a{
text-decoration: none;
}
#text-table-of-contents a:hover{
text-decoration: underline;
}
#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }
h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
#text-table-of-contents a.is-active{
text-decoration: underline;
background-color: var(--active-toc);
}

95
assets/styles/components/org-syntax.css Normal file
View File

@@ -0,0 +1,95 @@
.org-comment { color: #b22222; }
.org-string { color: #8b2252; }
.org-keyword { color: #a020f0; }
.org-builtin { color: #483d8b; }
.org-constant { color: #008b8b; }
.org-function-name { color: #0000ff; }
.org-variable-name { color: sienna; }
.org-type { color: #228b22; }
.org-preprocessor { color: #483d8b; }
.org-doc { color: #8b2252; }
.org-warning { color: #ff8c00; font-weight: 700; }
:root[data-theme="dark-academia"] {
--syntax-comment: #a97861;
--syntax-string: #c99572;
--syntax-keyword: #d6b566;
--syntax-builtin: #b99b63;
--syntax-constant: #7fb092;
--syntax-function: #e8cf91;
--syntax-variable: #d0a35c;
--syntax-type: #8fbf9f;
--syntax-warning: #d58a55;
}
:root[data-theme="dark-academia"] .org-comment { color: var(--syntax-comment); }
:root[data-theme="dark-academia"] .org-string { color: var(--syntax-string); }
:root[data-theme="dark-academia"] .org-keyword { color: var(--syntax-keyword); }
:root[data-theme="dark-academia"] .org-builtin { color: var(--syntax-builtin); }
:root[data-theme="dark-academia"] .org-constant { color: var(--syntax-constant); }
:root[data-theme="dark-academia"] .org-function-name { color: var(--syntax-function); }
:root[data-theme="dark-academia"] .org-variable-name { color: var(--syntax-variable); }
:root[data-theme="dark-academia"] .org-type { color: var(--syntax-type); }
:root[data-theme="dark-academia"] .org-preprocessor { color: var(--syntax-builtin); }
:root[data-theme="dark-academia"] .org-doc { color: var(--syntax-string); }
:root[data-theme="dark-academia"] .org-warning { color: var(--syntax-warning); }
:not(pre) > code{
padding: 2px 5px; margin: 0 1px;
border: 1px solid var(--border); border-radius: 3px;
background-clip: padding-box;
color: var(--fg); font-size: 80%;
}
pre {
background-color: var(--bg);
}
.org-src-container{
border: 1px solid var(--border);
box-shadow: 3px 3px 3px color-mix(in oklab, #000 8%, transparent);
font-family: Lucida Console, monospace;
font-size: 80%;
margin: 1em auto;
padding: .1em .5em;
position: relative;
}
.org-src-container > pre{ overflow: auto; }
.org-src-container > pre:before{
display: block; position: absolute; top: 0; right: 0;
background-color: var(--surface-soft); color: var(--fg);
padding: 0 .5em; border-bottom-left-radius: 8px; border: 0;
font-size: 80%;
}
.org-src-container > pre.src-bash:before { content: "bash"; }
.org-src-container > pre.src-sh:before { content: "sh"; }
.org-src-container > pre.src-shell:before { content: "shell"; }
.org-src-container > pre.src-python:before { content: "Python"; }
.org-src-container > pre.src-emacs-lisp:before { content: "Emacs Lisp"; }
.org-src-container > pre.src-js:before,
.org-src-container > pre.src-javascript:before { content: "Javascript"; }
.org-src-container > pre.src-typescript:before { content: "Typescript"; }
.org-src-container > pre.src-html:before { content: "HTML"; }
.org-src-container > pre.src-css:before { content: "CSS"; }
.org-src-container > pre.src-c:before { content: "C"; }
.org-src-container > pre.src-cpp:before { content: "C++"; }
.org-src-container > pre.src-java:before { content: "Java"; }
.org-src-container > pre.src-rust:before { content: "Rust"; }
.org-src-container > pre.src-R:before { content: "R"; }
.copy-btn{
position: absolute; top: .4em; right: .4em;
background-color: var(--code-bg); color: var(--heading);
border: 1px solid var(--heading); border-radius: 4px;
padding: .2em .6em; font-size: .8rem; cursor: pointer; z-index: 10;
transition: background-color .3s;
}
.copy-btn:hover{ background-color: var(--heading); color: var(--code-bg); }
pre.src::before{ content: none !important; }
pre.src{
padding: 1.5em 1em 1em;
font-family: "Fira Mono","Courier New",monospace;
font-size: .9rem; line-height: 1.4;
overflow-x: auto; white-space: pre-wrap;
}

289
assets/styles/features/hidden-details.css Normal file
View File

@@ -0,0 +1,289 @@
.hidden-detail-root {
position: relative;
z-index: 20;
}
.hidden-whisper {
display: inline-block;
color: var(--muted);
cursor: help;
text-decoration: underline dotted color-mix(in oklab, var(--muted) 55%, transparent);
text-underline-offset: 0.22em;
}
.hidden-whisper::selection,
.hidden-greeting::selection,
.hidden-footer-note::selection {
background: color-mix(in oklab, var(--accent) 32%, transparent);
}
.hidden-footer-note {
max-width: 58ch;
margin: 0.45rem auto 0;
color: var(--muted);
font-size: 0.88rem;
text-align: center;
opacity: 0.82;
}
.hidden-toast {
position: fixed;
right: 1rem;
bottom: 1rem;
max-width: min(23rem, calc(100vw - 2rem));
padding: 0.8rem 0.95rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
color: var(--fg);
box-shadow: 0 16px 40px color-mix(in oklab, #000 18%, transparent);
font-size: 0.92rem;
line-height: 1.45;
opacity: 0;
transform: translateY(0.7rem);
pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
}
.hidden-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.hidden-message-text {
min-width: 0;
}
.hidden-layer-message strong {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.hidden-corner-object {
position: fixed;
left: 0.65rem;
bottom: 0.65rem;
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
border: 1px solid color-mix(in oklab, var(--border) 76%, transparent);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 84%, transparent);
color: var(--muted);
font: 1rem/1 monospace;
cursor: pointer;
opacity: 0.44;
transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
z-index: 21;
}
.hidden-corner-object:hover,
.hidden-corner-object:focus-visible {
opacity: 1;
color: var(--fg);
transform: translateY(-2px);
}
.hidden-greeting {
margin: 0.35rem 0 0;
color: var(--muted);
font-size: 0.9rem;
}
.hidden-drift-note {
position: fixed;
top: 20%;
left: 50%;
max-width: min(28rem, calc(100vw - 2rem));
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--fg);
box-shadow: 0 18px 52px color-mix(in oklab, #000 18%, transparent);
transform: translate(-50%, -0.5rem);
z-index: 40;
}
.hidden-drift-note pre {
margin: 0.75rem 0 0;
white-space: pre;
overflow: auto;
color: var(--muted);
}
.hidden-drift-note button {
margin-top: 0.8rem;
}
.hidden-object-rail {
position: fixed;
left: 50%;
bottom: 0.35rem;
display: flex;
gap: 0.3rem;
transform: translateX(-50%);
opacity: 0.18;
transition: opacity 180ms ease;
z-index: 20;
}
.hidden-object-rail:hover,
.hidden-object-rail:focus-within {
opacity: 0.94;
}
.hidden-keepsake {
width: 1.35rem;
height: 1.35rem;
border: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
border-radius: 50%;
background: color-mix(in oklab, var(--surface) 78%, transparent);
color: var(--muted);
font: 0.8rem/1 monospace;
cursor: pointer;
}
.hidden-keepsake:hover,
.hidden-keepsake:focus-visible {
color: var(--fg);
background: var(--surface);
}
.hidden-weather-window {
position: fixed;
right: 0.7rem;
top: 7.5rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 84%, transparent);
color: var(--muted);
font-size: 0.72rem;
padding: 0.25rem 0.45rem;
opacity: 0.24;
z-index: 20;
}
.hidden-weather-window:hover,
.hidden-weather-window:focus-visible {
opacity: 1;
color: var(--fg);
}
.hidden-oldweb-stamp {
position: fixed;
right: 0.75rem;
bottom: 4.2rem;
max-width: 12rem;
padding: 0.25rem 0.4rem;
border: 1px dashed var(--border);
background: var(--surface);
color: var(--muted);
font: 0.72rem/1.2 "Times New Roman", serif;
text-align: center;
opacity: 0.34;
cursor: help;
z-index: 20;
}
.hidden-oldweb-stamp:hover {
opacity: 1;
}
.hidden-guestbook-line {
color: var(--muted);
font-size: 0.86rem;
font-family: "Times New Roman", serif;
opacity: 0.78;
}
.hidden-hover-memory {
position: relative;
}
.hidden-hover-memory:hover::after {
content: attr(data-hidden-memory);
position: absolute;
left: 0;
top: 100%;
width: min(28rem, 80vw);
margin-top: 0.25rem;
padding: 0.55rem 0.65rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--muted);
font-size: 0.78rem;
font-family: 'Noto', system-ui, sans-serif;
font-weight: 400;
line-height: 1.35;
z-index: 30;
box-shadow: 0 12px 28px color-mix(in oklab, #000 12%, transparent);
}
body.hidden-home-takeover .db-root {
filter: saturate(0.9) contrast(1.03);
}
body.hidden-home-takeover .db-hero::before {
content: "under construction, emotionally";
display: inline-block;
margin-bottom: 0.5rem;
color: var(--muted);
font: 0.82rem "Times New Roman", serif;
}
.hidden-terminal {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hidden-terminal input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--code-bg);
color: var(--fg);
padding: 0.65rem;
font: inherit;
}
.hidden-terminal-log {
min-height: 10rem;
white-space: pre-wrap;
}
.hidden-secret-link {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
body.hidden-late-night {
--hidden-night-glow: color-mix(in oklab, var(--accent) 9%, transparent);
}
body.hidden-late-night::after {
content: "";
position: fixed;
inset: auto 0 0;
height: 18vh;
pointer-events: none;
background: linear-gradient(transparent, var(--hidden-night-glow));
opacity: 0.32;
}
@media (max-width: 760px) {
.hidden-toast {
right: 0.75rem;
bottom: 0.75rem;
}
.hidden-corner-object {
width: 1.75rem;
height: 1.75rem;
}
}

327
assets/styles/hidden-details.css
View File

@@ -1,326 +1 @@
.hidden-detail-root {
position: relative;
z-index: 20;
}
.hidden-whisper {
display: inline-block;
color: var(--muted);
cursor: help;
text-decoration: underline dotted color-mix(in oklab, var(--muted) 55%, transparent);
text-underline-offset: 0.22em;
}
.hidden-whisper::selection,
.hidden-greeting::selection,
.hidden-footer-note::selection {
background: color-mix(in oklab, var(--accent) 32%, transparent);
}
.hidden-footer-note {
max-width: 58ch;
margin: 0.45rem auto 0;
color: var(--muted);
font-size: 0.88rem;
text-align: center;
opacity: 0.82;
}
.hidden-toast {
position: fixed;
right: 1rem;
bottom: 1rem;
max-width: min(23rem, calc(100vw - 2rem));
padding: 0.8rem 0.95rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 92%, var(--bg) 8%);
color: var(--fg);
box-shadow: 0 16px 40px color-mix(in oklab, #000 18%, transparent);
font-size: 0.92rem;
line-height: 1.45;
opacity: 0;
transform: translateY(0.7rem);
pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
}
.hidden-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.has-hidden-avatar {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.hidden-toast.has-hidden-avatar,
.hidden-drift-message.has-hidden-avatar {
display: flex;
}
.hidden-footer-note.has-hidden-avatar,
.hidden-greeting.has-hidden-avatar,
.hidden-guestbook-line.has-hidden-avatar {
display: flex;
justify-content: center;
}
.hidden-message-avatar {
width: 2.1rem;
height: 2.1rem;
flex: 0 0 2.1rem;
border-radius: 50%;
object-fit: cover;
border: 1px solid color-mix(in oklab, var(--hidden-avatar-glow, var(--accent)) 62%, var(--border));
box-shadow: 0 0 18px color-mix(in oklab, var(--hidden-avatar-glow, var(--accent)) 34%, transparent);
background: color-mix(in oklab, var(--surface) 82%, transparent);
}
.hidden-message-text {
min-width: 0;
}
.hidden-layer-message strong {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.hidden-terminal-log .has-hidden-avatar {
align-items: flex-start;
}
.hidden-terminal-log .hidden-message-avatar {
margin-top: 0.1rem;
}
.hidden-corner-object {
position: fixed;
left: 0.65rem;
bottom: 0.65rem;
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
border: 1px solid color-mix(in oklab, var(--border) 76%, transparent);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 84%, transparent);
color: var(--muted);
font: 1rem/1 monospace;
cursor: pointer;
opacity: 0.44;
transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
z-index: 21;
}
.hidden-corner-object:hover,
.hidden-corner-object:focus-visible {
opacity: 1;
color: var(--fg);
transform: translateY(-2px);
}
.hidden-greeting {
margin: 0.35rem 0 0;
color: var(--muted);
font-size: 0.9rem;
}
.hidden-drift-note {
position: fixed;
top: 20%;
left: 50%;
max-width: min(28rem, calc(100vw - 2rem));
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--fg);
box-shadow: 0 18px 52px color-mix(in oklab, #000 18%, transparent);
transform: translate(-50%, -0.5rem);
z-index: 40;
}
.hidden-drift-note pre {
margin: 0.75rem 0 0;
white-space: pre;
overflow: auto;
color: var(--muted);
}
.hidden-drift-note button {
margin-top: 0.8rem;
}
.hidden-object-rail {
position: fixed;
left: 50%;
bottom: 0.35rem;
display: flex;
gap: 0.3rem;
transform: translateX(-50%);
opacity: 0.18;
transition: opacity 180ms ease;
z-index: 20;
}
.hidden-object-rail:hover,
.hidden-object-rail:focus-within {
opacity: 0.94;
}
.hidden-keepsake {
width: 1.35rem;
height: 1.35rem;
border: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
border-radius: 50%;
background: color-mix(in oklab, var(--surface) 78%, transparent);
color: var(--muted);
font: 0.8rem/1 monospace;
cursor: pointer;
}
.hidden-keepsake:hover,
.hidden-keepsake:focus-visible {
color: var(--fg);
background: var(--surface);
}
.hidden-weather-window {
position: fixed;
right: 0.7rem;
top: 7.5rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 84%, transparent);
color: var(--muted);
font-size: 0.72rem;
padding: 0.25rem 0.45rem;
opacity: 0.24;
z-index: 20;
}
.hidden-weather-window:hover,
.hidden-weather-window:focus-visible {
opacity: 1;
color: var(--fg);
}
.hidden-oldweb-stamp {
position: fixed;
right: 0.75rem;
bottom: 4.2rem;
max-width: 12rem;
padding: 0.25rem 0.4rem;
border: 1px dashed var(--border);
background: var(--surface);
color: var(--muted);
font: 0.72rem/1.2 "Times New Roman", serif;
text-align: center;
opacity: 0.34;
cursor: help;
z-index: 20;
}
.hidden-oldweb-stamp:hover {
opacity: 1;
}
.hidden-guestbook-line {
color: var(--muted);
font-size: 0.86rem;
font-family: "Times New Roman", serif;
opacity: 0.78;
}
.hidden-hover-memory {
position: relative;
}
.hidden-hover-memory:hover::after {
content: attr(data-hidden-memory);
position: absolute;
left: 0;
top: 100%;
width: min(28rem, 80vw);
margin-top: 0.25rem;
padding: 0.55rem 0.65rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--muted);
font-size: 0.78rem;
font-family: 'Noto', system-ui, sans-serif;
font-weight: 400;
line-height: 1.35;
z-index: 30;
box-shadow: 0 12px 28px color-mix(in oklab, #000 12%, transparent);
}
body.hidden-home-takeover .db-root {
filter: saturate(0.9) contrast(1.03);
}
body.hidden-home-takeover .db-hero::before {
content: "under construction, emotionally";
display: inline-block;
margin-bottom: 0.5rem;
color: var(--muted);
font: 0.82rem "Times New Roman", serif;
}
.hidden-terminal {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hidden-terminal input {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--code-bg);
color: var(--fg);
padding: 0.65rem;
font: inherit;
}
.hidden-terminal-log {
min-height: 10rem;
white-space: pre-wrap;
}
.hidden-secret-link {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
body.hidden-late-night {
--hidden-night-glow: color-mix(in oklab, var(--accent) 9%, transparent);
}
body.hidden-late-night::after {
content: "";
position: fixed;
inset: auto 0 0;
height: 18vh;
pointer-events: none;
background: linear-gradient(transparent, var(--hidden-night-glow));
opacity: 0.32;
}
@media (max-width: 760px) {
.hidden-toast {
right: 0.75rem;
bottom: 0.75rem;
}
.hidden-corner-object {
width: 1.75rem;
height: 1.75rem;
}
}
@import url("./features/hidden-details.css");

252
assets/styles/kanban.css
View File

@@ -1,251 +1 @@
#kanban-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.kanban-column {
background: #f8f9fa;
border-radius: 8px;
padding: 0.6rem;
display: flex;
flex-direction: column;
}
.kanban-column h3 {
text-align: center;
font-size: 0.9rem;
margin: 0.4rem 0 0.6rem;
font-weight: 600;
}
.kanban-list {
flex-grow: 1;
min-height: 3rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.kanban-card {
background: var(--bg);
border-radius: 6px;
padding: 0.5rem 0.6rem;
font-size: 0.85rem;
cursor: grab;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
color: var(--fg);
}
.kanban-card.dragging {
opacity: 0.5;
cursor: grabbing;
}
.kanban-column[data-state="completed"] {
background: var(--kb-bg-completed);
}
.kanban-column[data-state="manager_review"] {
background: var(--kb-bg-manager-review);
}
.kanban-column[data-state="in_progress"] {
background: var(--kb-bg-in-progress);
}
.kanban-column[data-state="not_started"] {
background: var(--kb-bg-not-started);
}
.kanban-column[data-state="comments"] {
background: var(--kb-bg-comments);
}
#mobile-move-panel {
display: none;
max-width: 22rem;
margin: 1.5rem auto 0 auto;
padding: 1rem;
box-sizing: border-box;
border: 1px solid var(--border-color, #ddd);
border-radius: 0.5rem;
background: var(--bg);
color: var(--fg);
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
font-size: 0.9rem;
}
#mobile-move-panel * {
box-sizing: border-box;
}
#mobile-move-panel h4 {
margin: 0 0 0.75rem 0;
font-size: 0.95rem;
font-weight: 600;
}
#mobile-move-panel label {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
}
#mobile-move-panel select,
#mobile-move-panel button {
font-size: 0.9rem;
padding: 0.4rem 0.5rem;
min-width: 0;
}
#mobile-move-panel button {
margin-top: 0.5rem;
align-self: flex-start;
}
#mobile-move-panel select {
width: 100%;
max-width: 100%;
padding: 0.45rem 2rem 0.45rem 0.6rem;
font-size: 0.9rem;
line-height: 1.2;
border: 1px solid var(--border-color, #ccc);
border-radius: 0.4rem;
background-color: var(--bg, #fff);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-image:
linear-gradient(45deg, transparent 50%, #666 50%),
linear-gradient(135deg, #666 50%, transparent 50%),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 1.2rem) 50%,
calc(100% - 0.9rem) 50%,
100% 0;
background-size:
6px 6px,
6px 6px,
2.5rem 100%;
background-repeat: no-repeat;
margin-bottom: 1em;
}
#mobile-move-panel select:focus {
outline: none;
border-color: #666;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
#mobile-move-panel button {
width: 100%;
padding: 0.5rem 0.6rem;
font-size: 0.9rem;
border-radius: 0.4rem;
border: 1px solid #888;
background: #f8f8f8;
cursor: pointer;
}
#mobile-move-panel button:active {
background: #eee;
}
#mobile-move-panel select:disabled {
background-color: #f3f3f3;
color: #555;
border-color: #ccc;
opacity: 1;
cursor: default;
background-image: none;
}
#progress-wrapper {
margin-bottom: 16px;
}
#progress-label {
font-size: 14px;
margin-bottom: 6px;
text-align: right;
color: #555;
}
#progress-bar {
width: 100%;
height: 10px;
background: #e5e7eb;
border-radius: 999px;
overflow: hidden;
}
#progress-fill {
height: 100%;
width: 0%;
background: #22c55e;
transition: width 0.3s ease;
}
#level-tabs {
display: inline-flex;
align-items: center;
gap: 0;
margin-bottom: 1rem;
border-radius: 999px;
padding: 3px;
background: var(--bg, #fff);
width: fit-content;
}
.level-tab {
border: none;
background: transparent;
padding: 0.35rem 1rem;
font-size: 0.85rem;
border-radius: 999px;
cursor: pointer;
color: var(--fg, #333);
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.1s ease;
}
.level-tab:hover {
background: rgba(0,0,0,0.05);
}
.level-tab.active {
background: #333;
color: white;
font-weight: 500;
}
.level-tab:active {
transform: scale(0.97);
}
@import url("./components/kanban.css");

162
assets/styles/layout/site-shell.css Normal file
View File

@@ -0,0 +1,162 @@
.banner-header{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.85rem;
padding: 0.7rem;
margin-top: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
box-shadow: 0 12px 32px color-mix(in oklab, #000 8%, transparent);
}
:root[data-theme="dark-academia"] .banner-header,
:root[data-theme="dark-academia"] .org-src-container,
:root[data-theme="dark-academia"] #notes-form,
:root[data-theme="dark-academia"] .note {
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark-academia"] h1,
:root[data-theme="dark-academia"] h2,
:root[data-theme="dark-academia"] h3 {
font-family: Georgia, "Times New Roman", serif;
}
.site-brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--fg);
font-weight: 800;
white-space: nowrap;
}
.site-brand:hover {
text-decoration: none;
color: var(--heading);
}
.site-brand__text {
font-size: 0.98rem;
}
.banner-logo{
height: 42px;
width: 42px;
object-fit: cover;
border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}
.site-nav {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
gap: 0.25rem;
font-weight: 700;
font-size: 0.95rem;
}
.site-nav a {
color: var(--muted);
padding: 0.45rem 0.65rem;
border-radius: 7px;
}
.site-nav a:hover,
.site-nav a:focus-visible {
color: var(--fg);
background: color-mix(in oklab, var(--fg) 7%, transparent);
text-decoration: none;
outline: 0;
}
.site-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
flex: 0 1 23rem;
}
.site-search {
display: block;
flex: 1 1 13rem;
min-width: 10rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#preamble.status{
max-width: var(--content);
margin-left: auto;
margin-right: auto;
padding-left: var(--body-pad);
padding-right: var(--body-pad);
padding-top: 0.25rem;
box-sizing: content-box;
}
#preamble .banner-header,
#preamble #updated{
max-width: 100%;
}
footer{
color: var(--muted);
padding: 1.25rem;
margin-top: 3rem;
border-top: 1px solid var(--border);
text-align: center;
font-size: .9rem;
}
#content.content{
max-width: var(--content);
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--body-pad);
padding-right: var(--body-pad);
box-sizing: content-box;
position: relative;
padding-top: 1.5rem;
}
#content .figure,
#content img:not(.fullwidth){
max-width: 100%;
height: auto;
border-radius: 8px;
}
body.no-sidenotes {
--body-pad: 0;
--margin: 0;
--gutter: 0;
--content-min: 80ch;
--content-max: 1200px;
--content: clamp(
var(--content-min),
100vi,
var(--content-max)
);
}

135
assets/styles/media.css
View File

@@ -1,134 +1 @@
@media (max-width: 600px){
.banner-header {
align-items: stretch;
gap: 0.7rem;
margin-top: 0.75rem;
}
.site-brand {
justify-content: center;
}
.site-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 0.2rem;
font-size: 0.92rem;
}
.site-nav a {
padding: 0.42rem 0.55rem;
}
.site-actions {
width: 100%;
flex: 1 1 100%;
justify-content: center;
}
.site-search {
display: none;
}
#updated {
text-align: center;
}
body.no-sidenotes {
margin-left: 1em;
margin-right: 1em;
}
#mobile-move-panel {
display: block;
}
}
@media (prefers-color-scheme: dark){
:root:not([data-theme]){
--bg: #0f1115;
--fg: #e6e6e6;
--link: #8ab4ff;
--heading: #9ecbff;
--code-bg: #1a1d24;
--note-color: #c2c7cf;
--note-bg: transparent;
--border: #2a2f3a;
--chip-bg: #1f2330;
--chip-fg: #cfd3da;
--muted: #a9b0bb;
--surface: #151820;
--surface-soft: #1b202a;
--accent: #8ab4ff;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: var(--border);
--text-muted: var(--muted);
--accent-bg: color-mix(in oklab, var(--accent) 12%, var(--surface));
}
.countdown-wrap {
color: var(--fg, #ddd);
}
time.countdown {
color: var(--accent, #7abfff);
background: color-mix(in srgb, var(--accent, #7abfff) 15%, transparent);
box-shadow: 0 0 6px rgba(255,255,255,0.05);
}
time.countdown.expired {
color: #777;
}
}
@media (max-width: 1250px){
:root {
--content-min: 0px;
--content: min(var(--content-max), calc(100vi - 2 * var(--body-pad)));
}
#preamble.status{
padding-right: var(--body-pad);
}
#content.content{
padding-right: var(--body-pad);
}
.sidenote,
.marginnote{
float: none;
clear: both;
width: auto;
display: block;
margin: 0.5rem 0 0.75rem;
padding-left: 0.75rem;
border-left: 3px solid rgba(0,0,0,.08);
margin-right: 0;
}
.fullwidth{
max-width: calc(100vw - 2 * var(--body-pad));
}
.sidenote, .marginnote{
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
}
.sidenote .mn-img,
.marginnote .mn-img{
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
}
#table-of-contents{
float: none;
position: static;
width: auto;
margin: 0 0 1rem;
padding: .5rem .75rem;
border-right: 0;
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
border-radius: 4px;
}
}
@import url("./utilities/responsive.css");

503
assets/styles/misc.css
View File

@@ -1,502 +1 @@
#updated{
font-size: .76rem;
color: var(--muted);
margin: .45rem 0 0;
text-align: right;
}
.sidenote,
.marginnote{
float: right;
width: var(--margin);
margin-right: calc(-1 * ((100vi - var(--content)) / 2));
padding-right: var(--gutter);
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
margin-top: .3rem;
margin-bottom: .6rem;
font-size: .95rem;
line-height: 1.35;
color: var(--note-color);
background: var(--note-bg);
box-sizing: border-box;
}
.sidenote,
.marginnote{
display: block;
clear: right;
}
.sidenote + .sidenote,
.sidenote + .marginnote,
.marginnote + .sidenote,
.marginnote + .marginnote{
margin-top: .4rem;
}
.footnote-sidenote::before{
content: attr(data-fn) " ";
font-size: 0.85em;
vertical-align: super;
margin-right: 0.2rem;
opacity: 0.85;
}
body{ counter-reset: sidenote-counter; }
.sidenote-number:after{
counter-increment: sidenote-counter;
content: counter(sidenote-counter);
font-size: .85em;
vertical-align: super;
margin-left: .15rem;
}
.margin-toggle{
position: absolute;
opacity: 0;
pointer-events: none;
}
.fullwidth{
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
height: auto;
margin: 1.25rem 0 1.75rem;
width: 100%;
max-width: min(
calc(var(--content) + var(--bleed) * 2),
var(--fullwidth-cap),
calc(100vw - 2 * var(--body-pad))
);
}
.figure .fullwidth{ width: inherit; }
.figure figcaption{
text-align: center; font-size: .95rem; color: #666; margin-top: .4rem;
}
.post-date{
color: var(--muted);
font-size: .86em;
margin-left: 8px;
}
.post-tag{
float: right;
display: inline-block;
background-color: var(--chip-bg);
color: var(--chip-fg);
border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
border-radius: 999px;
padding: 0.08rem 0.5rem;
margin-left: 6px;
font-size: 0.8em;
line-height: 1.7;
}
.filetags {
margin-top: .5rem;
display: flex;
flex-wrap: wrap;
gap: .3rem .4rem;
font-size: .9rem;
color: #666;
}
.filetags .tag {
display: inline-block;
padding: .1rem .45rem;
border-radius: 999px;
background: var(--chip-bg);
color: var(--chip-fg);
border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
line-height: 1.6;
}
.figure figcaption{ color: var(--muted); }
.org-src-container{
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: none;
overflow: hidden;
background: var(--code-bg);
}
:not(pre) > code{
border: 1px solid var(--border);
background-color: var(--code-bg);
color: var(--fg);
border-radius: 5px;
padding: 0.05rem 0.28rem;
}
.theme-toggle {
border: 1px solid var(--border);
background: color-mix(in oklab, var(--surface-soft) 82%, transparent);
color: var(--fg);
min-height: 2.25rem;
padding: 0 0.75rem;
border-radius: 7px;
cursor: pointer;
font: inherit;
font-size: 0.9rem;
font-weight: 750;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
background-color: color-mix(in oklab, var(--accent) 12%, transparent);
color: var(--heading);
border-color: color-mix(in oklab, var(--accent) 42%, var(--border));
outline: 0;
}
.web-logo {
position: absolute;
top: 0.75rem;
left: 1rem;
z-index: 1000;
width: 10%;
padding: .25rem;
border-radius: 6px;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.sidenote .mn-fig,
.marginnote .mn-fig{
margin: 0;
}
.sidenote .mn-img,
.marginnote .mn-img{
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--border, #d7d7d7);
border-radius: 6px;
background: var(--bg);
}
.sidenote .mn-fig figcaption,
.marginnote .mn-fig figcaption{
margin-top: .35rem;
font-size: .85rem;
color: var(--muted, #666);
line-height: 1.35;
}
.sidenote img {
margin-top: 0.35rem;
display: block;
}
.countdown-wrap {
display: flex;
justify-content: center;
align-items: center;
padding: 1em 0;
font-family: system-ui, sans-serif;
font-size: 1.2rem;
color: var(--fg, #222);
background: var(--bg-alt, transparent);
text-align: center;
}
time.countdown {
font-weight: 600;
color: var(--accent, #2a7fff);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
padding: 0.25em 0.6em;
border-radius: 0.5em;
background: color-mix(in srgb, var(--accent, #2a7fff) 10%, transparent);
box-shadow: 0 0 8px rgba(0,0,0,0.1);
transition: color 0.3s ease, background 0.3s ease;
}
time.countdown.expired {
color: #999;
background: none;
font-weight: 500;
text-decoration: line-through;
}
/* SEARCH */
#search-input {
width: 100%;
min-height: 2.25rem;
padding: 0.35rem 0.7rem;
font-size: 0.9rem;
border: 1px solid var(--border);
border-radius: 7px;
font-family: var(--font-body);
font-weight: 450;
background-color: var(--surface);
color: var(--fg);
}
#search-btn {
display: inline-grid;
place-items: center;
flex: 0 0 2.25rem;
width: 2.25rem;
height: 2.25rem;
background: color-mix(in oklab, var(--surface-soft) 82%, transparent);
border: 1px solid var(--border);
border-radius: 7px;
color: var(--fg);
cursor: pointer;
font-size: 0.95rem;
line-height: 1;
}
#search-input:focus,
#search-btn:focus-visible {
outline: 0;
border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}
@media (max-width: 700px) {
#search-input {
display: none;
}
#search-btn {
font-size: 1rem;
}
}
.site-actions {
position: relative;
}
.search-inline-panel {
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
width: min(38rem, calc(100vw - 2rem));
max-height: min(64vh, 34rem);
display: none;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
background: color-mix(in oklab, var(--surface) 94%, var(--bg));
border: 1px solid color-mix(in oklab, var(--border) 78%, var(--fg));
border-radius: 8px;
box-shadow:
0 18px 56px rgba(0, 0, 0, 0.22),
0 2px 12px rgba(0, 0, 0, 0.12);
z-index: 1000;
}
.site-actions.search-inline-open .search-inline-panel {
display: grid;
}
.search-pane-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 1rem 0.55rem;
border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
}
.search-pane-meta h2 {
margin: 0;
color: var(--fg);
font-size: 0.95rem;
line-height: 1.2;
}
#search-pane-count {
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
}
.search-pane-results {
min-height: 8rem;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.45rem;
}
.search-result {
display: grid;
gap: 0.26rem;
padding: 0.7rem 0.8rem;
border: 1px solid transparent;
border-radius: 7px;
color: inherit;
cursor: pointer;
text-decoration: none;
}
.search-result:hover,
.search-result.active {
background: var(--accent-bg);
border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
text-decoration: none;
}
.search-result-title {
color: var(--fg);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.25;
}
.search-result-preview {
color: var(--muted);
font-size: 0.82rem;
line-height: 1.35;
}
.search-result-path {
color: color-mix(in oklab, var(--muted) 82%, var(--accent));
font-size: 0.72rem;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-empty {
display: grid;
min-height: 9rem;
place-items: center;
padding: 1rem;
color: var(--muted);
text-align: center;
font-size: 0.9rem;
}
.search-pane-help {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
padding: 0.65rem 0.8rem;
border-top: 1px solid var(--border);
color: var(--muted);
background: color-mix(in oklab, var(--surface-soft) 82%, transparent);
font-size: 0.72rem;
}
.search-pane-help span {
padding: 0.22rem 0.45rem;
border: 1px solid var(--border);
border-radius: 5px;
background: var(--surface);
}
mark {
background: rgba(255, 230, 150, 0.8);
color: inherit;
padding: 0 0.15em;
border-radius: 3px;
}
.search-result.active mark {
background: rgba(255, 230, 150, 0.9);
}
@media (max-width: 700px) {
.site-actions.search-inline-open {
flex-wrap: wrap;
}
.site-actions.search-inline-open .site-search {
display: block;
order: 1;
flex: 1 1 calc(100% - 2.75rem);
min-width: 0;
}
.site-actions.search-inline-open #search-input {
display: block;
}
.site-actions.search-inline-open #search-btn,
.site-actions.search-inline-open .theme-toggle {
order: 2;
}
.search-inline-panel {
position: static;
order: 3;
flex: 1 1 100%;
width: 100%;
max-height: min(58vh, 30rem);
}
.search-pane-results {
min-height: 7rem;
}
}
@media (max-width: 560px) {
.search-pane-meta {
align-items: flex-start;
flex-direction: column;
gap: 0.2rem;
}
}
/* Table of contents */
#table-of-contents{
float: left;
width: var(--margin);
margin-left: calc(-1 * ((100vi - var(--content)) / 2));
padding-left: var(--gutter);
box-sizing: border-box;
position: sticky;
top: 5.5rem;
max-height: calc(100vh - 6rem);
overflow: auto;
font-size: .95rem;
border-right: 1px solid var(--border, #d7d7d7);
padding-top: .25rem;
}
#table-of-contents > h2{
margin: 0 0 .5rem;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--muted, #666);
}
#text-table-of-contents ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#text-table-of-contents li{
margin: .25rem 0;
}
#text-table-of-contents a{
text-decoration: none;
}
#text-table-of-contents a:hover{
text-decoration: underline;
}
#text-table-of-contents ul ul { margin-left: .75rem; opacity: .9; }
h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
#text-table-of-contents a.is-active{
text-decoration: underline;
background-color: var(--active-toc);
}
@import url("./components/org-content.css");

96
assets/styles/org-syntax.css
View File

@@ -1,95 +1 @@
.org-comment { color: #b22222; }
.org-string { color: #8b2252; }
.org-keyword { color: #a020f0; }
.org-builtin { color: #483d8b; }
.org-constant { color: #008b8b; }
.org-function-name { color: #0000ff; }
.org-variable-name { color: sienna; }
.org-type { color: #228b22; }
.org-preprocessor { color: #483d8b; }
.org-doc { color: #8b2252; }
.org-warning { color: #ff8c00; font-weight: 700; }
:root[data-theme="dark-academia"] {
--syntax-comment: #a97861;
--syntax-string: #c99572;
--syntax-keyword: #d6b566;
--syntax-builtin: #b99b63;
--syntax-constant: #7fb092;
--syntax-function: #e8cf91;
--syntax-variable: #d0a35c;
--syntax-type: #8fbf9f;
--syntax-warning: #d58a55;
}
:root[data-theme="dark-academia"] .org-comment { color: var(--syntax-comment); }
:root[data-theme="dark-academia"] .org-string { color: var(--syntax-string); }
:root[data-theme="dark-academia"] .org-keyword { color: var(--syntax-keyword); }
:root[data-theme="dark-academia"] .org-builtin { color: var(--syntax-builtin); }
:root[data-theme="dark-academia"] .org-constant { color: var(--syntax-constant); }
:root[data-theme="dark-academia"] .org-function-name { color: var(--syntax-function); }
:root[data-theme="dark-academia"] .org-variable-name { color: var(--syntax-variable); }
:root[data-theme="dark-academia"] .org-type { color: var(--syntax-type); }
:root[data-theme="dark-academia"] .org-preprocessor { color: var(--syntax-builtin); }
:root[data-theme="dark-academia"] .org-doc { color: var(--syntax-string); }
:root[data-theme="dark-academia"] .org-warning { color: var(--syntax-warning); }
:not(pre) > code{
padding: 2px 5px; margin: 0 1px;
border: 1px solid var(--border); border-radius: 3px;
background-clip: padding-box;
color: var(--fg); font-size: 80%;
}
pre {
background-color: var(--bg);
}
.org-src-container{
border: 1px solid var(--border);
box-shadow: 3px 3px 3px color-mix(in oklab, #000 8%, transparent);
font-family: Lucida Console, monospace;
font-size: 80%;
margin: 1em auto;
padding: .1em .5em;
position: relative;
}
.org-src-container > pre{ overflow: auto; }
.org-src-container > pre:before{
display: block; position: absolute; top: 0; right: 0;
background-color: var(--surface-soft); color: var(--fg);
padding: 0 .5em; border-bottom-left-radius: 8px; border: 0;
font-size: 80%;
}
.org-src-container > pre.src-bash:before { content: "bash"; }
.org-src-container > pre.src-sh:before { content: "sh"; }
.org-src-container > pre.src-shell:before { content: "shell"; }
.org-src-container > pre.src-python:before { content: "Python"; }
.org-src-container > pre.src-emacs-lisp:before { content: "Emacs Lisp"; }
.org-src-container > pre.src-js:before,
.org-src-container > pre.src-javascript:before { content: "Javascript"; }
.org-src-container > pre.src-typescript:before { content: "Typescript"; }
.org-src-container > pre.src-html:before { content: "HTML"; }
.org-src-container > pre.src-css:before { content: "CSS"; }
.org-src-container > pre.src-c:before { content: "C"; }
.org-src-container > pre.src-cpp:before { content: "C++"; }
.org-src-container > pre.src-java:before { content: "Java"; }
.org-src-container > pre.src-rust:before { content: "Rust"; }
.org-src-container > pre.src-R:before { content: "R"; }
.copy-btn{
position: absolute; top: .4em; right: .4em;
background-color: var(--code-bg); color: var(--heading);
border: 1px solid var(--heading); border-radius: 4px;
padding: .2em .6em; font-size: .8rem; cursor: pointer; z-index: 10;
transition: background-color .3s;
}
.copy-btn:hover{ background-color: var(--heading); color: var(--code-bg); }
pre.src::before{ content: none !important; }
pre.src{
padding: 1.5em 1em 1em;
font-family: "Fira Mono","Courier New",monospace;
font-size: .9rem; line-height: 1.4;
overflow-x: auto; white-space: pre-wrap;
}
@import url("./components/org-syntax.css");

648
assets/styles/pages/home-dashboard.css Normal file
View File

@@ -0,0 +1,648 @@
/* Home dashboard styles. Scoped to .db-* so article pages keep their layout. */
.db-root {
--db-surface: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
--db-surface-strong: color-mix(in oklab, var(--bg) 88%, var(--fg) 12%);
--db-line: color-mix(in oklab, var(--border) 78%, var(--fg) 22%);
--db-text-soft: color-mix(in oklab, var(--fg) 68%, var(--bg) 32%);
--db-blue: #2f6fed;
--db-green: #15835b;
--db-amber: #9d6400;
--db-orange: #c55a11;
--db-red: #b64c45;
width: 100%;
padding: 1.5rem 0 4rem;
box-sizing: border-box;
}
.db-root *,
.db-root *::before,
.db-root *::after {
box-sizing: border-box;
}
.db-kicker {
margin: 0 0 0.35rem;
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
}
.db-hero {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
margin-bottom: 1rem;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-hero__brand {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.db-hero__logo {
width: clamp(64px, 10vw, 96px);
height: clamp(64px, 10vw, 96px);
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--db-line);
background: var(--bg);
flex: 0 0 auto;
}
.db-hero__title {
margin: 0;
color: var(--fg);
font-size: clamp(2.4rem, 7vw, 5rem);
font-weight: 900;
line-height: 0.95;
}
.db-hero__sub {
max-width: 58ch;
margin: 0.55rem 0 0;
color: var(--db-text-soft);
font-size: 0.98rem;
line-height: 1.55;
}
.db-now {
display: grid;
align-content: center;
min-width: min(100%, 230px);
padding: 1rem;
background: color-mix(in oklab, var(--bg) 84%, var(--fg) 16%);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-now__label {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.db-now__clock {
display: block;
margin: 0.2rem 0 0.85rem;
color: var(--fg);
font-size: clamp(1.9rem, 4vw, 2.75rem);
font-variant-numeric: tabular-nums;
font-weight: 800;
line-height: 1;
}
.db-command {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
gap: 1rem;
align-items: center;
padding: 1rem 0;
}
.db-command__title {
margin: 0;
color: var(--fg);
font-size: clamp(1.2rem, 3vw, 1.85rem);
line-height: 1.15;
}
.db-command__search {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 48px;
padding: 0 0.85rem;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-command__search:focus-within {
border-color: var(--db-blue);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--db-blue) 18%, transparent);
}
.db-search-icon {
color: var(--muted);
font-size: 1.1rem;
}
.db-command__search input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--fg);
font: inherit;
}
.db-command__search input::placeholder {
color: var(--muted);
}
.db-quicknav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin: 0 0 1.25rem;
}
.db-qn-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"icon label"
"icon meta";
column-gap: 0.7rem;
align-items: center;
min-height: 76px;
padding: 0.9rem;
color: var(--fg);
text-decoration: none;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-left: 4px solid var(--db-blue);
border-radius: 8px;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.db-qn-item:hover,
.db-qn-item:focus-visible {
color: var(--fg);
text-decoration: none;
border-color: color-mix(in oklab, var(--db-blue) 55%, var(--db-line));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.db-qn-item.is-hidden {
display: none;
}
.db-qn-item--writing,
.db-qn-item--notes { border-left-color: var(--db-blue); }
.db-qn-item--career,
.db-qn-item--wird { border-left-color: var(--db-green); }
.db-qn-item--lima,
.db-qn-item--status { border-left-color: var(--db-amber); }
.db-qn-item--system,
.db-qn-item--zone { border-left-color: var(--db-red); }
.db-qn-item--author { border-left-color: var(--db-orange); }
.db-qn-icon {
grid-area: icon;
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
color: var(--fg);
background: color-mix(in oklab, var(--fg) 8%, transparent);
border: 1px solid var(--db-line);
border-radius: 8px;
font-size: 1.05rem;
line-height: 1;
}
.db-qn-label {
grid-area: label;
min-width: 0;
overflow-wrap: anywhere;
font-size: 1rem;
font-weight: 850;
}
.db-qn-meta {
grid-area: meta;
color: var(--muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.db-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.db-panel {
grid-column: span 4;
min-width: 0;
padding: 1rem;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-panel-stack {
grid-column: span 4;
display: grid;
gap: 1rem;
min-width: 0;
}
.db-panel-stack .db-panel {
grid-column: auto;
}
.db-panel--wide {
grid-column: span 8;
}
.db-panel--stats,
.db-panel--focus {
grid-column: span 4;
}
.db-panel--about {
grid-column: span 8;
}
.db-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.85rem;
}
.db-panel__title {
margin: 0;
color: var(--fg);
font-size: 1.05rem;
line-height: 1.25;
}
.db-panel__more {
flex: 0 0 auto;
color: var(--link);
font-size: 0.82rem;
font-weight: 800;
text-decoration: none;
}
.db-panel__more:hover {
text-decoration: underline;
}
.db-panel__desc {
margin: 0;
color: var(--db-text-soft);
font-size: 0.92rem;
line-height: 1.6;
}
.db-feed {
display: grid;
gap: 0.15rem;
list-style: none;
margin: 0;
padding: 0;
}
.db-feed__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.6rem;
align-items: baseline;
min-width: 0;
padding: 0.62rem 0;
margin: 0;
border-top: 1px solid color-mix(in oklab, var(--db-line) 70%, transparent);
line-height: 1.35;
}
.db-feed__item::before {
content: none !important;
}
.db-feed__dot {
width: 0.48rem;
height: 0.48rem;
margin-top: 0.25rem;
background: var(--db-green);
border-radius: 999px;
}
.db-feed__item a {
min-width: 0;
color: var(--fg);
font-size: 0.92rem;
font-weight: 700;
overflow-wrap: anywhere;
text-decoration: none;
}
.db-feed__item a:hover {
color: var(--link);
text-decoration: underline;
}
.db-feed__meta {
color: var(--muted);
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
.db-comment-feed {
display: grid;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.db-comment-feed__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.65rem;
align-items: start;
min-width: 0;
padding: 0.72rem 0;
margin: 0;
border-top: 1px solid color-mix(in oklab, var(--db-line) 70%, transparent);
}
.db-comment-feed__item::before {
content: none !important;
}
.db-comment-feed__body {
min-width: 0;
}
.db-comment-feed__top {
display: flex;
flex-wrap: wrap;
gap: 0.32rem;
align-items: baseline;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
}
.db-comment-feed__top strong {
color: var(--fg);
font-size: 0.86rem;
}
.db-comment-feed__page {
color: var(--link);
font-weight: 800;
text-decoration: none;
}
a.db-comment-feed__page:hover {
text-decoration: underline;
}
.db-comment-feed__top time {
margin-left: auto;
color: var(--muted);
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
.db-comment-feed__body p {
margin: 0.22rem 0 0;
color: var(--db-text-soft);
font-size: 0.9rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.db-comment-feed__empty {
color: var(--muted);
font-size: 0.9rem;
font-style: italic;
}
.db-stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
.db-stat {
min-height: 92px;
padding: 0.8rem;
background: color-mix(in oklab, var(--bg) 82%, var(--fg) 18%);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-stat__num {
display: block;
color: var(--fg);
font-size: clamp(1.55rem, 4vw, 2.1rem);
font-variant-numeric: tabular-nums;
font-weight: 900;
line-height: 1;
}
.db-stat__label {
display: block;
margin-top: 0.5rem;
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.db-year-bar {
position: relative;
height: 8px;
background: color-mix(in oklab, var(--border) 75%, var(--bg) 25%);
border-radius: 999px;
}
.db-year-bar__fill {
width: 0%;
min-width: 6px;
height: 100%;
background: var(--db-green);
border-radius: 999px;
transition: width 0.45s ease;
}
.db-year-bar__label {
position: absolute;
right: 0;
bottom: calc(100% + 0.35rem);
color: var(--muted);
font-size: 0.74rem;
font-weight: 850;
}
.db-task-list,
.db-link-stack {
display: grid;
gap: 0.55rem;
}
.db-task-list a,
.db-link-stack a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 44px;
padding: 0.65rem 0.75rem;
color: var(--fg);
background: color-mix(in oklab, var(--bg) 85%, var(--fg) 15%);
border: 1px solid var(--db-line);
border-radius: 8px;
font-weight: 750;
text-decoration: none;
}
.db-task-list a:hover,
.db-link-stack a:hover {
color: var(--link);
text-decoration: none;
border-color: color-mix(in oklab, var(--link) 45%, var(--db-line));
}
.db-task-list strong {
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.db-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.9rem;
}
.db-tag {
padding: 0.28rem 0.62rem;
color: var(--chip-fg);
background: var(--chip-bg);
border: 1px solid var(--db-line);
border-radius: 999px;
font-size: 0.76rem;
font-weight: 750;
}
:root[data-theme="dark"] .db-root,
:root[data-theme="dark-academia"] .db-root {
--db-surface: color-mix(in oklab, var(--bg) 82%, var(--fg) 18%);
--db-surface-strong: color-mix(in oklab, var(--bg) 72%, var(--fg) 28%);
--db-line: color-mix(in oklab, var(--border) 80%, var(--fg) 20%);
--db-blue: #78a6ff;
--db-green: #63c995;
--db-amber: #d7a451;
--db-orange: #f29a62;
--db-red: #e28982;
}
:root[data-theme="dark-academia"] .db-root {
--db-blue: #c6b07a;
--db-green: #7fb092;
--db-amber: #d6b566;
--db-orange: #c98b52;
--db-red: #c76b71;
}
@media (max-width: 980px) {
.db-quicknav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.db-panel,
.db-panel-stack,
.db-panel--wide,
.db-panel--stats,
.db-panel--focus,
.db-panel--about {
grid-column: span 6;
}
}
@media (max-width: 720px) {
.db-root {
padding-top: 0.75rem;
}
.db-hero,
.db-command {
grid-template-columns: 1fr;
}
.db-hero {
flex-direction: column;
}
.db-hero__brand {
align-items: flex-start;
}
.db-now {
min-width: 0;
}
.db-quicknav,
.db-grid {
grid-template-columns: 1fr;
}
.db-panel,
.db-panel-stack,
.db-panel--wide,
.db-panel--stats,
.db-panel--focus,
.db-panel--about {
grid-column: span 1;
}
.db-feed__item {
grid-template-columns: auto minmax(0, 1fr);
}
.db-feed__meta {
grid-column: 2;
}
}
@media (max-width: 460px) {
.db-hero__brand {
display: grid;
}
.db-hero__logo {
width: 58px;
height: 58px;
}
.db-qn-item {
min-height: 68px;
}
.db-stats-grid {
grid-template-columns: 1fr;
}
}

832
assets/styles/pages/play.css Normal file
View File

@@ -0,0 +1,832 @@
.play-root {
--play-ink: #2a2118;
--play-paper: color-mix(in oklab, var(--surface) 86%, #f4ead2 14%);
--play-brass: #9c6b2f;
--play-green: #486b57;
--play-red: #8a3f3f;
--play-blue: #3e5f8a;
max-width: 1100px;
margin: 2rem auto 4rem;
padding: 0 1rem;
}
.play-root * {
box-sizing: border-box;
}
.play-root.is-odd {
filter: saturate(1.08) contrast(1.02);
}
.play-hero,
.play-console,
.play-tool {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--play-paper);
box-shadow: 0 18px 45px rgba(35, 26, 16, 0.08);
}
.play-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
align-items: center;
gap: 2rem;
padding: clamp(1.25rem, 4vw, 3rem);
overflow: hidden;
}
.play-kicker {
margin: 0 0 0.45rem;
color: var(--play-brass);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.play-hero h1,
.play-page-head h1 {
margin: 0;
color: var(--heading);
}
.play-lede,
.play-page-head p {
max-width: 62ch;
margin-top: 0.75rem;
color: var(--muted);
}
.play-orbit {
position: relative;
aspect-ratio: 1;
min-height: 300px;
border: 1px dashed color-mix(in oklab, var(--border) 70%, var(--play-brass));
border-radius: 50%;
background:
linear-gradient(90deg, transparent 49.8%, color-mix(in oklab, var(--border) 70%, transparent) 50%, transparent 50.2%),
linear-gradient(0deg, transparent 49.8%, color-mix(in oklab, var(--border) 70%, transparent) 50%, transparent 50.2%);
}
.play-orbit::after {
content: "PLAY";
position: absolute;
inset: 35%;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--muted);
font-weight: 800;
letter-spacing: 0.16em;
}
.play-orbit__node {
position: absolute;
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--surface);
color: var(--fg);
cursor: pointer;
transform: translate(-50%, -50%);
}
.play-orbit__node.is-active,
.play-orbit__node:hover {
background: var(--play-brass);
color: #fff8e8;
}
.play-console {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
margin: 1rem 0;
padding: 1rem;
}
.play-console__screen {
min-height: 190px;
padding: 1.25rem;
border-radius: 6px;
background:
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025) 1px, transparent 1px, transparent 7px),
color-mix(in oklab, var(--surface) 92%, var(--play-green) 8%);
}
.play-console__screen h2 {
margin: 0.2rem 0 0.5rem;
}
.play-whisper,
.play-live-note {
margin: 0.7rem 0 0;
color: var(--muted);
font-size: 0.92rem;
font-style: italic;
}
.play-console__eyebrow {
margin: 0;
color: var(--play-green);
font-weight: 800;
text-transform: uppercase;
}
.play-console__controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-content: start;
}
.play-root button,
.play-primary,
.sigil-form button {
min-height: 42px;
border: 1px solid color-mix(in oklab, var(--border) 70%, var(--play-brass));
border-radius: 6px;
padding: 0.55rem 0.85rem;
background: var(--surface);
color: var(--fg);
font: inherit;
cursor: pointer;
}
.play-root button:hover,
.play-primary:hover,
.sigil-form button:hover {
background: var(--play-ink);
color: #fff8e8;
text-decoration: none;
}
.play-primary {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
background: var(--play-brass);
color: #fff8e8;
font-weight: 800;
}
.play-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0.8rem;
}
.play-grid a {
min-height: 135px;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 88%, var(--play-paper) 12%);
color: var(--fg);
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.play-grid a:hover,
.play-grid a.is-active {
transform: translateY(-3px);
border-color: var(--play-brass);
background: color-mix(in oklab, var(--surface) 76%, var(--play-brass) 24%);
text-decoration: none;
}
.play-grid span {
display: block;
color: var(--muted);
font-size: 0.8rem;
font-weight: 800;
}
.play-grid strong {
display: block;
margin-top: 2rem;
color: var(--heading);
font-size: 1.05rem;
}
.play-back {
display: inline-flex;
margin-bottom: 1rem;
color: var(--muted);
}
.play-page-head {
margin-bottom: 1rem;
}
.play-tool {
padding: 1rem;
}
.play-scorebar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--muted);
}
.memory-board {
display: grid;
grid-template-columns: repeat(4, minmax(72px, 1fr));
gap: 0.7rem;
}
.memory-card {
aspect-ratio: 1.08;
border: 1px solid var(--border);
border-radius: 8px;
background:
radial-gradient(circle at 50% 38%, rgba(246, 216, 137, 0.15), transparent 28%),
linear-gradient(135deg, #211812, var(--play-ink));
color: #e7c978;
font-size: clamp(1.3rem, 4vw, 2.2rem);
font-weight: 900;
transform: rotate(var(--tilt, 0deg));
transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.memory-card.is-open,
.memory-card.is-matched,
.memory-card.is-peeking {
background: color-mix(in oklab, var(--surface) 72%, var(--play-green) 28%);
color: var(--fg);
transform: rotate(0deg) translateY(-2px);
}
.memory-card.is-matched {
outline: 2px solid color-mix(in oklab, var(--play-brass) 70%, transparent);
}
.play-canvas,
.sigil-canvas {
display: block;
width: 100%;
max-height: 70vh;
border: 1px solid var(--border);
border-radius: 8px;
background: #18130f;
}
.poem-tool {
display: grid;
gap: 1rem;
}
.poem-slip {
min-height: 220px;
padding: 1.2rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25rem;
line-height: 1.7;
}
.poem-slip[data-stamp]:not([data-stamp=""])::after {
content: attr(data-stamp);
display: inline-block;
margin-top: 1rem;
padding: 0.2rem 0.5rem;
border: 2px solid var(--play-red);
color: var(--play-red);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
transform: rotate(-4deg);
}
.bookshelf,
.timeline-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: stretch;
}
.book-spine,
.timeline-card {
touch-action: none;
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.8rem;
background: var(--surface);
cursor: grab;
user-select: none;
}
.book-spine {
width: 120px;
min-height: 230px;
writing-mode: vertical-rl;
text-orientation: mixed;
color: #fff8e8;
font-weight: 800;
}
.book-spine:nth-child(3n+1) { background: var(--play-red); }
.book-spine:nth-child(3n+2) { background: var(--play-green); }
.book-spine:nth-child(3n+3) { background: var(--play-blue); }
.booklet {
flex: 1 1 220px;
min-height: 110px;
padding: 0.9rem;
border: 1px dashed var(--play-brass);
border-radius: 7px;
background: color-mix(in oklab, var(--surface) 74%, var(--play-brass) 26%);
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
}
.timeline-list {
flex-direction: column;
}
.timeline-card {
display: grid;
grid-template-columns: 5rem 1fr;
gap: 1rem;
}
.timeline-card span {
color: var(--play-brass);
font-weight: 900;
}
.recipe-tool {
display: grid;
grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
gap: 1rem;
align-items: center;
}
.recipe-wheel {
aspect-ratio: 1;
width: 100%;
border-radius: 50% !important;
background:
conic-gradient(from 0deg, var(--play-red), var(--play-brass), var(--play-green), var(--play-blue), var(--play-red));
color: #fff8e8 !important;
font-weight: 900;
transition: transform 900ms cubic-bezier(.18, .88, .2, 1.15);
}
.recipe-result {
display: grid;
gap: 0.7rem;
padding: 0;
margin: 0;
list-style: none;
}
.recipe-result li {
padding: 0.85rem;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
}
.terminal-tool {
background: #15120e;
color: #f2e3bd;
}
.terminal-log {
min-height: 310px;
max-height: 460px;
overflow: auto;
padding: 1rem;
border: 1px solid rgba(242, 227, 189, 0.2);
border-radius: 7px;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
white-space: pre-wrap;
}
.terminal-form {
display: flex;
gap: 0.6rem;
margin-top: 0.8rem;
}
.terminal-form label {
display: flex;
flex: 1;
align-items: center;
gap: 0.5rem;
}
.terminal-form input,
.sigil-form input {
width: 100%;
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.65rem;
background: var(--surface);
color: var(--fg);
font: inherit;
}
.study-tool {
display: grid;
justify-items: center;
gap: 1rem;
}
.study-scene {
position: relative;
width: min(100%, 520px);
aspect-ratio: 1.6;
border: 1px solid var(--border);
border-radius: 8px;
background:
radial-gradient(circle at 50% 22%, rgba(244, 210, 113, var(--lamp, 0.18)), transparent 30%),
linear-gradient(#27211b 0 62%, #4b3425 62% 100%);
overflow: hidden;
}
.study-scene span {
position: absolute;
left: 42%;
bottom: 30%;
width: 16%;
height: 38%;
border-radius: 50% 50% 6px 6px;
background: #b88639;
box-shadow: 0 0 calc(20px + var(--glow, 0px)) rgba(244, 210, 113, 0.7);
}
.study-time {
font-size: clamp(2.4rem, 8vw, 5rem);
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.sigil-tool {
display: grid;
grid-template-columns: minmax(240px, 320px) minmax(0, 520px);
gap: 1rem;
align-items: start;
}
.sigil-form {
display: grid;
gap: 0.85rem;
}
.sigil-form label {
display: grid;
gap: 0.35rem;
color: var(--muted);
}
.sigil-canvas {
background: var(--surface);
}
.rpg-shell {
display: grid;
grid-template-columns: minmax(0, 960px) minmax(280px, 1fr);
gap: 1rem;
align-items: start;
}
.ash-rpg-root {
--ash-black: #05070c;
--ash-ink: #0d1420;
--ash-panel: #121a27;
--ash-line: #344154;
--ash-gold: #e0a451;
--ash-cold: #8bd3ff;
--ash-red: #db4f62;
--ash-text: #f8efe0;
--ash-muted: #a8b4c2;
max-width: 1380px;
}
.ash-rpg-root .play-page-head {
padding: 1rem 0;
border-bottom: 1px solid rgba(139, 211, 255, 0.18);
}
.ash-rpg-root .play-page-head h1 {
color: var(--ash-text);
font-family: Georgia, "Times New Roman", serif;
text-shadow: 0 0 18px rgba(139, 211, 255, 0.22);
}
.ash-rpg-root .play-page-head p,
.ash-rpg-root .play-back {
color: var(--ash-muted);
}
.ash-rpg-shell {
position: relative;
border-color: rgba(139, 211, 255, 0.22);
background:
linear-gradient(180deg, rgba(12, 20, 32, 0.96), rgba(4, 7, 12, 0.98)),
var(--ash-black);
box-shadow:
0 0 0 1px rgba(224, 164, 81, 0.14) inset,
0 28px 80px rgba(0, 0, 0, 0.42);
}
.ash-rpg-shell::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 8px;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 4px);
mix-blend-mode: screen;
opacity: 0.35;
}
.rpg-stage {
display: grid;
gap: 0.75rem;
}
.rpg-canvas {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
image-rendering: pixelated;
border: 2px solid var(--ash-line);
border-radius: 8px;
background: var(--ash-black);
box-shadow:
0 0 0 4px #05070c,
0 0 34px rgba(139, 211, 255, 0.16);
}
.ash-rpg-canvas {
min-height: 360px;
}
.rpg-dialogue,
.rpg-panel {
border: 1px solid var(--ash-line);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(21, 31, 46, 0.95), rgba(8, 12, 18, 0.96)),
var(--ash-panel);
color: var(--ash-text);
}
.rpg-dialogue {
min-height: 130px;
padding: 1rem;
box-shadow: 0 0 0 1px rgba(248, 239, 224, 0.05) inset;
}
.rpg-dialogue strong,
.rpg-list h2 {
color: var(--ash-gold);
}
.rpg-dialogue p,
.rpg-status {
margin: 0.35rem 0 0;
color: var(--ash-muted);
line-height: 1.55;
}
.rpg-panel {
display: grid;
gap: 1rem;
padding: 1rem;
align-content: start;
}
.rpg-actions,
.rpg-mobile-pad {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.ash-rpg-root button {
border-color: rgba(139, 211, 255, 0.28);
background: linear-gradient(180deg, #1a2638, #0c121c);
color: var(--ash-text);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-weight: 800;
text-transform: uppercase;
}
.ash-rpg-root button:hover:not(:disabled),
.ash-rpg-root button:focus-visible {
background: linear-gradient(180deg, #31435f, #142236);
color: #ffffff;
box-shadow: 0 0 18px rgba(139, 211, 255, 0.22);
}
.ash-rpg-root button:disabled {
cursor: not-allowed;
opacity: 0.42;
}
.rpg-mobile-pad {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rpg-mobile-pad [data-rpg-move="up"],
.rpg-mobile-pad [data-rpg-move="down"] {
grid-column: 2;
}
.rpg-mobile-pad [data-rpg-move="left"] {
grid-column: 1;
}
.rpg-mobile-pad [data-rpg-act] {
grid-column: 2;
}
.rpg-mobile-pad [data-rpg-move="right"] {
grid-column: 3;
}
.rpg-stats {
display: grid;
gap: 0.55rem;
margin: 0;
}
.rpg-stats div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.45rem;
border-bottom: 1px solid rgba(139, 211, 255, 0.16);
}
.rpg-stats dt,
.rpg-list h2 {
margin: 0;
color: var(--ash-muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.rpg-stats dd {
margin: 0;
font-weight: 800;
}
.rpg-list ul {
display: grid;
gap: 0.45rem;
margin: 0.45rem 0 0;
padding: 0;
list-style: none;
}
.rpg-list li {
padding: 0.55rem;
border: 1px solid rgba(139, 211, 255, 0.16);
border-radius: 6px;
background: rgba(5, 7, 12, 0.62);
color: var(--ash-text);
font-size: 0.92rem;
}
.rpg-list li.is-done {
border-color: rgba(102, 199, 162, 0.42);
background: rgba(45, 91, 77, 0.34);
}
.rpg-list li.is-erased {
border-color: rgba(219, 79, 98, 0.32);
color: rgba(248, 239, 224, 0.42);
background: repeating-linear-gradient(90deg, rgba(219, 79, 98, 0.08), rgba(219, 79, 98, 0.08) 6px, rgba(5, 7, 12, 0.6) 6px, rgba(5, 7, 12, 0.6) 12px);
text-decoration: line-through;
}
.ash-choicebar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.ash-choicebar button {
min-height: 50px;
}
.ash-memory-meter {
position: relative;
display: grid;
gap: 0.45rem;
color: var(--ash-muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.ash-memory-meter::after {
content: "";
display: block;
height: 10px;
border: 1px solid rgba(139, 211, 255, 0.24);
border-radius: 999px;
background: #05070c;
}
.ash-memory-meter i {
position: absolute;
left: 1px;
right: auto;
bottom: 1px;
width: 0;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, var(--ash-cold), var(--ash-red));
transition: width 220ms ease;
}
.ash-name-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
align-items: end;
}
.ash-name-form label {
display: grid;
gap: 0.35rem;
color: var(--ash-muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.ash-name-form input {
width: 100%;
border: 1px solid rgba(139, 211, 255, 0.24);
border-radius: 6px;
padding: 0.65rem;
background: #05070c;
color: var(--ash-text);
font: inherit;
}
.ash-rpg-root.is-lake-awake .rpg-dialogue,
.ash-rpg-root.is-lake-awake .rpg-panel {
border-color: rgba(219, 79, 98, 0.36);
}
.ash-rpg-root.is-lake-awake .ash-rpg-canvas {
box-shadow:
0 0 0 4px #05070c,
0 0 38px rgba(219, 79, 98, 0.22);
}
.ash-rpg-root.is-ending .rpg-panel {
box-shadow: 0 0 34px rgba(224, 164, 81, 0.16);
}
@media (max-width: 760px) {
.play-hero,
.play-console,
.recipe-tool,
.sigil-tool,
.rpg-shell {
grid-template-columns: 1fr;
}
.play-orbit {
min-height: 260px;
}
.memory-board {
grid-template-columns: repeat(3, minmax(64px, 1fr));
}
.book-spine {
width: calc(50% - 0.4rem);
min-height: 160px;
}
.ash-choicebar,
.ash-name-form {
grid-template-columns: 1fr;
}
.ash-rpg-canvas {
min-height: auto;
}
}

1888
assets/styles/pages/wird-tracker.css Normal file
View File

File diff suppressed because it is too large Load Diff

833
assets/styles/play.css
View File

@@ -1,832 +1 @@
.play-root {
--play-ink: #2a2118;
--play-paper: color-mix(in oklab, var(--surface) 86%, #f4ead2 14%);
--play-brass: #9c6b2f;
--play-green: #486b57;
--play-red: #8a3f3f;
--play-blue: #3e5f8a;
max-width: 1100px;
margin: 2rem auto 4rem;
padding: 0 1rem;
}
.play-root * {
box-sizing: border-box;
}
.play-root.is-odd {
filter: saturate(1.08) contrast(1.02);
}
.play-hero,
.play-console,
.play-tool {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--play-paper);
box-shadow: 0 18px 45px rgba(35, 26, 16, 0.08);
}
.play-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
align-items: center;
gap: 2rem;
padding: clamp(1.25rem, 4vw, 3rem);
overflow: hidden;
}
.play-kicker {
margin: 0 0 0.45rem;
color: var(--play-brass);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.play-hero h1,
.play-page-head h1 {
margin: 0;
color: var(--heading);
}
.play-lede,
.play-page-head p {
max-width: 62ch;
margin-top: 0.75rem;
color: var(--muted);
}
.play-orbit {
position: relative;
aspect-ratio: 1;
min-height: 300px;
border: 1px dashed color-mix(in oklab, var(--border) 70%, var(--play-brass));
border-radius: 50%;
background:
linear-gradient(90deg, transparent 49.8%, color-mix(in oklab, var(--border) 70%, transparent) 50%, transparent 50.2%),
linear-gradient(0deg, transparent 49.8%, color-mix(in oklab, var(--border) 70%, transparent) 50%, transparent 50.2%);
}
.play-orbit::after {
content: "PLAY";
position: absolute;
inset: 35%;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--muted);
font-weight: 800;
letter-spacing: 0.16em;
}
.play-orbit__node {
position: absolute;
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--surface);
color: var(--fg);
cursor: pointer;
transform: translate(-50%, -50%);
}
.play-orbit__node.is-active,
.play-orbit__node:hover {
background: var(--play-brass);
color: #fff8e8;
}
.play-console {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
margin: 1rem 0;
padding: 1rem;
}
.play-console__screen {
min-height: 190px;
padding: 1.25rem;
border-radius: 6px;
background:
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025) 1px, transparent 1px, transparent 7px),
color-mix(in oklab, var(--surface) 92%, var(--play-green) 8%);
}
.play-console__screen h2 {
margin: 0.2rem 0 0.5rem;
}
.play-whisper,
.play-live-note {
margin: 0.7rem 0 0;
color: var(--muted);
font-size: 0.92rem;
font-style: italic;
}
.play-console__eyebrow {
margin: 0;
color: var(--play-green);
font-weight: 800;
text-transform: uppercase;
}
.play-console__controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-content: start;
}
.play-root button,
.play-primary,
.sigil-form button {
min-height: 42px;
border: 1px solid color-mix(in oklab, var(--border) 70%, var(--play-brass));
border-radius: 6px;
padding: 0.55rem 0.85rem;
background: var(--surface);
color: var(--fg);
font: inherit;
cursor: pointer;
}
.play-root button:hover,
.play-primary:hover,
.sigil-form button:hover {
background: var(--play-ink);
color: #fff8e8;
text-decoration: none;
}
.play-primary {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.5rem;
background: var(--play-brass);
color: #fff8e8;
font-weight: 800;
}
.play-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0.8rem;
}
.play-grid a {
min-height: 135px;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 88%, var(--play-paper) 12%);
color: var(--fg);
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.play-grid a:hover,
.play-grid a.is-active {
transform: translateY(-3px);
border-color: var(--play-brass);
background: color-mix(in oklab, var(--surface) 76%, var(--play-brass) 24%);
text-decoration: none;
}
.play-grid span {
display: block;
color: var(--muted);
font-size: 0.8rem;
font-weight: 800;
}
.play-grid strong {
display: block;
margin-top: 2rem;
color: var(--heading);
font-size: 1.05rem;
}
.play-back {
display: inline-flex;
margin-bottom: 1rem;
color: var(--muted);
}
.play-page-head {
margin-bottom: 1rem;
}
.play-tool {
padding: 1rem;
}
.play-scorebar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--muted);
}
.memory-board {
display: grid;
grid-template-columns: repeat(4, minmax(72px, 1fr));
gap: 0.7rem;
}
.memory-card {
aspect-ratio: 1.08;
border: 1px solid var(--border);
border-radius: 8px;
background:
radial-gradient(circle at 50% 38%, rgba(246, 216, 137, 0.15), transparent 28%),
linear-gradient(135deg, #211812, var(--play-ink));
color: #e7c978;
font-size: clamp(1.3rem, 4vw, 2.2rem);
font-weight: 900;
transform: rotate(var(--tilt, 0deg));
transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.memory-card.is-open,
.memory-card.is-matched,
.memory-card.is-peeking {
background: color-mix(in oklab, var(--surface) 72%, var(--play-green) 28%);
color: var(--fg);
transform: rotate(0deg) translateY(-2px);
}
.memory-card.is-matched {
outline: 2px solid color-mix(in oklab, var(--play-brass) 70%, transparent);
}
.play-canvas,
.sigil-canvas {
display: block;
width: 100%;
max-height: 70vh;
border: 1px solid var(--border);
border-radius: 8px;
background: #18130f;
}
.poem-tool {
display: grid;
gap: 1rem;
}
.poem-slip {
min-height: 220px;
padding: 1.2rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25rem;
line-height: 1.7;
}
.poem-slip[data-stamp]:not([data-stamp=""])::after {
content: attr(data-stamp);
display: inline-block;
margin-top: 1rem;
padding: 0.2rem 0.5rem;
border: 2px solid var(--play-red);
color: var(--play-red);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
transform: rotate(-4deg);
}
.bookshelf,
.timeline-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: stretch;
}
.book-spine,
.timeline-card {
touch-action: none;
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.8rem;
background: var(--surface);
cursor: grab;
user-select: none;
}
.book-spine {
width: 120px;
min-height: 230px;
writing-mode: vertical-rl;
text-orientation: mixed;
color: #fff8e8;
font-weight: 800;
}
.book-spine:nth-child(3n+1) { background: var(--play-red); }
.book-spine:nth-child(3n+2) { background: var(--play-green); }
.book-spine:nth-child(3n+3) { background: var(--play-blue); }
.booklet {
flex: 1 1 220px;
min-height: 110px;
padding: 0.9rem;
border: 1px dashed var(--play-brass);
border-radius: 7px;
background: color-mix(in oklab, var(--surface) 74%, var(--play-brass) 26%);
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
}
.timeline-list {
flex-direction: column;
}
.timeline-card {
display: grid;
grid-template-columns: 5rem 1fr;
gap: 1rem;
}
.timeline-card span {
color: var(--play-brass);
font-weight: 900;
}
.recipe-tool {
display: grid;
grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
gap: 1rem;
align-items: center;
}
.recipe-wheel {
aspect-ratio: 1;
width: 100%;
border-radius: 50% !important;
background:
conic-gradient(from 0deg, var(--play-red), var(--play-brass), var(--play-green), var(--play-blue), var(--play-red));
color: #fff8e8 !important;
font-weight: 900;
transition: transform 900ms cubic-bezier(.18, .88, .2, 1.15);
}
.recipe-result {
display: grid;
gap: 0.7rem;
padding: 0;
margin: 0;
list-style: none;
}
.recipe-result li {
padding: 0.85rem;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
}
.terminal-tool {
background: #15120e;
color: #f2e3bd;
}
.terminal-log {
min-height: 310px;
max-height: 460px;
overflow: auto;
padding: 1rem;
border: 1px solid rgba(242, 227, 189, 0.2);
border-radius: 7px;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
white-space: pre-wrap;
}
.terminal-form {
display: flex;
gap: 0.6rem;
margin-top: 0.8rem;
}
.terminal-form label {
display: flex;
flex: 1;
align-items: center;
gap: 0.5rem;
}
.terminal-form input,
.sigil-form input {
width: 100%;
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.65rem;
background: var(--surface);
color: var(--fg);
font: inherit;
}
.study-tool {
display: grid;
justify-items: center;
gap: 1rem;
}
.study-scene {
position: relative;
width: min(100%, 520px);
aspect-ratio: 1.6;
border: 1px solid var(--border);
border-radius: 8px;
background:
radial-gradient(circle at 50% 22%, rgba(244, 210, 113, var(--lamp, 0.18)), transparent 30%),
linear-gradient(#27211b 0 62%, #4b3425 62% 100%);
overflow: hidden;
}
.study-scene span {
position: absolute;
left: 42%;
bottom: 30%;
width: 16%;
height: 38%;
border-radius: 50% 50% 6px 6px;
background: #b88639;
box-shadow: 0 0 calc(20px + var(--glow, 0px)) rgba(244, 210, 113, 0.7);
}
.study-time {
font-size: clamp(2.4rem, 8vw, 5rem);
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.sigil-tool {
display: grid;
grid-template-columns: minmax(240px, 320px) minmax(0, 520px);
gap: 1rem;
align-items: start;
}
.sigil-form {
display: grid;
gap: 0.85rem;
}
.sigil-form label {
display: grid;
gap: 0.35rem;
color: var(--muted);
}
.sigil-canvas {
background: var(--surface);
}
.rpg-shell {
display: grid;
grid-template-columns: minmax(0, 960px) minmax(280px, 1fr);
gap: 1rem;
align-items: start;
}
.ash-rpg-root {
--ash-black: #05070c;
--ash-ink: #0d1420;
--ash-panel: #121a27;
--ash-line: #344154;
--ash-gold: #e0a451;
--ash-cold: #8bd3ff;
--ash-red: #db4f62;
--ash-text: #f8efe0;
--ash-muted: #a8b4c2;
max-width: 1380px;
}
.ash-rpg-root .play-page-head {
padding: 1rem 0;
border-bottom: 1px solid rgba(139, 211, 255, 0.18);
}
.ash-rpg-root .play-page-head h1 {
color: var(--ash-text);
font-family: Georgia, "Times New Roman", serif;
text-shadow: 0 0 18px rgba(139, 211, 255, 0.22);
}
.ash-rpg-root .play-page-head p,
.ash-rpg-root .play-back {
color: var(--ash-muted);
}
.ash-rpg-shell {
position: relative;
border-color: rgba(139, 211, 255, 0.22);
background:
linear-gradient(180deg, rgba(12, 20, 32, 0.96), rgba(4, 7, 12, 0.98)),
var(--ash-black);
box-shadow:
0 0 0 1px rgba(224, 164, 81, 0.14) inset,
0 28px 80px rgba(0, 0, 0, 0.42);
}
.ash-rpg-shell::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 8px;
background:
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 4px);
mix-blend-mode: screen;
opacity: 0.35;
}
.rpg-stage {
display: grid;
gap: 0.75rem;
}
.rpg-canvas {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
image-rendering: pixelated;
border: 2px solid var(--ash-line);
border-radius: 8px;
background: var(--ash-black);
box-shadow:
0 0 0 4px #05070c,
0 0 34px rgba(139, 211, 255, 0.16);
}
.ash-rpg-canvas {
min-height: 360px;
}
.rpg-dialogue,
.rpg-panel {
border: 1px solid var(--ash-line);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(21, 31, 46, 0.95), rgba(8, 12, 18, 0.96)),
var(--ash-panel);
color: var(--ash-text);
}
.rpg-dialogue {
min-height: 130px;
padding: 1rem;
box-shadow: 0 0 0 1px rgba(248, 239, 224, 0.05) inset;
}
.rpg-dialogue strong,
.rpg-list h2 {
color: var(--ash-gold);
}
.rpg-dialogue p,
.rpg-status {
margin: 0.35rem 0 0;
color: var(--ash-muted);
line-height: 1.55;
}
.rpg-panel {
display: grid;
gap: 1rem;
padding: 1rem;
align-content: start;
}
.rpg-actions,
.rpg-mobile-pad {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.ash-rpg-root button {
border-color: rgba(139, 211, 255, 0.28);
background: linear-gradient(180deg, #1a2638, #0c121c);
color: var(--ash-text);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-weight: 800;
text-transform: uppercase;
}
.ash-rpg-root button:hover:not(:disabled),
.ash-rpg-root button:focus-visible {
background: linear-gradient(180deg, #31435f, #142236);
color: #ffffff;
box-shadow: 0 0 18px rgba(139, 211, 255, 0.22);
}
.ash-rpg-root button:disabled {
cursor: not-allowed;
opacity: 0.42;
}
.rpg-mobile-pad {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rpg-mobile-pad [data-rpg-move="up"],
.rpg-mobile-pad [data-rpg-move="down"] {
grid-column: 2;
}
.rpg-mobile-pad [data-rpg-move="left"] {
grid-column: 1;
}
.rpg-mobile-pad [data-rpg-act] {
grid-column: 2;
}
.rpg-mobile-pad [data-rpg-move="right"] {
grid-column: 3;
}
.rpg-stats {
display: grid;
gap: 0.55rem;
margin: 0;
}
.rpg-stats div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.45rem;
border-bottom: 1px solid rgba(139, 211, 255, 0.16);
}
.rpg-stats dt,
.rpg-list h2 {
margin: 0;
color: var(--ash-muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.rpg-stats dd {
margin: 0;
font-weight: 800;
}
.rpg-list ul {
display: grid;
gap: 0.45rem;
margin: 0.45rem 0 0;
padding: 0;
list-style: none;
}
.rpg-list li {
padding: 0.55rem;
border: 1px solid rgba(139, 211, 255, 0.16);
border-radius: 6px;
background: rgba(5, 7, 12, 0.62);
color: var(--ash-text);
font-size: 0.92rem;
}
.rpg-list li.is-done {
border-color: rgba(102, 199, 162, 0.42);
background: rgba(45, 91, 77, 0.34);
}
.rpg-list li.is-erased {
border-color: rgba(219, 79, 98, 0.32);
color: rgba(248, 239, 224, 0.42);
background: repeating-linear-gradient(90deg, rgba(219, 79, 98, 0.08), rgba(219, 79, 98, 0.08) 6px, rgba(5, 7, 12, 0.6) 6px, rgba(5, 7, 12, 0.6) 12px);
text-decoration: line-through;
}
.ash-choicebar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.ash-choicebar button {
min-height: 50px;
}
.ash-memory-meter {
position: relative;
display: grid;
gap: 0.45rem;
color: var(--ash-muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.ash-memory-meter::after {
content: "";
display: block;
height: 10px;
border: 1px solid rgba(139, 211, 255, 0.24);
border-radius: 999px;
background: #05070c;
}
.ash-memory-meter i {
position: absolute;
left: 1px;
right: auto;
bottom: 1px;
width: 0;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, var(--ash-cold), var(--ash-red));
transition: width 220ms ease;
}
.ash-name-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.5rem;
align-items: end;
}
.ash-name-form label {
display: grid;
gap: 0.35rem;
color: var(--ash-muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.ash-name-form input {
width: 100%;
border: 1px solid rgba(139, 211, 255, 0.24);
border-radius: 6px;
padding: 0.65rem;
background: #05070c;
color: var(--ash-text);
font: inherit;
}
.ash-rpg-root.is-lake-awake .rpg-dialogue,
.ash-rpg-root.is-lake-awake .rpg-panel {
border-color: rgba(219, 79, 98, 0.36);
}
.ash-rpg-root.is-lake-awake .ash-rpg-canvas {
box-shadow:
0 0 0 4px #05070c,
0 0 38px rgba(219, 79, 98, 0.22);
}
.ash-rpg-root.is-ending .rpg-panel {
box-shadow: 0 0 34px rgba(224, 164, 81, 0.16);
}
@media (max-width: 760px) {
.play-hero,
.play-console,
.recipe-tool,
.sigil-tool,
.rpg-shell {
grid-template-columns: 1fr;
}
.play-orbit {
min-height: 260px;
}
.memory-board {
grid-template-columns: repeat(3, minmax(64px, 1fr));
}
.book-spine {
width: calc(50% - 0.4rem);
min-height: 160px;
}
.ash-choicebar,
.ash-name-form {
grid-template-columns: 1fr;
}
.ash-rpg-canvas {
min-height: auto;
}
}
@import url("./pages/play.css");

880
assets/styles/style.css
View File

@@ -1,875 +1,5 @@
:root{
--gutter: 2rem;
--margin: 420px;
--body-pad: 1rem;
--content: clamp(
var(--content-min),
calc(100vi - 2*var(--body-pad) - 2*(var(--margin) + var(--gutter))),
var(--content-max)
);
--content-min: 60ch;
--content-max: 880px;
--bleed: 48px;
--fullwidth-cap: 860px;
--bg: #faf9f6;
--fg: #000000;
--link: #1a0dab;
--heading: #004c99;
--surface: #ffffff;
--surface-soft: #f3f1eb;
--accent: #2563eb;
--code-bg: #f0f0f0;
--active-toc: #cacaca;
--note-color: #555;
--note-bg: transparent;
--border: #d7d7d7;
--chip-bg: #f0f0f0;
--chip-fg: #444;
--muted: #666;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: var(--border);
--text-muted: var(--muted);
--accent-bg: color-mix(in oklab, var(--accent) 10%, var(--surface));
--font-body: 'DM Sans', system-ui, sans-serif;
--kb-bg-completed: #e6f4ea;
--kb-bg-manager-review: #fff4e5;
--kb-bg-in-progress: #e8f0fe;
--kb-bg-not-started: #f1f3f5;
--kb-bg-comments: #fdecea;
--kb-column-border: rgba(0,0,0,0.06);
--kb-card-bg: #ffffff;
--kb-card-text: #1f2933;
}
:root[data-theme="dark"]{
--bg: #0f1115;
--fg: #e6e6e6;
--link: #8ab4ff;
--heading: #9ecbff;
--surface: #151820;
--surface-soft: #1b202a;
--accent: #8ab4ff;
--code-bg: #1a1d24;
--note-color: #c2c7cf;
--note-bg: transparent;
--border: #2a2f3a;
--chip-bg: #1f2330;
--chip-fg: #cfd3da;
--muted: #a9b0bb;
--active-toc: #313131;
--kb-bg-completed: #1e3a2b;
--kb-bg-manager-review: #3a2f1e;
--kb-bg-in-progress: #1f2a44;
--kb-bg-not-started: #2a2d31;
--kb-bg-comments: #3b1f24;
--kb-column-border: rgba(255,255,255,0.08);
--kb-card-bg: #16181c;
--kb-card-text: #e5e7eb;
}
:root[data-theme="dark-academia"]{
color-scheme: dark;
--bg: #11100d;
--fg: #f7ecd5;
--link: #d8b86f;
--heading: #e8cf91;
--surface: #1d1a16;
--surface-soft: #242019;
--accent: #b89145;
--code-bg: #191814;
--active-toc: rgba(184, 145, 69, 0.18);
--note-color: #d9c9aa;
--note-bg: rgba(243, 234, 215, 0.05);
--border: rgba(217, 190, 124, 0.32);
--chip-bg: rgba(184, 145, 69, 0.14);
--chip-fg: #f0d89a;
--muted: #b6a681;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: rgba(217, 190, 124, 0.24);
--text-muted: var(--muted);
--accent-bg: rgba(184, 145, 69, 0.16);
--kb-bg-completed: rgba(68, 106, 87, 0.24);
--kb-bg-manager-review: rgba(184, 145, 69, 0.2);
--kb-bg-in-progress: rgba(82, 93, 117, 0.22);
--kb-bg-not-started: rgba(243, 234, 215, 0.08);
--kb-bg-comments: rgba(125, 47, 54, 0.24);
--kb-column-border: rgba(217, 190, 124, 0.2);
--kb-card-bg: #181510;
--kb-card-text: #f3ead7;
}
@font-face {
font-family: 'Noto';
src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
}
html, body{
background:
radial-gradient(circle at 18% 12%, var(--theme-glow-wine, transparent), transparent 28%),
radial-gradient(circle at 84% 18%, var(--theme-glow-green, transparent), transparent 24%),
linear-gradient(135deg, var(--theme-bg-start, var(--bg)) 0%, var(--theme-bg-mid, var(--bg)) 42%, var(--theme-bg-end, var(--bg)) 100%);
color: var(--fg);
font-size: 16px;
transition: background-color .3s, color .3s;
margin: 0;
font-family: 'Noto', system-ui, sans-serif;
line-height: 1.65;
}
body {
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
:root[data-theme="dark-academia"] body {
--theme-glow-wine: rgba(125, 47, 54, 0.24);
--theme-glow-green: rgba(68, 106, 87, 0.24);
--theme-bg-start: #0f0e0b;
--theme-bg-mid: #17140f;
--theme-bg-end: #211b14;
}
:root[data-theme="dark-academia"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.16;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 34px 34px, 34px 34px;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
}
::selection {
background: color-mix(in oklab, var(--accent) 24%, transparent);
}
h1, h2, h3{
color: var(--heading);
line-height: 1.18;
letter-spacing: 0;
}
h1 {
margin-top: 2.25rem;
margin-bottom: 1rem;
font-size: clamp(2rem, 4vw, 3.4rem);
}
h2 {
margin-top: 2.2rem;
}
p {
margin: 0 0 1.15rem;
}
a {
color: var(--link);
text-decoration: none;
text-underline-offset: 0.18em;
}
a:hover {
text-decoration: underline;
}
.banner-header{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.85rem;
padding: 0.7rem;
margin-top: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
box-shadow: 0 12px 32px color-mix(in oklab, #000 8%, transparent);
}
:root[data-theme="dark-academia"] .banner-header,
:root[data-theme="dark-academia"] .org-src-container,
:root[data-theme="dark-academia"] #notes-form,
:root[data-theme="dark-academia"] .note {
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark-academia"] h1,
:root[data-theme="dark-academia"] h2,
:root[data-theme="dark-academia"] h3 {
font-family: Georgia, "Times New Roman", serif;
}
.site-brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
color: var(--fg);
font-weight: 800;
white-space: nowrap;
}
.site-brand:hover {
text-decoration: none;
color: var(--heading);
}
.site-brand__text {
font-size: 0.98rem;
}
.banner-logo{
height: 42px;
width: 42px;
object-fit: cover;
border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
}
.site-nav {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
gap: 0.25rem;
font-weight: 700;
font-size: 0.95rem;
}
.site-nav a {
color: var(--muted);
padding: 0.45rem 0.65rem;
border-radius: 7px;
}
.site-nav a:hover,
.site-nav a:focus-visible {
color: var(--fg);
background: color-mix(in oklab, var(--fg) 7%, transparent);
text-decoration: none;
outline: 0;
}
.site-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.4rem;
flex: 0 1 23rem;
}
.site-search {
display: block;
flex: 1 1 13rem;
min-width: 10rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#preamble.status{
max-width: var(--content);
margin-left: auto;
margin-right: auto;
padding-left: var(--body-pad);
padding-right: var(--body-pad);
padding-top: 0.25rem;
box-sizing: content-box;
}
#preamble .banner-header,
#preamble #updated{
max-width: 100%;
}
footer{
color: var(--muted);
padding: 1.25rem;
margin-top: 3rem;
border-top: 1px solid var(--border);
text-align: center;
font-size: .9rem;
}
#content.content{
max-width: var(--content);
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--body-pad);
padding-right: var(--body-pad);
box-sizing: content-box;
position: relative;
padding-top: 1.5rem;
}
#content .figure,
#content img:not(.fullwidth){
max-width: 100%;
height: auto;
border-radius: 8px;
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: 2rem 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
overflow: hidden;
}
th,
td {
border-bottom: 1px solid var(--border);
padding: 0.65rem 0.75rem;
text-align: left;
}
th {
color: var(--heading);
background: color-mix(in oklab, var(--surface-soft) 80%, transparent);
}
blockquote {
margin: 1.5rem 0;
padding: 0.9rem 1.1rem;
border-left: 4px solid var(--heading);
background: color-mix(in oklab, var(--surface-soft) 72%, transparent);
border-radius: 0 8px 8px 0;
color: color-mix(in oklab, var(--fg) 84%, var(--muted) 16%);
}
ul, ol {
margin: 1rem 0 1.5rem 1.5rem;
padding: 0;
line-height: 1.5;
}
ul {
list-style: none;
}
ul li {
position: relative;
padding-left: 1.2em;
}
ul li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
color: var(--heading);
font-weight: bold;
}
ol {
counter-reset: list-counter;
list-style: none;
}
ol li {
counter-increment: list-counter;
position: relative;
padding-left: 1.8em;
}
ol li::before {
content: counter(list-counter) ".";
position: absolute;
left: 0;
top: 0;
color: var(--heading);
font-weight: bold;
}
li {
margin-bottom: 8px;
display: flow-root;
}
li::after {
content: none;
}
li ul,
li ol {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
li ul li::before {
content: "–";
font-weight: normal;
color: var(--note-color);
}
li ol li::before {
font-weight: normal;
color: var(--note-color);
}
.epigraph {
margin: 2rem auto;
max-width: 80%;
font-style: italic;
}
.epigraph blockquote {
margin: 0;
padding: 1rem 1.5rem;
border-left: 4px solid var(--heading);
background-color: rgba(0, 0, 0, 0.02);
color: var(--fg);
line-height: 1.6;
}
.epigraph blockquote footer {
margin-top: 0.75rem;
font-style: normal;
font-size: 0.9em;
color: var(--note-color);
text-align: right;
}
.epigraph blockquote cite {
font-style: italic;
font-weight: 500;
color: var(--link);
}
.epigraph blockquote::before,
.epigraph blockquote::after {
content: none;
}
.epigraph blockquote{
border-left-color: var(--heading);
background-color: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
color: var(--fg);
}
.epigraph blockquote footer{ color: var(--muted); }
.hidden { display: none !important; }
.bp-x{ right:72px; }
.bp-next,.bp-prev{ right:8px; }
.bp-prev{ left:8px; }
.bp-wrap{ transition: opacity .18s ease; }
.bp-wrap.bp-fadeout{ opacity: 0; }
.bp-controls{
padding-top: env(safe-area-inset-top, 0);
padding-right: calc(env(safe-area-inset-right, 0) + 8px);
}
body.no-sidenotes {
--body-pad: 0;
--margin: 0;
--gutter: 0;
--content-min: 80ch;
--content-max: 1200px;
--content: clamp(
var(--content-min),
100vi,
var(--content-max)
);
}
/* =========================
NOTES BOARD
========================= */
#notes-tools {
display: flex;
align-items: end;
justify-content: flex-end;
gap: 0.65rem;
margin: 1.25rem 0 0;
}
#notes-tools label {
color: var(--muted);
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
#notes-author-filter {
min-width: min(220px, 100%);
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--fg);
font: inherit;
font-size: 0.9rem;
line-height: 1.2;
padding: 0.45rem 0.65rem;
}
#notes-author-filter:focus {
outline: 2px solid color-mix(in oklab, var(--accent) 45%, transparent);
outline-offset: 2px;
}
#notes-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
margin: 2.5rem 0;
align-items: start;
}
/* =========================
NOTE CARD
========================= */
.note {
position: relative;
padding: 1rem 1rem 0.9rem;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 12px 24px rgba(0, 0, 0, 0.06);
transform: rotate(var(--note-tilt, 0deg));
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
/* subtle randomness */
.note:nth-child(3n) { --note-tilt: -0.6deg; }
.note:nth-child(4n) { --note-tilt: 0.4deg; }
.note:nth-child(5n) { --note-tilt: -0.3deg; }
.note:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.12),
0 18px 36px rgba(0, 0, 0, 0.10);
}
/* =========================
PIN
========================= */
.note::before {
content: "";
position: absolute;
top: 0.6rem;
left: 50%;
width: 10px;
height: 10px;
background: #c33;
border-radius: 50%;
transform: translateX(-50%);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.3);
opacity: 0.85;
}
/* =========================
META
========================= */
.note-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.7rem;
margin-bottom: 0.5rem;
color: var(--muted);
}
.note-author {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.note-meta time {
font-variant-numeric: tabular-nums;
opacity: 0.7;
}
/* =========================
CONTENT
========================= */
.note-content {
font-size: 0.95rem;
line-height: 1.45;
white-space: pre-wrap;
color: var(--fg);
}
/* =========================
MOBILE TWEAKS
========================= */
@media (max-width: 600px) {
#notes-wall {
grid-template-columns: 1fr;
}
#notes-tools {
align-items: stretch;
flex-direction: column;
}
.note {
transform: none;
}
.note::before {
left: 0.75rem;
transform: none;
}
}
/* =========================
NOTES FORM
========================= */
#notes-form-wrapper {
margin-top: 3rem;
display: flex;
justify-content: center;
}
#notes-form {
width: 100%;
max-width: 420px;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
padding: 1.25rem 1.25rem 1.1rem;
border-radius: 10px;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 14px 30px rgba(0, 0, 0, 0.06);
position: relative;
}
/* pin */
#notes-form::before {
content: "";
position: absolute;
top: 0.6rem;
left: 50%;
width: 12px;
height: 12px;
background: #c33;
border-radius: 50%;
transform: translateX(-50%);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.35);
}
/* =========================
LABELS
========================= */
#notes-form label {
display: block;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.25rem;
}
/* =========================
INPUTS
========================= */
#notes-form input,
#notes-form textarea {
width: 100%;
border: none;
background: transparent;
color: var(--fg);
font-family: inherit;
font-size: 0.95rem;
line-height: 1.45;
padding: 0.3rem 0;
margin-bottom: 0.9rem;
border-bottom: 1px solid var(--border);
}
#notes-form textarea {
resize: vertical;
min-height: 4.5rem;
}
/* focus state */
#notes-form input:focus,
#notes-form textarea:focus {
outline: none;
border-bottom-color: var(--accent);
}
/* placeholder */
#notes-form ::placeholder {
color: var(--muted);
}
/* =========================
SUBMIT BUTTON
========================= */
#notes-form button {
margin-top: 0.5rem;
padding: 0.35rem 0.9rem;
font-family: inherit;
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
border: none;
background: var(--fg);
color: var(--bg);
cursor: pointer;
float: right;
}
#notes-form button:hover {
background: var(--accent);
color: var(--surface);
}
#notes-form button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* =========================
MOBILE
========================= */
@media (max-width: 600px) {
#notes-form {
max-width: 100%;
}
}
/* Mermaid container for zooming and panning */
.mermaid-container {
overflow: auto;
width: 100%;
min-height: 26rem;
max-height: 800px;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
position: relative;
margin: 1.5rem 0;
}
/* Make SVG scale properly */
.mermaid-container .mermaid svg {
transform-origin: top left; /* needed for scaling */
transition: transform 0.2s ease; /* smooth zoom */
width: 100%;
height: auto;
}
.mermaid-container--site-map {
width: min(96vw, 1400px);
height: min(82vh, 980px);
max-height: none;
margin-left: 50%;
transform: translateX(-50%);
}
.mermaid-container--site-map .mermaid {
display: inline-block;
min-width: max-content;
padding: 3rem 2rem 2rem;
}
.mermaid-container--site-map .mermaid svg {
width: auto;
max-width: none;
min-width: 1100px;
}
@media (max-width: 700px) {
.mermaid-container--site-map {
width: 100%;
height: 78vh;
margin-left: 0;
transform: none;
}
.mermaid-container--site-map .mermaid svg {
min-width: 900px;
}
}
/* Zoom buttons */
.mermaid-zoom-controls {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
}
.mermaid-zoom-controls button {
padding: 5px 10px;
margin-left: 5px;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
}
.mermaid-zoom-controls button:hover {
background: var(--accent);
color: var(--surface);
}
@import url("./themes/tokens.css");
@import url("./base/elements.css");
@import url("./layout/site-shell.css");
@import url("./components/notes-board.css");
@import url("./components/mermaid.css");

110
assets/styles/themes/tokens.css Normal file
View File

@@ -0,0 +1,110 @@
:root{
--gutter: 2rem;
--margin: 420px;
--body-pad: 1rem;
--content: clamp(
var(--content-min),
calc(100vi - 2*var(--body-pad) - 2*(var(--margin) + var(--gutter))),
var(--content-max)
);
--content-min: 60ch;
--content-max: 880px;
--bleed: 48px;
--fullwidth-cap: 860px;
--bg: #faf9f6;
--fg: #000000;
--link: #1a0dab;
--heading: #004c99;
--surface: #ffffff;
--surface-soft: #f3f1eb;
--accent: #2563eb;
--code-bg: #f0f0f0;
--active-toc: #cacaca;
--note-color: #555;
--note-bg: transparent;
--border: #d7d7d7;
--chip-bg: #f0f0f0;
--chip-fg: #444;
--muted: #666;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: var(--border);
--text-muted: var(--muted);
--accent-bg: color-mix(in oklab, var(--accent) 10%, var(--surface));
--font-body: 'DM Sans', system-ui, sans-serif;
--kb-bg-completed: #e6f4ea;
--kb-bg-manager-review: #fff4e5;
--kb-bg-in-progress: #e8f0fe;
--kb-bg-not-started: #f1f3f5;
--kb-bg-comments: #fdecea;
--kb-column-border: rgba(0,0,0,0.06);
--kb-card-bg: #ffffff;
--kb-card-text: #1f2933;
}
:root[data-theme="dark"]{
--bg: #0f1115;
--fg: #e6e6e6;
--link: #8ab4ff;
--heading: #9ecbff;
--surface: #151820;
--surface-soft: #1b202a;
--accent: #8ab4ff;
--code-bg: #1a1d24;
--note-color: #c2c7cf;
--note-bg: transparent;
--border: #2a2f3a;
--chip-bg: #1f2330;
--chip-fg: #cfd3da;
--muted: #a9b0bb;
--active-toc: #313131;
--kb-bg-completed: #1e3a2b;
--kb-bg-manager-review: #3a2f1e;
--kb-bg-in-progress: #1f2a44;
--kb-bg-not-started: #2a2d31;
--kb-bg-comments: #3b1f24;
--kb-column-border: rgba(255,255,255,0.08);
--kb-card-bg: #16181c;
--kb-card-text: #e5e7eb;
}
:root[data-theme="dark-academia"]{
color-scheme: dark;
--bg: #11100d;
--fg: #f7ecd5;
--link: #d8b86f;
--heading: #e8cf91;
--surface: #1d1a16;
--surface-soft: #242019;
--accent: #b89145;
--code-bg: #191814;
--active-toc: rgba(184, 145, 69, 0.18);
--note-color: #d9c9aa;
--note-bg: rgba(243, 234, 215, 0.05);
--border: rgba(217, 190, 124, 0.32);
--chip-bg: rgba(184, 145, 69, 0.14);
--chip-fg: #f0d89a;
--muted: #b6a681;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: rgba(217, 190, 124, 0.24);
--text-muted: var(--muted);
--accent-bg: rgba(184, 145, 69, 0.16);
--kb-bg-completed: rgba(68, 106, 87, 0.24);
--kb-bg-manager-review: rgba(184, 145, 69, 0.2);
--kb-bg-in-progress: rgba(82, 93, 117, 0.22);
--kb-bg-not-started: rgba(243, 234, 215, 0.08);
--kb-bg-comments: rgba(125, 47, 54, 0.24);
--kb-column-border: rgba(217, 190, 124, 0.2);
--kb-card-bg: #181510;
--kb-card-text: #f3ead7;
}

134
assets/styles/utilities/responsive.css Normal file
View File

@@ -0,0 +1,134 @@
@media (max-width: 600px){
.banner-header {
align-items: stretch;
gap: 0.7rem;
margin-top: 0.75rem;
}
.site-brand {
justify-content: center;
}
.site-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 0.2rem;
font-size: 0.92rem;
}
.site-nav a {
padding: 0.42rem 0.55rem;
}
.site-actions {
width: 100%;
flex: 1 1 100%;
justify-content: center;
}
.site-search {
display: none;
}
#updated {
text-align: center;
}
body.no-sidenotes {
margin-left: 1em;
margin-right: 1em;
}
#mobile-move-panel {
display: block;
}
}
@media (prefers-color-scheme: dark){
:root:not([data-theme]){
--bg: #0f1115;
--fg: #e6e6e6;
--link: #8ab4ff;
--heading: #9ecbff;
--code-bg: #1a1d24;
--note-color: #c2c7cf;
--note-bg: transparent;
--border: #2a2f3a;
--chip-bg: #1f2330;
--chip-fg: #cfd3da;
--muted: #a9b0bb;
--surface: #151820;
--surface-soft: #1b202a;
--accent: #8ab4ff;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: var(--border);
--text-muted: var(--muted);
--accent-bg: color-mix(in oklab, var(--accent) 12%, var(--surface));
}
.countdown-wrap {
color: var(--fg, #ddd);
}
time.countdown {
color: var(--accent, #7abfff);
background: color-mix(in srgb, var(--accent, #7abfff) 15%, transparent);
box-shadow: 0 0 6px rgba(255,255,255,0.05);
}
time.countdown.expired {
color: #777;
}
}
@media (max-width: 1250px){
:root {
--content-min: 0px;
--content: min(var(--content-max), calc(100vi - 2 * var(--body-pad)));
}
#preamble.status{
padding-right: var(--body-pad);
}
#content.content{
padding-right: var(--body-pad);
}
.sidenote,
.marginnote{
float: none;
clear: both;
width: auto;
display: block;
margin: 0.5rem 0 0.75rem;
padding-left: 0.75rem;
border-left: 3px solid rgba(0,0,0,.08);
margin-right: 0;
}
.fullwidth{
max-width: calc(100vw - 2 * var(--body-pad));
}
.sidenote, .marginnote{
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
}
.sidenote .mn-img,
.marginnote .mn-img{
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
}
#table-of-contents{
float: none;
position: static;
width: auto;
margin: 0 0 1rem;
padding: .5rem .75rem;
border-right: 0;
border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
border-radius: 4px;
}
}

8
assets/styles/vendor/bigger-picture.min.css vendored Normal file
View File

@@ -0,0 +1,8 @@
/**
* Minified by jsDelivr using clean-css v5.3.2.
* Original file: /npm/bigger-picture@1.1.19/dist/bigger-picture.css
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
@keyframes bp-fadein{from{opacity:.01}to{opacity:1}}@keyframes bp-bar{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes bp-o{from{transform:rotate(0)}to{transform:rotate(360deg)}}.bp-wrap{top:0;left:0;width:100%;height:100%;position:fixed;z-index:999;contain:strict;touch-action:none;-webkit-tap-highlight-color:transparent}.bp-wrap>div:first-child{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);animation:bp-fadein .48s cubic-bezier(.215,.61,.355,1)}.bp-vid audio{position:absolute;left:14px;width:calc(100% - 28px);bottom:14px;height:50px}.bp-inner{top:0;left:0;width:100%;height:100%;position:absolute;display:flex}.bp-html{display:contents}.bp-html>:first-child{margin:auto}.bp-img-wrap{top:0;left:0;width:100%;height:100%;position:absolute;contain:strict}.bp-img-wrap .bp-canzoom{cursor:zoom-in}.bp-img-wrap .bp-drag{cursor:grabbing}.bp-close{contain:layout size}.bp-img{position:absolute;top:50%;left:50%;user-select:none;background-size:100% 100%}.bp-img div,.bp-img img{position:absolute;top:0;left:0;width:100%;height:100%}.bp-img .bp-o{display:none}.bp-zoomed .bp-img:not(.bp-drag){cursor:grab}.bp-zoomed .bp-cap{opacity:0;animation:none!important}.bp-zoomed.bp-small .bp-controls{opacity:0}.bp-zoomed.bp-small .bp-controls button{pointer-events:none}.bp-controls{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;text-align:left;transition:opacity .3s;animation:bp-fadein .3s}.bp-controls button{pointer-events:auto;cursor:pointer;position:absolute;border:0;background:rgba(0,0,0,.15);opacity:.9;transition:all .1s;contain:content}.bp-controls button:hover{background-color:rgba(0,0,0,.2);opacity:1}.bp-controls svg{fill:#fff}.bp-count{position:absolute;color:rgba(255,255,255,.9);line-height:1;margin:16px;height:50px;width:100px}.bp-next,.bp-prev{top:50%;right:0;margin-top:-32px;height:64px;width:58px;border-radius:3px 0 0 3px}.bp-next:hover:before,.bp-prev:hover:before{transform:translateX(-2px)}.bp-next:before,.bp-prev:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E");position:absolute;left:7px;top:9px;width:46px;transition:all .2s}.bp-prev{right:auto;left:0;transform:scalex(-1)}.bp-x{top:0;right:0;height:55px;width:58px;border-radius:0 0 0 3px}.bp-x:before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'%3E%3Cpath d='M24 10l-2-2-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6z'/%3E%3C/svg%3E");position:absolute;width:37px;top:8px;right:10px}.bp-if,.bp-vid{position:relative;margin:auto;background:#000;background-size:100% 100%}.bp-if div,.bp-if iframe,.bp-if video,.bp-vid div,.bp-vid iframe,.bp-vid video{top:0;left:0;width:100%;height:100%;position:absolute;border:0}.bp-load{display:flex;background-size:100% 100%;overflow:hidden;z-index:1}.bp-bar{position:absolute;top:0;left:0;height:3px;width:100%;transform:translateX(-100%);background:rgba(255,255,255,.9);border-radius:0 3px 3px 0;animation:bp-bar 4s both}.bp-o,.bp-o:after{border-radius:50%;width:90px;height:90px}.bp-o{margin:auto;border:10px solid rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.9);animation:bp-o 1s infinite linear}.bp-cap{position:absolute;bottom:2%;background:rgba(9,9,9,.8);color:rgba(255,255,255,.9);border-radius:4px;max-width:95%;line-height:1.3;padding:.6em 1.2em;left:50%;transform:translateX(-50%);width:fit-content;width:-moz-fit-content;display:table;transition:opacity .3s;animation:bp-fadein .2s}.bp-cap a{color:inherit}.bp-inline{position:absolute}.bp-lock{overflow-y:hidden}.bp-lock body{overflow:scroll}.bp-noclose .bp-x{display:none}.bp-noclose:not(.bp-zoomed){touch-action:pan-y}.bp-noclose:not(.bp-zoomed) .bp-img-wrap{cursor:zoom-in}@media (prefers-reduced-motion){.bp-wrap *{animation-duration:0s!important}}@media (max-width:500px){.bp-x{height:47px;width:47px}.bp-x:before{width:34px;top:6px;right:6px}.bp-next,.bp-prev{margin-top:-27px;height:54px;width:45px}.bp-next:before,.bp-prev:before{top:7px;left:2px;width:43px}.bp-o,.bp-o:after{border-width:6px;width:60px;height:60px}.bp-count{margin:12px 10px}}
/*# sourceMappingURL=/sm/15e96278e1e731ce40eef8d6284cefc81b81dda67c3a0aa386ec893f183bd57f.map */

1889
assets/styles/wird-tracker.css
View File

File diff suppressed because it is too large Load Diff

649
assets/styles/zhd.css
View File

@@ -1,648 +1 @@
/* Home dashboard styles. Scoped to .db-* so article pages keep their layout. */
.db-root {
--db-surface: color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
--db-surface-strong: color-mix(in oklab, var(--bg) 88%, var(--fg) 12%);
--db-line: color-mix(in oklab, var(--border) 78%, var(--fg) 22%);
--db-text-soft: color-mix(in oklab, var(--fg) 68%, var(--bg) 32%);
--db-blue: #2f6fed;
--db-green: #15835b;
--db-amber: #9d6400;
--db-orange: #c55a11;
--db-red: #b64c45;
width: 100%;
padding: 1.5rem 0 4rem;
box-sizing: border-box;
}
.db-root *,
.db-root *::before,
.db-root *::after {
box-sizing: border-box;
}
.db-kicker {
margin: 0 0 0.35rem;
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
}
.db-hero {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
margin-bottom: 1rem;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-hero__brand {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.db-hero__logo {
width: clamp(64px, 10vw, 96px);
height: clamp(64px, 10vw, 96px);
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--db-line);
background: var(--bg);
flex: 0 0 auto;
}
.db-hero__title {
margin: 0;
color: var(--fg);
font-size: clamp(2.4rem, 7vw, 5rem);
font-weight: 900;
line-height: 0.95;
}
.db-hero__sub {
max-width: 58ch;
margin: 0.55rem 0 0;
color: var(--db-text-soft);
font-size: 0.98rem;
line-height: 1.55;
}
.db-now {
display: grid;
align-content: center;
min-width: min(100%, 230px);
padding: 1rem;
background: color-mix(in oklab, var(--bg) 84%, var(--fg) 16%);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-now__label {
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.db-now__clock {
display: block;
margin: 0.2rem 0 0.85rem;
color: var(--fg);
font-size: clamp(1.9rem, 4vw, 2.75rem);
font-variant-numeric: tabular-nums;
font-weight: 800;
line-height: 1;
}
.db-command {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
gap: 1rem;
align-items: center;
padding: 1rem 0;
}
.db-command__title {
margin: 0;
color: var(--fg);
font-size: clamp(1.2rem, 3vw, 1.85rem);
line-height: 1.15;
}
.db-command__search {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 48px;
padding: 0 0.85rem;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-command__search:focus-within {
border-color: var(--db-blue);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--db-blue) 18%, transparent);
}
.db-search-icon {
color: var(--muted);
font-size: 1.1rem;
}
.db-command__search input {
width: 100%;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--fg);
font: inherit;
}
.db-command__search input::placeholder {
color: var(--muted);
}
.db-quicknav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin: 0 0 1.25rem;
}
.db-qn-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"icon label"
"icon meta";
column-gap: 0.7rem;
align-items: center;
min-height: 76px;
padding: 0.9rem;
color: var(--fg);
text-decoration: none;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-left: 4px solid var(--db-blue);
border-radius: 8px;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.db-qn-item:hover,
.db-qn-item:focus-visible {
color: var(--fg);
text-decoration: none;
border-color: color-mix(in oklab, var(--db-blue) 55%, var(--db-line));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.db-qn-item.is-hidden {
display: none;
}
.db-qn-item--writing,
.db-qn-item--notes { border-left-color: var(--db-blue); }
.db-qn-item--career,
.db-qn-item--wird { border-left-color: var(--db-green); }
.db-qn-item--lima,
.db-qn-item--status { border-left-color: var(--db-amber); }
.db-qn-item--system,
.db-qn-item--zone { border-left-color: var(--db-red); }
.db-qn-item--author { border-left-color: var(--db-orange); }
.db-qn-icon {
grid-area: icon;
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
color: var(--fg);
background: color-mix(in oklab, var(--fg) 8%, transparent);
border: 1px solid var(--db-line);
border-radius: 8px;
font-size: 1.05rem;
line-height: 1;
}
.db-qn-label {
grid-area: label;
min-width: 0;
overflow-wrap: anywhere;
font-size: 1rem;
font-weight: 850;
}
.db-qn-meta {
grid-area: meta;
color: var(--muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.db-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1rem;
align-items: start;
}
.db-panel {
grid-column: span 4;
min-width: 0;
padding: 1rem;
background: var(--db-surface);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-panel-stack {
grid-column: span 4;
display: grid;
gap: 1rem;
min-width: 0;
}
.db-panel-stack .db-panel {
grid-column: auto;
}
.db-panel--wide {
grid-column: span 8;
}
.db-panel--stats,
.db-panel--focus {
grid-column: span 4;
}
.db-panel--about {
grid-column: span 8;
}
.db-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.85rem;
}
.db-panel__title {
margin: 0;
color: var(--fg);
font-size: 1.05rem;
line-height: 1.25;
}
.db-panel__more {
flex: 0 0 auto;
color: var(--link);
font-size: 0.82rem;
font-weight: 800;
text-decoration: none;
}
.db-panel__more:hover {
text-decoration: underline;
}
.db-panel__desc {
margin: 0;
color: var(--db-text-soft);
font-size: 0.92rem;
line-height: 1.6;
}
.db-feed {
display: grid;
gap: 0.15rem;
list-style: none;
margin: 0;
padding: 0;
}
.db-feed__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.6rem;
align-items: baseline;
min-width: 0;
padding: 0.62rem 0;
margin: 0;
border-top: 1px solid color-mix(in oklab, var(--db-line) 70%, transparent);
line-height: 1.35;
}
.db-feed__item::before {
content: none !important;
}
.db-feed__dot {
width: 0.48rem;
height: 0.48rem;
margin-top: 0.25rem;
background: var(--db-green);
border-radius: 999px;
}
.db-feed__item a {
min-width: 0;
color: var(--fg);
font-size: 0.92rem;
font-weight: 700;
overflow-wrap: anywhere;
text-decoration: none;
}
.db-feed__item a:hover {
color: var(--link);
text-decoration: underline;
}
.db-feed__meta {
color: var(--muted);
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
.db-comment-feed {
display: grid;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.db-comment-feed__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.65rem;
align-items: start;
min-width: 0;
padding: 0.72rem 0;
margin: 0;
border-top: 1px solid color-mix(in oklab, var(--db-line) 70%, transparent);
}
.db-comment-feed__item::before {
content: none !important;
}
.db-comment-feed__body {
min-width: 0;
}
.db-comment-feed__top {
display: flex;
flex-wrap: wrap;
gap: 0.32rem;
align-items: baseline;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.35;
}
.db-comment-feed__top strong {
color: var(--fg);
font-size: 0.86rem;
}
.db-comment-feed__page {
color: var(--link);
font-weight: 800;
text-decoration: none;
}
a.db-comment-feed__page:hover {
text-decoration: underline;
}
.db-comment-feed__top time {
margin-left: auto;
color: var(--muted);
font-size: 0.74rem;
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
.db-comment-feed__body p {
margin: 0.22rem 0 0;
color: var(--db-text-soft);
font-size: 0.9rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.db-comment-feed__empty {
color: var(--muted);
font-size: 0.9rem;
font-style: italic;
}
.db-stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
.db-stat {
min-height: 92px;
padding: 0.8rem;
background: color-mix(in oklab, var(--bg) 82%, var(--fg) 18%);
border: 1px solid var(--db-line);
border-radius: 8px;
}
.db-stat__num {
display: block;
color: var(--fg);
font-size: clamp(1.55rem, 4vw, 2.1rem);
font-variant-numeric: tabular-nums;
font-weight: 900;
line-height: 1;
}
.db-stat__label {
display: block;
margin-top: 0.5rem;
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.db-year-bar {
position: relative;
height: 8px;
background: color-mix(in oklab, var(--border) 75%, var(--bg) 25%);
border-radius: 999px;
}
.db-year-bar__fill {
width: 0%;
min-width: 6px;
height: 100%;
background: var(--db-green);
border-radius: 999px;
transition: width 0.45s ease;
}
.db-year-bar__label {
position: absolute;
right: 0;
bottom: calc(100% + 0.35rem);
color: var(--muted);
font-size: 0.74rem;
font-weight: 850;
}
.db-task-list,
.db-link-stack {
display: grid;
gap: 0.55rem;
}
.db-task-list a,
.db-link-stack a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-height: 44px;
padding: 0.65rem 0.75rem;
color: var(--fg);
background: color-mix(in oklab, var(--bg) 85%, var(--fg) 15%);
border: 1px solid var(--db-line);
border-radius: 8px;
font-weight: 750;
text-decoration: none;
}
.db-task-list a:hover,
.db-link-stack a:hover {
color: var(--link);
text-decoration: none;
border-color: color-mix(in oklab, var(--link) 45%, var(--db-line));
}
.db-task-list strong {
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.db-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.9rem;
}
.db-tag {
padding: 0.28rem 0.62rem;
color: var(--chip-fg);
background: var(--chip-bg);
border: 1px solid var(--db-line);
border-radius: 999px;
font-size: 0.76rem;
font-weight: 750;
}
:root[data-theme="dark"] .db-root,
:root[data-theme="dark-academia"] .db-root {
--db-surface: color-mix(in oklab, var(--bg) 82%, var(--fg) 18%);
--db-surface-strong: color-mix(in oklab, var(--bg) 72%, var(--fg) 28%);
--db-line: color-mix(in oklab, var(--border) 80%, var(--fg) 20%);
--db-blue: #78a6ff;
--db-green: #63c995;
--db-amber: #d7a451;
--db-orange: #f29a62;
--db-red: #e28982;
}
:root[data-theme="dark-academia"] .db-root {
--db-blue: #c6b07a;
--db-green: #7fb092;
--db-amber: #d6b566;
--db-orange: #c98b52;
--db-red: #c76b71;
}
@media (max-width: 980px) {
.db-quicknav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.db-panel,
.db-panel-stack,
.db-panel--wide,
.db-panel--stats,
.db-panel--focus,
.db-panel--about {
grid-column: span 6;
}
}
@media (max-width: 720px) {
.db-root {
padding-top: 0.75rem;
}
.db-hero,
.db-command {
grid-template-columns: 1fr;
}
.db-hero {
flex-direction: column;
}
.db-hero__brand {
align-items: flex-start;
}
.db-now {
min-width: 0;
}
.db-quicknav,
.db-grid {
grid-template-columns: 1fr;
}
.db-panel,
.db-panel-stack,
.db-panel--wide,
.db-panel--stats,
.db-panel--focus,
.db-panel--about {
grid-column: span 1;
}
.db-feed__item {
grid-template-columns: auto minmax(0, 1fr);
}
.db-feed__meta {
grid-column: 2;
}
}
@media (max-width: 460px) {
.db-hero__brand {
display: grid;
}
.db-hero__logo {
width: 58px;
height: 58px;
}
.db-qn-item {
min-height: 68px;
}
.db-stats-grid {
grid-template-columns: 1fr;
}
}
@import url("./pages/home-dashboard.css");