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:
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
|
@ -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…
Reference in a new issue