remove all styled-jsx from components

components/notes/Comments.module.css

@@ -0,0 +1,6 @@
+.wrapper :global(.giscus) {
+  margin-top: 2em;
+  padding-top: 2em;
+  border-top: 2px solid var(--light);
+  min-height: 350px;
+}

components/notes/Comments.tsx

@@ -3,6 +3,8 @@ import { Giscus } from "@giscus/react";
 import { giscusConfig } from "../../lib/config";
 import type { GiscusProps } from "@giscus/react";
 
+import styles from "./Comments.module.css";
+
 type Props = {
   title: string;
 };
@@ -11,10 +13,7 @@ const Comments = ({ title }: Props) => {
   const { resolvedTheme } = useTheme();
 
   return (
-    <div
-      id="comments"
-      style={{ marginTop: "2em", paddingTop: "1em", borderTop: "2px solid var(--light)", minHeight: "350px" }}
-    >
+    <div className={styles.wrapper}>
       <Giscus
         {...(giscusConfig as GiscusProps)}
         term={title}

components/notes/Meta.module.css

@@ -21,7 +21,7 @@
 
 .meta > div:last-of-type {
   /* fix potential layout shift when number of hits loads */
-  min-width: 6.5em;
+  min-width: 7em;
   margin-right: 0;
 }