Browse Source

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
master
Peter Zimon Kevin Ansfield 2 years ago
parent
commit
b83917060f
3 changed files with 79 additions and 14 deletions
  1. +1
    -1
      assets/built/screen.css
  2. +1
    -1
      assets/built/screen.css.map
  3. +77
    -12
      assets/css/screen.css

+ 1
- 1
assets/built/screen.css
File diff suppressed because it is too large
View File


+ 1
- 1
assets/built/screen.css.map
File diff suppressed because it is too large
View File


+ 77
- 12
assets/css/screen.css View File

@@ -18,6 +18,7 @@ production stylesheet in assets/built/screen.css
7.3. Comments
7.4. Related Posts
7.5. Floating Header
7.6. Koenig Styles
8. Author Template
9. Error Template
10. Subscribe Overlay
@@ -784,13 +785,6 @@ The first (most recent) post in the list is styled to be bigger than the others
display: none;
}

.kg-card-markdown {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}

.post-full-content h1,
.post-full-content h2,
.post-full-content h3,
@@ -816,11 +810,6 @@ The first (most recent) post in the list is styled to be bigger than the others
margin: 0;
}

.post-template .kg-card-markdown > p:first-child {
font-size: 1.25em;
line-height: 1.5em;
}

.post-full-content a {
color: #000;
box-shadow: var(--blue) 0 -1px 0 inset;
@@ -1822,6 +1811,82 @@ Usage (In Ghost editor):
}


/* 7.6. Koenig Styles
/* ---------------------------------------------------------- */

/* For Ghost 1.0 */
.kg-card-markdown {
display: flex;
flex-direction: column;
align-items: center;
max-width: 920px;
}

.post-template .kg-card-markdown > p:first-child {
font-size: 1.25em;
line-height: 1.5em;
}
/* ^ .kg-card-markdown will be deprecated */


.post-template .kg-post > 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 {
width: 100%;
}

.post-full-content .kg-image-wide {
max-width: 1040px;
}

.post-full-content .kg-image-full {
max-width: 100vw;
}

.kg-image-card figcaption {
font-size: 80%;
margin: -1.5em auto 3em;
}

.post-full-content .kg-image-full + figcaption {
max-width: 840px;
}

@media (max-width: 1040px) {
.post-full-content .kg-image-full {
width: 100vw;
}
}

@media (max-width: 1170px) {
.post-full-content .kg-image-full + figcaption {
padding: 0 11vw;
max-width: 100vw;
}
}

@media (max-width: 500px) {
.post-full-content .kg-image-full + figcaption {
padding: 0 4vw;
}
}


/* 8. Author Template
/* ---------------------------------------------------------- */



Loading…
Cancel
Save