✨ Added bookmark card CSS (#607)

refs 9bfd340885 and c2aa62083c

Adds css for styling new bookmark card which generates following html -
  ```html
  <figure class="kg-card kg-bookmark-card">
    <a href="[URL]" class="kg-bookmark-container">
      <div class="kg-bookmark-content">
        <div class="kg-bookmark-title">[TITLE]</div>
        <div class="kg-bookmark-description">[DESCRIPTION]</div>
        <div class="kg-bookmark-metadata">
          <img src="[ICON]" class="kg-bookmark-icon">
          <span class="kg-bookmark-author">[AUTHOR]</span>
          <span class="kg-bookmark-publisher">[PUBLISHER]</span>
        </div>
      </div>
      <div class="kg-bookmark-thumbnail">
        <img src="[THUMBNAIL]">
      </div>
    </a>
  </figure>
  ```

assets/css/screen.css

@@ -1949,6 +1949,115 @@ Usage (In Ghost editor):
     margin: 0;
 }
 
+.kg-bookmark-card {
+    background: var(--white);
+    width: 100%;
+}
+
+.kg-card + .kg-bookmark-card {
+    margin-top: 0;
+}
+
+.post-full-content .kg-bookmark-container {
+    display: flex;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    color: var(--darkgrey);
+    text-decoration: none;
+    min-height: 148px;
+    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09);
+    border-radius: 3px;
+}
+
+.kg-bookmark-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: flex-start;
+    justify-content: start;
+    padding: 20px;
+}
+
+.kg-bookmark-title {
+    font-size: 1.6rem;
+    line-height: 1.5em;
+    font-weight: 600;
+    color: color(var(--midgrey) l(-30%));
+}
+
+.post-full-content .kg-bookmark-container:hover .kg-bookmark-title {
+    color: var(--blue);
+}
+
+.kg-bookmark-description {
+    display: -webkit-box;
+    font-size: 1.5rem;
+    line-height: 1.5em;
+    color: color(var(--midgrey) l(-10%));
+    font-weight: 400;
+    margin-top: 12px;
+    max-height: 48px;
+    overflow-y: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.kg-bookmark-thumbnail {
+    position: relative;
+    min-width: 33%;
+    max-height: 100%;
+}
+
+.kg-bookmark-thumbnail img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0 3px 3px 0;
+}
+
+.kg-bookmark-metadata {
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: color(var(--midgrey) l(-10%));
+    margin-top: 14px;
+    flex-wrap: wrap;
+}
+
+.post-full-content .kg-bookmark-icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 8px;
+}
+
+.kg-bookmark-author:after {
+    content: "•";
+    margin: 0 6px;
+}
+
+@media (max-width: 500px) {
+    .post-full-content .kg-bookmark-container {
+        flex-direction: column;
+    }
+
+    .kg-bookmark-thumbnail {
+        order: 1;
+        width: 100%;
+        min-height: 160px;
+    }
+
+    .kg-bookmark-thumbnail img {
+        border-radius: 3px 3px 0 0;
+    }
+
+    .kg-bookmark-content {
+        order: 2
+    }
+}
+
 /* 8. Author Template
 /* ---------------------------------------------------------- */
 
@@ -2290,4 +2399,4 @@ Usage (In Ghost editor):
     .site-footer-nav a:first-child {
         margin-left: 0;
     }
-}
+}