Fixed container + box sizing + post card fixes 🚀

Author: chicio

src/components/design-system/molecules/pagination-navigation.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import React from "react";
-import { CallToActionInternal } from "../atoms/internal-call-to-action";
+import { CallToActionInternal } from "../atoms/call-to-action-internal";
 import { track, tracking } from "../../../utils/tracking";
 
 const CenterHorizontallyContainer = styled.div`

src/components/design-system/molecules/post-card.tsx

@@ -36,13 +36,15 @@ const PostCardContainer = styled.div`
 
 const PostCardImageContainer = styled.div`
   width: 100%;
-  margin-top: ${(props) => props.theme.spacing[2]};
-  margin-bottom: ${(props) => props.theme.spacing[0]};
-  height: 200px;
+  height: 120px;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media (min-width: 768px) {
+    height: 200px;
+  }
 `;
 
 const PostCardLink = styled(StandardInternalLink)`
@@ -54,6 +56,7 @@ const PostCardLink = styled(StandardInternalLink)`
 `;
 
 const PostCardTitle = styled(Heading5)`
+  margin: 0 0 ${(props) => props.theme.spacing[2]};
   word-wrap: break-word;
 `;
 

src/components/design-system/molecules/project.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Heading3 } from "../atoms/heading3";
-import { CallToActionExternal } from "../atoms/external-call-to-action";
+import { CallToActionExternal } from "../atoms/call-to-action-external";
 import { track } from "../../../utils/tracking";
 import styled from "styled-components";
 import { Container } from "../atoms/container";

src/components/design-system/molecules/recent-post-card.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { CallToActionInternal } from "../atoms/internal-call-to-action";
+import { CallToActionInternal } from "../atoms/call-to-action-internal";
 import { Heading6 } from "../atoms/heading6";
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";
 import React from "react";

src/components/design-system/molecules/social-contact.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { track } from "../../../utils/tracking";
-import { CallToActionExternal } from "../atoms/external-call-to-action";
+import { CallToActionExternal } from "../atoms/call-to-action-external";
 import { Icon } from "../atoms/icon";
 
 interface SocialContactProps {

src/components/design-system/organism/profile-presentation.tsx

@@ -4,7 +4,7 @@ import { Heading5 } from "../atoms/heading5";
 import { SocialContacts } from "./social-contacts";
 import { track, tracking } from "../../../utils/tracking";
 import styled from "styled-components";
-import { CallToActionInternal } from "../atoms/internal-call-to-action";
+import { CallToActionInternal } from "../atoms/call-to-action-internal";
 import { Heading2 } from "../atoms/heading2";
 
 const SocialContactsContainer = styled.div`

src/components/design-system/organism/technologies.tsx

@@ -2,8 +2,9 @@ import { StaticImage } from "gatsby-plugin-image";
 import * as React from "react";
 import { Paragraph } from "../atoms/paragraph";
 import styled from "styled-components";
+import { ContainerFluid } from "../atoms/container-fluid";
 
-const TechnologiesContainer = styled.div`
+const TechnologiesContainer = styled(ContainerFluid)`
   margin: 0;
   display: flex;
   flex-direction: column;

src/components/design-system/templates/blog-page.tsx

@@ -9,9 +9,7 @@ import { Footer } from "../organism/footer";
 import { WindowLocation } from "@reach/router";
 
 const BlogContainer = styled(Container)`
-  width: 90%;
-  padding: 0;
-  margin: ${(props) => props.theme.spacing[12]} auto auto;
+  margin-top: ${(props) => props.theme.spacing[12]};
 `;
 
 interface BlogPageProps {

src/components/global-style.tsx

@@ -50,4 +50,9 @@ export const GlobalStyle: GlobalStyleComponent<
     display: flex;
     flex-direction: column;
   }
+
+  /* https://www.w3schools.com/css/css3_box-sizing.asp */
+  * {
+    box-sizing: border-box;
+  }
 `;

src/pages/404.tsx

@@ -3,7 +3,7 @@ import { track, tracking } from "../utils/tracking";
 import { Heading1 } from "../components/design-system/atoms/heading1";
 import { Paragraph } from "../components/design-system/atoms/paragraph";
 import { ContainerFullscreen } from "../components/design-system/atoms/container-fullscreen";
-import { CallToActionInternal } from "../components/design-system/atoms/internal-call-to-action";
+import { CallToActionInternal } from "../components/design-system/atoms/call-to-action-internal";
 import { Page } from "../components/design-system/templates/page";
 
 const NotFoundPage: React.FC = () => {