make some fun components for rich text and events 🎷
This commit is contained in:
@ -53,7 +53,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
|
||||
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<section className="page-header textOnly">
|
||||
<section className="page-header">
|
||||
<h1>Et enkeltarrangement</h1>
|
||||
<p>!!</p>
|
||||
</section>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { gql } from "@apollo/client";
|
||||
import { getClient } from "@/app/client";
|
||||
import { EventList } from "@/components/events/EventList";
|
||||
|
||||
export default async function Page() {
|
||||
const query = gql(`
|
||||
@ -23,7 +24,7 @@ export default async function Page() {
|
||||
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<section className="page-header textOnly">
|
||||
<section className="page-header">
|
||||
<h1>Arrangementer</h1>
|
||||
<p>woo</p>
|
||||
</section>
|
||||
@ -34,6 +35,7 @@ export default async function Page() {
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
<EventList />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
@ -1,11 +1,19 @@
|
||||
import { EventList } from "@/components/events/EventList";
|
||||
import { Body } from "@/components/general/Body";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<div>
|
||||
<p>Nøff nøff</p>
|
||||
<EventList />
|
||||
<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>
|
||||
</main>
|
||||
);
|
||||
|
13
web/src/components/events/EventItem.tsx
Normal file
13
web/src/components/events/EventItem.tsx
Normal 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
13
web/src/components/events/EventList.tsx
Normal 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
23
web/src/components/events/eventItem.module.scss
Normal 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
7
web/src/components/events/eventList.module.scss
Normal 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
81
web/src/components/general/Body.tsx
Normal 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
110
web/src/components/general/body.module.scss
Normal 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;
|
||||
}
|
||||
}
|
@ -23,8 +23,7 @@ body {
|
||||
background: var(--color-background);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
line-height: 1.5;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
&.hideScroll {
|
||||
@ -58,6 +57,7 @@ p {
|
||||
|
||||
&.lead {
|
||||
font-size: var(--font-size-lead);
|
||||
max-width: 36em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,6 +80,7 @@ button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
transition: opacity var(--transition-easing);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@ -96,4 +97,30 @@ blockquote {
|
||||
|
||||
.site-main {
|
||||
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);
|
||||
}
|
||||
}
|
@ -3,9 +3,11 @@
|
||||
--font-main: 'Avenir Next', 'Avenir', sans-serif;
|
||||
--font-serif: 'p22-mackinac-pro', serif;
|
||||
|
||||
--font-size-caption: .8rem;
|
||||
--font-size-body: 1rem;
|
||||
--font-size-lead: 1.4rem;
|
||||
|
||||
|
||||
// colors
|
||||
|
||||
// color palette
|
||||
@ -25,4 +27,10 @@
|
||||
|
||||
// spacing
|
||||
--spacing-sitepadding: 2rem;
|
||||
--spacing-gap-column: 2rem;
|
||||
--spacing-gap-row: 1.5rem;
|
||||
--spacing-section-bottom: 5rem;
|
||||
|
||||
// animations
|
||||
--transition-easing: .3s ease;
|
||||
}
|
Reference in New Issue
Block a user