Created the anniversaty block with sidebar

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(

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;

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,61 @@
+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);
+      });
+    }
+    sidebarSections.style.display = null;
+    main.appendChild(sidebarSections.cloneNode(true));
+    sidebarSections.outerHTML = 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() {