Merge pull request #21 from peterzimon/bookmark-card

[editorial.git] / assets / main / sass / layout / _ghost.scss

diff --git a/assets/main/sass/layout/_ghost.scss b/assets/main/sass/layout/_ghost.scss
index 28699fd75860c6c06c97e29748a2e54d92838992..8a6e1e5612195c540c65a696526b4db399245854 100644 (file)
--- a/assets/main/sass/layout/_ghost.scss
+++ b/assets/main/sass/layout/_ghost.scss
@@ -310,6 +310,120 @@
     margin: -2.25em 0 3em;
 }
 
+.kg-bookmark-card {
+    background: #fff;
+    width: 100%;
+}
+
+.kg-bookmark-container {
+    display: flex;
+    text-decoration: none;
+    min-height: 148px;
+    border: 1px solid rgba(210, 215, 217, 0.75);
+    border-radius: .375em;
+    box-sizing: border-box;
+
+    @include breakpoint('<=xsmall') {
+        flex-direction: column;
+    }
+}
+
+.kg-bookmark-container:hover {
+    border-bottom-color: rgba(210, 215, 217, 0.75);
+}
+
+.kg-bookmark-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: flex-start;
+    justify-content: start;
+    padding: 1.2rem;
+
+    @include breakpoint('<=xsmall') {
+        order: 2;
+    }
+}
+
+.kg-bookmark-title {
+    font-weight: 600;
+    line-height: 1.5em;
+    color: #3d4449;
+}
+
+.kg-bookmark-container:hover .kg-bookmark-title {
+    color: #f56a6a;
+}
+
+.kg-bookmark-description {
+    display: -webkit-box;
+    font-size: 90%;
+    font-weight: 400;
+    line-height: 1.6em;
+    color: #7f888f;
+    margin-top: 0.8rem;
+    max-height: 2.6rem;
+    overflow-y: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.kg-bookmark-thumbnail {
+    position: relative;
+    min-width: 33%;
+    max-height: 100%;
+    margin: -1px -1px -1px 0;
+
+    @include breakpoint('<=xsmall') {
+        order: 1;
+        min-height: 10.6rem;
+        margin: -1px -1px 0px -1px;
+    }
+}
+
+.kg-bookmark-thumbnail img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0 .375em .375em 0;
+
+    @include breakpoint('<=xsmall') {
+        border-radius: .375em .375em 0 0;
+    }
+}
+
+.kg-bookmark-metadata {
+    display: flex;
+    align-items: center;
+    font-size: 90%;
+    line-height: 1.6em;
+    color: #7f888f;
+    margin-top: 1rem;
+    flex-wrap: wrap;
+}
+
+.kg-bookmark-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 0.4rem;
+}
+
+.kg-bookmark-author:after {
+    content: "•";
+    margin: 0 0.4rem;
+}
+
+.kg-bookmark-publisher {
+    overflow: hidden;
+    line-height: 1.5em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 14rem;
+}
+
 // Error Pages
 // --------------------------------------------