Minor FrontHero changes

src/components/Footer/FooterContent.tsx

@@ -55,7 +55,7 @@ const Columns = styled.div`
 
 const Map = styled.div`
   flex: 1;
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 800px) {
     display: none;
   }
   iframe {

src/theme/breakpoints.ts

@@ -0,0 +1,11 @@
+const breakpointsNumber = {
+  mobile: 800
+}
+
+const breakpoints = {};
+
+Object.keys(breakpointsNumber).forEach((key) => {
+  breakpoints[key] = `${breakpointsNumber[key]  }px`
+});
+
+export default breakpoints;

src/views/FrontPage/FrontPageHero.tsx

@@ -6,8 +6,14 @@ import Anchor from "@components/Anchor";
 
 const HeroSection = styled(PageSection)`
   padding: 0 1rem;
-  @media screen and (min-width: 800px) {
-    min-height: 85vh;
+  min-height: 70vh;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+
+    aside {
+      margin: 48px auto;
+    }
   }
 
   color: ${colors.white};
@@ -18,7 +24,7 @@ const HeroSection = styled(PageSection)`
 `;
 
 const MainSection = styled.section`
-  flex: 6;
+  flex: 8;
 
   & > div {
     margin: 15vh auto 0;
@@ -26,14 +32,6 @@ const MainSection = styled.section`
     text-align: center;
     line-height: 1.5rem;
 
-    & > div {
-      min-width: 20%;
-      max-width: fit-content;
-      margin: auto;
-      display: flex;
-      flex-direction: column;
-    }
-
     h1 {
       line-height: 40px;
       @media screen and (max-width: 500px) {
@@ -49,31 +47,45 @@ const MainSection = styled.section`
   }
 `;
 
-const HeroButton = styled.button`
-  display: block;
-  color: ${colors.blue1};
-  background-color: transparent;
-  padding: 0.8rem 2rem;
-  margin: 0.5rem;
-  font-size: 0.8rem;
-  font-weight: 800;
-  letter-spacing: .1em;
-  text-transform: uppercase;
-  border: 1px solid ${colors.lightTurquoise};
+const Buttons = styled.div`
+  min-width: 20%;
+  max-width: fit-content;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
 
-  &:hover {
-    cursor: pointer;
+  a {
+    display: contents;
   }
 
-  &:active,
-  &:focus {
-    outline: none;
+  button {
+    color: ${colors.blue1};
+    background-color: transparent;
+    padding: 0.8rem 2rem;
+    margin: 0.5rem;
+    font-size: 0.8rem;
+    font-weight: 800;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+    border: 1px solid ${colors.lightTurquoise};
+
+    &:hover {
+      cursor: pointer;
+      color: ${colors.white};
+    }
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
   }
 `;
 
 const AsideSection = styled.aside`
   flex: 4;
-  padding: 3rem 0rem 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 `;
 
 const AsideItem = styled.article`
@@ -117,14 +129,18 @@ const FrontPageHero: React.FC = () => (
           kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
           vauhdilla sähköistyvän maailmamme kehityksessä.
         </p>
-        <div>
-          <HeroButton onClick={() => { }}>
-            <span>Killan tehtävät&nbsp;›</span>
-          </HeroButton>
-          <HeroButton onClick={() => { }}>
-            <span>Vastapainoa opiskelulle&nbsp;›</span>
-          </HeroButton>
-        </div>
+        <Buttons>
+          <Anchor to="/kilta">
+            <button onClick={() => { }}>
+              <span>Killan tehtävät&nbsp;›</span>
+            </button>
+          </Anchor>
+          <Anchor to="/kilta">
+            <button onClick={() => { }}>
+              <span>Vastapainoa opiskelulle&nbsp;›</span>
+            </button>
+          </Anchor>
+        </Buttons>
       </div>
     </MainSection>
 

src/views/FrontPage/FrontPageView.tsx

@@ -22,7 +22,7 @@ const SponsorSection = styled(PageSection)`
 `;
 
 const CardSection = styled(PageSection)`
-  @media screen and (max-width: 800px - 1px) {
+  @media screen and (max-width: 800px) {
     flex-flow: column nowrap;
   }
 
@@ -42,12 +42,12 @@ const CardSection = styled(PageSection)`
   & > * {
     width: calc(25% - 2rem);
 
-    @media screen and (min-width: 1000px) and (max-width: 1200px) {
+    @media screen and (min-width: 800px) and (max-width: 1200px) {
       width: calc(50% - 2rem);
       margin-bottom: 2rem;
     }
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (max-width: 800px) {
       width: 100%;
       margin: 0 0 3rem 0;
     }