Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added NFT card email styles

Browse source 
- added email styles for NFT cards
- fixed buttons having capitalized text
This commit is contained in:
Peter Zimon 2021-11-12 16:39:35 +01:00
parent 661bde3892
commit a68854c3bd
2 changed files with 60 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
core/server/services/mega/template.js
View file

@ -517,10 +517,12 @@ figure blockquote p {
display: block; display: block;
text-decoration: none !important; text-decoration: none !important;
} }
.kg-video-preview table { .kg-video-preview table {
background-size: cover; background-size: cover;
min-height: 200px; /* for when images aren't loaded */ min-height: 200px; /* for when images aren't loaded */
} }
.kg-video-play-button { .kg-video-play-button {
height: 2em; height: 2em;
width: 3em; width: 3em;
@ -530,6 +532,7 @@ figure blockquote p {
font-size: 1em; /* change this to resize */ font-size: 1em; /* change this to resize */
background-color: rgba(0,0,0,0.85); background-color: rgba(0,0,0,0.85);
} }
.kg-video-play-button div { .kg-video-play-button div {
display: block; display: block;
width: 0; width: 0;
@ -541,6 +544,61 @@ figure blockquote p {
border-width: 0.8em 0 0.8em 1.5em; 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 HEADER, FOOTER, MAIN
@ -614,7 +672,6 @@ figure blockquote p {
margin: 0; margin: 0;
padding: 12px 25px; padding: 12px 25px;
text-decoration: none; text-decoration: none;
text-transform: capitalize;
} }
.btn-primary table td { .btn-primary table td {

4
core/server/services/nft-oembed.js
View file

@ -48,13 +48,13 @@ class NFTOEmbedProvider {
provider_url: 'https://opensea.io', provider_url: 'https://opensea.io',
html: ` html: `
<a href="${result.body.permalink}" class="kg-nft-card"> <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-metadata">
<div class="kg-nft-header"> <div class="kg-nft-header">
<h4 class="kg-nft-title"> ${result.body.name} </h4> <h4 class="kg-nft-title"> ${result.body.name} </h4>
</div> </div>
<div class="kg-nft-creator"> <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 ? `&bull; ${result.body.collection.name}` : ``)} ${(result.body.collection.name ? `&bull; ${result.body.collection.name}` : ``)}
</div> </div>
${(result.body.description ? `<p class="kg-nft-description">${result.body.description}</p>` : ``)} ${(result.body.description ? `<p class="kg-nft-description">${result.body.description}</p>` : ``)}