edb/studio-2025
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyling

Browse Source 
Co-authored-by: Petter Sæterøy <potetmos1@users.noreply.github.com>
This commit is contained in:
Leander Furumo
2025-07-02 23:36:30 +02:00
parent 9bfdfcbae6
commit ec5061168b
14 changed files with 169 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/studioBenker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 554 KiB

10
src/components/About.astro
View File

@ -1,15 +1,19 @@
--- ---
import { translations } from '../data/i18n.js'; import { translations } from '@data/i18n.js';
import { Image } from 'astro:assets';
import benker from '@assets/studioBenker.png';
const { lang = 'no' } = Astro.props; const { lang = 'no' } = Astro.props;
const t = translations[lang].about; const t = translations[lang].about;
--- ---
<main class="flex gap-8 flex-col"> <main class="flex gap-8 flex-col max-w-prose">
<h1 class="text-4xl font-bold">{t.title}</h1> <h1 class="text-4xl font-bold">{t.title}</h1>
<div class="flex gap-2 text-lg max-w-prose flex-col"> <div class="flex gap-2 text-lg flex-col">
<p>{t.p1}</p> <p>{t.p1}</p>
<p>{t.p2}</p> <p>{t.p2}</p>
<p>{t.p3}</p> <p>{t.p3}</p>
<p>{t.p4}</p> <p>{t.p4}</p>
<Image src={benker} alt="Studio Benker" class="place-self-center w-full" width={600} height={400} loading="eager" />
<p set:html={t.p5}></p>
</div> </div>
</main> </main>

10
src/components/FAQ.astro
View File

@ -1,14 +1,14 @@
--- ---
import { translations } from '../data/i18n.js'; import { translations } from '@data/i18n.js';
const { lang = 'no' } = Astro.props; const { lang = 'no' } = Astro.props;
const t = translations[lang].faq; const t = translations[lang].faq;
--- ---
<section class="flex flex-col gap-4"> <section class="flex flex-col gap-6 max-w-prose">
<h2 class="text-xl font-bold">{t.title}</h2> <h2 class="text-2xl font-bold">{t.title}</h2>
<ul class="flex flex-col gap-2"> <ul class="flex flex-col gap-4">
<li> <li>
<strong>{t.q1} </strong> <strong>{t.q1}</strong>
<p set:html={t.a1}></p> <p set:html={t.a1}></p>
</li> </li>
<li> <li>

32
src/components/Footer.astro
View File

@ -2,32 +2,20 @@
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import logo from '@assets/logo.png'; import logo from '@assets/logo.png';
import DNS from '@assets/DNS-logo-hvit.png'; import DNS from '@assets/DNS-logo-hvit.png';
import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa'; import { translations } from '@data/i18n.js';
import { translations } from '../data/i18n.js'; import Links from './Links.astro';
const { lang = 'no' } = Astro.props; const { lang = 'no' } = Astro.props;
const t = translations[lang].footer; const t = translations[lang].footer;
--- ---
<footer class="flex items-center justify-between bg-red-900 text-white py-16 px-8 mt-20">
<div class="flex gap-2 items-center justify-center"> <footer class="flex items-center lg:justify-between justify-center bg-accent text-white py-16 px-18 mt-20">
<Image src={logo} alt={t.org} class="hero-logo" width={48} height={48}/> <div class="gap-4 items-center justify-center hidden lg:flex">
<p>{t.org}</p> <Image src={logo} alt={t.org} class="hero-logo" width={64} height={64} loading="lazy" />
<p class="text-white text-2xl">{t.org}</p>
</div> </div>
<div class="flex gap-2 items-center justify-center"> <div class="flex gap-6 items-center justify-center flex-col text-center">
<Image src={DNS} alt={t.dnsAlt} class="hero-logo" width={169} height={169}/> <Image src={DNS} alt={t.dnsAlt} class="hero-logo" width={200} height={200} loading="lazy" />
<div class="flex flex-col items-center justify-center gap-2">
<address>{t.address}</address> <address>{t.address}</address>
<div> <Links lang={lang} class="text-3xl" />
<div class="flex gap-4">
<a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<FaFacebook class="text-white text-2xl hover:text-gray-300" />
</a>
<a href="https://www.instagram.com/studentfestivalenioslo/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
<FaInstagram class="text-white text-2xl hover:text-gray-300" />
</a>
<a href="https://www.tiktok.com/@studentersamfund" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
<FaTiktok class="text-white text-2xl hover:text-gray-300" />
</a>
</div>
</div>
</div> </div>
</footer> </footer>

8
src/components/Hero.astro
View File

@ -1,12 +1,12 @@
--- ---
import logo from '@assets/logo.png'; import logo from '@assets/logo.png';
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import { translations } from '../data/i18n.js'; import { translations } from '@data/i18n.js';
const { lang = 'no' } = Astro.props; const { lang = 'no' } = Astro.props;
const t = translations[lang].hero; const t = translations[lang].hero;
--- ---
<section class="flex flex-col items-center justify-center h-[75vh] gap-4"> <section class="flex flex-col items-center justify-center h-[50vh] gap-4">
<h1 class="text-4xl">{t.title}</h1> <h1 class="text-4xl font-extrabold">{t.title}</h1>
<Image src={logo} alt={t.alt} width={250} height={250}/> <Image src={logo} alt={t.alt} width={250} height={250} loading="eager" />
</section> </section>

20
src/components/Links.astro
View File

@ -1,11 +1,17 @@
--- ---
import { translations } from '../data/i18n.js'; import { FaFacebook, FaInstagram, FaTiktok } from 'react-icons/fa';
const { lang = 'no' } = Astro.props; const { href, class: className, ...props } = Astro.props;
const links = translations[lang].links;
--- ---
<div class="flex gap-4 justify-center items-center"> <div class:list={["flex gap-6 justify-center items-center", className]} {...props}>
{links.map(link => ( <a href="https://www.facebook.com/events/692300293586085" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<a href={link.href} target="_blank" rel="noopener noreferrer">{link.text}</a> <FaFacebook className=`${className} hover:text-slottsblaa` />
))} </a>
<a href="https://www.instagram.com/studentfestivalenioslo/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="hover:text-griserosa">
<FaInstagram className=`${className} hover:text-slottsblaa` />
</a>
<a href="https://www.tiktok.com/@studentersamfund" target="_blank" rel="noopener noreferrer" aria-label="TikTok" class="hover:text-dyp-tegl">
<FaTiktok className=`${className} hover:text-slottsblaa` />
</a>
</div> </div>

39
src/components/Nav.astro
View File

@ -1,5 +1,7 @@
--- ---
import { translations } from '../data/i18n.js'; import NavLink from '@components/NavLink.astro';
import { translations } from '@data/i18n.js';
const { lang = 'no' } = Astro.props; const { lang = 'no' } = Astro.props;
const t = translations[lang].nav; const t = translations[lang].nav;
const { pathname } = Astro.url; const { pathname } = Astro.url;
@ -18,32 +20,15 @@ function getLangSwitchPath(path, lang) {
const langSwitchPath = getLangSwitchPath(pathname, lang); const langSwitchPath = getLangSwitchPath(pathname, lang);
--- ---
<nav class="flex justify-between items-center px-10 py-4 bg-accent mb-4"> <nav class="flex justify-center lg:justify-between items-center px-10 py-6 bg-accent mb-4 whitespace-nowrap">
<h1 class="text-xl font-bold text-white"> <h1 class="text-xl font-bold text-white hover:no-underline hidden lg:block">
<a href={lang === 'en' ? '/en/' : '/'}>{t.title}</a> <a href={lang === 'en' ? '/en/' : '/'} class="hover:no-underline">{t.title}</a>
</h1> </h1>
<ul class="flex space-x-4 text-white"> <ul class="flex space-x-6 text-betongraa">
<li><a href={lang === 'en' ? '/en/' : '/'}>{t.home}</a></li> <NavLink href={lang === 'en' ? '/en/' : '/'}>{t.home}</NavLink>
<li><a href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</a></li> <NavLink href={lang === 'en' ? '/en/program' : '/program'}>{t.program}</NavLink>
<li><a href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</a></li> <NavLink href="https://forms.gle/PvEh37nvRyicLFXn6" target="_blank">{t.volunteer}</NavLink>
<li><a href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</a></li> <NavLink href={lang === 'en' ? '/en/about' : '/about'}>{t.about}</NavLink>
<li> <NavLink href={langSwitchPath} noActive class="bg-gyllen-beige text-svart px-3 py-1 rounded hover:bg-slottsblaa font-bold">{t.langSwitch}</NavLink>
<a href={langSwitchPath} class="ml-4 bg-blue-500 text-white px-3 py-1 rounded">
{t.langSwitch}
</a>
</li>
</ul> </ul>
</nav> </nav>
<style>
nav a {
padding: 0.5em 0.5em;
color: var(--text);
border-bottom: 4px solid transparent;
text-decoration: none;
}
nav a.active {
text-decoration: none;
border-bottom-color: var(--accent);
}
</style>

18
src/components/NavLink.astro Normal file
View File

@ -0,0 +1,18 @@
---
const { href, class: className, noActive = false, ...props } = Astro.props;
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
const subpath = pathname.match(/[^\/]+/g);
const normalize = (str: string) => str.replace(/^\/+/, "");
const isActive = !noActive && (
normalize(href) === normalize(pathname) ||
normalize(href) === `en/${normalize(pathname)}` ||
normalize(href) === (subpath?.[0] || "") ||
(normalize(href) === "en" && normalize(pathname) === "en") ||
(normalize(href) === "" && normalize(pathname) === "")
);
---
<a href={href} class:list={["hover:text-white border-b-4 border-b-transparent hover:border-b-slottsblaa no-underline p-2 flex items-center text-center", className, { active: isActive }]} {...props}>
<slot />
</a>

60
src/components/Program.astro
View File

@ -1,30 +1,40 @@
--- ---
import { translations } from '../data/i18n.js'; import { translations } from '@data/i18n.js';
const { lang = 'no', data } = Astro.props; const { lang = 'no', data } = Astro.props;
const t = translations[lang].program; const t = translations[lang].program;
const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
const convertDate = (date) => {
let d = date;
if (!(d instanceof Date)) {
d = new Date(d);
}
return d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
weekday: 'long', weekday: 'long',
year: 'numeric',
month: 'long', month: 'long',
day: 'numeric' day: 'numeric'
}); });
};
--- ---
{data ? ( {data ? (
<div class="flex gap-4 flex-col"> <div class="flex items-center justify-between flex-col gap-8">
<div class="flex items-center justify-between"> <h1 class="font-bold text-3xl text-center w-full">{t.today}</h1>
<h2 class="font-bold text-xl">{t.today}</h2> <p class="font-bold text-2xl text-center w-full">{convertDate(new Date())}</p>
<p>{currentDate}</p>
</div> </div>
{Object.entries(data).map(([dayName, items]) => ( <div class="flex gap-12 flex-wrap justify-center items-stretch">
<div class="day"> {Object.entries(data).map(([date, items]) => (
<h2>{dayName}</h2> <div id="program-list" class="w-125 p-6 border-1 border-white rounded-2xl even:bg-slottsblaa even:text-white bg-gyllen-beige flex flex-col gap-2">
<h2 class="font-bold text-xl">{convertDate(date)}</h2>
<ul> <ul>
{items.map((item) => { {items.map((item) => {
const price = item.price || item.cost; const price = item.price || item.cost;
return ( return (
<li class="item"> <li class="flex justify-between">
{item.time} - {item.event} - {item.url ? ( <p>
<a href={item.url} target="_blank" rel="noopener noreferrer">{price}</a> {item.time} - {item.event}
</p>
{item.url ? (
<a href={item.url} target="_blank" rel="noopener noreferrer" class="text-right">{price}</a>
) : ( ) : (
price price
)} )}
@ -35,25 +45,15 @@ const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-
</div> </div>
))} ))}
</div> </div>
<div class="flex justify-center">
<p class="font-bold text-xl text-center w-full">
<a href="https://neuf.no/arrangementer" class="text-gyllen-oransje hover:text-slottsblaa hover:underline" target="_blank" rel="noopener noreferrer">{t.program_more}</a>
</p>
</div>
) : ( ) : (
<div>No program data available.</div> <div>No program data available.</div>
)} )}
<style> <style>
.day {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.day:nth-child(odd) {
background-color: #F8BC90;
}
.day:nth-child(even) {
background-color: #0A0F6D;
color: #fff;
}
.item {
margin: 5px 0;
}
</style> </style>

17
src/components/Vors.astro
View File

@ -1,17 +1,20 @@
--- ---
const videoUrl = "https://www.youtube.com/watch?v=t7T4RPBpTVY"; import { translations } from '@data/i18n.js';
import { translations } from '../data/i18n.js';
const { lang = 'no' } = Astro.props; const { lang = 'no' } = Astro.props;
const t = translations[lang].vors; const t = translations[lang].vors;
const videoUrl = "https://www.youtube.com/watch?v=t7T4RPBpTVY";
--- ---
<div style="width: 560px; height: 315px;"> <div class="self-center flex flex-col items-center p-4 gap-4">
<div class="mt-4 text-xl mb-2"> <p>
{t.text} {t.text}
</div> </p>
<iframe <iframe
width="560" loading="lazy"
height="315" class="max-w-full"
width="640"
height="480"
src={videoUrl.replace("watch?v=", "embed/")} src={videoUrl.replace("watch?v=", "embed/")}
title="YouTube video player" title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

4
src/layouts/Layout.astro
View File

@ -14,9 +14,9 @@ const { lang = 'no' } = Astro.props;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>STUDiO 2025 - Studentfestivalen i Oslo</title> <title>STUDiO 2025 - Studentfestivalen i Oslo</title>
</head> </head>
<body class="grid grid-rows-[auto_1fr_auto] jusify-center"> <body class="grid grid-rows-[auto_1fr_auto] jusify-center gap-12">
<Nav lang={lang} /> <Nav lang={lang} />
<div class="max-w-7xl grid place-self-center gap-8"> <div id="content" class="max-w-7xl grid place-self-center gap-8 px-4">
<slot /> <slot />
</div> </div>
<Footer lang={lang} /> <Footer lang={lang} />

2
src/pages/en/index.astro
View File

@ -9,7 +9,7 @@ import Vors from '@components/Vors.astro';
<Layout lang="en"> <Layout lang="en">
<Hero lang="en" /> <Hero lang="en" />
<Links lang="en" /> <Links lang="en" class="text-5xl text-black" />
<Program lang="en" /> <Program lang="en" />
<FAQ lang="en" /> <FAQ lang="en" />
<Vors lang="en" /> <Vors lang="en" />

2
src/pages/index.astro
View File

@ -9,7 +9,7 @@ import Vors from '@components/Vors.astro';
<Layout lang="no"> <Layout lang="no">
<Hero lang="no" /> <Hero lang="no" />
<Links lang="no" /> <Links lang="no" class="text-5xl text-black" />
<Program lang="no" /> <Program lang="no" />
<FAQ lang="no" /> <FAQ lang="no" />
<Vors lang="no" /> <Vors lang="no" />

73
src/styles/global.css
View File

@ -1,10 +1,19 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@import url("https://fonts.google.com/specimen/Montserrat?query=montserrat");
@import "tailwindcss"; @import "tailwindcss";
:root { :root {
--font-avenir: "Avenir Next", sans-serif; --font-avenir: "montserrat", sans-serif;
--background: #E5E2D7; --accent: #c13131;
--text: #333333;
--accent: #C13131; --dyp-tegl: #720328;
--griserosa: #cd96ab;
--betongraa: #e5e2d7;
--gyllen-oransje: #ff6915;
--gyllen-beige: #f8bc90;
--slottsblaa: #0a0f6d;
--svart: #161516;
} }
@theme { @theme {
@ -12,32 +21,52 @@
--color-background: var(--background); --color-background: var(--background);
--color-text: var(--text); --color-text: var(--text);
--color-accent: var(--accent); --color-accent: var(--accent);
--color-dyp-tegl: var(--dyp-tegl);
--color-griserosa: var(--griserosa);
--color-betongraa: var(--betongraa);
--color-gyllen-oransje: var(--gyllen-oransje);
--color-gyllen-beige: var(--gyllen-beige);
--color-slottsblaa: var(--slottsblaa);
--color-svart: var(--svart);
} }
html, html,
body { body {
margin: 0; @apply m-0;
width: 100%; @apply w-full;
height: 100%; @apply h-full;
} }
body { body {
@apply text-lg; @apply bg-betongraa;
font-family: var(--font-avenir); font-family: var(--font-avenir);
color: var(--color-text); @apply text-svart;
background-color: var(--color-background); @apply text-lg;
@apply leading-relaxed;
} }
a { a.active {
color: var(--color-accent);
text-decoration: none;
}
nav a {
display: inline-block;
text-decoration: none;
}
nav a.active {
font-weight: bolder; font-weight: bolder;
text-decoration: underline; }
}
#content a {
@apply text-gyllen-oransje;
}
#content a:hover {
@apply text-slottsblaa;
@apply underline;
}
#program-list:nth-child(odd) a {
@apply text-accent;
}
#program-list:nth-child(odd) a:hover {
@apply text-dyp-tegl;
@apply underline;
}
#program-list:nth-child(even) a:hover {
@apply text-accent;
@apply underline;
}