tietokonepaja/runosaari
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Skeleton of the new style

Browse Source
This commit is contained in:
veikko
2022-06-07 00:24:13 +03:00
parent 696bc00072
commit 94407d1b68
10 changed files with 146 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pages/_document.tsx Normal file
View File

@@ -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;

13
pages/api/hello.ts
View File

@@ -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' })
}

29
pages/components/Footer.tsx
View File

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

39
pages/components/Header.tsx
View File

@@ -4,25 +4,26 @@ import styles from '../../styles/Header.module.scss';
export const Header = () => { export const Header = () => {
return ( return (
<header> <header className={styles.header}>
<nav className={styles.mainNavBar}> <nav className={styles.navBar}>
<Link href='/'>Etusivu</Link> <Link href='/'>
<Link href='/program'>Ohjelma</Link> <a className={styles.navBarLink}>Etusivu</a>
<Link href='/performers'>Esiintyjät</Link> </Link>
<Link href='/info'>Info</Link> <Link href='/program'>
<Link href='/safety'>Turvallisuus</Link> <a className={styles.navBarLink}>Ohjelma</a>
<Link href='/archive'>Arkisto</Link> </Link>
</nav> <Link href='/performers'>
<h1 className={styles.mobileMainTitle}> <a className={styles.navBarLink}>Esiintyjät</a>
<Link href='/'>Runosaari 2022</Link> </Link>
</h1> <Link href='/info'>
<nav className={styles.mobileMainNavBar} id='nav-bar'> <a className={styles.navBarLink}>Info</a>
<Link href='/#logo-start'>Etusivu</Link> </Link>
<Link href='/program#program-start'>Ohjelma</Link> <Link href='/safety'>
<Link href='/performers#performers-start'>Esiintyjät</Link> <a className={styles.navBarLink}>Turvallisuus</a>
<Link href='/info#contact-start'>Info</Link> </Link>
<Link href='/safety#safety-start'>Turvallisuus</Link> <Link href='/archive'>
<Link href='/archive#archive-start'>Arkisto</Link> <a className={styles.navBarLink}>Arkisto</a>
</Link>
</nav> </nav>
</header> </header>
); );

58
pages/index.tsx
View File

@@ -7,58 +7,18 @@ const Home: NextPage = () => {
return ( return (
<> <>
<Header /> <Header />
<main> <section className={styles.logoContainer}>
<section className={styles.logo} id='logo-start'> <div className={styles.logo} id='logo-start'>
<img src='runosaari-logo.jpg' alt='Runosaari logo' /> <img
<div id='logo-credits'> className={styles.logoImage}
src='runosaari-logo.jpg'
alt='Runosaari logo'
/>
<div className={styles.logoCredits}>
<div>@Sanna Hukkanen</div> <div>@Sanna Hukkanen</div>
</div> </div>
</div>
</section> </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 /> <Footer />
</> </>
); );

BIN
public/runosaari-logo.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 5.8 MiB

36
styles/Footer.module.scss
View File

@@ -1,45 +1,47 @@
footer { .footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
}
.container { .container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 50%; width: 50%;
align-items: start; align-items: start;
}
.middle img { .middle {
display: flex;
align-items: center;
flex-direction: column;
}
.logo {
max-width: 55px; max-width: 55px;
margin-top: 10px; margin-top: 5px;
margin-bottom: 1rem;
} }
.right { .right {
text-align: right; text-align: right;
} }
}
.mobileMiddle { .sourceLink {
visibility: hidden; margin-right: 0.5rem;
img {
max-width: 55px;
margin-top: 10px;
}
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
footer {
.container { .container {
width: 95% !important; width: 95% !important;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
}
div { .footer {
text-align: center !important; text-align: center !important;
} }
@@ -48,9 +50,3 @@ footer {
max-height: 15px; max-height: 15px;
} }
} }
.mobile-middle {
visibility: visible;
}
}
}

57
styles/Header.module.scss
View File

@@ -1,25 +1,27 @@
header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
}
nav { .navBar {
display: flex; display: flex;
justify-content: center; justify-content: center;
}
a { .navBarLink {
padding: 15px; padding-left: 15px;
padding-right: 15px;
color: #2f273e; color: #2f273e;
text-decoration: none; text-decoration: none;
} }
a:hover { .navBarLink:hover {
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #d5caf2); color: #69568b;
text-decoration: underline;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
a { .navBarLink {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
text-align: center; text-align: center;
@@ -27,45 +29,8 @@ header {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 4px; margin-bottom: 4px;
} }
}
&.mobileMainNavBar { .navBar {
visibility: hidden;
height: 0px;
}
@media screen and (max-width: 600px) {
&.mobileMainNavBar {
height: auto;
display: flex;
visibility: visible;
flex-direction: column; 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;
}
} }
} }

66
styles/Home.module.scss
View File

@@ -1,61 +1,25 @@
section.logo { .logoContainer {
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 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
}
.logo {
width: 80%; width: 80%;
max-width: 1000px; max-width: 1000px;
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2); border-radius: 3px 3px 0px 0px;
text-align: center; padding-top: 3px;
p {
padding: 0px 20px;
max-width: 56%;
} }
@media screen and (max-width: 600px) { .logoImage {
p { width: 100%;
max-width: 90% !important;
}
}
} }
@media screen and (max-width: 600px) { .logoCredits {
section.text { font-size: 90%;
width: 90% !important; display: flex;
} justify-content: right;
} max-width: 990px;
padding-right: 10px;
@media screen and (max-width: 600px) { margin-top: -10px;
#main-title {
visibility: hidden;
height: 0px;
margin: 0px;
}
}
@media screen and (max-width: 600px) {
.timeAndPlace {
font-size: 1.1rem;
}
} }

94
styles/globals.scss
View File

@@ -9,101 +9,11 @@ body {
margin: 0px; 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 { p {
text-align: justify; text-align: justify;
} }
section.main { a {
display: flex; color: #8962ec;
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;
text-decoration: underline; 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;
}