From 02c8c1e91026a58e7999356bf3348aca15f627e2 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 7 May 2025 23:37:41 -0400
Subject: Provide conventional text styling for message bodies.

Our reset strips out a ton of default browser styles, which is good, but we haven't yet gotten around to adding styles we're using. This left formatted messages

    feeling a
    lot like
    this

regardless of the intended formatting. (Is the above an example of a paragraph? A list? A single line that has gotten wrapped? The answer was "yes.")

To make the margins and padding work out nicely, I've rearranged the positioning containers used for message runs and messages. We also no longer `float` the message handles, since we no longer need to: they can be positioned relative to the message they're part of.

Styling on long bodies of inline code (`like this`) is a bit shaky. The outline overlaps with the following line. I think having a visual cue for where the code block begins and ends is _good_, but I'd like to pick apart some of the other examples on the internet because I think this needs more work.

This change also makes code blocks wrap lines at the page edge where possible (it'll still scroll if wrapping isn't possible). This won't affect _most_ code blocks much - code tends to not be that wide - and it means that using a code block for effect doesn't require people to manually wrap strings. Having tried it both ways, this feels more human.

Dumbnailing is not a _great_ solution to dealing with huge images, but it's the best we can do at rendering time. A more complete solution would require generating images at multiple sizes.
---
 ui/styles/messages.css  | 100 +++++++++++++++++++++++++++++++++++-------------
 ui/styles/variables.css |   3 ++
 2 files changed, 76 insertions(+), 27 deletions(-)

(limited to 'ui')

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index ee946c5..61415e3 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -1,7 +1,5 @@
 .message-run {
-  position: relative;
   border-radius: 0.25rem;
-  padding: 0 0 0.5rem 0;
   margin-top: 1rem;
   margin-bottom: 1rem;
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
@@ -32,31 +30,15 @@
   border-right: 1px solid var(--colour-message-run-username-border);
 }
 
-.message {
-  padding: 0.5rem 0 0 0.5rem;
-  position: relative;
-}
-
-.message a,
-.message a:visited {
-  color: var(--colour-message-run-link-text);
-}
-
-.message a:hover,
-.message a:active {
-  text-decoration: underline;
-}
-
-.message.unsent,
-.message.deleted {
-  color: var(--colour-message-run-unsent-text);
-}
-
 .message.delete-armed,
 .message.delete-armed:hover {
   background-color: var(--colour-warn);
 }
 
+.message {
+  position: relative;
+}
+
 .message:hover {
   background-color: var(--colour-message-hover-bg);
   color: var(--colour-message-hover-text);
@@ -64,12 +46,11 @@
 
 .message .handle {
   --text-size: 0.75rem;
-  float: right;
   line-height: var(--text-size);
   font-size: var(--text-size);
+  position: absolute;
   top: -0.75rem;
   right: 0.5rem;
-  position: absolute;
   padding: 0.25rem;
   border-radius: 0.25rem;
   display: none;
@@ -79,7 +60,7 @@
 }
 
 .message:hover .handle {
-  display: flex;
+  display: inline-block;
 }
 
 .message .handle button {
@@ -90,8 +71,9 @@
 }
 
 .message-body {
-  overflow: auto;
   max-width: 80vw;
+  padding: 0 0.5rem;
+  line-height: 1.2rem;
 
   @media (width > 640px) {
     /* 21rem is width of the nav bar in full-screen mode. */
@@ -99,27 +81,91 @@
   }
 }
 
+.message.unsent,
+.message.deleted,
+.message.unsent :link,
+.message.deleted :link {
+  color: var(--colour-message-run-unsent-text);
+}
+
 .message-body:empty:after {
   content: '.';
   visibility: hidden;
 }
 
+.message-body p,
+.message-body ul,
+.message-body ol,
+.message-body pre {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.message-body ul {
+  list-style-type: disc;
+  list-style-position: outside;
+}
+
+.message-body ol {
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+
+.message-body ul > li,
+.message-body ol > li {
+  margin-left: 2rem;
+}
+
+.message-body ul > li li,
+.message-body ol > li li {
+  margin-left: 1rem;
+}
+
+.message-body img {
+  /* dumbnail images that are bigger than the viewport */
+  max-width: 100%;
+}
+
+.message-body :link,
+.message-body :link:visited {
+  color: var(--colour-message-run-link-text);
+}
+
+.message-body :link:hover,
+.message-body :link:active {
+  text-decoration: underline;
+}
+
+.message-body p > code {
+  white-space: pre-wrap;
+  border: 1px solid #312e81;
+  border-radius: 0.25rem;
+}
+
 /* For rendered message bodies: */
 .message-body blockquote {
   margin-left: 0.25rem;
   padding-left: 0.5rem;
   border-left: 2px solid grey;
   border-radius: 0.125rem;
-  color: grey;
+  color: var(--colour-message-run-blockquote-text);
 }
 
 .message-body pre {
   border: 1px solid #312e81;
   border-radius: 0.25rem;
   padding: 0.25rem;
+  overflow: auto;
+  text-wrap: wrap;
 }
 
 .message-body code,
 .message-body pre {
   font-family: 'FiraCode', monospace;
+  /*
+   * This puts the x-height at about the same x-height as Roboto, our body font. Determined
+   * experimentally and _very_ haphazardly.
+   */
+  font-size: 0.95rem;
+  background-color: var(--colour-message-run-code-bg);
 }
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index ea0e9f5..2758aa1 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -18,6 +18,7 @@
   /* Light text is a bit hard to read; I may need to adjust it. */
   --light-text: color-mix(in srgb, var(--colour-base) 40%, white);
   --dark-text: color-mix(in srgb, var(--colour-base) 40%, black);
+  --mid-text: color-mix(in srgb, var(--dark-text) 75%, var(--light-text));
   --link-text: color-mix(in srgb, var(--colour-base) 40%, blue);
 
   /* Header */
@@ -59,6 +60,8 @@
   --colour-message-run-other-text: var(--dark-text);
   --colour-message-run-link-text: var(--link-text);
   --colour-message-run-unsent-text: var(--light-text);
+  --colour-message-run-blockquote-text: var(--mid-text);
+  --colour-message-run-code-bg: color-mix(in srgb, var(--colour-base) 40%, white);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
   --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);
-- 
cgit v1.2.3


From ce82bb695e946e9ad923c5009480f19b65ab5b8b Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Thu, 8 May 2025 01:14:13 -0400
Subject: Apply rounded borders to inline code inside list elements.

There isn't a good way to target "any <code> not inside a <pre>" so we do a little reverse logic here, as a treat.
---
 ui/styles/messages.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'ui')

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 61415e3..ce5809b 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -136,12 +136,17 @@
   text-decoration: underline;
 }
 
-.message-body p > code {
+.message-body code {
   white-space: pre-wrap;
   border: 1px solid #312e81;
   border-radius: 0.25rem;
 }
 
+.message-body pre > code {
+  white-space: none;
+  border: none;
+}
+
 /* For rendered message bodies: */
 .message-body blockquote {
   margin-left: 0.25rem;
-- 
cgit v1.2.3


From d15bfb2b9a4872cba99bc966fe5c9c4399b3323c Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 8 May 2025 13:23:14 -0400
Subject: Fix horizontal padding on inline code

---
 ui/styles/messages.css | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'ui')

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index ce5809b..9e90926 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -140,6 +140,8 @@
   white-space: pre-wrap;
   border: 1px solid #312e81;
   border-radius: 0.25rem;
+  padding: 0 0.2rem;
+  margin: 0 0.1rem;
 }
 
 .message-body pre > code {
-- 
cgit v1.2.3


From da959c89bced65df94d393350302e200afaec5c2 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
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')

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


From b151b76cbe68375061cb1360b1150d6943c418ce Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Thu, 8 May 2025 22:27:56 -0400
Subject: Prevent double-indenting of the first line of a code block.

For reasons known only to the author, marked emits code blocks as

    <pre><code>your code here</code></pre>

Inline code, on the other hand, is emitted as

    <p>Non-code text <code>code text</code> non-code text.</p>

In d15bfb2b9a4872cba99bc966fe5c9c4399b3323c, we added a rule to give inline code nicer leading and trailing space, so that the borders don't directly abut the letters. However, we neglected to consider code blocks; the padding added for inline code also affected their first line, pushing it in slightly. This removes the padding from `<code>` when it is a direct child of a `<pre>`, as per the markup emitted by marked.
---
 ui/styles/messages.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'ui')

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 26fc779..6b451bc 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -175,6 +175,12 @@
 }
 
 .message-body code {
+  /*
+   * Inline code (`like this`).
+   *
+   * Rules added here will also affect code blocks (```like this```) unless
+   * cancelled out in `.message-body pre > code`.
+   */
   white-space: pre-wrap;
   border: 1px solid #312e81;
   border-radius: 0.25rem;
@@ -183,8 +189,14 @@
 }
 
 .message-body pre > code {
+  /*
+   * Code blocks. Must also cancel out rules from inline code (in `.message-body code`), unless
+   * they should affect code blocks as well.
+   */
   white-space: none;
   border: none;
+  padding: 0;
+  margin: 0;
 }
 
 /* For rendered message bodies: */
-- 
cgit v1.2.3


From efb0accba8be27045fd6f95d736446746aa1cf1e Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Thu, 8 May 2025 22:40:05 -0400
Subject: Make rules targeting inline code more specific.

This prevents the need to go and un-apply unwanted styles when considering code blocks.
---
 ui/styles/messages.css | 43 ++++++++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 19 deletions(-)

(limited to 'ui')

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 6b451bc..c9b6d04 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -174,13 +174,30 @@
   text-decoration: underline;
 }
 
-.message-body code {
-  /*
-   * Inline code (`like this`).
-   *
-   * Rules added here will also affect code blocks (```like this```) unless
-   * cancelled out in `.message-body pre > code`.
-   */
+/*
+ * Inline code only.
+ *
+ * Our markdown processor emits inline code as
+ *
+ *     <p>Some text <code>inline code</code> some text.</p>
+ *
+ * This can also appear inside of other elements:
+ *
+ *     <li>Some text <code>inline code</code></li>
+ *     <p>Some <em>emphasized <code>inline code</code></em></p>
+ *
+ * Code blocks, on the other hand, are emitted as
+ *
+ *     <pre><code>your code here</code></pre>
+ *
+ * (Plus or minus some attributes.)
+ *
+ * A <pre> will only ever directly contain a <code> if it came from a code
+ * block, never from inline code. But both will contain a <code> somewhere.
+ * This selector ensures we only apply these styles to inline code, not to
+ * code blocks (which are styled with `.message-body pre`, below).
+ */
+.message-body :not(pre) > code {
   white-space: pre-wrap;
   border: 1px solid #312e81;
   border-radius: 0.25rem;
@@ -188,18 +205,6 @@
   margin: 0 0.1rem;
 }
 
-.message-body pre > code {
-  /*
-   * Code blocks. Must also cancel out rules from inline code (in `.message-body code`), unless
-   * they should affect code blocks as well.
-   */
-  white-space: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* For rendered message bodies: */
 .message-body blockquote {
   margin-left: 0.25rem;
   padding-left: 0.5rem;
-- 
cgit v1.2.3


From a5108c307f7426a1e3fef420192a41bc8b201034 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Thu, 8 May 2025 22:41:15 -0400
Subject: Remove code block borders.

This styling suggestion c/o Jessamyn Smith! Thanks, Jess. I like it.
---
 ui/styles/messages.css | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'ui')

diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index c9b6d04..5488fa5 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -199,7 +199,6 @@
  */
 .message-body :not(pre) > code {
   white-space: pre-wrap;
-  border: 1px solid #312e81;
   border-radius: 0.25rem;
   padding: 0 0.2rem;
   margin: 0 0.1rem;
@@ -209,12 +208,10 @@
   margin-left: 0.25rem;
   padding-left: 0.5rem;
   border-left: 2px solid grey;
-  border-radius: 0.125rem;
   color: var(--colour-message-run-blockquote-text);
 }
 
 .message-body pre {
-  border: 1px solid #312e81;
   border-radius: 0.25rem;
   padding: 0.25rem;
   overflow: auto;
-- 
cgit v1.2.3