working on single and events

sass/base.scss

@@ -89,6 +89,10 @@ $only-mobile: only screen and
     max-width: 768px
   );
 
+$tablet: only screen and
+  (
+    min-width: 512px
+  );
 $smalldesktop: only screen and
   (
     min-width: 769px
@@ -236,7 +240,7 @@ $v-unit-6: 24rem;
     @if $offset==0 {
       width: calc(100% - #{$radius});
     } @else {
-      width: calc(100% - #{$radius} + #{$offset});
+      width: calc(100% - #{$radius} + (#{$offset}));
     }
 
     border-top: $bordercolor 1px solid;
@@ -244,11 +248,11 @@ $v-unit-6: 24rem;
 
     @if $side==left {
       left: calc(#{$radius});
-      margin-left: -#{$offset};
+      margin-left: calc((#{$offset}) * -1);
     }
     @if $side==right {
       right: calc(#{$radius});
-      margin-right: -#{$offset};
+      margin-right: calc((#{$offset}) * -1);
     }
   }
   &::before {
@@ -263,14 +267,14 @@ $v-unit-6: 24rem;
     z-index: 9;
 
     @if $side==left {
-      left: -#{$offset};
+      left: calc((#{$offset}) * -1);
       border-left: $bordercolor solid 1px;
       @include transform(skewX(-45deg));
       transform-origin: left bottom;
       border-top: $bordercolor solid 1px;
     }
     @if $side==right {
-      right: -#{$offset};
+      right: calc((#{$offset}) * -1);
       border-right: $bordercolor solid 1px;
       @include transform(skewX(45deg));
       transform-origin: right bottom;
@@ -316,6 +320,7 @@ $v-unit-6: 24rem;
       display: flex;
       flex-direction: row;
       align-items: center;
+      line-height: 0;
       @media #{$smalldesktop} {
         width: $h-unit-2;
         position: fixed;
@@ -1277,7 +1282,8 @@ body.category.category-esemeny {
   main {
     padding-top: 5rem + (2rem * 2);
     article {
-      height: 50vh;
+      height: 85vw;
+      max-height: calc(50vw + 180px);
       .thumbnailwrapper {
         height: 50vw;
         img {
@@ -1289,7 +1295,11 @@ body.category.category-esemeny {
       .event-metadata {
         display: flex;
         flex-direction: column;
+        justify-content: space-between;
+        align-content: stretch;
         padding: 2rem;
+        height: 35vw;
+        max-height: 180px;
 
         .top-row,
         .bottom-row {
@@ -1298,14 +1308,41 @@ body.category.category-esemeny {
           justify-content: space-between;
           height: 50%;
           flex: 0 0 auto;
-          // & > * {
-          // }
-          // .ev-date {
-          // }
-          h2 {
-            height: unset;
+        }
+
+        .top-row {
+          align-items: center;
+          .ev-date {
+            @include event-date();
+          }
+          a {
+            @include transform(rotate(225deg));
+            font-size: 2.8rem;
           }
         }
+
+        .bottom-row {
+          align-items: flex-end;
+
+          h2 {
+            flex: 1 0.9 auto;
+            height: unset;
+            padding: 0;
+            @include event-title;
+          }
+          .vr {
+            flex: 0 0 auto;
+            width: 1px;
+            height: 100%;
+            background-color: #000;
+          }
+          a.text-link {
+            flex: 1 1 auto;
+            @include event-link;
+            text-align: right;
+          }
+        }
+
         .hr {
           flex: 0 0 auto;
           height: 1px;
@@ -1471,7 +1508,7 @@ body.category.category-esemeny {
           padding-left: 0;
           padding-right: 0;
 
-          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
+          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
 
           .metaWrapper {
             @include singlDesktopLayout();
@@ -1722,7 +1759,7 @@ body.category.category-esemeny {
   #colorbox {
     z-index: 12;
     @media #{$smalldesktop} {
-    z-index: 3150;
+      z-index: 3150;
     }
     &:focus {
       border: none;