Let there be light ✨

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+out

README.md

@@ -0,0 +1,7 @@
+# Gasp! zine website
+
+https://gasp.netlify.com
+
+Based on the [Next.js site](https://github.com/zeit/next-site).
+
+MIT license

components/footer.js

@@ -0,0 +1,51 @@
+export default () => (
+  <footer>
+    <div className="container">
+      <a href="https://lachlanjc.me" target="_blank">
+        Site by Lachlan Campbell
+      </a>
+      <a className="github" href="https://github.com/lachlanjc/gasp">
+        Source code
+      </a>
+    </div>
+    <style jsx>{`
+      footer {
+        background-color: #fafafa;
+        border-top: 1px solid #eaeaea;
+        border-bottom: 1px solid #eaeaea;
+        font-size: 14px;
+        margin-top: 50px;
+      }
+
+      a {
+        text-decoration: none;
+        color: #999999;
+        font-size: 1.4rem;
+        padding: 15px 0;
+        transition: color 0.2s ease;
+      }
+
+      a:hover {
+        color: black;
+      }
+
+      .container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 1000px;
+        margin: 0 auto;
+        padding: 10px 0;
+      }
+
+      @media (max-width: 512px) {
+        .container {
+          flex-direction: column;
+          justify-content: center;
+          width: 100%;
+          padding: 10px;
+        }
+      }
+    `}</style>
+  </footer>
+)

components/header.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import Link from 'next/link'
+import Twitter from './icons/twitter'
+import Facebook from './icons/facebook'
+
+const link = 'https://gasp.netlify.com'
+const twitterURL = (text, url) =>
+  `https://twitter.com/intent/tweet?text=${text
+    .split(' ')
+    .join('%20')}&url=${url}`
+const facebookURL = url => `https://www.facebook.com/sharer/sharer.php?u=${url}`
+
+export default () => (
+  <header>
+    <div className="header__content">
+      <Link href="/" prefetch>
+        <a className="logo">Gasp!</a>
+      </Link>
+      <div className="social">
+        <a href={twitterURL('Gasp! a zine from Planned Parenthood', link)}>
+          <Twitter />
+        </a>
+        <a href={facebookURL(link)}>
+          <Facebook />
+        </a>
+      </div>
+    </div>
+
+    <style jsx>{`
+      header {
+        min-height: 144px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+
+      .header__content {
+        width: 1000px;
+        max-width: 100%;
+        height: 72px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+      }
+
+      .logo {
+        color: #666;
+        font-size: 24px;
+        font-weight: 800;
+        text-decoration: none;
+      }
+
+      .social a {
+        color: #ec008c;
+        margin-left: 15px;
+      }
+
+      @media (max-width: 1064px) {
+        .header__content {
+          width: 100%;
+          padding-left: 32px;
+          padding-right: 32px;
+        }
+      }
+    `}</style>
+  </header>
+)

components/home/intro.js

@@ -0,0 +1,71 @@
+import RoundButton from '../round-button'
+
+const Intro = () => (
+  <section>
+    <h1>Gasp!</h1>
+    <h2>A guide to your your body, your mind, and being alive.</h2>
+    <p>
+      A zine from your friends at Planned Parenthood Generation Action @ Penn
+      State University.
+    </p>
+    <div>
+      <RoundButton color="white" href="/static/gasp.pdf">
+        Download
+      </RoundButton>
+      <RoundButton color="primary" href="/read">
+        Read now »
+      </RoundButton>
+    </div>
+    <style jsx>{`
+      section {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+        max-width: 700px;
+        margin: 0 auto;
+        padding: 0 25px;
+      }
+      h1,
+      h2 {
+        color: #ec008c;
+        line-height: 1.25;
+        margin: 0;
+        padding: 0;
+      }
+      h1 {
+        font-size: 128px;
+        font-style: italic;
+        font-weight: 900;
+      }
+      h2 {
+        font-size: 48px;
+      }
+      p {
+        color: #666666;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 1.625;
+        max-width: 512px;
+        margin: 30px auto;
+      }
+      div {
+        display: flex;
+      }
+      @media (max-width: 768px) {
+        h1 {
+          font-size: 72px;
+          margin-bottom: 10px;
+        }
+        h2 {
+          font-size: 24px;
+        }
+        div {
+          flex-direction: column-reverse;
+        }
+      }
+    `}</style>
+  </section>
+)
+
+export default Intro

components/icons/arrow-next.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default props => (
+  <svg
+    fillRule="evenodd"
+    clipRule="evenodd"
+    strokeLinejoin="round"
+    strokeMiterlimit="1.414"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    preserveAspectRatio="xMidYMid meet"
+    fill="white"
+    width={36}
+    height={36}
+    title="Next"
+    {...props}
+  >
+    <path d="M12.982,23.89c-0.354,-0.424 -0.296,-1.055 0.128,-1.408c1.645,-1.377 5.465,-4.762 6.774,-6.482c-1.331,-1.749 -5.1,-5.085 -6.774,-6.482c-0.424,-0.353 -0.482,-0.984 -0.128,-1.408c0.353,-0.425 0.984,-0.482 1.409,-0.128c1.839,1.532 5.799,4.993 7.2,6.964c0.219,0.312 0.409,0.664 0.409,1.054c0,0.39 -0.19,0.742 -0.409,1.053c-1.373,1.932 -5.399,5.462 -7.2,6.964l-0.001,0.001c-0.424,0.354 -1.055,0.296 -1.408,-0.128Z" />
+  </svg>
+)

components/icons/arrow-previous.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default props => (
+  <svg
+    fillRule="evenodd"
+    clipRule="evenodd"
+    strokeLinejoin="round"
+    strokeMiterlimit="1.414"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    preserveAspectRatio="xMidYMid meet"
+    fill="white"
+    width={36}
+    height={36}
+    title="Next"
+    {...props}
+  >
+    <path d="M19.768,23.89c0.354,-0.424 0.296,-1.055 -0.128,-1.408c-1.645,-1.377 -5.465,-4.762 -6.774,-6.482c1.331,-1.749 5.1,-5.085 6.774,-6.482c0.424,-0.353 0.482,-0.984 0.128,-1.408c-0.353,-0.425 -0.984,-0.482 -1.409,-0.128c-1.839,1.532 -5.799,4.993 -7.2,6.964c-0.219,0.312 -0.409,0.664 -0.409,1.054c0,0.39 0.19,0.742 0.409,1.053c1.373,1.932 5.399,5.462 7.2,6.964l0.001,0.001c0.424,0.354 1.055,0.296 1.408,-0.128Z" />
+  </svg>
+)

components/icons/facebook.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export default () => (
+  <svg
+    fillRule="evenodd"
+    clipRule="evenodd"
+    strokeLinejoin="round"
+    strokeMiterlimit="1.414"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    preserveAspectRatio="xMidYMid meet"
+    fill="currentColor"
+    width={36}
+    height={36}
+    title="Facebook"
+  >
+    <path d="M19.491,27.944c7.731,-0.319 8.509,-2.242 8.509,-11.944c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,10.985 0.997,11.997 11.956,12l0,-7.667l-2.956,0l0,-3.377l2.956,0l0,-2.491c0,-2.891 1.789,-4.465 4.403,-4.465c1.251,0 2.327,0.092 2.641,0.133l0,3.021l-1.813,0.001c-1.421,0 -1.696,0.666 -1.696,1.644l0,2.157l3.39,0l-0.442,3.377l-2.936,0l0,7.611Z" />
+  </svg>
+)

components/icons/twitter.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export default () => (
+  <svg
+    fillRule="evenodd"
+    clipRule="evenodd"
+    strokeLinejoin="round"
+    strokeMiterlimit="1.414"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    preserveAspectRatio="xMidYMid meet"
+    fill="currentColor"
+    width={36}
+    height={36}
+    title="Twitter"
+  >
+    <path d="M16,28c11,0 12,-1 12,-12c0,-11 -1,-12 -12,-12c-11,0 -12,1 -12,12c0,11 1,12 12,12Zm5.825,-13.901c0,3.669 -2.889,7.901 -8.172,7.901l0,0c-1.622,0 -3.132,-0.46 -4.403,-1.236c0.225,0.026 0.454,0.039 0.685,0.039c1.346,0 2.585,-0.444 3.568,-1.189c-1.258,-0.022 -2.318,-0.825 -2.684,-1.928c0.175,0.032 0.355,0.05 0.54,0.05c0.262,0 0.516,-0.034 0.758,-0.098c-1.315,-0.255 -2.305,-1.377 -2.305,-2.722c0,-0.013 0,-0.024 0.001,-0.036c0.387,0.208 0.829,0.333 1.301,0.336c-0.772,-0.498 -1.279,-1.336 -1.279,-2.312c0,-0.509 0.143,-0.985 0.389,-1.396c1.417,1.681 3.534,2.786 5.921,2.902c-0.049,-0.204 -0.074,-0.416 -0.074,-0.633c0,-1.533 1.286,-2.777 2.872,-2.777c0.826,0 1.573,0.338 2.097,0.877c0.654,-0.124 1.269,-0.356 1.824,-0.674c-0.215,0.649 -0.67,1.192 -1.263,1.536c0.581,-0.067 1.134,-0.216 1.649,-0.437c-0.384,0.557 -0.872,1.046 -1.433,1.438c0.006,0.119 0.008,0.239 0.008,0.359Z" />
+  </svg>
+)

components/image.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+// This component might look a little complex
+// because one could argue that keeping the aspect ratio
+// of an image can be solved with `height: auto`,
+// but it's actually not that easy if you want to prevent
+// element flickering
+
+// Because if you want to do that, you need to set the aspect
+// ratio of the image's container BEFORE the image loads
+
+class Image extends Component {
+  static propTypes = {
+    width: PropTypes.number,
+    height: PropTypes.number
+  }
+
+  render() {
+    const {
+      caption,
+      width = 892,
+      height = 612,
+      margin = 25,
+      ...rest
+    } = this.props
+
+    const aspectRatio = String((height / width) * 100) + '%'
+
+    return (
+      <figure style={{ width, paddingBottom: aspectRatio }}>
+        <img {...rest} />
+
+        <style jsx>{`
+          figure {
+            display: block;
+            text-align: center;
+            margin: ${margin}px 0;
+            max-width: 100%;
+            position: relative;
+          }
+          figure :global(img) {
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+          }
+        `}</style>
+      </figure>
+    )
+  }
+}
+
+export default Image