frame window, fix header, start styling event groups

src/components/EventList.js

@@ -30,11 +30,9 @@ export default class EventList extends React.Component {
     return (
       <section className="events">
         {title && <h1 className="section-title">{title}</h1>}
-        <div className="event-list">
-          {groupBy && this.renderEventsByDate(filteredEvents, groupBy)}
-          {!groupBy &&
-            filteredEvents.map(({ node: event }) => this.renderEvent(event))}
-        </div>
+        {groupBy && this.renderEventsByDate(filteredEvents, groupBy)}
+        {!groupBy &&
+          filteredEvents.map(({ node: event }) => this.renderEvent(event))}
       </section>
     )
   }
@@ -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')}
           </div>
-          {theseEvents.map(({ node: event }) => {
-            return <div>{this.renderEvent(event)}</div>
-          })}
+          <div className="event-list">
+            {theseEvents.map(({ node: event }) => {
+              return this.renderEvent(event)
+            })}
+          </div>
         </div>
       )
     })

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;

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 {

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 {

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;