Support multiple info links

pages/info.tsx

@@ -116,16 +116,18 @@ const Info = () => {
           classNames='fadeTransition'
         >
           {infoToggles.accom ? (
-            <div>
+            <div className={styles.infoContent}>
               <p>
                 Majoituspalveluita Livonsaari-Velkua: Wanha Salakuljettaja
                 (Teersalo), Livonsaari Caravan, Saaristohotelli Vaihela.
               </p>
-              <a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a>
+              <div className={styles.linkList}>
-              <a href='https://www.livonsaarencaravan.fi/'>
+                <a href='https://oldsmuggler.fi/'>Vanha Salakuljettaja</a>
-                Livonsaari Caravan
+                <a href='https://www.livonsaarencaravan.fi/'>
-              </a>
+                  Livonsaari Caravan
-              <a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
+                </a>
+                <a href='https://vaihela.fi/'>Saaristohotelli Vaihela</a>
+              </div>
             </div>
           ) : (
             <></>

styles/Info.module.scss

@@ -32,3 +32,19 @@
     transition: color 0.3s;
   }
 }
+
+.infoContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.linkList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  a {
+    margin-bottom: 1rem;
+  }
+}

styles/globals.scss

@@ -14,7 +14,7 @@ p {
 }
 
 a {
-  color: #8962ec;
+  color: #7e54e7;
   text-decoration: underline;
 }