omgad grid

Author: SaraVieira

src/components/footer/elements.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 
 export const FooterWrap = styled.div`
-  position:sticky;
-  bottom:0;
+  bottom: 0;
 `

src/components/header/elements.js

@@ -4,7 +4,6 @@ import { Link } from 'gatsby'
 import styled, { css } from 'styled-components'
 
 export const Nav = styled.nav`
-  margin: auto;
   padding: 3em 0 1.5em;
   @media screen and (max-width: 38em) {
     padding: 0.5em 0 0;

src/components/layout/elements.js

@@ -70,6 +70,9 @@ export const Wrapper = styled.main`
   width: 80%;
   max-width: 56em;
   margin: auto;
+  display: grid;
+  grid-template-rows: auto 1fr 100px;
+  height: 100%;
 `
 
 export const SubWrapper = styled.div``

src/pages/code-of-conduct.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import SEO from '../components/seo'
+import { Link } from 'gatsby'
 import Layout from '../containers/layout'
 import Panel from '../components/Panel'
 
@@ -28,13 +29,10 @@ const CodeOfConduct = () => {
             </p>
             <p>
               {' '}
-              <a
-                href="/report"
-                rel="noopener noreferrer"
-                title="Code of Conduct"
-              >
+              <Link to="/report" title="Code of Conduct">
                 Report an Issue
-              </a>.
+              </Link>
+              .
             </p>
 
             <h2>The Quick Version</h2>
@@ -75,15 +73,11 @@ const CodeOfConduct = () => {
               please notify a QueerJS organizer as soon as possible.
             </p>
             <p>
-              If you can’t find the organizer, please
-              {' '}
-              <a
-                href="/report"
-                rel="noopener noreferrer"
-                title="Code of Conduct"
-              >
+              If you can’t find the organizer, please{' '}
+              <a href="/report" rel="noopener noreferrer" title="Code of Conduct">
                 Report an Issue
-              </a>.
+              </a>
+              .
             </p>
             <p>
               Conference staff will be happy to help participants and assist those experiencing

src/pages/report.js

@@ -2,6 +2,7 @@ import React from 'react'
 import SEO from '../components/seo'
 import Layout from '../containers/layout'
 import Panel from '../components/Panel'
+import { Link } from 'gatsby'
 
 const Report = () => {
   const contactInfo = {
@@ -24,32 +25,26 @@ const Report = () => {
             `}
           >
             <p>
-              We want QueerJS to be a safe and inclusive environment.  That’s why we ask our attendees to follow our
-              <a
-                href="/code-of-conduct"
-                rel="noopener noreferrer"
-                title="Code of Conduct"
-              >
-              Code of Conduct
-              </a>!
-              .
+              We want QueerJS to be a safe and inclusive environment. That’s why we ask our
+              attendees to follow our{' '}
+              <Link to="/code-of-conduct" title="Code of Conduct">
+                Code of Conduct
+              </Link>
+              ! .
             </p>
             <p>
-            In the unfortunate case that you see someone violating the code of conduct, here are some ways you can report it to us:
+              In the unfortunate case that you see someone violating the code of conduct, here are
+              some ways you can report it to us:
             </p>
             <ul>
-              <li>-  Send a DM to {contactInfo.twitterHandle}</li>
-              <li>- Let a
-                {' '}
-                <a
-                  href="/organizers"
-                  rel="noopener noreferrer"
-                  title="Code of Conduct"
-                >
-                Core Team
-                </a> 
-                {' '}
-                organizer know, either in person or via Twitter.</li>
+              <li>- Send a DM to {contactInfo.twitterHandle}</li>
+              <li>
+                - Let a{' '}
+                <a href="/organizers" rel="noopener noreferrer" title="Code of Conduct">
+                  Core Team
+                </a>{' '}
+                organizer know, either in person or via Twitter.
+              </li>
               <li>- Send an email to {contactInfo.email}</li>
             </ul>
           </section>