diff --git a/ghost/admin/app/styles/layouts/whats-new.css b/ghost/admin/app/styles/layouts/whats-new.css index 3604660c11..73618c4c31 100644 --- a/ghost/admin/app/styles/layouts/whats-new.css +++ b/ghost/admin/app/styles/layouts/whats-new.css @@ -71,7 +71,105 @@ padding: 0; } -.gh-wn-footer { + +/* Bookmark card details */ +.gh-wn-entry .kg-bookmark-card { + margin-bottom: 20px; +} + +.gh-wn-entry .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; +} + +.gh-wn-entry .kg-bookmark-content { + display: flex; + flex-direction: column; + flex-grow: 1; + align-items: flex-start; + justify-content: start; + padding: 16px; +} + +.gh-wn-entry .kg-bookmark-title { + font-size: 1.3rem; + line-height: 1.5em; + font-weight: 600; + color: color(var(--midgrey) l(-30%)); +} + +.gh-wn-entry .kg-bookmark-container:hover .kg-bookmark-title { + color: var(--blue); +} + +.gh-wn-entry .kg-bookmark-description { + display: -webkit-box; + font-size: 1.25rem; + 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; +} + +.gh-wn-entry .kg-bookmark-thumbnail { + position: relative; + min-width: 40%; + max-height: 100%; +} + +.gh-wn-entry .kg-bookmark-thumbnail img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0 3px 3px 0; +} + +.gh-wn-entry .kg-bookmark-metadata { + display: flex; + align-items: center; + font-size: 1.25rem; + font-weight: 400; + color: color(var(--midgrey) l(-10%)); + margin-top: 14px; + flex-wrap: wrap; +} + +.gh-wn-entry .kg-bookmark-icon { + width: 18px; + height: 18px; + margin-right: 8px; +} + +.gh-wn-entry .kg-bookmark-author { + line-height: 1.5em; +} + +.gh-wn-entry .kg-bookmark-author:after { + content: "•"; + margin: 0 6px; +} + +.gh-wn-entry .kg-bookmark-publisher { + overflow: hidden; + line-height: 1.5em; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 160px; +} + +.gh-wn-entry .gh-wn-footer { margin: 0 -32px -32px; padding: 14px 32px 16px; border-top: 1px solid var(--whitegrey);