WebDev/mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Fix KG Bookmark sizing and proportions

Browse Source 
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:
Lorenzo Dellacà
2020-11-09 19:35:10 +01:00
parent 2aaf12a905
commit deabfa8d93
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/screen.css
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-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 {