fix: Add table styles to minimal-blog

LekoArts · Feb 29, 2020 · 6e3d750 · 6e3d750
1 parent c08574f
commit 6e3d750
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/...les/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx b/...les/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx
@@ -6,6 +6,12 @@ tags:
   - Highlight
 ---
 
+| Number | Title                                    | Year |
+| ------ | ---------------------------------------- | ---: |
+| 1      | Harry Potter and the Philosopher’s Stone | 2001 |
+| 2      | Harry Potter and the Chamber of Secrets  | 2002 |
+| 3      | Harry Potter and the Prisoner of Azkaban | 2004 |
+
 [View raw (TEST.md)](https://raw.github.com/adamschwartz/github-markdown-kitchen-sink/master/README.md)
 
 This is a paragraph.

diff --git a/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-minimal-blog/src/gatsby-plugin-theme-ui/index.js
@@ -57,6 +57,7 @@ export default {
         background: `#1A202C`,
         heading: tailwind.colors.white,
         divide: tailwind.colors.gray[8],
+        muted: tailwind.colors.gray[8],
       },
     },
   },
@@ -110,6 +111,29 @@ export default {
         fontStyle: `italic`,
       },
     },
+    table: {
+      width: `100%`,
+      my: 4,
+      borderCollapse: `separate`,
+      borderSpacing: 0,
+      [[`th`, `td`]]: {
+        textAlign: `left`,
+        py: `4px`,
+        pr: `4px`,
+        pl: 0,
+        borderColor: `muted`,
+        borderBottomStyle: `solid`,
+      },
+    },
+    th: {
+      verticalAlign: `bottom`,
+      borderBottomWidth: `2px`,
+      color: `heading`,
+    },
+    td: {
+      verticalAlign: `top`,
+      borderBottomWidth: `1px`,
+    },
   },
   text: {
     ...headingStyles,