Fix styling of strapline on homepage

Refs #4634

Author: bmispelon

hypha/home/templates/home/home.html

@@ -13,7 +13,7 @@ <h1 class="font-bold text-h00">
         </h1>
 
         {% if settings.core.SystemSettings.home_strapline %}
-            <p class="mb-8 text-fg-muted text-pretty">{{ settings.core.SystemSettings.home_strapline|nh3|safe }}</p>
+            <div class="strapline">{{ settings.core.SystemSettings.home_strapline|nh3|safe }}</div>
         {% endif %}
 
         {% if funds %}

hypha/static_src/tailwind/components/strapline.css

@@ -0,0 +1,37 @@
+.strapline {
+  @apply mb-8 text-fg-muted text-pretty;
+
+  h1 {
+    font-size: var(--h1-size);
+    @apply leading-tight;
+  }
+  h2 {
+    font-size: var(--h2-size);
+    @apply leading-snug;
+  }
+  h3 {
+    font-size: var(--h3-size);
+    @apply leading-normal;
+  }
+  h4 {
+    font-size: var(--h4-size);
+    @apply leading-normal;
+  }
+  h5 {
+    font-size: var(--h5-size);
+    @apply leading-normal;
+  }
+  h6 {
+    font-size: var(--h6-size);
+    @apply leading-normal;
+  }
+  a {
+    @apply text-primary hover:underline;
+  }
+  ul {
+    @apply list-disc list-inside;
+  }
+  ol {
+    @apply list-decimal list-inside;
+  }
+}

hypha/static_src/tailwind/main.css

@@ -13,6 +13,7 @@
 @import "./utilities/typography.css" layer(utilities);
 @import "./components/link.css" layer(utilities);
 @import "./components/steps.css" layer(utilities);
+@import "./components/strapline.css" layer(utilities);
 @import "./components/nprogress";
 @import "./utilities/misc.css";