/* colortext.css — Atacama Markup Language (AML) rendered-content styling. This styles the HTML emitted by internal/aml/generator.go: colortext blocks, literal text, emphasis, multi-line quotes (MLQ), wiki links, and Chinese annotations. It is loaded anywhere a post body (post.BodyHTML) is rendered. The colortext colours carry semantic meaning: xantham sarcastic / overconfident green technical content red forceful statements teal AI-generated content orange counterpoints blue voice from beyond quote quoted material violet serious announcements mogue actions taken gray past stories hazel storytelling music musical notes Colortext blocks are FOOTNOTE-equivalent: the body is collapsed by default and revealed by clicking the sigil (see the toggle handler in main.js). The colour variables track the lite/dark theme set on . */ /* ── Colortext colour variables ───────────────────────────────────────────── */ :root, [data-theme="lite"] { --color-xantham: #A0522D; --color-red: #FF4136; --color-orange: #FF851B; --color-quote: #B8860B; --color-green: #2E8B2E; --color-teal: #1c9c9c; --color-blue: #0074D9; --color-violet: #673AB7; --color-mogue: #4A006A; --color-gray: #666666; --color-hazel: #8B4513; } [data-theme="dark"] { --color-xantham: #d4734f; --color-red: #ff6b63; --color-orange: #ffab5e; --color-quote: #ffd700; --color-green: #50ff62; --color-teal: #50e5e5; --color-blue: #4a9eff; --color-violet: #9c6fdf; --color-mogue: #b54aff; --color-gray: #a0a0a0; --color-hazel: #d4a373; } /* ── Colortext block shell ────────────────────────────────────────────────── */ [class^="color-"], .colorblock { display: inline; cursor: pointer; border-radius: 3px; } /* The sigil is the always-visible footnote marker; clicking it toggles the body. */ .sigil { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05em; vertical-align: middle; padding: 0 1px; border-radius: 4px; user-select: none; } /* Footnote body: collapsed by default, revealed when .expanded is added. */ .colortext-content { display: none; margin-left: 0.35em; padding: 1px 3px; border-radius: 3px; border: 1px solid currentColor; } .colortext-content.expanded { display: inline; } /* ── Per-colour treatment (applied to the expanded body) ──────────────────── */ .color-xantham .colortext-content { color: var(--color-xantham); font-style: italic; } .color-red .colortext-content { color: var(--color-red); font-weight: bold; } .color-orange .colortext-content { color: var(--color-orange); } .color-yellow .colortext-content, .color-quote .colortext-content { color: var(--color-quote); background-color: rgba(184, 134, 11, 0.10); } .color-green .colortext-content { color: var(--color-green); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background-color: rgba(46, 139, 46, 0.06); } .color-teal .colortext-content { color: var(--color-teal); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .color-blue .colortext-content { color: var(--color-blue); font-style: italic; } .color-violet .colortext-content { color: var(--color-violet); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .color-musicnote .colortext-content { color: var(--color-violet); letter-spacing: 0.05em; } .color-mogue .colortext-content { color: var(--color-mogue); } .color-gray .colortext-content { color: var(--color-gray); font-style: italic; } .color-hazel .colortext-content { color: var(--color-hazel); font-style: italic; } /* Tint the sigil with its colour so the footnote type is recognisable collapsed. */ .color-xantham .sigil { color: var(--color-xantham); } .color-red .sigil { color: var(--color-red); } .color-orange .sigil { color: var(--color-orange); } .color-yellow .sigil, .color-quote .sigil { color: var(--color-quote); } .color-green .sigil { color: var(--color-green); } .color-teal .sigil { color: var(--color-teal); } .color-blue .sigil { color: var(--color-blue); } .color-violet .sigil { color: var(--color-violet); } .color-musicnote .sigil { color: var(--color-violet); } .color-mogue .sigil { color: var(--color-mogue); } .color-gray .sigil { color: var(--color-gray); } .color-hazel .sigil { color: var(--color-hazel); } /* ── Literal text ( << verbatim >> ) ─────────────────────────────────────── */ .literal-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background-color: var(--bg-code); padding: 0.05em 0.35em; border-radius: 4px; border: 1px solid var(--border); } /* ── Emphasis ( *text* ) ─────────────────────────────────────────────────── */ .post-body em { font-style: italic; } /* ── Inline title ─────────────────────────────────────────────────────────── */ .inline-title { font-weight: 600; font-size: 1.1em; color: var(--text-muted); padding: 0 0.3em; border-bottom: 2px solid var(--accent); display: inline-block; margin: 0 0.2em; } /* ── Multi-line quote (MLQ) ───────────────────────────────────────────────── */ .mlq { border-left: 3px solid var(--border); margin: 1em 0; padding: 0.25em 0 0.25em 0.75em; background-color: var(--bg-card); border-radius: 0 4px 4px 0; } .mlq-collapse { background: none; border: none; cursor: pointer; padding: 0; margin-right: 0.4em; font-size: 1em; color: inherit; vertical-align: top; } .mlq-content { display: inline-block; vertical-align: top; } .mlq-content > p:first-child { margin-top: 0; } .mlq-content > p:last-child { margin-bottom: 0; } /* Collapsed MLQ: hide the body, keep the toggle button. */ .mlq.collapsed .mlq-content { display: none; } /* MLQ colour accents reuse the colortext palette via the color-* class. */ .mlq.color-xantham { border-left-color: var(--color-xantham); } .mlq.color-red { border-left-color: var(--color-red); } .mlq.color-orange { border-left-color: var(--color-orange); } .mlq.color-quote { border-left-color: var(--color-quote); } .mlq.color-green { border-left-color: var(--color-green); } .mlq.color-teal { border-left-color: var(--color-teal); } .mlq.color-blue { border-left-color: var(--color-blue); } .mlq.color-violet { border-left-color: var(--color-violet); } .mlq.color-mogue { border-left-color: var(--color-mogue); } .mlq.color-gray { border-left-color: var(--color-gray); } .mlq.color-hazel { border-left-color: var(--color-hazel); } /* ── Wiki links & Chinese annotations ─────────────────────────────────────── */ .wikilink { color: var(--color-blue); text-decoration: none; border-bottom: 1px dotted currentColor; } .wikilink:hover { border-bottom-style: solid; } .annotated-chinese { cursor: help; border-bottom: 1px dotted var(--text-muted); } /* Hard-word marks. Emitted by internal/annotate when the reader views a post with annotations enabled (?ea=1): words absent from the vocabulary are followed by a small clickable superscript whose note body is collapsed by default and revealed on click (same footnote model as colortext blocks). The note currently just reads "hard word"; it is the slot for future sentence-decomposition detail. */ .hardword-mark { cursor: pointer; color: var(--color-orange); font-size: 0.7em; line-height: 0; padding: 0 1px; user-select: none; } .hardword-note { display: none; margin-left: 0.35em; padding: 1px 3px; border-radius: 3px; border: 1px solid var(--color-orange); color: var(--color-orange); font-size: 0.85em; } .hardword-note.expanded { display: inline; } /* ── Section break / read-more sigil from AML ─────────────────────────────── */ /* Fancy divider: a centered rule that fades out toward the edges with a small diamond ornament floating over its midpoint. Used for `----` (.section-break) and the `--MORE--` content boundary (.content-sigil). */ .section-break { border: none; height: 1px; margin: 2em auto; width: 60%; background: linear-gradient(to right, transparent, var(--border) 25%, var(--border) 75%, transparent); overflow: visible; position: relative; } .section-break::after { content: "\25C7"; /* ◇ white diamond */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 0.6em; background: var(--bg); color: var(--text-dimmer); font-size: 0.85em; line-height: 1; } .content-sigil { text-align: center; color: var(--text-dimmer); margin: 2em 0; /* Replace the raw bar glyphs with a fancy ornamented divider. */ font-size: 0; } .content-sigil::before { content: "\2767"; /* ❧ rotated floral heart bullet */ display: block; font-size: 1.4rem; line-height: 1; color: var(--text-dimmer); } .readmore { color: var(--text-muted); font-style: italic; }