/* * Color/typography overrides matching alicesastroinfo.com's WordPress * "Blue" theme. Loads after theme.css (Quark2 loads custom.css last). * * Colors apply to LIGHT mode only — dark mode keeps Quark2's stock * palette. Requires aai-theme.yaml's theme-mode: light default; without * it, a visitor whose OS prefers dark never sees these colors. * * Values sourced from wp-content/themes/blue/style.css. */ :root, :root[data-theme="light"] { /* Page canvas, behind the white "sheet" — see the Sheet section below. */ --q2-bg: #567e9f; --q2-bg-muted: #d7e1ea; /* WP blockquote background */ --q2-text: #21272c; --q2-text-strong: #071218; /* WP blockquote text */ --q2-text-muted: #6c8193; /* WP visited-link color */ --q2-border-ring: #758899; /* WP block/sidebar-panel border */ --q2-border-strong: #9cb5c9; /* WP blockquote/metadata-bar border */ --q2-divider: #9cb5c9; --q2-nav-bg: #668eaf; --q2-nav-border: #567e9f; } /* Quark2 has no visited-link state by default; WP's three-state link * coloring is added explicitly. */ :root, :root[data-theme="light"] { --pico-primary: #235976; --pico-primary-hover: #2f779d; } /* Not a custom-property override, so needs its own light-mode scope. */ :root:not([data-theme="dark"]) a:visited { color: #6c8193; } /* Quark2 defaults all heading levels to one shared color; WP * differentiates H1/H2, H3, and H4-H6. */ :root, :root[data-theme="light"] { --pico-h1-color: #276282; --pico-h2-color: #276282; --pico-h3-color: #4f7492; --pico-h4-color: #21272c; --pico-h5-color: #21272c; --pico-h6-color: #21272c; } /* WP uses one font everywhere; both of Quark2's heading/body font-role * variables get the same Georgia stack. Monospace left at Quark2's * default (WP had no code/monospace usage). */ :root, :root[data-theme="light"] { --pico-font-family-display: Georgia, "Times New Roman", Times, serif; --pico-font-family-sans-serif: Georgia, "Times New Roman", Times, serif; /* --pico-font-size is Pico/Blades' root font-size variable — WP's real * body size is 13px, vs. Quark2's 16px default. */ --pico-font-size: 13px; } /* #header .navbar-brand, .navbar-section a: nav bar link/brand text * color. No dedicated Quark2 custom property for this, so a plain rule * scoped to light mode rather than a variable override. */ :root:not([data-theme="dark"]) #header .navbar-brand, :root:not([data-theme="dark"]) #header .navbar-section a { color: #ffffff; } /* .dropmenu a: top nav menu items. Deliberately larger than WP for * readability — Quark2's own default is 0.9375rem (~15px); this isn't a * WP-sourced value. */ .dropmenu a { font-size: 1.125rem; } /* ---------- Header: remove Grav logo/brand and the light/dark toggle ---------- */ /* .navbar-section.logo / .mobile-logo: Grav's default logo + site-title * link, in the desktop header and the mobile overlay respectively (two * separate wrapper classes around the same partials/logo.html.twig * include). button.theme-toggle: the light/dark mode switch button, * shared by the desktop header and the mobile overlay's labeled copy. * * Hidden via CSS rather than an empty template override, so these files * don't need to track upstream Quark2 template changes. * * .navbar-section.logo is flex:0 0 auto in #header .navbar; .desktop-menu * is flex:1 1 auto with justify-content:flex-end, so hiding the logo * section gives that space back to the nav links with no layout gap. * .navbar-section.actions (the toggle's container — this site doesn't use * Grav's own Login plugin) becomes an empty, zero-width flex child. * * button.theme-toggle, not bare .theme-toggle: theme.css's own rule is * `button.theme-toggle, .theme-toggle { display: inline-flex; ... }` — * the element-qualified half has higher specificity than a bare class * selector, so this override has to match it to win. */ .navbar-section.logo, .mobile-logo, button.theme-toggle { display: none; } /* ---------- Three-column layout (see templates/partials/layout.html.twig) ---------- */ /* .columns.aai-three-col.has-sidebar: overrides Quark2's own * .columns.has-sidebar 2-column grid (minmax(0, 2.5fr) minmax(0, 1fr)) * with a narrower sidebar track. No left-spacer column — #sidebar-left is * hidden outright below, so only two grid tracks are needed. */ @media (min-width: 960px) { .columns.aai-three-col.has-sidebar { grid-template-columns: minmax(0, 3.5fr) minmax(120px, 1fr); gap: clamp(12px, 2vw, 19px); } } /* #sidebar: bled inward via negative margin (same full-bleed technique as * the header banner below) so the sidebar sits close to the sheet's * border rather than leaving the sheet's full padding as a gap. */ @media (min-width: 960px) { #sidebar { margin-right: calc(3px - clamp(6px, 1.5vw, 9px)); } } /* #sidebar-left: WP's left column was always a pure visual spacer, never * real content (templates/partials/sidebar-left.html.twig is empty) — * hidden rather than given grid width. */ #sidebar-left { display: none; } /* ---------- Header banner ---------- */ /* .columns.aai-three-col::before: WP's div.Header-jpeg banner image * (images/Blue-Hair-Transparent-Background-2018.gif, native 890x168), * reproduced as a full-width row above the three real columns via * grid-column: 1 / -1 on a pseudo-element, inside the sheet's own * padding/border box. Height clamps down on narrow viewports; the * negative margin-inline bleeds the banner out to the sheet's own border * and must stay in sync with the sheet's own horizontal padding below. */ :root:not([data-theme="dark"]) .columns.aai-three-col::before { content: ""; display: block; grid-column: 1 / -1; height: clamp(60px, 15vw, 168px); margin-inline: calc(-1 * clamp(6px, 1.5vw, 9px)); background-image: url("../images/Blue-Hair-Transparent-Background-2018.gif"); background-repeat: no-repeat; background-position: center center; background-size: contain; } /* ---------- Page/post title ---------- */ /* .content-title h1.p-name / a.u-url: the post/page title * (templates/partials/blog/title.html.twig), distinct from in-content * headings. Color #1B445A is WP's specific title color * (.PostHeaderIcon-wrapper/.PostHeader) — different from, and more * specific than, the generic --pico-h1-color used for headings written * inside page content. font-size/text-decoration have no Quark2 default * for this element, so both are set outright to WP's real values. * * h2.p-name alongside h1.p-name: partials/home-post.html.twig (the * homepage's stacked full-post listing) titles each entry with h2, not h1 — * only one h1 belongs on a page with several posts on it. WP's own homepage * markup does the same (h2.PostHeaderIcon-wrapper in its listing, * h1.PostHeaderIcon-wrapper on a single post page), both styled identically * — this mirrors that: same rule, both heading levels, unconditionally * (a single-post page only ever has the h1 case, so this never doubles up * in practice). */ .content-title { padding: 0; } :root:not([data-theme="dark"]) .content-title h1.p-name, :root:not([data-theme="dark"]) .content-title h1.p-name a.u-url, :root:not([data-theme="dark"]) .content-title h2.p-name, :root:not([data-theme="dark"]) .content-title h2.p-name a.u-url { color: #1b445a; font-variant: small-caps; } .content-title h1.p-name, .content-title h2.p-name { font-size: 31px; } .content-title h1.p-name a.u-url, .content-title h2.p-name a.u-url { text-decoration: none; } /* WP's images/PostHeaderIcon.png, downloaded verbatim — a fixed * decorative icon before every post/page title. Native file is 72x72 * (retina source), sized down to WP's rendered 29x29. */ .content-title h1.p-name a.u-url::before, .content-title h2.p-name a.u-url::before { content: ""; display: inline-block; width: 29px; height: 29px; margin-right: 0.4em; vertical-align: middle; background-image: url("../images/PostHeaderIcon.png"); background-size: contain; background-repeat: no-repeat; } /* .blog-date: WP's "Pretty Printout" date box (.PostMetadataHeader / * .PostHeaderIcons) — block-level and full post width, matching WP's own * markup rather than sized to hug the date text. Text color #364049 is * .PostHeaderIcons's own non-link color; this box has no link in it. */ :root:not([data-theme="dark"]) .content-title .blog-date { display: block; background-color: #cad7e2; padding: 3px; border-radius: var(--q2-radius-sm); } :root:not([data-theme="dark"]) .content-title .blog-date, :root:not([data-theme="dark"]) .content-title .blog-date time { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; color: #364049; } /* ---------- Sheet (white background behind the 3-column area) ---------- */ /* .columns.aai-three-col: WP's .Sheet wrapped the whole page area below * the header in one continuous white background (content and sidebar * share one surface, no border between them) — approximated with a flat * white background + border on the grid element built in * templates/partials/layout.html.twig, rather than WP's own 9-slice * texture-image technique. * * max-width: 896px = the header banner's native 890px width plus this * element's own 2x3px border (box-sizing: border-box). Horizontal padding * is plain px, not rem — --pico-font-size: 13px above also drives the * root font-size Pico/Blades scale rem from, so a rem value here would * compute against 13px, not 16px. Must stay in sync with the header * banner's negative margin-inline above and #sidebar's negative * margin-right above, both of which bleed out this exact padding value. */ :root:not([data-theme="dark"]) .columns.aai-three-col { background: #ffffff; border: 3px solid #333333; border-radius: var(--q2-radius-md); padding: 1.25rem clamp(6px, 1.5vw, 9px); max-width: 896px; margin-inline: auto; } /* ---------- Post/page content box ---------- */ /* .content-item: the post/page body's own box within the white sheet — * light grey background, border thicker than WP's original 1px but * lighter than the sheet's own border above. The sidebar does not get * this treatment; it sits directly on the shared white sheet. */ :root:not([data-theme="dark"]) .content-item { background: #f2f2f2; border: 2px solid #cccccc; border-radius: var(--q2-radius-md); padding: 1rem clamp(8px, 1.5vw, 12px); } /* Gap between stacked posts on the homepage (.home-post-list, see * templates/partials/home-post.html.twig) — a single-post page only ever * has one .content-item, so this adjacent-sibling selector never matches * there. */ .content-item + .content-item { margin-top: 24px; } /* ---------- In-content headings and links ---------- */ /* .e-content h1-h6: in-content headings, distinct from the page/post * TITLE (.content-title h1.p-name, styled above). Quark2's own heading * rule (`h1,h2,h3,h4,h5,h6 { color: var(--q2-text) }`) gives every level * the same color and never references --pico-hN-color, so the variables * set earlier have no effect here — direct rules instead, with WP's real * per-level colors. WP headings never underline their own links * regardless of level, so link color/decoration falls back to the * heading's own. */ :root:not([data-theme="dark"]) .e-content h1, :root:not([data-theme="dark"]) .e-content h1 a, :root:not([data-theme="dark"]) .e-content h2, :root:not([data-theme="dark"]) .e-content h2 a { color: #276282; } :root:not([data-theme="dark"]) .e-content h3, :root:not([data-theme="dark"]) .e-content h3 a { color: #4f7492; } :root:not([data-theme="dark"]) .e-content h4, :root:not([data-theme="dark"]) .e-content h4 a, :root:not([data-theme="dark"]) .e-content h5, :root:not([data-theme="dark"]) .e-content h5 a, :root:not([data-theme="dark"]) .e-content h6, :root:not([data-theme="dark"]) .e-content h6 a { color: #21272c; } .e-content h1 a, .e-content h2 a, .e-content h3 a, .e-content h4 a, .e-content h5 a, .e-content h6 a { text-decoration: none; } /* WP's real per-level heading sizes. font-weight: normal matches WP's * explicit heading reset (Quark2's own per-level weights vary: h1:400, * h2:700, h3/h4:600). */ .e-content h1 { font-size: 33px; font-weight: normal; } .e-content h2 { font-size: 31px; font-weight: normal; } .e-content h3 { font-size: 20px; font-weight: normal; } .e-content h4 { font-size: 18px; font-weight: normal; } .e-content h5 { font-size: 15px; font-weight: normal; } .e-content h6 { font-size: 13px; font-weight: normal; } /* Removes Quark2's decorative h2 accent bar — not part of WP's design. */ .e-content h2::before { content: none; } /* --q2-link: Quark2's base `a { color: var(--q2-link) }` rule references * this variable but never defines it, so links render in the inherited * text color rather than any blue until it's set here. Value is WP's real * link color (.BlockContent-body/.PostHeaderIcons/.Footer a:link). */ :root, :root[data-theme="light"] { --q2-link: #235976; } /* ---------- Tables ---------- */ /* .e-content table/th/td: Quark2 has no table styling of its own; without * this, tables fall through to Pico's base rules (border-bottom only, * white cell background that breaks from .content-item's #f2f2f2 fill). * Full black borders are a deliberate departure from WP's own lighter * #758899 border color; cell background matches the surrounding post * box. */ .e-content table, .e-content th, .e-content td { border: 1px solid #000000; border-collapse: collapse; } .e-content th, .e-content td { background-color: #f2f2f2; padding: 4px 8px; } /* Column widths for the sunset-watches-style 6-column time/date table * (seasonal-sunset-watches-2021 and seasonal-sunset-watches). Scoped via * :has() to tables with exactly 6 header cells — the only tables in the * migrated corpus at that column count. table-layout: fixed plus explicit * per-column widths (5/35/20/20/10/10%) are the original author's own * inline style values from the live WordPress post's raw HTML, not * derived. td gets white-space: nowrap so cell text only breaks at its * own
tags; th keeps normal wrapping plus overflow-wrap: normal * (Pico's base :root sets overflow-wrap: break-word globally, which * breaks long header words mid-word at this column width). Padding * (2px 4px) matches WP's real `.article td` value, tighter than this * theme's global table padding above. */ .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) { table-layout: fixed; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) td { white-space: nowrap; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) th { overflow-wrap: normal; word-break: normal; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) :is(th, td):nth-child(1) { width: 5%; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) :is(th, td):nth-child(2) { width: 35%; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) :is(th, td):nth-child(3) { width: 20%; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) :is(th, td):nth-child(4) { width: 20%; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) :is(th, td):nth-child(5) { width: 10%; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) :is(th, td):nth-child(6) { width: 10%; } .e-content table:has(thead tr > :nth-child(6)):not(:has(thead tr > :nth-child(7))) :is(th, td) { padding: 2px 4px; } /* ---------- Post-body image baseline ---------- */ /* .e-content img: WP's real active rule for plain post-body images * (`.article img, img.article { border-style: solid; border-width: 0px; * border-color: #9CB5C9; margin: 1em; }`). Its specificity (class + * element) beats .aligncenter alone below, which is why WP's own * aligncenter images (e.g. the About page photos) don't actually render * centered. .wp-caption img below needs equal specificity and later * source order to override this for captioned images specifically. */ .e-content img { border: 0 none; margin: 1em; } /* ---------- WordPress image captions ---------- */ /* .wp-caption / .wp-caption-text: WP's classic Caption shortcode markup, * preserved as raw HTML by the migration script rather than converted to * Markdown. Values ported as-is from WP's real CSS. */ .wp-caption { border: 1px solid #dddddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /* ---------- List bullets ---------- */ /* .e-content ul/li: WP's real custom bullet (images/PostBullets.png, * 43x15) as a per-
  • background image, with native markers removed. * list-style-type: none must be set on both ul and li — Quark2's base CSS * sets `ul li { list-style: square }` directly on li, which a parent-level * ul rule alone doesn't override. Scoped to .e-content so nav/sidebar *