Merge pull request #218 from hlxsites/feature/anniversary-template

Created the anniversary block with sidebar

blocks/columns/columns.css

@@ -3,6 +3,41 @@
   flex-direction: column;
 }
 
+.columns picture {
+  display: block;
+  float: none;
+  max-width: none;
+  overflow: hidden;
+  padding-bottom: 56%;
+  position: relative;
+  width: 100%;
+}
+
+.columns picture img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* Maintain aspect ratio, fitting the image within the container */
+  transition: all 0.3s ease 0s;
+}
+
+.zoomed-image picture img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Maintain aspect ratio, fitting the image within the container */
+  transition: all 0.3s ease 0s;
+}
+
+.zoomed-image picture:hover img {
+  transform: scale(1.1);
+  transition: all 0.3s ease 0s;
+}
+
 .columns img {
   width: 100%;
 }

blocks/connect/connect.css

@@ -0,0 +1,9 @@
+/* connet css */
+.linkedin-bottom {
+    padding-top: 80px;
+    padding-bottom: 80px;
+}
+
+.linkedin-bottom .outer {
+    display: block;
+}

blocks/connect/connect.js

@@ -9,7 +9,7 @@ export default function decorate(block) {
   const anchorLink = block.querySelector('a');
   const bodytext = block.children[1].textContent.trim();
   const container = div(
-    { class: 'linkedin-bottom wide-section padding-btm' },
+    { class: 'linkedin-bottom padding-btm' },
     div(
       { class: 'outer' },
       a(

blocks/recent-posts/recent-posts.css

@@ -12,6 +12,10 @@
     text-align: left;
 }
 
+.recent-posts h1:first-child, .recent-posts h2:first-child {
+    padding-top: 0!important;
+} 
+
 .recent-posts .post .image img {
     width: 100%;
     height: auto;

blocks/sidebar-rte/sidebar-rte.css

@@ -8,6 +8,10 @@
     display: block;
 }
 
+.sidebar-rte h1:first-child, .sidebar-rte h2:first-child, .sidebar-rte h3:first-child {
+    padding-top: 0!important;
+}
+
 .sidebar-rte ul li::before {
     content: ''!important;
 }

scripts/scripts.js

@@ -35,6 +35,7 @@ const TEMPLATE_LIST = [
   'default',
   'blog',
   'news',
+  'anniversary',
 ];
 
 const CATEGORY_LIST = [

styles/Typo.css

@@ -933,6 +933,10 @@ body.mrna input[type="submit"]:hover {
     padding: 0!important;
 }
 
+.no-space a {
+    width: auto!important;
+}
+
 .text-small p {
     font-size: 12px!important;
     line-height: 1.1em!important;
@@ -1016,6 +1020,19 @@ body.mrna input[type="submit"]:hover {
     grid-gap: 2%;
 }
 
+.shadow {
+    padding: 10%;
+    background-color: transparent;
+    border: none;
+    box-shadow: 0 2px 15px rgba(0 0 0 / 10%);
+    border-radius: 4px;
+    display: block;
+}
+
+.no-shadow {
+    box-shadow: none!important;
+}
+
 .text-normal {
     font-weight: normal;
 }

templates/Anniversary/Anniversary.css

@@ -0,0 +1,38 @@
+/* Default template css */
+.default-content-wrapper {
+    text-align: left!important;
+}
+
+.default-content-wrapper h2:first-child {
+    margin-top: 0px!important;
+}
+
+.outer {
+    display: flex;
+    justify-content: space-between;
+}
+
+#main {
+    float: none;
+}
+
+#sidebar {
+    position: sticky;
+    top: 130px;
+    float: none;
+}
+
+@media (max-width: 960px) {
+    #sidebar {
+        top: 80px;
+    }
+}
+
+@media (max-width: 860px) {
+    .outer {
+        flex-direction: column;
+    }
+    #sidebar {
+        max-height: none;
+    }
+}

templates/Anniversary/Anniversary.js

@@ -0,0 +1,62 @@
+function setSidebarMaxHeight() {
+  let height = 0;
+  const sidebar = document.querySelector('#sidebar');
+  [...sidebar.children].forEach((element) => {
+    height += element.offsetHeight;
+  });
+  sidebar.style.maxHeight = `${height + 50}px`;
+}
+
+function setSidebarHeight() {
+  window.addEventListener('resize', setSidebarMaxHeight);
+  window.addEventListener('click', setSidebarMaxHeight);
+}
+
+export default function buildAutoBlocks(block) {
+  // const contentBlocks = block.querySelectorAll('.section');
+  const sidebarSections = block.querySelector('.sidebar-section');
+
+  // Creating the default template wrapper
+  const defaultTemplate = document.createElement('div');
+  defaultTemplate.id = 'content-wrapper';
+
+  // Creating content wrapper
+  const content = document.createElement('div');
+  content.id = 'content';
+
+  // Creating outer element
+  const outerElement = document.createElement('div');
+  outerElement.className = 'outer';
+
+  // Creating main and sidebar elements
+  const main = document.createElement('div');
+  main.id = 'main';
+
+  const sidebar = document.createElement('div');
+  sidebar.id = 'sidebar';
+
+  // Creating clearfix element
+  const clearFix = document.createElement('div');
+  clearFix.className = 'clearfix';
+
+  outerElement.appendChild(main);
+  outerElement.appendChild(sidebar);
+  content.appendChild(outerElement);
+  content.appendChild(clearFix);
+  defaultTemplate.appendChild(content);
+  // Iterate over each section
+  if (sidebarSections.children.length > 0) {
+    const sidebars = sidebarSections.querySelectorAll('[data-block-name^="sidebar-"]');
+    if (sidebars.length > 0) {
+      sidebars.forEach((sidebarItem) => {
+        sidebar.appendChild(sidebarItem);
+      });
+    }
+    Array.from(sidebarSections.cloneNode(true).children).forEach((child) => {
+      main.appendChild(child);
+    });
+    sidebarSections.innerHTML = defaultTemplate.outerHTML;
+  }
+  setTimeout(() => setSidebarMaxHeight(), 1000);
+  setSidebarHeight();
+}

templates/Blog/Blog.js

@@ -231,7 +231,7 @@ function setSidebarMaxHeight() {
   [...sidebar.children].forEach((element) => {
     height += element.offsetHeight;
   });
-  sidebar.style.maxHeight = `${height}px`;
+  sidebar.style.maxHeight = `${height + 50}px`;
 }
 
 function setSidebarHeight() {

templates/Default/Default.js

@@ -4,7 +4,7 @@ function setSidebarMaxHeight() {
   [...sidebar.children].forEach((element) => {
     height += element.offsetHeight;
   });
-  sidebar.style.maxHeight = `${height}px`;
+  sidebar.style.maxHeight = `${height + 50}px`;
 }
 
 function setSidebarHeight() {

templates/News/News.js

@@ -229,7 +229,7 @@ function setSidebarMaxHeight() {
   [...sidebar.children].forEach((element) => {
     height += element.offsetHeight;
   });
-  sidebar.style.maxHeight = `${height}px`;
+  sidebar.style.maxHeight = `${height + 50}px`;
 }
 
 function setSidebarHeight() {