Merge branch 'master' into fix/infinitescroll

.github/workflows/test.yml

@@ -1,32 +0,0 @@
-name: Test
-on:
-  pull_request:
-  push:
-    branches:
-      - master
-
-jobs:
-  build:
-    runs-on: ubuntu-18.04
-    strategy:
-      matrix:
-        node: [ '10' ]
-    name: Node ${{ matrix.node }}
-    steps:
-      - uses: actions/checkout@v1
-      - name: Cache node modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.OS }}-build-${{ env.cache-name }}-
-            ${{ runner.OS }}-build-
-            ${{ runner.OS }}-
-      - name: Setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node }}
-      - run: npm install yarn
-      - run: yarn install
-      - run: yarn test:ci

README.md

@@ -25,6 +25,7 @@ One neat trick is that you can also create custom one-off templates just by addi
 - `tag-news.hbs` - Custom template for `/tag/news/` archive
 - `author-ali.hbs` - Custom template for `/author/ali/` archive
 
+ 
 
 # Development
 
@@ -46,12 +47,15 @@ The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which
 yarn zip
 ```
 
+&nbsp;
+
 # PostCSS Features Used
 
 - Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
 - Variables - Simple pure CSS variables
 - [Color Function](https://github.com/postcss/postcss-color-function)
 
+&nbsp;
 
 # Copyright & License
 

assets/built/jquery.fitvids.js

@@ -1,2 +1,2 @@
-!function(d){"use strict";d.fn.fitVids=function(t){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("div");r.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',e.appendChild(r.childNodes[1])}return t&&d.extend(i,t),this.each(function(){var t=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];i.customSelector&&t.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var e=d(this).find(t.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var t=d(this);if(!(0<t.parents(r).length||"embed"===this.tagName.toLowerCase()&&t.parent("object").length||t.parent(".fluid-width-video-wrapper").length)){t.css("height")||t.css("width")||!isNaN(t.attr("height"))&&!isNaN(t.attr("width"))||(t.attr("height",9),t.attr("width",16));var e=("object"===this.tagName.toLowerCase()||t.attr("height")&&!isNaN(parseInt(t.attr("height"),10))?parseInt(t.attr("height"),10):t.height())/(isNaN(parseInt(t.attr("width"),10))?t.width():parseInt(t.attr("width"),10));if(!t.attr("name")){var i="fitvid"+d.fn.fitVids._count;t.attr("name",i),d.fn.fitVids._count++}t.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),t.removeAttr("height").removeAttr("width")}})})},d.fn.fitVids._count=0}(window.jQuery||window.Zepto);
+!function(o){"use strict";o.fn.fitVids=function(t){var e,i,d={customSelector:null,ignore:null};return document.getElementById("fit-vids-style")||(e=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("div")).innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',e.appendChild(i.childNodes[1])),t&&o.extend(d,t),this.each(function(){var t=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];d.customSelector&&t.push(d.customSelector);var r=".fitvidsignore";d.ignore&&(r=r+", "+d.ignore);var e=o(this).find(t.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var t,e,i=o(this);0<i.parents(r).length||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length||(i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16)),t=("object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height())/(isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10)),i.attr("name")||(e="fitvid"+o.fn.fitVids._count,i.attr("name",e),o.fn.fitVids._count++),i.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*t+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto);
 //# sourceMappingURL=jquery.fitvids.js.map

assets/css/components/buttons.css

@@ -32,10 +32,10 @@
 }
 
 .gh-button.gh-button-large {
-    height: calc(var(--height) * 1.14);
-    line-height: calc(var(--height) * 1.14);
-    padding: 0 3rem;
-    font-size: 1.6rem;
+    height: calc(var(--height) * 1.2);
+    line-height: calc(var(--height) * 1.2);
+    padding: 0 2.5rem;
+    font-size: 1.7rem;
 }
 
 .gh-button.gh-button-disabled,

assets/css/components/global.css

@@ -19,7 +19,7 @@ body {
     margin: 0;
     padding: 0;
     color: color(var(--color-base) l(+20%));
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-family: var(--font-sans-serif);
     font-size: 1.5rem;
     line-height: 1.6em;
     font-weight: 400;
@@ -65,6 +65,7 @@ button,
 select,
 textarea {
     font: inherit;
+    -webkit-appearance: none;
 }
 
 fieldset {
@@ -116,8 +117,8 @@ sub {
     bottom: -0.25em;
 }
 
-li:not([class]) + li:not([class]) {
-    margin-top: 1em;
+ul:not([class]) li + li {
+    margin-top: 0.6em;
 }
 
 a:not([class]) {

assets/css/ghost/badge.css

@@ -0,0 +1,26 @@
+.gh-powered {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 9px 6px 6px;
+    border: rgba(0,0,0,0.15) 1px solid;
+    font-size: 13px;
+    line-height: 13px;
+    letter-spacing: -0.1px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-weight: 500;
+    color: #131313 !important;
+    background: #fff;
+    border-radius: 6px;
+}
+
+.gh-powered:hover {
+    border: rgba(0,0,0,0.3) 1px solid;
+    color: #131313 !important;
+    text-decoration: none !important;
+}
+
+.gh-powered svg {
+    height: 18px;
+    width: 18px;
+    margin: 0 6px 0 0;
+}

assets/css/ghost/members.css

@@ -73,7 +73,7 @@ form[data-members-form] .message-error {
     fill: #fff;
 }
 .message-error svg {
-    fill: red;
+    fill: var(--color-error);
 }
 
 form[data-members-form].success .message-success,
@@ -98,9 +98,9 @@ form[data-members-form].success .message-success {
     background: var(--color-success);
 }
 form[data-members-form].error .message-error {
-    color: red;
+    color: var(--color-error);
     background: #fff;
-    box-shadow: red 0 0 0 1px;
+    box-shadow: var(--color-error) 0 0 0 1px;
 }
 
 form[data-members-form] .gh-button {

assets/css/screen.css

@@ -21,6 +21,8 @@ production stylesheet in assets/built/screen.css using: gulp dev
 @import "ghost/members.css";
 @import "ghost/errors.css";
 @import "ghost/footer.css";
+@import "ghost/badge.css";
+
 
 
 /* Main - Your styles here! Edit below

assets/css/vars.css

@@ -8,6 +8,8 @@
     --color-base: #131313;
     --color-border: #ddd;
     --color-bg: #f5f5f5;
+    --color-success: #80b912;
+    --color-error: #f05230;
 
     /* Fonts */
     --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

default.hbs

@@ -4,14 +4,13 @@
 
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="HandheldFriendly" content="True" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
 
     <title>{{meta_title}}</title>
 
     {{ghost_head}}
-    {{!-- Outputs SEO meta+structured data and important settings, should always be in <head> --}}
+    {{!-- Outputs important meta data and settings, should always be in <head> --}}
 
 </head>
 <body class="{{body_class}}">
@@ -73,7 +72,7 @@
 
 {{!-- <foot> --}}
 
-<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+<script src="{{asset "built/jquery-3.4.1.min.js"}}"></script>
 
 {{#if pagination.pages}}
 <script>
@@ -113,4 +112,4 @@ $(document).ready(function () {
 {{!-- Outputs important scripts - should always be included before closing body tag --}}
 
 </body>
-</html>
+</html>

gulpfile.js

@@ -12,7 +12,6 @@ var beeper = require('beeper');
 var autoprefixer = require('autoprefixer');
 var colorFunction = require('postcss-color-function');
 var cssnano = require('cssnano');
-var customProperties = require('postcss-custom-properties');
 var easyimport = require('postcss-easy-import');
 
 function serve(done) {
@@ -39,7 +38,6 @@ function hbs(done) {
 function css(done) {
     var processors = [
         easyimport,
-        customProperties({preserve: false}),
         colorFunction(),
         autoprefixer(),
         cssnano()

members/account.hbs

@@ -33,5 +33,3 @@
 
     </div>
 </div>
-
-<style>.pico-cta{display:none;}</style>

members/signin.hbs

@@ -15,7 +15,7 @@
             <h1 class="gh-auth-title">Welcome back!</h1>
             <p>Sign into your account again for full access</p>
             <div class="gh-auth-box">
-                <input class="gh-input" data-members-email type="email" placeholder="Your email address" required="true" autocomplete="false" />
+                <input aria-label="Email Address" class="gh-input" data-members-email type="email" placeholder="Your email address" required="true" autocomplete="false" autofocus />
                 <button class="gh-button gh-button-primary" type="submit">
                     <span class="gh-button-content">Sign in</span>
                     <span class="gh-button-loader">{{> "icons/loader"}}</span>
@@ -30,5 +30,3 @@
 
     </div>
 </div>
-
-<style>.pico-cta{display:none;}</style>

members/signup.hbs

@@ -56,7 +56,7 @@
             <h1 class="gh-auth-title">Signup to {{@site.title}}</h1>
             <p>{{@site.description}}</p>
             <div class="gh-auth-box">
-                <input class="gh-input" data-members-email type="email" placeholder="Type your email..." required="true" autocomplete="false" />
+                <input aria-label="Email Address" class="gh-input" data-members-email type="email" placeholder="youremail@example.com" required="true" autocomplete="false" autofocus />
                 <button class="gh-button gh-button-primary" type="submit">
                     <span class="gh-button-content">Continue</span>
                     <span class="gh-button-loader">{{> "icons/loader"}}</span>
@@ -71,5 +71,3 @@
 
     </div>
 </div>
-
-<style>.pico-cta{display:none;}</style>

package.json

@@ -44,19 +44,19 @@
     "bugs": "https://github.com/TryGhost/Starter/issues",
     "contributors": "https://github.com/TryGhost/Starter/graphs/contributors",
     "devDependencies": {
-        "autoprefixer": "9.7.3",
+        "autoprefixer": "9.8.0",
         "cssnano": "4.1.10",
-        "gscan": "2.11.0",
+        "gscan": "3.5.4",
         "gulp": "4.0.2",
-        "gulp-livereload": "4.0.1",
+        "gulp-livereload": "4.0.2",
         "gulp-postcss": "8.0.0",
         "gulp-sourcemaps": "2.6.5",
         "gulp-uglify": "3.0.2",
         "gulp-util": "3.0.8",
         "gulp-watch": "5.0.1",
-        "gulp-zip": "5.0.0",
+        "gulp-zip": "5.0.1",
         "postcss-color-function": "4.1.0",
-        "postcss-custom-properties": "9.0.2",
+        "postcss-custom-properties": "9.1.1",
         "postcss-easy-import": "3.0.0"
     },
     "browserslist": [

partials/card.hbs

@@ -2,7 +2,7 @@
 Re-usable card for linking to posts
 --}}
 
-<article class="gh-card {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
+<article class="gh-card {{post_class}}">
     <a class="gh-card-link" href="{{url}}">
         {{#if feature_image}}
             <img class="gh-card-image"
@@ -22,4 +22,4 @@ Re-usable card for linking to posts
             <strong>Read more</strong>
         </div>
     </a>
-</article>
+</article>

post.hbs

@@ -13,7 +13,16 @@
         {{/if}}
 
         {{#if feature_image}}
-            <img class="gh-feature-image" src="{{feature_image}}" alt="{{title}}" />
+        <img class="gh-feature-image"
+            srcset="{{img_url feature_image size="s"}} 300w,
+                    {{img_url feature_image size="m"}} 600w,
+                    {{img_url feature_image size="l"}} 1000w,
+                    {{img_url feature_image size="xl"}} 2000w"
+            sizes="(max-width: 1000px) 1000px, 2000px"
+            loading="lazy"
+            src="{{img_url feature_image size="xl"}}"
+            alt="{{title}}"
+        />
         {{/if}}
     </header>
 
@@ -50,4 +59,4 @@
     </div>
 </aside>
 
-{{/post}}
+{{/post}}