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.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
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue