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:
parent
2aaf12a905
commit
deabfa8d93
@ -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 {
|
||||
|
@ -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"
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user