Typography improvements

src/components/Button/Button.scss

@@ -9,6 +9,10 @@
   background: none;
   text-transform: uppercase;
 
+  @media screen and (max-width: 800px - 1px) {
+    font-size: 16px;
+  }
+
   &.hero {
     background-color: $dark-blue;
     color: $blue;

src/components/Card/Card.scss

@@ -20,6 +20,8 @@
     width: 100%;
     max-width: 100%;
     margin-bottom: 3rem;
+    margin-left: 0;
+    margin-right: 0;
   }
 
   &__title {

src/components/Ribbon/Ribbon.scss

@@ -24,6 +24,7 @@
     font-size: 0.8rem;
     font-weight: 600;
     text-transform: uppercase;
+    margin-top: 10px;
   }
 
   @media screen and (max-width: 600px - 1px) {

src/pages/FrontPage/FrontPage.tsx

@@ -94,8 +94,8 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
             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 ›</Button>
-            <Button type={ButtonType.Hero} onClick={() => { }}>Vastapainoa opiskelulle ›</Button>
+            <Button type={ButtonType.Hero} onClick={() => { }}>Killan tehtävät&nbsp;›</Button>
+            <Button type={ButtonType.Hero} onClick={() => { }}>Vastapainoa opiskelulle&nbsp;›</Button>
           </HeroMainSection>
           <HeroAsideSection>
           </HeroAsideSection>
@@ -109,11 +109,11 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
               text={event.description}
               link={"/events/" + event.id}
               image={BeerImage}
-              button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää ›</Button>}
+              button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
             />
           ))}
           <div className="front-page__page-links">
-            <PageLink to="/events" desc="löydät tapahtumakalenterista ›">
+            <PageLink to="/events" desc="löydät tapahtumakalenterista&nbsp;›">
               Kaikki tapahtumat
             </PageLink>
           </div>
@@ -121,7 +121,7 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
         <PageSection backgroundColor={PageSectionColor.Orange}>
           <Ribbon>
             <p>Sössöä vuodesta 1969.</p>
-            <a href="https://sosso.fi">Lue opiskelijalehden viimeisin numero ›</a>
+            <a href="https://sosso.fi">Lue opiskelijalehden viimeisin numero&nbsp;›</a>
           </Ribbon>
         </PageSection>
         <PageSection backgroundColor={PageSectionColor.White} bottomBorder>
@@ -132,16 +132,16 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
                 start_time={inst.publish_time}
                 text={inst.description}
                 link={"/events/" + inst.id}
-                button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää ›</Button>}
+                button={<Button type={ButtonType.Filled} onClick={() => { }}>Lue lisää&nbsp;›</Button>}
               />
             ))}
             <div className="front-page__page-links">
-              <PageLink to="/uutiset" desc="ja hallituksen kuulumiset ›">
-                Lue tuoreimmat uutiset
-              </PageLink>
-              <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa ›">
-                Kuvia tapahtumista
-              </PageLink>
+            <PageLink to="/uutiset" desc="ja hallituksen kuulumiset&nbsp;›">
+              Lue tuoreimmat uutiset
+            </PageLink>
+            <PageLink to="sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
+              Kuvia tapahtumista
+            </PageLink>
             </div>
         </PageSection>
         <PageSection center backgroundColor={PageSectionColor.White}>