added strong component and margin fix - post-layout

Author: a-saran

src/components/typography.js

@@ -98,15 +98,19 @@ const I = (props) => (
 const Ul = (props) => (
   <PseudoBox
     as='ul'
-    listStyle='disc inside none'
+    listStylePosition='inside'
+    listStyleImage='none'
+    listStyleType='disc'
     mb={2}
     {...props}
   />
 )
 const Ol = (props) => (
   <PseudoBox
     as='ol'
-    listStyle='decimal inside none'
+    listStylePosition='inside'
+    listStyleImage='none'
+    listStyleType='decimal'
     mb={2}
     {...props}
   />
@@ -123,6 +127,14 @@ const Li = (props) => (
   />
 )
 
+const Strong = (props) => (
+  <PseudoBox
+    as='strong'
+    fontFamily='bold'
+    {...props}
+  />
+)
+
 export {
-  H1, H2, H3, H4, H5, P, B, Em, I, Ul, Ol, Li
+  H1, H2, H3, H4, H5, P, B, Em, I, Ul, Ol, Li, Strong
 }

src/templates/blog-post-layout.js

@@ -16,7 +16,7 @@ const Sidebar = ({ author, category, tags }) => (
       <Box display='flex' fontSize={[0, 0]} justifyContent="center" lineHeight='0'>
         <H1 as='h1'>Written by</H1>
       </Box>
-      <Flex justifyContent="center" mt="0.5rem">
+      <Flex justifyContent="center">
         <PlainLink to={`/author/${slugify(author)}`}>
           <I>{author}</I>
           <br />
@@ -28,7 +28,7 @@ const Sidebar = ({ author, category, tags }) => (
         <Flex fontSize={[0, 0]} justifyContent="center">
           Posted in
         </Flex>
-        <Flex justifyContent="center" mt="0.5rem">
+        <Flex justifyContent="center">
           <CategoryLink to={`/category/${slugify(getCategory({ category }))}`}>
             {getCategory({ category })}
           </CategoryLink>
@@ -40,7 +40,7 @@ const Sidebar = ({ author, category, tags }) => (
         <Flex fontSize={[0, 0]} justifyContent="center">
           Tags
         </Flex>
-        <Flex justifyContent="center" mt="0.5rem">
+        <Flex justifyContent="center">
           <Flex
             fontSize={[0, 0]}
             color="black.2"

src/templates/layout.js

@@ -258,6 +258,7 @@ const Layout = ({ children }) => (
               ul: Typography.Ul,
               ol: Typography.Ol,
               li: Typography.Li,
+              strong: Typography.Strong,
             }}
           >
             <Box bg="rgb(247,245,242)" minHeigh="100vh">