event and blog design progress

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;