From b1839ce31f913eba066250c9ea1b86c89abfbae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Fri, 26 May 2023 18:12:24 +0300
Subject: [PATCH] Update program title styling

---
 pages/program.tsx          | 44 ++++++++++++++++++++++++--------------
 styles/Program.module.scss | 10 +++++++--
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/pages/program.tsx b/pages/program.tsx
index d681bda..c3adc31 100644
--- a/pages/program.tsx
+++ b/pages/program.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { FiExternalLink } from 'react-icons/fi';
 import shared from '../styles/Shared.module.scss';
-import program from '../styles/Program.module.scss';
+import styles from '../styles/Program.module.scss';
 
 interface DayToggles {
   wed: boolean;
@@ -30,25 +30,37 @@ const Program = () => {
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
 
-      <h2>
-        20.7. Laituri{' '}
-        <a href='https://www.cafelaituri.fi'>
-          <FiExternalLink fontSize={20} />
-        </a>
+      <h2 className={styles.programTitle}>
+        <div>20.7.</div>
+        <div>
+          <span className={styles.placeName}>Laituri</span>
+          <a href='https://www.cafelaituri.fi'>
+            <FiExternalLink fontSize={20} />
+          </a>
+        </div>
+        <div />
       </h2>
       <p>Café Laituri, Voiponlahdentie 37, Palva</p>
-      <h2>
-        21.7. Vaihela{' '}
-        <a href='https://vaihela.fi/'>
-          <FiExternalLink fontSize={20} />
-        </a>
+      <h2 className={styles.programTitle}>
+        <div>21.7.</div>
+        <div>
+          <span className={styles.placeName}>Vaihela</span>
+          <a href='https://vaihela.fi/'>
+            <FiExternalLink fontSize={20} />
+          </a>
+        </div>
+        <div />
       </h2>
       <p>Saaristohotelli Vaihela, Velkuanmaantie 168, Palva</p>
-      <h2>
-        22.7. Sinervo{' '}
-        <a href='https://www.prosinervo.com/'>
-          <FiExternalLink fontSize={20} />
-        </a>
+      <h2 className={styles.programTitle}>
+        <div>22.7.</div>
+        <div>
+          <span className={styles.placeName}>Sinervo</span>
+          <a href='https://www.prosinervo.com/'>
+            <FiExternalLink fontSize={20} />
+          </a>
+        </div>
+        <div />
       </h2>
       <p style={{ marginBottom: 50 }}>
         Sinervon talo, Sauniementie 5, Teersalo
diff --git a/styles/Program.module.scss b/styles/Program.module.scss
index e8d6a71..928c341 100644
--- a/styles/Program.module.scss
+++ b/styles/Program.module.scss
@@ -21,9 +21,10 @@
 
 .programTitle {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  align-items: baseline;
+  justify-content: space-evenly;
   width: 80%;
+  max-width: 25rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   margin-top: 1.5rem;
@@ -38,3 +39,8 @@
     transition: color 0.3s;
   }
 }
+
+.placeName {
+  font-size: 2.5rem;
+  margin-right: 1rem;
+}