Styling fixes and alignments

Author: timolins

example/pages/index.tsx

@@ -7,6 +7,7 @@ const {
 
 const Home = () => (
   <div
+    className="notion"
     style={{
       maxWidth: 708,
       margin: "0 auto",

src/components/code.tsx

@@ -7,30 +7,19 @@ const Code: React.FC<{ code: string; language: string }> = ({
   language = "javascript"
 }) => {
   return (
-    <>
-      <pre>
-        <code
-          className="rounded"
-          style={{
-            padding: "30px 16px 30px 20px",
-            tabSize: 2,
-            fontSize: "85%",
-            display: "block",
-            background: "rgb(247, 246, 243)",
-            fontFamily:
-              'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace'
-          }}
-          dangerouslySetInnerHTML={{
-            __html: Prism.highlight(
-              code,
-              Prism.languages[language.toLowerCase()] ||
-                Prism.languages.javascript,
-              language
-            )
-          }}
-        />
-      </pre>
-    </>
+    <pre>
+      <code
+        className="notion-code"
+        dangerouslySetInnerHTML={{
+          __html: Prism.highlight(
+            code,
+            Prism.languages[language.toLowerCase()] ||
+              Prism.languages.javascript,
+            language
+          )
+        }}
+      />
+    </pre>
   );
 };
 

src/styles.css

@@ -5,6 +5,15 @@
   caret-color: rgb(55, 53, 47);
 }
 
+.notion > * {
+  padding: 3px 0px;
+}
+
+* {
+  margin-block-start: 0px;
+  margin-block-end: 0px;
+}
+
 .notion-red {
   color: rgb(224, 62, 62);
 }
@@ -185,6 +194,8 @@ li {
   display: flex;
   justify-content: center;
   flex-direction: column;
+  margin-top: 2px;
+  margin-bottom: 0.5em;
 }
 .notion-text {
   white-space: pre-wrap;
@@ -224,3 +235,13 @@ li {
 .notion-callout-text {
   margin-left: 8px;
 }
+.notion-code {
+  padding: 30px 16px 30px 20px;
+  margin: 4px 0;
+  tab-size: 2;
+  font-size: 85%;
+  display: block;
+  background: rgb(247, 246, 243);
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
+    monospace;
+}