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

Applying styles for Koenig content (#455)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

89
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
/* ---------------------------------------------------------- */