/* ============================================================================ simpleshow blog — Clean redesign (listing: index + category + tag) Scoped to Stockholm's blog markup. Loads only on blog contexts. Palette: D-ID orange primary (#ff882e / ink #b5470d = AA), teal minor accent. Everything is additive + reversible (remove this file + its enqueue to revert). ============================================================================ */ .ss-blog-head, .blog_holder.blog_large_image{ --accent:#ff882e; --accent-ink:#b5470d; --teal:#00c0cc; --teal-ink:#0a7c84; --ink:#17171a; --muted:#55555c; --faint:#6f6f79; --line:#e8e6e2; --sans:'Source Sans 3','Source Sans Pro',Arial,sans-serif; } /* ---- page width ------------------------------------------------------------- REVERTED in v6: the blog now uses the theme's own .container_inner (1200px). v5 widened it to 1560px and the result read as too dense. Nothing here overrides the container any more — the theme's width is left alone. The long category row is handled by the "All N categories" toggle instead of by extra page width, so nothing depends on the wider layout. */ /* ---- keyboard focus (teal minor accent) ------------------------------------ */ .ss-blog-head a:focus-visible, .ss-pills a:focus-visible, .blog_holder.blog_large_image a:focus-visible{ outline:2px solid var(--teal-ink); outline-offset:3px; border-radius:8px; } /* ---- page header: breadcrumb + H1 + subtitle + category pills --------------- */ .ss-blog-head{margin:0 0 30px; font-family:var(--sans)} .ss-crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:16px} .ss-crumbs a{color:var(--muted); text-decoration:none} .ss-crumbs a:hover{color:var(--accent-ink)} .ss-crumbs .ss-sep{color:var(--faint)} .ss-crumbs [aria-current]{color:var(--ink)} .ss-blog-title{font-family:var(--sans); font-size:clamp(2rem,4vw,3rem); font-weight:700; letter-spacing:-.03em; line-height:1.05; color:var(--ink); margin:0} .ss-blog-title::after{content:""; display:block; width:52px; height:4px; border-radius:3px; background:var(--teal); margin-top:14px} /* teal minor accent */ .ss-blog-sub{color:var(--muted); font-size:16px; margin:12px 0 0; font-family:var(--sans)} /* Category filter. Collapsed it is one scrolling row; the fade on the right edge plus the always-visible toggle make it obvious that more categories exist (previously the row just ran off the page with no affordance at all). */ .ss-pills-wrap{display:flex; align-items:flex-start; gap:10px; margin:26px 0 0; padding:4px 0 14px; border-bottom:1px solid var(--line)} .ss-pills-scroll{position:relative; flex:1 1 auto; min-width:0} .ss-pills{display:flex; gap:6px; overflow-x:auto; padding:0 2px; scrollbar-width:none; -webkit-overflow-scrolling:touch} .ss-pills::-webkit-scrollbar{display:none} .ss-pills a{flex:0 0 auto; white-space:nowrap; text-decoration:none; font-size:14.5px; font-weight:600; color:#4a4a52; background:#f2f3f4; border-radius:9px; padding:8px 16px; transition:background .16s,color .16s} .ss-pills a:hover{background:#e9ebec; color:var(--ink)} .ss-pills a.is-active{background:rgba(255,136,46,.14); color:var(--accent-ink)} /* right-edge fade: "there is more this way" */ .ss-pills-scroll::after{content:""; position:absolute; right:0; top:0; bottom:0; width:56px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%); pointer-events:none; transition:opacity .2s} /* toggle: only shown once JS marks the wrap, so no-JS users never get a dead button */ .ss-pills-toggle{display:none; flex:0 0 auto; cursor:pointer; font-family:var(--sans); font-size:14.5px; font-weight:700; color:var(--accent-ink); background:rgba(255,136,46,.14); border:0; border-radius:9px; padding:8px 16px; white-space:nowrap; transition:background .16s} .ss-pills-wrap.ss-js .ss-pills-toggle{display:inline-flex; align-items:center; gap:6px} .ss-pills-toggle:hover{background:rgba(255,136,46,.22)} .ss-pills-toggle::after{content:"\25BE"; font-size:11px; line-height:1; transition:transform .2s} /* expanded: every category visible, wrapped over as many rows as needed */ .ss-pills-wrap.is-open .ss-pills{flex-wrap:wrap; overflow:visible; row-gap:8px} .ss-pills-wrap.is-open .ss-pills-scroll::after{opacity:0} .ss-pills-wrap.is-open .ss-pills-toggle::after{transform:rotate(180deg)} /* ---- the grid -------------------------------------------------------------- */ .blog_holder.blog_large_image{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; float:none !important; width:auto !important; margin:0 !important; font-family:var(--sans); } /* neutralise Stockholm's stacked-list article styles. minmax(0,1fr) + min-width:0 stop the 800px-wide post images from blowing out the grid tracks (unequal columns). */ .blog_holder.blog_large_image article{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; min-width:0; min-height:0; background:#fff; border:1px solid #ececec; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .2s; } .blog_holder.blog_large_image .post_content_holder, .blog_holder.blog_large_image .post_image, .blog_holder.blog_large_image .post_text, .blog_holder.blog_large_image .post_text_inner{min-width:0} /* The `.ss-in` reveal class (0,4,1) out-specified a plain `article:hover` (0,3,1), so once a card had scrolled into view its `transform:none` beat the hover lift and the animation silently died on the live page. Matching the reveal specificity restores it. Keep both selectors: the first covers the no-JS case where `.ss-anim`/`.ss-in` are never added. */ .blog_holder.blog_large_image article:hover, .blog_holder.blog_large_image.ss-anim article.ss-in:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(20,30,40,.10); border-color:#d9d7d2; } /* align-items:stretch is REQUIRED: the parent theme sets `align-items:center` here, which makes .post_image shrink-wrap its content. Below the fold a3-lazy-load swaps in a 1x1 lazy_placeholder.gif, so the image box collapsed to 1x1 (and aspect-ratio then computed off 1px) until the real image loaded — a visible layout jump. */ .blog_holder.blog_large_image .post_content_holder{ display:flex; flex-direction:column; height:100%; margin:0 !important; padding:0 !important; align-items:stretch !important; } /* media: fixed 16:9, cover crop (works with a3-lazy-load placeholder gif). float/width !important beat the parent theme's `.post_image{float:left;width:30%}`. width:100% (not auto) so the box reserves its 16:9 space even while the src is the 1x1 lazy placeholder — this is what keeps the grid stable and CLS at zero. */ .blog_holder.blog_large_image .post_image{ position:relative; margin:0 !important; padding:0 !important; float:none !important; width:100% !important; align-self:stretch; aspect-ratio:16/9; overflow:hidden; background:#f4f6f7; } .blog_holder.blog_large_image .post_image a{display:block; width:100%; height:100%} .blog_holder.blog_large_image .post_image img{ width:100% !important; height:100% !important; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .blog_holder.blog_large_image article:hover .post_image img{transform:scale(1.05)} /* text block. float/width !important beat the child theme's 30/70 blog float layout (body.blog .blog_holder article .post_image + .post_text { float:left; width:70% }). */ /* padding + gap are the artifact's Clean-direction .card-body values, verbatim */ .blog_holder.blog_large_image .post_text{padding:18px 18px 20px !important; margin:0 !important; float:none !important; width:auto !important; display:flex; flex-direction:column; flex:1} /* CRITICAL: the parent theme's `.blog_holder article .post_text .post_text_inner` (3 classes + a type selector) out-specifies any 2-class rule of ours, so its `padding:45px 50px` was silently adding a SECOND inset inside every card — the text column lost 100px of width (down to ~140px at 390px) and the extra vertical padding inflated the featured hero, over-cropping its image. Reset at higher specificity; all card padding now comes from .post_text alone. */ .blog_holder.blog_large_image article .post_text .post_text_inner{ padding:0 !important; border:0 !important; background:transparent !important; } .blog_holder.blog_large_image .post_text_inner{display:flex; flex-direction:column; gap:9px; height:100%} /* never show Stockholm's default meta cluster (our loop renders its own) */ .blog_holder.blog_large_image .post_info{display:none !important} /* category chip (top of card): soft tint + colored dot + AA-dark text */ .blog_holder.blog_large_image .ss-chip{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; text-decoration:none; background:rgba(var(--cat,245,104,44),.12); color:rgb(var(--cat-ink,181,71,13)); font-size:12.5px; font-weight:700; letter-spacing:.01em; padding:5px 11px; border-radius:999px; line-height:1.2; } .blog_holder.blog_large_image .ss-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:rgb(var(--cat,245,104,44)); flex:0 0 auto} /* author + date + read-time row (bottom of card). Single line: wrapping stranded a separator dot at the end of line 1. The author is the only flexible part, so it ellipses if a name is unusually long. */ .blog_holder.blog_large_image .ss-meta{ display:flex; align-items:center; flex-wrap:nowrap; gap:8px; margin-top:auto; padding-top:6px; font-size:13.5px; font-weight:600; color:var(--muted); min-width:0; } .blog_holder.blog_large_image .ss-avatar{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; letter-spacing:.02em; background:linear-gradient(135deg,#ff882e,#ffb07a); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; } .blog_holder.blog_large_image .ss-author{color:var(--ink); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .blog_holder.blog_large_image .ss-dot{color:var(--faint); flex:0 0 auto} .blog_holder.blog_large_image .time, .blog_holder.blog_large_image .reading-time{color:var(--muted); font-weight:600; white-space:nowrap; flex:0 0 auto} /* "Read article →" — featured card only */ .blog_holder.blog_large_image .ss-readmore{display:none} .blog_holder.blog_large_image article.ss-featured .ss-readmore{ display:inline-flex; margin-top:14px; font-weight:700; color:var(--accent-ink); font-size:15.5px; } /* title */ .blog_holder.blog_large_image .qodef-post-title{ font-size:19.5px !important; line-height:1.28 !important; font-weight:700; letter-spacing:-.015em; margin:0 !important; } .blog_holder.blog_large_image .qodef-post-title a{color:var(--ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .blog_holder.blog_large_image article:hover .qodef-post-title a{color:var(--accent-ink)} /* excerpt */ .blog_holder.blog_large_image .post_excerpt{ color:var(--muted); font-size:15px; line-height:1.5; margin:0 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ---- featured post (first card on page 1 of the main blog) ----------------- */ .blog_holder.blog_large_image article.ss-featured{grid-column:1 / -1; border-radius:16px} .blog_holder.blog_large_image article.ss-featured .post_content_holder{ display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; } /* image fills a bounded panel: the + are absolutely positioned so the image's intrinsic size can NEVER drive the hero height (fixes the giant image). */ /* max-height caps how far a tall text column can stretch the hero image: a 16:9 source stretched past ~460px crops to near-square and cuts the artwork. Capping the image (not the card) means text is never clipped. */ .blog_holder.blog_large_image article.ss-featured .post_image{ position:relative; order:2; height:auto; min-height:340px; max-height:460px; aspect-ratio:auto; overflow:hidden; } .blog_holder.blog_large_image article.ss-featured .post_image a{ position:absolute; inset:0; display:block; width:auto; height:auto; } .blog_holder.blog_large_image article.ss-featured .post_image img{ width:100% !important; height:100% !important; object-fit:cover; } /* the artifact's .feat-body / .feat-title / .feat-ex values, verbatim. The ch max-widths are what keep the hero text from running long and over-stretching the image panel — they are load-bearing, not decoration. */ .blog_holder.blog_large_image article.ss-featured .post_text{order:1; justify-content:center; padding:40px 42px !important} .blog_holder.blog_large_image article.ss-featured .post_text_inner{justify-content:center; gap:14px} .blog_holder.blog_large_image article.ss-featured .ss-meta{margin-top:8px; font-size:14.5px} /* stay grouped, not pinned to bottom */ /* The artifact's 18ch/48ch measures were tuned to its 1172px container. At full width they truncated the hero title mid-sentence, so the title now uses the full text column (already capped by --ss-maxw) and only the excerpt keeps a short measure. Verified: no title in the current feed clips at 3 lines. */ .blog_holder.blog_large_image article.ss-featured .qodef-post-title{ font-size:clamp(1.6rem,2.6vw,2.3rem) !important; line-height:1.08 !important; letter-spacing:-.025em; max-width:none; } .blog_holder.blog_large_image article.ss-featured .qodef-post-title a{-webkit-line-clamp:3} .blog_holder.blog_large_image article.ss-featured .post_excerpt{-webkit-line-clamp:3; font-size:16px; max-width:56ch} .blog_holder.blog_large_image article.ss-featured .ss-readmore{margin-top:2px} /* ---- pagination (Stockholm already outputs numbered