/* * Magazine Updated — modern minimalist refresh. * Layered on top of style-2.4.1.min.css rather than editing it directly, so * the base theme (shared history with "magazine") stays untouched and this * file alone can be reviewed/rolled back. * * Signature idea: post metadata (category, date, reading time) reads like a * wire-service dataline — small, monospaced, uppercase — a nod to the site's * subject (tech/code) without going full "hacker" dark-mode cliche. * * IMPORTANT: --vr-font-primary/secondary/tertiary are the site's existing * ADMIN-CONFIGURABLE fonts (Settings > Fonts, backed by the `fonts` table * and rendered dynamically via getFontFamily()/getFontURL()). This file must * never redeclare them — whatever the admin picks there should keep flowing * through untouched. The only new typeface introduced here is a monospace * face for the dataline signature below, which has no existing dynamic slot * to hook into. --vr-theme-color (the site's existing brand blue) is also * left alone so this stays "the same site, sharper" rather than a rebrand. */ /* ---------- Design tokens ---------- */ :root { --mu-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --mu-paper: #fafaf8; --mu-surface: #ffffff; --mu-ink: #14171a; --mu-muted: #6b7280; --mu-rule: #e4e2dd; --mu-signal-dim: #e8eeff; --mu-radius: 10px; } /* Site-wide dark mode (the .dark-mode class the theme's own toggle adds to ) — these tokens are used all over this file, so without a dark counterpart, dark text renders on the theme's dark background and disappears (this is what happened to the prev/next article titles). */ .dark-mode { --mu-paper: #0f0f0f; --mu-surface: #1a1a1a; --mu-ink: #fdfdfd; --mu-muted: #9a9a9a; --mu-rule: #2a2a2a; --mu-signal-dim: #16233f; } /* ---------- Base ---------- */ body { background-color: var(--mu-paper); color: var(--mu-ink); } h1, h2, h3, h4, h5, h6, .title, .page-title, .widget-title { font-weight: 600; letter-spacing: -0.01em; } a { transition: color .15s ease; } /* Author name / timestamp / reading time (.post-meta, .small-post-meta, .item-meta-*) intentionally left unstyled here — they keep the theme's original appearance and fonts, per explicit feedback that the monospace treatment tried here didn't work for that text. */ /* ---------- Category badge as a small mono pill ---------- */ .badge-category { font-family: var(--mu-font-mono) !important; text-transform: uppercase; font-weight: 600; font-size: 10px !important; letter-spacing: .05em; border-radius: 4px; padding: 4px 9px !important; } /* ---------- Cards ---------- */ .post-item { border-radius: var(--mu-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; padding: 7px; } .post-item .image { border-radius: var(--mu-radius) var(--mu-radius) 0 0; overflow: hidden; } .post-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 23, 26, .09); } .post-item .title { font-family: var(--vr-font-secondary); line-height: 1.3; } .post-item .title a { color: var(--mu-ink); } .post-item .title a:hover { color: var(--vr-theme-color); } .post-item .description { color: var(--mu-muted); font-size: 14px; line-height: 1.55; } /* ---------- Hero / featured slider ---------- */ .section-featured { padding: 28px 0 8px; } .main-slider .caption .title, .section-featured .item .title { font-family: var(--vr-font-secondary); letter-spacing: -0.015em; } .section-featured .item { border-radius: var(--mu-radius); overflow: hidden; } /* ---------- Header ---------- */ #nav-top { border-bottom: 1px solid var(--mu-rule); box-shadow: none !important; } .nav-main { box-shadow: none !important; border-bottom: 1px solid var(--mu-rule); } /* ---------- Footer ---------- The base theme's footer is already permanently dark (#0d0d0d, light text) regardless of the site's light/dark mode toggle — that's the correct, existing behavior. Only touch the typographic details here; never override its background/border colors. */ .footer-widget .widget-title { font-family: var(--mu-font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; } /* ---------- Category / listing page ---------- */ .page-title { font-family: var(--vr-font-secondary); font-weight: 700; letter-spacing: -0.02em; } .breadcrumb { font-family: var(--mu-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } /* ---------- Single article page ---------- */ .post-summary { color: var(--mu-muted); font-weight: 500; } .post-content .post-text { font-size: 16px; line-height: 1.75; } .post-content .post-text blockquote { border-left: 3px solid var(--vr-theme-color); background: var(--mu-signal-dim); border-radius: 0 var(--mu-radius) var(--mu-radius) 0; padding: 16px 20px; font-style: normal; } /* ---------- Short URL / copy-link row ---------- A quiet inline row (hairline divider, no card box) rather than another floating bordered box — this sits directly under the tag list and reads as one continuous "article utilities" strip together with prev/next. */ .short-url-box { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--mu-rule); padding: 14px 0; font-size: 13px; } .short-url-box .short-url-icon { color: var(--mu-muted); flex-shrink: 0; } #short-url-label { color: var(--mu-muted); flex-shrink: 0; } #short-url { color: var(--mu-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; min-width: 0; } .btn-copy { display: inline-flex; align-items: center; gap: 5px; background: none; color: var(--vr-theme-color); border: none; padding: 4px 2px; font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: opacity .15s ease; } .btn-copy:hover { opacity: .7; } .btn-copy:active { opacity: .5; } .btn-copy.copied { color: #1a8a4a; } /* ---------- Previous / next article ---------- One shared strip split into two halves rather than two separate floating cards — a single hairline divider on top, and another between the two halves on mobile where they stack. Text always reads left-aligned; only the icon position/label order signals direction, so it doesn't flip into an awkward right-aligned block once the columns stack on small screens. */ .post-next-prev { border-top: 1px solid var(--mu-rule); padding: 4px 0 0; } .next-prev-card { display: block; height: 100%; padding: 18px 0; border-bottom: 1px solid var(--mu-rule); transition: opacity .15s ease; } @media (min-width: 576px) { .next-prev-card { border-bottom: none; } .col-sm-6.left .next-prev-card { padding-right: 20px; } .col-sm-6.right .next-prev-card { padding-left: 20px; border-left: 1px solid var(--mu-rule); } } .next-prev-card:hover { opacity: .7; } .next-prev-card .head-title { display: flex; align-items: center; gap: 8px; color: var(--mu-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; } .next-prev-card .title { color: var(--mu-ink); font-size: 15px; line-height: 1.4; margin: 0; } .next-prev-card:hover .title { color: var(--vr-theme-color); } /* ---------- Reactions: modern chips with native emoji ---------- */ .emoji-reactions-container { margin-bottom: 40px; border-top: 1px solid var(--mu-rule); border-bottom: 1px solid var(--mu-rule); padding: 22px 0; } .emoji-reactions-container .title-reactions { text-transform: none; font-size: 14px; font-weight: 600; color: var(--mu-muted); margin-bottom: 16px; text-align: center; } /* Icon + count only, no text label — small enough that all 7 wrap cleanly on any screen width, no orphan-row or overflow handling needed. */ .emoji-reactions { flex-wrap: wrap; justify-content: center; } .emoji-reactions .reaction { position: relative; flex-direction: row; align-items: center; width: auto; gap: 6px; padding: 8px 12px; background: var(--mu-surface); border: 1px solid var(--mu-rule); border-radius: 999px; white-space: nowrap; } .emoji-reactions .reaction:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 23, 26, .08); } .emoji-reactions .emoji { /* the PNG icon set looks dated at small size — swap in a crisp native emoji per reaction instead, matched on the image's own filename so no shared view file (app/Views/common/) needs to change */ display: none; } .emoji-reactions .reaction:before { font-size: 18px; line-height: 1; } .emoji-reactions .reaction:has(img[src*="/reactions/like.png"]):before { content: "👍"; } .emoji-reactions .reaction:has(img[src*="/reactions/dislike.png"]):before { content: "👎"; } .emoji-reactions .reaction:has(img[src*="/reactions/love.png"]):before { content: "❤️"; } .emoji-reactions .reaction:has(img[src*="/reactions/funny.png"]):before { content: "😂"; } .emoji-reactions .reaction:has(img[src*="/reactions/angry.png"]):before { content: "😠"; } .emoji-reactions .reaction:has(img[src*="/reactions/sad.png"]):before { content: "😢"; } .emoji-reactions .reaction:has(img[src*="/reactions/wow.png"]):before { content: "😮"; } /* text label intentionally hidden — reaction is identified by the emoji alone */ .emoji-reactions .text { display: none; } .emoji-reactions .selected { background: var(--mu-signal-dim); border-color: var(--vr-theme-color); } .emoji-reactions .reaction .vote { position: static; display: inline-block; background: var(--mu-paper) !important; color: var(--mu-muted); font-size: 11px; line-height: 1; white-space: nowrap; } .emoji-reactions .selected .vote { color: var(--vr-theme-color); } .emoji-reactions .reaction.disabled { opacity: .55; } /* Fallback for browsers without :has() support: keep the original PNG icon + text label visible instead of an empty pill. */ @supports not selector(:has(a)) { .emoji-reactions .emoji { display: block; width: 22px; height: 22px; } .emoji-reactions .reaction:before { content: none; } .emoji-reactions .text { display: block; } } /* ---------- Motion / accessibility floor ---------- */ @media (prefers-reduced-motion: reduce) { .post-item, .post-item:hover { transition: none; transform: none; } } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--vr-theme-color); outline-offset: 2px; }