Merge pull request #83 from hlxsites/feature/ac-sideline-variation

Feature/ac sideline variation
hlxsites · Nov 10, 2023 · 73849c9 · 73849c9
2 parents a38481b + d02a3f8
commit 73849c9
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 9 deletions.
diff --git 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
@@ -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';