style: Improve look and feel of site

Alexintosh · May 16, 2021 · 8129384 · 8129384
1 parent e7ceecf
commit 8129384
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 10 deletions.
diff --git a/components/screens/Post/Post.tsx b/components/screens/Post/Post.tsx
@@ -32,7 +32,6 @@ export function Post({ content, frontMatter }: PostProps) {
       <Box
         maxW="72ch"
         mx="auto"
-        px={{ base: 8, lg: 0 }}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
       >

diff --git a/components/shared/Layout/Layout.tsx b/components/shared/Layout/Layout.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 export function Layout({ children, ...metadata }: Props) {
   return (
-    <Box maxW={{ sm: '80%' }} mx="auto" px={{ base: 8, sm: 0 }}>
+    <Box maxW={{ sm: '80%' }} mx="auto" px={{ base: 4, sm: 0 }}>
       <Seo {...metadata} />
       <Box
         as="main"

diff --git a/components/ui/MDXComponents/CodeBlock/CodeBlock.tsx b/components/ui/MDXComponents/CodeBlock/CodeBlock.tsx
@@ -52,7 +52,7 @@ export function CodeBlock({ children, ...props }: Props) {
   }
 
   return (
-    <Box pos="relative" mb={8} {...props}>
+    <Box pos="relative" mb={8} mx={{ base: -4, sm: -8 }} {...props}>
       <Box pos="absolute" top={-9} right={4} zIndex={1}>
         <Box pos="absolute" right={10}>
           <Confetti active={isCopied} config={config} />
@@ -67,7 +67,7 @@ export function CodeBlock({ children, ...props }: Props) {
         as="pre"
         pos="relative"
         bg={codeBg[colorMode]}
-        fontSize={[16, 18, 20]}
+        fontSize={[16, 18]}
         p={6}
         overflow="auto"
         boxShadow="lg"

diff --git a/components/ui/MDXComponents/CodeBlock/CodeBlockTitle/CodeBlockTitle.tsx b/components/ui/MDXComponents/CodeBlock/CodeBlockTitle/CodeBlockTitle.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export function CodeBlockTitle({ children, ...props }: Props) {
   return (
-    <Box fontSize={[16, 16, 18]} {...props}>
+    <Box fontSize={16} {...props}>
       {children}
     </Box>
   )

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -80,7 +80,8 @@ function GlobalStyle({ children }: GlobalStyleProps) {
           }
 
           blockquote {
-            padding: 0.4rem 2rem;
+            padding: 0.5rem 2rem;
+            margin: 1rem 0;
             border-left: 4px solid ${quoteBorderColor[colorMode]};
             background-color: ${quoteBg[colorMode]};
           }

diff --git a/styles/colors.ts b/styles/colors.ts
@@ -17,4 +17,4 @@ export const inlineCodeBg = { light: 'blue.200', dark: 'orange.200' }
 export const inlineCodeText = { light: 'blue.900', dark: 'orange.900' }
 
 export const quoteBorderColor = { light: '#2b6cb0', dark: '#fbd38d' }
-export const quoteBg = { light: '#f1f8ff', dark: '#272e3e' }
+export const quoteBg = { light: '#f1f8ff', dark: '#222937' }
diff --git a/styles/prism.ts b/styles/prism.ts
@@ -121,11 +121,11 @@ const prismBaseTheme = css`
     position: relative;
     z-index: -1;
     max-width: max-content;
-    transform: translate(20px, 4px);
+    top: 4px;
     font-family: ${chakraTheme.fonts.mono};
-    font-weight: ${chakraTheme.fontWeights.semibold};
-    background-color: ${chakraTheme.colors.orange[200]};
+    font-weight: ${chakraTheme.fontWeights.bold};
     color: ${chakraTheme.colors.orange[900]};
+    background-color: ${chakraTheme.colors.orange[200]};
     padding: ${chakraTheme.space[2]} ${chakraTheme.space[4]};
     border-radius: ${chakraTheme.radii.base};
     box-shadow: ${chakraTheme.shadows.lg};