css

/* This file is the source of truth for book CSS. It is published like system modules and when running locally, it overwrites what ever is imported from the blog */ :root { --font-zoom: 1; --page-bg: #f8fafc; --surface: #ffffff; --surface-soft: #f1f5f9; --surface-muted: #e2e8f0; --text: #172033; --text-muted: #64748b; --heading: #0f172a; --accent: #2563eb; --accent-strong: #1d4ed8; --accent-soft: #dbeafe; --danger: #dc2626; --warning: #fef3c7; --border: #dbe3ee; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.12); --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.18); --radius-sm: 0.5rem; --radius-md: 0.85rem; --radius-lg: 1.35rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-style: normal; font-size: calc(1rem * var(--font-zoom)); line-height: 1.72; color: var(--text); background: var(--page-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .module{ display:none } h1:has(span.header-section-number){ display:none; } .material-symbols-outlined{ font-size: calc(1rem * var(--font-zoom)); cursor:pointer; user-select:none; } summary::marker { color: var(--text-muted); } #msg-galley{ position:fixed; top:0; right:0; height:100vh; min-width:calc(20rem * var(--font-zoom)); max-width:50%; z-index:12; background-color: transparent; pointer-events: none; padding: 1rem 1rem 0 0; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; } .msg-close{ position:absolute; top:calc(3px * var(--font-zoom)); right:calc(3px * var(--font-zoom)); display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; background-color:var(--danger); color: white; font-weight:700; font-size:calc(.7rem * var(--font-zoom)); border-radius: 999px; cursor:pointer; } .msg-dialog{ position: relative; background-color:var(--surface); margin-bottom:.75rem; pointer-events: auto; border-radius:var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-md); overflow: hidden; } .msg-button-{ margin: 0 .5rem .5rem 0; } .msg-button-bar{ background-color:var(--surface-soft); text-align:center; padding:.75rem; border-top: 1px solid var(--border); } .msg-title{ background:var(--accent); color:white; font-weight:700; padding:.55rem 2rem .55rem .85rem; } .msg-message{ background-color:var(--surface); padding: .85rem; } #page-data{ display:none } .toast{ position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); z-index:9999; background-color:purple; color:#fff; padding:.7rem 1.25rem; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); } .toast.success{ background-color:#15803d; } .toast.error{ background-color:var(--danger); } #menu{ top:0; left:-100px; position:fixed; display:none; background:var(--surface); padding:0; z-index:11; transition: left .25s ease, box-shadow .25s ease; height:100vh; min-width:min(22rem, 88vw); max-width:75vw; overflow: auto; border-right: 1px solid var(--border); box-shadow: var(--shadow-lg); } #book-data{display:none} #menu-content{ padding:1rem 1.25rem 2rem; } .menu-button{ display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem; padding:0 .6rem; cursor:pointer; color:var(--text-muted); border-radius:999px; transition: background .18s ease, color .18s ease, transform .18s ease; vertical-align:middle; } .menu-button:hover{ background:var(--accent-soft); color:var(--accent-strong); transform: translateY(-1px); } .menu-header{ top:0; position:sticky; background:var(--surface); opacity:1; margin:0; padding:.45rem .6rem; border-bottom:1px solid var(--border); box-shadow: var(--shadow-sm); z-index:1; } #book-title{ font-weight:700; letter-spacing:.02em; } #search-div{ width:100%; white-space: nowrap; margin-top: 1.5rem; } #search-div h6{ margin:0 0 .45rem 0; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } #search{ width: calc(100% - 2.25rem); border:1px solid var(--border); border-radius:999px; padding:.55rem .85rem; font: inherit; font-size:.92rem; color:var(--text); background:var(--surface); box-shadow: var(--shadow-sm); outline:none; transition: border-color .18s ease, box-shadow .18s ease; } #search:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(37, 99, 235, .13); } #search-button{ padding-left:.45rem; color:var(--accent); vertical-align:middle; } #search-results{ font-size:.86rem; margin-top: .85rem; } .search-result{ margin-top:.65rem; padding:.75rem; cursor:pointer; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .search-result:hover{ background-color:#f8fbff; border-color:#bfdbfe; box-shadow:0 10px 24px rgba(37, 99, 235, .1); transform: translateY(-1px); } .search-result-title{ font-weight:bold; color:var(--heading); } .search-result-line{ margin:.25rem 0 .35rem .75rem; color:var(--text-muted); } .search-term{ background-color:var(--warning); border-radius:.2rem; padding:0 .15rem; } .chapter-result-link{ color:var(--heading); } .toc-section-container{ margin-left:.75rem; } .toc-text-container{ margin-left:1.25rem; color:var(--text-muted); } .chapter-section{ margin-top: calc(3rem * var(--font-zoom)); margin-bottom: calc(3rem * var(--font-zoom)); } .hide{ display:none } img{ max-width:100%; height:auto; border-radius:var(--radius-md); } .entry-header{ position:fixed; top:0; left: 0; width: 100%; transition:opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; padding: .35rem .75rem; -webkit-user-select: none; /* Safari */ user-select: none; /* Standard syntax */ background: var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); z-index:10; } button.nav{ border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--accent); box-shadow: var(--shadow-md); width:2.8rem; height:2.8rem; display:flex; align-items:center; justify-content:center; cursor:pointer; } .nav{ position: fixed; bottom: 1rem; opacity:1.0; transition:opacity 0.35s ease, transform 0.18s ease, box-shadow 0.18s ease; pointer-events: all; } .nav:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); } .dim-button:hover{opacity: 1.0;} .dim-button{opacity: .35;} .dim-header:hover{opacity: 1.0;} .dim-header{opacity: 0;} #prior-button { left: 1rem; } #next-button { right: 1rem; } .span-link{ cursor:pointer; color:var(--accent); font-weight:500; } .span-link:hover{ text-decoration: underline; color:var(--accent-strong); } a:link {color: var(--accent); text-decoration:none} a:visited {color: #4f46e5;} a:hover {background-color: var(--accent-soft); color: var(--accent-strong); border-radius:.25rem;} a:active {color: var(--accent-strong);} .book-title{ margin-top: 6rem; font-family:"Taviraj", Georgia, serif; font-size:clamp(2.4rem, 7vw, calc(4rem * var(--font-zoom))); line-height:1.05; text-align: center; font-weight: 700; color:var(--heading); } .book-author{ margin-top: 1rem; font-size:calc(1.45rem * var(--font-zoom)); text-align: center; color:var(--text-muted); } .book-toc{ text-align: center; margin-top:2rem; } .book-chapters{ display: inline-block; } .book-chapter{ text-align:left; padding-left: 1rem; text-indent: -1rem; margin-bottom: 0.55rem; } .tool { cursor:pointer; font-size:calc(18px * var(--font-zoom)); font-weight:400; vertical-align: middle; padding-left:.6rem; color:var(--text-muted); transition: color .18s ease, transform .18s ease; } .tool:hover { color:var(--accent); transform: translateY(-1px); } .lead-in{ margin-top:4rem; } .example, .indent, .category{ margin:1rem 0 0 1.1rem; } .category div:first-child{ color:var(--danger); font-weight:700; } .example div:first-child{ color:var(--danger); font-style: italic; } h1{ font-family:"Taviraj", Georgia, serif; font-size:clamp(1.35rem, 4vw, calc(2.1rem * var(--font-zoom))); line-height:1.18; color:var(--heading); font-weight:700; margin:0; } h2, h3{ font-family:"Taviraj", Georgia, serif; color:var(--heading); line-height:1.24; letter-spacing:-.015em; } h2{ font-size:clamp(1.55rem, 4vw, calc(2.15rem * var(--font-zoom))); margin:3rem 0 1rem; padding-top:.5rem; } h3{ font-size:clamp(1.2rem, 3vw, calc(1.45rem * var(--font-zoom))); margin:2.25rem 0 .8rem; } .header-section-number{ color:var(--accent); font-weight:700; } p{ margin-top:0; margin-bottom:1.15rem; } p.vignette{ color:var(--danger) } .no-dot{ list-style-type: none; } ul.no-dot li{ padding-left: 1rem; text-indent: -1rem; margin-bottom: 0.3rem; } audio{ height:30px; width:100%; max-width:34rem; } div.post-body{ max-width:940px; margin:0 auto; padding:clamp(5.2rem, 7vw, 6.25rem) clamp(1.15rem, 4vw, 3.5rem) 4rem; background:transparent; } div.index-boxnbt{ background:var(--surface); padding-bottom:2rem; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; font-size: 18px; line-height: 1; } blockquote{ margin:1.75rem 0; padding:1rem 1.25rem 1rem 1.35rem; background:var(--surface-soft); border-left:.35rem solid var(--accent); border-radius:0 var(--radius-md) var(--radius-md) 0; color:#334155; } .note blockquote{ background:#E8F5E9; border-left:.35rem solid darkgreen; } .note blockquote p:first-child::before { content: "Note: "; font-weight: bold; color:#147523; } .tip blockquote{ background:#F3E5F5; border-left:.35rem solid purple; } .tip blockquote p:first-child::before { content: "Tip: "; font-weight: bold; color:rgb(182, 0, 182); } .term blockquote{ background:#E3EDF7; border-left:.35rem solid darkblue; } .term blockquote p:first-child::before { content: "Term: "; font-weight: bold; color:#2161c1; } .caution blockquote{ background:#FFE2E2; border-left:.35rem solid red; } .caution blockquote p:first-child::before { content: "Caution: "; font-weight: bold; color:rgb(255, 89, 89); } .review blockquote{ background:#FFF8E1; border-left:.35rem solid gold; } .review blockquote p:first-child::before { content: "Review: "; font-weight: bold; color:rgb(166, 144, 19);; } div.learning { background-color: darkblue; padding-top: .4rem; font-family: "Taviraj", Georgia, serif; font-size: 1.5rem; border-radius: 4px; } div.learning p:first-child{ color:lightblue; font-weight: bold; text-align: center; margin-bottom: .5rem; } .learning blockquote{ font-size: 1rem; margin-top:0; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;; } .objectives blockquote{ background:#E3EDF7; border-left:.35rem solid darkblue; border-right:.35rem solid darkblue; border-bottom:.35rem solid darkblue; border-radius:4px; } .objectives blockquote p:first-child::before { content: "After completing this lesson, the successful student will be able to"; font-weight: bold; color:darkblue; } .objectives blockquote p:first-child { font-weight: bold; color:darkblue; text-align: left; } .ai-conversation blockquote{ background:lightgrey; border:1px solid #bbb; border-radius: 5px; } div.ai-prompt{ background:white; border:1px solid grey; border-radius: 10px; padding:10px 20px 10px 20px; box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3); margin: 0 1rem 1rem 1rem; display: flex; align-items: center; justify-content: space-between; } span.ai-prompt-x{ font-size: 1.8em; } blockquote p:last-child{ margin-bottom:0; } hr{ height:1px; border:0; background:var(--border); margin:2.75rem 0; } ul, ol{ padding-left:1.45rem; margin:0 0 1.25rem; } li{ margin:.45rem 0; } code{ font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size:.92em; color:#0f766e; background:#ecfdf5; border:1px solid #bbf7d0; border-radius:.35rem; padding:.08rem .32rem; } pre code, .sourceCode code{ color:inherit; background:transparent; border:0; border-radius:0; padding:0; font-size:inherit; } pre, pre.javascript-code, pre.javascript-example, pre.spreadsheet, div.sourceCode pre{ margin:1rem 0; padding:.75rem .85rem; overflow:auto; background:#0f172a; color:#dbeafe; border:1px solid rgba(148, 163, 184, .28); border-radius:var(--radius-md); box-shadow:var(--shadow-md); font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size:.88rem; line-height:1.38; tab-size:2; white-space:pre; } div.sourceCode{ margin:1rem 0; } div.sourceCode pre{ margin:0; } .sourceCode .kw, .sourceCode .cf{ color:#93c5fd; } .sourceCode .fu, .sourceCode .at{ color:#67e8f9; } .sourceCode .st{ color:#86efac; } .sourceCode .dv{ color:#fbbf24; } .sourceCode .co{ color:#94a3b8; font-style:italic; } div.table table{ display:block; width:max-content; max-width:100%; border-collapse:separate; border-spacing:0; margin:1.5rem 0 2rem; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); background:var(--surface); } div.table th, div.table td{ padding:.72rem .85rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; } div.table th{ font-size:.86rem; font-weight:700; color:var(--heading); background:var(--surface-soft); } div.table tr.blog:last-child td{ border-bottom:0; } div.table tr:nth-child(even) td{ background:#f8fafc; } .monaco { width: 100%; margin: 1.5rem 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(148, 163, 184, 0.22); } .monaco-bar { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 8px 10px; background: linear-gradient(180deg, #1f2937, #111827); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .monaco-bar-label { flex: 1; font-family: "Roboto", sans-serif; font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 0.5px; text-transform: uppercase; padding-left: 4px; } .monaco-tool { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: #8b949e; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .monaco-tool:hover { background: rgba(255, 255, 255, 0.1); color: #e6edf3; } .monaco-tool:active { background: rgba(255, 255, 255, 0.06); transform: scale(0.92); } .monaco-tool[data-action="run"]:hover { background: rgba(63, 185, 80, 0.18); color: #3fb950; } .editor-holder { background-color: #1e1e1e; padding: 8px 0; } .editor { margin: 0; padding: 0; } .console { background: #161b22; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 8px 0 6px; position: relative; min-height: 36px; font-family: 'Consolas', 'Cascadia Code', 'Courier New', monospace; font-size: 13px; } .console-line { color: #c9d1d9; padding: 2px 40px 2px 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } .console-line:first-of-type { margin-top: 2px; } .console-line.error { color: #f85149; background: rgba(248, 81, 73, 0.06); } span.exitButton { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; color: #6e7681; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } span.exitButton:hover { background: rgba(255, 255, 255, 0.1); color: #c9d1d9; } span.exitButton .material-symbols-outlined { font-size: 15px; } pre.code { color: #a8ff78; background: #0d1117; padding: 1rem 1.15rem; margin: 1.35rem 0; font-size: 14px; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.07); overflow-x: auto; } @media (max-width: 700px) { body { font-size: calc(.98rem * var(--font-zoom)); } #msg-galley { left: 0; right: 0; max-width: none; min-width: 0; padding: .75rem; } #menu { max-width: 92vw; } .entry-header { padding: .25rem .4rem; } div.post-body { padding-left: 1rem; padding-right: 1rem; } .nav { bottom: .75rem; } #prior-button { left: .75rem; } #next-button { right: .75rem; } }