diff --git a/core/test/utils/fixtures/themes/test-theme/assets/css/screen.css b/core/test/utils/fixtures/themes/test-theme/assets/css/screen.css index 3fb241e4ab..8b4d255eb2 100644 --- a/core/test/utils/fixtures/themes/test-theme/assets/css/screen.css +++ b/core/test/utils/fixtures/themes/test-theme/assets/css/screen.css @@ -142,8 +142,8 @@ body { background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0)); } -.site-header.no-cover:before, -.site-header.no-cover:after { +.site-header.no-image:before, +.site-header.no-image:after { display: none; } @@ -411,10 +411,10 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o } .post-card-image { - width: auto; + width: 100%; height: 200px; background: var(--lightgrey) no-repeat center center; - background-size: cover; + object-fit: cover; } .post-card-content-link { @@ -595,46 +595,48 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o /* Special Styling for home page grid (below): -The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices. +The first post in the list is styled to be bigger than the others and take over +the full width of the grid to give it more emphasis. Wrapped in a media query to +make sure this only happens on large viewports / desktop-ish devices. */ @media (min-width: 795px) { - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) { + .post-card-large { flex: 1 1 100%; flex-direction: row; } - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link { + .post-card-large .post-card-image-link { position: relative; flex: 1 1 auto; border-radius: 5px 0 0 5px; } - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image { + .post-card-large .post-card-image { position: absolute; width: 100%; height: 100%; } - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content { + .post-card-large .post-card-content { flex: 0 1 357px; } - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2 { + .post-card-large h2 { font-size: 2.6rem; } - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p { + .post-card-large p { font-size: 1.8rem; line-height: 1.55em; } - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link { + .post-card-large .post-card-content-link { padding: 30px 40px 0; } - .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta { + .post-card-large .post-card-meta { padding: 0 40px 30px; } } @@ -709,22 +711,29 @@ The first (most recent) post in the list is styled to be bigger than the others .post-full-image { margin: 0 -10vw -165px; - height: 800px; background: var(--lightgrey) center center; - background-size: cover; border-radius: 5px; + overflow: hidden; +} + +.post-full-image img { + width: 100%; + height: 800px; + object-fit: cover; } @media (max-width: 1170px) { .post-full-image { margin: 0 -4vw -100px; - height: 600px; border-radius: 0; } + .post-full-image img { + height: 600px; + } } @media (max-width: 800px) { - .post-full-image { + .post-full-image img { height: 400px; } } @@ -815,6 +824,7 @@ The first (most recent) post in the list is styled to be bigger than the others .post-full-content a { color: #000; + word-break: break-word; box-shadow: var(--blue) 0 -1px 0 inset; } @@ -842,6 +852,7 @@ The first (most recent) post in the list is styled to be bigger than the others display: block; margin: 1.5em auto; max-width: 1040px; + height: auto; } @media (max-width: 1040px) { .post-full-content img, @@ -881,8 +892,9 @@ Usage (In Ghost editor): } +/* Override third party iframe styles */ .post-full-content iframe { - margin: 0 auto; + margin: 0 auto !important; } .post-full-content blockquote { @@ -912,6 +924,10 @@ Usage (In Ghost editor): border-radius: 3px; } +.post-full-content p code { + word-break: break-all; +} + .post-full-content pre { overflow-x: auto; margin: 1.5em 0 3em; @@ -925,6 +941,10 @@ Usage (In Ghost editor): border-radius: 5px; } +.post-full-content pre ::selection { + color: color(var(--midgrey) l(-25%)); +} + .post-full-content pre code { padding: 0; font-size: inherit; @@ -932,7 +952,7 @@ Usage (In Ghost editor): background: transparent; } -.post-full-content pre code * { +.post-full-content pre code :not(span) { color: inherit; } @@ -1848,35 +1868,30 @@ Usage (In Ghost editor): max-width: 100vw; } -.post-content figcaption { +.post-full-content figure { + margin: 1.5em 0 3em; +} + +.post-full-content figure img { + margin: 0; +} + +.post-full-content figcaption { + margin: 1.0em 0 0; font-size: 80%; line-height: 1.6em; text-align: center; } -.kg-image-card, -.kg-gallery-card { - margin: 0 0 1.5em; +.kg-width-full figcaption { + padding: 0 1.5em; } -.kg-image-card figcaption { - margin: -1.0em 0 1.5em; -} - -.kg-gallery-container {} -.kg-gallery-row {} -.kg-gallery-image {} - .kg-embed-card { display: flex; flex-direction: column; align-items: center; - margin: 1.5em 0 3em; - min-width: 100%; -} - -.kg-embed-card figcaption { - margin: 0.5em 0 0; + width: 100%; } .kg-embed-card .fluid-width-video-wrapper { @@ -1884,17 +1899,176 @@ Usage (In Ghost editor): } -.kg-image-full + figcaption { - padding: 0 1.5em; -} - - @media (max-width: 1040px) { .post-full-content .kg-width-full .kg-image { width: 100vw; } } +.kg-gallery-container { + display: flex; + flex-direction: column; + max-width: 1040px; + width: 100vw; +} + +.kg-gallery-row { + display: flex; + flex-direction: row; + justify-content: center; +} + +.kg-gallery-image img { + display: block; + margin: 0; + width: 100%; + height: 100%; +} + +.kg-gallery-row:not(:first-of-type) { + margin: 0.75em 0 0 0; +} + +.kg-gallery-image:not(:first-of-type) { + margin: 0 0 0 0.75em; +} + +.kg-gallery-card + .kg-image-card.kg-width-wide, +.kg-gallery-card + .kg-gallery-card, +.kg-image-card.kg-width-wide + .kg-gallery-card, +.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide { + margin: -2.25em 0 3em; +} + +/* keep existing
styles for code cards with captions */ +.kg-code-card { + min-width: 100%; +} + +.kg-code-card pre { + margin: 0; +} + +.kg-bookmark-card { + background: var(--white); + width: 100%; +} + +.kg-card + .kg-bookmark-card { + margin-top: 0; +} + +.post-full-content .kg-bookmark-container { + display: flex; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + color: var(--darkgrey); + text-decoration: none; + min-height: 148px; + box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.09); + border-radius: 3px; +} + +.kg-bookmark-content { + display: flex; + flex-direction: column; + flex-grow: 1; + align-items: flex-start; + justify-content: start; + padding: 20px; +} + +.kg-bookmark-title { + font-size: 1.6rem; + line-height: 1.5em; + font-weight: 600; + color: color(var(--midgrey) l(-30%)); +} + +.post-full-content .kg-bookmark-container:hover .kg-bookmark-title { + color: var(--blue); +} + +.kg-bookmark-description { + display: -webkit-box; + font-size: 1.5rem; + line-height: 1.5em; + color: color(var(--midgrey) l(-10%)); + font-weight: 400; + margin-top: 12px; + max-height: 48px; + overflow-y: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.kg-bookmark-thumbnail { + position: relative; + min-width: 33%; + max-height: 100%; +} + +.kg-bookmark-thumbnail img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0 3px 3px 0; +} + +.kg-bookmark-metadata { + display: flex; + align-items: center; + font-size: 1.5rem; + font-weight: 400; + color: color(var(--midgrey) l(-10%)); + margin-top: 14px; + flex-wrap: wrap; +} + +.post-full-content .kg-bookmark-icon { + width: 22px; + height: 22px; + margin-right: 8px; +} + +.kg-bookmark-author { + line-height: 1.5em; +} + +.kg-bookmark-author:after { + content: "•"; + margin: 0 6px; +} + +.kg-bookmark-publisher { + overflow: hidden; + line-height: 1.5em; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 240px; +} + +@media (max-width: 500px) { + .post-full-content .kg-bookmark-container { + flex-direction: column; + } + + .kg-bookmark-thumbnail { + order: 1; + width: 100%; + min-height: 160px; + } + + .kg-bookmark-thumbnail img { + border-radius: 3px 3px 0 0; + } + + .kg-bookmark-content { + order: 2 + } +} /* 8. Author Template /* ---------------------------------------------------------- */ diff --git a/core/test/utils/fixtures/themes/valid.zip b/core/test/utils/fixtures/themes/valid.zip index 4cd9e644d7..5f023a7813 100644 Binary files a/core/test/utils/fixtures/themes/valid.zip and b/core/test/utils/fixtures/themes/valid.zip differ diff --git a/core/test/utils/fixtures/themes/warnings.zip b/core/test/utils/fixtures/themes/warnings.zip index 048610694b..8d2a334873 100644 Binary files a/core/test/utils/fixtures/themes/warnings.zip and b/core/test/utils/fixtures/themes/warnings.zip differ