From 33cfa5f6b837d76f8559e42b3002d3bd1c6dc4f5 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Wed, 29 Nov 2017 19:35:28 -0800
Subject: [PATCH] Fix hero buttons to be clickable (#373)

---
 src/pages/index.js | 126 ++++++++++++++++++++++++---------------------
 1 file changed, 66 insertions(+), 60 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 9c3c4173..ed85bbc3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -116,66 +116,72 @@ class Home extends Component {
                 },
               },
             }}>
-            <Container>
-              <h1
-                css={{
-                  color: colors.brand,
-                  textAlign: 'center',
-                  margin: 0,
-                  fontSize: 45,
-                  letterSpacing: '0.01em',
-                  [media.size('xsmall')]: {
-                    fontSize: 30,
-                  },
-                  [media.greaterThan('xlarge')]: {
-                    fontSize: 60,
-                  },
-                }}>
-                React
-              </h1>
-              <p
-                css={{
-                  paddingTop: 15,
-                  textAlign: 'center',
-                  fontSize: 24,
-                  letterSpacing: '0.01em',
-                  fontWeight: 200,
-
-                  [media.size('xsmall')]: {
-                    fontSize: 16,
-                    maxWidth: '12em',
-                    marginLeft: 'auto',
-                    marginRight: 'auto',
-                  },
-
-                  [media.greaterThan('xlarge')]: {
-                    paddingTop: 20,
-                    fontSize: 30,
-                  },
-                }}>
-                A JavaScript library for building user interfaces
-              </p>
-              <Flex
-                valign="center"
-                css={{
-                  paddingTop: 40,
-
-                  [media.greaterThan('xlarge')]: {
-                    paddingTop: 65,
-                  },
-                }}>
-                <CtaItem>
-                  <ButtonLink to="/docs/hello-world.html" type="primary">
-                    Get Started
-                  </ButtonLink>
-                </CtaItem>
-                <CtaItem>
-                  <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
-                  </ButtonLink>
-                </CtaItem>
-              </Flex>
-            </Container>
+            <div
+              css={{
+                // Content should be above absolutely-positioned hero image
+                position: 'relative',
+              }}>
+              <Container>
+                <h1
+                  css={{
+                    color: colors.brand,
+                    textAlign: 'center',
+                    margin: 0,
+                    fontSize: 45,
+                    letterSpacing: '0.01em',
+                    [media.size('xsmall')]: {
+                      fontSize: 30,
+                    },
+                    [media.greaterThan('xlarge')]: {
+                      fontSize: 60,
+                    },
+                  }}>
+                  React
+                </h1>
+                <p
+                  css={{
+                    paddingTop: 15,
+                    textAlign: 'center',
+                    fontSize: 24,
+                    letterSpacing: '0.01em',
+                    fontWeight: 200,
+
+                    [media.size('xsmall')]: {
+                      fontSize: 16,
+                      maxWidth: '12em',
+                      marginLeft: 'auto',
+                      marginRight: 'auto',
+                    },
+
+                    [media.greaterThan('xlarge')]: {
+                      paddingTop: 20,
+                      fontSize: 30,
+                    },
+                  }}>
+                  A JavaScript library for building user interfaces
+                </p>
+                <Flex
+                  valign="center"
+                  css={{
+                    paddingTop: 40,
+
+                    [media.greaterThan('xlarge')]: {
+                      paddingTop: 65,
+                    },
+                  }}>
+                  <CtaItem>
+                    <ButtonLink to="/docs/hello-world.html" type="primary">
+                      Get Started
+                    </ButtonLink>
+                  </CtaItem>
+                  <CtaItem>
+                    <ButtonLink to="/tutorial/tutorial.html" type="secondary">
+                      Take the Tutorial
+                    </ButtonLink>
+                  </CtaItem>
+                </Flex>
+              </Container>
+            </div>
           </div>
         </header>