From 93c0ff30d6e5e0e9e37b3db87c12dbdd12b9d03e Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 18 Feb 2019 19:45:05 +0100
Subject: [PATCH] event and blog design progress

---
 src/components/PostList.js |  3 --
 src/css/base.scss          |  2 +-
 src/css/blog.scss          | 26 ++++-------------
 src/css/events.scss        | 43 +++++++++++++++++++++++++--
 src/css/header.scss        |  5 +++-
 src/css/variables.scss     |  5 ++--
 src/templates/event.js     | 60 ++++++++++++++++++++------------------
 7 files changed, 85 insertions(+), 59 deletions(-)

diff --git a/src/components/PostList.js b/src/components/PostList.js
index 65a0bb9..8d28c3c 100644
--- a/src/components/PostList.js
+++ b/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>
diff --git a/src/css/base.scss b/src/css/base.scss
index 9270691..6d32b12 100644
--- a/src/css/base.scss
+++ b/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;
 }
diff --git a/src/css/blog.scss b/src/css/blog.scss
index fd281ca..f963297 100644
--- a/src/css/blog.scss
+++ b/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;
diff --git a/src/css/events.scss b/src/css/events.scss
index 5e078bc..b3fe4f5 100644
--- a/src/css/events.scss
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/src/css/header.scss b/src/css/header.scss
index 2536d0c..c7000d5 100644
--- a/src/css/header.scss
+++ b/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;
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 53b4195..e6719e1 100644
--- a/src/css/variables.scss
+++ b/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;
\ No newline at end of file
+$media-s: 700px;
+$media-m: 900px;
\ No newline at end of file
diff --git a/src/templates/event.js b/src/templates/event.js
index b7962a0..fceab89 100644
--- a/src/templates/event.js
+++ b/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>
   )
 }