Figma, framer, invision, marvel pages

server/pages/components/Header.js

@@ -20,6 +20,7 @@ const Header = ({ children, background }: Props) => {
 const Wrapper = styled.div`
   width: 100%;
   padding: 8em 0 3em;
+  position: relative;
 
   margin-top: -70px;
   margin-bottom: 2em;
@@ -27,6 +28,17 @@ const Wrapper = styled.div`
   background: ${props => props.background || 'transparent'};
   z-index: -1;
 
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -10%;
+    width: 120%;
+    height: 100%;
+    background: ${props => props.background || 'transparent'};
+    z-index: -10;
+  }
+
   p {
     font-size: 22px;
     font-weight: 500;

server/pages/components/Layout.js

@@ -78,7 +78,7 @@ function Layout({ children, loggedIn, sessions }: Props) {
 const Body = styled.body`
   padding: 0 30px;
 
-  ${breakpoint('tablet')`
+  ${breakpoint('desktop')`
     padding: 0;
   `};
 `;

server/pages/components/Markdown.js

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 export default styled(ReactMarkdown)`
   blockquote {
     margin-left: 0;
+    margin-right: 0;
     background-color: ${props => props.theme.smoke};
     border-left: 6px solid ${props => props.theme.smokeDark};
     padding: 15px 30px 15px 15px;
@@ -15,4 +16,11 @@ export default styled(ReactMarkdown)`
       margin: 0;
     }
   }
+
+  img {
+    max-width: 100%;
+    zoom: 50%;
+    box-shadow: 0 10px 80px rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+  }
 `;