diff --git a/src/components/timeline/index.tsx b/src/components/timeline/index.tsx index 0f45361..524ed40 100644 --- a/src/components/timeline/index.tsx +++ b/src/components/timeline/index.tsx @@ -12,22 +12,24 @@ import * as style from "./style.scss"; */ export const Timeline: FunctionalComponent = () => (
-

Schedule

+

Timetable

This is an indication of the schedule of the event! It is an indication, and therefore subject to change.

-
+

Saturday

Sunday

+

Saturday

{(saturday as TimelineEntry[]).map((entry) => renderEntry(entry) )}
+

Sunday

{(sunday as TimelineEntry[]).map((entry) => renderEntry(entry))}
diff --git a/src/components/timeline/style.scss b/src/components/timeline/style.scss index 0cd0281..5ffd5b3 100644 --- a/src/components/timeline/style.scss +++ b/src/components/timeline/style.scss @@ -19,6 +19,10 @@ margin: 0; text-align: center; } + + .days { + display: none; + } } .timeline .container { @@ -38,6 +42,12 @@ grid-column-end: 3; } + .mobiledays { + color: $primary-text; + font-family: "Krona-One"; + margin: 16px 8px; + } + .saturday { .timelineEntry:nth-child(1) { grid-column-start: 1; @@ -132,6 +142,10 @@ @include breakpoint(xl) { .timeline .container { flex-direction: row; + + .mobiledays { + display: none; + } } .saturday { @@ -142,6 +156,25 @@ .sunday { padding-left: 75px; } + + .timeline .days { + display: flex; + flex-direction: row; + + h3 { + width: 50%; + min-width: calc(50% - 16px); + max-width: 50%; + font-weight: 400; + font-size: 20px; + font-family: "Krona-One"; + margin: 24px 8px; + + &:nth-child(2) { + margin-left: 82px; + } + } + } } @include breakpoint(md) {