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

news article template, association cleanup, footer email links to serif

Browse Source
This commit is contained in:
elisejakob
2024-06-27 01:52:50 +02:00
parent d4399d03d3
commit 96f7d6ce91
12 changed files with 85 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/app/aktuelt/[slug]/page.tsx
View File

@ -50,8 +50,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
return (
<main className="site-main" id="main">
<section className="page-header">
<h1>{news.title}</h1>
<section className="news-header">
<p className="suphead news-details">
Nyhet &mdash; {formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
</p>
<h1 className="news-title">{news.title}</h1>
{featuredImage && (
<figure key={featuredImage.id}>
<Image
@ -61,13 +64,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
height={featuredImage.height}
sizes="100vw"
/>
<figcaption>Bildetekst her?</figcaption>
{featuredImage.attribution && (
<figcaption>{featuredImage.attribution}</figcaption>
)}
</figure>
)}
<p>{formatDate(news.firstPublishedAt, 'd. MMMM yyyy')}</p>
</section>
<section className="pageContent">
<Blocks blocks={news.body} />

25
web/src/app/foreninger/[slug]/page.tsx
View File

@ -1,8 +1,10 @@
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import Icon from "@/components/general/Icon";
import Image from "@/components/general/Image";
import { graphql } from "@/gql";
import { AssociationFragment } from "@/gql/graphql";
import Link from "next/link";
import { notFound } from "next/navigation";
export async function generateStaticParams() {
@ -51,8 +53,17 @@ export default async function Page({ params }: { params: { slug: string } }) {
return (
<main className="site-main" id="main">
<span className="suphead breadcrumb">
<Link href="/foreninger">{association.associationType}</Link>
</span>
<section className="page-header">
<h1>{association.title}</h1>
{association.websiteUrl && (
<a className="button" href={association.websiteUrl} target="_blank">
<span>Besøk nettside</span>
<Icon type="externalLink" />
</a>
)}
{association.logo && (
<Image
src={association.logo.url}
@ -65,20 +76,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
</section>
<section className="pageContent">
<Blocks blocks={association.body} />
<table>
<tbody>
<tr>
<th>Type</th>
<td>{association.associationType}</td>
</tr>
{association.websiteUrl && (
<tr>
<th>Nettside</th>
<td>{association.websiteUrl}</td>
</tr>
)}
</tbody>
</table>
</section>
</main>
);

4
web/src/components/associations/associationItem.module.scss
View File

@ -2,12 +2,10 @@
position: relative;
list-style: none;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-columns: 7rem 1fr;
align-items: flex-start;
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
background: var(--color-white);
color: var(--color-black);
padding: var(--spacing-s);
}

2
web/src/components/associations/associationList.module.scss
View File

@ -1,6 +1,6 @@
.associationList {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 1fr;
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-row);
padding-bottom: var(--spacing-section-bottom);

22
web/src/components/blocks/featuredBlock.module.scss
View File

@ -6,6 +6,28 @@
grid-template-columns: repeat(2, 1fr);
column-gap: var(--spacing-gap-column);
&[data-background-color="deepBrick"] {
background-color: var(--color-deepBrick);
}
&[data-background-color="neufPink"] {
background-color: var(--color-neufPink);
}
&[data-background-color="goldenOrange"] {
background-color: var(--color-goldenOrange);
color: var(--color-deepBrick);
}
&[data-background-color="goldenBeige"] {
background-color: var(--color-goldenBeige);
}
&[data-background-color="chateauBlue"] {
background-color: var(--color-chateauBlue);
color: var(--color-betongGray);
}
&:nth-of-type(even) {
.text {
order: 2;

9
web/src/components/events/eventFilter.module.scss
View File

@ -2,15 +2,16 @@
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .5s ease;
margin: var(--spacing-sitepadding-block) calc(var(--spacing-sitepadding-inline)*-1) 0;
margin: 0 calc(var(--spacing-sitepadding-inline)*-1) 0;
transition: margin .5s ease;
.filterContent {
background-color: var(--color-background);
padding: var(--spacing-s) var(--spacing-sitepadding-inline);
padding: 0 var(--spacing-sitepadding-inline);
min-height: 0;
visibility: hidden;
opacity: 0;
transition: visibility .5s, opacity .5s ease, background-color .5s ease;
transition: visibility .5s ease, padding .5s ease, opacity .5s ease, background-color .5s ease;
}
.filterItem {
@ -44,8 +45,10 @@
&[data-show=true] {
grid-template-rows: 1fr;
margin: var(--spacing-sitepadding-block) calc(var(--spacing-sitepadding-inline)*-1) 0;
.filterContent {
padding: var(--spacing-s) var(--spacing-sitepadding-inline);
background-color: var(--color-background-secondary);
visibility: visible;
opacity: 1;

8
web/src/components/layout/Footer.tsx
View File

@ -49,12 +49,16 @@ export const Footer = () => {
<div>
Generelle henvendelser
<br />
<a href="/#">post@neuf.no</a>
<a href="/#" target="_blank" className={styles.emailLink}>
post@neuf.no
</a>
</div>
<div>
Billetter
<br />
<a href="/#">billetter@neuf.no</a>
<a href="/#" target="_blank" className={styles.emailLink}>
billetter@neuf.no
</a>
</div>
<div>
<Link href="/kontakt">Øvrig kontaktinfo</Link>

11
web/src/components/layout/footer.module.scss
View File

@ -6,10 +6,6 @@
z-index: 700;
font-size: var(--font-size-caption);
overflow: hidden;
a {
font-size: var(--font-size-caption);
}
}
.contactList {
@ -91,11 +87,18 @@
}
}
.emailLink {
font-family: var(--font-serif);
font-size: var(--font-size-lead);
}
.pig {
position: absolute;
bottom: -2rem;
right: -2rem;
z-index: 800;
display: none;
}
.toTop {

2
web/src/components/layout/header.module.scss
View File

@ -196,5 +196,5 @@
.observer {
position: absolute;
top: calc(100vh + 8rem);
height: calc(100% - 100vh - 8rem);
height: 100%;
}

1
web/src/css/base.scss
View File

@ -125,6 +125,7 @@ h6 {
img {
max-width: 100%;
height: auto;
}
blockquote {

4
web/src/css/main.scss
View File

@ -3,4 +3,6 @@
@import 'animations.scss';
@import 'base.scss';
@import 'button.scss';
@import 'button.scss';
@import 'news.scss';

21
web/src/css/news.scss Normal file
View File

@ -0,0 +1,21 @@
.news-header {
display: block;
text-align: center;
}
.news-title {
font-size: var(--font-size-h1);
margin: 1rem auto 2rem;
}
.news-details {
display: block;
font-weight: 400;
font-size: var(--font-size-xs);
margin-bottom: var(--spacing-s);
margin: 0 auto;
a {
text-decoration: none;
}
}