Cleanup blog headers

remix-run · Jul 9, 2024 · 0c4d825 · 0c4d825
1 parent 25434b9
commit 0c4d825
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/app/routes/_extras.blog.$slug.tsx b/app/routes/_extras.blog.$slug.tsx
@@ -1,11 +1,15 @@
-import type { HeadersFunction, LoaderFunctionArgs } from "@remix-run/node";
+import type {
+  HeadersFunction,
+  LinksFunction,
+  LoaderFunctionArgs,
+} from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
 import { json } from "@remix-run/node";
 import invariant from "tiny-invariant";
 
 import { getBlogPost } from "~/lib/blog.server";
-import "~/styles/md.css";
+import mdStyles from "~/styles/md.css?url";
 import { useRef } from "react";
 import { useDelegatedReactRouterLinks } from "~/ui/delegate-links";
 import { CACHE_CONTROL } from "~/lib/http.server";
@@ -29,6 +33,10 @@ export const headers: HeadersFunction = ({ loaderHeaders }) => {
   return loaderHeaders;
 };
 
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: mdStyles },
+];
+
 export const meta: MetaFunction<typeof loader> = (args) => {
   let { data, params } = args;
   let { slug } = params;
@@ -105,9 +113,9 @@ export default function BlogPost() {
                     {post.dateDisplay}
                   </div>
                   <div className="h-2" />
-                  <div className="font-display text-3xl font-extrabold text-white md:text-4xl">
+                  <h1 className="font-display text-3xl font-extrabold text-white md:text-4xl">
                     {post.title}
-                  </div>
+                  </h1>
                   <div className="h-2" />
                 </div>
                 <div className="pb-4 md:pb-12">

diff --git a/app/styles/md.css b/app/styles/md.css
@@ -63,15 +63,17 @@
   }
 
   & h2 {
-    @apply text-2xl font-extrabold dark:text-gray-200 md:text-5xl;
+    @apply text-2xl font-bold dark:text-gray-200 md:text-3xl;
   }
 
   & h3 {
-    @apply text-xl font-extrabold dark:text-gray-200 md:text-3xl;
+    @apply text-xl font-bold dark:text-gray-200 md:text-2xl;
   }
 
-  & h4 {
-    @apply font-bold;
+  & h4,
+  & h5,
+  & h6 {
+    @apply text-lg font-bold md:text-xl;
   }
 
   & strong {