From a474f7aae59baa0fbdb62019457e5ebf69a6d1e8 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 8 Jan 2020 13:32:10 -0500
Subject: [PATCH] mqs

---
 src/components/Person.js | 11 +++++++++++
 src/components/layout.js | 28 ++++++++++++++++++++--------
 src/pages/index.js       |  3 +++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/Person.js b/src/components/Person.js
index 16a4831b..767b2b10 100644
--- a/src/components/Person.js
+++ b/src/components/Person.js
@@ -109,6 +109,9 @@ const PersonInner = styled.div`
     grid-template-rows: auto auto;
     grid-template-columns: auto 1fr;
     grid-gap: 0 1rem;
+    @media all and (max-width: 400px) {
+      grid-template-columns: 1fr;
+    }
     img {
       grid-row: 1 / -1;
       background: var(--lightblue);
@@ -151,6 +154,14 @@ const PersonDeets = styled.div`
   .phone {
     padding: 0;
   }
+  @media all and (max-width: 400px) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    > *:nth-child(2) ~ * {
+      /* lol */
+      border-block-start: 1px solid var(--vape);
+    }
+  }
 `;
 
 const TwitterHandle = styled.span`
diff --git a/src/components/layout.js b/src/components/layout.js
index 4e6a0e55..0dd9a7d5 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -27,16 +27,28 @@ const Layout = ({ children }) => {
   return (
     <>
       <GlobalStyle />
-      <Header siteTitle={data.site.siteMetadata.title} />
       <Main>
+        <Header siteTitle={data.site.siteMetadata.title} />
         {children}
         <footer>
-          © {new Date().getFullYear() - Math.floor(Math.random() * 777)} Made by{' '}
-          <a href="https://wesbos.com">Wes Bos</a> with{' '}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>. Source on{' '}
-          <a href="https://github.com/wesbos/awesome-uses/">GitHub</a>. Icons
-          from <a href="icons8.com">icons8.com</a>. Domain provided by{' '}
-          <a href="https://get.tech/">.Tech</a>
+          <center ya-i-used-a-center-tag="sue me">
+            <p>
+              Made by <a href="https://wesbos.com">Wes Bos</a> with{' '}
+              <a href="https://www.gatsbyjs.org">Gatsby</a> ©{' '}
+              {new Date().getFullYear() - Math.floor(Math.random() * 777)}
+            </p>
+            <p>
+              Source on{' '}
+              <a href="https://github.com/wesbos/awesome-uses/">GitHub</a>. Add
+              yourself!
+            </p>
+            <p>
+              Icons from <a href="icons8.com">icons8.com</a>
+            </p>
+            <p>
+              Domain provided by <a href="https://get.tech/">.Tech</a>
+            </p>
+          </center>
         </footer>
       </Main>
     </>
@@ -68,7 +80,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     font-size: 2rem;
     overflow-y: scroll;
-    overflow-x: hidden;
+    /* overflow-x: hidden; */
   }
   h1,h2,h3,h4,h5,h6 {
     font-weight: 500;
diff --git a/src/pages/index.js b/src/pages/index.js
index 12d62961..54059752 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -54,4 +54,7 @@ const People = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   grid-gap: 5rem;
+  @media all and (max-width: 400px) {
+    grid-template-columns: 1fr;
+  }
 `;