diff --git a/web/src/app/arrangementer/[slug]/page.tsx b/web/src/app/arrangementer/[slug]/page.tsx index 46bd829..e863dae 100644 --- a/web/src/app/arrangementer/[slug]/page.tsx +++ b/web/src/app/arrangementer/[slug]/page.tsx @@ -53,7 +53,7 @@ export default async function Page({ params }: { params: { slug: string } }) { return (
-
+

Et enkeltarrangement

!!

diff --git a/web/src/app/arrangementer/page.tsx b/web/src/app/arrangementer/page.tsx index 83dece4..4f62c1a 100644 --- a/web/src/app/arrangementer/page.tsx +++ b/web/src/app/arrangementer/page.tsx @@ -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 (
-
+

Arrangementer

woo

@@ -34,6 +35,7 @@ export default async function Page() { ))}
)} +
); } diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index ff29291..11719bf 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -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 (
-

Nøff nøff

+
«Hvor Glæden hersker, er alltid Fest»
+

+ 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. +

+
); diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx new file mode 100644 index 0000000..ac84901 --- /dev/null +++ b/web/src/components/events/EventItem.tsx @@ -0,0 +1,13 @@ +import styles from "./eventItem.module.scss"; + +export const EventItem = () => { + return ( +
  • +
    +
    +

    Arrangementstittel

    +

    Detaljer og tidspunkt

    +
    +
    • + ); +}; diff --git a/web/src/components/events/EventList.tsx b/web/src/components/events/EventList.tsx new file mode 100644 index 0000000..f65c5d5 --- /dev/null +++ b/web/src/components/events/EventList.tsx @@ -0,0 +1,13 @@ +import { EventItem } from "./EventItem"; +import styles from "./eventList.module.scss"; + +export const EventList = () => { + return ( + + ); +}; diff --git a/web/src/components/events/eventItem.module.scss b/web/src/components/events/eventItem.module.scss new file mode 100644 index 0000000..dc1b641 --- /dev/null +++ b/web/src/components/events/eventItem.module.scss @@ -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); +} \ No newline at end of file diff --git a/web/src/components/events/eventList.module.scss b/web/src/components/events/eventList.module.scss new file mode 100644 index 0000000..50b87b4 --- /dev/null +++ b/web/src/components/events/eventList.module.scss @@ -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); +} \ No newline at end of file diff --git a/web/src/components/general/Body.tsx b/web/src/components/general/Body.tsx new file mode 100644 index 0000000..fdc5ca6 --- /dev/null +++ b/web/src/components/general/Body.tsx @@ -0,0 +1,81 @@ +import styles from "./body.module.scss"; + +export const Body = () => { + return ( +
    +

    Heading 1

    +

    + 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{" "} + augue dapibus, vitae laoreet lacus vulputate. Nulla sed + finibus diam. +

    +

    Heading 2

    +

    + 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 augue dapibus, vitae laoreet lacus vulputate. Nulla + sed finibus diam. +

    +

    + 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. +

    +

    Heading 3

    +
      +
    • + Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit. + Suspendisse potenti. +
      • +
    • + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie + tortor. +
      • +
    +

    Heading 4

    +
      +
    1. + Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit. + Suspendisse potenti. +
      2. +
    2. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie + tortor. +
      3. +
    +
    Heading 5
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie + tortor a interdum blandit. +

    +
    Heading 6
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie + tortor a interdum blandit. +

    +
    + +
    + Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit. + Suspendisse potenti. +
    +
    +
    + +
    + Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit. + Suspendisse potenti. +
    +
    +
    + ); +}; diff --git a/web/src/components/general/body.module.scss b/web/src/components/general/body.module.scss new file mode 100644 index 0000000..2f3ac7a --- /dev/null +++ b/web/src/components/general/body.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/web/src/css/base.scss b/web/src/css/base.scss index eea6607..fc6a8ef 100644 --- a/web/src/css/base.scss +++ b/web/src/css/base.scss @@ -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); + } } \ No newline at end of file diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss index 003c9cd..c7decef 100644 --- a/web/src/css/variables.scss +++ b/web/src/css/variables.scss @@ -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; } \ No newline at end of file