diff --git a/web/src/app/[...url]/page.tsx b/web/src/app/[...url]/page.tsx index 543dc48..743d6fa 100644 --- a/web/src/app/[...url]/page.tsx +++ b/web/src/app/[...url]/page.tsx @@ -4,6 +4,7 @@ import { getClient } from "@/app/client"; import { Blocks } from "@/components/blocks/Blocks"; import { notFound } from "next/navigation"; import { PageHeader } from "@/components/general/PageHeader"; +import { AddressSection } from "@/components/blocks/AddressSection"; export const dynamicParams = false; @@ -72,14 +73,12 @@ export default async function Page({ params }: { params: { url: string[] } }) { if (!page) { return notFound(); } - + return (
- + + {page.title === "Praktisk info" && }
); } diff --git a/web/src/components/blocks/AddressSection.tsx b/web/src/components/blocks/AddressSection.tsx new file mode 100644 index 0000000..73f24ff --- /dev/null +++ b/web/src/components/blocks/AddressSection.tsx @@ -0,0 +1,31 @@ +import styles from "./addressSection.module.scss"; + +export const AddressSection = () => { + return ( +
+
+

Adresse

+
+ Det Norske Studentersamfund +
+ Slemdalsveien 15 +
+ 0369 Oslo +
+
+ + Vis i Google Maps + +
+
+
+ +
+
+ ); +}; diff --git a/web/src/components/blocks/addressSection.module.scss b/web/src/components/blocks/addressSection.module.scss new file mode 100644 index 0000000..503a168 --- /dev/null +++ b/web/src/components/blocks/addressSection.module.scss @@ -0,0 +1,59 @@ +.addressSection { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: var(--spacing-gap-column); + row-gap: var(--spacing-gap-row); + align-items: flex-start; + container-type: inline-size; + margin-bottom: var(--spacing-gap-row); +} + +.text { + grid-column: 2 / span 4; + + h2 { + margin: 0 0 var(--spacing-s); + max-width: var(--size-width-p); + } + + 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; + } + } +} + +.map { + grid-column: 6 / span 6; + + iframe { + border: none; + width: 100%; + height: auto; + min-height: 16rem; + } +} + +@media (max-width: 1200px) { + + .text { + grid-column: 1 / span 5; + } + + .map { + grid-column: 6 / span 7; + } +} + +@container (max-width: 800px) { + + .text, + .map { + grid-column: 1 / -1; + } +} \ No newline at end of file