Adds a bit more mobile styling on homepage. Adds CMS translations to …

…nation info page and adds responsiveness.

hooks/translations.json

@@ -129,6 +129,46 @@
     "en": "Satalinna foundation\t",
     "sv": "Satalinna Stiftelse\t"
   },
+  "nationInfo:headerDescription": {
+    "fi": "Talo Kampissa, mahtavia tapahtumia, hyviä tyyppejä! Tältä sivulta löydät Satakuntalaisesta Osakunnasta tietoa, mitä me teemme ja miten voit liittyä mukaan!\t \t \t \t",
+    "en": "House in Kamppi, amazing events, great people! On this page you will find information about Satakuntalainen Osakunta, what we do and how you can join us!\t \t \t \t",
+    "sv": "Hus i Kampen, fantastiska evenemang, fantastiska människor! På den här sidan hittar du information om Satakuntalainen Osakunta, vad vi gör och hur du kan bli medlem hos oss!\t \t \t \t"
+  },
+  "nationInfo:headerTitle": {
+    "fi": "Tietoa Osakunnasta\t",
+    "en": "Nation Info\t",
+    "sv": "Information om Nationen\t"
+  },
+  "nationInfo:howToJoinDescription": {
+    "fi": "Kiinnostuitko liittymisestä tai haluatko lisätietoja toiminnastamme? Ota yhteyttä jäsenasioiden sihteeriimme osoitteessa jasensihteeri(a)satakuntatalo.fi, tai piipahda toimistollamme osoitteessa Lapinrinne 1 E1 keskiviikkoisin klo 18:00-18:30.  Opiskelija-asumiseen liittyvissä kysymyksissä voit olla yhteydessä asuntoasiainhoitokuntaamme osoitteessa ajk(a)satakuntatalo.fi.  Jäsenmaksumme on vain 12 € vuodessa, Liittyessäsi jäseneksi saat mahdollisuuden ostaa sähköisen avaimen, jolla pääset kulkemaan Satakuntatalolla, aktiivisella opiskelijatalollamme. Jäsenenä saat vapaasti käyttää yhteisiä tilojamme, kuten keittiötä, TV-huonetta joka pelikonsolien kera,kirjastoa, kuntosalia ja saunaa. Saat myös viikoittain uutiskirjeen tulevista tapahtumista sekä erillisiä viestejä erityistapahtumista.  Jäsenenä voit liittyä erilaisiin kerhoihin ja toimikuntiin, osallistua akateemisiin pöytäjuhliin ja nauttia kaikesta muusta, mitä yhteisömme tarjoaa!  ",
+    "en": "Interested in joining or learning more about our activities? Feel free to reach out to our membership secretary at jasensihteeri(a)satakuntatalo.fi, or simply drop by our office at Lapinrinne 1 E1 on Wednesdays between 18:00 and 18:30.  For inquiries about student accommodation, please contact our housing board at ajk(a)satakuntatalo.fi.  Our annual membership fee is just €12. Becoming a member grants you the chance to get an electronic key to access Satakuntatalo, our vibrant student house. As a member, you’ll have full access to shared spaces like our kitchen, TV room with gaming consoles, a library, a gym and a sauna. You’ll also receive a weekly newsletter with updates on upcoming events, along with additional emails for specific happenings.  Once you join, you can participate in various clubs and committees, attend our traditional dinner parties, and enjoy much more of what our community has to offer! ",
+    "sv": "Vill du bli medlem eller få mer information om våra aktiviteter? Kontakta vår medlemssekreterare på jasensihteeri(a)satakuntatalo.fi, eller besök vårt kontor på Lapinrinne 1 E1 på onsdagar mellan 18:00 och 18:30.  För frågor om studentboende, kontakta vår bostadsstyrelse på ajk(a)satakuntatalo.fi.  Vår medlemsavgift är endast 12 € per år, och när du blir medlem får du möjlighet att en elektronisk nyckel som ger dig tillgång till Satakuntatalo, vårt aktiva studenthus. Som medlem har du fri tillgång till gemensamma utrymmen som köket, TV-rummet med spelkonsoler, biblioteket, gym och bastu. Du får även ett veckobrev med information om kommande evenemang samt extra meddelanden om specifika händelser.  Som medlem kan du gå med i olika klubbar och kommittéer, delta i våra traditionella middagar och njuta av allt annat som vårt gemenskap erbjuder! "
+  },
+  "nationInfo:howToJoinTitle": {
+    "fi": "Miten voin liittyä?\t \t",
+    "en": "How do I join?\t \t",
+    "sv": "Hur blir jag medlem?\t \t"
+  },
+  "nationInfo:whatIsSatoDescription": {
+    "fi": "Satakuntalainen Osakunta, tuttavallisemmin SatO, kutsuu yhteen Helsinkiin muuttaneiden satakuntalaisten, tai satakuntalaismielisten opiskelijat. Vuonna 1653 perustettu SatO on yksi yliopiston vanhimmista osakunnista, ja sen toiminnan keskus on upea Satakuntatalo aivan Helsingin ytimessä. Tämä ikoninen talo toimii paitsi tapahtuma- ja juhlatilana, myös opiskelijoiden kodikkaana kokoontumispaikkana. Tule mukaan ja koe Helsingissä opiskelun parhaat puolet!\t \t \t \t",
+    "en": "Satakuntalainen Osakunta, or SatO, brings together students from Satakunta who have moved to Helsinki. Founded in 1653, SatO is one of the oldest nations of the university, and its centre of activity is the magnificent Satakuntatalo in the heart of Helsinki. This iconic house serves not only as an event and party venue, but also as a cosy meeting place for students. Come and experience the best of studying in Helsinki! ",
+    "sv": "Satakuntalainen Osakunta, eller SatO, samlar studenter från Satakunta som har flyttat till Helsingfors. SatO grundades 1653 och är en av universitetets äldsta institutioner, och dess centrum är den magnifika Satakuntatalo i hjärtat av Helsingfors. Denna ikoniska byggnad fungerar inte bara som en evenemangs- och festlokal utan också som en mysig mötesplats för studenter. Kom och upplev det bästa med att studera i Helsingfors!\t \t \t \t"
+  },
+  "nationInfo:whatIsSatoTitle": {
+    "fi": "Mikä on Satakuntalainen Osakunta?\t \t",
+    "en": "What is Satakuntalainen Osakunta?\t \t",
+    "sv": "Vad är Satakuntalainen Osakunta?\t \t"
+  },
+  "nationInfo:whatWeDoDescription": {
+    "fi": "Satakuntalaisen Osakunnan jäsenenä pääset osaksi rikasta opiskelijakulttuuria, joka tarjoaa kaikkea akateemisista pöytäjuhlista urheilu- ja kulttuuritapahtumiin. Satakuntatalon opiskelija-asunnot mahdollistavat asumisen lähellä kaikkea, mitä Helsingin keskusta tarjoaa. SatO on täydellinen paikka verkostoitumiseen, uusiin opintoalat läpäiseviin ystävyyssuhteisiin.                  \t \t \t \t",
+    "en": "As a member of Satakuntalainen Osakunta, you are part of a vibrant student culture that offers everything from academic dinner parties to sports and cultural events. The student apartments in Satakuntatalo allow you to live right in the heart of Helsinki, close to everything the city has to offer. SatO is the perfect place for networking, building cross-disciplinary friendships.\t \t \t \t",
+    "sv": "Som medlem i Satakuntalainen Osakunta blir du del av en rik studentkultur som erbjuder allt från akademiska middagar till sport- och kulturevenemang. Studentlägenheterna i Satakuntatalo gör det möjligt att bo mitt i Helsingfors, nära allt vad staden har att erbjuda. SatO är den perfekta platsen för nätverkande, att knyta vänskapsband över ämnesgränser.\t \t \t \t"
+  },
+  "nationInfo:whatWeDoTitle": {
+    "fi": "Mitä osakunnalla tehdään?\t \t",
+    "en": "What do you do in a student nation?\t \t",
+    "sv": "Vad görs på nationen?\t \t"
+  },
   "nav:archive": { "fi": "Arkisto", "en": "Archive", "sv": "Arkiv" },
   "nav:calendar": { "fi": "Kalenteri", "en": "Calendar", "sv": "Kalender" },
   "nav:contacts": {
@@ -157,7 +197,7 @@
   "nav:nationInfo": {
     "fi": "Tietoa osakunnasta",
     "en": "Nation Info",
-    "sv": "Samma på svenska"
+    "sv": "Information om Nationen\t"
   },
   "nav:news": { "fi": "Uutiset", "en": "News", "sv": "Nyheter" },
   "nav:officialDocuments": {

pages/index.tsx

@@ -43,7 +43,7 @@ export default function Home({ navBar }: HomePageProps) {
   return (
     <>
       <Head>
-        <title>{t("general:nation")}</title>
+        <title>Satakuntalainen Osakunta</title>
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>

pages/nation-info.tsx

@@ -1,4 +1,5 @@
 import Navbar, { NavbarProps } from "@/components/Navbar";
+import useTranslate from "@/hooks/useTranslate";
 import createClient from "@/lib/cmsClient";
 import styles from "@/styles/nation-info.module.css";
 import { readItems } from "@directus/sdk";
@@ -7,6 +8,7 @@ import { GetStaticProps } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import arrowWhite from "../public/arrow_forward_white.svg";
+import Placeholder from "../public/Placeholder_1.png";
 
 export const getStaticProps: GetStaticProps<NationInfoPageProps> = async () => {
   const client = createClient();
@@ -25,6 +27,8 @@ type NationInfoPageProps = {
 };
 
 export default function NationInfo({ navBar }: NationInfoPageProps) {
+  const t = useTranslate();
+
   return (
     <>
       <Head>
@@ -36,58 +40,53 @@ export default function NationInfo({ navBar }: NationInfoPageProps) {
       {/* Image Header */}
       <header className="header">
         <div className="headerContainer">
-          <h1>Tietoa Osakunnosta</h1>
-          <p className="headerText">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem odit
-            distinctio, ullam doloremque provident voluptas illo quaerat ex
-            saepe voluptate reiciendis rerum fuga obcaecati esse sit cum maxime,
-            dolorem facilis?
-          </p>
+          <h1>{t("nationInfo:headerTitle")}</h1>
+          <p className="headerText">{t("nationInfo:headerDescription")}</p>
         </div>
       </header>
       <main className="main">
         <section className={styles.infoSection}>
-          <aside className={styles.infoContainer}>
-            <h2 className={styles.h2}>Mikä on Satakuntalainen osakunta?</h2>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-              Veritatis possimus tempore deleniti est quam? Reiciendis,
-              pariatur. Cupiditate, dolore. Quidem, repellendus nostrum! Officia
-              nulla et vitae nesciunt id quod autem hic.
-            </p>
-            <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi
-              velit ea perferendis ex labore odit alias debitis minima, delectus
-              quas est. Ad possimus neque rem veniam aliquid quasi eligendi
-              debitis!
-            </p>
-            <br />
-            <h2 className={styles.h2}>Mitä osakunnalla tehdään?</h2>
-            <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
-              eveniet tempore rem consequuntur, ea eos fugit architecto
-              reprehenderit aliquam enim porro, nihil soluta cum. Quibusdam
-              aperiam labore earum sint ducimus! Lorem ipsum dolor sit amet,
-              consectetur adipisicing elit. Quas ducimus id quod eaque, voluptas
-              consectetur ab ex nemo esse repellendus nulla, vel delectus dolore
-              similique qui in voluptatum corrupti illo?
-            </p>
-            <br />
-            <Button variant="contained" className="button darkBlue">
-              Tapahtumakalenteri
-              <Image src={arrowWhite} alt="arrow forward" />
-            </Button>
-          </aside>
-          <aside className={styles.imageContainer}>
-            <Image
-              src="https://scontent-hel3-1.xx.fbcdn.net/v/t1.6435-9/107354119_3037696582946348_7547856174935966713_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=13d280&_nc_ohc=Q6CiSe2OORwQ7kNvgH1ZGW9&_nc_ht=scontent-hel3-1.xx&oh=00_AYDFDI4vGpKGjt1izA_zDjyngQIBTXqGVnwTp8ICEtuqLA&oe=66DAF42B"
-              alt="some placeholder image"
-              width={1}
-              height={1}
-              className={styles.sectionImage}
-            />
-          </aside>
+          <div className={styles.subSection}>
+            <span className={styles.infoContainer}>
+              <h2 className={styles.h2}>{t("nationInfo:whatIsSatoTitle")}</h2>
+              <p>{t("nationInfo:whatIsSatoDescription")}</p>
+
+              <br />
+              <h2 className={styles.h2}>{t("nationInfo:whatWeDoTitle")}</h2>
+              <p>{t("nationInfo:whatWeDoDescription")}</p>
+              <br />
+              <Button variant="contained" className="button darkBlue">
+                Tapahtumakalenteri
+                <Image src={arrowWhite} alt="arrow forward" />
+              </Button>
+            </span>
+            <div className={styles.imageContainer}>
+              <Image
+                src={Placeholder}
+                alt="placeholder"
+                width={100}
+                height={100}
+                className={styles.sectionImage}
+              />
+            </div>
+          </div>
+          <div className={styles.subSection}>
+            <div className={styles.imageContainer}>
+              <Image
+                src={Placeholder}
+                alt="placeholder"
+                width={100}
+                height={100}
+                className={styles.sectionImage}
+              />
+            </div>
+            <span className={styles.infoContainer}>
+              <h2 className={styles.h2}>{t("nationInfo:howToJoinTitle")}</h2>
+              <p>{t("nationInfo:howToJoinDescription")}</p>
+            </span>
+          </div>
         </section>
+
         <footer className="footer" />
       </main>
     </>

styles/Home.module.css

@@ -146,6 +146,7 @@
 .calendarLegend {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 2rem;
@@ -263,7 +264,17 @@
   .h2 {
     font-size: 2.5rem;
   }
+
+  .cards,
+  .news,
+  .sectionContainer,
+  .carouselContainer,
+  .contactSectionContainer {
+    width: 90%;
+  }
+
   .cards {
+    flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     padding: 0.5rem;
@@ -275,8 +286,21 @@
     padding: 0.5rem;
   }
 
-  .newsCard {
-    min-width: 15rem;
+  /* Calendar */
+  .calendarFooter {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .calendarLegend {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 1rem;
+    font-size: 0.8rem;
   }
 
   .contactInfo {

styles/globals.css

@@ -94,7 +94,7 @@ h1 {
 }
 
 .headerText {
-  width: 70%;
+  width: 60%;
 }
 
 .headerContainer {
@@ -307,7 +307,19 @@ h1 {
   h1 {
     font-size: 2.5rem;
   }
+
+  .headerContainer {
+    width: 90%;
+  }
+
+  .headerText {
+    width: 80%;
+  }
   .embla {
     --slide-size: 65%;
   }
+
+  .fc-toolbar-chunk {
+    display: flex;
+  }
 }

styles/nation-info.module.css

@@ -2,14 +2,22 @@
   margin-top: 5rem;
   margin-bottom: 5rem;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
   align-items: center;
   width: 70%;
 }
 
+.subSection {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5rem;
+}
+
 .infoContainer {
-  width: 48%;
+  width: 45%;
 }
 
 .infoBtn {
@@ -20,7 +28,7 @@
 }
 
 .imageContainer {
-  width: 48%;
+  width: 45%;
 }
 
 .sectionImage {
@@ -60,4 +68,7 @@
 }
 
 @media (max-width: 431px) {
+  .infoSection {
+    width: 90%;
+  }
 }