Updated height of bookmark card description

[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 314a2175e8da665ad9f8468ec58f1e8cfe705e45..8a6e1e5612195c540c65a696526b4db399245854 100644 (file)
--- a/assets/main/sass/layout/_ghost.scss
+++ b/assets/main/sass/layout/_ghost.scss
@@ -1,27 +1,44 @@
 // Main
 // --------------------------------------------
 
-// Fix main cover image bg position
-#wrapper>.bg {
-    background-position: top center;
-    background-size: cover;
-}
-
-#intro {
-    max-width: 800px;
-    margin: 0 auto;
+#header .logo {
+    color: #3d4449;
+    font-weight: bold;
 }
 
 #header .logo.image {
     padding: 0;
     border: none;
+    display: inline-flex;
+    height: 28px;
+
+    @include breakpoint('<=small') {
+        display: flex;
+        justify-content: center;
+        text-align: center;
+    }
 }
 
 #header .logo.image img {
-    height: 75px;
+    height: 28px;
     transform: none !important;
 }
 
+@include breakpoint('<=small') {
+    #sidebar:not(.inactive) .toggle:before {
+        color: #fff;
+    }
+
+    #sidebar:not(.inactive) .toggle:after {
+        background: #f56a6a;
+    }
+}
+
+#banner {
+    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+}
+
+
 .content {
     max-width: 700px;
     margin: 0 auto;
@@ -37,24 +54,17 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-}
-
-.page-number {
-    padding: 0 20px;
-    border-color: transparent !important;
-    color: #222 !important;;
-}
-
-.spacer {
-    width: 160px;
+    padding: 3rem 0;
+    border-top: solid 2px rgba(210, 215, 217, 0.75);
 }
 
 
 // Tag Archive
 // --------------------------------------------
 
-.tag-header,
-.tag-header p {
+.tag-header {
+    padding: 5em 0 2em 0;
+    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
     text-align: center;
 }
 
@@ -66,11 +76,15 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 4em 0 3em 0;
+    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+    text-align: center;
+
 }
 
 .author-profile-image {
     flex-shrink: 0;
-    margin: 0 0 20px 0;
+    margin: 0 0 15px 0;
     width: 100px;
     height: 100px;
     box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
@@ -82,7 +96,7 @@
 }
 
 .author-header h1 {
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
 }
 
 .author-meta {
@@ -172,6 +186,11 @@
 // Content
 // --------------------------------------------
 
+// Markdown images and videos
+.content p > img, .content p > video {
+    max-width: 100%;
+}
+
 .kg-card {
     margin: 0 0 2rem 0;
 }
@@ -184,7 +203,7 @@
 }
 
 .kg-image {
-    max-width: 100%;
+    width: 100%;
 }
 
 .kg-card figcaption {
@@ -220,7 +239,7 @@
     position: relative;
     margin-left: -14.1rem;
     margin-right: -14.1rem;
-    width: calc(100% + 28.2rem);
+    width: calc(100% + 28.25rem);
 
     @include breakpoint('<=large') {
         margin-left: -8rem;
@@ -290,3 +309,141 @@
 .kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
     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
+// --------------------------------------------
+
+.error-page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.error-wrapper {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    padding-bottom: 8rem !important;
+    text-align: center;
+}
+
+.error-code {
+    margin: 0;
+}