From 605adc66c5c5ea94c7fff4a4f16d55406b3abb19 Mon Sep 17 00:00:00 2001
From: veikko <veikko@lintujarvi.fi>
Date: Wed, 29 Jun 2022 23:36:36 +0300
Subject: [PATCH] Make performers, info and program responsive

---
 pages/info.tsx                | 2 +-
 pages/program.tsx             | 2 +-
 styles/Index.module.scss      | 4 ++++
 styles/Info.module.scss       | 3 +++
 styles/Performers.module.scss | 8 ++++++++
 styles/Program.module.scss    | 1 +
 styles/Shared.module.scss     | 7 +++++++
 7 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/pages/info.tsx b/pages/info.tsx
index 1ac6d7c..03f978c 100644
--- a/pages/info.tsx
+++ b/pages/info.tsx
@@ -31,7 +31,7 @@ const Info = () => {
     <section className={shared.page}>
       <h1>Info</h1>
 
-      <i>Lisätietoja tulossa myöhemmin!</i>
+      <i className={shared.followNote}>Lisätietoja tulossa myöhemmin!</i>
       <div className={styles.infoContainer}>
         <div className={styles.infoTitle} onClick={() => toggleInfo('shop')}>
           <h2>Livonsaaren Osuuskauppa</h2>
diff --git a/pages/program.tsx b/pages/program.tsx
index a7a899e..22cde46 100644
--- a/pages/program.tsx
+++ b/pages/program.tsx
@@ -30,7 +30,7 @@ const Program = () => {
   return (
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
-      <i>OHJELMA PÄIVITTYY KEVÄÄN MITTAAN, PYSYKÄÄ KUULOLLA!</i>
+      <i className={shared.followNote}>Lisätietoja tulossa myöhemmin!</i>
       <div className={styles.dayContainer}>
         <div
           className={styles.programTitle}
diff --git a/styles/Index.module.scss b/styles/Index.module.scss
index b49f923..5aeab7d 100644
--- a/styles/Index.module.scss
+++ b/styles/Index.module.scss
@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
+  margin-bottom: 8rem;
+  width: 47rem;
+  max-width: 100%;
 }
diff --git a/styles/Info.module.scss b/styles/Info.module.scss
index 130a48d..5495705 100644
--- a/styles/Info.module.scss
+++ b/styles/Info.module.scss
@@ -3,6 +3,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 90%;
+
   hr {
     border: 0.2rem solid #d5caf29d;
     width: 80%;
@@ -22,6 +24,7 @@
   margin-top: 1.5rem;
   cursor: pointer;
   width: 80%;
+  text-align: left;
 
   h2 {
     margin-right: 1rem;
diff --git a/styles/Performers.module.scss b/styles/Performers.module.scss
index 6fdc086..a533a0f 100644
--- a/styles/Performers.module.scss
+++ b/styles/Performers.module.scss
@@ -3,6 +3,7 @@
   justify-content: flex-start;
   align-items: flex-start;
   width: 90%;
+  cursor: pointer;
 
   p {
     padding-left: 1rem;
@@ -52,3 +53,10 @@
     transition: color 0.3s;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .performerContainer {
+    flex-direction: column;
+    align-items: center;
+  }
+}
diff --git a/styles/Program.module.scss b/styles/Program.module.scss
index 2020319..5af38b1 100644
--- a/styles/Program.module.scss
+++ b/styles/Program.module.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 90%;
 
   hr {
     border: 0.2rem solid #d5caf29d;
diff --git a/styles/Shared.module.scss b/styles/Shared.module.scss
index c5c4f01..6912b7c 100644
--- a/styles/Shared.module.scss
+++ b/styles/Shared.module.scss
@@ -12,8 +12,15 @@
 }
 
 .page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
   margin-bottom: 8rem;
   width: 47rem;
   max-width: 100%;
 }
+
+.followNote {
+  max-width: 90%;
+}