style: cozy list
This commit is contained in:
Ayo
parent
07f7cbfebe
commit
16e8f70aac
2 changed files with 56 additions and 22 deletions
|
|
@ -84,24 +84,34 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
||||||
const image = html.querySelector('meta[property="cozy:image"]')?.getAttribute('content');
|
const image = html.querySelector('meta[property="cozy:image"]')?.getAttribute('content');
|
||||||
const url = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content');
|
const url = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content');
|
||||||
const source = html.querySelector('meta[property="cozy:source"]')?.getAttribute('content');
|
const source = html.querySelector('meta[property="cozy:source"]')?.getAttribute('content');
|
||||||
|
const published = html.querySelector('meta[property="cozy:published"]')?.getAttribute('content');
|
||||||
|
|
||||||
const postCard = `
|
const postCard = `
|
||||||
<div class="post-card">
|
<div class="post-card">
|
||||||
|
<div class="post-card__image">
|
||||||
${
|
${
|
||||||
image ? `
|
image ? `
|
||||||
<div class="post-card__image">
|
|
||||||
<img src="${image}" alt="${title} | ${description}" />
|
<img src="${image}" alt="${title} | ${description}" />
|
||||||
</div>
|
|
||||||
`
|
`
|
||||||
: ''
|
: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path fill="currentColor" d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>'
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
<div class="post-card__content">
|
<div class="post-card__content">
|
||||||
|
<div class="post-card__meta">
|
||||||
${
|
${
|
||||||
source ? `
|
source ? `
|
||||||
<p class="post-card__site-name">${source}</p>
|
<p class="post-card__source">${source}</p>
|
||||||
`
|
`
|
||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
|
${
|
||||||
|
published ? `
|
||||||
|
<p class="post-card__published">${new Date(published).toLocaleDateString()}</p>
|
||||||
|
`
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
<h3 class="post-card__title">${title}</h3>
|
<h3 class="post-card__title">${title}</h3>
|
||||||
${
|
${
|
||||||
description ? `
|
description ? `
|
||||||
|
|
@ -124,16 +134,13 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
||||||
}
|
}
|
||||||
#post-list {
|
#post-list {
|
||||||
:global(li) {
|
:global(li) {
|
||||||
margin-bottom: 1rem;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
border: 1px solid #ccc;
|
|
||||||
box-shadow: 0 5px 2px #eee;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 1rem;
|
|
||||||
width: calc(100% + 40px);
|
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
|
width: calc(100% + 40px);
|
||||||
margin-left: -40px;
|
margin-left: -40px;
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
|
||||||
:global(a) {
|
:global(a) {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -146,14 +153,40 @@ const {postDivSelector, skipSave = false} = Astro.props;
|
||||||
:global(.post-card) {
|
:global(.post-card) {
|
||||||
:global(.post-card__image) {
|
:global(.post-card__image) {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 1rem;
|
margin-right: 0.5rem;
|
||||||
:global(img) {
|
margin: 0.5rem 1rem 0 0;
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
:global(img, svg) {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 5px;
|
border-radius: 50%;
|
||||||
border: 1px solid #eee;
|
border: 3px solid #eee;
|
||||||
}
|
}
|
||||||
|
:global(svg) {
|
||||||
|
color: #888;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global(.post-card__title, .post-card__description) {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
:global(.post-card__meta) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: smaller;
|
||||||
|
color: #555;
|
||||||
|
|
||||||
|
* {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.post-card__source) {
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,8 @@ const { meta } = Astro.props;
|
||||||
<meta property="cozy:description" content={meta.description} />
|
<meta property="cozy:description" content={meta.description} />
|
||||||
<meta property="cozy:image" content={meta.image} />
|
<meta property="cozy:image" content={meta.image} />
|
||||||
<meta property="cozy:source" content={meta.source} />
|
<meta property="cozy:source" content={meta.source} />
|
||||||
|
<meta property="cozy:author" content={meta.author} />
|
||||||
|
<meta property="cozy:published" content={meta.published} />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -56,5 +58,4 @@ const { meta } = Astro.props;
|
||||||
html * {
|
html * {
|
||||||
font-family: var(--system-ui);
|
font-family: var(--system-ui);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue