From 836a868abcca409eb9c7f8539dad1b8942b204c2 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:21:28 -0800
Subject: [PATCH] UI: improve the heading fonts

---
 css/html_instruct_style.css | 19 ++++--------
 css/main.css                | 58 +++++++++++++++++++++++++++++++++----
 2 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/css/html_instruct_style.css b/css/html_instruct_style.css
index f6ceb932..5591f7d1 100644
--- a/css/html_instruct_style.css
+++ b/css/html_instruct_style.css
@@ -17,28 +17,19 @@
     line-height: 28px !important;
 }
 
-.dark .chat .message-body p,
-.dark .chat .message-body li,
-.dark .chat .message-body q {
+.dark .chat .message-body :is(p, li, q, h1, h2, h3, h4, h5, h6) {
     color: #d1d5db !important;
 }
 
-.chat .message-body p,
-.chat .message-body ul,
-.chat .message-body ol {
-    margin-top: 1.25em !important;
-    margin-bottom: 1.25em !important;
+.chat .message-body :is(p, ul, ol) {
+    margin: 1.25em 0 !important;
 }
 
-.chat .message-body p:first-child,
-.chat .message-body ul:first-child,
-.chat .message-body ol:first-child {
+.chat .message-body :is(p, ul, ol):first-child {
     margin-top: 0 !important;
 }
 
-.chat .message-body p:last-child,
-.chat .message-body ul:last-child,
-.chat .message-body ol:last-child {
+.chat .message-body :is(p, ul, ol):last-child {
     margin-bottom: 0 !important;
 }
 
diff --git a/css/main.css b/css/main.css
index fef3d3f1..7b3910f9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -433,12 +433,60 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
     padding-top: 20px;
 }
 
-.message-body h1,
-.message-body h2,
-.message-body h3,
+.message-body {
+    font-size: 16px;
+}
+
+.message-body :is(h1, h2, h3, h4, h5, h6) {
+    color: black !important;
+}
+
+.dark .message-body :is(h1, h2, h3, h4, h5, h6) {
+    color: white !important;
+}
+
+.message-body h1 {
+    font-weight: 800;
+    font-size: 2.25em;
+    margin-top: 0;
+    margin-bottom: 0.8888889em;
+    line-height: 1.1111111;
+}
+
+.message-body h2 {
+    font-weight: 700;
+    font-size: 1.5em;
+    margin-top: 2em;
+    margin-bottom: 1em;
+    line-height: 1.3333333;
+}
+
+.message-body h3 {
+    font-weight: 600;
+    font-size: 1.25em;
+    margin-top: 0;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+}
+
 .message-body h4 {
-    color: var(--body-text-color);
-    margin: 20px 0 10px;
+    font-weight: 600;
+    font-size: 1em;
+    margin-top: 0;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+}
+
+.message-body h5 {
+    font-weight: normal;
+    font-size: 1em;
+    margin: 0;
+}
+
+.message-body h6 {
+    font-weight: normal;
+    font-size: 1em;
+    margin: 0;
 }
 
 .dark .message q {