/* Maudlin Street — archive-shell styling. * * Evokes the Passions Just Like Mine archive aesthetic: dense Arial/ * Verdana-family typography, stacked rectangular menu rows, olive-green * gateway background, gold/cream menu text, and section-specific * accent palettes (dark green for lyrics, dark blue + gold for * releases, mid-green for live, sepia for media, etc.). * * Implementation notes: * - System sans first (Arial / Helvetica / Verdana). No web fonts * loaded; the source-authority doctrine policy stays applicable to * content and not to webfont licensing. * - CSS custom properties scoped to let * each section take an accent palette without per-page stylesheets. * - Responsive: two-column layout collapses to single-column under * ~720px viewport. Mobile preserves archive density. * - No PJLM images, no PJLM CSS copied verbatim. Inspired-by colors * are referenced from PJLM's style-*.css files but rounded to * modern hex values where useful, and applied via custom * properties rather than per-section CSS files. */ :root { /* base palette — used by gateway and as fallbacks */ --olive: #5C821F; --olive-dark: #40600E; --gold: #f0e861; --gold-bright: #FFD84F; --cream: #efebe8; --cream-pale: #f7f3ec; --ink: #1a1a1a; --ink-soft: #2a2a2a; --rule: #d8cfbf; --muted: #555; /* defaults applied to inner pages without an explicit section override */ --page-bg: var(--cream-pale); --page-fg: var(--ink); --panel-bg: #ffffff; --panel-fg: var(--ink); --panel-rule: #d8cfbf; --accent: #40600E; --accent-hover: #1a1a1a; --link: #40600E; --link-hover: #1a1a1a; /* archive menu (PJLM-evocation: olive panel, white text, gold hover) */ --menu-panel-bg: var(--olive); --menu-panel-border: var(--olive-dark); --menu-row-bg: var(--olive); --menu-row-fg: #ffffff; --menu-row-hover-bg: var(--olive-dark); --menu-row-hover-fg: var(--gold-bright); --menu-submenu-bg: var(--olive-dark); --menu-submenu-fg: var(--gold); --menu-active-bg: var(--olive-dark); --menu-active-fg: var(--gold-bright); /* archive density */ --content-width: 30rem; --side-width: 17rem; --base-font-size: 13px; --base-line-height: 1.45; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--page-bg); color: var(--page-fg); font-family: Arial, Helvetica, Verdana, sans-serif; font-size: var(--base-font-size); line-height: var(--base-line-height); } a { color: var(--link); text-decoration: underline; } a:hover, a:focus { color: var(--link-hover); text-decoration: none; } code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; background: rgba(0, 0, 0, 0.04); padding: 0 0.2em; } p, ul, ol { margin: 0.55rem 0; } ul, ol { padding-left: 1.4rem; } li + li { margin-top: 0.1rem; } h1, h2, h3, h4, h5 { font-family: Arial, Helvetica, Verdana, sans-serif; line-height: 1.2; color: var(--accent); margin: 0 0 0.5rem; } h1 { font-size: 1.55rem; font-weight: 700; } h2 { font-size: 1.15rem; font-weight: 700; margin-top: 1.2rem; } h3 { font-size: 1.0rem; font-weight: 700; margin-top: 0.9rem; } h4 { font-size: 0.92rem; font-weight: 700; margin-top: 0.7rem; } /* ---------------------------------------------------------------------- * Gateway page (data-gateway="true") * Two-column: identity block on the left, stacked menu on the right. * Mirrors PJLM index.html's left-logo / right-stacked-menu split, but * the left column is a CSS identity block instead of a logo image. * -------------------------------------------------------------------- */ body[data-gateway="true"] { background: var(--olive); color: #ffffff; } .gateway { display: flex; flex-wrap: wrap; gap: 2rem; max-width: 60rem; margin: 0 auto; padding: 1.6rem 1.25rem 2rem; align-items: flex-start; } .gateway__identity { flex: 0 1 24rem; min-width: 18rem; } .gateway__menu { flex: 0 0 18rem; min-width: 16rem; } .identity { color: #ffffff; } .identity__brand { display: flex; flex-direction: column; margin: 0 0 0.8rem; line-height: 1.0; } .identity__brand-line-1, .identity__brand-line-2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: var(--gold-bright); letter-spacing: 0.02em; } .identity__brand-line-1 { font-size: 3.2rem; } .identity__brand-line-2 { font-size: 3.2rem; margin-top: -0.4rem; } .identity__tagline { font-size: 0.95rem; color: var(--cream); margin: 0.6rem 0 1.1rem; } .identity__doctrine { font-size: 0.78rem; color: var(--gold); border-top: 1px solid var(--olive-dark); padding-top: 0.6rem; margin: 0; } .identity__doctrine code { background: rgba(255, 255, 255, 0.08); color: var(--cream); } /* ---------------------------------------------------------------------- * Inner pages (page layout) * Side column carries the main menu + return link; content column * carries the section body. * -------------------------------------------------------------------- */ .page { display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr); gap: 1.5rem; max-width: 60rem; margin: 0 auto; padding: 1.4rem 1.25rem 2rem; align-items: start; } .page__side { position: sticky; top: 0.8rem; } .page__content { background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--panel-rule); padding: 1.1rem 1.25rem 1.25rem; min-width: 0; } .page__content > *:first-child { margin-top: 0; } /* ---------------------------------------------------------------------- * Archive menu (used on every page) * Stacked rectangular rows, fixed visual height, hover state, indented * submenu when the active section has children. Spiritually equivalent * to PJLM's stacked menu-*.jpg image buttons + submenu rows in * index-releases.htm and index-media.htm, but built in CSS. * -------------------------------------------------------------------- */ .archive-menu { background: var(--menu-panel-bg); border: 2px solid var(--menu-panel-border); padding: 0.35rem 0; font-family: Arial, Helvetica, Verdana, sans-serif; } .archive-menu__list, .archive-menu__submenu { list-style: none; margin: 0; padding: 0; } .archive-menu__row { background: var(--menu-row-bg); border-top: 1px solid rgba(0, 0, 0, 0.18); } .archive-menu__row:first-child { border-top: none; } .archive-menu__link { display: block; padding: 0.45rem 0.85rem; color: var(--menu-row-fg); font-size: 0.92rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; } .archive-menu__link:hover, .archive-menu__link:focus { background: var(--menu-row-hover-bg); color: var(--menu-row-hover-fg); text-decoration: none; } .archive-menu__row.is-active > .archive-menu__link { background: var(--menu-active-bg); color: var(--menu-active-fg); } .archive-menu__return-glyph { margin-right: 0.3rem; font-weight: 700; } .archive-menu__submenu { background: var(--menu-submenu-bg); padding: 0.2rem 0; } .archive-menu__submenu-row { border-top: 1px solid rgba(0, 0, 0, 0.22); } .archive-menu__submenu-row:first-child { border-top: none; } .archive-menu__submenu-link { display: block; padding: 0.3rem 0.85rem 0.3rem 1.6rem; color: var(--menu-submenu-fg); font-size: 0.85rem; font-weight: 600; text-decoration: none; } .archive-menu__submenu-link:hover, .archive-menu__submenu-link:focus { background: rgba(0, 0, 0, 0.22); color: #ffffff; text-decoration: none; } /* Return link under the menu on inner pages. */ .to-main-menu { margin-top: 0.6rem; background: var(--cream); border: 1px solid var(--panel-rule); padding: 0.4rem 0.7rem; font-size: 0.82rem; } .to-main-menu__link { color: var(--accent); text-decoration: none; font-weight: 700; } .to-main-menu__link:hover { text-decoration: underline; } /* ---------------------------------------------------------------------- * Archive content patterns * Dense indexes, year/section headers, indented submenus, source-note. * -------------------------------------------------------------------- */ .archive-intro { font-size: 0.95rem; margin: 0 0 0.9rem; color: var(--ink-soft); } .archive-status { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.45rem; border: 1px solid var(--accent); color: var(--accent); background: transparent; margin: 0 0 0.6rem; } .archive-status[data-status="shell"] { color: var(--muted); border-color: var(--muted); } .archive-status[data-status="in_progress"] { color: var(--accent); border-color: var(--accent); } .archive-status[data-status="live"] { color: #2b5e0c; border-color: #2b5e0c; } .archive-group { margin: 1rem 0 0.6rem; } .archive-group__title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--panel-rule); padding-bottom: 0.2rem; margin: 0 0 0.4rem; } .archive-index { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; } .archive-index li { padding: 0.08rem 0; } .archive-index li.is-year { font-weight: 700; margin: 0.5rem 0 0.1rem; color: var(--accent); } .archive-index li.is-indent { padding-left: 1.2rem; } .archive-index a { color: var(--link); text-decoration: none; } .archive-index a:hover { text-decoration: underline; } .archive-callout { background: var(--cream); border-left: 3px solid var(--accent); padding: 0.6rem 0.8rem; margin: 0.8rem 0; font-size: 0.88rem; color: var(--ink-soft); } /* Source-authority badge inline */ .authority { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.05rem 0.4rem; margin-left: 0.3rem; border-radius: 0.15rem; vertical-align: 0.05em; } .authority[data-authority="primary"] { background: #2b5e0c; color: #ffffff; } .authority[data-authority="secondary"] { background: #c9b35a; color: #2a2a2a; } .authority[data-authority="conflict"] { background: #7a2424; color: #ffffff; } /* Existing source-note component, restyled for archive feel. */ .source-note { border-left: 3px solid #6a5a2e; background: var(--cream); padding: 0.6rem 0.8rem; margin: 0.8rem 0; font-size: 0.9rem; } .source-note--primary { border-left-color: #2b5e0c; } .source-note__badge { display: inline-block; font-size: 0.7rem; padding: 0.04rem 0.36rem; margin-left: 0.4rem; border-radius: 0.15rem; background: #6a5a2e; color: var(--cream); } .source-note__badge--primary { background: #2b5e0c; } .source-note__quote { margin: 0.5rem 0; font-style: italic; color: var(--muted); } .source-note__provenance { font-size: 0.78rem; color: var(--muted); margin: 0.25rem 0 0; } /* ---------------------------------------------------------------------- * Section palettes (PJLM-inspired evocations, not copies) * * - releases : dark blue panel + gold accents (PJLM style-discogm.css) * - lyrics : cream page + dark green panel (PJLM style-lyricss.css) * - songs : cream page + dark green panel (lyrics-adjacent) * - live : pale green/cream + mid-green text (PJLM style-livem.css) * - bootlegs : darker olive * - media : warm sepia * - videos : muted blue * - influence: ink-on-cream * - links : neutral * - sources : doctrine cream + burgundy accent (preserves * source-authority continuity) * - about : same as sources * - search : minimal placeholder * -------------------------------------------------------------------- */ body[data-section="releases"] { --page-bg: #f6efd7; --panel-bg: #094a73; --panel-fg: #daba1b; --panel-rule: #07375a; --accent: #daba1b; --accent-hover: #ffffff; --link: #daba1b; --link-hover: #ffffff; } body[data-section="releases"] .page__content code { background: rgba(255, 255, 255, 0.08); color: #f6efd7; } body[data-section="releases"] .archive-status { color: #f6efd7; border-color: #daba1b; } body[data-section="releases"] h1, body[data-section="releases"] h2, body[data-section="releases"] h3, body[data-section="releases"] h4 { color: #daba1b; } body[data-section="releases"] .archive-group__title { color: #daba1b; border-bottom-color: #07375a; } body[data-section="releases"] .archive-callout { background: #07375a; border-left-color: #daba1b; color: var(--cream); } body[data-section="lyrics"], body[data-section="songs"] { --page-bg: var(--cream); --panel-bg: #40600E; --panel-fg: var(--cream); --panel-rule: #2c4408; --accent: var(--cream); --link: var(--cream); --link-hover: #f0e861; } body[data-section="lyrics"] code, body[data-section="songs"] code { background: rgba(255, 255, 255, 0.08); color: var(--cream); } body[data-section="lyrics"] h1, body[data-section="lyrics"] h2, body[data-section="lyrics"] h3, body[data-section="lyrics"] h4, body[data-section="songs"] h1, body[data-section="songs"] h2, body[data-section="songs"] h3, body[data-section="songs"] h4 { color: var(--cream); } body[data-section="lyrics"] .archive-group__title, body[data-section="songs"] .archive-group__title { color: #f0e861; border-bottom-color: #2c4408; } body[data-section="lyrics"] .archive-callout, body[data-section="songs"] .archive-callout { background: #2c4408; border-left-color: #f0e861; color: var(--cream); } body[data-section="lyrics"] .archive-status, body[data-section="songs"] .archive-status { color: var(--cream); border-color: #f0e861; } body[data-section="live"] { --page-bg: #f0f4dc; --panel-bg: #ffffff; --panel-fg: #2a3a10; --panel-rule: #78ab12; --accent: #386b00; --link: #588b00; --link-hover: #386b00; } body[data-section="live"] .archive-callout { background: #f0f4dc; border-left-color: #588b00; } body[data-section="bootlegs"] { --panel-bg: #213014; --panel-fg: #d8e2c1; --panel-rule: #122008; --accent: #d8e2c1; --link: #d8e2c1; --link-hover: #f0e861; } body[data-section="bootlegs"] h1, body[data-section="bootlegs"] h2, body[data-section="bootlegs"] h3, body[data-section="bootlegs"] h4 { color: #d8e2c1; } body[data-section="bootlegs"] .archive-group__title { color: #f0e861; border-bottom-color: #122008; } body[data-section="bootlegs"] .archive-callout { background: #122008; border-left-color: #f0e861; color: #d8e2c1; } body[data-section="bootlegs"] code { background: rgba(255, 255, 255, 0.08); color: #d8e2c1; } body[data-section="media"] { --page-bg: #f3ecda; --panel-bg: #f8f1de; --panel-fg: #3a2a14; --panel-rule: #c9b35a; --accent: #6a4a1a; --link: #6a4a1a; --link-hover: #3a2a14; } body[data-section="videos"] { --page-bg: #e6ecf2; --panel-bg: #ffffff; --panel-fg: #1a2c40; --panel-rule: #6b8aac; --accent: #16456c; --link: #16456c; --link-hover: #08283d; } body[data-section="influence"] { --page-bg: var(--cream-pale); --panel-bg: #ffffff; --panel-fg: var(--ink); --panel-rule: #c9b35a; --accent: #4a3a10; --link: #4a3a10; --link-hover: var(--ink); } body[data-section="links"] { --page-bg: var(--cream-pale); --panel-bg: #ffffff; --panel-fg: var(--ink); --panel-rule: #b8a878; --accent: #2b5e0c; --link: #2b5e0c; --link-hover: var(--ink); } body[data-section="sources"], body[data-section="about"] { --page-bg: var(--cream-pale); --panel-bg: #ffffff; --panel-fg: var(--ink); --panel-rule: #c8a07a; --accent: #5c1a2b; --link: #5c1a2b; --link-hover: #1a1a1a; } body[data-section="sources"] .archive-callout, body[data-section="about"] .archive-callout { background: #faf3ea; border-left-color: #5c1a2b; } body[data-section="search"] { --page-bg: var(--cream-pale); --panel-bg: #ffffff; --panel-fg: var(--muted); --panel-rule: #d8cfbf; --accent: var(--muted); --link: var(--muted); --link-hover: var(--ink); } /* ---------------------------------------------------------------------- * Footer (shared across every page including gateway) * -------------------------------------------------------------------- */ .site-footer { max-width: 60rem; margin: 1.4rem auto 0; padding: 0.9rem 1.25rem 1.4rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); border-top: 1px solid rgba(255, 255, 255, 0.15); } .site-footer code { background: rgba(255, 255, 255, 0.08); color: var(--cream); } .site-footer a { color: var(--gold-bright); text-decoration: underline; } .site-footer a:hover { color: #ffffff; } /* Inner-page footer: cream on the page-bg instead of cream on olive. */ body:not([data-gateway="true"]) .site-footer { color: var(--muted); border-top-color: var(--panel-rule, var(--rule)); } body:not([data-gateway="true"]) .site-footer code { background: rgba(0, 0, 0, 0.04); color: var(--ink-soft); } body:not([data-gateway="true"]) .site-footer a { color: var(--accent); } body:not([data-gateway="true"]) .site-footer a:hover { color: var(--ink); } /* ---------------------------------------------------------------------- * Responsive: collapse two-column layouts to single-column under 720px. * Archive density is preserved; menu becomes a stacked block above the * content rather than a sticky sidebar. * -------------------------------------------------------------------- */ @media (max-width: 720px) { .gateway { flex-direction: column; gap: 1.2rem; } .gateway__menu { flex: 1 1 auto; min-width: 0; } .page { grid-template-columns: 1fr; gap: 1rem; } .page__side { position: static; } .identity__brand-line-1, .identity__brand-line-2 { font-size: 2.6rem; } }