Added header and blockquote styling to rendered HTML in answers

rimutaka · Nov 15, 2024 · 6f3d3c8 · 6f3d3c8
1 parent f9a5f02
commit 6f3d3c8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/vue/dist/assets/index-DrGM8R9b.css → vue/dist/assets/index-B91PZRg4.css b/vue/dist/assets/index-DrGM8R9b.css → vue/dist/assets/index-B91PZRg4.css
diff --git a/vue/dist/assets/index-TmvYsGRU.js → vue/dist/assets/index-ClQtlodD.js b/vue/dist/assets/index-TmvYsGRU.js → vue/dist/assets/index-ClQtlodD.js
diff --git a/vue/dist/index.html b/vue/dist/index.html
@@ -25,8 +25,8 @@
   <meta name="twitter:title" content="Bite-sized learning" />
   <meta name="twitter:description" content="How I find and fill gaps in my knowledge one question at a time" />
   <meta name="twitter:image" content="https://bitesized.info/og-images-1200/default-627.png" />
-  <script type="module" crossorigin src="/assets/index-TmvYsGRU.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-DrGM8R9b.css">
+  <script type="module" crossorigin src="/assets/index-ClQtlodD.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-B91PZRg4.css">
 </head>
 
 <body>

diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css
@@ -180,7 +180,7 @@ footer a {
 
 .q-card p:not(:first-child),
 .md-rendered p:not(:first-child) {
-  @apply mt-4;
+  @apply mt-2;
 }
 
 .q-card ul,
@@ -217,6 +217,25 @@ footer a {
   @apply font-mono text-sm rounded-none p-2 md:w-fit block overflow-x-auto;
 }
 
+.q-card h1, .md-rendered h1 {
+  @apply text-2xl font-bold mt-6 mb-4;
+}
+
+.q-card h2, .md-rendered h2 {
+  @apply text-xl font-bold mt-6 mb-2;
+}
+
+.q-card h3, .md-rendered h3 {
+  @apply text-lg font-bold mt-4 mb-1;
+}
+
+.q-card h4, .md-rendered h4 {
+  @apply text-base font-bold mt-4;
+}
+
+.q-card blockquote, .md-rendered blockquote {
+  @apply border-l-4 border-slate-300 ps-2 my-1;
+}
 /* Contribute card */
 
 .contribute-card {