/* ============================================================ THEME: anhungxadieu — the lecture deck ------------------------------------------------------------ The same look the game wears, expressed as reveal.js tokens: a lesson read in a slide deck and a lesson read on the floor of the game should not look like two products. Carved dark hardwood, hammered brass, aged vellum. WHERE THE CANONICAL COPY LIVES: the palette below is duplicated from ../../testRaylib/test/testWebpack/src/theme_anhungxadieu.css, which is the game's copy and the one the sprites were generated against. The two are separate webpack builds in separate projects, and importing across that boundary would couple the platform's build to the game's source tree for the sake of nine hex values. Duplicated WITH AN OWNER NAMED beats a fragile cross-project import -- but they must be changed together, and the game's copy is the original. READABILITY FIRST. A deck is read for half an hour at a time, so the reading surface stays parchment-and-ink (#e6d3a8 on #2a1c0f, the pair the dialogue box already uses at length) and the wood is kept for chrome. Gold on parchment is unreadable and is used only on wood. ============================================================ */ :root { /* the shared palette — see the note above about the canonical copy */ --axd-ink: #2a1c0f; --axd-ink-soft: #4a3520; --axd-paper: #e6d3a8; --axd-paper-dark: #cdb47e; --axd-paper-edge: #a88a54; --axd-wood: #3a2412; --axd-wood-dark: #1c1007; --axd-wood-light: #6b4423; --axd-gold: #e9d59a; --axd-gold-deep: #b08a3c; /* ...mapped onto reveal's own tokens. Overrides the gainsboro/navy block in style.css, which is imported before this. */ --r-background-color: var(--axd-paper); --r-main-color: var(--axd-ink); --r-heading-color: var(--axd-wood); --r-link-color: #8a5a1e; --r-link-color-dark: #6b4423; --r-link-color-hover: #b08a3c; --r-selection-background-color: rgba(176, 138, 60, 0.45); --r-selection-color: var(--axd-ink); } /* The deck sits on paper, not on a flat fill: the same tile the dialogue box uses, so the two surfaces are literally the same material. Copied into this project's own assets rather than reached for across the tree. */ html, .reveal-viewport { background-color: var(--axd-paper); background-image: url(./asset/resource/d7bfa383108c37af58aa6df43ea75f25.png); background-repeat: repeat; background-size: 512px 512px; } /* A slide that asks for the SHADER background gets the shader, not paper. `data-bg-shader` in the markdown makes bgShader.js put `bg-shader-on` on the body, and style.css already clears the viewport's background-COLOR so the GL canvas shows through. The paper image was only being occluded by that canvas -- true today, accidental, and wrong the moment the canvas fails to initialise. Stated instead: on those slides the paper steps aside. (res/lectures/test/test_01.md is such a deck, and it is what deck.html opens when no ?md= is given -- so "the slide background has no texture" is that deck working as designed, not the theme failing.) */ body.bg-shader-on.reveal-viewport, body.bg-shader-on .reveal-viewport, body.bg-shader-on { background-image: none; } /* Reveal paints a per-slide background layer over the viewport. Left opaque it would cover the paper with a flat fill -- the same symptom the 404 produced, from a different cause, which is why this is stated rather than left to default. A slide that WANTS its own background still declares one and that inline style wins. */ .reveal .backgrounds .slide-background, .reveal .slide-background-content { background-color: transparent; } /* Headings are the carved-wood part of the page. */ .reveal h1, .reveal h2, .reveal h3, .reveal h4 { color: var(--axd-wood); text-shadow: 0 1px 0 rgba(255, 248, 225, 0.55); } /* A rule under a heading, the way the panel has one under its question. */ .reveal h1, .reveal h2 { border-bottom: 2px solid var(--axd-gold-deep); padding-bottom: 0.18em; } /* Code and quotes: sunk into the paper rather than floated on a dark card, which is what black.css does and what fought the parchment. */ .reveal pre, .reveal code { color: var(--axd-ink); background: rgba(120, 90, 40, 0.10); border: 1px solid var(--axd-paper-edge); border-radius: 2px; text-shadow: none; box-shadow: none; } .reveal blockquote { color: var(--axd-ink-soft); background: rgba(120, 90, 40, 0.08); border-left: 4px solid var(--axd-gold-deep); box-shadow: none; font-style: normal; } .reveal table th { color: var(--axd-wood); border-bottom: 2px solid var(--axd-gold-deep); } .reveal table td { border-bottom: 1px solid var(--axd-paper-edge); } /* MathJax paints with `currentColor`, which on this surface is the ink. That is the whole reason the reading colour had to stay dark-on-light: gold formulas on parchment would be the black-on-dark problem in reverse. */ .reveal mjx-container { color: inherit; } /* Reveal's own chrome — arrows, progress, slide number — becomes brass. */ .reveal .controls { color: var(--axd-gold-deep); } .reveal .progress { color: var(--axd-gold-deep); background: rgba(28, 16, 7, 0.25); } .reveal .slide-number { background: linear-gradient(180deg, #7a4f28 0%, #3a2412 100%); color: var(--axd-gold); border-radius: 0; } /* Buttons the lecture pages put on the page (exercise, solution, dialogue). Wood plank, gold text -- the same object as a dialogue choice. */ /* ---- A BUTTON, defined ONCE ------------------------------------------ Every button on the platform, in one rule. It was two for a while and it showed: the lecture and auth-bar buttons were written as a hand-rolled wood GRADIENT, before the sprites were shared across to this project, and the window buttons added later used the TEXTURE. Same word, two objects, and the difference is plain the moment they appear on one screen. Reveal's navigation controls are `button` elements too — they are excluded by name further down, which is why an arrow had a plank behind it. */ .reveal button, button.lecture-btn, .reveal a.home-btn, .exercise-actions button, .solution-actions button, #k12AuthBar button, .window button:not([aria-label="Close"]), .window input[type=submit], .window input[type=reset] { border: 10px solid transparent; border-image: url(./asset/resource/a65ecbf96ca1c17ef0d775bccab04d02.png) 16 fill stretch; background: none; border-radius: 0; box-shadow: none; color: var(--axd-gold); text-shadow: 0 1px 0 #000; padding: 1px 10px; min-height: 16px; overflow: visible; cursor: pointer; filter: none; } .reveal button:hover, button.lecture-btn:hover, .reveal a.home-btn:hover, .exercise-actions button:hover, .solution-actions button:hover, #k12AuthBar button:hover, .window button:not([aria-label="Close"]):hover:not(:disabled) { border-image-source: url(./asset/resource/3e54fab8a26a7cbdf7231b2702c1873c.png); filter: none; } .reveal button:active, button.lecture-btn:active, .reveal a.home-btn:active, .exercise-actions button:active, .solution-actions button:active, #k12AuthBar button:active, .window button:not([aria-label="Close"]):active:not(:disabled) { border-image-source: url(./asset/resource/3c58901631519f1c91da67188fcfe23d.png); } /* ============================================================ The sign-in bar and the gate behind it ------------------------------------------------------------ authGate.js injected its own