stop being lazy with css selectors

components/NoteTitle/NoteTitle.module.css

@@ -5,16 +5,12 @@
   font-weight: 700;
 }
 
-.title a {
-  color: inherit;
+.title code {
+  margin: 0 0.075em;
 }
 
-.title code {
-  font-size: 1em;
-  background: none !important;
-  border: 0 !important;
-  margin: 0 0.075em !important;
-  padding: 0 !important;
+.link {
+  color: inherit;
 }
 
 @media screen and (max-width: 768px) {

components/NoteTitle/NoteTitle.tsx

@@ -1,19 +1,20 @@
 import Link from "next/link";
+import classNames from "classnames";
 import type { NoteMetaType } from "../../types";
 
 import styles from "./NoteTitle.module.css";
 
-type Props = Pick<NoteMetaType, "slug" | "htmlTitle">;
+type Props = Pick<NoteMetaType, "slug" | "htmlTitle"> & { className?: string };
 
-const NoteTitle = ({ slug, htmlTitle, ...rest }: Props) => (
-  <h1 className={styles.title}>
+const NoteTitle = ({ slug, htmlTitle, className, ...rest }: Props) => (
+  <h1 className={classNames(styles.title, className)}>
     <Link
       href={{
         pathname: "/notes/[slug]/",
         query: { slug: slug },
       }}
     >
-      <a dangerouslySetInnerHTML={{ __html: htmlTitle }} {...rest} />
+      <a className={styles.link} dangerouslySetInnerHTML={{ __html: htmlTitle }} {...rest} />
     </Link>
   </h1>
 );