+
+
);
diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..d8b3790
--- /dev/null
+++ b/web/src/components/layout/Footer.tsx
@@ -0,0 +1,19 @@
+"use client";
+import Link from "next/link";
+import styles from "./footer.module.scss";
+
+export const Footer = () => {
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth",
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
new file mode 100644
index 0000000..a49c2cc
--- /dev/null
+++ b/web/src/components/layout/Header.tsx
@@ -0,0 +1,35 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import styles from "./header.module.scss";
+
+export const Header = () => {
+ const [showMenu, setShowMenu] = useState(false);
+ function toggleMenu() {
+ setShowMenu(!showMenu);
+ }
+
+ return (
+
+
+
+ );
+};
diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss
new file mode 100644
index 0000000..c3d2099
--- /dev/null
+++ b/web/src/components/layout/footer.module.scss
@@ -0,0 +1,11 @@
+.footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ padding: var(--spacing-sitepadding);
+ background: #ccc;
+
+ a {
+ text-decoration: none;
+ }
+}
\ No newline at end of file
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
new file mode 100644
index 0000000..445f3f2
--- /dev/null
+++ b/web/src/components/layout/header.module.scss
@@ -0,0 +1,24 @@
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding: var(--spacing-sitepadding);
+
+ a {
+ text-decoration: none;
+ }
+}
+
+.logo {
+ font-size: 3rem;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+
+.siteMenu {
+ ul {
+ list-style: none;
+ display: flex;
+ gap: var(--spacing-sitepadding);
+ }
+}
\ No newline at end of file
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
new file mode 100644
index 0000000..f1d9fe8
--- /dev/null
+++ b/web/src/css/base.scss
@@ -0,0 +1,98 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+html {
+ min-height: 100%;
+}
+
+html,
+body {
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+
+ color: var(--color-text);
+ background: var(--color-background);
+ font-family: var(--font-main);
+ font-weight: 400;
+ font-size: 1rem;
+ line-height: 1.4;
+
+ @media (max-width: 1000px) {
+ &.hideScroll {
+ overflow: hidden;
+ height: 100vh;
+ }
+ }
+}
+
+.site-main {
+ animation: fadeIn 1s ease-out forwards;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+a {
+ color: inherit;
+ text-underline-offset: .1rem;
+}
+
+p {
+ font-size: var(--font-size-body);
+
+ &.lead {
+ font-size: var(--font-size-lead);
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 600;
+ line-height: 1.2;
+}
+
+button {
+ border-radius: 10rem;
+ background: var(--color-text);
+ color: var(--color-background);
+ border: none;
+ padding: 1rem 1.5rem;
+ font-family: inherit;
+ font-size: inherit;
+ cursor: pointer;
+
+ &:hover {
+ opacity: .8;
+ }
+}
+
+blockquote {
+ font-family: var(--font-serif);
+ font-size: 2.8rem;
+ font-style: italic;
+ margin: 1.8rem 0;
+}
+
+.site-main {
+ padding: var(--spacing-sitepadding);
+}
\ No newline at end of file
diff --git a/web/src/css/fonts.scss b/web/src/css/fonts.scss
new file mode 100644
index 0000000..a011c06
--- /dev/null
+++ b/web/src/css/fonts.scss
@@ -0,0 +1,8 @@
+@import url("https://use.typekit.net/spa5smt.css");
+
+/*@font-face {
+ font-family: 'Avenir';
+ src: url('/assets/fonts/Avenir/Avenir.woff2') format("woff2");
+ font-weight: 400;
+ font-display: swap;
+}*/
\ No newline at end of file
diff --git a/web/src/css/main.scss b/web/src/css/main.scss
new file mode 100644
index 0000000..42eaf75
--- /dev/null
+++ b/web/src/css/main.scss
@@ -0,0 +1,3 @@
+@import 'fonts.scss';
+@import 'variables.scss';
+@import 'base.scss';
\ No newline at end of file
diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss
new file mode 100644
index 0000000..0e938c9
--- /dev/null
+++ b/web/src/css/variables.scss
@@ -0,0 +1,15 @@
+:root {
+ // font families
+ --font-main: 'Avenir Next', sans-serif;
+ --font-serif: 'p22-mackinac-pro', serif;
+
+ --font-size-body: 1rem;
+ --font-size-lead: 1.4rem;
+
+ // colors
+ --color-text: #333;
+ --color-background: #eee;
+
+ // spacing
+ --spacing-sitepadding: 2rem;
+}
\ No newline at end of file
Nøff nøff
+«Hvor Glæden hersker, er alltid Fest»