Merge pull request #71 from hlxsites/feature/blog

Feature/blog
hlxsites · Nov 2, 2023 · 3d41175 · 3d41175
2 parents 0557d7c + fdb66bb
commit 3d41175
Show file tree

Hide file tree

Showing 9 changed files with 385 additions and 78 deletions.
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
@@ -1,37 +1 @@
-.hero .hero-content {
-  min-height: 310px;
-  display: flex;
-  align-items: center;
-  color: #fff;
-}
-
-.hero .bg-primary {
-  background-position: 50% 50%;
-  background-size: cover;
-}
-
-.hero .hero-content h2 {
-  line-height: 1.2;
-  padding: 0;
-  color: white;
-  font-size: 44px;
-  text-shadow: 0 0 6px rgba(0,0,0,50%);
-}
-
-@media (max-width: 1120px) {
-  .hero .hero-content {
-    min-height: 260px;
-  }
-}
-
-@media (max-width: 860px) {
-  .hero .hero-content {
-    min-height: 220px;
-  }
-}
-
-@media (max-width: 767px) {
-  .hero .hero-content {
-    min-height: 180px;
-  }
-}
+/* hero css */
diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -1,20 +1 @@
-export default function decorate(block) {
-  const bgImage = block.children[0].querySelector('img');
-
-  const heroContainer = document.createElement('div');
-  heroContainer.className = 'bg-primary';
-
-  // Set background image using CSS property
-  heroContainer.style.backgroundImage = `url(${bgImage.src})`;
-  heroContainer.style.backgroundSize = 'cover'; // Adjust as needed
-
-  if (block.children.length > 1) {
-    const additionalContent = block.children[1]; // Change the index if needed
-    if (additionalContent) {
-      additionalContent.classList.add('outer', 'hero-content');
-      heroContainer.appendChild(additionalContent);
-    }
-  }
-  block.innerText = '';
-  block.appendChild(heroContainer);
-}
+// Hero block js
diff --git a/scripts/aem.js b/scripts/aem.js
@@ -355,6 +355,22 @@ function decorateTemplateAndTheme() {
   if (theme) addClasses(document.body, theme);
 }
 
+/**
+ * Builds hero block and prepends to main in a new section.
+ * @param {Element} main The container element
+ */
+
+function capitalizeWords(str) {
+  const words = str.split(' ');
+  const capitalizedWords = words.map((word) => {
+    if (word.length > 0) {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    }
+    return word;
+  });
+  return capitalizedWords.join(' ');
+}
+
 /**
  * Decorates paragraphs containing a single link as buttons.
  * @param {Element} element container element
@@ -701,4 +717,5 @@ export {
   toClassName,
   updateSectionsStatus,
   waitForLCP,
+  capitalizeWords,
 };
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -14,6 +14,7 @@ import {
   loadCSS,
   toClassName,
   getMetadata,
+  capitalizeWords,
 } from './aem.js';
 
 const LCP_BLOCKS = ['forms']; // add your LCP blocks to the list
@@ -30,22 +31,12 @@ async function loadFonts() {
   }
 }
 
-function capitalizeWords(str) {
-  const words = str.split(' ');
-  const capitalizedWords = words.map((word) => {
-    if (word.length > 0) {
-      return word.charAt(0).toUpperCase() + word.slice(1);
-    }
-    return word;
-  });
-  return capitalizedWords.join(' ');
-}
-
 const TEMPLATE_LIST = [
   'default',
   'plasmids',
   'proteins',
   'mrna',
+  'blog',
 ];
 
 /**

diff --git a/styles/Typo.css b/styles/Typo.css
@@ -606,6 +606,7 @@ input[type="reset"],
 input[type="submit"] {
     background-color: var(--primary-color);
     border-radius: 5px;
+    border: 1px solid var(--primary-color);
     box-sizing: border-box;
     color: #fff;
     cursor: pointer;
@@ -635,7 +636,8 @@ input[type="reset"]:hover,
 input[type="submit"]:hover {
     background-color: #fff;
     color: var(--primary-color);
-    text-decoration: none
+    text-decoration: none;
+    border: 1px solid var(--primary-color);
 }
 
 body.red #content-wrapper button,
@@ -1016,7 +1018,7 @@ body.purple input[type="submit"]:hover {
     width: 100%
 }
 
-.block.subscribe .hs_submit {
+.sidebar-block.subscribe .hs_submit {
     padding-bottom: 0
 }
 
@@ -1089,3 +1091,59 @@ form.hs-form .hs-input[type="checkbox"] {
 .bg-transparent {
     background-color: transparent!important;
 }
+
+.cursor {
+    cursor: pointer;
+}
+
+/* hero block code */
+.hero {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 310px;
+    background-color: var(--primary-color);
+}
+
+.hero > div:nth-child(1) picture > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    height: 310px;
+    width: 100%;
+    object-fit: cover;
+}
+
+.hero > div:nth-child(2) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 980px;
+    align-items: center;
+    text-align: left;
+    margin: 0 auto;
+    display: flex;
+    color: #fff;
+}
+
+.hero > div:nth-child(2) h2 {
+    line-height: 1.2;
+    padding: 0;
+    color: white;
+    font-size: 44px;
+    text-shadow: 0 0 6px rgba(0,0,0,50%);
+}
+
+@media (max-width: 1024px) {
+    .hero > div:nth-child(2) {
+        padding-left: 20px;
+        padding-right: 20px;
+        width: auto;
+    }
+}
diff --git a/styles/template.css b/styles/template.css
@@ -635,30 +635,34 @@ body.sidebar-50 #sidebar {
     display: block
 }
 
-#sidebar .block h3 {
+#sidebar .sidebar-block {
+    background-color: #fff;
+}
+
+#sidebar .sidebar-block h3 {
     font-size: 20px;
     line-height: 110%;
     padding: 0 0 .3em
 }
 
-#sidebar .block ul {
+#sidebar .sidebar-block ul {
     padding: 0
 }
 
-#sidebar .block a {
+#sidebar .sidebar-block a {
     color: #000;
     text-decoration: none
 }
 
-#sidebar .block a:hover {
+#sidebar .sidebar-block a:hover {
     text-decoration: underline
 }
 
 #sidebar .hs-cta-wrapper .hs-cta-img {
     width: 100%
 }
 
-#hs_menu_wrapper_sidebarmenu,#sidebar .block,#sidebar div.hs_cos_wrapper_widget {
+#hs_menu_wrapper_sidebarmenu,#sidebar .sidebar-block,#sidebar div.hs_cos_wrapper_widget {
     background-color: #fff;
     border-radius: 4px;
     box-shadow: 0 2px 11px rgba(0 0 0 / 10%);
@@ -670,11 +674,11 @@ body.sidebar-50 #sidebar {
     margin-bottom: 25px
 }
 
-#sidebar .block,#sidebar div.hs_cos_wrapper_widget {
+#sidebar .sidebar-block,#sidebar div.hs_cos_wrapper_widget {
     margin-top: 25px
 }
 
-#sidebar .block:first-child,#sidebar div.hs_cos_wrapper_widget:first-child {
+#sidebar .sidebar-block:first-child,#sidebar div.hs_cos_wrapper_widget:first-child {
     margin-top: 0
 }
 
@@ -1143,7 +1147,8 @@ body.purple .mmg-collapsible.open>.module-title,body.purple .mmg-collapsible>.mo
 
 .blog-pagination a:hover {
     background: #727d84;
-    color: #eaeaee
+    color: #eaeaee;
+    border: 1px solid #aebac0;
 }
 
 .blog-pagination .all-posts {

diff --git a/templates/Blog/Blog.css b/templates/Blog/Blog.css
@@ -0,0 +1,4 @@
+/* #blog css */
+.post-topics {
+    padding: 1em 0;
+}