improve hero styles

src/components/Hero/Hero.tsx

@@ -6,33 +6,9 @@ import breakpoints from "@theme/breakpoints";
 const Container = styled.div`
   display: flex;
   flex-flow: row wrap;
-  justify-content: space-between;
   position: relative;
   padding: 0;
-  min-height: 75vh;
-
-  section {
-    padding: 2rem 6rem;
-
-    @media screen and (max-width: ${breakpoints.mobile}) {
-      padding: 1rem;
-    }
-  }
-
-  aside {
-    max-width: 50%;
-    padding: 3rem 6rem;
-    align-items: center;
-
-    @media screen and (max-width: ${breakpoints.mobile}) {
-      max-width: unset;
-      padding: 2rem 1rem;
-    }
-  }
-
-  & > div {
-    flex: 8;
-  }
+  min-height: 60vh;
 
   @media screen and (max-width: ${breakpoints.mobile}) {
     flex-direction: column;

src/components/Hero/HeroAside.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import styled from "styled-components";
-import colors from "@theme/colors";
 import { Link } from "@components/index";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
 
 interface HeroAsideItemProps {
   header: string;
@@ -11,7 +12,7 @@ interface HeroAsideItemProps {
 }
 
 const Article = styled.article`
-  margin-bottom: 1rem;
+  margin-top: 1rem;
 `;
 
 export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({
@@ -40,10 +41,17 @@ interface HeroAsideProps {
 const Aside = styled.aside<{ colors: string }>`
   ${(p) => p.colors}
 
-  flex: 4;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 6rem;
+  align-items: center;
+  max-width: 45%;
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    max-width: unset;
+    padding: 3rem 2rem;
+  }
 
   & > div {
     h2 {

src/components/Hero/HeroPrimaryButtons.tsx

@@ -1,12 +1,16 @@
+import React from "react";
 import styled from "styled-components";
 import colors from "@theme/colors";
 
-const Buttons = styled.div<{ row?: boolean }>`
-  min-width: 20%;
-  max-width: fit-content;
-  margin: auto;
+interface HeroPrimaryButtonsProps {
+  row?: boolean;
+}
+
+const Buttons = styled.div<HeroPrimaryButtonsProps>`
+  ${({ row }) => (row ? "width: 100%;" : "")}
+
   display: flex;
-  flex-flow: ${(p) => (p.row ? "row" : "column")} wrap;
+  flex-flow: ${({ row }) => (row ? "row" : "column")} wrap;
 
   a {
     display: contents;
@@ -14,10 +18,15 @@ const Buttons = styled.div<{ row?: boolean }>`
   }
 
   button {
+    margin: 0.5rem;
+
+    /* stylelint-disable function-name-case */
+    flex: 1 0 calc(100% / ${({ children }) => React.Children.count(children)} - 2 * 0.5rem);
+
+    /* stylelint-enable function-name-case */
     color: ${colors.blue1};
     background-color: transparent;
     padding: 0.8rem 2rem;
-    margin: 0.5rem;
     font-size: 0.8rem;
     font-weight: 800;
     letter-spacing: 0.1em;

src/components/Hero/HeroPrimarySection.tsx

@@ -9,9 +9,16 @@ interface HeroPrimarySectionProps {
 }
 
 const Section = styled.section`
-  max-width: 50%;
-  margin: 10vh auto 0;
+  max-width: 55%;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8rem 8rem 2rem;
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    padding: 3rem 2rem;
+  }
 
   @media screen and (max-width: ${breakpoints.mobile}) {
     max-width: unset;

src/components/Hero/HeroSecondarySection.tsx

@@ -36,6 +36,7 @@ export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> =
 const Section = styled.section`
   background-color: ${colors.green1};
   color: ${colors.darkBlue};
+  padding: 3rem;
 
   h1 {
     padding: 1rem 0;

src/views/FrontPage/FrontPageHero.tsx

@@ -15,12 +15,12 @@ const FrontPageHero: React.FC = () => (
       <HeroPrimaryButtons>
         <Link to="/kilta">
           <button type="button" onClick={noop}>
-            <span>Tietoa killasta&nbsp;›</span>
+            <span>Tietoa&nbsp;killasta&nbsp;›</span>
           </button>
         </Link>
         <Link to="/kilta/toiminta">
           <button type="button" onClick={noop}>
-            <span>Vastapainoa opiskelulle&nbsp;›</span>
+            <span>Vastapainoa&nbsp;opiskelulle&nbsp;›</span>
           </button>
         </Link>
       </HeroPrimaryButtons>

src/views/InEnglishPage/InEnglishPageHero.tsx

@@ -15,12 +15,12 @@ const InEnglishPageHero: React.FC = () => (
       <HeroPrimaryButtons>
         <Link to="/in_english#guild">
           <button type="button" onClick={noop}>
-            <span>About guild&nbsp;›</span>
+            <span>About&nbsp;guild&nbsp;›</span>
           </button>
         </Link>
         <Link to="/in_english#activities">
           <button type="button" onClick={noop}>
-            <span>Counterbalance to your studies&nbsp;›</span>
+            <span>Counterbalance&nbsp;to&nbsp;your&nbsp;studies&nbsp;›</span>
           </button>
         </Link>
       </HeroPrimaryButtons>