2.11.0

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;
     }
-}
+}

default.hbs

@@ -75,9 +75,7 @@
     </script>
     <script type="text/javascript" src="{{asset "built/jquery.fitvids.js"}}"></script>
 
-    {{#if pagination.pages}}
     <script src="{{asset "built/infinitescroll.js"}}"></script>
-    {{/if}}
 
     {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
     {{{block "scripts"}}}

gulpfile.js

@@ -31,7 +31,7 @@ const handleError = (done) => {
 
 function hbs(done) {
     pump([
-        src(['*.hbs', 'partials/**/*.hbs', '!node_modules/**/*.hbs']),
+        src(['*.hbs', 'partials/**/*.hbs']),
         livereload()
     ], handleError(done));
 }
@@ -79,7 +79,7 @@ function zipper(done) {
 }
 
 const cssWatcher = () => watch('assets/css/**', css);
-const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs', '!node_modules/**/*.hbs'], hbs);
+const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
 const watcher = parallel(cssWatcher, hbsWatcher);
 const build = series(css, js);
 const dev = series(build, serve, watcher);

package.json

@@ -2,7 +2,7 @@
     "name": "casper",
     "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
     "demo": "https://demo.ghost.io",
-    "version": "2.10.6",
+    "version": "2.11.0",
     "engines": {
         "ghost": ">=2.0.0",
         "ghost-api": "v2"