/* ================================================================== Site stylesheet. Everything except code-block styling (css/code.css). One light and one dark theme, driven by the custom properties below: the default follows the system preference, and js/ui.js pins `data-theme` on when the reader uses the toggle. Julia's four brand colors are reserved for admonitions, links/active nav, and code chips. ================================================================== */ /* ------------------------------------------------------------------ Theme tokens ------------------------------------------------------------------ */ :root { --bg: #ffffff; --bg-sidebar: #f6f7f8; --bg-inset: #f6f8fa; /* code blocks, table stripes */ --bg-hover: #eef1f4; --text: #515151; --text-strong: #313131; --text-muted: #82878f; --border: #e2e4e8; --border-strong: #cfd3d8; --julia-green: #389826; --julia-red: #cb3c33; --julia-purple: #9558b2; --julia-blue: #4063d8; --link: var(--julia-blue); --font-body: Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Admonition header knobs: wash opacity, and title-text blend toward ink */ --adm-tint: 9%; --adm-ink: #1c1c1c; --adm-ink-mix: 75%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14171a; --bg-sidebar: #1c2025; --bg-inset: #24292e; --bg-hover: #2a3038; --text: #b9c1c9; --text-strong: #e8ebee; --text-muted: #8b939c; --border: #30363d; --border-strong: #3d444d; --link: #91a9f0; /* Julia blue, lightened for dark backgrounds */ --adm-tint: 16%; --adm-ink: #ffffff; --adm-ink-mix: 55%; } } :root[data-theme="dark"] { --bg: #14171a; --bg-sidebar: #1c2025; --bg-inset: #24292e; --bg-hover: #2a3038; --text: #b9c1c9; --text-strong: #e8ebee; --text-muted: #8b939c; --border: #30363d; --border-strong: #3d444d; --link: #91a9f0; --adm-tint: 16%; --adm-ink: #ffffff; --adm-ink-mix: 55%; } /* ------------------------------------------------------------------ Base ------------------------------------------------------------------ */ * { box-sizing: border-box; } html { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; } body { margin: 0; color: var(--text); background-color: var(--bg); -webkit-text-size-adjust: 100%; } a { color: var(--link); text-decoration: none; } a:hover, a:focus { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin-top: 1.5em; margin-bottom: 0.6em; font-weight: bold; line-height: 1.25; color: var(--text-strong); } h1 { font-size: 1.6rem; padding-bottom: 0.4em; border-bottom: 1.5px solid var(--border-strong); } h2 { font-size: 1.35rem; padding-bottom: 0.25em; border-bottom: 1px solid var(--border-strong); } h3 { font-size: 1.15rem; } h4, h5, h6 { font-size: 1rem; } /* Section links land right at the heading, not under the mobile top bar. */ h1, h2, h3, h4 { scroll-margin-top: 1rem; } h1 a, h2 a, h3 a, h4 a { color: inherit; } p, ul, ol, dl { margin-top: 0; margin-bottom: 1rem; } li p { margin: 0.5rem 0; } strong { color: var(--text-strong); } hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--border); } blockquote { margin: 1rem 0; padding: 0.25rem 1rem; color: var(--text-muted); border-left: 3px solid var(--border-strong); } blockquote p:last-child { margin-bottom: 0; } img { display: block; max-width: 100%; margin: 0 auto 1rem; border-radius: 5px; } /* Inline docs|stable badges on the landing page flow with the text. */ img[alt="badge"] { height: 1em; width: auto; display: inline; margin: 0; padding: 0 0.5ex; vertical-align: text-bottom; } table { margin-bottom: 1rem; width: 100%; border: 1px solid var(--border); border-collapse: collapse; font-size: 0.9rem; } td, th { padding: 0.3rem 0.6rem; border: 1px solid var(--border); text-align: left; } th { color: var(--text-strong); } tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: var(--bg-inset); } kbd { padding: 0 0.35em; font-family: inherit; /* no monospace outside code */ font-size: 0.8em; border: 1px solid var(--border-strong); border-radius: 4px; } .katex { font-size: 1em !important; } /* ------------------------------------------------------------------ Layout: fixed sidebar on the left, one reading column ------------------------------------------------------------------ */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 20; width: 15rem; overflow-y: auto; background-color: var(--bg-sidebar); border-right: 1px solid var(--border); } .content { margin-left: 15rem; } .page { max-width: 45rem; margin: 0 auto; padding: 2.5rem 2rem 1.5rem; } .page > div > h1:first-child { margin-top: 0; } /* ------------------------------------------------------------------ Sidebar ------------------------------------------------------------------ */ .sidebar-inner { display: flex; flex-direction: column; min-height: 100%; padding: 1.5rem 1.25rem 1rem; } .sidebar-brand { display: block; text-align: center; color: inherit; } .sidebar-brand:hover, .sidebar-brand:focus { text-decoration: none; } .sidebar-wordmark { display: block; font-size: 1.6rem; font-weight: bold; color: var(--text-strong); line-height: 1.2; } .sidebar-tagline { display: block; margin-top: 0.2rem; font-size: 1rem; color: var(--text-muted); } .sidebar-logo { width: 105px; margin: 1rem auto; } /* Search launcher, styled like an input */ .search-open { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0.25rem 0 1.25rem; padding: 0.35rem 0.6rem; font: inherit; color: var(--text-muted); background-color: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .search-open:hover, .search-open:focus { color: var(--text-strong); border-color: var(--border-strong); } .search-open kbd { margin-left: auto; } /* Navigation: page links, with the active page's sections below it */ .sidebar-nav { flex-grow: 1; } .sidebar-nav-item { display: block; padding: 0.15rem 0; color: var(--text); line-height: 1.6; } .sidebar-nav-item.active { color: var(--link); font-weight: bold; } .menu-list-child-list { display: none; list-style: none; margin: 0.2rem 0 0.4rem; padding-left: 0.75rem; border-left: 1px solid var(--border-strong); } .sidebar-nav-item.active + .menu-list-child-list { display: block; } .menu-list-item { margin: 0; } .menu-list-link { display: block; padding: 0.1rem 0; font-size: 0.8rem; color: var(--text-muted); } .menu-list-link:hover, .menu-list-link:focus { color: var(--text-strong); text-decoration: none; } /* Section currently on screen, tracked by the scrollspy in js/ui.js */ .menu-list-link.current { color: var(--link); } /* Footer: theme toggle, GitHub, license */ .sidebar-foot { margin-top: 1.5rem; } .sidebar-foot-icons { display: flex; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; } .sidebar-foot-icons a, .theme-toggle { display: flex; align-items: center; padding: 0.3rem; color: var(--text-muted); background: none; border: none; cursor: pointer; } .sidebar-foot-icons a:hover, .sidebar-foot-icons a:focus, .theme-toggle:hover, .theme-toggle:focus { color: var(--text-strong); } .copyright-notice { margin: 0; text-align: center; font-size: 0.8rem; } .copyright-notice a { color: var(--text-muted); } /* The toggle shows the mode it switches to: a moon in light mode, a sun in dark mode. "Auto" (no data-theme) resolves via the media query. */ .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: inline; } /* ------------------------------------------------------------------ Admonitions: light wash of the accent, title inline with the body ------------------------------------------------------------------ */ .admonition { margin: 1.5rem 0 1rem; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid color-mix(in srgb, var(--adm) 45%, transparent); background-color: color-mix(in srgb, var(--adm) var(--adm-tint), transparent); border-radius: 8px; } /* A quiet lead-in: the accent tinted toward the ink, run into the first sentence after a colon. --adm-* knobs are set per theme. */ .admonition-title { color: color-mix(in srgb, var(--adm) var(--adm-ink-mix), var(--adm-ink)); font-weight: bold; } /* The box's own padding provides the spacing the outer margins would. */ .admonition-body > :first-child { margin-top: 0; } .admonition-body > :last-child { margin-bottom: 0; } .tldr { --adm: var(--julia-green); } .advanced { --adm: var(--julia-red); } .vscode { --adm: var(--julia-purple); } .note { --adm: var(--julia-blue); } /* ------------------------------------------------------------------ In-content table of contents ------------------------------------------------------------------ */ /* The sidebar lists the current page's headings whenever it is on screen, so the in-content copy only earns its place in the mobile layout, where the sidebar is hidden behind the hamburger drawer. */ .toc { display: none; } .toc ol { margin: 1rem 0; } /* ------------------------------------------------------------------ Page foot ------------------------------------------------------------------ */ .page-foot { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-muted); text-align: center; } .page-foot a { color: var(--text-muted); text-decoration: underline; } /* ------------------------------------------------------------------ Search dialog ------------------------------------------------------------------ */ #search-dialog { width: min(34rem, 92vw); margin: 10vh auto auto; padding: 0; color: var(--text); background-color: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } #search-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } #search-input { width: 100%; padding: 0.8rem 1rem; font: inherit; color: inherit; background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; outline: none; } #search-results { max-height: 60vh; overflow-y: auto; } #search-results:not(:empty) { padding-bottom: 0.4rem; } .search-group-label { padding: 0.6rem 1rem 0.2rem; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .search-empty { padding: 0.8rem 1rem; color: var(--text-muted); } a.search-result { display: block; padding: 0.4rem 1rem; color: inherit; text-decoration: none; } a.search-result:hover, a.search-result.selected { background-color: var(--bg-hover); } .search-crumb { color: var(--text-muted); } .search-result-title b { color: var(--link); } .search-teaser { font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; } /* Pagefind wraps matched terms in ; render them like the in titles instead of the browser's yellow highlight */ .search-teaser mark { background: none; color: var(--link); font-weight: bold; } /* ------------------------------------------------------------------ Mobile: top bar and slide-in drawer ------------------------------------------------------------------ */ .topbar { display: none; } @media (max-width: 767px) { .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 0.75rem; height: 3.25rem; padding: 0 0.75rem; background-color: var(--bg-sidebar); border-bottom: 1px solid var(--border); } .topbar button { display: flex; align-items: center; padding: 0.4rem; color: var(--text); background: none; border: none; cursor: pointer; } .topbar-title { font-weight: bold; color: var(--text-strong); } .topbar-search { margin-left: auto; } .sidebar { width: 16rem; transform: translateX(-100%); transition: transform 0.2s ease; visibility: hidden; } body.sidebar-open .sidebar { transform: none; visibility: visible; } .sidebar-backdrop { position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; } body.sidebar-open { overflow: hidden; } .content { margin-left: 0; padding-top: 3.25rem; } .toc { display: block; } .page { padding: 1.5rem 1.25rem 1rem; } h1, h2, h3, h4 { scroll-margin-top: 4.25rem; } }