From 7d32d9c7dbc0cca5afc85aa90900272076f268a3 Mon Sep 17 00:00:00 2001
From: veikko <veikko@lintujarvi.fi>
Date: Sun, 3 Jul 2022 23:51:35 +0300
Subject: [PATCH] Fix safety page on mobile

---
 pages/safety.tsx          | 10 +++++-----
 styles/Safety.module.scss |  7 +++++++
 styles/globals.scss       |  7 +++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/pages/safety.tsx b/pages/safety.tsx
index f1fdde8..503917c 100644
--- a/pages/safety.tsx
+++ b/pages/safety.tsx
@@ -16,20 +16,20 @@ const Safety = () => {
 
       <ul className={styles.safetyList}>
         <li>
-          <b>Kunnioitus.</b>Jokaisella ihmisellä on oikeus tulla kunnioitetuksi
+          <b>Kunnioitus. </b>Jokaisella ihmisellä on oikeus tulla kunnioitetuksi
           omana itsenään. Kunnioitathan muiden ihmisten fyysistä ja psyykkistä
           koskemattomuutta, mielipiteitä sekä ihmisarvoa. Jokaisella on oikeus
           poistua epämukavaksi kokemastaan tilanteesta tai keskustelusta. Ethän
           myöskään ota ihmisistä kuvia kysymättä ensin.{' '}
         </li>
         <li>
-          <b>Olettaminen.</b>Ethän oleta kenenkään sukupuolta, kansallisuutta,
+          <b>Olettaminen. </b>Ethän oleta kenenkään sukupuolta, kansallisuutta,
           seksuaalista suuntautumista, kulttuuria, kieltä, uskontoa, arvoja,
           terveydentilaa tai toimintakykyä. Ethän tee johtopäätelmiä kenenkään
           ulkonäön, käytöksen tai oletetun sosioekonomisen aseman perusteella.
         </li>
         <li>
-          <b>Kommunikointi.</b>
+          <b>Kommunikointi. </b>
           Pyrithän luomaan ympärillesi ystävällistä ja turvallista ilmapiiriä.
           Ole avoin muita ihmisiä kohtaan, kuuntele ja käytä kunnioittavaa
           kieltä. Ethän oleta puheessasi kenenkään sukupuolta tai muita
@@ -38,12 +38,12 @@ const Safety = () => {
           jotakuta, pyydäthän anteeksi.
         </li>
         <li>
-          <b>Toimiminen.</b>
+          <b>Toimiminen. </b>
           Mikäli havaitset epäasiallista käytöstä tai koet olosi uhatuksi, älä
           epäröi pyytää apua Runosaaren ja tapahtumapaikkojen työntekijöiltä.
           Jos koet, että olet kohdannut häirintää tapahtumissamme ja siihen ei
           ole onnistuttu puuttumaan, ole yhteydessä Runosaari-työryhmään
-          sähköpostilla{' '}
+          sähköpostilla
           <a href='mailto:runosaari@gmail.com'>runosaari@gmail.com</a> .
         </li>
       </ul>
diff --git a/styles/Safety.module.scss b/styles/Safety.module.scss
index 002bc69..a95e6ba 100644
--- a/styles/Safety.module.scss
+++ b/styles/Safety.module.scss
@@ -1,7 +1,14 @@
 .safetyPage {
   margin-bottom: 4rem;
+  max-width: 80%;
 }
 
 .safetyList {
   text-align: left;
 }
+
+@media screen and (min-width: 768px) {
+  .safetyPage {
+    max-width: 35rem;
+  }
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index 3d2ad7b..6feb3da 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -25,4 +25,11 @@ main {
 
 h1 {
   font-size: 5rem;
+  word-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 3rem;
+  }
 }