Adds skeleton/blocking for the official documents page

osakunta · Aug 8, 2024 · 7c96c63 · 7c96c63
1 parent 5a26515
commit 7c96c63
Show file tree

Hide file tree

Showing 4 changed files with 275 additions and 1 deletion.
diff --git a/pages/official-documents.tsx b/pages/official-documents.tsx
@@ -0,0 +1,146 @@
+import Navbar from "@/components/Navbar";
+import { fetchNavData } from "@/lib/fetchNavData";
+import { GetStaticProps } from "next";
+import Head from "next/head";
+import Image from "next/image";
+import styles from "@/styles/official-documents.module.css";
+import { Button } from "@mui/material";
+import arrowWhite from "../public/arrow_forward_white.svg";
+import Link from "next/link";
+
+export const getStaticProps: GetStaticProps<NavProps> = async () => {
+  const navData = await fetchNavData();
+  return {
+    props: {
+      navData,
+    },
+  };
+};
+
+export default function OfficialDocuments({ navData }: NavProps) {
+  return (
+    <>
+      <Head>
+        <title>Satakuntalainen Osakunta</title>
+        <link
+          rel="icon"
+          href="/new-sato-website/public/favicon.ico"
+          type="image/x-icon"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
+      <main className={styles.main}>
+        <Navbar navData={navData} />
+        <header className={styles.header}>
+          <div className={styles.headerContainer}>
+            <h1>Viralliset Documentit</h1>
+            <p className={styles.headerText}>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor
+              doloribus impedit sapiente ipsum rerum neque consequatur tempore,
+              sit repellat unde, enim veniam accusantium minima molestias?
+              Obcaecati quis doloribus quae nesciunt?
+            </p>
+          </div>
+        </header>
+        <section className={styles.documentSection}>
+          <dl className={styles.documentList}>
+            <dt className={styles.h3}>Rules</dt>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Rules 2011
+              </a>
+            </dd>
+            <dt className={styles.h3}>Old Rules</dt>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Rules 2007
+              </a>
+            </dd>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Rules 2004
+              </a>
+            </dd>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Rules at the time of <br /> the cooperative building
+              </a>
+            </dd>
+          </dl>
+          <dl className={styles.documentList}>
+            <dt className={styles.h3}>Regulations</dt>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Guidelines 2020
+              </a>
+            </dd>
+            <dt className={styles.h3}>Old Regulations</dt>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Guidelines 2019
+              </a>
+            </dd>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Guidelines 2017
+              </a>
+            </dd>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Guidelines 2016
+              </a>
+            </dd>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Guidelines 2011
+              </a>
+            </dd>
+          </dl>
+          <dl className={styles.documentList}>
+            <dt className={styles.h3}>Other Documents</dt>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Equality Plan
+              </a>
+            </dd>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                SatO Safe Space
+              </a>
+            </dd>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Environmental plan
+              </a>
+            </dd>
+            <dt className={styles.h3}>Dormitory</dt>
+            <dd>
+              <a href="" className={styles.documentLink}>
+                Dormitory Regulations
+              </a>
+            </dd>
+          </dl>
+        </section>
+        <section className={styles.externalRef}>
+          <div className={styles.proceedingsContainer}>
+            <h3 className={styles.h3}>Proceedings</h3>
+            <Button variant="contained" className={styles.proceedingsBtn}>
+              See proceedings <br /> (SatO login required)
+              <Image src={arrowWhite} alt="arrow forward"></Image>
+            </Button>
+          </div>
+          <p className={styles.archiveRedirect}>
+            Looking for the Satakunta series or Maila Talvio&apos;s collected
+            works? You can now find them on the
+            <Link href="archive" className={styles.documentLink}>
+              {" "}
+              Archive
+            </Link>{" "}
+            page!
+          </p>
+        </section>
+        <footer className={styles.footer}></footer>
+      </main>
+    </>
+  );
+}
diff --git a/styles/Navbar.module.css b/styles/Navbar.module.css
@@ -12,7 +12,7 @@
 .navbar {
   display: flex;
   flex-direction: row;
-  width: 80%;
+  width: 70%;
   justify-content: space-between;
   align-items: center;
   top: 0;

diff --git a/styles/globals.css b/styles/globals.css
@@ -24,6 +24,16 @@ body {
   max-width: 2150px;
 }
 
+h1 {
+  font-size: 3rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+dd {
+  margin-left: 0;
+}
+
 /* EMBLA CAROUSEL*/
 .embla {
   width: 100%;

diff --git a/styles/official-documents.module.css b/styles/official-documents.module.css
@@ -0,0 +1,118 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 0;
+  width: 100%;
+  background-color: var(--blue100);
+}
+
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+}
+
+.headerText {
+  width: 70%;
+}
+
+.documentSection {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  width: 70%;
+  margin-top: 5rem;
+  gap: 5rem;
+}
+
+.documentList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.documentLink {
+  text-decoration: none;
+  font-size: 1.2rem;
+  width: 5rem;
+  text-wrap: wrap;
+}
+
+.externalRef {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 60%;
+  gap: 17rem;
+  margin-bottom: 5rem;
+}
+
+.proceedingsContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 1.5rem;
+}
+
+.proceedingsBtn {
+  border-radius: 50px;
+  padding: 1rem 2rem 1rem 2rem;
+  background-color: var(--blue300);
+}
+
+.archiveRedirect {
+  width: 30%;
+}
+
+.footer {
+  width: 100%;
+  height: 20rem;
+  background-color: var(--blue300);
+}
+
+@media (max-width: 951px) {
+  .externalRef {
+    justify-content: center;
+    gap: 3rem;
+    width: 72%;
+  }
+
+  .proceedingsContainer {
+    margin-bottom: 2rem;
+  }
+  .archiveRedirect {
+    width: 50%;
+  }
+}
+
+@media (max-width: 431px) {
+  .headerText {
+    width: 80%;
+  }
+  .documentSection {
+    flex-direction: column;
+    gap: 0;
+  }
+  .archiveRedirect {
+    width: 80%;
+  }
+}