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.
This commit is contained in:
Bea 2020-11-09 19:35:10 +01:00
parent 2aaf12a905
commit deabfa8d93
2 changed files with 19 additions and 8 deletions

View File

@ -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: 1px solid rgb(80, 80, 80);
border-radius: 5px; border-radius: 5px;
transition: .3s; transition: .3s;
max-height: 170px;
} }
.kg-bookmark-container:hover { .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 { .kg-bookmark-content {
display: flex; display: flex;
flex-grow: 1;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
word-break: break-word;
padding: 20px 20px 0; padding: 20px 20px 0;
color: white; 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 { .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; max-height: 48px;
font-size: 14px; font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.kg-bookmark-metadata { .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 { .kg-bookmark-thumbnail {
border-radius: 0 5px 5px 0;
min-width: 33%;
box-sizing: border-box; box-sizing: border-box;
font-size: 0; font-size: 0;
width: 50%;
max-height: 100%; max-height: 100%;
max-width: 30%;
} }
.kg-bookmark-thumbnail img { .kg-bookmark-thumbnail img {

View File

@ -1,7 +1,7 @@
{ {
"name": "mindtheme", "name": "mindtheme",
"description": "Mind Overflow's official website style", "description": "Mind Overflow's official website style",
"version": "0.0.9", "version": "0.0.10",
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },