Compare commits

...

4 Commits

Author SHA1 Message Date
8729af090f 2.11.1 2019-08-27 19:44:35 +01:00
c40627256a Added max length for bookmark card publisher field (#608)
no issue

- fixed style for bookmark cards with too long publisher field
2019-08-27 19:29:48 +01:00
32d3538f6b 2.11.0 2019-08-27 21:01:30 +05:30
f5b2a2f209 Added bookmark card CSS (#607)
refs 9bfd340885 and c2aa62083c

Adds css for styling new bookmark card which generates following html -
  ```html
  <figure class="kg-card kg-bookmark-card">
    <a href="[URL]" class="kg-bookmark-container">
      <div class="kg-bookmark-content">
        <div class="kg-bookmark-title">[TITLE]</div>
        <div class="kg-bookmark-description">[DESCRIPTION]</div>
        <div class="kg-bookmark-metadata">
          <img src="[ICON]" class="kg-bookmark-icon">
          <span class="kg-bookmark-author">[AUTHOR]</span>
          <span class="kg-bookmark-publisher">[PUBLISHER]</span>
        </div>
      </div>
      <div class="kg-bookmark-thumbnail">
        <img src="[THUMBNAIL]">
      </div>
    </a>
  </figure>
  ```
2019-08-27 20:56:42 +05:30
4 changed files with 125 additions and 4 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1949,6 +1949,127 @@ Usage (In Ghost editor):
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
/* ---------------------------------------------------------- */
@ -2290,4 +2411,4 @@ Usage (In Ghost editor):
.site-footer-nav a:first-child {
margin-left: 0;
}
}
}

View File

@ -2,7 +2,7 @@
"name": "casper",
"description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
"demo": "https://demo.ghost.io",
"version": "2.10.7",
"version": "2.11.1",
"engines": {
"ghost": ">=2.0.0",
"ghost-api": "v2"