/*
* Rendering for the "safe-but-inert" data-align / data-caption attributes
* that core.richtext.sanitize_filtered_html (see FILTERED_HTML_ALLOWED_ATTRS
* in myri/settings/base.py) lets survive on and
tags
* in Article/Question/Situational rich-text fields.
*
* Important: a bare data-* attribute does NOTHING in a browser on its own —
* it's just inert text sitting on the tag, which is exactly why it was
* safe to let the sanitizer keep it. This stylesheet is what actually
* gives data-align/data-caption visible meaning. Without it, the attribute
* would survive in the saved HTML but the page would look no different.
*
* Scoped to `.rtf-content` — the wrapper class added around every place an
* Article.body / Question.*_text / Situation.*_text field is rendered with
* |safe (templates/content/article_detail.html, templates/admin/questions/
* {question,situation}_preview.html) — rather than a bare `img[data-align]`
* selector, so this can never accidentally style site chrome like
* the navbar logo image.
*
* additionally needs static/js/richtext_content.js:
* CSS generated content (::before/::after) is not rendered on replaced
* elements like in any current browser (Chrome/Firefox/Safari all
* silently skip it), so a caption below an image can't be pure CSS the way
* blockquote's caption below is.
is an ordinary block element
* (not "replaced"), so its data-align/data-caption are handled entirely in
* CSS here — no JS involved for blockquote.
*
* Load this after brand.css (same order in every template that includes
* both) so it can use brand.css's theme tokens directly; every color
* here is a token, so this file follows the light and dark themes.
*/
.rtf-content {
/* Clearfix: keeps a floated aligned image from collapsing this box to
zero height when the image is the only/last thing inside it. */
overflow: auto;
}
/* ---- Article page body panel -----------------------------------------------
.article-body gives Article.body the same --bg-card surface as every
other rich-text panel on the site (Question/Situational preview text
sits inside a Bootstrap .card), so an illustration whose own
background is painted --bg-card blends in seamlessly. Only
templates/content/article_detail.html adds this class —
Question/Situational previews use the surrounding .card for the same
background, which avoids a box-within-a-box. */
.rtf-content.article-body {
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1.5rem;
}
@media (max-width: 575.98px) {
.rtf-content.article-body {
padding: 1rem;
}
}
/* ---- Headings inside rich-text content -----------------------------------
Heading colors and sizes are defined once, in static/css/brand.css's
own "Headings" section (loaded before this file in every template) —
its plain h2–h5 rules already cover every
-
a Filtered/Full HTML author puts inside
.rtf-content (FILTERED_HTML_ALLOWED_TAGS caps content headings at h2-h5;
h1 is reserved for the page's own title, e.g. the Article template's
{{ article.title }}
outside this wrapper). Nothing
.rtf-content-specific is needed here. */
/* ---- — inline code ------------------------------------------------
Filtered/Full HTML only ever produces inline here (there's no
in FILTERED_HTML_ALLOWED_TAGS, and the toolbar's "" button
only wraps the current selection in ... — see
core/editor_widget.py's _SIMPLE_BUTTONS) — so this is sized/padded as
an inline snippet, not a code block. Colors are brand.css's --code-*
tokens: a pale yellow chip in the light theme, a near-black one in
the dark theme, so code stands apart from the card it sits on. */
.rtf-content code {
font-family: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
font-size: 0.9em;
background-color: var(--code-bg);
color: var(--code-fg);
padding: 0.15em 0.4em;
border: 1px solid var(--code-border);
border-radius: 4px;
}
/* ----
— indented, quote-marked, distinctively set ----------
The quote icon is a big serif quotation mark via ::before rather than
an icon font (this site only loads Bootstrap's CSS/JS and MathJax) —
it recolors with the theme for free (plain `color`) and needs no extra
network request. The quote text itself uses an italic serif face,
distinct from the site's default sans-serif body copy.
data-align/data-caption (below) layer on top of this. */
.rtf-content blockquote {
position: relative;
margin: 1.5em 0;
margin-left: 2.5rem;
padding: 0.9em 1.25em 0.9em 3.25rem;
background-color: var(--bg-tint);
border-left: 4px solid var(--link);
border-radius: 0 8px 8px 0;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
color: var(--text-secondary);
}
.rtf-content blockquote::before {
content: "\201C";
position: absolute;
left: 0.6rem;
top: 0.05em;
font-family: Georgia, "Times New Roman", serif;
font-style: normal;
font-size: 2.75rem;
line-height: 1;
color: var(--link);
opacity: 0.85;
}
/* ---- spacing, all alignments including "none" ---------------------
Each alignment (left, right, center) has its own padding/margin.
box-sizing: border-box on the shared base rule keeps that padding from
fighting max-width: 50% on the floated variants below. A bare
with no data-align gets the same base padding plus a small margin of
its own, and stays inline (not display:block) so it flows with the
surrounding text.
When an image also carries data-caption, static/js/richtext_content.js
MOVES that attribute from the onto the .rtf-caption-wrap span it
builds around it (see that file) — so the [data-align] rules below only
ever match a bare, uncaptioned , never one that's already inside a
caption wrapper. That avoids two different rules fighting to
float/center the same element. */
.rtf-content img {
box-sizing: border-box;
max-width: 100%;
height: auto;
padding: 0.35em;
}
.rtf-content img:not([data-align]) {
margin: 0.5em;
}
/* An inline