task: Attempt to address mobile responsiveness

src/components/Layout/layout.tsx

@@ -3,52 +3,70 @@ import MainStyles from '~/components/MainStyles/mainStyles'
 import Navbar from '~/components/Navbar/navbar'
 import styled from 'styled-components'
 import Img, { FluidObject } from 'gatsby-image'
+import { constants } from '~/styles/constants'
 
 const Container = styled.div`
   background: var(--background);
   margin-top: calc(67vh - 1.25rem);
   padding: 2.5rem;
   position: relative;
 
-  @media (min-width: 750px) {
+  ${constants.mq.mobile} {
+    margin-bottom: 20px;
+    margin-top: ${props => props.theme.marginTopMobile};
+    position: relative;
+  }
+
+  ${constants.mq.tablet} {
     margin-left: ${props => props.theme.margin};
     margin-bottom: 20px;
     margin-top: ${props => props.theme.marginTop};
     position: relative;
   }
+
+  ${constants.mq.desktop} {
+    padding: ${constants.gutter.desktop};
+    padding-top: ${constants.gutter.tablet};
+  }
 `
 
 const theme = {
   margin: '45vw',
-  marginTop: '15vh'
+  marginTop: '15vh',
+  marginTopMobile: '40vh'
 }
 
 const themeCenter = {
   margin: '20vw',
-  marginTop: '0'
+  marginTop: '0',
+  marginTopMobile: '0'
 }
 
 // TODO:  Move values to a constants file
 export const Main = styled.main`
-  background: var(--background);
-  padding-top: 1.25rem;
+  background: var(--background-color);
+  padding-top: ${constants.gutter.default};
   position: relative;
-  z-index: 20;
+  z-index: ${constants.elevation.overlay};
 `
 
 const Image = styled(Img)`
   max-width: 100%;
   bottom: 33vh;
-  left: 1.25rem;
-  right: 1.25rem;
-  top: 1.25rem;
+  left: ${constants.gutter.default};
+  right: ${constants.gutter.default};
+  top: ${constants.gutter.default};
+
+  ${constants.mq.mobile} {
+    max-height: 40vh;
+  }
 
-  @media (min-width: 750px) {
+  ${constants.mq.tablet} {
     bottom: 0;
     left: 0;
     right: auto;
     top: 0;
-    width: 45vw;
+    width: ${constants.offset};
   }
 `
 

src/components/Navbar/navbar.tsx

@@ -19,7 +19,6 @@ const NavbarWrapper = styled.nav`
   z-index: 40;
   box-shadow: 2px 0 2px black;
   background-color: #8ec1c1;
-  padding-left: var(--responsive-padding);
   padding-right: var(--responsive-padding);
   padding-bottom: var(--safe-area-inset-bottom);
   @supports (padding: max(0px)) {
@@ -65,7 +64,7 @@ const Navbar: React.FunctionComponent<{
         to="/using"
         isActive={new RegExp('^/using').test(pathname)}
         Icon={(props: IconProps) => <SetupIcon {...props} />}
-        label="My Setup"
+        label="Using"
       />
     </InnerNavbarWrapper>
   </NavbarWrapper>

src/components/NavbarLink/navbarLink.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Link } from 'gatsby'
 import styled, { css } from 'styled-components'
 import { IconProps } from '~/components/Icons/types'
+import { constants } from '~/styles/constants'
 
 const StyledLink = styled(Link)`
   transition: all 100ms ease-in-out;
@@ -30,7 +31,13 @@ const StyledLink = styled(Link)`
   ${({ isActive }: { isActive: Boolean }) =>
     isActive &&
     css`
-      border-bottom: 2px solid var(--white);
+      ${constants.mq.mobile} {
+        text-decoration: underline;
+      }
+
+      ${constants.mq.tablet} {
+        border-bottom: 2px solid var(--white);
+      }
     `}
   @media (max-width: 700px) {
     padding: 0.35rem 1.5rem;
@@ -46,7 +53,6 @@ const InnerWrapper = styled.div`
 `
 
 const Caption = styled.span`
-  /* font-size: 0.95rem; */
   margin-left: 0.5rem;
   display: block;
   @media (max-width: 700px) {

src/styles/constants.ts

@@ -1,6 +1,21 @@
-export const fonts = {
-  sansSerif:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif',
-  serif: 'Georgia, "Times New Roman", Times, serif',
-  monospace: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace'
+export const constants = {
+  mq: {
+    mobile: '@media (max-width: 420px)',
+    phablet: '@media (min-width: 550px)',
+    tablet: '@media (min-width: 750px)',
+    desktop: '@media (min-width: 1000px)',
+    xl: '@media (min-width: 1200px)',
+    xxl: '@media (min-width: 1600px)'
+  },
+  elevation: {
+    raised: 10,
+    overlay: 20
+  },
+  gutter: {
+    default: '1.25rem',
+    tablet: '2.5rem',
+    desktop: '3.75rem'
+  },
+  offset: '45vw',
+  offsetXxl: '45rem'
 }