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); }