From deabfa8d939dea6dfb9c83a777d9fe58c03a32f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= <lorenzo.dellaca@mind-overflow.net>
Date: Mon, 9 Nov 2020 19:35:10 +0100
Subject: [PATCH] Fix KG Bookmark sizing and proportions

This commit fixes #4.
The kg bookmark sometimes had weird proportions, depending on the original image size and how long the text to show is. Also, the title was not clamped to 2 lines max.
---
 assets/css/screen.css | 25 ++++++++++++++++++-------
 package.json          |  2 +-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 047946a..b479f55 100755
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -864,6 +864,7 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
     border: 1px solid rgb(80, 80, 80);
     border-radius: 5px;
     transition: .3s;
+    max-height: 170px;
 }
 
 .kg-bookmark-container:hover {
@@ -873,9 +874,23 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
 
 .kg-bookmark-content {
     display: flex;
+    flex-grow: 1;
     flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    word-break: break-word;
     padding: 20px 20px 0;
     color: white;
+    box-sizing: border-box;
+}
+
+.kg-bookmark-title, .kg-bookmark-description {
+    /* Used to make the text only be max 2 lines long */
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 .kg-bookmark-title {
@@ -889,12 +904,6 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
     max-height: 48px;
     font-size: 14px;
 
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-
 }
 
 .kg-bookmark-metadata {
@@ -929,10 +938,12 @@ if an image has a description, class ".kg-card-hascaption" is applied to the con
 }
 
 .kg-bookmark-thumbnail {
+    border-radius: 0 5px 5px 0;
+    min-width: 33%;
     box-sizing: border-box;
     font-size: 0;
+    width: 50%;
     max-height: 100%;
-    max-width: 30%;
 }
 
 .kg-bookmark-thumbnail img {
diff --git a/package.json b/package.json
index 5bff7a5..4c45770 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "mindtheme",
     "description": "Mind Overflow's official website style",
-    "version": "0.0.9",
+    "version": "0.0.10",
     "engines": {
         "ghost-api": "v3"
     },