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

make some fun components for rich text and events 🎷

Browse Source
This commit is contained in:
elisejakob
2024-05-10 00:56:40 +02:00
parent e8e9842413
commit ee339e9cac
11 changed files with 297 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/arrangementer/[slug]/page.tsx
View File

@ -53,7 +53,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
return ( return (
<main className="site-main" id="main"> <main className="site-main" id="main">
<section className="page-header textOnly"> <section className="page-header">
<h1>Et enkeltarrangement</h1> <h1>Et enkeltarrangement</h1>
<p>!!</p> <p>!!</p>
</section> </section>

4
web/src/app/arrangementer/page.tsx
View File

@ -1,5 +1,6 @@
import { gql } from "@apollo/client"; import { gql } from "@apollo/client";
import { getClient } from "@/app/client"; import { getClient } from "@/app/client";
import { EventList } from "@/components/events/EventList";
export default async function Page() { export default async function Page() {
const query = gql(` const query = gql(`
@ -23,7 +24,7 @@ export default async function Page() {
return ( return (
<main className="site-main" id="main"> <main className="site-main" id="main">
<section className="page-header textOnly"> <section className="page-header">
<h1>Arrangementer</h1> <h1>Arrangementer</h1>
<p>woo</p> <p>woo</p>
</section> </section>
@ -34,6 +35,7 @@ export default async function Page() {
))} ))}
</section> </section>
)} )}
<EventList />
</main> </main>
); );
} }

10
web/src/app/page.tsx
View File

@ -1,11 +1,19 @@
import { EventList } from "@/components/events/EventList";
import { Body } from "@/components/general/Body";
import Image from "next/image"; import Image from "next/image";
export default function Home() { export default function Home() {
return ( return (
<main className="site-main" id="main"> <main className="site-main" id="main">
<div> <div>
<p>Nøff nøff</p> <EventList />
<blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote> <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
<p className="lead">
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
lacus vulputate. Nulla sed finibus diam.
</p>
<Body />
</div> </div>
</main> </main>
); );

13
web/src/components/events/EventItem.tsx Normal file
View File

@ -0,0 +1,13 @@
import styles from "./eventItem.module.scss";
export const EventItem = () => {
return (
<li className={`${styles.eventItem} linkItem`}>
<div className={styles.image}></div>
<div className={styles.text}>
<h1 className={styles.title}>Arrangementstittel</h1>
<p className={styles.details}>Detaljer og tidspunkt</p>
</div>
</li>
);
};

13
web/src/components/events/EventList.tsx Normal file
View File

@ -0,0 +1,13 @@
import { EventItem } from "./EventItem";
import styles from "./eventList.module.scss";
export const EventList = () => {
return (
<ul className={styles.eventList}>
<EventItem />
<EventItem />
<EventItem />
<EventItem />
</ul>
);
};

23
web/src/components/events/eventItem.module.scss Normal file
View File

@ -0,0 +1,23 @@
.eventItem {
position: relative;
list-style: none;
}
.image {
width: 100%;
padding-top: 60%;
background: var(--color-neufPink);
}
.text {
padding: .8rem 0;
}
.title,
.details {
font-size: 1.6rem;
}
.details {
font-family: var(--font-serif);
}

7
web/src/components/events/eventList.module.scss Normal file
View File

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

81
web/src/components/general/Body.tsx Normal file
View File

@ -0,0 +1,81 @@
import styles from "./body.module.scss";
export const Body = () => {
return (
<div className={styles.body}>
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a interdum blandit. Sed ac purus sit amet libero posuere
molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
blandit. Suspendisse potenti. Sed auctor enim et{" "}
<a href="#">augue dapibus</a>, vitae laoreet lacus vulputate. Nulla sed
finibus diam.
</p>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a <strong>interdum blandit</strong>. Sed ac purus sit amet{" "}
<em>libero posuere</em>
molestie. Sed sodales nunc quis sapien malesuada, a faucibus turpis
blandit.{" "}
<em>
<strong>Suspendisse potenti</strong>
</em>
. Sed auctor enim et augue dapibus, vitae laoreet lacus vulputate. Nulla
sed finibus diam.
</p>
<p>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
lacus vulputate. Nulla sed finibus diam.
</p>
<h3>Heading 3</h3>
<ul>
<li>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor.
</li>
</ul>
<h4>Heading 4</h4>
<ol>
<li>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor.
</li>
</ol>
<h5>Heading 5</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a interdum blandit.
</p>
<h6>Heading 6</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
tortor a interdum blandit.
</p>
<figure>
<img src="https://studentersamfundet.no/static/b5503a1525a722cc1060b8652bf587e4/a41d1/53121578648_8b39551a09_o-1.jpg" />
<figcaption>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</figcaption>
</figure>
<figure>
<img src="https://byantikvaren.files.wordpress.com/2017/05/chateau-neuf.jpg?w=584" />
<figcaption>
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti.
</figcaption>
</figure>
</div>
);
};

110
web/src/components/general/body.module.scss Normal file
View File

@ -0,0 +1,110 @@
.body {
padding-bottom: var(--spacing-section-bottom);
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 2rem 0 1rem;
max-width: 36em;
}
h5,
h6 {
text-transform: uppercase;
letter-spacing: .04em;
}
p {
margin-bottom: 1.4em;
font-size: var(--font-size-body);
max-width: 36em;
}
ul,
ol {
margin: 1em 0 2em;
font-size: var(--font-size-body);
max-width: 36em;
list-style: none;
li {
position: relative;
margin-bottom: .75em;
padding-left: 2em;
&:before {
position: absolute;
left: 0;
}
}
}
ul {
li {
&:before {
content: "";
left: .35em;
top: .4em;
display: block;
width: .75em;
height: .75em;
border-radius: 1em;
background: var(--color-goldenOrange);
}
}
}
ol {
counter-reset: counter;
li {
&:before {
counter-increment: counter;
content: counter(counter);
font-weight: 500;
color: var(--color-chateauBlue);
border-radius: 1em;
background: var(--color-neufPink);
width: 1.5em;
height: 1.5em;
text-align: center;
}
}
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
a {
text-decoration-thickness: .1rem;
text-decoration-color: var(--color-goldenOrange);
font-weight: 500;
transition: text-decoration-color var(--transition-easing);
&:hover {
text-decoration-color: currentColor;
}
}
img {
max-width: 100%;
}
figure {
margin: 2rem 0 2.4rem;
}
figcaption {
font-size: var(--font-size-caption);
padding: .6rem 0;
max-width: 36rem;
}
}

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

@ -23,8 +23,7 @@ body {
background: var(--color-background); background: var(--color-background);
font-family: var(--font-main); font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1rem; line-height: 1.5;
line-height: 1.4;
@media (max-width: 1000px) { @media (max-width: 1000px) {
&.hideScroll { &.hideScroll {
@ -58,6 +57,7 @@ p {
&.lead { &.lead {
font-size: var(--font-size-lead); font-size: var(--font-size-lead);
max-width: 36em;
} }
} }
@ -80,6 +80,7 @@ button {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
font-weight: 500; font-weight: 500;
transition: opacity var(--transition-easing);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -97,3 +98,29 @@ blockquote {
.site-main { .site-main {
padding: var(--spacing-sitepadding); padding: var(--spacing-sitepadding);
} }
.hiddenLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
overflow: hidden;
text-indent: -9999px;
z-index: 10;
}
.linkItem {
transition: opacity var(--transition-easing);
cursor: pointer;
&:hover {
opacity: .6;
transition: opacity var(--transition-easing);
}
&:has(:focus-visible) {
box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px var(--color-green-dark);
}
}

8
web/src/css/variables.scss
View File

@ -3,9 +3,11 @@
--font-main: 'Avenir Next', 'Avenir', sans-serif; --font-main: 'Avenir Next', 'Avenir', sans-serif;
--font-serif: 'p22-mackinac-pro', serif; --font-serif: 'p22-mackinac-pro', serif;
--font-size-caption: .8rem;
--font-size-body: 1rem; --font-size-body: 1rem;
--font-size-lead: 1.4rem; --font-size-lead: 1.4rem;
// colors // colors
// color palette // color palette
@ -25,4 +27,10 @@
// spacing // spacing
--spacing-sitepadding: 2rem; --spacing-sitepadding: 2rem;
--spacing-gap-column: 2rem;
--spacing-gap-row: 1.5rem;
--spacing-section-bottom: 5rem;
// animations
--transition-easing: .3s ease;
} }