Wiki shortcode visuals
Three SCSS files that style content rendered by the markdown shortcodes — wiki-quotes (blockquotes + `library`), wiki-cite (`cite`), wiki-shortcodes (info / definition boxes).
On this page
Three Bifrost SCSS files style the visual surface of the content shortcodes. They’re documented together because they form a single rendering layer — every shortcode invoked inside markdown ends up styled by one of these files.
.wiki-content blockquote + .library-quote#
Source: themes/bifrost/sass/components/_wiki-quotes.scss
Styles two things:
| Selector | What |
|---|---|
.wiki-content blockquote | Enhanced markdown blockquotes inside articles — gradient border, rounded corners, decorative quote glyph. |
.library-quote | The structured library-quote block rendered by the library shortcode. |
.library-quote__button | The “Read in Book” CTA — uses glass-cloud-button with a mauve→cyan duo. |
.wiki-cite#
Source: themes/bifrost/sass/components/_wiki-cite.scss
Styles the inline citation markers rendered by the cite shortcode, and — through the shared %ref-marker / %ref-marker-link placeholders — the lettered footnote markers (.wiki-footnote) and Markdown footnote refs (.footnote-ref), so all three read as the same kind of annotation: a small accent-coloured superscript in font-family-tech, no chip or border, underlined only on hover. The markers opt out of the host page’s body-link underline via > a:link / > a:visited.
| Class | What |
|---|---|
.wiki-cite | Wrapper, vertical-align: super, font-size: 0.62em, line-height: 0. Adjacent markers get a hairline gap. |
.wiki-cite__link | The marker itself — accent text, underline on hover. |
.wiki-footnote, .footnote-ref | Same treatment for lettered and Markdown footnotes. |
.wiki-info-box + .wiki-definition-box#
Source: themes/bifrost/sass/components/_wiki-shortcodes.scss
Styles the boxes rendered by info and definition.
| Class | Rendered by |
|---|---|
.wiki-info-box | info |
.wiki-definition-box | definition |
Both: bordered + rounded, with a 4px accent stripe down the left edge and a header row (icon + title) above the body content.
Live examples#
- Any wiki entry mixes all of these, e.g. /wiki/elohim/ (blockquote, citations, info boxes, library-quote block).
Related#
- Content shortcodes — the markdown-facing API these styles render.
glass-cloud-button— used by.library-quote__button.