diff --git a/blocks/articlecards/articlecards.css b/blocks/articlecards/articlecards.css index 0d00d575..eb3d3aa2 100644 --- a/blocks/articlecards/articlecards.css +++ b/blocks/articlecards/articlecards.css @@ -9,7 +9,7 @@ .wrapper{ display: grid; grid-template-columns: 1fr 1fr; - grid-gap: 2.25rem; + grid-gap: 2.50rem; } @media only screen and (max-width: 768px) { @@ -18,23 +18,26 @@ } } -ul.posts li.post:not(:first-child){ +ul.posts li.post:not(:first-child) { display: flex; flex-direction: row; align-items: flex-start; - gap: 0.75rem; + gap: 1rem; + margin-bottom: 20px; } -ul.posts li.post:not(:first-child) a.article-card-img{ - flex-shrink: 0.9; +ul.posts li.post::before { display: none; } + +ul.posts li.post:not(:first-child) a.article-card-img { padding: 20px 0 0; + min-width: 188px; } -.article-card-body a{ +.article-card-body a { font-weight: bold; } -.article-card-body a:hover{ +.article-card-body a:hover { color: #000; text-decoration: none; } @@ -155,6 +158,37 @@ ul.posts li.post:not(:first-child) a.article-card-img{ flex: 1 1 auto; } +#main h3.entry-title, + h3.entry-title { + margin-top: 0; + padding-top: 0; +} + +ul.posts li.post:not(:first-child) .entry-title, +ul.posts li.post:not(:first-child) .description { + font-size: 14px; +} + +ul.posts li.post:not(:first-child) .description { + letter-spacing: 0.005em; +} + +ul.posts li.post:first-child .entry-title { + font-size: 18px; +} + +ul.posts li.post:first-child .description { + font-size: 16px; +} + +ul.posts li.post:first-child .article-card-img img { + height: 264px; +} + +ul.posts li.post{ + padding: 0; +} + @media only screen and (max-width: 479px) { .horizontal .article-card { flex-direction: column!important; @@ -163,6 +197,22 @@ ul.posts li.post:not(:first-child) a.article-card-img{ .horizontal .article-card .article-card-img img { max-width: 100%!important; } + + .wrapper { + grid-gap: 0; + } + + ul.posts li.post:not(:first-child) { + display: block; + } + + ul.posts li.post:first-child .article-card-img img { + height: auto; + } + + ul.posts li.post:not(:first-child) a.article-card-img { + min-width: 100%; + } } @media (min-width: 479px) and (max-width: 767px) { diff --git a/blocks/articlecards/articlecards.js b/blocks/articlecards/articlecards.js index 16f15d34..bfb072fd 100644 --- a/blocks/articlecards/articlecards.js +++ b/blocks/articlecards/articlecards.js @@ -1,5 +1,5 @@ import { - div, h2, li, ul, + div, h2, li, ul, h3, } from '../../scripts/dom-builder.js'; export default function decorate(block) { @@ -27,8 +27,10 @@ export default function decorate(block) { showcaseBanner.append(articleImage); const contentEle = div({ class: 'article-card-body' }); if (ancButton) { + const anchorSideLine = h3({ class: 'entry-title' }); ancButton.className = 'redirect-link'; - contentEle.append(ancButton); + anchorSideLine.append(ancButton); + contentEle.append(anchorSideLine); } if (description) { description.className = 'description';