` is a bypass mechanism and a screen-reader user can jump to it directly. This exists because that argument covers exactly one of the two people it needs to. A SIGHTED KEYBOARD USER HAS NO LANDMARK NAVIGATION. They have Tab, and without this they spend it on every item in the navbar, on every page, all day. The landmark answers the success criterion; the link answers the problem the criterion is about. VISIBLE ON FOCUS RATHER THAN PERMANENTLY HIDDEN. `display: none` and `visibility: hidden` both remove an element from the tab order, which would make this a skip link nobody can reach -- the classic way to ship one that does nothing. Moving it off-screen with a transform keeps it focusable and keeps it in the accessibility tree. The transition is covered by the blanket `prefers-reduced-motion` block in animations.css, which zeroes `transition-duration` globally -- so somebody who has asked for reduced motion gets the link appearing instantly rather than sliding, with nothing extra written here. White on navy is 15.39:1, and it takes the same focus ring as everything else -- whose light inner ring is what shows against its own navy background. ------------------------------------------------------------ */ .skip-link { position: absolute; top: 0; left: 0; z-index: 1000; padding: 0.7rem 1.25rem; background: var(--color-chrome); color: var(--color-on-chrome); font-family: var(--font-sans); font-weight: 700; text-decoration: none; border-bottom-right-radius: var(--radius); transform: translateY(-130%); transition: transform 0.15s ease-in-out; } .skip-link:focus { transform: translateY(0); } .skip-link:hover { color: var(--color-on-chrome); text-decoration: none; } /* `

` takes focus when the skip link is followed, which needs `tabindex="-1"` in the markup -- without it the browser scrolls the document but leaves focus where it was, so the next Tab goes back into the navbar and the link appears to do nothing. Being focusable that way must not then draw a ring around the entire page, which is what the generic rule above would otherwise do to it. */ main:focus { outline: none; } h1, h2, h3 { color: var(--color-heading); font-family: var(--font-serif); } .rename-link { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); vertical-align: middle; margin-left: 0.4rem; } .rename-link:hover { color: var(--color-link-hover); } .page-nav { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.1rem; } .page-nav .back-link { margin-bottom: 0; } .back-link { display: inline-block; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: 0.75rem; } .back-link:hover { color: var(--color-link-hover); } /* ---------- Nav bar ---------- */ .navbar { background: var(--color-chrome); color: var(--color-on-chrome); padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-chrome); border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--brand-gold-deep), var(--brand-gold), var(--brand-gold-deep)) 1; } /* THE BRAND IS THE LOCKUP IMAGE NOW -- see the note in base.html. The type rules below are kept rather than deleted: they are what the wordmark looked like as live text, they still describe the treatment baked into the image (serif, white, with the second half gold), and anything that ever renders `.brand` as text again -- a print sheet, an email template, a fallback -- should look like the image rather than like default body copy. `inline-flex` so the image sits on the bar's center line rather than on a text baseline, which is what left a few pixels of gap under it. */ .navbar .brand { display: inline-flex; align-items: center; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; color: var(--color-on-chrome); letter-spacing: 0.02em; } .navbar .brand span { color: var(--color-accent-on-chrome); } /* 40px, ARRIVED AT BY LOOKING RATHER THAN BY ARITHMETIC, and the difference between the two is worth recording. Matching ink height said 36px: the wordmark occupies 0.634 of the asset, so 36px renders ~22.8px of ink against the 21.6px font-size the live text had. Rendered side by side that was wrong -- the old text was bold with letter-spacing, so equal ink height does not read as equal size. The comparison the eye actually makes is WIDTH, and there the wordmark went from 118px of text to ~78px inside a 36px lockup: a third narrower. 40px puts it at ~86px and reads as a brand again rather than as another nav item. It is not a full restoration -- matching 118px would need a ~54px lockup and an ~84px bar, which is a fifth taller than this navbar has ever been, on every page. 40px is the point where the wordmark holds its own and the bar moves 63px -> 70px. The marketing site renders this same asset at 52px, in a header that is 69px to begin with. Same image, different bar, so a different height is the thing that keeps them consistent rather than a departure from it. `height` with `width: auto` rather than both: the intrinsic asset is 1237x429, and fixing one axis keeps it from being squashed if the asset is ever re-exported at another size. No media query -- at 40px the lockup is 115px wide, still narrower than the 118px of text it replaced, so the bar wraps no sooner than it did before. */ .navbar .brand-logo { display: block; height: 40px; width: auto; flex: none; } /* Wraps rather than overflowing. A staff account carries enough nav entries to exceed a narrow viewport -- it did before the Units menu was added and more so after -- and `nowrap` turned that into a horizontally scrolling page rather than a second row. The gap tightens as space runs out so the wrap happens later. */ .navbar-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem clamp(0.6rem, 1.6vw, 1.5rem); min-width: 0; } .navbar-links a { color: var(--color-on-chrome-muted); font-weight: 500; } .navbar-links a:hover { color: var(--color-accent-on-chrome); text-decoration: none; } .navbar-user { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-accent-on-chrome); font-weight: 600; } a.navbar-user:hover { color: var(--color-on-chrome); text-decoration: none; } .user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--color-surface); /* LITERAL WHITE, AND IT STAYS LITERAL IN ALL THREE THEMES. This rim only ever appears on the navbar, and --color-chrome is the brand navy in Standard, Light and Dark alike -- so a translucent white edge is the right answer in every one of them. Tokenizing it would be a variable whose three values were identical. The .avatar-current rule below overrides it with --color-border for the one place the avatar is shown on a light page instead. */ border: 1px solid rgba(255, 255, 255, 0.35); } .user-avatar--placeholder { border-color: rgba(255, 255, 255, 0.2); } .avatar-current { display: flex; align-items: center; gap: 1rem; padding: 1rem 0 1.25rem; } .avatar-current .user-avatar { width: 56px; height: 56px; border-color: var(--color-border); } .avatar-clear-form { margin-top: 1.5rem; } .navbar-role { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-on-accent); background: var(--color-accent-fill); border-radius: 3px; padding: 0.1rem 0.35rem; vertical-align: middle; } .logout-form { display: inline; margin: 0; } .logout-form button { background: none; border: none; color: var(--color-on-chrome-muted); font: inherit; font-weight: 500; cursor: pointer; padding: 0; } .logout-form button:hover { color: var(--color-accent-on-chrome); text-decoration: underline; } /* ---------- Layout ---------- */ /* THE PAGE-TURN ANIMATION MUST NOT BE ABLE TO SCROLL THE DOCUMENT SIDEWAYS. `main.container` animates in with `perspective(1400px) rotateY(-5deg) translateX(-12px)` (animations.css). A transform does not change layout, but it DOES contribute to the scrollable overflow area -- so while that 280ms animation runs, the 3-D projection of the content area reaches past the right edge of the viewport and the document grows a horizontal scrollbar that then vanishes. MEASURED AT 768px, ON THREE PAGES: 22px of overflow, and `main.container` was the only element in the document wider than the viewport. Setting `animation: none` on it took the overflow to 0, which is what pins the cause to the animation rather than to any layout rule. Earlier work reported this three times as a static layout bug; it never was one. THE ROTATION IS THE CULPRIT, NOT THE 12px SHIFT -- which is worth writing down, because the shift is the part that looks guilty. Dropping the `translateX` alone makes it WORSE, 22px to 36px: the shift was moving the projected box leftward, and overflow off the left edge of an LTR document is not scrollable, so it was hiding part of the damage. Only the `rotateY` widens the box. BOTH SELECTORS ARE LOAD-BEARING. Measured, all four ways: `html` alone leaves 22px, `body` alone leaves 22px, and only the two together reach 0. This is the overflow-propagation rule and it is genuinely counter-intuitive. The root element hands its overflow to the viewport and is left `visible` itself; if the root is `visible`, the BODY's value is taken and propagated instead, leaving the body `visible` too -- so setting either one on its own just moves a value onto the viewport and leaves nothing in the document actually clipping. Setting `html` is what stops the body being the propagation source, which is what lets the body's own declaration survive and clip the transformed `main`. Deleting either line silently restores the bug, so neither is redundant. `clip` RATHER THAN `hidden`: both measured 0, but `hidden` makes a scroll container, which interferes with scroll anchoring and with any `position: sticky` added later. `clip` clips without establishing a scrollport. A browser too old to know `clip` ignores the declaration and gets today's brief scrollbar back -- a graceful way to lose, rather than the side effects `hidden` would hand it. Only the X axis. Vertical scrolling was checked explicitly and is untouched: on a page with 65px of scrollable height, it still scrolls the full 65 with this rule in place. This does not paper over genuine overflow. Wide content already carries its own scroll container -- see the `table` rule -- so nothing in this application relies on the document itself scrolling sideways. */ html, body { overflow-x: clip; } .container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .page-header { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; } .page-header h1 { margin: 0 0 0.25rem; } .page-header p { margin: 0; color: var(--color-text-muted); } /* WRAPS. This is the single highest-impact responsive rule in the file: 69 templates put their action buttons here, and without wrapping a page with four or five of them was 670px wider than a 400px viewport -- the heading and the buttons both pushed off-screen. Measured on course_detail, which had the worst of it. */ .page-header-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; } section + section { margin-top: 2.5rem; } h2 { position: relative; padding-bottom: 0.6rem; margin-bottom: 1.25rem; } h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 6px; background-image: linear-gradient(var(--color-accent-line), var(--color-accent-line)), linear-gradient(var(--color-accent-line), var(--color-accent-line)); background-size: 100% 1px, 100% 1px; background-position: top, bottom; background-repeat: no-repeat; } /* ---------- Cards / tile grid ---------- */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; } /* Cards in a row stretch to the tallest, and the tallest is decided by its own content -- nothing here sets a fixed height. Actions go to the bottom so the button rows line up across cards of differing text length. */ .tile-grid > .card { display: flex; flex-direction: column; } .tile-grid > .card .card-actions { margin-top: auto; } .card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-secondary-line); border-radius: var(--radius); box-shadow: var(--shadow), var(--glow-inset); padding: 1.25rem; transition: box-shadow 0.15s ease; } .card:hover { box-shadow: var(--shadow-hover), var(--glow-inset-hover); } .card::before, .card::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid var(--color-accent-line); opacity: 0.5; pointer-events: none; } .card::before { top: 7px; left: 7px; border-right: none; border-bottom: none; } .card::after { bottom: 7px; right: 7px; border-left: none; border-top: none; } .card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; } .card .card-meta { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 0.75rem; } .card .card-meta + .card-meta { margin-top: -0.5rem; } .card .card-actions { display: flex; gap: 0.6rem 1rem; margin-top: 0.9rem; flex-wrap: wrap; } /* ---------- Drag-to-reorder ---------- */ [data-reorderable] .card[data-id] { cursor: grab; } [data-reorderable] .card[data-id]:active { cursor: grabbing; } .card.reorder-dragging { opacity: 0.45; } .card.reorder-drag-over-before, .card.reorder-drag-over-after, .card.reorder-drag-over-top, .card.reorder-drag-over-bottom { position: relative; } .card.reorder-drag-over-before::before, .card.reorder-drag-over-after::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--color-accent-line-strong); border-radius: 2px; box-shadow: 0 0 6px var(--color-accent-line-strong); } .card.reorder-drag-over-before::before { left: -0.625rem; } .card.reorder-drag-over-after::after { right: -0.625rem; } .card.reorder-drag-over-top::before, .card.reorder-drag-over-bottom::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: var(--color-accent-line-strong); border-radius: 2px; box-shadow: 0 0 6px var(--color-accent-line-strong); } .card.reorder-drag-over-top::before { top: -0.625rem; } .card.reorder-drag-over-bottom::after { bottom: -0.625rem; } /* ---------- Course dashboard grid (fixed-column 2D placement) ---------- */ .course-grid { display: grid; /* WAS `repeat(4, minmax(200px, 1fr))`, which is a hard floor of 4x200px plus gaps -- about 860px before the instructor dashboard, the landing page for every teaching account, started pushing tiles off-screen (measured 518px of overflow at 400px wide). `auto-fit` keeps four columns wherever four fit and drops to three, two and one as space runs out. The `min()` is what makes the last step work: a bare 200px floor still overflows a viewport narrower than 200px plus padding, and `min(200px, 100%)` lets the track shrink below its floor rather than overflow. Same idiom as the landing pages' stat grid. */ grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.25rem; } [data-course-reorder] .card[data-id] { cursor: grab; } [data-course-reorder] .card[data-id]:active { cursor: grabbing; } .grid-cell { /* A floor, not a ceiling: empty cells still read as drop targets, and a cell holding more content grows past this. */ min-height: 190px; border-radius: var(--radius); } /* min-height rather than height: the card fills its cell, but content longer than the cell makes the card -- and so the grid row -- taller, instead of being squeezed into a fixed box. */ .grid-cell .card { min-height: 100%; display: flex; flex-direction: column; } /* Pushed to the bottom so buttons line up across a row whose cards have different amounts of text above them. */ .grid-cell .card .card-actions { margin-top: auto; } /* ---------- Dashboard tile heading ---------- */ /* A wrapping row rather than a column, so the "edit" link stays beside the name; the code is forced onto its own line by flex-basis below. */ .card h3.tile-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin-bottom: 0.5rem; } .tile-heading { display: inline-flex; align-items: center; gap: 0.1rem; min-width: 0; } .tile-name { font-size: 1.05rem; line-height: 1.3; /* long names wrap onto as many lines as they need rather than overflowing */ overflow-wrap: anywhere; } .tile-code { /* full-width basis puts the code on its own line under the name */ flex-basis: 100%; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; color: var(--color-text-muted); } .grid-cell--empty { border: 1px dashed var(--color-border); } .grid-cell--drag-over { outline: 2px dashed var(--color-accent-line-strong); outline-offset: -2px; background: var(--tint-accent); } /* ---------- Course icons ---------- */ .course-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; vertical-align: middle; margin-right: 0.5rem; border: 1px solid var(--color-border); } .course-icon--placeholder { opacity: 0.85; } /* ---------- Icon picker (course form) ---------- */ .icon-picker-label { font-weight: 600; color: var(--color-heading); margin-bottom: 0.5rem; } .icon-picker-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } .icon-option { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius); cursor: pointer; } .icon-option img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; } .icon-option-placeholder { font-size: 0.75rem; color: var(--color-text-muted); } .icon-option--selected { border-color: var(--color-accent-line-strong); box-shadow: 0 0 0 2px rgba(var(--brand-gold-rgb), 0.35); } /* ---------- Question editor ---------- */ .question-preview { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); } .question-preview li { padding: 0.15rem 0; } .question-preview--correct { color: var(--color-secondary); font-weight: 600; } .formset-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .formset-row input[type="text"] { margin: 0; } .formset-inline-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--color-text-muted); } .formset-arrow { color: var(--color-text-muted); } .form-errors { list-style: none; padding: 0.75rem 1rem; margin: 0 0 1rem; background: var(--tint-danger); border: 1px solid var(--color-danger); border-radius: var(--radius); color: var(--color-danger); } .quiz-section { margin-top: 2rem; } /* ---------- Course days ---------- */ .course-day { border-left: 3px solid var(--color-border); padding-left: 1.1rem; margin-bottom: 2rem; } .course-day h2 { margin-bottom: 0.4rem; } .course-day h3 { font-size: 1rem; margin: 1.1rem 0 0.5rem; } .course-day-agenda { color: var(--color-text-muted); line-height: 1.6; } /* ---------- Notifications ---------- */ .notification-bell { position: relative; display: inline-block; font-size: 1.15rem; line-height: 1; color: var(--color-on-chrome); text-decoration: none; } .notification-bell:hover { color: var(--color-accent-on-chrome); text-decoration: none; } .notification-badge { position: absolute; top: -0.45rem; right: -0.6rem; min-width: 1.05rem; padding: 0 0.25rem; font-family: var(--font-sans); font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center; color: var(--color-on-accent); background: var(--color-accent-fill); border-radius: 999px; } .notification-list { margin: 1.25rem 0; } .notification { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1.1rem; margin-bottom: 0.75rem; } .notification--unread { border-left-color: var(--color-accent-line-strong); } .notification-body { flex: 1 1 320px; } .notification-message { margin: 0 0 0.2rem; } .notification--unread .notification-message { font-weight: 600; } .notification-actions { display: flex; align-items: center; gap: 0.5rem; } /* ---------- Flash messages ---------- */ .messages { list-style: none; padding: 0; margin: 0 0 1.25rem; } .message { padding: 0.75rem 1rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); margin-bottom: 0.5rem; } .message--error { border-color: var(--color-danger); background: var(--tint-danger); color: var(--color-danger); } .message--success { border-color: var(--color-secondary-line); background: var(--tint-secondary); color: var(--color-secondary); } .course-code { display: inline-block; font-family: var(--font-sans); font-size: 0.72em; font-weight: 700; letter-spacing: 0.05em; color: var(--color-heading); background: var(--tint-accent); border-radius: 3px; padding: 0.1em 0.4em; margin-right: 0.45em; vertical-align: middle; } /* ---------- Course runs & assignment timing ---------- */ .run-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .run-summary h2 { font-size: 0.95rem; margin: 0.75rem 0 0.4rem; } .run-summary h2:first-child { margin-top: 0; } .run-summary ul { margin: 0 0 0.5rem 1.2rem; font-size: 0.9rem; } .run-summary li { margin-bottom: 0.2rem; } .timing-picker ul { list-style: none; padding: 0; margin: 0 0 0.5rem; } .timing-picker li { margin-bottom: 0.25rem; } .timing-picker label { font-weight: 400; } .timing-option { padding-left: 1.4rem; } /* ---------- Syllabus ---------- */ .syllabus-editor { background: var(--color-input-bg); min-height: 320px; margin-bottom: 1rem; } .syllabus-editor .ql-editor { min-height: 280px; font-size: 0.98rem; } .syllabus-body { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem 2.25rem; max-width: 820px; line-height: 1.65; } .syllabus-body h1, .syllabus-body h2, .syllabus-body h3, .syllabus-body h4 { font-family: var(--font-serif); color: var(--color-heading); margin: 1.6rem 0 0.6rem; } .syllabus-body h1:first-child, .syllabus-body h2:first-child, .syllabus-body h3:first-child { margin-top: 0; } .syllabus-body p { margin: 0 0 1rem; } .syllabus-body ul, .syllabus-body ol { margin: 0 0 1rem 1.4rem; } .syllabus-body li { margin-bottom: 0.35rem; } .syllabus-body blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--color-accent-line); color: var(--color-text-muted); } .syllabus-body pre, .syllabus-body code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.9rem; } .syllabus-body hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.5rem 0; } /* ---------- Step-by-step quiz ---------- */ .quiz-progress { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 1rem; } .reveal { border-left: 3px solid var(--color-border); padding: 0.25rem 0 0.25rem 1.1rem; margin-bottom: 1.5rem; } .reveal--correct { border-left-color: var(--color-secondary-line); } .reveal--incorrect { border-left-color: var(--color-danger); } .reveal-verdict { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; margin: 0.4rem 0 0.75rem; color: var(--color-heading); } .reveal--correct .reveal-verdict { color: var(--color-secondary); } .reveal--incorrect .reveal-verdict { color: var(--color-danger); } .reveal-detail { margin: 0; } .reveal-detail dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 0.6rem; } .reveal-detail dd { margin: 0.15rem 0 0; } /* ---------- Survey report ---------- */ .response-entry { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.75rem 1rem; margin-bottom: 0.6rem; } .response-entry summary { cursor: pointer; font-weight: 600; color: var(--color-heading); } .response-entry summary .card-meta { display: inline; margin-left: 0.5rem; font-weight: 400; } .response-entry table { margin-top: 0.75rem; } /* ---------- Grading & feedback ---------- */ .grade-form-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .grade-form textarea { width: 100%; min-width: 240px; margin: 0; font-size: 0.88rem; } .grade-result { border-left: 3px solid var(--color-accent-line); padding-left: 1rem; margin-bottom: 1.5rem; } .feedback-block { margin-top: 0.75rem; } .feedback-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .feedback-text { margin: 0.25rem 0 0; line-height: 1.6; white-space: normal; } /* ---------- Online course rendering ---------- */ .learn-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 2rem; align-items: start; } @media (max-width: 48rem) { .learn-layout { grid-template-columns: 1fr; } } .learn-nav-module h2 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.4rem; } .learn-nav-module ul { list-style: none; margin: 0 0 1.25rem; padding: 0; } .learn-nav-module li { margin-bottom: 0.3rem; } .learn-nav-module a.is-current { font-weight: 700; border-left: 3px solid var(--color-accent-line-strong); padding-left: 0.5rem; } .learn-content .block { margin-bottom: 1.5rem; } /* The reading measure, kept while the page around it got wider. course_learn.html opts into .container--wide, which takes the content column from roughly 780px to roughly 1260px. That width belongs to video, tables, embedded frames and the module bar; body text at 1260px is about 150 characters a line, which is worse than what it replaced. Same rule and same number as .unit-block-text on the landing pages, which are the pages this convention came from -- they opt into the wide container and cap their own prose at 70ch. Only .block--text is capped: every other block type is something that benefits from the room. */ .learn-content .block--text { max-width: 70ch; } .block--image img { max-width: 100%; height: auto; } .block--image figcaption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.35rem; } /* ---------- Transcript mode ---------- */ /* Purely presentational. Nothing here hides media: what transcript mode does is decline to *render* the tags at all, in the template, because a hidden costs the same download as a visible one. These rules only mark the stand-in text as a stand-in, so a learner can tell the difference between "this is the whole block" and "something is missing". */ .transcript-toggle { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 0.35rem; font-size: 0.9rem; } .transcript-toggle-state { flex: 1 1 auto; } .transcript-toggle button { width: auto; } .block--transcript { border-left: 3px solid var(--color-border); padding-left: 0.75rem; } .transcript-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.25rem; } /* The alt text is the content here, not a footnote to it, so it is set as body copy rather than in the muted caption style. */ .transcript-alt { margin: 0 0 0.35rem; } .block--transcript figcaption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.35rem; } /* The inline stand-in for a popup: distinguished from the surrounding page the way the modal panel would have been, since it is still a digression rather than part of the main flow. */ .block--popup-inline { border: 1px solid var(--color-border); border-radius: 0.35rem; padding: 0.75rem 1rem; } .block--popup-inline h4 { margin-top: 0; } /* ---------- Reviewer assignment ---------- */ .reviewer-form { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0.5rem 0; } .reviewer-form label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; } .reviewer-form select { margin: 0; font-size: 0.85rem; } /* Same shape as the reviewer picker -- they sit together on every module card, and two controls that do the same kind of thing should not look like two different kinds of thing. */ .status-form { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0.5rem 0; } .status-form label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; } .status-form select { margin: 0; font-size: 0.85rem; } /* ---------- Inline image metadata ---------- */ .inline-meta { display: grid; gap: 0.25rem; margin: 0.4rem 0 0.6rem; } .inline-meta label { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; } .inline-meta input { margin: 0; font-size: 0.88rem; } .draft-actions { display: inline-flex; gap: 0.4rem; align-items: center; margin-left: 0.5rem; } .draft-actions form { display: inline; margin: 0; } /* ---------- Page table of contents ---------- */ .page-toc { border-left: 3px solid var(--color-accent-line); padding: 0.6rem 0 0.6rem 1rem; margin-bottom: 1.75rem; } .page-toc h3 { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 0.4rem; } .page-toc ol { margin: 0; padding-left: 1.1rem; } .page-toc li { margin-bottom: 0.25rem; } .toc-kind { font-size: 0.7rem; color: var(--color-text-muted); margin-left: 0.4rem; } /* So an anchored jump does not tuck the block under the page heading. */ .block-anchor { scroll-margin-top: 1.5rem; } /* ---------- Survey result charts ---------- The SVG itself carries its own geometry and colors (see core/surveycharts.py, which reads the custom properties defined at :root, so the bars follow the theme like everything else). These rules only place the picture on the page. `max-width` rather than a fixed width: the chart is drawn on a 640-unit viewBox and scales to whatever column it lands in, so it stays readable in the narrow panel on the report and in the wider one on the printable page without a second set of geometry. */ .survey-chart-frame { margin: 0.75rem 0 1rem; max-width: 40rem; overflow-x: auto; } .survey-chart { display: block; height: auto; max-width: 100%; } /* Printed, not dropped. A chart is the one part of this report that a table cannot restate compactly, and an SVG prints at the printer's resolution rather than the screen's -- which is the whole reason the charts are vector rather than generated images. */ @media print { .survey-chart-frame { break-inside: avoid; overflow: visible; } } /* ---------- Printable course ---------- */ .print-controls { margin-bottom: 2rem; } .print-header { margin-bottom: 2rem; } .print-module { margin-bottom: 2.5rem; } .print-page { margin-bottom: 1.75rem; } .print-figure img { max-width: 100%; height: auto; } .print-note { border-left: 2px solid var(--color-text-muted); padding-left: 0.75rem; color: var(--color-text-muted); } @media print { /* Everything that is screen furniture, and nothing that is content. */ .navbar, .page-nav, .print-controls, .sketch-defs, [data-ambient-gif] { display: none !important; } body { background: #fff; color: #000; } .container { max-width: none; margin: 0; padding: 0; } .print-module { page-break-inside: auto; } .print-page { page-break-inside: avoid; } h2, h3 { page-break-after: avoid; } .print-figure, .print-note { page-break-inside: avoid; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; } } /* ---------- Authoring checks and bulk actions ---------- */ .bulk-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; } .bulk-select { display: block; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.4rem; cursor: pointer; } .check-group { margin-bottom: 1.75rem; } .check-group h3 { margin-bottom: 0.4rem; } .check-list { list-style: none; margin: 0; padding: 0; } .check-item { border-left: 3px solid var(--color-danger-strong); padding: 0.5rem 0 0.5rem 0.9rem; margin-bottom: 0.8rem; } /* Unverified is information, not a fault, so it does not use the alarm color. */ .check-item--unverified { border-left-color: var(--color-text-muted); } /* ---------- Course search, bookmarks, reading time ---------- */ .learn-search { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; } .learn-search input { margin: 0; min-width: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-minutes { display: block; font-size: 0.68rem; color: var(--color-text-muted); } .search-results { list-style: none; margin: 1rem 0 0; padding: 0; } .search-result { border-left: 3px solid var(--color-accent-line); padding: 0.5rem 0 0.5rem 0.9rem; margin-bottom: 1.1rem; } .search-snippet { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted); } .bookmark-form { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } .bookmark-form textarea { width: 100%; max-width: 34rem; } .bookmark-list { list-style: none; margin: 0; padding: 0; } .bookmark { border-left: 3px solid var(--color-accent-line); padding: 0.6rem 0 0.6rem 0.9rem; margin-bottom: 1.1rem; } .bookmark-meta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .bookmark-title { display: inline-block; font-weight: 700; margin: 0.2rem 0; } .bookmark-note { margin: 0.3rem 0 0; line-height: 1.6; } /* ---------- Embedded external pages ---------- */ .embed-frame { position: relative; /* 16:9, the shape most video and slide embeds expect */ padding-top: 56.25%; background: var(--color-surface-alt); border-radius: 0.35rem; overflow: hidden; } .embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .embed-title { font-weight: 700; margin-bottom: 0.4rem; } .embed-fallback, .embed-caption { font-size: 0.85rem; color: var(--color-text-muted); margin: 0.5rem 0 0; } /* ---------- Module review comments ---------- */ .comment-list { list-style: none; margin: 0.5rem 0 0; padding: 0; max-width: 42rem; } .comment { border-left: 3px solid var(--color-accent-line); padding: 0.6rem 0 0.6rem 0.9rem; margin-bottom: 1rem; } /* Resolved comments stay readable but recede, so open ones lead the eye. */ .comment--resolved { border-left-color: var(--color-text-muted); opacity: 0.68; } .comment-meta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .comment-body { margin: 0.3rem 0 0.5rem; line-height: 1.6; } .comment-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .comment-actions form { margin: 0; } /* ---------- Inline knowledge checks ---------- */ .block--check { border-left: 3px solid var(--color-accent-line); padding: 1rem 1.1rem; background: var(--color-surface-alt); border-radius: 0 0.35rem 0.35rem 0; } .check-question { font-weight: 700; margin: 0 0 0.75rem; } .check-choice { display: block; margin-bottom: 0.4rem; cursor: pointer; } .check-choice--wrong { color: var(--color-danger-strong); } .check-choice--right { font-weight: 700; } .check-verdict { font-weight: 700; margin: 0 0 0.6rem; } .check-verdict--right { color: var(--color-accent-ink); } .check-verdict--wrong { color: var(--color-danger-strong); } .check-preview { list-style: none; margin: 0 0 0.5rem; padding: 0; font-size: 0.92rem; } /* ---------- Module branching map ---------- */ .map-canvas { overflow-x: auto; margin: 1rem 0 2rem; padding-bottom: 0.5rem; } .map-node-box { fill: var(--color-surface); stroke: var(--color-accent-line); stroke-width: 1.5; } .map-node-link { cursor: pointer; } .map-node-link:hover .map-node-box { fill: var(--color-surface-alt); stroke-width: 2.5; } .map-node--orphan .map-node-box { stroke-dasharray: 5 4; } .map-node-order { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-text-muted); } .map-node-title { font-size: 0.95rem; font-weight: 700; fill: var(--color-text); } .map-node-meta { font-size: 0.7rem; fill: var(--color-text-muted); } .map-edge { fill: none; stroke: var(--color-accent-line); stroke-width: 1.6; } /* Backward jumps read as exceptions, so they are drawn as such. */ .map-edge--backward { stroke-dasharray: 6 4; opacity: 0.75; } .map-edge--self { stroke-dasharray: 3 3; } .map-arrowhead { fill: var(--color-accent-line); } .map-list { margin: 0.5rem 0 0 1.1rem; padding: 0; } .map-list li { margin-bottom: 0.5rem; } .map-list .card-meta { display: block; } /* ---------- Student-view preview bar ---------- */ .preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 0.6rem 1rem; border-radius: 0.35rem; background: var(--color-accent-fill); color: var(--color-on-accent-inverse); font-size: 0.9rem; } .preview-bar form { margin: 0; } /* THE BUTTON'S WASH STAYS LITERAL WHITE because it sits on gold, and gold is --color-accent-fill #c9a227 in all three themes. Its LABEL does not stay literal: white on gold is 2.42:1 and fails 1.4.3, which is what --color-on-accent-inverse exists to record. Standard keeps the failing white by instruction; Light and Dark both set that token to the dark ink, where the label clears 7.13:1 and the white wash beneath it only helps. */ .preview-bar button { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.5); color: var(--color-on-accent-inverse); width: auto; } /* ---------- Progress through authored content ---------- */ /* A course's student site and Important Links. Deliberately plain: the external-link arrow already distinguishes these from internal navigation, so a second visual treatment on top of it would be saying the same thing twice. */ .course-links { margin-bottom: 1.5rem; } .course-links-site { margin: 0 0 0.5rem; } .course-links-list { margin: 0; padding-left: 1.2rem; /* Two columns where there is room, one where there is not -- a long list of short labels in a single column wastes most of a wide screen. */ columns: 2 16rem; column-gap: 1.5rem; } .course-links-list li { /* Keeps a label and its arrow from being split across the column break. */ break-inside: avoid; margin-bottom: 0.25rem; } /* --------------------------------------------------------------------------- External-link indicator --------------------------------------------------------------------------- Added by external_links.js to any link whose origin differs from this one. The glyph is an HTML entity like every other small icon here; the words beside it live in .sr-only and are what a screen reader actually gets. `inline-block` with no wrapping: the arrow must not be left stranded on a line of its own when the link text wraps, which is what a bare inline character would do at a narrow width. --------------------------------------------------------------------------- */ .external-link-mark { display: inline-block; margin-left: 0.15em; white-space: nowrap; } .external-link-glyph { font-size: 0.8em; /* Lifted slightly: at 0.8em the arrow sits low against the baseline of the text it annotates. */ vertical-align: 0.08em; /* Inherits the link's color rather than being given its own, so the mark reads as part of the link in every context this appears in -- body text, a button, a nav item, an inverted panel. A fixed color would be wrong in at least one of those. */ color: inherit; /* Slightly recessive, so it annotates the link without competing with it. Not lower than this: it still has to be visible against the link color. */ opacity: 0.75; } /* Somebody who has asked the OS for maximum contrast has already said they do not want subtle. */ @media (prefers-contrast: more) { .external-link-glyph { opacity: 1; } } /* An arrow saying "this goes somewhere else" means nothing on paper, where the URL is what matters and the reader cannot follow anything. */ @media print { .external-link-mark { display: none; } } /* --------------------------------------------------------------------------- Optional page backdrop --------------------------------------------------------------------------- THE SCRIM IS THE SAFETY NET, AND IT IS NOT OPTIONAL. An author picks a backdrop from the media library; nothing in this project can look at that image and judge whether text will survive on top of it -- nothing measures its luminance (this project does not build on Pillow -- see core/media.py), and even if it did, a single average would say nothing about the corner the paragraph lands in. So legibility is not left to the author's eye. `::before` lays an opaque- enough wash of the page surface color over the whole image, and the content sits above it. Whatever the image -- black, white, a photograph, a busy diagram -- the effective backdrop behind the text is at least BACKDROP_SCRIM of the ordinary page color, so contrast cannot fall far below what plain content already has. 0.88 is deliberately high and the image is deliberately faint as a result. That trade is the whole point: a backdrop is decoration, the text is the course, and a decoration that costs legibility has taken more than it gave. `prefers-contrast: more` takes it to fully opaque -- somebody who has asked the operating system for maximum contrast has already answered the question of whether they want decoration behind their text. --------------------------------------------------------------------------- */ .learn-content--backdrop { position: relative; isolation: isolate; } .learn-content--backdrop::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--page-backdrop); background-size: cover; background-position: center; /* Fixed would detach the wash from the image while scrolling on iOS, which is the one place the scrim could slide off what it is protecting. */ background-attachment: scroll; border-radius: var(--radius); } .learn-content--backdrop::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--color-bg); opacity: 0.88; border-radius: var(--radius); } /* Padding so the wash extends past the text rather than stopping at it. */ .learn-content--backdrop { padding: clamp(0.75rem, 2vw, 1.5rem); } @media (prefers-contrast: more) { .learn-content--backdrop::after { opacity: 1; } } /* Printing a faded photograph behind body text wastes ink and helps nobody. */ @media print { .learn-content--backdrop::before, .learn-content--backdrop::after { display: none; } } /* The module bar: every module in authored order, state per module. WRAPS RATHER THAN SCROLLS. A course with twelve modules on a phone would otherwise need a horizontal swipe to see whether the last one is done, which is the one thing this bar exists to answer at a glance. `auto-fit` + `minmax` gives one row on a wide screen and as many as it needs on a narrow one, with no breakpoint to pick. */ .module-bar { margin-bottom: 0.9rem; } .module-bar-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .module-bar-step { min-width: 0; } /* NAVY, LIKE THE BANNER. These segments were a pale tint (#f2efe7) on a cream page (--color-bg: #f6f1e4) -- barely two percent apart in luminance, so the bar dissolved into the background and the one question it exists to answer was invisible. The banner's own navy is what a reader already recognizes as "this is the application talking", and white on it clears WCAG AAA. THE PALETTE VARIABLES, NOT THE HEXES THEY USED TO FALL BACK TO. Every color in the old rules named a custom property that does not exist at :root -- --color-surface-muted, --color-highlight, --color-success, --color-gold -- so each was silently rendering its hardcoded fallback. Those hexes were the drift this file's :root block exists to prevent. They are gone; what is left is the real palette. `#fff` stays literal because that is what .navbar and .brand already use for text on navy. */ .module-bar-step > a, .module-bar-step > span { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: var(--radius); /* The state is carried by a thick top edge as well as by fill, so the three states stay distinguishable without relying on color alone. The fill is now one navy for every state, so the edge does more of that work than it did -- which is why each state also carries its own glyph in .module-bar-mark. Color, edge, and shape: three channels, and the screen-reader text in .sr-only is a fourth. */ border-top: 4px solid var(--color-border); background: var(--color-fill-strong); color: var(--color-on-chrome); text-decoration: none; font-size: 0.8rem; line-height: 1.3; } /* Darker, not lighter. The old hover was a pale gold wash, which was legible under dark text and would put white text on cream. */ .module-bar-step > a:hover { background: var(--color-fill-strong-hover); } .module-bar-step > a[aria-current="step"] { outline: 2px solid var(--color-accent-line); outline-offset: 1px; } .module-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .module-bar-mark { flex-shrink: 0; font-weight: 700; } /* The fill no longer varies by state, so the top edge and the glyph carry it. Both state colors are chosen to sit on navy rather than on cream: the old tints were mixed against the page and would vanish here. */ .module-bar-step--complete > a, .module-bar-step--complete > span { border-top-color: var(--color-secondary-on-chrome); } .module-bar-step--complete .module-bar-mark { color: var(--color-secondary-on-chrome); } .module-bar-step--in_progress > a, .module-bar-step--in_progress > span { border-top-color: var(--color-accent-on-chrome); } .module-bar-step--in_progress .module-bar-mark { color: var(--color-accent-on-chrome); } /* not_started keeps the neutral default above -- deliberately quiet, so the bar reads as "how far along am I" rather than as a wall of warnings. */ /* THE COMPLETION BAR MEASURES THE SAME AS THE MODULE BAR ABOVE IT. * * This carried `max-width: 32rem` while `.module-bar-track` is a grid filling * its container, so on the learning page the two stacked bars ended at * different places -- the completion bar stopped less than half way across, * under a module bar spanning the full width. They summarize the same number * (`completion.percent` draws both), so measuring differently made the figure * read as being about something narrower than the bar above it. * * THE CAP IS NOW OPT-IN RATHER THAN THE DEFAULT. It was doing real work in one * place -- the student dashboard, where the bar appears alone inside a * per-course card with no module bar to match -- and none anywhere else. So * `--narrow` carries it there and the base rule fills its container, which is * what every other page wants. Inverting it this way also left the learning * page's markup untouched, so the tests already pinning that page's chrome * kept testing exactly what they did before. */ .progress-summary { margin-bottom: 1.5rem; } .progress-summary--narrow { max-width: 32rem; } /* The author's own review progress in the builder. * * Reuses `.module-bar` and `.progress-bar` above -- "how far through am I" * should look the same wherever it is asked. What it does NOT reuse is their * data: every figure comes from `BuilderPageVisit` through * core/builderprogress.py, and none of the student progress system is * involved. See that module for why the two are kept apart. * * The heading is what stops the resemblance being a lie. A bar shaped exactly * like the student one, on a page about a course, would otherwise read as the * students' progress. */ .builder-progress { margin-bottom: 1.5rem; padding: 0.9rem 1.1rem; border: 1px dashed var(--color-border); border-radius: var(--radius); } .builder-progress-heading { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--color-heading); } /* --------------------------------------------------------------------------- Course calendar --------------------------------------------------------------------------- Two visual languages on one page, because a run and a session answer different questions: a run is a bar spanning the dates a course is on, a session is a marker on one day. See core/coursecalendar.py. */ /* ONE TOOLBAR ROW, so the grid starts near the top of the page. Title, zooms and paging shared three stacked blocks between them and pushed the calendar below the fold on an ordinary screen. They wrap to their own rows only when there is genuinely no width for them. */ .calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; } .calendar-toolbar-title h1 { margin: 0; } .calendar-range { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; } .calendar-paging { display: flex; flex-wrap: wrap; gap: 0.35rem; } .calendar-window-note { margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--color-text-muted); } /* At an edge of the two-year window the control stays in place and stops being a link, rather than vanishing -- a row of buttons that changes width as you page is harder to use than one that grays out. */ .btn.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; } .calendar-zooms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; } .calendar-zoom { padding: 0.35rem 0.75rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); text-decoration: none; font-size: 0.85rem; } .calendar-zoom--current { background: var(--color-fill-strong); border-color: var(--color-fill-strong); color: var(--color-on-chrome); } .calendar-zoom:hover { text-decoration: none; } /* Below the grid now, and secondary to it: a key to what the cells contain rather than a queue in front of them. */ .calendar-runs-section { margin-top: 1.5rem; } .calendar-runs-section h2 { font-size: 1.05rem; margin-bottom: 0.5rem; } .calendar-runs { list-style: none; margin: 0 0 1.5rem; padding: 0; } .calendar-run { margin-bottom: 0.4rem; } /* Navy with a gold left edge, the same language `.schedule-button` uses for "this is a thing on this page, open it". */ .calendar-run-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.8rem; border-radius: var(--radius); border-left: 5px solid var(--color-accent-line); background: var(--color-fill-strong); color: var(--color-on-chrome); text-decoration: none; } .calendar-run-bar:hover { background: var(--color-fill-strong-hover); color: var(--color-on-chrome); } .calendar-run-code { font-weight: 700; } .calendar-run-name { flex: 1 1 12rem; min-width: 0; } .calendar-run-dates { font-size: 0.78rem; color: var(--color-accent-on-chrome); white-space: nowrap; } /* `auto-fit` with a min, so the grid is seven-ish columns on a wide screen and as few as it needs on a phone -- the same technique `.module-bar-track` uses rather than a breakpoint to maintain. */ /* THE DOMINANT ELEMENT ON THE PAGE, and sized to be. Seven fixed columns for a month or a week, so the grid reads as a calendar -- weekdays line up under each other from row to row, which `auto-fit` could not guarantee. Below 48rem it falls back to as many columns as fit, because seven columns on a phone is seven unreadable slivers. */ .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; } .calendar-grid--day { grid-template-columns: minmax(0, 1fr); } /* The weekday header. Same template and gap as the grid below it, in the same container, so the two line up without either knowing about the other. */ .calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; margin-bottom: 0.3rem; } .calendar-weekday { padding: 0.3rem 0.45rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-heading); border-bottom: 2px solid var(--color-accent-line); } @media (max-width: 48rem) { .calendar-grid { grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); } /* The grid stops being seven columns here, so a seven-day header would name the wrong ones. Each cell already carries its own date and month. */ .calendar-weekdays { display: none; } } /* Tall enough that the grid, not the chrome above it, is what fills the screen -- roughly six rows of a month at this height. */ .calendar-day { min-height: 7.5rem; padding: 0.45rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); } .calendar-day--weekend { background: var(--color-surface-alt); } /* Days from the months either side, padding a month out to whole weeks so the columns line up. Present so the grid reads as a calendar, dimmed so they are plainly not part of it, and never carrying sessions. */ .calendar-day--outside { opacity: 0.4; } .calendar-day--today { outline: 2px solid var(--color-accent-line-strong); outline-offset: -2px; } .calendar-day-number { font-weight: 700; font-size: 0.8rem; } .calendar-day-month { font-weight: 400; color: var(--color-text-muted); } /* MARKERS WRAP RATHER THAN TRUNCATE, and that is the actual fix for "a day with several courses on it". * * The CELL was never the problem: `min-height` is a floor and the grid's rows * are auto-sized, so a cell with twelve sessions already grew to 372px against * a 120px minimum with nothing clipped and nothing spilling -- measured, not * assumed. What WAS being cut off was each marker's own text, horizontally: * `white-space: nowrap` plus `text-overflow: ellipsis` meant a longer course * code became "COURSE-LONâ€¦" in a column roughly 250px wide. * * Since the cell grows anyway, that truncation bought nothing. Letting the * text wrap turns horizontal clipping into vertical growth the layout already * handles. `overflow-wrap: anywhere` so a single long unbroken code breaks * rather than pushing the column wide -- the same guard `.module-bar-name` * and `.schedule-button-text strong` already use. */ .calendar-marker { display: block; margin-top: 0.25rem; padding: 0.15rem 0.35rem; border-radius: 0.25rem; font-size: 0.72rem; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; } /* Two kinds of session, told apart by fill as well as by the word in the listing: a pinned day is something somebody scheduled, a recurring one is a weekly slot expanded from the course's run. */ .calendar-marker--pinned { background: var(--color-fill-strong); color: var(--color-on-chrome); } .calendar-marker--recurring { background: var(--color-surface); border: 1px dashed var(--color-border-strong); color: var(--color-heading); } /* "+N more" -- a native disclosure, the same element the nav dropdowns and unit_images.html already use. Closed by default, so a crowded day keeps its row near the natural height until somebody asks to see the rest. */ .calendar-more { margin-top: 0.25rem; } .calendar-more > summary { cursor: pointer; font-size: 0.72rem; font-weight: 700; color: var(--color-heading); padding: 0.1rem 0.35rem; border-radius: 0.25rem; list-style: none; } /* The default triangle is removed in both engines: the "+N" already says the control expands, and the marker at this size has no room for a glyph too. */ .calendar-more > summary::-webkit-details-marker { display: none; } .calendar-more > summary:hover { background: var(--color-surface-alt); } /* Was `2px solid var(--color-accent)`, which measured 2.15:1 against the page background and 2.38:1 against a card -- both below 1.4.11's 3:1, on a control that sits on a light calendar cell. Now defers to the site-wide two-tone ring near the top of this file. The offset is kept small because a day cell is tight. */ .calendar-more > summary:focus-visible { outline: 3px solid var(--color-ring-outer); outline-offset: 1px; box-shadow: 0 0 0 2px var(--color-ring-inner); } /* "Start a course on this day". Quiet until the cell is hovered or the link is focused: it appears on every in-range cell for somebody who may create a course, and forty-two permanent buttons would compete with the content the grid exists to show. Focus-visible keeps it reachable by keyboard, where there is no hover to rely on. */ .calendar-add { display: block; margin-top: 0.25rem; font-size: 0.7rem; font-weight: 700; color: var(--color-heading); text-decoration: none; opacity: 0; } .calendar-day:hover .calendar-add, .calendar-add:focus-visible { opacity: 1; } @media (hover: none) { /* No hover to reveal it on a touch screen, so it stays visible there. */ .calendar-add { opacity: 1; } } /* Scheduling actions on a run bar, outside the bar's own link so a click on one is not a click on the other. */ .calendar-run-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; } .calendar-session-list { padding-left: 1.1rem; } .calendar-marker-kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } /* --------------------------------------------------------------------------- Tabbed sections --------------------------------------------------------------------------- Every tab's label always visible, one panel shown at a time -- the one behavioral difference from an accordion, where several may be open at once. THE STRIP WRAPS RATHER THAN SCROLLS, the same choice `.module-bar-track` makes: a strip of eight tabs on a phone would otherwise need a sideways swipe to discover the last one, and a tab nobody can see is a section nobody reads. */ .tabs-block { margin: 1rem 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .tabs-strip { display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.35rem 0.35rem 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .tabs-tab { border: 1px solid transparent; border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; padding: 0.45rem 0.9rem; background: transparent; color: var(--color-heading); font: inherit; font-size: 0.85rem; cursor: pointer; } .tabs-tab:hover { background: var(--color-surface-alt); } /* The selected tab carries color AND a thick top edge, so the two states stay apart without relying on color alone -- the same three-channel reasoning `.module-bar-step` records. */ .tabs-tab--current { background: var(--color-fill-strong); border-top: 3px solid var(--color-accent-on-chrome); color: var(--color-on-chrome); font-weight: 700; } /* INSET, because a tab sits flush in a strip and an outward ring would overlap its neighbors. Two-tone like everything else, but drawn inward: light from the edge to 2px, navy from 2px to 4px. BOTH BANDS ARE NEEDED HERE, which is not obvious and is why the old rule was wrong. `.tabs-tab--current` is navy, so a keyboard user on the selected tab needs the light band; every OTHER tab is `background: transparent` over a `--color-surface` strip, so they need the dark one -- and arrow-key navigation lands on those constantly. The previous accent ring measured 6.36:1 on the current tab and 2.38:1 on all the others, which is the wrong way round: it was legible only on the one tab you can already see you are on. */ .tabs-tab:focus-visible { outline: 2px solid var(--color-ring-outer); outline-offset: -2px; box-shadow: inset 0 0 0 2px var(--color-ring-inner); } .tabs-panel { padding: 0.9rem 1.1rem; } /* Before tabs.js runs, every panel shows under its own heading and a divider keeps them apart. `--ready` is added once the script has taken over, at which point only one panel is ever visible and the divider would be a line under nothing. */ .tabs-panel + .tabs-panel { border-top: 1px solid var(--color-border); } .tabs-block--ready .tabs-panel + .tabs-panel { border-top: none; } .tabs-panel-heading { margin: 0 0 0.5rem; font-size: 0.95rem; } /* The bar and its number on one line, so the figure reads as a label on the bar rather than as a separate fact further down the page. Wraps rather than squeezing the track to nothing on a narrow viewport. */ .progress-bar-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .progress-bar { flex: 1 1 12rem; /* Taller, and standing on something. The track was an 8%-black wash on a cream page with no edge, so an empty bar was invisible and a part-full one had no visible end to measure against. */ height: 0.75rem; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; } .progress-bar-fill { display: block; height: 100%; background: var(--color-accent-fill); transition: width 0.3s ease; } /* The same number the bar is drawn from -- see course_learn.html, which passes `completion.percent` to both. Navy so it carries the weight of a heading rather than reading as a caption. */ .progress-bar-value { font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .progress-bar-fill { transition: none; } } .nav-tally { display: block; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--color-text-muted); } .nav-state { display: inline-block; width: 1em; text-align: center; color: var(--color-text-muted); } .nav-state--done { color: var(--color-accent-ink); font-weight: 700; } .nav-state--started { color: var(--color-text-muted); } .block--embed { border: 1px solid var(--color-border); border-radius: 0.4rem; padding: 1rem 1.1rem; } .block--embed h3 { margin: 0.35rem 0 0.5rem; } /* * A wide table that scrolls inside its own box. * * The roster carries fourteen columns and cannot narrow usefully -- every one * is a distinct fact somebody came to read. Without this the PAGE scrolls * sideways instead, which pushes the status and notes controls off to the * right and makes them reachable only by dragging the whole layout. Same * arrangement as `.board-grid-wrap` on the roleplay board. */ .table-scroll { overflow-x: auto; max-width: 100%; } /* * The browser's own PDF viewer, embedded in the page. * * No library: `