From b85410e3c2bcddcad5e7b8d3f3774f823407ab44 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Tue, 8 Dec 2020 18:59:52 +0200
Subject: [PATCH] Hero & typography changes for better responsiveness

---
 src/components/Hero/Hero.tsx                  |  2 +-
 src/components/Hero/HeroAside.tsx             | 49 ++++++++-------
 src/components/Hero/HeroPrimarySection.tsx    |  3 -
 src/components/Hero/HeroSecondarySection.tsx  |  4 ++
 src/index.scss                                | 14 +++++
 src/views/ActualPage/ActualPageHero.tsx       | 60 +++++++++----------
 src/views/CorporatePage/CorporatePageHero.tsx | 10 ++--
 src/views/FreshmenPage/FreshmenPageHero.tsx   | 10 ++--
 src/views/FrontPage/FrontPageHero.tsx         | 36 ++++++-----
 src/views/GuildPage/GuildPageHero.tsx         | 14 ++---
 src/views/InEnglishPage/InEnglishPageHero.tsx | 10 ++--
 src/views/StudiesPage/StudiesPageHero.tsx     | 10 ++--
 12 files changed, 116 insertions(+), 106 deletions(-)

diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index fde4371..e6fff87 100644
--- a/src/components/Hero/Hero.tsx
+++ b/src/components/Hero/Hero.tsx
@@ -19,7 +19,7 @@ const Container = styled.div`
   }
 
   aside {
-    padding: 0 6rem;
+    padding: 3rem 6rem;
     align-items: center;
 
     @media screen and (max-width: 800px) {
diff --git a/src/components/Hero/HeroAside.tsx b/src/components/Hero/HeroAside.tsx
index 1944ce1..79484c6 100644
--- a/src/components/Hero/HeroAside.tsx
+++ b/src/components/Hero/HeroAside.tsx
@@ -11,7 +11,6 @@ interface HeroAsideItemProps {
 }
 
 const Article = styled.article`
-  max-width: 350px;
   margin-bottom: 1rem;
 `;
 
@@ -43,29 +42,35 @@ const Aside = styled.aside<{ colors: string }>`
   flex-direction: column;
   justify-content: center;
 
-  h2 {
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    line-height: 1.5rem;
-  }
+  & > div {
+    max-width: 350px;
 
-  p {
-    margin: 0;
-    line-height: 2rem;
-  }
+    h2 {
+      word-break: break-word;
+      hyphens: auto;
+      text-transform: uppercase;
+      letter-spacing: 3px;
+      line-height: 1.5rem;
+    }
+
+    p {
+      margin: 0;
+      line-height: 2rem;
+    }
 
 
-  & > p {
-    font-weight: 600;
-    margin-bottom: 2rem;
-  }
+    & > p {
+      font-weight: 600;
+      margin-bottom: 2rem;
+    }
 
-  a {
-    line-height: 2rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    text-decoration: none;
-    letter-spacing: 0.1rem;
+    a {
+      line-height: 2rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      text-decoration: none;
+      letter-spacing: 0.1rem;
+    }
   }
 `;
 
@@ -87,7 +92,9 @@ color: ${colors.darkBlue};
 
 const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children}) => (
   <Aside colors={textColors(bgColor)}>
-    {children}
+    <div>
+      {children}
+    </div>
   </Aside>
 )
 
diff --git a/src/components/Hero/HeroPrimarySection.tsx b/src/components/Hero/HeroPrimarySection.tsx
index b729c85..59a2fe6 100644
--- a/src/components/Hero/HeroPrimarySection.tsx
+++ b/src/components/Hero/HeroPrimarySection.tsx
@@ -15,9 +15,6 @@ const Section = styled.section`
 
   h1 {
     line-height: 40px;
-    @media screen and (max-width: 500px) {
-      font-size: 2rem;
-    }
   }
 
   p {
diff --git a/src/components/Hero/HeroSecondarySection.tsx b/src/components/Hero/HeroSecondarySection.tsx
index 806211b..098bf4c 100644
--- a/src/components/Hero/HeroSecondarySection.tsx
+++ b/src/components/Hero/HeroSecondarySection.tsx
@@ -12,6 +12,10 @@ const Note = styled.span`
   font-weight: bold;
   margin-right: 2rem;
   margin-top: -0.5rem;
+
+  @media screen and (max-width: 800px) {
+    font-size: 1.25rem;
+  }
 `;
 
 const Item = styled.div`
diff --git a/src/index.scss b/src/index.scss
index a05f45d..2509fac 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -30,10 +30,16 @@ body {
 p {
   font-size: 1.2rem;
   font-weight: 300;
+  word-break: break-word;
+  hyphens: auto;
 
   &.large {
     font-size: 2rem;
   }
+
+  @media screen and (max-width: 800px) {
+    font-size: 1rem;
+  }
 }
 
 h1 {
@@ -45,6 +51,10 @@ h1 {
   &.large {
     font-size: 2.75rem;
   }
+
+  @media screen and (max-width: 800px) {
+    font-size: 1.5rem;
+  }
 }
 
 h2 {
@@ -58,6 +68,10 @@ h2 {
   &.large {
     font-size: 2rem;
   }
+
+  @media screen and (max-width: 800px) {
+    font-size: 1rem;
+  }
 }
 
 h3 {
diff --git a/src/views/ActualPage/ActualPageHero.tsx b/src/views/ActualPage/ActualPageHero.tsx
index 36e3b6c..ccadfcf 100644
--- a/src/views/ActualPage/ActualPageHero.tsx
+++ b/src/views/ActualPage/ActualPageHero.tsx
@@ -5,36 +5,23 @@ import noop from "@utils/noop";
 
 const ActualPageHero: React.FC = () => (
   <Hero>
-    <div>
-      <HeroPrimarySection
-        header="Yritystapahtumia ja vastapainoa opiskelulle"
-        text="Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin."
-      >
-        <HeroPrimaryButtons row>
-          <Anchor to="#tapahtumat">
-            <button onClick={noop}>
-              <span>Tapahtumat&nbsp;›</span>
-            </button>
-          </Anchor>
-          <Anchor to="#uutiset">
-            <button onClick={noop}>
-              <span>Uutiset&nbsp;›</span>
-            </button>
-          </Anchor>
-        </HeroPrimaryButtons>
-      </HeroPrimarySection>
-
-      <HeroSecondarySection
-        heading="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)"
-      >
-        <HeroSecondarySectionItem note="Ma">
-          <span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
-        </HeroSecondarySectionItem>
-        <HeroSecondarySectionItem note="To">
-          <span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
-        </HeroSecondarySectionItem>
-      </HeroSecondarySection>
-    </div>
+    <HeroPrimarySection
+      header="Yritystapahtumia ja vastapainoa opiskelulle"
+      text="Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin."
+    >
+      <HeroPrimaryButtons row>
+        <Anchor to="#tapahtumat">
+          <button onClick={noop}>
+            <span>Tapahtumat&nbsp;›</span>
+          </button>
+        </Anchor>
+        <Anchor to="#uutiset">
+          <button onClick={noop}>
+            <span>Uutiset&nbsp;›</span>
+          </button>
+        </Anchor>
+      </HeroPrimaryButtons>
+    </HeroPrimarySection>
     <HeroAside bgColor="lightTurquoise">
       <p>
         Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
@@ -60,11 +47,24 @@ const ActualPageHero: React.FC = () => (
         linkText="Yritysyhteistyö&nbsp;›">
       </HeroAsideItem>
       <HeroAsideItem
+        // TODO: Too long
         header="Uusia suhteita ulkopaikkakuntalaisten kanssa"
         link="#ulkosuhteet"
         linkText="Ulkoiset suhteet&nbsp;›">
       </HeroAsideItem>
     </HeroAside>
+
+    <HeroSecondarySection
+      heading="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)"
+    >
+      <HeroSecondarySectionItem note="Ma">
+        <span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
+      </HeroSecondarySectionItem>
+      <HeroSecondarySectionItem note="To">
+        <span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
+      </HeroSecondarySectionItem>
+    </HeroSecondarySection>
+
   </Hero>
 )
 
diff --git a/src/views/CorporatePage/CorporatePageHero.tsx b/src/views/CorporatePage/CorporatePageHero.tsx
index 9ece37f..a16c222 100644
--- a/src/views/CorporatePage/CorporatePageHero.tsx
+++ b/src/views/CorporatePage/CorporatePageHero.tsx
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
 
 const CorporatePageHero: React.FC = () => (
   <Hero>
-    <div>
-      <HeroPrimarySection
-        header="Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!"
-        text="Aalto-yliopiston Sähköinsinöörikilta on loistava ja hyvinvoiva opiskelijayhteisö, joka vie sähkötekniikan avulla maailmaa eteenpäin. Kilta pitää jäsenistään huolta ja työelämän taitojen oppiminen onkin yksi killan tärkeistä arvoista. Siksi myös yritysyhteistyö on killalle hyvin arvokasta. Kilta järjestää paljon yhteistyötapahtumia, joissa kiltalaiset pääsevät tutustumaan yhteistyöyrityksiin ja killan tärkeänä tehtävänä on jakaa esimerkiksi työpaikkailmoituksia jäsenistölle."
-      />
-    </div>
+    <HeroPrimarySection
+      header="Tee yhteistyötä tulevaisuuden huippuosaajien kanssa!"
+      text="Aalto-yliopiston Sähköinsinöörikilta on loistava ja hyvinvoiva opiskelijayhteisö, joka vie sähkötekniikan avulla maailmaa eteenpäin. Kilta pitää jäsenistään huolta ja työelämän taitojen oppiminen onkin yksi killan tärkeistä arvoista. Siksi myös yritysyhteistyö on killalle hyvin arvokasta. Kilta järjestää paljon yhteistyötapahtumia, joissa kiltalaiset pääsevät tutustumaan yhteistyöyrityksiin ja killan tärkeänä tehtävänä on jakaa esimerkiksi työpaikkailmoituksia jäsenistölle."
+    />
 
     <HeroAside bgColor="lightTurquoise">
       <HeroAsideItem
diff --git a/src/views/FreshmenPage/FreshmenPageHero.tsx b/src/views/FreshmenPage/FreshmenPageHero.tsx
index 902a666..69e5952 100644
--- a/src/views/FreshmenPage/FreshmenPageHero.tsx
+++ b/src/views/FreshmenPage/FreshmenPageHero.tsx
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
 
 const FreshmenPageHero: React.FC = () => (
   <Hero>
-    <div>
-      <HeroPrimarySection
-        header="Tervetuloa opiskelemaan Otaniemeen!"
-        text="Tämä on fuksien oma etusivu ja olemmekin keränneet tänne kaikki tärkeimmät tiedot, joita fuksivuotenasi tarvitset. Tietysti kannattaa katsoa myös yleisiä sivuja, sillä tänne ei mahdu kaikki, mitä killassa tapahtuu."
-      />
-    </div>
+    <HeroPrimarySection
+      header="Tervetuloa opiskelemaan Otaniemeen!"
+      text="Tämä on fuksien oma etusivu ja olemmekin keränneet tänne kaikki tärkeimmät tiedot, joita fuksivuotenasi tarvitset. Tietysti kannattaa katsoa myös yleisiä sivuja, sillä tänne ei mahdu kaikki, mitä killassa tapahtuu."
+    />
 
     <HeroAside bgColor="lightTurquoise">
       <HeroAsideItem
diff --git a/src/views/FrontPage/FrontPageHero.tsx b/src/views/FrontPage/FrontPageHero.tsx
index 91d7daa..7cf15b8 100644
--- a/src/views/FrontPage/FrontPageHero.tsx
+++ b/src/views/FrontPage/FrontPageHero.tsx
@@ -5,25 +5,23 @@ import noop from "@utils/noop";
 
 const FrontPageHero: React.FC = () => (
   <Hero>
-    <div>
-      <HeroPrimarySection
-        header="Aalto-yliopiston Sähköinsinöörikilta"
-        text="on opiskelijajärjestö, joka kokoaa yhteen laaja-alaisesti sähkötekniikan osaajia elektroniikasta nanoteknologiaan ja akustiikkaan. Kiltalaisista valmistuu alansa huippuja, jotka ovat avainasemassa vauhdilla sähköistyvän maailmamme kehityksessä."
-      >
-        <HeroPrimaryButtons>
-          <Anchor to="/kilta">
-            <button onClick={noop}>
-              <span>Tietoa killasta&nbsp;›</span>
-            </button>
-          </Anchor>
-          <Anchor to="/kilta/toiminta">
-            <button onClick={noop}>
-              <span>Vastapainoa opiskelulle&nbsp;›</span>
-            </button>
-          </Anchor>
-        </HeroPrimaryButtons>
-      </HeroPrimarySection>
-    </div>
+    <HeroPrimarySection
+      header="Aalto-yliopiston Sähköinsinöörikilta"
+      text="on opiskelijajärjestö, joka kokoaa yhteen laaja-alaisesti sähkötekniikan osaajia elektroniikasta nanoteknologiaan ja akustiikkaan. Kiltalaisista valmistuu alansa huippuja, jotka ovat avainasemassa vauhdilla sähköistyvän maailmamme kehityksessä."
+    >
+      <HeroPrimaryButtons>
+        <Anchor to="/kilta">
+          <button onClick={noop}>
+            <span>Tietoa killasta&nbsp;›</span>
+          </button>
+        </Anchor>
+        <Anchor to="/kilta/toiminta">
+          <button onClick={noop}>
+            <span>Vastapainoa opiskelulle&nbsp;›</span>
+          </button>
+        </Anchor>
+      </HeroPrimaryButtons>
+    </HeroPrimarySection>
 
     <HeroAside bgColor="darkBlue">
       <HeroAsideItem
diff --git a/src/views/GuildPage/GuildPageHero.tsx b/src/views/GuildPage/GuildPageHero.tsx
index d17af19..0ac3d1d 100644
--- a/src/views/GuildPage/GuildPageHero.tsx
+++ b/src/views/GuildPage/GuildPageHero.tsx
@@ -3,14 +3,12 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
 
 const GuildPageHero: React.FC = () => (
   <Hero>
-    <div>
-      <HeroPrimarySection header="Kilta koostuu Aalto-yliopiston opiskelijoista, joita yhdistää erilaiset sähkötekniikkaan liittyvät alat">
-        <p>
-          Killan tehtäviin kuuluu varmistaa, että sen jäsenet saavat laadukasta <a href="/opinnot_ja_ura">opetusta</a>, ja että heistä valmistuu alansa huippuosaajia. Uusille opiskelijoille kilta järjestää <a href="/kilta/fuksi">fuksikasvatusta</a>, joka tutustuttaa teekkarikulttuuriin ja opiskeluun yliopistossa. Kilta tarjoaa vastapainoa opiskelulle erilaisten <a href="/kilta/toiminta">tapahtumien</a> muodossa ja välittää jäsenilleen tietoa alan <a href="/yritysyhteistyo">työpaikoista ja yrityksistä</a>.
-        </p>
-        <p>Kilta toimii opiskelijoiden voimin. Killan <a href="#toimintaan">vapaaehtoisena</a> pääset kartuttamaan kokemusta, josta on valtavasti hyötyä myös myöhemmin työelämässä.</p>
-      </HeroPrimarySection>
-    </div>
+    <HeroPrimarySection header="Kilta koostuu Aalto-yliopiston opiskelijoista, joita yhdistää erilaiset sähkötekniikkaan liittyvät alat">
+      <p>
+        Killan tehtäviin kuuluu varmistaa, että sen jäsenet saavat laadukasta <a href="/opinnot_ja_ura">opetusta</a>, ja että heistä valmistuu alansa huippuosaajia. Uusille opiskelijoille kilta järjestää <a href="/kilta/fuksi">fuksikasvatusta</a>, joka tutustuttaa teekkarikulttuuriin ja opiskeluun yliopistossa. Kilta tarjoaa vastapainoa opiskelulle erilaisten <a href="/kilta/toiminta">tapahtumien</a> muodossa ja välittää jäsenilleen tietoa alan <a href="/yritysyhteistyo">työpaikoista ja yrityksistä</a>.
+      </p>
+      <p>Kilta toimii opiskelijoiden voimin. Killan <a href="#toimintaan">vapaaehtoisena</a> pääset kartuttamaan kokemusta, josta on valtavasti hyötyä myös myöhemmin työelämässä.</p>
+    </HeroPrimarySection>
 
     <HeroAside bgColor="lightTurquoise">
       <HeroAsideItem
diff --git a/src/views/InEnglishPage/InEnglishPageHero.tsx b/src/views/InEnglishPage/InEnglishPageHero.tsx
index 976d122..5b9eeda 100644
--- a/src/views/InEnglishPage/InEnglishPageHero.tsx
+++ b/src/views/InEnglishPage/InEnglishPageHero.tsx
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
 
 const InEnglishPageHero: React.FC = () => (
   <Hero>
-    <div>
-      <HeroPrimarySection
-        header="Guild of Electrical Engineering"
-        text="is something"
-      />
-    </div>
+    <HeroPrimarySection
+      header="Guild of Electrical Engineering"
+      text="is something"
+    />
 
     <HeroAside bgColor="darkBlue">
       <HeroAsideItem
diff --git a/src/views/StudiesPage/StudiesPageHero.tsx b/src/views/StudiesPage/StudiesPageHero.tsx
index 404436d..dcc81f9 100644
--- a/src/views/StudiesPage/StudiesPageHero.tsx
+++ b/src/views/StudiesPage/StudiesPageHero.tsx
@@ -3,12 +3,10 @@ import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem } from "@components/
 
 const StudiesPageHero: React.FC = () => (
   <Hero>
-    <div>
-      <HeroPrimarySection
-        header="Suomen parasta elektroniikan opetusta"
-        text="Aalto-yliopistossa sinulla on mahdollisuus opiskella sähkö- ja elektroniikkatekniikkaa huippu professorien ja opettajien johdolla, vieläpä parhaassa mahdollisessa yhteisössä. Sähkötekniikan korkeakoulusta valmistut matematiikkaa ja fysiikkaa soveltavaksi huippuosaajaksi, jolla on valmiudet vaikka mihin työelämän taitoihin laidasta laitaa. Lue lisää opinnoista, killan roolista yliopistoelämässä ja uramahdollisuuksista alempaa."
-      />
-    </div>
+    <HeroPrimarySection
+      header="Suomen parasta elektroniikan opetusta"
+      text="Aalto-yliopistossa sinulla on mahdollisuus opiskella sähkö- ja elektroniikkatekniikkaa huippu professorien ja opettajien johdolla, vieläpä parhaassa mahdollisessa yhteisössä. Sähkötekniikan korkeakoulusta valmistut matematiikkaa ja fysiikkaa soveltavaksi huippuosaajaksi, jolla on valmiudet vaikka mihin työelämän taitoihin laidasta laitaa. Lue lisää opinnoista, killan roolista yliopistoelämässä ja uramahdollisuuksista alempaa."
+    />
 
     <HeroAside bgColor="darkBlue">
       <HeroAsideItem