/* cyber-publish default stylesheet
* All colors use CSS custom properties (injected by build).
* Edit publish.toml [style] section to customize.
*/
/* ============================================================
FONTS (self-hosted)
============================================================ */
/* latin-ext */
@font-face {
font-family: "Play";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/play-400-latin-ext.woff2)
format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Play";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/play-400-latin.woff2)
format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: "Play";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/play-700-latin-ext.woff2)
format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: "Play";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/static/fonts/play-700-latin.woff2)
format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
PAGE TRANSITIONS
============================================================ */
/* Native View Transitions API (Chrome 111+, Safari 18+) */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: fade-out 0.15s ease-out;
}
::view-transition-new(root) {
animation: fade-in 0.2s ease-in;
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* JS fallback for browsers without View Transitions */
.main-content {
animation: page-enter 0.25s ease-out;
}
@keyframes page-enter {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.main-content.navigating {
opacity: 0;
transform: translateY(-4px);
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
/* ============================================================
RESET & BASE
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: var(--font-size-base, 1rem);
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(
--font-body,
system-ui,
-apple-system,
sans-serif
);
line-height: var(--line-height, 1.7);
color: var(--color-text, #f0f0f0);
background-color: var(--color-bg, #000000);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.3;
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
color: var(--color-text);
}
h1 {
font-size: 2rem;
margin-top: 0;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1.1rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 0.9rem;
}
p {
margin-bottom: 1em;
}
/* --- Links: NO underlines anywhere --- */
a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.15s ease;
}
a:hover {
opacity: 0.85;
text-decoration: none;
}
/* Internal links (wikilinks) โ green, no underline, no border */
a.internal-link {
color: var(--color-primary);
}
a.internal-link:hover {
opacity: 0.8;
}
a.stub-link {
color: #eab308;
opacity: 0.7;
}
a.stub-link:hover {
opacity: 1;
}
/* External links โ blue, no underline */
a.external-link {
color: var(--color-blue, #3b82f6);
}
a.external-link:hover {
opacity: 0.8;
}
/* Lists */
ul,
ol {
margin-bottom: 1em;
padding-left: 1.5em;
}
li {
margin-bottom: 0.25em;
}
li > ul,
li > ol {
margin-top: 0.25em;
margin-bottom: 0;
}
/* Blockquotes */
blockquote {
border-left: 3px solid var(--color-primary);
margin: 1em 0;
padding: 0.5em 1em;
color: var(--color-text);
opacity: 0.85;
background: var(--color-surface);
border-radius: 0 4px 4px 0;
}
/* Code */
code {
font-family: var(--font-mono, monospace);
font-size: 0.9em;
padding: 0.15em 0.35em;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 3px;
}
pre {
margin: 1em 0;
padding: 1em;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
overflow-x: auto;
line-height: 1.5;
}
pre code {
padding: 0;
background: none;
border: none;
font-size: 0.85em;
}
/* Tables */
.page-content table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
margin: 1em 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
}
th,
td {
padding: 0.4em 0.75em;
border: none;
border-bottom: 1px solid
color-mix(
in srgb,
var(--color-text) 6%,
transparent
);
text-align: left;
white-space: nowrap;
}
th {
font-weight: 400;
font-size: 0.8em;
opacity: 0.5;
text-transform: lowercase;
letter-spacing: 0.04em;
}
.page-content table tr:hover {
background: color-mix(
in srgb,
var(--color-primary) 3%,
transparent
);
}
/* Images */
img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
hr {
border: none;
border-top: 1px solid var(--color-border);
margin: 2em 0;
}
/* Task lists */
.contains-task-list {
list-style: none;
padding-left: 0;
}
.task-list-item input[type="checkbox"] {
margin-right: 0.5em;
}
/* ============================================================
LAYOUT
============================================================ */
.layout {
padding-left: 0;
}
.main-content {
max-width: var(--max-width, 48rem);
width: 100%;
margin: 0 auto;
padding: 2rem 1rem;
flex: 1;
}
/* ============================================================
HEADER โ COMMANDER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 30;
background: var(--color-bg);
padding: 0.75rem 1rem;
}
.header-inner {
max-width: var(--max-width, 48rem);
width: 100%;
margin: 0 auto;
}
.header-search {
position: relative;
width: 100%;
}
/* Commander โ 3D trapezoid bar */
.commander {
position: relative;
padding: 0.5em 0;
background: transparent;
border: none;
text-align: center;
perspective: 400px;
cursor: text;
}
.commander::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.2em;
background: linear-gradient(
180deg,
rgba(128, 0, 255, 0) 0%,
rgba(128, 0, 255, 0.06) 40%,
rgba(168, 85, 247, 0.12) 100%
);
transform: rotateX(1.5deg);
transform-origin: bottom center;
border-bottom: 2px solid rgba(168, 85, 247, 0.3);
pointer-events: none;
transition:
background 0.4s ease,
border-color 0.4s ease,
box-shadow 0.4s ease;
}
/* Inactive โ dim */
.commander:not(:focus-within)::before {
border-bottom-color: rgba(128, 0, 255, 0.2);
box-shadow: none;
}
/* Active โ full neon glow */
.commander:focus-within::before {
background: linear-gradient(
180deg,
rgba(128, 0, 255, 0) 0%,
rgba(128, 0, 255, 0.15) 30%,
rgba(168, 85, 247, 0.35) 100%
);
border-bottom-color: rgba(168, 85, 247, 0.9);
box-shadow:
0 1px 0 rgba(168, 85, 247, 0.8),
0 0 8px rgba(168, 85, 247, 0.7),
0 0 20px rgba(168, 85, 247, 0.5),
0 0 40px rgba(168, 85, 247, 0.3),
0 0 80px rgba(168, 85, 247, 0.15);
}
/* Tilde prompt */
.commander-prompt {
font-family: var(--font-mono, monospace);
font-size: 0.9rem;
color: var(--color-primary);
opacity: 0.5;
user-select: none;
transition: opacity 0.3s ease;
display: inline;
vertical-align: middle;
}
.commander:focus-within .commander-prompt {
opacity: 0.8;
}
/* Input field */
.header-search #search-input {
display: inline-block;
width: 80%;
padding: 0.15em 0.3em;
font-family: var(--font-mono, monospace);
font-size: 0.9rem;
border: none;
border-radius: 0;
background: transparent;
color: var(--color-text);
outline: none;
caret-color: var(--color-primary);
vertical-align: middle;
position: relative;
z-index: 2;
}
.header-search #search-input::placeholder {
color: transparent;
}
.header-search .search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 50;
background: var(--color-bg);
border: 1px solid rgba(168, 85, 247, 0.25);
border-top: none;
border-radius: 0 0 6px 6px;
max-height: 400px;
overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.header-search .search-results:empty {
display: none;
}
.header-search .search-results a {
display: block;
padding: 0.5em 0.75em;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
transition: background 0.1s;
}
.header-search .search-results a:last-child {
border-bottom: none;
}
.header-search .search-results a:hover,
.header-search .search-results a.active {
background: rgba(168, 85, 247, 0.1);
}
.header-search .search-results a.active {
outline: none;
border-left: 2px solid rgba(168, 85, 247, 0.7);
}
/* ============================================================
SIDEBAR NAVIGATION
============================================================ */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width, 220px);
height: 100vh;
background: var(--color-bg);
border-right: none;
z-index: 20;
display: flex;
flex-direction: column;
padding: 1rem 0;
overflow-y: auto;
}
.sidebar-header {
padding: 0.5rem 1rem 1rem;
border-bottom: none;
margin-bottom: 0.5rem;
}
.site-title {
font-weight: 700;
font-size: 1.1rem;
color: var(--color-text);
white-space: nowrap;
}
.site-title:hover {
color: var(--color-primary);
}
.sidebar-nav {
flex: 1;
padding: 0.5rem 0;
}
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-item a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 1rem;
color: var(--color-text);
opacity: 0.7;
font-size: 0.95rem;
transition:
opacity 0.15s,
background 0.15s;
text-decoration: none;
}
.sidebar-item a:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.04);
}
.sidebar-item a.active {
opacity: 1;
color: var(--color-primary);
background: rgba(168, 85, 247, 0.06);
}
.sidebar-icon {
font-size: 1.1rem;
width: 1.4rem;
text-align: center;
flex-shrink: 0;
}
.sidebar-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-builtin {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: none;
}
.external-icon {
font-size: 0.75em;
margin-left: 0.15em;
}
.sidebar-toggle {
display: none;
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 40;
background: var(--color-surface);
border: none;
border-radius: 4px;
cursor: pointer;
padding: 0.5rem;
flex-direction: column;
gap: 4px;
}
.sidebar-toggle span {
display: block;
width: 20px;
height: 2px;
background: var(--color-text);
transition: transform 0.2s;
}
/* ============================================================
LAYOUT โ SIDEBAR + MAIN (see .layout above)
============================================================ */
/* ============================================================
PAGES
============================================================ */
.page-header {
margin-bottom: 2rem;
}
.page-header h1 {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
/* Icon + page name on one line */
.page-icon {
font-size: 1.6rem;
line-height: 1;
flex-shrink: 0;
}
/* Aliases (synonyms) shown under page title */
.page-aliases {
font-size: 0.8rem;
opacity: 0.5;
margin-top: 0.15rem;
}
.page-alias {
color: var(--color-text);
}
.page-alias + .page-alias::before {
content: " ยท ";
}
.page-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag {
display: inline-block;
padding: 0.15em 0.6em;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 1em;
font-size: 0.8rem;
color: var(--color-primary);
transition: background 0.15s;
}
.tag:hover {
background: var(--color-primary);
color: #fff;
}
.tag-small {
font-size: 0.7rem;
padding: 0.1em 0.4em;
}
.tag-count {
opacity: 0.6;
}
.crystal {
display: inline-block;
padding: 0.15em 0.6em;
border-radius: 1em;
font-size: 0.75rem;
letter-spacing: 0.04em;
border: 1px solid;
}
.crystal-type {
color: #b48ead;
border-color: rgba(180, 142, 173, 0.35);
background: rgba(180, 142, 173, 0.08);
}
.crystal-domain {
color: #88c0d0;
border-color: rgba(136, 192, 208, 0.35);
background: rgba(136, 192, 208, 0.08);
}
.page-focus {
font-size: 0.8rem;
font-family: var(--font-mono);
color: var(--color-primary);
opacity: 0.6;
margin-top: 0.3rem;
}
.page-date {
font-size: 0.85rem;
opacity: 0.6;
}
.ns-path {
color: var(--color-text);
opacity: 0.45;
text-decoration: none;
font-weight: 400;
}
.ns-path:hover {
opacity: 0.8;
text-decoration: underline;
}
.ns-sep {
opacity: 0.3;
margin: 0 0.1em;
font-weight: 300;
}
.page-content {
margin-bottom: 2rem;
}
.page-footer {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
font-size: 0.8rem;
opacity: 0.5;
}
.namespace-children {
margin-top: 2rem;
padding: 1rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
}
.namespace-children h2 {
font-size: 1.1rem;
margin-top: 0;
}
/* ============================================================
BACKLINKS
============================================================ */
.backlinks {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.backlinks h2 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.5;
margin-top: 0;
margin-bottom: 0.75rem;
}
.backlinks-list {
list-style: none;
padding: 0;
}
.backlinks-list li {
padding: 0.3rem 0;
}
.backlink-title {
font-size: 0.9rem;
}
/* ============================================================
INDEX PAGE
============================================================ */
.index-header {
margin-bottom: 2rem;
}
.site-description {
font-size: 1.1rem;
opacity: 0.7;
margin-top: 0.5rem;
}
.page-count {
font-size: 0.85rem;
opacity: 0.5;
}
.index-search {
margin-bottom: 2rem;
}
#search-input {
width: 100%;
padding: 0.6em 1em;
font-family: inherit;
font-size: 1rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface);
color: var(--color-text);
outline: none;
transition: border-color 0.15s;
}
#search-input:focus {
border-color: var(--color-primary);
}
.search-results {
margin-top: 0.5rem;
}
.search-results a {
display: block;
padding: 0.5em 0.75em;
border-radius: 4px;
}
.search-results a:hover {
background: var(--color-surface);
}
.search-result-title {
font-weight: 500;
}
.search-result-excerpt {
font-size: 0.85rem;
opacity: 0.6;
margin-top: 0.2em;
}
.page-list {
list-style: none;
padding: 0;
}
.page-list-item {
padding: 0.5em 0;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.page-list-item:last-child {
border-bottom: none;
}
.page-list-title {
font-weight: 500;
}
.page-list-item time {
font-size: 0.8rem;
opacity: 0.5;
white-space: nowrap;
}
.page-icon-small {
margin-right: 0.3rem;
}
/* ============================================================
BLOG PAGE โ TIMELINE
============================================================ */
.blog-page {
position: relative;
padding-bottom: 4rem;
}
/* Timeline container */
.timeline {
position: relative;
padding: 1rem 0;
}
/* Vertical line */
.timeline::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--color-border);
transform: translateX(-50%);
}
/* Each entry: date row + content row */
.timeline-entry {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0 1.5rem;
align-items: start;
margin-bottom: 2rem;
}
/* Centered date */
.timeline-date {
grid-column: 1 / -1;
text-align: center;
margin-bottom: 0.75rem;
position: relative;
z-index: 1;
}
.timeline-date-link {
display: inline-block;
background: var(--color-bg);
padding: 0.3rem 1rem;
border: 1px solid var(--color-border);
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
letter-spacing: 0.02em;
transition: all 0.2s ease;
}
.timeline-date-link:hover {
background: var(--color-primary);
color: var(--color-bg);
border-color: var(--color-primary);
}
/* Content card */
.timeline-content {
grid-column: 1 / -1;
width: 100%;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 1rem 1.25rem;
position: relative;
}
/* Content body โ rendered HTML with clickable wikilinks */
.timeline-body {
font-size: 0.92rem;
line-height: 1.6;
}
.timeline-body p {
margin: 0.3rem 0;
}
.timeline-body ul,
.timeline-body ol {
margin: 0.25rem 0;
padding-left: 1.25rem;
}
.timeline-body li {
margin-bottom: 0.2rem;
}
/* "read more" link */
.timeline-more {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.82rem;
color: var(--color-primary);
opacity: 0.8;
text-decoration: none;
}
.timeline-more:hover {
opacity: 1;
text-decoration: underline;
}
/* Tags inside timeline */
.timeline-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.6rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border);
}
/* Mobile: simpler layout */
@media (max-width: 640px) {
.timeline::before {
left: 1rem;
}
.timeline-entry {
display: block;
padding-left: 2.5rem;
position: relative;
}
.timeline-date {
text-align: left;
margin-bottom: 0.5rem;
}
.timeline-content {
margin: 0;
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.25s ease;
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-toggle {
display: flex;
}
.layout {
padding-left: 0;
}
.site-header {
padding-left: 0.75rem;
}
.main-content {
padding: 1rem 0.75rem;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.25rem;
}
.pages-table {
font-size: 0.8rem;
}
.pages-table .col-rank,
.pages-table .col-created,
.pages-table .col-modified,
.pages-table .col-size,
.pages-table .col-density,
.pages-table .col-gravity {
display: none;
}
.pages-table th,
.pages-table td {
padding: 0.3rem 0.5rem;
}
.col-title a {
white-space: normal;
word-break: break-word;
}
}
/* ============================================================
TABLE OF CONTENTS
============================================================ */
.toc {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 1rem 1.5rem;
margin-bottom: 2rem;
font-size: 0.9rem;
}
.toc h3 {
margin: 0 0 0.5rem 0;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.5;
}
.toc ul {
margin: 0;
padding-left: 1.2rem;
list-style: none;
}
.toc ul ul {
padding-left: 1rem;
}
.toc li {
margin: 0.2rem 0;
}
.toc a {
color: var(--color-text);
opacity: 0.8;
}
.toc a:hover {
color: var(--color-primary);
opacity: 1;
}
.heading-anchor {
display: block;
position: relative;
top: -4rem;
visibility: hidden;
}
/* ============================================================
ADMONITIONS
============================================================ */
.admonition {
border-left: 4px solid var(--color-primary);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
background: var(--color-surface);
border-radius: 0 6px 6px 0;
}
.admonition-title {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.admonition-note {
border-left-color: var(--color-blue, #3b82f6);
}
.admonition-note .admonition-title {
color: var(--color-blue, #3b82f6);
}
.admonition-tip {
border-left-color: var(--color-green, #22c55e);
}
.admonition-tip .admonition-title {
color: var(--color-green, #22c55e);
}
.admonition-warning {
border-left-color: #f59e0b;
}
.admonition-warning .admonition-title {
color: #f59e0b;
}
.admonition-caution {
border-left-color: var(--color-red, #ef4444);
}
.admonition-caution .admonition-title {
color: var(--color-red, #ef4444);
}
.admonition-important {
border-left-color: #a855f7;
}
.admonition-important .admonition-title {
color: #a855f7;
}
/* ============================================================
EMBEDS
============================================================ */
.embed {
border-left: 3px solid var(--color-primary);
padding: 0.75rem 1rem;
margin: 1rem 0;
background: var(--color-surface);
border-radius: 0 6px 6px 0;
}
.embed-header {
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.embed-header a {
color: var(--color-primary);
}
.embed-missing {
border-left-color: var(--color-border);
opacity: 0.6;
font-style: italic;
}
/* ============================================================
BLOCK REFERENCES
============================================================ */
.block-ref {
background: var(--color-surface);
padding: 0.1em 0.3em;
border-radius: 3px;
border-bottom: 1px dashed var(--color-primary);
}
.block-ref-missing {
opacity: 0.5;
font-size: 0.85em;
border-bottom-color: var(--color-border);
}
/* ============================================================
QUERY RESULTS
============================================================ */
.query-results {
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 1rem;
margin: 1rem 0;
background: var(--color-surface);
}
.query-results-header {
font-size: 0.85rem;
opacity: 0.5;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.query-results ul {
margin: 0;
padding-left: 1.5rem;
}
.query-fallback {
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: 6px;
padding: 1rem;
margin: 1rem 0;
}
.query-fallback code {
font-size: 0.85rem;
}
.query-fallback .query-note {
font-size: 0.8rem;
opacity: 0.5;
margin-top: 0.5rem;
}
/* ============================================================
TOPICS PAGE
============================================================ */
.index-topics {
margin: 2rem 0;
}
.index-topics h2 {
margin-bottom: 0.75rem;
}
.index-topics .fullscreen-viz-container {
height: 400px;
border-radius: 8px;
border: 1px solid var(--color-border);
}
/* On index page, topics widget should not break out of container */
.index-page .index-topics {
position: relative;
overflow: hidden;
}
/* ============================================================
FULL-SCREEN VISUALIZATIONS (Graph, Topics)
============================================================ */
.fullscreen-viz {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
}
.fullscreen-viz-container {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
/* When fullscreen-viz is active, make nav float on top with blur */
body:has(.fullscreen-viz) .site-header {
background: color-mix(
in srgb,
var(--color-bg) 60%,
transparent
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
body:has(.fullscreen-viz) .sidebar {
background: color-mix(
in srgb,
var(--color-bg) 60%,
transparent
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
body:has(.fullscreen-viz) .layout {
padding-left: 0;
}
body:has(.fullscreen-viz) .main-content {
padding: 0;
max-width: none;
}
.graph-stats {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
color: var(--color-primary);
background: color-mix(
in srgb,
var(--color-bg) 70%,
transparent
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid
color-mix(
in srgb,
var(--color-primary) 30%,
transparent
);
padding: 0.4rem 1.2rem;
border-radius: 2rem;
pointer-events: none;
z-index: 10;
letter-spacing: 0.03em;
}
/* Graph tag filter */
.graph-filter {
position: fixed;
top: 3.5rem;
left: 0;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
z-index: 35;
padding: 0.3rem 1rem;
text-align: center;
white-space: nowrap;
pointer-events: none;
}
.graph-filter::-webkit-scrollbar {
display: none;
}
.graph-filter-pill {
display: inline-block;
font-size: 0.7rem;
padding: 0.25rem 0.7rem;
margin: 0 0.15rem;
border-radius: 1rem;
border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
background: color-mix(in srgb, var(--color-bg) 70%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--color-text);
opacity: 0.7;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
letter-spacing: 0.03em;
white-space: nowrap;
pointer-events: auto;
}
.graph-filter-pill:hover {
opacity: 1;
border-color: var(--color-primary);
}
.graph-filter-pill.active {
background: var(--color-primary);
color: var(--color-bg);
opacity: 1;
border-color: var(--color-primary);
}
/* ============================================================
PAGES DISCOVERY
============================================================ */
.pages-discovery {
padding-bottom: 4rem;
}
.pages-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
border-spacing: 0;
}
.pages-table thead {
position: sticky;
top: 0;
z-index: 5;
background: var(--color-bg);
}
.pages-table th {
text-align: left;
padding: 0.5rem 0.75rem;
font-size: 0.65rem;
text-transform: lowercase;
letter-spacing: 0.06em;
opacity: 0.35;
font-weight: 400;
border: none;
border-bottom: 1px solid
color-mix(
in srgb,
var(--color-text) 6%,
transparent
);
vertical-align: middle;
}
.pages-table td {
padding: 0.35rem 0.75rem;
border: none;
border-bottom: 1px solid
color-mix(
in srgb,
var(--color-text) 3%,
transparent
);
transition: background 0.15s ease;
vertical-align: middle;
}
.pages-table .page-row {
content-visibility: auto;
contain-intrinsic-size: auto 2rem;
transition: background 0.15s ease;
}
.pages-table .page-row:hover {
background: color-mix(
in srgb,
var(--color-primary) 4%,
transparent
);
}
.pages-table .page-row:hover .col-rank {
opacity: 0.5;
}
.col-rank {
width: 1%;
white-space: nowrap;
opacity: 0.2;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
transition: opacity 0.15s ease;
}
.col-size,
.col-pagerank,
.col-links,
.col-density,
.col-gravity,
.col-created,
.col-modified {
width: 1%;
white-space: nowrap;
text-align: right;
font-variant-numeric: tabular-nums;
font-size: 0.8rem;
padding-left: 0.3rem !important;
padding-right: 0.3rem !important;
}
.col-density,
.col-gravity {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
}
.pages-table th[data-col] {
cursor: pointer;
user-select: none;
}
.pages-table th.sort-asc::after { content: ' โ'; }
.pages-table th.sort-desc::after { content: ' โ'; }
.col-created,
.col-modified {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.02em;
color: #666;
}
.col-gravity {
padding-right: 0.5rem !important;
}
.pages-table .col-title {
width: 100%;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.col-title a {
color: var(--color-text);
text-decoration: none;
transition: color 0.15s ease;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.col-title .page-icon {
font-size: 1.1rem;
line-height: 1;
}
.col-title a:hover {
color: var(--color-primary);
}
.row-tags {
margin-left: 0.5rem;
}
.row-tag {
font-size: 0.65rem;
opacity: 0.3;
color: var(--color-text);
text-decoration: none;
margin-right: 0.3rem;
transition: opacity 0.15s ease;
}
.row-tag:hover {
opacity: 0.7;
color: var(--color-primary);
}
/* ============================================================
FILES TABLE
============================================================ */
.files-table .col-type {
width: 3.5rem;
opacity: 0.35;
font-size: 0.75rem;
}
.files-table .col-cid {
width: 5.5rem;
font-size: 0.75rem;
opacity: 0.4;
font-variant-numeric: tabular-nums;
}
.files-table .col-cid code {
font-size: 0.7rem;
opacity: 0.7;
background: none;
padding: 0;
}
.file-missing {
opacity: 0.4;
}
/* ============================================================
MINIMAP
============================================================ */
.page-minimap h3 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.5;
margin-bottom: 0.5rem;
}
render/static/style.css
ฯ 0.0%