never look like paragraph breaks even if a utility class up the cascade sets pre-line. */ white-space: normal; font-size: var(--blog-content-size); line-height: var(--blog-content-line-height); color: var(--phoenix-body-color); margin-top: 0.5rem; /* tighter gap from the action bar above */ } .blog-content > *:first-child { margin-top: 0; } .blog-content p, .blog-content li { white-space: normal; font-size: var(--blog-content-size); line-height: var(--blog-content-line-height); } .blog-content h2 { margin-top: 2.25rem; margin-bottom: 0.5rem; font-size: 1.65rem; line-height: 1.3; font-weight: 800; color: var(--phoenix-emphasis-color); } .blog-content h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.3rem; line-height: 1.3; font-weight: 700; color: var(--phoenix-emphasis-color); } .blog-content img { max-width: 100%; height: auto; border-radius: 0.5rem; } .blog-content blockquote { border-left: 3px solid var(--phoenix-primary); padding: 0.25rem 0 0.25rem 1rem; color: var(--phoenix-secondary-color); } .blog-content table { width: 100%; display: block; overflow-x: auto; } /* Inline code spans. */ .blog-content :not(pre) > code { background: var(--phoenix-tertiary-bg); color: var(--phoenix-emphasis-color); padding: 0.12rem 0.4rem; border-radius: 0.25rem; font-size: 0.9em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; word-break: break-word; } /* Fenced code blocks. Pin base background + color so light + dark modes both stay readable regardless of whether Highlight.js has run. */ .blog-content pre { background: transparent; padding: 0; border-radius: 0.5rem; margin: 1.25rem 0; position: relative; } .blog-content pre code, .blog-content pre code.hljs { display: block; padding: 1rem 1.1rem; border-radius: 0.5rem; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.6; background: var(--phoenix-secondary-bg); color: var(--phoenix-emphasis-color); border: 1px solid var(--phoenix-border-color); } /* ---------- Copy button on every
---------- */
.blog-copy-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.15rem 0.55rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 0.35rem;
border: 1px solid var(--phoenix-border-color);
background: var(--phoenix-emphasis-bg);
color: var(--phoenix-secondary-color);
cursor: pointer;
opacity: 0;
transition: opacity 150ms ease, color 150ms ease,
border-color 150ms ease, background-color 150ms ease;
}
.blog-content pre:hover .blog-copy-btn,
.blog-content pre:focus-within .blog-copy-btn,
.blog-copy-btn:focus-visible {
opacity: 1;
}
.blog-copy-btn:hover {
border-color: var(--phoenix-primary);
color: var(--phoenix-primary-text-emphasis);
}
.blog-copy-btn.copied {
border-color: var(--phoenix-success);
color: var(--phoenix-success-text-emphasis);
opacity: 1;
}
@media (max-width: 575.98px) {
/* Keep the copy button always visible on touch (no hover). */
.blog-copy-btn { opacity: 1; }
}
/* ---------- Boost button ---------- */
.blog-boost {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.95rem;
border-radius: 999px;
border: 1px solid var(--phoenix-border-color);
background: var(--phoenix-emphasis-bg);
color: var(--phoenix-secondary-color);
cursor: pointer;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
position: relative;
transition: color 180ms ease, border-color 180ms ease,
background-color 180ms ease, transform 120ms ease;
}
.blog-boost:hover,
.blog-boost:focus-visible {
border-color: var(--phoenix-primary);
color: var(--phoenix-primary-text-emphasis);
background: var(--phoenix-primary-bg-subtle);
}
.blog-boost.boosted {
background: var(--phoenix-primary-bg-subtle);
color: var(--phoenix-primary-text-emphasis);
border-color: var(--phoenix-primary);
}
.blog-boost-icon {
display: inline-flex;
align-items: center;
font-size: 1rem;
}
.blog-boost-count { font-variant-numeric: tabular-nums; }
.blog-boost-label { font-weight: 600; }
@keyframes blog-boost-pulse {
0% { box-shadow: 0 0 0 0 rgba(56,116,255,0.55); transform: scale(1); }
40% { box-shadow: 0 0 0 14px rgba(56,116,255,0); transform: scale(1.06); }
100% { box-shadow: 0 0 0 0 rgba(56,116,255,0); transform: scale(1); }
}
@keyframes blog-boost-icon-spin {
0% { transform: rotate(0) scale(1); }
50% { transform: rotate(180deg) scale(1.3); }
100% { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
.blog-boost.boost-active {
animation: blog-boost-pulse 700ms ease-out;
}
.blog-boost.boost-active .blog-boost-icon {
animation: blog-boost-icon-spin 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
}
/* ---------- Comment chip ---------- */
.blog-comment-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.95rem;
border-radius: 999px;
border: 1px solid var(--phoenix-border-color);
background: var(--phoenix-emphasis-bg);
color: var(--phoenix-secondary-color);
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: color 180ms ease, border-color 180ms ease,
background-color 180ms ease;
}
.blog-comment-chip:hover,
.blog-comment-chip:focus-visible {
border-color: var(--phoenix-secondary-color);
color: var(--phoenix-emphasis-color);
background: var(--phoenix-secondary-bg);
}
.blog-comment-chip-icon { font-size: 0.95rem; }
/* ---------- Status pills ---------- */
.blog-status-pill {
font-size: 0.7rem;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 0.15rem 0.5rem;
border-radius: 999px;
}
/* ---------- Mobile / small-screen adjustments ---------- */
@media (max-width: 575.98px) {
/* Tighten the share dropdown alignment so it doesn't push off-screen. */
.blog-action-bar .vilvik-share .dropdown-menu {
right: 0 !important;
left: auto !important;
}
/* Stack the action bar so the share button stays in view rather than
getting pushed off the right edge. */
.blog-action-bar {
gap: 0.5rem;
}
/* Smaller paddings on Boost + chip so two of them fit one row. */
.blog-boost,
.blog-comment-chip {
padding: 0.35rem 0.75rem;
font-size: 0.85rem;
}
/* Smaller copy buttons. */
.blog-copy-btn { padding: 0.1rem 0.4rem; font-size: 0.7rem; }
/* Headings and body type comfortable on narrow screens. */
.blog-content { font-size: 1.0625rem; }
.blog-content p,
.blog-content li { font-size: 1.0625rem; }
.blog-content h2 { font-size: 1.35rem; }
.blog-content h3 { font-size: 1.15rem; }
/* Page chrome */
.blog-page { padding: 0; }
.blog-detail-title { font-size: 1.55rem; }
}
/* ---------- EasyMDE toolbar layout ----------
EasyMDE's stock toolbar lets inline-block buttons wrap to a 2nd row
when the viewport is narrower than the icon set. In fullscreen mode
the toolbar is pinned at `position: fixed; height: 50px`, so any
wrapped row is clipped — and since the fullscreen-exit icon sits at
the end of the toolbar, it's the icon most likely to disappear,
stranding users inside fullscreen with no UI escape.
Forcing a single row plus horizontal scroll removes the wrap entirely:
the toolbar's fixed 50 px height is no longer load-bearing, and the
exit icon (now first in editor.js) is anchored at the left edge.
Scoped to .EasyMDEContainer so nothing outside the editor is touched. */
.EasyMDEContainer .editor-toolbar {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
/* When EasyMDE is in fullscreen mode, hide the blog topnav so it does
not visually overlap the fixed-position editor toolbar. The body
class is toggled from editor.js via a MutationObserver on the
.editor-toolbar's class list (EasyMDE adds/removes the `fullscreen`
class itself when its fullscreen action fires). Lock body scroll
too — the editor already manages its own scroll inside the fixed
CodeMirror surface. */
body.blog-editor-fullscreen {
overflow: hidden;
}
body.blog-editor-fullscreen .blog-topnav {
display: none !important;
}
/* ---------- EasyMDE dark-mode parity ----------
EasyMDE's bundled CSS only ships light-mode colours, so the inner
CodeMirror editor stays white-on-white when the app is in dark
theme. The rules below recolour the container, toolbar, status bar,
preview pane, and the inner CodeMirror surface using Phoenix tokens
when data-bs-theme="dark". Scoped to .EasyMDEContainer so nothing
outside it is touched; no JS, no overlay. */
[data-bs-theme="dark"] .EasyMDEContainer {
background: var(--phoenix-emphasis-bg);
color: var(--phoenix-body-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar {
background: var(--phoenix-emphasis-bg);
border-color: var(--phoenix-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar > * {
color: var(--phoenix-body-color);
}
/* Re-hide the separator glyph that the rule above unintentionally
lit up. EasyMDE renders separators as `|`
and relies on `color: transparent` to keep the literal "|" out of
view (the visible line is just border-left/right on a 0-width box).
Since `` defaults to italic, leaving the colour visible makes
the pipe lean like a forward slash next to every separator. */
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar > i.separator {
color: transparent;
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button {
color: var(--phoenix-body-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button:hover,
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar button.active {
background: var(--phoenix-tertiary-bg);
border-color: var(--phoenix-border-color);
color: var(--phoenix-emphasis-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-toolbar i.separator {
border-color: var(--phoenix-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror {
background: var(--phoenix-emphasis-bg);
color: var(--phoenix-emphasis-color);
border-color: var(--phoenix-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-cursor {
border-left-color: var(--phoenix-emphasis-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-selected,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
background: var(--phoenix-primary-bg-subtle);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror-placeholder {
color: var(--phoenix-secondary-color);
opacity: 1;
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-statusbar {
color: var(--phoenix-secondary-color);
background: var(--phoenix-emphasis-bg);
border-color: var(--phoenix-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-preview,
[data-bs-theme="dark"] .EasyMDEContainer .editor-preview-side {
background: var(--phoenix-emphasis-bg);
color: var(--phoenix-body-color);
border-color: var(--phoenix-border-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .editor-preview pre,
[data-bs-theme="dark"] .EasyMDEContainer .editor-preview-side pre {
background: var(--phoenix-secondary-bg);
color: var(--phoenix-emphasis-color);
}
/* Markdown syntax tokens — keep them legible on the dark surface. */
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-header,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-strong {
color: var(--phoenix-emphasis-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-em {
color: var(--phoenix-secondary-color);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-link,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-url {
color: var(--phoenix-primary-text-emphasis);
}
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-comment,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-formatting {
color: var(--phoenix-secondary-color);
}
/* ---------- Cover gallery tiles (editor modal) ---------- */
.cover-gallery-tile {
width: 100%;
background: var(--phoenix-emphasis-bg);
border: 1px solid var(--phoenix-border-color);
border-radius: 0.5rem;
padding: 0;
cursor: pointer;
overflow: hidden;
display: flex;
flex-direction: column;
text-align: left;
transition: transform 150ms ease, border-color 150ms ease,
box-shadow 150ms ease;
}
.cover-gallery-tile:hover,
.cover-gallery-tile:focus-visible {
transform: translateY(-2px);
border-color: var(--phoenix-primary);
box-shadow: 0 6px 16px rgba(20,24,36,0.12);
}
.cover-gallery-tile img {
width: 100%;
aspect-ratio: 1200 / 630;
object-fit: cover;
display: block;
}
.cover-gallery-tile-meta {
padding: 0.5rem 0.75rem 0.7rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
color: var(--phoenix-secondary-color);
}
.cover-gallery-tile-meta strong {
color: var(--phoenix-emphasis-color);
font-size: 0.9rem;
font-weight: 700;
}
.cover-gallery-tile-meta small {
font-size: 0.78rem;
color: var(--phoenix-body-tertiary-color);
}
.cover-gallery-tile.selecting {
pointer-events: none;
opacity: 0.6;
}
/* Belt-and-braces: never let an unexpected wide element create a
horizontal scrollbar at the document level. */
html, body { overflow-x: hidden; max-width: 100vw; }