mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Added NFT card email styles
- added email styles for NFT cards - fixed buttons having capitalized text
This commit is contained in:
parent
661bde3892
commit
a68854c3bd
2 changed files with 60 additions and 3 deletions
|
@ -517,10 +517,12 @@ figure blockquote p {
|
|||
display: block;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.kg-video-preview table {
|
||||
background-size: cover;
|
||||
min-height: 200px; /* for when images aren't loaded */
|
||||
}
|
||||
|
||||
.kg-video-play-button {
|
||||
height: 2em;
|
||||
width: 3em;
|
||||
|
@ -530,6 +532,7 @@ figure blockquote p {
|
|||
font-size: 1em; /* change this to resize */
|
||||
background-color: rgba(0,0,0,0.85);
|
||||
}
|
||||
|
||||
.kg-video-play-button div {
|
||||
display: block;
|
||||
width: 0;
|
||||
|
@ -541,6 +544,61 @@ figure blockquote p {
|
|||
border-width: 0.8em 0 0.8em 1.5em;
|
||||
}
|
||||
|
||||
a.kg-nft-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #15212A;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #e5eff5;
|
||||
width: 100%;
|
||||
max-width: 512px;
|
||||
color: #222;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.kg-nft-metadata {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.kg-nft-image {
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.kg-nft-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.kg-nft-title {
|
||||
font-family: inherit;
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.kg-nft-creator {
|
||||
font-family: inherit;
|
||||
margin: 4px 0 0;
|
||||
color: #ababab;
|
||||
}
|
||||
|
||||
.kg-nft-creator-name {
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.kg-nft-description {
|
||||
font-family: inherit;
|
||||
line-height: 1.4em;
|
||||
margin: 12px 0 0;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* -------------------------------------
|
||||
HEADER, FOOTER, MAIN
|
||||
|
@ -614,7 +672,6 @@ figure blockquote p {
|
|||
margin: 0;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.btn-primary table td {
|
||||
|
|
|
@ -48,13 +48,13 @@ class NFTOEmbedProvider {
|
|||
provider_url: 'https://opensea.io',
|
||||
html: `
|
||||
<a href="${result.body.permalink}" class="kg-nft-card">
|
||||
<img src="${result.body.image_url}">
|
||||
<img class="kg-nft-image" src="${result.body.image_url}">
|
||||
<div class="kg-nft-metadata">
|
||||
<div class="kg-nft-header">
|
||||
<h4 class="kg-nft-title"> ${result.body.name} </h4>
|
||||
</div>
|
||||
<div class="kg-nft-creator">
|
||||
Created by <span>${result.body.creator.user.username}</span>
|
||||
Created by <span class="kg-nft-creator-name">${result.body.creator.user.username}</span>
|
||||
${(result.body.collection.name ? `• ${result.body.collection.name}` : ``)}
|
||||
</div>
|
||||
${(result.body.description ? `<p class="kg-nft-description">${result.body.description}</p>` : ``)}
|
||||
|
|
Loading…
Add table
Reference in a new issue