diff --git a/web/src/app/medlem/page.tsx b/web/src/app/medlem/page.tsx index 1f9a9ec..b1d604f 100644 --- a/web/src/app/medlem/page.tsx +++ b/web/src/app/medlem/page.tsx @@ -8,8 +8,10 @@ import { IconListBlock } from "@/components/blocks/IconListBlock"; export default async function Page() { return (
- -

Som medlem kan du... får du... glede og samvær

+

- -

- Velkommen til oss! Enten du skal på teater, konsert, foredrag, eller er +

Hopp til:
    @@ -60,6 +61,12 @@ export default async function Page() {
+ + +

Adkomst

diff --git a/web/src/app/utleie/page.tsx b/web/src/app/utleie/page.tsx index 1a0e143..2bdc378 100644 --- a/web/src/app/utleie/page.tsx +++ b/web/src/app/utleie/page.tsx @@ -22,13 +22,13 @@ export default async function Page() { return ( <>
- -

- Chateau Neuf har lokaler til diverse arrangementer, og alle våre +

Her kommer mer om utleiereglement etc.



diff --git a/web/src/components/blocks/PageSection.tsx b/web/src/components/blocks/PageSection.tsx new file mode 100644 index 0000000..ea8e9f3 --- /dev/null +++ b/web/src/components/blocks/PageSection.tsx @@ -0,0 +1,14 @@ +import styles from "./pageSection.module.scss"; + +export const PageSection = ({ heading }: any) => { + return ( +
+
+
+ +
+

{heading}

+
+
+ ); +}; diff --git a/web/src/components/blocks/pageSection.module.scss b/web/src/components/blocks/pageSection.module.scss new file mode 100644 index 0000000..c176cc7 --- /dev/null +++ b/web/src/components/blocks/pageSection.module.scss @@ -0,0 +1,48 @@ +.pageSection { + margin: 5rem auto; + padding: 2rem 0; + border-top: var(--border-s); + + &:nth-of-type(3n+1) { + .icon { + background: var(--color-neufPink); + } + } + + &:nth-of-type(3n+2) { + .icon { + background: var(--color-goldenBeige); + } + } + + &:nth-of-type(3n+3) { + .icon { + background: var(--color-goldenOrange); + } + } +} + +.sectionHeader { + display: flex; + align-items: center; + gap: 1.6rem; + + h1 { + font-size: var(--font-size-h2); + } +} + +.icon { + flex: none; + width: 3.4rem; + height: 3.4rem; + background: var(--color-goldenBeige); + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + } +} \ No newline at end of file diff --git a/web/src/components/general/pageHeader.module.scss b/web/src/components/general/pageHeader.module.scss index 7753775..afb0eb4 100644 --- a/web/src/components/general/pageHeader.module.scss +++ b/web/src/components/general/pageHeader.module.scss @@ -1,5 +1,6 @@ .pageHeader { position: relative; + padding: var(--spacing-l) 0 calc(var(--spacing-l) + var(--spacing-sitepadding)); } .title { diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss index 0b4c787..a1092ac 100644 --- a/web/src/css/variables.scss +++ b/web/src/css/variables.scss @@ -26,6 +26,7 @@ --color-goldenOrange: rgb(255, 105, 21); --color-goldenBeige: rgb(248, 188, 144); --color-chateauBlue: rgb(10, 15, 109); + --color-chateauBlue-05: rgba(10, 15, 109, .5); --color-white: #fff; --color-black: rgb(22, 21, 22); @@ -46,7 +47,8 @@ --spacing-sitepadding: 2rem; --spacing-gap-column: 2rem; --spacing-gap-row: 1.5rem; - --spacing-section-bottom: 3rem; + --spacing-l: 3rem; + --spacing-section-bottom: var(--spacing-l); // sizes --size-width-p: 36rem; @@ -55,4 +57,5 @@ --transition-easing: .3s ease; --border: 1px solid var(--color-neufPink); + --border-s: 1px solid var(--color-chateauBlue-05); } \ No newline at end of file