- ${
- source ? `
-
${source}
- `
- : ''
- }
+
+ ${
+ source ? `
+
${source}
+ `
+ : ''
+ }
+ ${
+ published ? `
+
${new Date(published).toLocaleDateString()}
+ `
+ : ''
+ }
+
+
${title}
${
description ? `
@@ -124,16 +134,13 @@ const {postDivSelector, skipSave = false} = Astro.props;
}
#post-list {
:global(li) {
- margin-bottom: 1rem;
list-style: none;
- border: 1px solid #ccc;
- box-shadow: 0 5px 2px #eee;
- border-radius: 5px;
- padding: 1rem;
- width: calc(100% + 40px);
display: block;
float: left;
+ width: calc(100% + 40px);
margin-left: -40px;
+ padding: 1rem;
+ border-bottom: 1px solid #eee;
:global(a) {
text-decoration: none;
@@ -146,14 +153,40 @@ const {postDivSelector, skipSave = false} = Astro.props;
:global(.post-card) {
:global(.post-card__image) {
float: left;
- margin-right: 1rem;
- :global(img) {
- width: 150px;
- height: 150px;
+ margin-right: 0.5rem;
+ margin: 0.5rem 1rem 0 0;
+
+ :global(img, svg) {
+ width: 70px;
+ height: 70px;
object-fit: cover;
- border-radius: 5px;
- border: 1px solid #eee;
+ border-radius: 50%;
+ 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;
}
}
}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3cb924e..0805f0c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -21,6 +21,8 @@ const { meta } = Astro.props;
+
+
@@ -56,5 +58,4 @@ const { meta } = Astro.props;
html * {
font-family: var(--system-ui);
}
-