/* * Quark 2 — user customizations * * This file is safe to edit. It is loaded last so anything here overrides * theme.css without having to mark rules !important. */ /* --- Phase 1: Bootstrap-derived blog list page look ------------------- */ /* Purple header bar (ported from Bootstrap theme's .header, #62488A). Uses the 100vw/negative-margin full-bleed technique so it breaks out of whatever ancestor container is constraining width — this theme (Pico-based) has several nested wrappers between and this element, so targeting a specific ancestor's max-width proved unreliable; this approach is self-contained and doesn't depend on correctly identifying every parent in the chain. */ .blog-page-header { background: linear-gradient(135deg, #573f7a, #6d509a); padding: 4rem 1.5rem 3rem; text-align: center; color: #d9d0e8; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; } .blog-page-header h1 { color: #f0f0f0; font-size: 3rem; margin: 0 0 0.5rem; } .blog-page-header .lead, .blog-page-header .blog-page-intro { color: #d9d0e8; font-size: 1.1rem; margin: 0; } @media (max-width: 768px) { .blog-page-header { padding: 2.5rem 1rem 2rem; } .blog-page-header h1 { font-size: 2rem; } } /* Force the list to stack single-column, Bootstrap-style, overriding Quark 2's default CSS-grid layout for .blog-grid */ .blog-grid { display: block !important; } .blog-grid .card { display: block; border: none; border-radius: 0; border-bottom: 1px solid #e5e5e5; padding: 0 0 2rem; margin: 0 0 2rem; background: transparent; box-shadow: none; } .blog-grid .card:last-child { border-bottom: none; } /* Post title — blue link, Bootstrap's classic anchor blue */ .blog-grid .card-title h3, .blog-grid .card-title { margin: 0 0 0.4rem; } .blog-grid .card-title a, .card-title .p-name, article.card h3 a { color: #2a6496 !important; text-decoration: none; font-weight: bold; } .blog-grid .card-title a:hover { color: #1d4569 !important; text-decoration: underline; } /* Date + tags row */ .blog-grid .card-subtitle { color: #888; font-size: 0.9rem; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* Tag badges (Bootstrap label-primary equivalent) — high-specificity + !important since Quark 2's theme.css also defines a generic `.label` rule (form-field labels) that otherwise wins and hides these */ .blog-grid .tags, .blog-grid .card-footer { display: block !important; margin-top: 0.5rem; } .blog-grid .tags a.label, .blog-grid .card-footer a.label, article.card a.label { display: inline-block !important; background: #428bca !important; color: #fff !important; font-size: 0.75rem !important; font-weight: bold; padding: 0.2em 0.6em !important; border-radius: 3px; margin-right: 0.3em; text-decoration: none !important; } .blog-grid .tags a.label:hover, .blog-grid .card-footer a.label:hover { background: #3071a9 !important; } /* De-emphasize the auto-thumbnail Quark 2 shows for every post — Bootstrap's list view only shows an image when explicitly set via header_image, not automatically from the first media file */ .blog-grid .card-image { display: none; } /* Continue Reading link */ .continue-reading { margin-top: 0.75rem; margin-bottom: 0; } .continue-reading a { font-weight: bold; color: #2a6496; }