Breakpoints

components/heading.js

@@ -7,7 +7,7 @@ const Heading = props => {
       <div className={css.branding}>
         <Link href="/">
           <a>
-            <img src="/img/right-quote.svg" alt="Quoke" />
+            <img src="/img/left-quote.svg" alt="Quoke" />
           </a>
         </Link>
       </div>

components/layout.scss

@@ -20,7 +20,6 @@
     height: 100%;
     // font-family: "Roboto", sans-serif;
     line-height: 1.5;
-
   }
 
   a {

components/quotation.scss

@@ -1,14 +1,20 @@
+@import "../sass/breakpoints.scss";
+
 .root {
   text-align: center;
 
   blockquote {
     text-align: left;
     margin: auto;
     padding: 16px;
-    max-width: 580px;
+    max-width: 1024px;
+
+    @include for-size(desktop-up) {
+      font-size: 1.75rem;
+    }
 
     p {
-      font-size: large;
+      font-size: 1.25em;
     }
   }
 }

sass/_breakpoints.scss

@@ -0,0 +1,28 @@
+@mixin for-size($range) {
+  $phone-upper-boundary: 600px;
+  $tablet-portrait-upper-boundary: 900px;
+  $tablet-landscape-upper-boundary: 1200px;
+  $desktop-upper-boundary: 1800px;
+
+  @if $range == phone-only {
+    @media (max-width: #{$phone-upper-boundary - 1}) {
+      @content;
+    }
+  } @else if $range == tablet-portrait-up {
+    @media (min-width: $phone-upper-boundary) {
+      @content;
+    }
+  } @else if $range == tablet-landscape-up {
+    @media (min-width: $tablet-portrait-upper-boundary) {
+      @content;
+    }
+  } @else if $range == desktop-up {
+    @media (min-width: $tablet-landscape-upper-boundary) {
+      @content;
+    }
+  } @else if $range == big-desktop-up {
+    @media (min-width: $desktop-upper-boundary) {
+      @content;
+    }
+  }
+}