diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index eb38b600..6a72a1d8 100644 --- a/blocks/columns/columns.css +++ b/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%; } diff --git a/blocks/connect/connect.css b/blocks/connect/connect.css new file mode 100644 index 00000000..fb540281 --- /dev/null +++ b/blocks/connect/connect.css @@ -0,0 +1,9 @@ +/* connet css */ +.linkedin-bottom { + padding-top: 80px; + padding-bottom: 80px; +} + +.linkedin-bottom .outer { + display: block; +} \ No newline at end of file diff --git a/blocks/connect/connect.js b/blocks/connect/connect.js index c015f5f8..23ddd2c8 100644 --- a/blocks/connect/connect.js +++ b/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( diff --git a/blocks/recent-posts/recent-posts.css b/blocks/recent-posts/recent-posts.css index 3d009ece..7c52be87 100644 --- a/blocks/recent-posts/recent-posts.css +++ b/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; diff --git a/blocks/sidebar-rte/sidebar-rte.css b/blocks/sidebar-rte/sidebar-rte.css index 4976808a..2f0d0d1a 100644 --- a/blocks/sidebar-rte/sidebar-rte.css +++ b/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; } diff --git a/scripts/scripts.js b/scripts/scripts.js index b27b3c5f..6f9a48b2 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -35,6 +35,7 @@ const TEMPLATE_LIST = [ 'default', 'blog', 'news', + 'anniversary', ]; const CATEGORY_LIST = [ diff --git a/styles/Typo.css b/styles/Typo.css index cd5d3c02..d98c72af 100644 --- a/styles/Typo.css +++ b/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; } diff --git a/templates/Anniversary/Anniversary.css b/templates/Anniversary/Anniversary.css new file mode 100644 index 00000000..ef6388c2 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/templates/Anniversary/Anniversary.js b/templates/Anniversary/Anniversary.js new file mode 100644 index 00000000..ea118436 --- /dev/null +++ b/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(); +} diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js index 11e8ab63..9d992e6d 100644 --- a/templates/Blog/Blog.js +++ b/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() { diff --git a/templates/Default/Default.js b/templates/Default/Default.js index 1bfad679..7fdc4931 100644 --- a/templates/Default/Default.js +++ b/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() { diff --git a/templates/News/News.js b/templates/News/News.js index 61f32a44..6026e630 100644 --- a/templates/News/News.js +++ b/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() {