event and blog design progress

src/components/PostList.js

@@ -31,9 +31,6 @@ export default class IndexPage extends React.Component {
                       __html: post.excerpt.replace(/<p class="link-more.*/, ''),
                     }}
                   />
-                  <Link className="read-more" to={post.fields.link}>
-                    &rarr;
-                  </Link>
                 </div>
               </div>
             </div>

src/css/base.scss

@@ -5,7 +5,7 @@
 }
 
 html {
-	font-size: calc(14px + 6 * ((100vw - 320px) / 1200));
+	font-size: calc(13px + 6 * ((100vw - 320px) / 1200));
   height: 100%;
   background: $color-background;
 }

src/css/blog.scss

@@ -25,7 +25,11 @@
   }
 
   &-text {
-    padding: 0.4rem 1rem 1rem;
+    padding: 0.4rem 1rem 1.4rem;
+
+    p {
+      margin-bottom: 0;
+    }
   }
 
   &-title {
@@ -67,26 +71,6 @@
   }
 }
 
-.read-more {
-  display: inline-block;
-  position: absolute;
-  bottom: 1rem;
-  right: 1rem;
-
-  /*padding: 0.4rem;
-  border-radius: 50%;
-  line-height: 1;
-  background: $color-orange;*/
-  color: $color-black;
-  text-decoration: none;
-  font-weight: bold;
-
-  /*&:hover {
-    background: $color-yellow;
-    color: $color-black;
-  }*/
-}
-
 .pagination {
   text-align: center;
   background: $color-black;

src/css/events.scss

@@ -10,25 +10,62 @@
 
 .event {
   width: $width-xs;
-  margin: 0 1rem 1.3rem 0;
+  margin: 0 2.4rem 1.2rem 0;
   position: relative;
+
+  padding-bottom: 1.6rem;
+  border-bottom: 1px solid $color-white;
   
   &-title {
     display: block;
     text-decoration: none;
     color: inherit;
-    font-size: 1.6rem;
+    font-size: 1.3rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 0.4rem;
   }
 
   &-meta {
-    font-size: $font-sm;
+    font-size: $font-s;
   }
 }
 
 .event-page {
   background: $color-black;
   color: $color-white;
+  padding-top: 0;
+}
+
+.event-hero {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+  
+  &_text, &_image {
+    width: 50%;
+  }
+
+
+  @media (max-width: $media-m) {
+    &_text, &_image {
+      width: 100%;
+    }
+  }
+
+  &_image {
+    height: 100%;
+  }
+
+  &_text {
+    padding: 4rem 0 2rem;
+  }
+
+  h1 {
+    font-size: 3.6rem;
+  }
+
+  .venue {
+    margin-bottom: 1rem;
+  }
 }

src/css/header.scss

@@ -22,12 +22,15 @@
     text-decoration: none;
     display: inline-block;
     margin-right: 1.6rem;
+    &:last-child {
+      margin-right: 0;
+    }
 
     color: $color-white;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    font-size: $font-sm;
+    font-size: $font-s;
 
     &:hover {
       color: $color-orange;

src/css/variables.scss

@@ -1,4 +1,4 @@
-$font-sm: 0.8rem;
+$font-s: 0.8rem;
 
 /* DNS PALETTE 2019 */
 
@@ -20,4 +20,5 @@ $width-s: 32rem;
 $width-m: 42rem;
 $width-l: 54rem;
 
-$media-s: 700px;
+$media-s: 700px;
+$media-m: 900px;

src/templates/event.js

@@ -30,37 +30,41 @@ export const EventTemplate = ({
 }) => {
   return (
     <section className="event-page">
-        <h1 className="section-title">
-            {title}
-        </h1>
-        <div className="featured-image">
+      <div className="event-hero">
+        <div className="event-hero_text">
+          <h1>
+              {title}
+          </h1>
+          <div className="venue">
+            i {venue}
+          </div>
+          <div className="start-time">
+            Start: {startTime}
+          </div>
+          {endTime &&
+            <div className="end-time">
+              Slutt: {endTime}
+            </div>
+          }
+          <div className="price">
+              Pris: {formatPrices(priceRegular, priceStudent)}
+          </div>
+          {ticketUrl &&
+            <div className="tickets">
+              Kjøp billett: {ticketUrl}
+            </div>
+          }
+          {facebookUrl &&
+            <a className="facebook-url" href={facebookUrl}>Se Facebook-event</a>
+          }
+        </div>
+        <div className="event-hero_image">
           <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
         </div>
-        <div className="start-time">
-            Start: {startTime}
-        </div>
-        {endTime &&
-          <div className="end-time">
-            Slutt: {endTime}
-          </div>
-        }
-        <div className="venue">
-            Lokale: {venue}
-        </div>
-        {facebookUrl &&
-          <div className="facebook-url">
-            Facebook: {facebookUrl}
-          </div>
-        }
-        <div className="price">
-            Pris: {formatPrices(priceRegular, priceStudent)}
-        </div>
-        {ticketUrl &&
-          <div className="tickets">
-            Kjøp billett: {ticketUrl}
-          </div>
-        }
+      </div>
+      <div className="event-body">
         <div dangerouslySetInnerHTML={{ __html: content }} />
+      </div>
     </section>
   )
 }