Compare commits

...

22 Commits
2.2.1 ... 2.5.0

Author SHA1 Message Date
89ea6c5872 Upgrading Casper to 2.5.0 2018-08-16 13:59:03 +02:00
9d803067a4 🛠 Added .travis.yml and gscan tests (#470)
- Add gscan dependency & travis.yml file, so that we can run gscan as a test for this repo
- This check tells us whether or not the theme is valid & compatible with Ghost according to gscan
- We recommend that all themes do this!
2018-08-14 22:10:01 +01:00
0ea375643b Added required "ghost-theme" keyword
- We're going to start showing this as a warning in gscan
- The purpose is to give us a way to detect if a package is a valid Ghost theme
2018-08-13 14:29:56 +01:00
f31957bd0d Replaced {{author}} by {{primary_author}} in byline-single.hbs
refs https://github.com/TryGhost/gscan/issues/99

- single author usages will be deprecated in Ghost 2.0
- make Casper 100% compatible with Ghost 2.0
2018-08-12 15:02:03 +02:00
36841d4624 Set minimum Ghost version to 2.0 2018-08-11 20:22:43 +01:00
d41fcbbc8a Remove .kg-card-markdown styles
no issue
- `.kg-card-markdown` no longer exists in Ghost 2.x
2018-08-11 19:09:58 +01:00
5d318225f5 Upgrading Casper to 2.4.2 2018-08-08 17:08:21 +02:00
9b56779ca6 Use id attribute to query reading progress element (#467)
no issue
- using an `id` selector doesn't break if other `progress` elements are present on a page
2018-08-03 09:21:05 +01:00
1bf2cdb52a Upgrading Casper to 2.4.1 2018-07-31 11:31:35 +01:00
f67caaba5c 🐛 Fixed content overflow on mobile
closes https://github.com/TryGhost/Casper/issues/464
- setting max-width of `kg-markdown-card` wrapper that is still used by non-Koenig posts
2018-07-30 12:21:17 +01:00
25d1e368d6 Upgrading Casper to 2.4.0 2018-07-24 15:13:30 +02:00
5c6cce1519 Ghost 1.25 Koenig updates (#463)
refs https://github.com/TryGhost/Ghost/pull/9741
- Ghost 1.25 has updated the HTML output of Koenig beta posts
  - the `<div class="kg-post">` wrapper around post content has been removed
  - for image cards the `.kg-image-wide` and `.kg-image-full` classes have been changed to `.kg-width-wide` and `.kg-width-full` and applied to the `<figure>` element rather than the `<img>` element
- this will be the default for *all* posts after upgrading to Ghost 2.0

Example output of the `{{content}}` helper for Koenig beta...

Before 1.25.0 (Ghost 1.23.0-1.24.9):
```html
<div class="kg-post">
    <figure class="kg-image-card">
        <img class="kg-image kg-image-wide" src="...">
        <figcaption>example wide image</figcaption>
    </figure>
</div>
```

After 1.25.0:
```html
<figure class="kg-image-card kg-width-wide">
    <img class="kg-image" src="...">
    <figcaption>example wide image</figcaption>
</figure>
```

For reference, in Ghost 1.x a non Koenig post with nothing but an image in the markdown (`![](...)`) would generate output like this:

```html
<div class="kg-card-markdown">
    <img src="...">
</div>
```
2018-07-23 12:20:46 +01:00
019842155a Upgrading Casper to 2.3.3 2018-06-14 17:00:26 +01:00
1860a8305b Koenig embed card (#460) 2018-06-13 18:34:59 +01:00
6417b4cf2a Fix rendering bug for non-square user images 2018-06-06 19:29:22 -07:00
1c61bc5f16 Upgrading Casper to 2.3.2 2018-05-29 16:10:07 +01:00
7a7f04c716 Update built files 2018-05-29 16:09:40 +01:00
fd56128f9b Upgrading Casper to 2.3.1 2018-05-29 15:40:50 +01:00
cd3b470c18 Fix for missing default avatar and firefox footer misalignment (#458) 2018-05-29 10:38:27 +02:00
f3b44a7411 Upgrading Casper to 2.3.0 2018-05-22 20:17:56 +01:00
b83917060f Applying styles for Koenig content (#455)
refs https://github.com/TryGhost/Ghost/issues/9311
- move `.kg-card-markdown` styles and add deprecation notice
- add support for new `.kg-post` wrapper
- add support for `.kg-image` and `.kg-image-wide/full` image variants
- add support for image captions
2018-05-22 19:09:58 +01:00
4aaedf69d2 Running CSSComb 2018-05-21 17:36:08 +02:00
9 changed files with 908 additions and 89 deletions

6
.travis.yml Normal file
View File

@ -0,0 +1,6 @@
language: node_js
sudo: false
node_js:
- "8"

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -18,6 +18,7 @@ production stylesheet in assets/built/screen.css
7.3. Comments 7.3. Comments
7.4. Related Posts 7.4. Related Posts
7.5. Floating Header 7.5. Floating Header
7.6. Koenig Styles
8. Author Template 8. Author Template
9. Error Template 9. Error Template
10. Subscribe Overlay 10. Subscribe Overlay
@ -461,8 +462,11 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
padding: 0 25px 25px; padding: 0 25px 25px;
} }
.author-profile-image { .author-profile-image,
.avatar-wrapper {
display: block; display: block;
width: 100%;
height: 100%;
background: color(var(--lightgrey) l(+10%)); background: color(var(--lightgrey) l(+10%));
border-radius: 100%; border-radius: 100%;
@ -483,41 +487,61 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.author-list-item { .author-list-item {
flex-shrink: 0;
position: relative; position: relative;
flex-shrink: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.author-list-item:nth-child(1) { z-index: 10; } .author-list-item:nth-child(1) {
.author-list-item:nth-child(2) { z-index: 9; } z-index: 10;
.author-list-item:nth-child(3) { z-index: 8; } }
.author-list-item:nth-child(4) { z-index: 7; } .author-list-item:nth-child(2) {
.author-list-item:nth-child(5) { z-index: 6; } z-index: 9;
.author-list-item:nth-child(6) { z-index: 5; } }
.author-list-item:nth-child(7) { z-index: 4; } .author-list-item:nth-child(3) {
.author-list-item:nth-child(8) { z-index: 3; } z-index: 8;
.author-list-item:nth-child(9) { z-index: 2; } }
.author-list-item:nth-child(10) { z-index: 1; } .author-list-item:nth-child(4) {
z-index: 7;
}
.author-list-item:nth-child(5) {
z-index: 6;
}
.author-list-item:nth-child(6) {
z-index: 5;
}
.author-list-item:nth-child(7) {
z-index: 4;
}
.author-list-item:nth-child(8) {
z-index: 3;
}
.author-list-item:nth-child(9) {
z-index: 2;
}
.author-list-item:nth-child(10) {
z-index: 1;
}
.static-avatar { .static-avatar {
display: block; display: block;
height: 34px;
width: 34px;
border: #fff 2px solid;
margin: 0 -5px;
border-radius: 100%;
overflow: hidden; overflow: hidden;
margin: 0 -5px;
width: 34px;
height: 34px;
border: #fff 2px solid;
border-radius: 100%;
} }
.moving-avatar { .moving-avatar {
display: block; display: block;
height: 56px;
width: 56px;
border: #fff 2px solid;
margin: 0 -6px;
border-radius: 100%;
overflow: hidden; overflow: hidden;
margin: 0 -6px;
width: 56px;
height: 56px;
border: #fff 2px solid;
border-radius: 100%;
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s; transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
} }
@ -764,13 +788,6 @@ The first (most recent) post in the list is styled to be bigger than the others
display: none; display: none;
} }
.kg-card-markdown {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
.post-full-content h1, .post-full-content h1,
.post-full-content h2, .post-full-content h2,
.post-full-content h3, .post-full-content h3,
@ -796,11 +813,6 @@ The first (most recent) post in the list is styled to be bigger than the others
margin: 0; margin: 0;
} }
.post-template .kg-card-markdown > p:first-child {
font-size: 1.25em;
line-height: 1.5em;
}
.post-full-content a { .post-full-content a {
color: #000; color: #000;
box-shadow: var(--blue) 0 -1px 0 inset; box-shadow: var(--blue) 0 -1px 0 inset;
@ -865,6 +877,7 @@ Usage (In Ghost editor):
display: block; display: block;
margin-top: -3em; margin-top: -3em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
text-align: center;
} }
@ -1262,7 +1275,8 @@ Usage (In Ghost editor):
display: flex; display: flex;
} }
.author-card .author-profile-image { .author-card .author-profile-image,
.author-card .avatar-wrapper {
margin-right: 15px; margin-right: 15px;
width: 60px; width: 60px;
height: 60px; height: 60px;
@ -1353,8 +1367,8 @@ Usage (In Ghost editor):
.author-card .author-profile-image, .author-card .author-profile-image,
.author-card .avatar-wrapper { .author-card .avatar-wrapper {
margin-right: 15px;
position: relative; position: relative;
margin-right: 15px;
} }
.author-list-item .author-card { .author-list-item .author-card {
@ -1363,8 +1377,8 @@ Usage (In Ghost editor):
left: 50%; left: 50%;
z-index: 300; z-index: 300;
display: block; display: block;
width: 320px;
margin-left: -160px; margin-left: -160px;
width: 320px;
font-size: 1.4rem; font-size: 1.4rem;
letter-spacing: 0.2px; letter-spacing: 0.2px;
background: white; background: white;
@ -1382,9 +1396,9 @@ Usage (In Ghost editor):
top: 100%; top: 100%;
left: 50%; left: 50%;
display: block; display: block;
margin-left: -12px;
width: 0; width: 0;
height: 0; height: 0;
margin-left: -12px;
border-top: 12px solid #fff; border-top: 12px solid #fff;
border-right: 12px solid transparent; border-right: 12px solid transparent;
border-left: 12px solid transparent; border-left: 12px solid transparent;
@ -1802,6 +1816,81 @@ Usage (In Ghost editor):
} }
/* 7.6. Koenig Styles
/* ---------------------------------------------------------- */
.post-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
.post-template .post-content > p:first-child {
font-size: 1.25em;
line-height: 1.5em;
}
.post-full-content .kg-image {
max-width: 100%;
}
/* Preventing full-width image overlap with post image. */
.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
width: 100%;
}
.post-full-content .kg-width-wide .kg-image {
max-width: 1040px;
}
.post-full-content .kg-width-full .kg-image {
max-width: 100vw;
}
.post-content figcaption {
font-size: 80%;
line-height: 1.6em;
text-align: center;
}
.kg-image-card {
margin: 0 0 1.5em;
}
.kg-image-card figcaption {
margin: -1.0em 0 1.5em;
}
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
margin: 1.5em 0 3em;
min-width: 100%;
}
.kg-embed-card figcaption {
margin: 0.5em 0 0;
}
.kg-embed-card .fluid-width-video-wrapper {
margin: 0;
}
.kg-image-full + figcaption {
padding: 0 1.5em;
}
@media (max-width: 1040px) {
.post-full-content .kg-width-full .kg-image {
width: 100vw;
}
}
/* 8. Author Template /* 8. Author Template
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View File

@ -2,9 +2,9 @@
"name": "casper", "name": "casper",
"description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.", "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
"demo": "https://demo.ghost.io", "demo": "https://demo.ghost.io",
"version": "2.2.1", "version": "2.5.0",
"engines": { "engines": {
"ghost": ">=1.2.0" "ghost": ">=2.0.0"
}, },
"license": "MIT", "license": "MIT",
"screenshots": { "screenshots": {
@ -12,8 +12,9 @@
"mobile": "assets/screenshot-mobile.jpg" "mobile": "assets/screenshot-mobile.jpg"
}, },
"scripts": { "scripts": {
"dev": "gulp", "dev": "gulp",
"zip": "gulp zip" "zip": "gulp zip",
"test": "gscan ."
}, },
"author": { "author": {
"name": "Ghost Foundation", "name": "Ghost Foundation",
@ -29,7 +30,8 @@
}, },
"keywords": [ "keywords": [
"ghost", "ghost",
"theme" "theme",
"ghost-theme"
], ],
"repository": { "repository": {
"type": "git", "type": "git",
@ -40,6 +42,7 @@
"devDependencies": { "devDependencies": {
"autoprefixer": "6.3.6", "autoprefixer": "6.3.6",
"cssnano": "3.7.1", "cssnano": "3.7.1",
"gscan": "^2.0.0",
"gulp": "3.9.1", "gulp": "3.9.1",
"gulp-livereload": "3.8.1", "gulp-livereload": "3.8.1",
"gulp-postcss": "6.1.1", "gulp-postcss": "6.1.1",

View File

@ -1,5 +1,5 @@
{{!-- Everything inside the #author tags pulls data from the author --}} {{!-- Everything inside the #author tags pulls data from the author --}}
{{#author}} {{#primary_author}}
<section class="author-card"> <section class="author-card">
{{#if profile_image}} {{#if profile_image}}
@ -20,4 +20,4 @@
<a class="author-card-button" href="{{url}}">Read More</a> <a class="author-card-button" href="{{url}}">Read More</a>
</div> </div>
{{/author}} {{/primary_author}}

View File

@ -20,7 +20,7 @@
{{> "icons/facebook"}} {{> "icons/facebook"}}
</a> </a>
</div> </div>
<progress class="progress" value="0"> <progress id="reading-progress" class="progress" value="0">
<div class="progress-container"> <div class="progress-container">
<span class="progress-bar"></span> <span class="progress-bar"></span>
</div> </div>

View File

@ -33,7 +33,9 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
<section class="post-full-content"> <section class="post-full-content">
{{content}} <div class="post-content">
{{content}}
</div>
</section> </section>
{{!-- Email subscribe form at the bottom of the page --}} {{!-- Email subscribe form at the bottom of the page --}}
@ -141,7 +143,7 @@ $(document).ready(function () {
$postContent.fitVids(); $postContent.fitVids();
// End fitVids // End fitVids
var progressBar = document.querySelector('progress'); var progressBar = document.querySelector('#reading-progress');
var header = document.querySelector('.floating-header'); var header = document.querySelector('.floating-header');
var title = document.querySelector('.post-full-title'); var title = document.querySelector('.post-full-title');

797
yarn.lock

File diff suppressed because it is too large Load Diff