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
This commit is contained in:
Peter Zimon 2018-05-22 20:09:58 +02:00 committed by Kevin Ansfield
parent 4aaedf69d2
commit b83917060f
3 changed files with 79 additions and 14 deletions

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
@ -784,13 +785,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,
@ -816,11 +810,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;
@ -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 /* 8. Author Template
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */