Create Narrative card

src/scss/main.scss

@@ -6,6 +6,7 @@
 @import 'loading';
 @import 'header';
 @import 'cardstack';
+@import 'narrativecard';
 @import 'map';
 @import 'timeline';
 @import 'tag-filters';

src/scss/narrativecard.scss

@@ -0,0 +1,63 @@
+/*
+NARRATIVE INFO
+*/
+.narrative-info {
+  position: fixed;
+  top: 10px;
+  left: 130px;
+  height: auto;
+  width: 270px;
+  box-sizing: border-box;
+  padding: 15px;
+  max-height: calc(100% - 250px);
+  overflow: auto;
+  box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22);
+  background: $black;
+  border: 1px solid $midgrey;
+  color: $offwhite;
+  font-family: 'Merriweather', 'Georgia', serif;
+
+  h3, h6 {
+    text-align: center;
+  }
+
+  h3 {
+    font-size: $large;
+  }
+
+  p {
+    font-family: 'Lato', 'Helvetica', sans-serif;
+    font-size: $normal;
+    line-height: 1.4em;
+  }
+
+  .actions {
+    width: 100%;
+    .action {
+      width: calc(50% - 5px);
+      height: 40px;
+      box-sizing: border-box;
+      line-height: 40px;
+      font-family: 'Lato', 'Helvetica', sans-serif;
+      text-align: center;
+      display: inline-block;
+
+      &:not(.disabled) {
+        &:hover {
+          cursor: pointer;
+          transition: 0.2s ease;
+          color: $yellow;
+        }
+      }
+
+      &.disabled {
+        color: $midgrey;
+        cursor: normal;
+      }
+
+      &:first-child {
+        margin-right: 10px;
+      }
+    }
+  }
+}