/* ============================================================ NBL 425/625 — Methods in Human Neuroimaging Shared Tufte-style sheet for the course index, the fourteen week pages, and the demos hub. The base rules below are the week-page and demos-hub styling, which were byte-identical across all fifteen of those pages. The course index differs only in heading and subtitle scale; those four differences live in the .page-index block near the bottom, and that page carries class="page-index" on . The individual demo pages under demos/ use a separate design system (CSS custom properties, dark mode, sans-serif) and deliberately do not load this file. ============================================================ */ @font-face { font-family: 'et-book'; src: url('https://edwardtufte.github.io/tufte-css/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'et-book'; src: url('https://edwardtufte.github.io/tufte-css/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'et-book'; src: url('https://edwardtufte.github.io/tufte-css/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff') format('woff'); font-weight: bold; font-style: normal; } /* ---------- Base typography and layout ---------- */ body { background-color: #fffff8; color: #111; font-family: 'et-book', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 1.4rem; line-height: 2; margin: 0; padding: 0; counter-reset: sidenote-counter; } article { padding: 5rem 15% 5rem 10%; max-width: 1400px; width: 55%; } h1 { font-weight: 400; margin-top: 3rem; margin-bottom: 1.5rem; font-size: 2.8rem; line-height: 1.1; } h2 { font-style: italic; font-weight: 400; margin-top: 2.5rem; margin-bottom: 0.8rem; font-size: 2rem; line-height: 1.2; } p { margin-top: 1.4rem; margin-bottom: 1.4rem; padding-right: 0; vertical-align: baseline; } .subtitle { font-style: italic; font-size: 1.6rem; display: block; margin-top: 0.5rem; margin-bottom: 2rem; color: #444; } a { color: #111; text-decoration: underline; text-decoration-color: #ccc; background: none; text-shadow: none; } a:hover { text-decoration-color: #111; } /* ---------- Sidenotes and margin notes (course index) ---------- */ .sidenote, .marginnote { float: right; clear: right; margin-right: -60%; width: 50%; margin-top: 0; margin-bottom: 0; font-size: 1.1rem; line-height: 1.3; vertical-align: baseline; position: relative; } .sidenote-number { counter-increment: sidenote-counter; } .sidenote-number:after, .sidenote:before { position: relative; vertical-align: baseline; } .sidenote-number:after { content: counter(sidenote-counter); font-size: 1rem; top: -0.5rem; left: 0.1rem; } .sidenote:before { content: counter(sidenote-counter) " "; font-size: 1rem; top: -0.5rem; } /* ---------- Course outline list (course index) ---------- */ .week-list { list-style: none; padding-left: 0; margin-top: 3rem; } .week-entry { margin-bottom: 2rem; } .week-entry-title { font-size: 1.6rem; margin-bottom: 0.2rem; margin-top: 0; } .week-entry-title a { text-decoration: none; } .week-entry-title a:hover { text-decoration: underline; text-decoration-color: #ccc; } .week-meta { font-size: 1.1rem; font-style: italic; color: #555; display: block; margin-bottom: 0.5rem; } .week-description { margin-top: 0; } /* ---------- Demo lists (week pages and demos hub) ---------- */ .demo-list { list-style: none; padding-left: 0; margin-top: 2rem; } .demo-item { margin-bottom: 2.2rem; padding-left: 1.2rem; border-left: 2px solid #ddd; transition: border-left-color 0.2s; } .demo-item:hover { border-left-color: #111; } .demo-title { font-size: 1.5rem; margin-top: 0; margin-bottom: 0.3rem; font-weight: 600; } .demo-title a { text-decoration: none; border-bottom: 1px solid #bbb; } .demo-title a:hover { border-bottom: 2px solid #111; } .demo-desc { margin-top: 0.4rem; margin-bottom: 0.5rem; color: #222; } .demo-meta { font-size: 1.1rem; font-style: italic; color: #666; display: block; } /* ---------- Previous / next footer (week pages) ---------- */ .nav-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid #ddd; display: flex; justify-content: space-between; font-size: 1.2rem; } /* ---------- Course index: larger title scale ---------- */ .page-index h1 { margin-top: 4rem; font-size: 3.2rem; line-height: 1; } .page-index h2 { margin-top: 2.1rem; margin-bottom: 0; font-size: 2.2rem; line-height: 1; } .page-index .subtitle { font-size: 1.8rem; margin-top: 1rem; color: #333; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { article { width: 80%; padding-right: 10%; } .sidenote, .marginnote { float: none; clear: both; margin: 1rem 0 1rem 5%; width: 95%; display: block; } } @media (max-width: 768px) { body { font-size: 1.2rem; } article { width: 85%; padding: 2rem 5%; } h1 { font-size: 2.2rem; } .page-index h1 { font-size: 2.5rem; } .nav-footer { flex-direction: column; gap: 1rem; } } /* ============================================================ Interactive index (interactive.html) Components used only by that page. Kept here rather than in a page-level