diff --git a/src/components/EventList.js b/src/components/EventList.js index def10eb..e2130d3 100644 --- a/src/components/EventList.js +++ b/src/components/EventList.js @@ -30,11 +30,9 @@ export default class EventList extends React.Component { return (
{title &&

{title}

} -
- {groupBy && this.renderEventsByDate(filteredEvents, groupBy)} - {!groupBy && - filteredEvents.map(({ node: event }) => this.renderEvent(event))} -
+ {groupBy && this.renderEventsByDate(filteredEvents, groupBy)} + {!groupBy && + filteredEvents.map(({ node: event }) => this.renderEvent(event))}
) } @@ -58,9 +56,11 @@ export default class EventList extends React.Component { {groupBy === 'day' && moment(date).format('dddd D. MMMM')} {groupBy === 'month' && moment(date).format('MMMM')} - {theseEvents.map(({ node: event }) => { - return
{this.renderEvent(event)}
- })} +
+ {theseEvents.map(({ node: event }) => { + return this.renderEvent(event) + })} +
) }) diff --git a/src/css/base.scss b/src/css/base.scss index 8dbff44..c8691ec 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -12,13 +12,23 @@ html { body { min-height: 100%; - margin: 0; + margin: 3rem 0 0; padding: 0; background: $color-background; color: $color-text; border-left: 2rem solid $color-black; border-right: 2rem solid $color-black; + &:after { + content: " "; + display: block; + position: fixed; + bottom: 0; + right: 0; + left: 0; + background: $color-black; + height: 2rem; + } font-family: $sans-serif; line-height: 1.6; diff --git a/src/css/blog.scss b/src/css/blog.scss index f5fc3fc..83b2510 100644 --- a/src/css/blog.scss +++ b/src/css/blog.scss @@ -70,8 +70,13 @@ margin: 0 auto 1rem; } - ul, p { + ul, p, span { margin: 0 auto 1.6rem; + + /* overwrite styles from wordpress */ + text-align: left !important; + color: inherit !important; + font-family: inherit !important; } h1, h2, h3, h4, h5, h6 { diff --git a/src/css/events.scss b/src/css/events.scss index 3b8d283..b5866f1 100644 --- a/src/css/events.scss +++ b/src/css/events.scss @@ -3,6 +3,12 @@ color: $color-white; } +.event-group { +} +.event-grouped-by-day { + width: $width-m; +} + .event-list { display: flex; flex-wrap: wrap; @@ -45,6 +51,9 @@ .event-types li { background: $color-orange; } + .event-image { + filter: sepia(100%) hue-rotate(340deg) saturate(360%); + } } &-meta { @@ -70,8 +79,13 @@ margin: 0 auto 1rem; } - ul, p { + ul, p, span{ margin: 0 auto 1.6rem; + + /* overwrite styles from wordpress */ + text-align: left !important; + color: inherit !important; + font-family: inherit !important; } h1, h2, h3, h4, h5, h6 { @@ -127,7 +141,7 @@ align-items: flex-end; max-width: $width-l; - margin: 0 auto 4rem; + margin: 8rem auto; &_text, &_image { width: 50%; @@ -152,8 +166,8 @@ } &_text { - padding: 4rem 0 2rem 0; - z-index: 666; + padding: 1.6rem 0 2rem 0; + z-index: 8; } h1 { diff --git a/src/css/header.scss b/src/css/header.scss index 27c69cc..4fb1aae 100644 --- a/src/css/header.scss +++ b/src/css/header.scss @@ -5,6 +5,13 @@ display: flex; justify-content: center; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10; + height: 3rem; + .logo { width: 3rem; margin: 0 3rem;