Add heading styles

Corresponds to the Material Design 3 typography styles.

Mapped to roles that deviate the least from the default user agent
stylesheet to minimize disruptive changes to the user experience.

1 files changed, 42 insertions, 0 deletions

diff --git a/static/main.css b/static/main.css
index 33b4487b..41bb960d 100644
--- a/static/main.css
+++ b/static/main.css
@@ -37,6 +37,48 @@ h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited,
     color: rgba(0 0 0 / 87%); /* 87% black */
 }
 
+h1 {
+    /* Display small */
+    font-size: 2.25rem;
+    line-height: 2.75rem;
+    letter-spacing: 0;
+}
+
+h2 {
+    /* Headline small */
+    font-size: 1.5rem;
+    line-height: 2rem;
+    letter-spacing: 0;
+}
+
+h3 {
+    /* Title large */
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+    letter-spacing: 0;
+}
+
+h4 {
+    /* Title medium */
+    font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: 0.009375rem;
+}
+
+h5 {
+    /* Title small */
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    letter-spacing: 0.00625rem;
+}
+
+h6 {
+    /* Label small */
+    font-size: 0.6875rem;
+    line-height: 1rem;
+    letter-spacing: 0.03125rem;
+}
+
 code, pre {
     background-color: #e0e0e0; /* grey300 */
     font-family: "Roboto Mono", monospace;