From 754ae63b9f261994ef07584ff8d3b12d4b64aa7e Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@gmail.com>
Date: Mon, 3 Jun 2019 18:23:47 +0300
Subject: [PATCH] Front page typography and styles

---
 src/components/Card/Card.scss                 |  2 +-
 src/components/Footer/Footer.scss             | 34 ++-----
 src/components/Footer/Footer.tsx              | 20 ++---
 .../HeroAsideItem/HeroAsideItem.scss          |  9 +-
 .../HeroAsideItem/HeroAsideItem.tsx           | 13 ++-
 .../HeroAsideSection/HeroAsideSection.scss    |  3 +-
 .../HeroMainSection/HeroMainSection.scss      | 14 +--
 src/components/PageSection/PageSection.scss   |  2 +-
 src/index.scss                                | 13 ++-
 src/pages/FrontPage/FrontPage.tsx             | 89 ++++++++++++-------
 src/pages/GuildPage/GuildPage.tsx             | 20 ++---
 11 files changed, 123 insertions(+), 96 deletions(-)

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 008823b..c7598b5 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -82,7 +82,7 @@
     justify-content: center;
     text-align: center;
     font-size: 0.9rem;
-    font-weight: bold;
+    font-weight: 600;
 
     @media screen and (max-width: 1200px - 1px) {
       margin: 0.5rem 0;
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
index 534724a..da4cad9 100644
--- a/src/components/Footer/Footer.scss
+++ b/src/components/Footer/Footer.scss
@@ -4,69 +4,54 @@
   display: flex;
   flex-direction: column;
 
-  &__info {
+  &__content {
     display: flex;
-    flex-direction: row nowrap;
   }
 
-  & h4 {
+  h4 {
     color: $light-blue;
-    text-transform: uppercase;
     padding: 1.5rem 0;
-    letter-spacing: 2px;
   }
 
   & a {
     color: $white;
     text-decoration: underline;
     padding: 0.4rem 0;
-    font-size: 12px;
-
-    @media screen and (max-width: 600px - 1px) {
-      font-size: 16px;
-    }
+    font-size: 14px;
   }
 
   & p {
     color: $white;
     margin: 0;
     padding: 0.4rem 0;
-    font-size: 12px;
-
-    @media screen and (max-width: 600px - 1px) {
-      font-size: 16px;
-    }
+    font-size: 14px;
   }
 
-  &__text {
+  &__info {
     display: flex;
     flex-direction: column;
-    text-align: left;
     flex-basis: 100%;
     align-items: center;
 
     &__block {
-      padding: 1rem 1rem 2rem;
+      padding: 1rem 0;
     }
   }
 
   &__contacts {
     display: flex;
-    position: relative;
     justify-content: space-between;
     flex-flow: row nowrap;
-    font-weight: 400;
+    font-weight: 200;
 
     @media screen and (max-width: 600px - 1px) {
       flex-flow: column nowrap;
     }
   }
 
-  &__content {
+  &__text {
     display: flex;
-    position: relative;
     flex-flow: column;
-    text-align: left;
     min-width: 180px;
 
     @media screen and (min-width: 600px) {
@@ -76,9 +61,7 @@
 
   &__links {
     display: flex;
-    position: relative;
     flex-flow: column;
-    text-align: left;
 
     @media screen and (max-width: 600px - 1px) {
       margin-top: 2rem;
@@ -89,7 +72,6 @@
     display: flex;
     flex-flow: row nowrap;
     background-color: $black;
-    align-items: center;
     text-align: center;
     justify-content: center;
     font-size: 12px;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 337fab6..503cb80 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -3,19 +3,19 @@ import { Link } from "react-router-dom";
 import FooterMap from "../FooterMap/FooterMap";
 import "./Footer.scss";
 
-export interface FooterProps {}
-export interface FooterState {}
+export interface FooterProps { }
+export interface FooterState { }
 
 class Footer extends React.Component<FooterProps, FooterState> {
   render() {
     return <React.Fragment>
       <div className="footer">
-        <div className="footer__info">
-          <div className="footer__text">
-            <div className="footer__text__block">
+        <div className="footer__content">
+          <div className="footer__info">
+            <div className="footer__info__block">
               <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
               <div className="footer__contacts">
-                <div className="footer__content">
+                <div className="footer__text">
                   <p>TUAS-Talo</p>
                   <p>Maarintie 8</p>
                   <p>PL 15500, 00076 Aalto</p>
@@ -36,11 +36,11 @@ class Footer extends React.Component<FooterProps, FooterState> {
           </div>
           <FooterMap />
         </div>
-      <div className="footer__copyright">
-        <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
-        <p>webmaster: sik-vtmk@list.ayy.fi</p>
+        <div className="footer__copyright">
+          <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
+          <p>webmaster: sik-vtmk@list.ayy.fi</p>
+        </div>
       </div>
-    </div>
     </React.Fragment>;
   }
 }
diff --git a/src/components/HeroAsideItem/HeroAsideItem.scss b/src/components/HeroAsideItem/HeroAsideItem.scss
index 4af8fb8..51a0f14 100644
--- a/src/components/HeroAsideItem/HeroAsideItem.scss
+++ b/src/components/HeroAsideItem/HeroAsideItem.scss
@@ -24,11 +24,12 @@
     line-height: 20px;
   }
 
-  a {
+  h6 {
     color: $blue;
     font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 14px;
+  }
+
+  h6:hover {
+    color: $white;
   }
 }
diff --git a/src/components/HeroAsideItem/HeroAsideItem.tsx b/src/components/HeroAsideItem/HeroAsideItem.tsx
index ad59c07..a8539ac 100644
--- a/src/components/HeroAsideItem/HeroAsideItem.tsx
+++ b/src/components/HeroAsideItem/HeroAsideItem.tsx
@@ -9,14 +9,19 @@ export interface HeroAsideItemProps {
 }
 export interface HeroAsideItemState {}
 
-class HeroAsideItem extends React.Component<HeroAsideItemProps, HeroAsideItemState> {
+class HeroAsideItem extends React.Component<
+  HeroAsideItemProps,
+  HeroAsideItemState
+> {
   render() {
     const { title, linkText, linkHref, children } = this.props;
     return (
       <div className="hero-aside-item">
-        <h2>{ title }</h2>
-        <p>{ children }</p>
-        <Link to={linkHref}>{linkText} ›</Link>
+        <h2>{title}</h2>
+        <p>{children}</p>
+        <Link to={linkHref}>
+          <h6>{linkText} ›</h6>
+        </Link>
       </div>
     );
   }
diff --git a/src/components/HeroAsideSection/HeroAsideSection.scss b/src/components/HeroAsideSection/HeroAsideSection.scss
index ccbd1ab..c2c7dc9 100644
--- a/src/components/HeroAsideSection/HeroAsideSection.scss
+++ b/src/components/HeroAsideSection/HeroAsideSection.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex-flow: column nowrap;
   align-items: flex-start;
+  justify-content: center;
   flex: 4;
 
   @media screen and (max-width: 800px - 1px) {
@@ -11,7 +12,6 @@
   }
 
   text-align: left;
-  font-weight: 300;
   padding: 3rem 1rem 2rem;
 
   &.dark-blue {
@@ -22,6 +22,7 @@
     }
 
     p {
+      font-weight: 100;
       color: $white;
     }
   }
diff --git a/src/components/HeroMainSection/HeroMainSection.scss b/src/components/HeroMainSection/HeroMainSection.scss
index 4b68949..14fc0e2 100644
--- a/src/components/HeroMainSection/HeroMainSection.scss
+++ b/src/components/HeroMainSection/HeroMainSection.scss
@@ -6,19 +6,23 @@
   align-items: center;
   flex: 6;
   text-align: center;
-  font-weight: 300;
+  font-weight: 100;
   padding: 2rem 1rem 2rem;
   line-height: 24px;
 
   h1 {
-    max-width: 400px;
-    font-size: 2.3em;
-    font-weight: 300;
+    max-width: 600px;
     line-height: 40px;
   }
 
   p {
-    font-size: 16px;
     max-width: 400px;
+    font-weight: 100;
   }
 }
+
+.hero-button-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 20%;
+}
diff --git a/src/components/PageSection/PageSection.scss b/src/components/PageSection/PageSection.scss
index 52da9b3..c1adfa1 100644
--- a/src/components/PageSection/PageSection.scss
+++ b/src/components/PageSection/PageSection.scss
@@ -53,7 +53,7 @@
       bottom: 0;
       width: 98%;
       left: 1%;
-      border-bottom: 2px solid $blue;
+      border-bottom: 1px solid rgba($blue, 0.4);
     }
   }
 }
diff --git a/src/index.scss b/src/index.scss
index e1033a3..735dbff 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -29,6 +29,8 @@ body {
 h1 {
   font-size: 2.5em;
   font-weight: 200;
+  margin-block-start: 0;
+  margin-block-end: 0;
 
   &__lg {
     font-size: 2.75em;
@@ -37,8 +39,11 @@ h1 {
 
 h2 {
   font-size: 1.2em;
-  letter-spacing: 0.1em;
   font-weight: 700;
+  letter-spacing: 0.1em;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  text-transform: uppercase;
 
   &__lg {
     font-size: 2em;
@@ -58,10 +63,11 @@ h3 {
 
 h4 {
   font-size: 1em;
-  letter-spacing: 0.1em;
   font-weight: 700;
+  letter-spacing: 0.1em;
   margin-block-start: 0;
   margin-block-end: 0;
+  text-transform: uppercase;
 
   &__lg {
     font-size: 2em;
@@ -71,6 +77,8 @@ h4 {
 h5 {
   font-size: 1.2em;
   font-weight: 600;
+  margin-block-start: 0;
+  margin-block-end: 0;
 
   &__lg {
     font-size: 2em;
@@ -83,6 +91,7 @@ h6 {
   font-weight: 800;
   margin-block-start: 0;
   margin-block-end: 0;
+  text-transform: uppercase;
 
   &__lg {
     font-size: 2em;
diff --git a/src/pages/FrontPage/FrontPage.tsx b/src/pages/FrontPage/FrontPage.tsx
index 1f6d97a..f8003f3 100644
--- a/src/pages/FrontPage/FrontPage.tsx
+++ b/src/pages/FrontPage/FrontPage.tsx
@@ -9,7 +9,7 @@ import { StaticContext } from "../../server/StaticContext";
 // @ts-ignore
 import * as BeerImage from "../../assets/img/beer.jpeg";
 import PageSection from "../../components/PageSection";
-import { BackgroundColor as PageSectionColor }  from "../../components/PageSection/PageSection";
+import { BackgroundColor as PageSectionColor } from "../../components/PageSection/PageSection";
 import { BackgroundColor as HeroAsideColor } from "../../components/HeroAsideSection/HeroAsideSection";
 
 import PageLink from "../../components/PageLink/PageLink";
@@ -98,60 +98,81 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
         <PageSection backgroundColor={PageSectionColor.DarkBlue} fullSize>
           <HeroMainSection>
             <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
-            <p>on elektroniikan ja sähkötekniikan opiskelijoiden järjestö.
-            Kilta kasaa yhteen yli 600 alansa huippua, jotka ovat
-            avainasemassa vauhdilla sähköistyvän maailmamme
-            kehityksessä.</p>
-            <Button type={ButtonType.Hero} onClick={() => { }}>Killan tehtävät&nbsp;›</Button>
-            <Button type={ButtonType.Hero} onClick={() => { }}>Vastapainoa opiskelulle&nbsp;›</Button>
+            <p>
+              on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
+              kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
+              vauhdilla sähköistyvän maailmamme kehityksessä.
+            </p>
+            <div className="hero-button-container">
+              <Button type={ButtonType.Hero} onClick={() => { }}>
+                <h6>Killan tehtävät&nbsp;›</h6>
+              </Button>
+              <Button type={ButtonType.Hero} onClick={() => { }}>
+                <h6>Vastapainoa opiskelulle&nbsp;›</h6>
+              </Button>
+            </div>
+
           </HeroMainSection>
           <HeroAsideSection backgroundColor={HeroAsideColor.DarkBlue}>
             <HeroAsideItem
               title="Vasta-aloittanut opiskelija"
               linkHref="/kilta/fuksi"
-              linkText="Fuksit">
-              Fuksikasvatusta, ISO-toimintaa, lorem
-              ipsum dolor sit ja amet.
+              linkText="Fuksit"
+            >
+              Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
             </HeroAsideItem>
             <HeroAsideItem
               title="Harkitsetko uraa alalla?"
               linkHref="/opinnot_ja_ura"
-              linkText="Opinnot ja ura">
+              linkText="Opinnot ja ura"
+            >
               Oletko abi, vaihtamassa uraa tai valmistumassa?
             </HeroAsideItem>
             <HeroAsideItem
               title="Yhteistyö yritysten kanssa"
               linkHref="/yritysyhteistyo"
-              linkText="Yritysyhteistyö">
-              Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja sponsseille.
+              linkText="Yritysyhteistyö"
+            >
+              Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
+              sponsseille.
             </HeroAsideItem>
           </HeroAsideSection>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.White} cardSection>
-        {events.map(event => (
-          <Card
-            key={event.id}
-            title={event.title}
-            start_time={event.start_time}
-            text={event.description}
-            link={"/events/" + event.id}
-            image={BeerImage}
-            button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
-          />
-        ))}
-        <div className="card" key="links">
-          <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
-            Kaikki tapahtumat
-          </PageLink>
-        </div>
+          {events.map(event => (
+            <Card
+              key={event.id}
+              title={event.title}
+              start_time={event.start_time}
+              text={event.description}
+              link={"/events/" + event.id}
+              image={BeerImage}
+              button={
+                <Button type={ButtonType.Filled} onClick={() => { }}>
+                  <h6>Lue lisää&nbsp;›</h6>
+                </Button>
+              }
+            />
+          ))}
+          <div className="card" key="links">
+            <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
+              Kaikki tapahtumat
+            </PageLink>
+          </div>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.Orange}>
           <Ribbon>
             <h3>Sössöä vuodesta 1969.</h3>
-            <TextAnchor size={TextSize.SmallRibbon} to="https://sosso.fi"><h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4></TextAnchor>
+            <TextAnchor size={TextSize.SmallRibbon} to="https://sosso.fi">
+              <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
+            </TextAnchor>
           </Ribbon>
         </PageSection>
-        <PageSection backgroundColor={PageSectionColor.White} bottomBorder cardSection>
+        <PageSection
+          backgroundColor={PageSectionColor.White}
+          bottomBorder
+          cardSection
+        >
           {feed.map(inst => (
             <Card
               key={inst.id}
@@ -159,7 +180,11 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
               start_time={inst.publish_time}
               text={inst.description}
               link={"/feed/" + inst.id}
-              button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
+              button={
+                <Button type={ButtonType.Filled} onClick={() => { }}>
+                  <h6>Lue lisää&nbsp;›</h6>
+                </Button>
+              }
             />
           ))}
           <div className="card" key="links">
diff --git a/src/pages/GuildPage/GuildPage.tsx b/src/pages/GuildPage/GuildPage.tsx
index 63d7484..4fcf74b 100644
--- a/src/pages/GuildPage/GuildPage.tsx
+++ b/src/pages/GuildPage/GuildPage.tsx
@@ -16,8 +16,8 @@ import Accordion from "../../components/Accordion";
 import TextAnchor from "../../components/TextAnchor/index";
 import { TextSize } from "../../components/TextAnchor/TextAnchor";
 
-export interface GuildPageProps {}
-export interface GuildPageState {}
+export interface GuildPageProps { }
+export interface GuildPageState { }
 
 class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
   render() {
@@ -59,21 +59,21 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
           <PageSection backgroundColor={PageSectionColor.White}>
             <AsideSection className="page__white" />
             <MainSection>
-              <h2>Killan tehtävät ja tarina</h2>
+              <h3>Killan tehtävät ja tarina</h3>
               <p>Kilta tukee jäsentensä hyvinvointia ja tarjoaa vastapainoa opiskelulle. Kilta järjestää
               esimerkiksi urheilutapahtumia, kulttuurielämyksiä ja näiden lisäksi sitsejä ja
               saunailtoja. Valinnanvaraa on, joten <TextAnchor to="/kalenteri">tapahtumakalenterin</TextAnchor> aktiivisella seuraamisella
-              saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
+                saattaa olla hyvinkin miellyttäviä seuraamuksia. Voit myös itse järjestää mieleisesi
               tapahtuman killan tukemana, tai ehdottaa sitä killan toimitsijoille.</p>
 
               <p>Yhteistyössä korkeakoulun kanssa, kilta kehittää <TextAnchor to="/opinnot">opetusta</TextAnchor>. Kilta on mukana
               kurssien kehittämisessä, valvoo kiltalaisten etua korkeakoulussa ja tuo korkeakoulun
               henkilöstöä lähemmäs kiltalaisia.
               Kilta avaa oven <TextAnchor to="/yritysyhteistyo">yritysmaailmaan</TextAnchor> järjestämällä yritysten kanssa excursioita,
-              saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
-              uusista avoimista työpaikoista.
+                saunailtoja ja yritystapahtumia. Lisäksi killan kautta kuulee ensimmäisten joukossa
+                uusista avoimista työpaikoista.
               Killalla on Otaniemen mukavin <TextAnchor to="/kiltahuone">kiltahuone</TextAnchor>, jossa voi käydä hengähtämässä
-              luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
+                luentojen välillä, hakea apua vaikeisiin tehtäviin tai järjestää vaikka leffailtoja. Tämän
               lisäksi killalla on myös haastavampaan elektroniikkaharrasteluun sopivat tilat.</p>
 
               <h6>Takana lähes satavuotinen historia</h6>
@@ -100,8 +100,8 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
               Aalto-yliopistossa.
               Teekkariutta on vaikkapa toimiminen killoissa tai jossain <TextAnchor to="https://ayy.fi/yhdistykset/yhdistyslistaus/">AYY:n lukuisista
               yhdistyksistä</TextAnchor>. Teekkariutta on yhtä lailla SIK:n tapahtumien järjestäminen tai niihin
-              osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
-              Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
+                osallistuminen kuin vaikkapa laulaminen Polyteknikkojen Kuorossa tai sukeltaminen
+                Polyteknikkojen sukelluskerho Kuplassa. Kaikille varmasti löytyy jotain itseä
               kiinnostavaa.</p>
 
               <p>Teekkareilla, varsinkin otaniemeläisillä, on pitkä ja vahva historia. Siihen kannattaa
@@ -132,7 +132,7 @@ class GuildPage extends React.Component<GuildPageProps, GuildPageState> {
             </Ribbon>
           </PageSection>
           <PageSection backgroundColor={PageSectionColor.White}>
-            <AsideSection className="page__white"/>
+            <AsideSection className="page__white" />
             <MainSection>
               <h2>Organisaatio</h2>