Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

NFT card frontend style refinements

Browse source
This commit is contained in:
Peter Zimon 2021-11-12 15:55:12 +01:00
parent 9768ad42c4
commit 661bde3892
2 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
core/frontend/src/cards/css/nft.css
View file

@ -5,24 +5,27 @@ a.kg-nft-card {
flex-direction: column;
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont,
'avenir next', avenir,
'helvetica neue', helvetica,
ubuntu,
roboto, noto,
'segoe ui', arial,
sans-serif;
'avenir next', avenir,
'helvetica neue', helvetica,
ubuntu,
roboto, noto,
'segoe ui', arial,
sans-serif;
font-size: 1.4rem;
font-weight: 400;
box-shadow: 0 2px 6px -2px rgb(0 0 0 / 10%), 0 0 1px rgb(0 0 0 / 40%);
width: 100%;
max-width: 740px;
max-width: 512px;
color: #222;
background: #fff;
border-radius: 5px;
transition: none;
}
a.kg-nft-card:hover {
color: #333;
opacity: 1.0;
transition: none;
}
a.kg-nft-card * {
@ -31,7 +34,7 @@ a.kg-nft-card * {
}
.kg-nft-metadata {
padding: 20px;
padding: 2.0rem;
}
.kg-nft-card img {
@ -41,13 +44,14 @@ a.kg-nft-card * {
border-radius: 5px 5px 0 0;
}
.kg-nft-title {
.kg-nft-header {
display: flex;
justify-content: space-between;
gap: 20px;
}
.kg-nft-title h4 {
.kg-nft-header h4.kg-nft-title {
font-family: inherit;
font-size: 1.9rem;
font-weight: 700;
min-width: unset;
@ -56,13 +60,14 @@ a.kg-nft-card * {
color: #222;
}
.kg-nft-title svg {
.kg-nft-header svg {
width: 100px;
height: auto;
}
.kg-nft-creator {
margin-top: 6px;
font-family: inherit;
margin: 0.8rem 0 0;
color: #ababab;
}
@ -71,7 +76,10 @@ a.kg-nft-card * {
color: #222;
}
.kg-nft-card p {
.kg-nft-card p.kg-nft-description {
font-family: inherit;
font-size: 1.4rem;
margin-top: 20px;
line-height: 1.4em;
margin: 2.0rem 0 0;
color: #222;
}

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

@ -50,14 +50,14 @@ class NFTOEmbedProvider {
<a href="${result.body.permalink}" class="kg-nft-card">
<img src="${result.body.image_url}">
<div class="kg-nft-metadata">
<div class="kg-nft-title">
<h4> ${result.body.name} </h4>
<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>
${(result.body.collection.name ? `&bull; ${result.body.collection.name}` : ``)}
</div>
${(result.body.description ? `<p>${result.body.description}</p>` : ``)}
${(result.body.description ? `<p class="kg-nft-description">${result.body.description}</p>` : ``)}
</div>
</a>
`,