diff --git a/src/components/blog-posts-list/blog-posts-list.js b/src/components/blog-posts-list/blog-posts-list.js
index d02b4f55..eae5a7f7 100644
--- a/src/components/blog-posts-list/blog-posts-list.js
+++ b/src/components/blog-posts-list/blog-posts-list.js
@@ -17,7 +17,9 @@ export default class BlogPostsList extends HTMLElement {
const { title, route } = post;
const { coverImage, abstract = "", published } = post.data;
const date = new Date(published);
- const time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth();
+ const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+ const time = `${date.getFullYear()}.${month}.${day}`;
const coverBackground = coverImage ? coverImage : "/assets/greenwood-logo-leaf.svg";
const coverBackgroundPadding =
coverImage && coverImage !== "/assets/greenwood-logo-g.svg" ? "4px" : "14px";
@@ -35,10 +37,8 @@ export default class BlogPostsList extends HTMLElement {
/>
-
- ${title}
- (${time})
-
+
${title}
+
Published: ${time}
${abstract}
diff --git a/src/components/blog-posts-list/blog-posts-list.module.css b/src/components/blog-posts-list/blog-posts-list.module.css
index 8181c9cb..fe3a379c 100644
--- a/src/components/blog-posts-list/blog-posts-list.module.css
+++ b/src/components/blog-posts-list/blog-posts-list.module.css
@@ -47,18 +47,16 @@
.postsListItemContentTitle {
font-family: var(--font-primary-bold);
font-size: var(--font-size-2);
- /* display: inline-flex; */
display: block;
margin: 0 0 var(--size-1);
}
.postsListItemContentPublished {
- /* font-family: var(--font-primary-bold); */
font-size: 16px;
display: block;
- /* display: inline-flex; */
- /* display: block;
- margin: 0 0 var(--size-1); */
+ margin: 0 0 var(--size-3) 0;
+ padding: 0 0 var(--size-2) 0;
+ border-bottom: 1px solid var(--color-black);
}
.postsListItemContentAbstract {
@@ -81,16 +79,10 @@
}
.postsListItemCoverImage {
- margin: var(--size-1);
- }
-
- .postsListItemContentTitle {
- display: inline-flex;
- }
-
- .postsListItemContentPublished {
- font-size: var(--font-size-1);
- display: contents;
+ margin: 0 var(--size-1);
+ max-width: 12%;
+ max-height: var(--size-9);
+ min-height: var(--size-9);
}
}
@@ -101,14 +93,6 @@
margin: 0 auto;
}
- .postsListItemCoverImage {
- width: 20%;
- max-width: 80px;
- max-height: var(--size-9);
- min-height: var(--size-9);
- margin: var(--size-2);
- }
-
.postsListItemContentTitle {
font-size: var(--font-size-3);
}