Add classes for different device width

src/components/Layout/Layout.js

@@ -9,12 +9,14 @@ export default function Layout({
   children,
   width,
   pageType,
+  hasMargin,
   title,
   description,
   socialImg,
   headerPosition,
 }) {
-  const mainClass = width === "constrained" ? "container" : "none"
+  const mainClass = width === "fixed" ? "container" : "none"
+  console.log(hasMargin)
   return (
     <div
       id={pageType}
@@ -26,7 +28,9 @@ export default function Layout({
       <Seo title={title} description={description} socialImg={socialImg} />
       {/* {pageType === "page" ? <Header position={headerPosition} /> : null} */}
       <Header position={headerPosition} />
-      <main>{children}</main>
+      <main className={`main container`} width={width}>
+        {children}
+      </main>
       <Letswork />
       <Footer />
     </div>

src/components/Post/Body/Body.module.scss

@@ -1,10 +1,10 @@
 .postContent {
   padding-top: 60px;
-  @include var.media("screen", ">maxWidth") {
+  @include var.media("screen", ">xlWidth") {
     padding-top: 130px;
   }
   h2 {
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       font-size: 40px;
       line-height: 1.5;
       margin-top: 50px;
@@ -21,7 +21,7 @@
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       width: 93.75%;
     }
   }
@@ -34,7 +34,7 @@
     margin-right: auto;
     padding-bottom: 60px;
     width: 87.5%;
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       width: 73.33333%;
       padding-bottom: 90px;
     }

src/components/Post/Hero/Hero.module.scss

@@ -19,7 +19,7 @@
     }
   }
   &__media {
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       margin-right: 3.125%;
       padding-top: 0;
       width: 53.125%;
@@ -42,13 +42,13 @@
       margin-top: 40px;
       width: 68.75%;
     }
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       width: 34.375%;
     }
   }
   &__topic {
     text-transform: capitalize;
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       font-size: 22px;
       margin-top: 0;
     }
@@ -58,7 +58,7 @@
     letter-spacing: -4px;
     font-size: 60px;
     line-height: 1.35;
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       font-size: 72px;
       margin-top: 15px;
     }

src/components/intro.js

@@ -4,13 +4,12 @@ import introStyles from "./intro.module.scss"
 export default function Intro({ children }) {
   return (
     <div class="row">
-      <div class="column column__spacer" data-xl-width="4"></div>
       <div
-        class="column"
-        data-xl-width="8"
-        data-lg-width="8"
-        data-md-width="10"
-      >
+        class="column column__spacer"
+        data-lg-width="3"
+        data-md-width="2"
+      ></div>
+      <div class="column" data-lg-width="9" data-md-width="10">
         <div className={`medium pt3 ${introStyles.intro}`}>
           <h2 className={introStyles.heading}>{children}</h2>
         </div>

src/components/intro.module.scss

@@ -2,14 +2,19 @@
   width: 100%;
 }
 .heading {
-  font-size: 6.8333rem;
-  line-height: 5.8888rem;
+  font-size: 4.78rem;
+  line-height: 4.01rem;
   letter-spacing: -0.1111rem;
+  @include var.media(">medWidth") {
+    font-size: 5.02rem;
+    line-height: 4.2rem;
+  }
+  @include var.media(">lgWidth") {
+    font-size: 5.37rem;
+    line-height: 5.1111rem;
+  }
+  @include var.media(">xlWidth") {
+    font-size: 5.8333rem;
+    line-height: 5.5555rem;
+  }
 }
-
-// @include var.media("screen", "<medWidth") {
-//   .intro {
-//     font-size: 33px;
-//     line-height: 30px;
-//   }
-// }

src/components/portfolio-select.js

@@ -1,6 +1,5 @@
 import React from "react"
 import { StaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
 import styles from "./portfolio-select.module.scss"
 
 export default () => (
@@ -35,18 +34,24 @@ export default () => (
     `}
     render={data => (
       <div className="portfolio">
-        {data.allMdx.edges.map(({ node }) => (
-          <div className={`${styles.project} items-center mb3`}>
+        {data.allMdx.edges.map(({ node }, index) => (
+          <div
+            className={`${styles.project} block items-center mb4 lg-mx0 mxn2`}
+          >
             {/* <Img 
             fluid={node.frontmatter.featuredImage.childImageSharp.fluid}
             style={{ flex: '1', marginLeft: '-6rem'}}
           /> */}
             <img
-              className={styles.project__featuredImg}
+              className={`${styles.project__featuredImg} xl-col-7 lg-col-10 ${
+                index % 2 === 0 ? `xl-mln6` : `xl-mrn6`
+              }`}
               src={node.frontmatter.gif.publicURL}
               alt="Blah"
             />
-            <div className={`${styles.project__info} z4 border-thick`}>
+            <div
+              className={`${styles.project__info} xl-col-6 xl-mt0 mtn6 xl-mx0 xl-p2 p1 z4 border border-thick relative  mx2`}
+            >
               <h3 className={styles.project__name}>{node.frontmatter.title}</h3>
               <p className={styles.project__desc}>
                 {node.frontmatter.description}

src/components/portfolio-select.module.scss

@@ -1,31 +1,21 @@
-@media (min-width: 64em) {
+@include var.media(">xlWidth") {
   .project {
     display: flex;
-    flex-direction: row-reverse;
-  }
-}
-@media (min-width: 64em) {
-  .project__info {
-    width: 50%;
-    padding: 2rem;
-    margin-top: 0;
-    border-width: 3px;
+    &:nth-child(2n + 1) {
+      flex-direction: row-reverse;
+    }
   }
 }
 .project__info {
   background-color: var.$white;
-  box-shadow: 8px 8px 8px 4px rgba(0,0,0,0.25);
+  box-shadow: 8px 8px 8px 4px rgba(0, 0, 0, 0.25);
 }
 .project__name {
-  font-size: 1.37rem;
+  font-size: 1.675rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
 }
 .project__desc {
   line-height: 1.5;
   margin-bottom: 1rem;
 }
-.project__featuredImg {
-  width: 60%;
-  height: auto;
-}

src/pages/index.js

@@ -5,13 +5,11 @@ import ArticleList from "../components/article-list-homepage"
 import Portfolio from "../components/portfolio-select"
 
 export default () => (
-  <Layout width="constrained" pageType="page" headerPosition="right">
-    <section class="content-block mt4 mb5">
-      <div class="container max-width-4">
-        <Intro>Making speedy, useful things that they want to revisit.</Intro>
-      </div>
+  <Layout width="fixed" pageType="page" headerPosition="right">
+    <section class="content-block mt4 mb4 lg-mb6">
+      <Intro>Making speedy, useful things that they want to revisit.</Intro>
     </section>
-    <section className="hp-secondary">
+    <section className="hp-secondary width-full">
       <h2 className="center section-title">
         <span>Featured Projects</span>
       </h2>

src/pages/insight.module.scss

@@ -60,23 +60,25 @@
       justify-content: center;
     }
   }
-  &__item:nth-child(4n), &__item:nth-child(4n+1) {
+  &__item:nth-child(4n),
+  &__item:nth-child(4n + 1) {
     @include var.media("screen", ">medWidth") {
       flex: 0 1 300px;
       margin: 0 25px 40px;
     }
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       flex: 0 1 380px;
       margin: 35px 40px 50px;
     }
   }
-  &__item:nth-child(4n+2), &__item:nth-child(4n+3) {
+  &__item:nth-child(4n + 2),
+  &__item:nth-child(4n + 3) {
     @include var.media("screen", ">medWidth") {
       flex: 0 1 300px;
       margin: 0 25px 45px;
       padding: 0;
     }
-    @include var.media("screen", ">maxWidth") {
+    @include var.media("screen", ">xlWidth") {
       flex: 0 1 480px;
       margin: 0 40px 60px;
     }
@@ -121,4 +123,4 @@
   @include var.media("screen", ">medWidth") {
     padding: 0;
   }
-}
+}