Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
kailasnadh790 committed Jan 17, 2024
1 parent 5e3525e commit 2b40948
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 0 deletions.
30 changes: 30 additions & 0 deletions cigaradvisor/scripts/scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,35 @@ function buildArticleHeader(mainEl) {
mainEl.prepend(div);
}

/**
* Builds three column grid.
* @param {Element} main The container element
*/
function buildThreeColumnGrid(main) {
main.querySelectorAll(':scope > .section[data-layout="3-column"]').forEach((section) => {
const leftDiv = document.createElement('div');
leftDiv.classList.add('left-grid');
const centerDiv = document.createElement('div');
centerDiv.classList.add('center-grid');
const rightDiv = document.createElement('div');
rightDiv.classList.add('right-grid');
let current = leftDiv;
[...section.children].forEach((child) => {
if (child.classList.contains('separator-wrapper')) {
if (current === centerDiv) {
current = rightDiv;
} else {
current = centerDiv;
}
child.remove();
return;
}
current.append(child);
});
section.append(leftDiv, centerDiv, rightDiv);
});
}

/**
* Builds two column grid.
* @param {Element} main The container element
Expand Down Expand Up @@ -157,6 +186,7 @@ export function decorateMain(main) {
decorateSections(main);
decorateBlocks(main);
buildTwoColumnGrid(main);
buildThreeColumnGrid(main);
}

/**
Expand Down
35 changes: 35 additions & 0 deletions cigaradvisor/styles/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,41 @@ main .section[data-layout="50/50"] .right-grid > div {
padding: 10px;
}

/* Three-column grid */
main .section[data-layout="3-column"] {
padding-left: 0;
padding-right: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 1080px;
box-sizing: border-box;
display: flex;
}

main .section[data-layout="3-column"] ul {
list-style-type: disc;
}

main .section[data-layout="3-column"] > div {
display: flex;
flex: 1;
flex-direction: column;
}


main .section[data-layout="3-column"] > .left-grid {
flex: 0 0 25%;
}

main .section[data-layout="3-column"] > .center-grid, main .section[data-layout="3-column"] > .right-grid {
flex: 0 0 37.5%;
}

main .section[data-layout="3-column"] * > div {
padding: 2px;
}

.icon > img {
width: var(--icon-size);
height: var(--icon-size);
Expand Down

0 comments on commit 2b40948

Please sign in to comment.