) */
.markdown-preview-view a.grimoire-card,
.markdown-preview-view .grimoire-card {
display: flex;
flex-direction: column;
position: relative;
background-color: var(--background-primary);
color: var(--text-normal) !important;
border: 1px solid var(--background-modifier-border);
border-radius: var(--grimoire-radius);
padding: 0;
text-decoration: none !important;
background-image: none !important;
box-shadow: 4px 4px 0 0 var(--background-modifier-border);
transition:
box-shadow 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
min-height: 160px;
height: 100%;
}
/* Hover: only colour changes, no transform — keeps the card anchored so
it can't drift past its grid cell or the page edge. */
.markdown-preview-view a.grimoire-card:hover,
.markdown-preview-view .grimoire-card:hover {
border-color: var(--grimoire-purple-500);
box-shadow: 4px 4px 0 0 var(--grimoire-purple-300);
color: var(--text-normal) !important;
}
.theme-dark .markdown-preview-view a.grimoire-card,
.theme-dark .markdown-preview-view .grimoire-card {
box-shadow: 4px 4px 0 0 var(--grimoire-grey-800);
}
.theme-dark .markdown-preview-view a.grimoire-card:hover,
.theme-dark .markdown-preview-view .grimoire-card:hover {
border-color: var(--grimoire-purple-400);
box-shadow: 4px 4px 0 0 var(--grimoire-indigo-700);
}
/* Header — title + optional meta, separated by a divider */
.markdown-preview-view .grimoire-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--background-modifier-border);
}
/* Title */
.markdown-preview-view .grimoire-card-title {
display: block;
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text-normal);
margin: 0;
padding: 0;
border: none !important;
text-decoration: none !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Heading elements used directly as the title get the header padding */
.markdown-preview-view .grimoire-card > h1:first-child,
.markdown-preview-view .grimoire-card > h2:first-child,
.markdown-preview-view .grimoire-card > h3:first-child,
.markdown-preview-view .grimoire-card > h4:first-child {
margin: 0 !important;
padding: 0.75rem 1rem !important;
border: none !important;
border-bottom: 1px solid var(--background-modifier-border) !important;
font-family: "Inter", sans-serif !important;
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text-normal);
}
/* Body — main content area, clamps long text like the platform card */
.markdown-preview-view .grimoire-card-body,
.markdown-preview-view .grimoire-card-content,
.markdown-preview-view .grimoire-card-description {
padding: 0.75rem 1rem;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-muted);
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 6;
line-clamp: 6;
-webkit-box-orient: vertical;
}
.markdown-preview-view .grimoire-card-body p,
.markdown-preview-view .grimoire-card-content p {
margin: 0;
}
/* Footer — small meta row at the bottom */
.markdown-preview-view .grimoire-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.6rem 1rem;
border-top: 1px solid var(--background-modifier-border);
font-size: 0.78rem;
color: var(--text-faint);
}
/* Inline tag pill inside a card */
.markdown-preview-view .grimoire-card-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background-color: var(--tag-background);
color: var(--tag-color);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.4;
}
/* Optional accent strip — */
.markdown-preview-view .grimoire-card-accent {
height: 4px;
background: linear-gradient(90deg, var(--grimoire-purple-500), var(--grimoire-aqua-500));
flex-shrink: 0;
}
/* ---- `[!cards]` callout: invisible grid container for nested cards ----
Authored as a wrapper callout that holds nested `[!card]` callouts.
We zero-out every default callout style (border, background, shadow,
padding, margin, title) and turn the content area into a CSS grid.
Selectors are doubled with `.markdown-preview-view` so they win over
the generic `.callout` rules higher in this file even without the
!importants doing the work. */
.markdown-preview-view .callout[data-callout="cards"],
.callout[data-callout="cards"] {
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 1.5rem 0 !important;
display: block !important;
overflow: visible !important;
}
/* Hide the wrapper's title row — also hide siblings like callout-fold or
callout-metadata that some Obsidian builds add. */
.markdown-preview-view .callout[data-callout="cards"] > .callout-title,
.callout[data-callout="cards"] > .callout-title,
.markdown-preview-view .callout[data-callout="cards"] > .callout-fold,
.callout[data-callout="cards"] > .callout-fold {
display: none !important;
}
/* Content area becomes the responsive grid */
.markdown-preview-view .callout[data-callout="cards"] > .callout-content,
.callout[data-callout="cards"] > .callout-content {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
grid-auto-rows: 1fr !important;
gap: 1rem !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
overflow: visible !important;
}
/* Sometimes Obsidian wraps inline children in tags inside the content.
`display: contents` lets the real children participate in the grid. */
.markdown-preview-view .callout[data-callout="cards"] > .callout-content > p,
.callout[data-callout="cards"] > .callout-content > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* Nested `[!card]` callouts inside `[!cards]` are the grid items */
.markdown-preview-view .callout[data-callout="cards"] .callout[data-callout="card"],
.callout[data-callout="cards"] .callout[data-callout="card"] {
margin: 0 !important;
height: 100% !important;
min-width: 0 !important;
width: auto !important;
}
/* Force a 2-column grid: use `[!cards|cols-2]` (handy when the auto-fill
minmax kicks the layout into 1-column on narrower readers). */
.markdown-preview-view .callout[data-callout="cards"][data-callout-metadata="cols-2"] > .callout-content,
.callout[data-callout="cards"][data-callout-metadata="cols-2"] > .callout-content {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.markdown-preview-view .callout[data-callout="cards"][data-callout-metadata="cols-3"] > .callout-content,
.callout[data-callout="cards"][data-callout-metadata="cols-3"] > .callout-content {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.markdown-preview-view .callout[data-callout="cards"][data-callout-metadata="cols-4"] > .callout-content,
.callout[data-callout="cards"][data-callout-metadata="cols-4"] > .callout-content {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* Mobile: collapse the cards grid to a single column */
@media (max-width: 640px) {
.markdown-preview-view .callout[data-callout="cards"] > .callout-content,
.callout[data-callout="cards"] > .callout-content,
.markdown-preview-view .callout[data-callout="cards"][data-callout-metadata] > .callout-content,
.callout[data-callout="cards"][data-callout-metadata] > .callout-content {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
}
/* ---- `[!card]` callout: markdown card (works standalone or in a grid) -- */
.callout[data-callout="card"] {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: var(--grimoire-radius);
box-shadow: 4px 4px 0 0 var(--background-modifier-border);
padding: 0;
margin: 1rem 0;
min-height: 160px;
transition:
box-shadow 0.15s ease,
border-color 0.15s ease;
}
/* When inside .grimoire-cards, the callout is already a grid item:
drop the standalone vertical margin so it hugs the grid gap. */
.markdown-preview-view .grimoire-cards .callout[data-callout="card"] {
margin: 0 !important;
}
/* Hover: colour change only, no transform — keeps the card anchored. */
.callout[data-callout="card"]:hover {
border-color: var(--grimoire-purple-500);
box-shadow: 4px 4px 0 0 var(--grimoire-purple-300);
}
.theme-dark .callout[data-callout="card"] {
box-shadow: 4px 4px 0 0 var(--grimoire-grey-800);
}
.theme-dark .callout[data-callout="card"]:hover {
border-color: var(--grimoire-purple-400);
box-shadow: 4px 4px 0 0 var(--grimoire-indigo-700);
}
.callout[data-callout="card"] .callout-title {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--background-modifier-border);
background: none;
font-weight: 700;
font-size: 1rem;
letter-spacing: -0.01em;
color: var(--text-normal);
}
.callout[data-callout="card"] .callout-icon {
display: none;
}
.callout[data-callout="card"] .callout-title-inner {
font-weight: 700;
font-size: 1rem;
color: var(--text-normal);
}
.callout[data-callout="card"] .callout-content {
padding: 0.75rem 1rem;
font-size: 0.9rem;
line-height: 1.55;
color: var(--text-muted);
flex: 1 1 auto;
min-height: 0;
}
.callout[data-callout="card"] .callout-content > :first-child {
margin-top: 0;
}
.callout[data-callout="card"] .callout-content > :last-child {
margin-bottom: 0;
}
/* Make the title link cover the whole callout so clicking anywhere
on the card navigates to the linked page. */
.callout[data-callout="card"] .callout-title a {
text-decoration: none !important;
background: none !important;
color: var(--text-normal) !important;
}
.callout[data-callout="card"] .callout-title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
/* Mobile: stack cards in a single column */
@media (max-width: 640px) {
.markdown-preview-view .grimoire-cards {
grid-template-columns: 1fr;
gap: 0.75rem;
}
}
/* ---- Suppress Obsidian's hover-preview popover on cards ----------------
The wikilinks inside `[!card]` callouts (and any internal-link inside an
HTML `.grimoire-card`) trigger Obsidian Publish's page-preview popover by
default. Cards already advertise the destination, so the floating preview
is redundant and visually noisy.
We use `:has()` to detect when the cursor is over a card or one of its
descendants and hide the popover element while it's hovered. The popover
lives outside the card in the DOM (it's appended near
), so we
match it from a parent that contains both the popover and the hovered
card — `body` works in every Obsidian Publish layout. */
body:has(.callout[data-callout="card"]:hover) .popover.hover-popover,
body:has(.callout[data-callout="card"] *:hover) .popover.hover-popover,
body:has(.grimoire-card:hover) .popover.hover-popover,
body:has(.grimoire-card *:hover) .popover.hover-popover,
body:has(.callout[data-callout="cards"]:hover) .popover.hover-popover {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ---------------------------------------------------------------------------
24. Grimoire page navigation (bottom-of-page "where to next" block)
----------------------------------------------------------------------------
A titled section with two equal-width buttons that link to other pages.
Designed to live at the bottom of a note as a "Continue reading" / prev-next
style component. Each button shows just a page title — no description.
──── HTML usage ─────────────────────────────────────────────────────────
──── Callout usage (recommended — pure markdown) ────────────────────────
Wrap wikilinks in a `[!nav]` callout. The callout title becomes the
section title; each link becomes a button. Default is 2 columns; use the
`cols-N` metadata to override (cols-1, cols-2, cols-3, cols-4).
> [!nav] Where to next?
> [[Page A|Page A Title]]
> [[Page B|Page B Title]]
> [!nav|cols-3] Continue exploring
> [[Page A|Page A Title]]
> [[Page B|Page B Title]]
> [[Page C|Page C Title]]
--------------------------------------------------------------------------- */
/* Wrapper */
.markdown-preview-view .grimoire-page-nav {
margin: 2.5rem 0 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--background-modifier-border);
/* Reserve 4px on the right + bottom so the buttons' 4×4 hard-offset
shadow has room to render and isn't clipped at the page edge. */
padding-right: 4px;
padding-bottom: 4px;
}
/* Section title */
.markdown-preview-view .grimoire-page-nav-title {
font-family: "Inter", sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 0.85rem;
padding: 0;
border: none;
}
/* Two-button row */
.markdown-preview-view .grimoire-page-nav-buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
/* Button — mirrors the Grimoire card surface (border + 4×4 hard-offset
shadow + purple hover) but at button proportions. */
.markdown-preview-view a.grimoire-page-nav-button,
.markdown-preview-view .grimoire-page-nav-button {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.85rem 1rem;
background-color: var(--background-primary);
color: var(--text-normal) !important;
border: 1px solid var(--background-modifier-border);
border-radius: var(--grimoire-radius);
box-shadow: 4px 4px 0 0 var(--background-modifier-border);
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.01em;
text-decoration: none !important;
background-image: none !important;
transition:
box-shadow 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.markdown-preview-view a.grimoire-page-nav-button:hover,
.markdown-preview-view .grimoire-page-nav-button:hover {
border-color: var(--grimoire-purple-500);
box-shadow: 4px 4px 0 0 var(--grimoire-purple-300);
color: var(--grimoire-purple-700) !important;
}
.theme-dark .markdown-preview-view a.grimoire-page-nav-button,
.theme-dark .markdown-preview-view .grimoire-page-nav-button {
box-shadow: 4px 4px 0 0 var(--grimoire-grey-800);
}
.theme-dark .markdown-preview-view a.grimoire-page-nav-button:hover,
.theme-dark .markdown-preview-view .grimoire-page-nav-button:hover {
border-color: var(--grimoire-purple-400);
box-shadow: 4px 4px 0 0 var(--grimoire-indigo-700);
color: var(--grimoire-purple-200) !important;
}
/* ---- `[!nav]` callout: invisible wrapper that turns into the nav block ---
Strips the default callout chrome, repurposes the callout title as the
section title, and lays the two wikilinks out as buttons. */
.markdown-preview-view .callout[data-callout="nav"],
.callout[data-callout="nav"] {
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 2.5rem 0 1.5rem !important;
border-top: 1px solid var(--background-modifier-border) !important;
/* Reserve 4px on the right + bottom so the buttons' 4×4 hard-offset
shadow has room to render and isn't clipped at the page edge. */
padding: 1.25rem 4px 4px 0 !important;
display: block !important;
}
/* Callout title becomes the section heading */
.markdown-preview-view .callout[data-callout="nav"] > .callout-title,
.callout[data-callout="nav"] > .callout-title {
padding: 0 !important;
margin: 0 0 0.85rem !important;
border: none !important;
background: none !important;
font-family: "Inter", sans-serif !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--text-muted) !important;
}
.markdown-preview-view .callout[data-callout="nav"] .callout-icon,
.callout[data-callout="nav"] .callout-icon {
display: none !important;
}
.markdown-preview-view .callout[data-callout="nav"] .callout-title-inner,
.callout[data-callout="nav"] .callout-title-inner {
font-family: "Inter", sans-serif !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--text-muted) !important;
}
/* Content area becomes the button row — defaults to 2 columns, override
with `[!nav|cols-N]` (rules below). */
.markdown-preview-view .callout[data-callout="nav"] > .callout-content,
.callout[data-callout="nav"] > .callout-content {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.75rem !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
}
/* Column count overrides via callout metadata: `[!nav|cols-N]` */
.markdown-preview-view .callout[data-callout="nav"][data-callout-metadata="cols-1"] > .callout-content,
.callout[data-callout="nav"][data-callout-metadata="cols-1"] > .callout-content {
grid-template-columns: 1fr !important;
}
.markdown-preview-view .callout[data-callout="nav"][data-callout-metadata="cols-2"] > .callout-content,
.callout[data-callout="nav"][data-callout-metadata="cols-2"] > .callout-content {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.markdown-preview-view .callout[data-callout="nav"][data-callout-metadata="cols-3"] > .callout-content,
.callout[data-callout="nav"][data-callout-metadata="cols-3"] > .callout-content {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.markdown-preview-view .callout[data-callout="nav"][data-callout-metadata="cols-4"] > .callout-content,
.callout[data-callout="nav"][data-callout-metadata="cols-4"] > .callout-content {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* Obsidian wraps inline links in — let those participate in the grid */
.markdown-preview-view .callout[data-callout="nav"] > .callout-content > p,
.callout[data-callout="nav"] > .callout-content > p {
display: contents !important;
margin: 0 !important;
padding: 0 !important;
}
/* Each link inside the [!nav] callout becomes a button */
.markdown-preview-view .callout[data-callout="nav"] .callout-content a,
.callout[data-callout="nav"] .callout-content a {
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.85rem 1rem;
background-color: var(--background-primary);
color: var(--text-normal) !important;
border: 1px solid var(--background-modifier-border);
border-radius: var(--grimoire-radius);
box-shadow: 4px 4px 0 0 var(--background-modifier-border);
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.01em;
text-decoration: none !important;
background-image: none !important;
transition:
box-shadow 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.markdown-preview-view .callout[data-callout="nav"] .callout-content a:hover,
.callout[data-callout="nav"] .callout-content a:hover {
border-color: var(--grimoire-purple-500);
box-shadow: 4px 4px 0 0 var(--grimoire-purple-300);
color: var(--grimoire-purple-700) !important;
}
.theme-dark .markdown-preview-view .callout[data-callout="nav"] .callout-content a,
.theme-dark .callout[data-callout="nav"] .callout-content a {
box-shadow: 4px 4px 0 0 var(--grimoire-grey-800);
}
.theme-dark .markdown-preview-view .callout[data-callout="nav"] .callout-content a:hover,
.theme-dark .callout[data-callout="nav"] .callout-content a:hover {
border-color: var(--grimoire-purple-400);
box-shadow: 4px 4px 0 0 var(--grimoire-indigo-700);
color: var(--grimoire-purple-200) !important;
}
/* Mobile: stack all nav buttons vertically (overrides any cols-N) */
@media (max-width: 640px) {
.markdown-preview-view .grimoire-page-nav-buttons,
.markdown-preview-view .callout[data-callout="nav"] > .callout-content,
.callout[data-callout="nav"] > .callout-content,
.markdown-preview-view .callout[data-callout="nav"][data-callout-metadata] > .callout-content,
.callout[data-callout="nav"][data-callout-metadata] > .callout-content {
grid-template-columns: 1fr !important;
gap: 0.5rem !important;
}
}
/* Suppress Obsidian's hover-preview popover on nav buttons (same trick we
use for cards — the button text already advertises the destination). */
body:has(.callout[data-callout="nav"] a:hover) .popover.hover-popover,
body:has(.grimoire-page-nav-button:hover) .popover.hover-popover {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ---------------------------------------------------------------------------
25. Misc polish
--------------------------------------------------------------------------- */
.markdown-preview-view strong {
color: var(--text-normal);
font-weight: 700;
}
.markdown-preview-view em {
color: var(--text-normal);
}
.markdown-preview-view mark {
background-color: var(--text-highlight-bg);
color: var(--text-normal);
padding: 0 0.2em;
border-radius: 3px;
}
/* Mobile tweaks */
@media (max-width: 768px) {
.markdown-preview-view,
.published-container .markdown-preview-sizer {
padding: 1.25rem 1rem !important;
}
.markdown-preview-view h1 { font-size: 1.75rem; }
.markdown-preview-view h2 { font-size: 1.4rem; }
.markdown-preview-view h3 { font-size: 1.15rem; }
}