final

hlxsites · Dec 18, 2023 · f83b7ee · f83b7ee
1 parent 59bc6c6
commit f83b7ee
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 31 deletions.
diff --git a/cigaradvisor/blocks/authorcard/authorcard.css b/cigaradvisor/blocks/authorcard/authorcard.css
@@ -43,6 +43,7 @@
 }
 
 .authorcard.block .left-column h2 {
+    font-family: "alfa slab one", cursive;
     font-size: 40px !important;
     color: #673841;
     margin-top: 0;
@@ -161,7 +162,8 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0 0 0 / 60%);}
+    background-color: rgba(0 0 0 / 60%);
+}
 
 
 .authorcard.block .align-center {
@@ -180,53 +182,43 @@
 }
 
 @media (max-width: 768px) {
-    .authorcard.block{
-        flex-direction: column;
+    .authorcard-container {
+        padding: 60px 10px;
+        background: none #ece8e3;
+        background-size: auto 150%;
     }
 
     .author-wrapper {
-        flex-direction: column;
+        display: flex;
+        width: 100%;
     }
 
-    .authorcard-wrapper {
-        width: auto;
+    .authorcard.block {
+        flex-flow: column wrap;
+        width: 100%;
     }
 
     .authorcard.block .author-content {
         flex: 0 0 100%;
     }
 
-    /* align left-column content center and also all the text inside it center aligned */
     .authorcard.block .left-column,
     .right-column {
-        width: auto;
+        width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
+        padding: 0;
     }
 
-    /* background image should span the entire width of the container */
     .authorcard.block .overlay-image {
         flex: 0 0 100%;
         width: 100%;
     }
 
-    /* make authorcard-container background image span across authorcard block
-       and add 5% margin on top and bottom */
-    .authorcard-container {
-        background-size: auto 150%; 
-        padding: 0 10px;
-    }
-
-    /* remove all left and right paddings applied on all the elements inside authorcard-container */
-    .authorcard.block .left-column,
-    .right-column,
-    .authorcard.block .left-column h2,
-    .authorcard.block .left-column p,
-    .authorcard.block .left-column .button,
-    .authorcard.block .right-column p,
-    .authorcard.block .right-column p>a {
-        padding: 0;
+    .authorcard.block .author-content .overlay-image img {
+        display: block;
+        width: 100%;
     }
 }
diff --git a/cigaradvisor/blocks/authorcard/authorcard.js b/cigaradvisor/blocks/authorcard/authorcard.js
@@ -3,12 +3,10 @@ import { isExternal, fetchData } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   const configs = readBlockConfig(block);
-  console.log(configs);
   const { title } = configs;
   const buttonLabel = configs['button-label'];
   const buttonLink = configs['button-link'];
   const { authors } = configs;
-  console.log(buttonLabel);
   const leftDiv = document.createElement('div');
   leftDiv.classList.add('left-column');
   const authorLeftContentWrapper = document.createElement('div');
@@ -32,9 +30,9 @@ export default async function decorate(block) {
 
   const rightDiv = document.createElement('div');
   rightDiv.classList.add('right-column');
+  //  TODO: fetch author details from query-index.xlsx
   const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`;
   const authorContent = await fetchData(fetchUrl);
-  console.log(authorContent);
   const authorsObj = [];
   [...authors].forEach((authorPage) => {
     let authorPath;
@@ -54,17 +52,16 @@ export default async function decorate(block) {
       authorsObj.push(authorDetails);
     }
   });
-  console.log(authorsObj);
   const authorWrapperSection = document.createElement('section');
   authorWrapperSection.classList.add('author-wrapper');
   authorWrapperSection.innerHTML = '';
   [...authorsObj].forEach((author) => {
     authorWrapperSection.innerHTML
-            += `<div class="author-content">
+      += `<div class="author-content">
     <div class="overlay-image">
     ${createOptimizedPicture(author.image).outerHTML}
     <div class="overlay-content">
-    <p class="align-center"><a href="${author.path}">${author.name}</a></p>
+    <p class="align-center"><a href="${author.page}">${author.name}</a></p>
     </div>
     </div>
     </div>`;

diff --git a/head.html b/head.html
@@ -2,3 +2,4 @@
 <script src="/cigaradvisor/scripts/aem.js" type="module"></script>
 <script src="/cigaradvisor/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/cigaradvisor/styles/styles.css"/>
+<link crossorigin="anonymous" rel="stylesheet" id="ca-alfaslabmonterrat-font-css" href="//fonts.googleapis.com/css?family=Alfa+Slab+One%7CMontserrat%3A300%2C400%2C500%2C600%2C700%2C800%2C900%7COpen+Sans%3A400%2C600%2C700&#038;ver=5.5.1" type="text/css" media="all" />