From 06fe50e0190ae5ee448fbbf6424e8c7806f9e858 Mon Sep 17 00:00:00 2001 From: Ida Klemmetsrud Isaksen Date: Thu, 17 Aug 2023 11:58:20 +0200 Subject: [PATCH] more styling, setup for additional pages --- pages/varianttur/guildford23/aktiviteter.tsx | 1 + .../index.tsx} | 0 pages/varianttur/guildford23/tips.tsx | 1 + .../aktiviteter/aktiviteter.module.css | 4 + .../guildford23/aktiviteter/index.tsx | 9 + .../description/description.module.css | 10 +- .../components/description/description.tsx | 30 +- .../components/hero/hero.module.css | 5 + .../guildford23/components/hero/hero.tsx | 4 +- .../components/info/info.module.css | 7 +- .../guildford23/components/info/info.tsx | 1 - ...{itinirary-blob.svg => itinerary-blob.svg} | 0 .../components/itinerary/itinerary.module.css | 47 +-- .../components/itinerary/itinerary.tsx | 307 +++++++++--------- .../components/itinerary/linkIcon.tsx | 18 + .../components/navbar/navbar.module.css | 4 +- .../guildford23/components/navbar/navbar.tsx | 2 +- src/varianttur/guildford23/index.tsx | 2 +- src/varianttur/guildford23/tips/index.tsx | 9 + .../guildford23/tips/tips.module.css | 4 + 20 files changed, 268 insertions(+), 197 deletions(-) create mode 100644 pages/varianttur/guildford23/aktiviteter.tsx rename pages/varianttur/{guildford23.tsx => guildford23/index.tsx} (100%) create mode 100644 pages/varianttur/guildford23/tips.tsx create mode 100644 src/varianttur/guildford23/aktiviteter/aktiviteter.module.css create mode 100644 src/varianttur/guildford23/aktiviteter/index.tsx rename src/varianttur/guildford23/components/itinerary/{itinirary-blob.svg => itinerary-blob.svg} (100%) create mode 100644 src/varianttur/guildford23/components/itinerary/linkIcon.tsx create mode 100644 src/varianttur/guildford23/tips/index.tsx create mode 100644 src/varianttur/guildford23/tips/tips.module.css diff --git a/pages/varianttur/guildford23/aktiviteter.tsx b/pages/varianttur/guildford23/aktiviteter.tsx new file mode 100644 index 000000000..69918450d --- /dev/null +++ b/pages/varianttur/guildford23/aktiviteter.tsx @@ -0,0 +1 @@ +export { default } from 'src/varianttur/guildford23/aktiviteter'; \ No newline at end of file diff --git a/pages/varianttur/guildford23.tsx b/pages/varianttur/guildford23/index.tsx similarity index 100% rename from pages/varianttur/guildford23.tsx rename to pages/varianttur/guildford23/index.tsx diff --git a/pages/varianttur/guildford23/tips.tsx b/pages/varianttur/guildford23/tips.tsx new file mode 100644 index 000000000..540fdfaa5 --- /dev/null +++ b/pages/varianttur/guildford23/tips.tsx @@ -0,0 +1 @@ +export { default } from 'src/varianttur/guildford23/tips'; \ No newline at end of file diff --git a/src/varianttur/guildford23/aktiviteter/aktiviteter.module.css b/src/varianttur/guildford23/aktiviteter/aktiviteter.module.css new file mode 100644 index 000000000..7a3abefd9 --- /dev/null +++ b/src/varianttur/guildford23/aktiviteter/aktiviteter.module.css @@ -0,0 +1,4 @@ +.container { + background-color: var(--color-primary__shade1); + color: var(--color-standard__white); +} diff --git a/src/varianttur/guildford23/aktiviteter/index.tsx b/src/varianttur/guildford23/aktiviteter/index.tsx new file mode 100644 index 000000000..9e8ca8bc6 --- /dev/null +++ b/src/varianttur/guildford23/aktiviteter/index.tsx @@ -0,0 +1,9 @@ +import style from './aktiviteter.module.css'; + +export default function Aktiviteter() { + return ( +
+

Aktiviteter

+
+ ); +}; \ No newline at end of file diff --git a/src/varianttur/guildford23/components/description/description.module.css b/src/varianttur/guildford23/components/description/description.module.css index 10d78333c..f1e83d368 100644 --- a/src/varianttur/guildford23/components/description/description.module.css +++ b/src/varianttur/guildford23/components/description/description.module.css @@ -1,6 +1,6 @@ .descriptionContainer { background-color: var(--color-primary__shade2); - padding: 4rem 8rem 12rem; + padding: 7rem 15rem 12rem; position: relative; height: 60rem; } @@ -10,6 +10,10 @@ z-index: 10; } +.descriptionText { + width: 45%; +} + .importantText { text-transform: uppercase; font-weight: bold; @@ -33,11 +37,11 @@ .imageBlobContainer { position: absolute; bottom: 0; - right: 0; + right: 3rem; } .imageContainer { position: absolute; bottom: 3rem; - right: 1rem; + right: 5rem; } diff --git a/src/varianttur/guildford23/components/description/description.tsx b/src/varianttur/guildford23/components/description/description.tsx index fde55f393..aefa01abc 100644 --- a/src/varianttur/guildford23/components/description/description.tsx +++ b/src/varianttur/guildford23/components/description/description.tsx @@ -9,20 +9,22 @@ const Description = () => {
-

Stop being so apple handome, this is going to be jolly good!

-

- Hundre og femti mil sørover, litt vest og nedover ligger Guildford – en liten by i distriktet Surrey. Sjølberga med både slott og vinskole, shoppinggate og eget teater. Fritt for vær og vind(🤞), akkurat der vi skal bo på Harbour hotel. Her skal vi feire 5års dagen til Variant🎉 -

-

- Det blir litt faglig opplegg 🤓, vi skal spise digg mat 🍴, og dra ut på livlige, typisk engelske aktiviteter 🏰 🎢 🍷 🍸🌆. Vi har prøvd å ha noe for alle og enhver, både med mat og utflukter – håper det faller i smak. Det er også lagt inn tid på lørdagen til å ha litt frilek 🛝, forslag til påfunn finner du under praktisk info. -

-

- (“Og hva skjer med båtturen da?” tenker du, -
- og vi må faktisk skuffe dere: ingen båttur i år - 😱🚨 - ) -

+

Stop being so apple handsome,
this is going to be jolly good!

+
+

+ Hundre og femti mil sørover, litt vest og nedover ligger Guildford – en liten by i distriktet Surrey. Sjølberga med både slott og vinskole, shoppinggate og eget teater. Fritt for vær og vind(🤞), akkurat der vi skal bo på Harbour hotel. Her skal vi feire 5års dagen til Variant🎉 +

+

+ Det blir litt faglig opplegg 🤓, vi skal spise digg mat 🍴, og dra ut på livlige, typisk engelske aktiviteter 🏰 🎢 🍷 🍸🌆. Vi har prøvd å ha noe for alle og enhver, både med mat og utflukter – håper det faller i smak. Det er også lagt inn tid på lørdagen til å ha litt frilek 🛝, forslag til påfunn finner du under praktisk info. +

+

+ (“Og hva skjer med båtturen da?” tenker du, +
+ og vi må faktisk skuffe dere: ingen båttur i år + 😱🚨 + ) +

+
diff --git a/src/varianttur/guildford23/components/hero/hero.module.css b/src/varianttur/guildford23/components/hero/hero.module.css index b0bbb98cb..8f5bf3d09 100644 --- a/src/varianttur/guildford23/components/hero/hero.module.css +++ b/src/varianttur/guildford23/components/hero/hero.module.css @@ -11,8 +11,13 @@ width: 50%; } +.navbarContainer { + margin-left: 8rem; +} + .imageContainer { position: relative; + width: 50%; } .blobContainer { diff --git a/src/varianttur/guildford23/components/hero/hero.tsx b/src/varianttur/guildford23/components/hero/hero.tsx index ed991d57a..a57519103 100644 --- a/src/varianttur/guildford23/components/hero/hero.tsx +++ b/src/varianttur/guildford23/components/hero/hero.tsx @@ -8,7 +8,9 @@ const Hero = () => {
- +
+ +
diff --git a/src/varianttur/guildford23/components/info/info.module.css b/src/varianttur/guildford23/components/info/info.module.css index 3fbe27d0c..300e02d10 100644 --- a/src/varianttur/guildford23/components/info/info.module.css +++ b/src/varianttur/guildford23/components/info/info.module.css @@ -24,7 +24,7 @@ .hotelTextContainer { position: absolute; z-index: 10; - top: 13rem; + top: 15rem; } .foodBlobContainer { @@ -60,11 +60,6 @@ h3 { margin-bottom: 1rem; } -.phone { - margin-top: 1rem; - margin-bottom: 2.5rem; -} - .addressContainer { margin-bottom: 5rem; display: flex; diff --git a/src/varianttur/guildford23/components/info/info.tsx b/src/varianttur/guildford23/components/info/info.tsx index e3d6e51bd..b5e410747 100644 --- a/src/varianttur/guildford23/components/info/info.tsx +++ b/src/varianttur/guildford23/components/info/info.tsx @@ -14,7 +14,6 @@ const Info = () => {

Harbour Hotel Guildford

-

☎️ +????

📍
diff --git a/src/varianttur/guildford23/components/itinerary/itinirary-blob.svg b/src/varianttur/guildford23/components/itinerary/itinerary-blob.svg similarity index 100% rename from src/varianttur/guildford23/components/itinerary/itinirary-blob.svg rename to src/varianttur/guildford23/components/itinerary/itinerary-blob.svg diff --git a/src/varianttur/guildford23/components/itinerary/itinerary.module.css b/src/varianttur/guildford23/components/itinerary/itinerary.module.css index ed8544557..fc0418fb9 100644 --- a/src/varianttur/guildford23/components/itinerary/itinerary.module.css +++ b/src/varianttur/guildford23/components/itinerary/itinerary.module.css @@ -1,34 +1,38 @@ -.day { - padding: 4rem 8rem 12rem; - position: relative; - height: 60rem; +.dayContainer { + padding: 4rem 8rem 0; } -.oddDay { - composes: day; - background-color: var(--color-primary__shade2); +.navbarContainer { + margin: 0 auto 7rem; + width: 50%; } -.evenDay { - composes: day; +.evenDayContainer { + composes: dayContainer; background-color: var(--color-primary__shade1); } +.oddDayContainer { + composes: dayContainer; + background-color: var(--color-primary__shade2); +} + +.day { + position: relative; + height: 40rem; +} + .backgroundBlobContainer { position: absolute; - top: 25%; + top: 0; left: 50%; - transform: translate(-50%, -25%); + transform: translate(-50%); } .textContainer { position: absolute; z-index: 10; -} - -.dayHeading { - font-size: 2.813rem; - margin-bottom: 5rem; + top: 2rem; } .list { @@ -53,14 +57,18 @@ time { padding-bottom: 2rem; } +.unborderedListItem { + margin-left: 0.2rem; +} + .listItemTitle { font-size: 1.25rem; line-height: 160%; - margin-top: -1rem; + margin-top: -0.8rem; } .list .listItemTitle::before { - content: url('./itinirary-blob.svg'); + content: url('./itinerary-blob.svg'); margin-left: -0.875rem; } @@ -73,8 +81,7 @@ time { display: flex; } -.externalLink { +.link { font-size: 0.813rem; - margin-left: 0.2rem; text-decoration: underline; } diff --git a/src/varianttur/guildford23/components/itinerary/itinerary.tsx b/src/varianttur/guildford23/components/itinerary/itinerary.tsx index 9bdeee8ac..fb6ede808 100644 --- a/src/varianttur/guildford23/components/itinerary/itinerary.tsx +++ b/src/varianttur/guildford23/components/itinerary/itinerary.tsx @@ -3,164 +3,177 @@ import style from './itinerary.module.css'; import SaturdayBlob from './saturdayBlob'; import SundayBlob from './sundayBlob'; import Navbar, { NavItem } from './../navbar/navbar'; +import LinkIcon from './linkIcon'; const Itinerary = () => { return (
-
-
- -
-
+
+
-
    -
  1. - -
    -

    Oppmøte Værnes 🧳

    -

    *TEKST*

    -
    -
    2. -
  2. - -
    -

    Flyet går✈️

    -

    Flybilletter

    -
    -
    3. -
  3. - -
    -

    Buss til hotellet 🚍

    -

    Det vil vente en buss på flyplassen, følg reiseleder Linda!

    -
    -
    4. -
  4. - -
    -

    Ankomst hotellet 🏨

    -

    Vi legger fra oss bagasjen og tar med oss en sandwich

    -
    -
    5. -
  5. - -
    -

    Variantdag 🚀

    -

    Faglig opplegg for Varianter, følgene har mulighet til å bli bedre kjent, eller bare gjøre som de vil

    -
    -
    6. -
  6. - -
    -

    Velkomst 🥂

    -

    Alle møtes til velkomst på The Terrace

    -
    -
    7. -
  7. - -
    -

    Festmiddag & fest 🍴 💃🏼 🕺🏽

    -

    I hotellrestauranten, Long bar and grill

    -
    -
    8. -
+
+
+
+ +
+
+
    +
  1. + +
    +

    Oppmøte Værnes 🧳

    +

    *TEKST*

    +
    +
    2. +
  2. + +
    +

    Flyet går✈️

    +

    Flybilletter

    +
    +
    3. +
  3. + +
    +

    Buss til hotellet 🚍

    +

    Det vil vente en buss på flyplassen, følg reiseleder Linda!

    +
    +
    4. +
  4. + +
    +

    Ankomst hotellet 🏨

    +

    Vi legger fra oss bagasjen og tar med oss en sandwich

    +
    +
    5. +
  5. + +
    +

    Variantdag 🚀

    +

    Faglig opplegg for Varianter, følgene har mulighet til å bli bedre kjent, eller bare gjøre som de vil

    +
    +
    6. +
  6. + +
    +

    Velkomst 🥂

    +

    Alle møtes til velkomst på The Terrace

    +
    +
    7. +
  7. + +
    +

    Festmiddag & fest 🍴 💃🏼 🕺🏽

    +

    I hotellrestauranten, Long bar and grill

    +
    +
    8. +
+
-
-
- +
+
+
-
- -
    -
  1. - -
    -

    Frokost på hotellet 🍳

    -

    *TEKST*

    -
    -
    2. -
  2. - -
    -

    Aktiviteter 🏰 🎢 🍷 🍸🌆

    -

    Info om transport, selve aktiviteten og lunsj

    -
    -
    3. -
  3. - -
    -

    Fritid 🛝

    -

    Lørdagstips

    -
    -
    4. -
  4. - -
    -

    Buss til middag 🚍

    -

    *TEKST*

    -
    -
    5. -
  5. - -
    -

    Middag 🍴

    -

    Red Lion

    -
    -
    6. -
  6. - -
    -

    Buss tilbake til hotellet 🚍

    -

    For natteranglere er det mulighet for å fortsette i hotellbaren eller dra ut på noen av byens nattklubber

    -
    -
    7. -
+
+
+ +
+
+
    +
  1. + +
    +

    Frokost på hotellet 🍳

    +

    *TEKST*

    +
    +
    2. +
  2. + +
    +

    Aktiviteter 🏰 🎢 🍷 🍸🌆

    +

    Info om transport, selve aktiviteten og lunsj

    +
    +
    3. +
  3. + +
    +

    Fritid 🛝

    +

    Lørdagstips

    +
    +
    4. +
  4. + +
    +

    Buss til middag 🚍

    +

    *TEKST*

    +
    +
    5. +
  5. + +
    +

    Middag 🍴

    +

    Red Lion

    +
    +
    6. +
  6. + +
    +

    Buss tilbake til hotellet 🚍

    +

    For natteranglere er det mulighet for å fortsette i hotellbaren eller dra ut på noen av byens nattklubber

    +
    +
    7. +
+
-
-
- +
+
+
-
- -
    -
  1. - -
    -

    Frokost på hotellet 🍳

    -

    *TEKST*

    -
    -
    2. -
  2. - -
    -

    Utsjekk 🧳

    -

    *TEKST*

    -
    -
    3. -
  3. - -
    -

    Buss til Heathrow 🚍

    -

    *TEKST*

    -
    -
    4. -
  4. - -
    -

    Fly Heathrow - Oslo ✈️

    -

    *TEKST*

    -
    -
    5. -
  5. - -
    -

    Fly Oslo - Værnes ✈️

    -

    *TEKST*

    -
    -
    6. -
+
+
+ +
+
+
    +
  1. + +
    +

    Frokost på hotellet 🍳

    +

    *TEKST*

    +
    +
    2. +
  2. + +
    +

    Utsjekk 🧳

    +

    *TEKST*

    +
    +
    3. +
  3. + +
    +

    Buss til Heathrow 🚍

    +

    *TEKST*

    +
    +
    4. +
  4. + +
    +

    Fly Heathrow - Oslo ✈️

    +

    *TEKST*

    +
    +
    5. +
  5. + +
    +

    Fly Oslo - Værnes ✈️

    +

    *TEKST*

    +
    +
    6. +
+
diff --git a/src/varianttur/guildford23/components/itinerary/linkIcon.tsx b/src/varianttur/guildford23/components/itinerary/linkIcon.tsx new file mode 100644 index 000000000..5e4de9337 --- /dev/null +++ b/src/varianttur/guildford23/components/itinerary/linkIcon.tsx @@ -0,0 +1,18 @@ +const LinkIcon = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default LinkIcon; \ No newline at end of file diff --git a/src/varianttur/guildford23/components/navbar/navbar.module.css b/src/varianttur/guildford23/components/navbar/navbar.module.css index df1e9daf4..721df0cc5 100644 --- a/src/varianttur/guildford23/components/navbar/navbar.module.css +++ b/src/varianttur/guildford23/components/navbar/navbar.module.css @@ -1,8 +1,6 @@ -.navbarContainer { +.navbar { display: flex; justify-content: space-between; - margin-left: 8rem; - margin-bottom: 5rem; } a { diff --git a/src/varianttur/guildford23/components/navbar/navbar.tsx b/src/varianttur/guildford23/components/navbar/navbar.tsx index 0cb8ab082..e6ea361dd 100644 --- a/src/varianttur/guildford23/components/navbar/navbar.tsx +++ b/src/varianttur/guildford23/components/navbar/navbar.tsx @@ -9,7 +9,7 @@ export enum NavItem { const Navbar = ({ selectedNavItem }: { selectedNavItem?: NavItem }) => { return ( -
+
Fredagen Lørdagen Søndagen diff --git a/src/varianttur/guildford23/index.tsx b/src/varianttur/guildford23/index.tsx index 047791a3d..9300173f2 100644 --- a/src/varianttur/guildford23/index.tsx +++ b/src/varianttur/guildford23/index.tsx @@ -14,5 +14,5 @@ export default function Guildford23() {
- ) + ); }; \ No newline at end of file diff --git a/src/varianttur/guildford23/tips/index.tsx b/src/varianttur/guildford23/tips/index.tsx new file mode 100644 index 000000000..ac979590a --- /dev/null +++ b/src/varianttur/guildford23/tips/index.tsx @@ -0,0 +1,9 @@ +import style from './tips.module.css'; + +export default function Tips() { + return ( +
+

Lørdagstips

+
+ ); +}; \ No newline at end of file diff --git a/src/varianttur/guildford23/tips/tips.module.css b/src/varianttur/guildford23/tips/tips.module.css new file mode 100644 index 000000000..7a3abefd9 --- /dev/null +++ b/src/varianttur/guildford23/tips/tips.module.css @@ -0,0 +1,4 @@ +.container { + background-color: var(--color-primary__shade1); + color: var(--color-standard__white); +}