Last active
July 1, 2021 00:55
-
-
Save TMRWstudio/7ce54b00e3755a16ee971f94fd279ba1 to your computer and use it in GitHub Desktop.
Ghost bookmark card style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Added styling for figure class */ | |
figure.kg-bookmark-card { | |
border: 1px solid #292929; | |
margin-bottom: 20px; | |
margin-top: 20px; | |
margin-right: 0; | |
margin-left: 0; | |
} | |
.kg-bookmark-container { | |
display: flex; | |
flex-wrap: wrap; | |
color: black; | |
text-decoration: none; | |
/* Automatically has a bottom border so I forced it out of there */ | |
border: none !important; | |
} | |
.kg-bookmark-content { | |
flex-basis: 0; | |
flex-grow: 999; | |
min-width: 50%; | |
padding: 0px; | |
color: #fff; | |
padding: 20px 0 0 20px; | |
} | |
.kg-bookmark-title { | |
font-weight: 500; | |
overflow-x: hidden; | |
/* Little bit of a hack to tidy up the title an not display some text. only works for specific text, so may not be the best solution for you */ | |
text-indent: -16ch; | |
padding-right: 14px; | |
font-size: 18px; | |
margin-bottom: 10px !important; | |
} | |
.kg-bookmark-description { | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
max-width: 18ch; | |
color: #757575; | |
font-weight: 500; | |
font-size: 16px; | |
} | |
.kg-bookmark-metadata { | |
margin-top: 12px; | |
color: #ff466e; | |
font-weight: 500; | |
font-size: 16px; | |
margin-bottom: 20px; | |
} | |
.kg-bookmark-thumbnail { | |
flex-basis: 15rem; | |
flex-grow: 1; | |
} | |
.kg-bookmark-thumbnail img { | |
vertical-align: bottom; | |
object-fit: cover; | |
width: 100%; | |
} | |
/* Added max-width to icon to make it behave on iPhone */ | |
.kg-bookmark-icon { | |
max-width: 20px; | |
height: 20px; | |
margin-right: 8px; | |
padding-bottom: 2px; | |
vertical-align: bottom; | |
} | |
.kg-bookmark-author:after { | |
content: "•"; | |
margin: 0 6px; | |
} | |
/* Some added styling for iPhone portrait */ | |
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { | |
figure.kg-bookmark-card { | |
border: 1px solid #292929; | |
margin-bottom: 20px; | |
margin-top: 60px; | |
margin-right: 0; | |
margin-left: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment