/* ========================= Mojdoc style! ========================= */ @layer reset, tokens, base, components, utilities; @layer reset { *, *::before, *::after { box-sizing: border-box; } html:focus-within { scroll-behavior: smooth; } html, body { margin: 0; height: 100%; } body { min-height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video, canvas, audio { display: block; max-inline-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; } :where(a) { color: inherit; text-decoration: none; } } @layer tokens { :root { --sidebar-w: 280px; --sidebar-min: 220px; --sidebar-max: 520px; --topbar-h: 56px; --ease-std: cubic-bezier(.2, .6, .2, 1); --dur-1: 160ms; --dur-2: 260ms; --bg: #0b0f14; --bg-2: #0f1720; --panel: #121826; --text: #d7e1f3; --muted: #94a3b8; --accent: #00e5ff; --accent-2: #ff2bd6; --edge: #1b2333; --link: #7df9ff; --code-bg: #0a0f1a; --code-border: #1f2a44; --shadow: 0 8px 24px rgba(0, 0, 0, .45); --nav-nudge: 4px; --nav-connector-offset: 10px; --nav-connector-length: 14px; color-scheme: dark; } /* Optional light theme (toggle with [data-theme="light"] on or ). */ /* Note this is not wired up in the HTML or Javascript right now... */ :root[data-theme="light"] { --bg: #f7fafc; --bg-2: #eef2f7; --panel: #ffffff; --text: #0e141b; --muted: #5b6b7c; --accent: #00bcd4; --accent-2: #e000a8; --edge: #e5eaf1; --link: #007ea8; --code-bg: #f3f6fb; --code-border: #dde6f5; color-scheme: light; } } @layer base { :root { --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } body { font-family: var(--font-sans); line-height: 1.55; color: var(--text); background: radial-gradient(1400px 600px at 20% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), radial-gradient(1400px 800px at 120% 20%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%), var(--bg); } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } } @layer components { .app { display: grid; grid-template-rows: var(--topbar-h) 1fr; block-size: 100vh; min-block-size: 100dvh; } .topbar { position: sticky; inset-block-start: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding-inline: 20px; min-block-size: var(--topbar-h); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent)), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .08)), color-mix(in srgb, var(--panel) 92%, black 8%); border-block-end: 1px solid color-mix(in srgb, var(--edge) 85%, black 15%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .02), var(--shadow); } .logo { font-weight: 800; letter-spacing: .12em; font-size: 20px; color: color-mix(in srgb, var(--text) 92%, white 8%); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 22px color-mix(in srgb, var(--accent-2) 25%, transparent); a { color: inherit; text-decoration: none; } } .badge { margin-inline-start: auto; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--link) 25%, transparent); border-radius: 999px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; background: rgba(10, 15, 26, .35); backdrop-filter: blur(6px); } .shell { position: relative; display: grid; grid-template-columns: auto 1fr; min-block-size: 0; } .sidebar { border-inline-end: 1px solid var(--edge); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 22%), linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 3%, transparent), transparent 30%), var(--bg-2); overflow: hidden; padding: calc(14px + var(--nav-nudge)) 10px 24px 14px; inline-size: var(--sidebar-w); min-inline-size: var(--sidebar-min); max-inline-size: var(--sidebar-max); resize: horizontal; } aside { position: sticky; inset-block-start: var(--topbar-h); block-size: calc(100dvh - var(--topbar-h)); display: flex; flex-direction: column; overflow: hidden; min-block-size: 0; >.filelist, >.filelist.tree { flex: 1 1 auto; min-block-size: 0; /* important so overflow works in flex containers */ overflow: auto; } >.sidebar-footer { margin-block-start: auto; padding: 0.75rem 0.5rem 1rem; text-align: center; font-size: 0.85rem; color: var(--muted); } } .content { min-inline-size: 0; overflow: auto; padding: 24px 28px 56px; } .md { h1, h2, h3, h4, h5, h6 { line-height: 1.25; } h1 { font-size: 28px; margin: 0 0 16px; } h2 { font-size: 22px; margin: 22px 0 10px; } h3 { font-size: 18px; margin: 18px 0 8px; } p, ul, ol, blockquote, pre, table { margin-block: 12px; } a { color: var(--link); text-decoration: none; text-underline-offset: .15em; &:hover { text-decoration: underline; } &:focus-visible { outline: 2px solid color-mix(in srgb, var(--link) 60%, white 0%); outline-offset: 2px; border-radius: 4px; } } code { font-family: var(--font-mono); background: var(--code-bg); border: 1px solid var(--code-border); padding: 2px 6px; border-radius: 6px; font-size: .95em; } pre { white-space: pre; code { display: block; padding: 14px; overflow-x: auto; } } blockquote { margin: 10px 0; padding: 10px 14px; border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); color: color-mix(in srgb, var(--text) 92%, white 8%); border-radius: 4px; } hr { border: none; block-size: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--link) 35%, transparent), transparent); margin-block: 24px; } } .crumbs { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-block-end: 12px; position: relative; padding-inline-start: 14px; &::before { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: var(--nav-connector-length); block-size: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--link) 0%, transparent), color-mix(in srgb, var(--link) 35%, transparent)); transform: translateY(-50%); pointer-events: none; } } .filelist { list-style: none; margin: 0; padding: 0; li { margin-block: 2px; } a { display: block; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--text); outline: none; overflow-wrap: anywhere; transition: border-color var(--dur-1) var(--ease-std), background-color var(--dur-1) var(--ease-std), box-shadow var(--dur-1) var(--ease-std); &:hover { background: color-mix(in srgb, var(--link) 6%, transparent); border-color: color-mix(in srgb, var(--link) 25%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 8%, transparent) inset, 0 2px 10px rgba(0, 0, 0, .25); } &.active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent)); border-color: color-mix(in srgb, var(--link) 35%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 10%, transparent) inset, 0 6px 24px rgba(0, 0, 0, .35); } &:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } } &.tree { padding-inline-start: 0; } .dir { margin: 4px 0 6px; } .dir>summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; outline: none; border: 1px solid transparent; &:hover { background: color-mix(in srgb, var(--link) 6%, transparent); border: 1px solid color-mix(in srgb, var(--link) 25%, transparent); } &:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } } .dir[open]>summary { background: color-mix(in srgb, var(--link) 8%, transparent); } .dir>ul { list-style: none; margin: 4px 0 6px 22px; padding-inline-start: 16px; border-inline-start: 1px solid var(--edge); } .folder { opacity: .9; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.1em; block-size: 1.1em; line-height: 1; transform: translateY(-0.1em); } .file a { position: relative; padding-inline-start: 24px; &::before { content: '◦'; position: absolute; inset-inline-start: 10px; inset-block-start: 50%; transform: translateY(-50%); opacity: .75; } } } :root { &::-webkit-scrollbar { inline-size: 10px; block-size: 10px; } &::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); } &::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--link) 30%, transparent); border-radius: 10px; } &::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--link) 50%, transparent); } } } @layer utilities { .visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; overflow: hidden !important; white-space: nowrap !important; } }