Skeleton of the new style

2022-06-07 00:24:13 +03:00
parent 696bc00072
commit 94407d1b68
10 changed files with 146 additions and 344 deletions
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -0,0 +1,22 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link
+            href='https://fonts.googleapis.com/css?family=Crimson+Text'
+            rel='stylesheet'
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
--- a/pages/api/hello.ts
+++ b/pages/api/hello.ts
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
--- a/pages/components/Footer.tsx
+++ b/pages/components/Footer.tsx
@@ -4,12 +4,7 @@ import styles from '../../styles/Footer.module.scss';

 export const Footer = () => {
  return (
-    <footer>
-      <div className={styles.mobileMiddle}>
-        <Link href='/#nav-bar'>
-          <img src='small-logo.png' alt='small logo' />
-        </Link>
-      </div>
+    <footer className={styles.footer}>
      <div className={styles.container}>
        <div className={styles.left}>
          Livonsaari & Palva & Velkuanmaa
@@ -19,25 +14,27 @@ export const Footer = () => {
        </div>
        <div className={styles.middle}>
          <Link href='/#nav-bar'>
-            <img src='small-logo.png' alt='small logo' />
+            <img
+              className={styles.logo}
+              src='small-logo.png'
+              alt='small logo'
+            />
          </Link>
-        </div>
-        <div className={styles.right}>
-          Katariina Vuorinen <br />
-          <a className='generic-link' href='mailto:runosaari@gmail.com'>
-            runosaari@gmail.com
-          </a>
-        </div>
-      </div>
          <div>
            <a
-          className='generic-link'
+              className={styles.sourceLink}
              href='https://github.com/codevictory/runosaari.net'
            >
              lähdekoodi
            </a>
            by codevictory
          </div>
+        </div>
+        <div className={styles.right}>
+          Katariina Vuorinen <br />
+          <a href='mailto:runosaari@gmail.com'>runosaari@gmail.com</a>
+        </div>
+      </div>
    </footer>
  );
 };
--- a/pages/components/Header.tsx
+++ b/pages/components/Header.tsx
@@ -4,25 +4,26 @@ import styles from '../../styles/Header.module.scss';

 export const Header = () => {
  return (
-    <header>
-      <nav className={styles.mainNavBar}>
-        <Link href='/'>Etusivu</Link>
-        <Link href='/program'>Ohjelma</Link>
-        <Link href='/performers'>Esiintyjät</Link>
-        <Link href='/info'>Info</Link>
-        <Link href='/safety'>Turvallisuus</Link>
-        <Link href='/archive'>Arkisto</Link>
-      </nav>
-      <h1 className={styles.mobileMainTitle}>
-        <Link href='/'>Runosaari 2022</Link>
-      </h1>
-      <nav className={styles.mobileMainNavBar} id='nav-bar'>
-        <Link href='/#logo-start'>Etusivu</Link>
-        <Link href='/program#program-start'>Ohjelma</Link>
-        <Link href='/performers#performers-start'>Esiintyjät</Link>
-        <Link href='/info#contact-start'>Info</Link>
-        <Link href='/safety#safety-start'>Turvallisuus</Link>
-        <Link href='/archive#archive-start'>Arkisto</Link>
+    <header className={styles.header}>
+      <nav className={styles.navBar}>
+        <Link href='/'>
+          <a className={styles.navBarLink}>Etusivu</a>
+        </Link>
+        <Link href='/program'>
+          <a className={styles.navBarLink}>Ohjelma</a>
+        </Link>
+        <Link href='/performers'>
+          <a className={styles.navBarLink}>Esiintyjät</a>
+        </Link>
+        <Link href='/info'>
+          <a className={styles.navBarLink}>Info</a>
+        </Link>
+        <Link href='/safety'>
+          <a className={styles.navBarLink}>Turvallisuus</a>
+        </Link>
+        <Link href='/archive'>
+          <a className={styles.navBarLink}>Arkisto</a>
+        </Link>
      </nav>
    </header>
  );
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,58 +7,18 @@ const Home: NextPage = () => {
  return (
    <>
      <Header />
-      <main>
-        <section className={styles.logo} id='logo-start'>
-          <img src='runosaari-logo.jpg' alt='Runosaari logo' />
-          <div id='logo-credits'>
+      <section className={styles.logoContainer}>
+        <div className={styles.logo} id='logo-start'>
+          <img
+            className={styles.logoImage}
+            src='runosaari-logo.jpg'
+            alt='Runosaari logo'
+          />
+          <div className={styles.logoCredits}>
            <div>@Sanna Hukkanen</div>
          </div>
+        </div>
      </section>
-
-        <section className={styles.main}>
-          <h1 id='main-title'>Runosaari 2022</h1>
-          <h2>
-            <span className={styles.timeAndPlace}>
-              ~ 20.-23.7. Livonsaari & Velkuanmaa ~
-            </span>
-            <br />
-            Eksymisretki omaan luontoosi, metsänpeiton suojaan!
-          </h2>
-          <p>
-            Lumi ja jää vähenee, vedenpinta nousee ja pandemian aallot viistävät
-            meidänkin rantojamme. Peurojen kurittaman monimuotoisuuden keskelle
-            nousee RUNOSAARI täynnä ihmetystä ja kysymyksiä: onko
-            tulevaisuudella tulevaisuutta? Kuinka luontoon lomittuminen voi olla
-            mahdollista? Jos eksymme metsänpeittoon, voimmeko löytää jonnekin?
-          </p>
-          <p>
-            Uusi poikkitaiteellinen runofestivaali järjestetään toista kertaa
-            Livonsaaressa, Palvassa ja Velkuanmaassa 20.-23.7.2022! Ohjelmassa
-            runous yhdistyy elävään musiikkiin ja erilaisiin taiteellisiin
-            työpajoihin. Livonsaaren perinteinen Seurantalo pikniknurmikkoineen
-            ja lähimetsineen tarjoaa puitteet lavaesiintyjille, työpajoille ja
-            elävälle musiikille. Cafe Laiturissa runous kohtaa yleisön meren
-            äärellä. Velkuanmaan pastoraali-idylli kahden lossin takana
-            viettelee saaristoluonnon syvyyksiin, ja runoiltapäivässä saamme
-            nauttia soitosta ja runoudesta Saaristohotelli Vaihelan leppoisalla
-            terassilla.
-          </p>
-          <p>
-            Runosaari-festivaaliin osallistuu toistakymmentä maamme eturivin
-            runoilijaa, muusikoita, työpajan vetäjiä ja muita esiintyjiä ke
-            20.7.– la 23.7.2022.
-          </p>
-          <p>
-            Tapahtuman järjestää Runosaari-työryhmä. Yhteistyössä: Runoviikko
-            ry, Kirjan talo – Bokens hus ry, Livonsaaren kyläyhdistys ry,
-            Velkuan saaristolaisyhdistys ry, Aviador Kustannus, Enostone
-            Kustannus, Cafe Laituri ja Saaristohotelli Vaihela.
-          </p>
-          <p>
-            <i>[Ohjelmaa päivitetään]</i>
-          </p>
-        </section>
-      </main>
      <Footer />
    </>
  );
--- a/public/runosaari-logo.jpg
+++ b/public/runosaari-logo.jpg
--- a/styles/Footer.module.scss
+++ b/styles/Footer.module.scss
@@ -1,45 +1,47 @@
-footer {
+.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
+}

 .container {
  display: flex;
  justify-content: space-between;
  width: 50%;
  align-items: start;
+}

-    .middle img {
+.middle {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.logo {
  max-width: 55px;
-      margin-top: 10px;
+  margin-top: 5px;
+  margin-bottom: 1rem;
 }

 .right {
  text-align: right;
 }
-  }

-  .mobileMiddle {
-    visibility: hidden;
-
-    img {
-      max-width: 55px;
-      margin-top: 10px;
-    }
-  }
+.sourceLink {
+  margin-right: 0.5rem;
 }

@media screen and (max-width: 600px) {
-  footer {
  .container {
    width: 95% !important;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
+  }

-      div {
+  .footer {
    text-align: center !important;
  }

@@ -48,9 +50,3 @@ footer {
    max-height: 15px;
  }
 }
-
-    .mobile-middle {
-      visibility: visible;
-    }
-  }
-}
--- a/styles/Header.module.scss
+++ b/styles/Header.module.scss
@@ -1,25 +1,27 @@
-header {
+.header {
  display: flex;
  flex-direction: column;
  align-items: center;
+}

-  nav {
+.navBar {
  display: flex;
  justify-content: center;
+}

-    a {
-      padding: 15px;
+.navBarLink {
+  padding-left: 15px;
+  padding-right: 15px;
  color: #2f273e;
  text-decoration: none;
 }

-    a:hover {
-      background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #d5caf2);
-      text-decoration: underline;
+.navBarLink:hover {
+  color: #69568b;
 }

@media screen and (max-width: 600px) {
-      a {
+  .navBarLink {
    width: 100%;
    padding: 0px;
    text-align: center;
@@ -27,45 +29,8 @@ header {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }
-    }

-    &.mobileMainNavBar {
-      visibility: hidden;
-      height: 0px;
-    }
-
-    @media screen and (max-width: 600px) {
-      &.mobileMainNavBar {
-        height: auto;
-        display: flex;
-        visibility: visible;
+  .navBar {
    flex-direction: column;
-        align-items: center;
-        background-color: #d5caf2;
-        width: 80%;
-        margin-bottom: 30px;
-      }
-
-      &.mainNavBar {
-        visibility: hidden;
-        height: 0px;
-      }
-    }
-  }
-
-  .mobileMainTitle {
-    visibility: hidden;
-    height: 0px;
-    margin: 0px;
-  }
-
-  @media screen and (max-width: 600px) {
-    .mobileMainTitle {
-      visibility: visible !important;
-      height: 100% !important;
-      margin-top: 30px !important;
-      margin-bottom: 30px !important;
-      text-align: center;
-    }
  }
 }
--- a/styles/Home.module.scss
+++ b/styles/Home.module.scss
@@ -1,61 +1,25 @@
-section.logo {
-  width: 80%;
-  max-width: 1000px;
-  background-color: #d5caf2;
-  border-radius: 3px 3px 0px 0px;
-  padding-top: 3px;
-
-  img {
-    width: 100%;
-  }
-
-  #logo-credits {
-    font-size: 90%;
-    display: flex;
-    justify-content: right;
-    background-color: #d5caf2;
-    max-width: 990px;
-    padding-right: 10px;
-  }
-}
-
-section.text {
+.logoContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
+}
+
+.logo {
  width: 80%;
  max-width: 1000px;
-  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
-  text-align: center;
-
-  p {
-    padding: 0px 20px;
-    max-width: 56%;
+  border-radius: 3px 3px 0px 0px;
+  padding-top: 3px;
 }

-  @media screen and (max-width: 600px) {
-    p {
-      max-width: 90% !important;
-    }
-  }
+.logoImage {
+  width: 100%;
 }

-@media screen and (max-width: 600px) {
-  section.text {
-    width: 90% !important;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  #main-title {
-    visibility: hidden;
-    height: 0px;
-    margin: 0px;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .timeAndPlace {
-    font-size: 1.1rem;
-  }
+.logoCredits {
+  font-size: 90%;
+  display: flex;
+  justify-content: right;
+  max-width: 990px;
+  padding-right: 10px;
+  margin-top: -10px;
 }
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -9,101 +9,11 @@ body {
  margin: 0px;
 }

-@media screen and (max-width: 600px) {
-  body {
-    background-color: #d5caf2;
-    overflow-x: hidden;
-  }
-}
-
-main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  min-height: 500px;
-}
-
-a {
-  color: #2f273e;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-ul {
-  text-align: left;
-  max-width: 44%;
-}
-
-@media screen and (max-width: 600px) {
-  ul {
-    max-width: 90% !important;
-  }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  text-shadow: 3px 3px 3px #ababab;
-}
-
-h1 {
-  font-size: 3rem;
-}
-
 p {
  text-align: justify;
 }

-section.main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 80%;
-  max-width: 1000px;
-  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
-  text-align: center;
-  border-radius: 3px 3px 0px 0px;
-
-  p {
-    padding: 0px 20px;
-    max-width: 56%;
-    width: 100%;
-  }
-
-  @media screen and (max-width: 600px) {
-    p {
-      max-width: none;
-    }
-  }
-
-  .link-back {
-    font-weight: bolder;
-    margin-top: 20px;
-    margin-bottom: 20px;
+a {
+  color: #8962ec;
  text-decoration: underline;
 }
-}
-
-section.logo ~ section.main {
-  border-radius: 0px;
-}
-
-.generic-link {
-  color: #2222ed;
-  text-decoration: underline;
-}
-
-hr {
-  width: inherit;
-}
-
-.foot-note {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}