keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-07-01 09:27:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Ghost 1.25 Koenig updates (#463)

Browse Source 
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>
```
This commit is contained in:
Kevin Ansfield
2018-07-23 12:20:46 +01:00
committed by GitHub
parent 019842155a
commit 5c6cce1519
4 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/screen.css
View File

@ -1819,6 +1819,13 @@ Usage (In Ghost editor):
/* 7.6. Koenig Styles
/* ---------------------------------------------------------- */
.post-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
/* For Ghost 1.0 */
.kg-card-markdown {
display: flex;
@ -1831,39 +1838,31 @@ Usage (In Ghost editor):
font-size: 1.25em;
line-height: 1.5em;
}
/* ^ .kg-card-markdown will be deprecated */
/* ^ .kg-card-markdown will be will disappear in Ghost 2.0 */
.post-template .kg-post > p:first-child {
.post-template .post-content > p:first-child {
font-size: 1.25em;
line-height: 1.5em;
}
.kg-post {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}
.post-full-content .kg-image {
max-width: 100%;
}
/* Preventing full-width image overlap with post image. */
.post-full-image + .post-full-content .kg-post *:first-child .kg-image {
.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
width: 100%;
}
.post-full-content .kg-image-wide {
.post-full-content .kg-width-wide .kg-image {
max-width: 1040px;
}
.post-full-content .kg-image-full {
.post-full-content .kg-width-full .kg-image {
max-width: 100vw;
}
.kg-post figcaption {
.post-content figcaption {
font-size: 80%;
line-height: 1.6em;
text-align: center;
@ -1900,7 +1899,7 @@ Usage (In Ghost editor):
@media (max-width: 1040px) {
.post-full-content .kg-image-full {
.post-full-content .kg-width-full .kg-image {
width: 100vw;
}
}