From da959c89bced65df94d393350302e200afaec5c2 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Thu, 8 May 2025 18:52:49 -0400 Subject: Stlye headings, as well. This is a fairly simple approach using a linearly-reducing scale (from 2.25 down to 1.0) to adjust both the font size and the line height. All headings are bold, and are in the body typeface. People who actually use headings in _chat messages_ are doing a bit, but hey, bits are valid. --- ui/styles/messages.css | 40 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) (limited to 'ui/styles/messages.css') diff --git a/ui/styles/messages.css b/ui/styles/messages.css index 9e90926..26fc779 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -96,11 +96,49 @@ .message-body p, .message-body ul, .message-body ol, -.message-body pre { +.message-body pre, +.message-body h5, +.message-body h6 { margin-top: 0.5rem; margin-bottom: 0.5rem; } +.message-body h1, +.message-body h2, +.message-body h3, +.message-body h4, +.message-body h5, +.message-body h6 { + font-size: var(--heading-font-size); + line-height: calc(var(--heading-font-size) * 1.2); + margin-top: 0.75rem; + margin-bottom: 0.5rem; +} + +.message-body h1 { + --heading-font-size: 2.25rem; +} + +.message-body h2 { + --heading-font-size: 2rem; +} + +.message-body h3 { + --heading-font-size: 1.75rem; +} + +.message-body h4 { + --heading-font-size: 1.5rem; +} + +.message-body h5 { + --heading-font-size: 1.25rem; +} + +.message-body h6 { + --heading-font-size: 1rem; +} + .message-body ul { list-style-type: disc; list-style-position: outside; -- cgit v1.2.3