diff --git a/assets/js/drawTree.js b/assets/js/drawTree.js new file mode 100644 index 000000000..ff8daa98f --- /dev/null +++ b/assets/js/drawTree.js @@ -0,0 +1,91 @@ +async function drawTree(pathBase){ +// async function drawTree(){ + +const { content } = await fetchData; + +// COMMENT : add a uid for pages and folders id ? will avoid problems if duplicates in page name and folder name + +// we want to build an array of objects, one for each page and folder (type) +const tree = []; + +for (let path in content) { + const c = content[path]; + const pageTitle = c.title; + const crumb = path.split("/"); + // ['', 'folder1','folder2', ... , pageId ] + let pageId = crumb.pop(); + if (pageId == '') pageId = '_ROOT_'; + let parentFolderId = crumb.slice(-1)[0]; + if (parentFolderId == '' && pageId == '_ROOT_') parentFolderId = 'SUPER-ROOT'; + if (parentFolderId == '') parentFolderId = 'ROOT'; + parentFolderId = '_' + parentFolderId + '_'; // added to distinguished from pageId + + // we found a page + tree.push({ + id: pageId, + parentId: parentFolderId, + name: pageTitle, + type: 'page', + href: pathBase.slice(0, pathBase.length - 1) + path + }) + + // if the page is in one or more folders + crumb.forEach((folderId, level) => { + let parentId = crumb[level - 1]; + if (parentId == '') { + parentId = '_ROOT_' + } else { + parentId = '_' + parentId + '_'; + } + + // we found a folder + const push = { + id: '_' + folderId + '_', + parentId: parentId, + name: folderId.replace(/-/g, ' '), + type: 'folder', + // type : Tree.FOLDER, + level: level + } + + // avoid duplicates of folders + if (folderId != '' && !tree.some(el => JSON.stringify(el) === JSON.stringify(push))) + tree.push(push); + }); +} + +// METHODE 1 +// FYI https://www.jstree.com/docs/json/ doesn't need a hierarchial JSON +// it needs jQuery though. Not used for the moment + +//METHODE 2 +// build the hierarchial JSON +// from https://typeofnan.dev/an-easy-way-to-build-a-tree-with-object-references/ +let root; + +const idMapping = tree.reduce((acc, el, i) => { + acc[el.id] = i; + return acc; +}, {}); + +tree.forEach((el) => { + // Handle the root element + if (el.parentId == '_SUPER-ROOT_') { + root = el; + return; + } + // Use our mapping to locate the parent element in our data array + const parentEl = tree[idMapping[el.parentId]]; + // Add our current el to its parent's `children` array + parentEl.children = [...(parentEl.children || []), el]; +}); + +// display tree structure +// from https://www.cssscript.com/folder-tree-json/ + +// keep track of the original node objects +const structure = root.children; + +return structure + +} diff --git a/assets/js/graph.js b/assets/js/graph.js index 174d4946d..3c5cdc954 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -1,4 +1,4 @@ -async function drawGraph(baseUrl, isHome, pathColors, graphConfig) { +async function drawGraph(baseUrl, isHome, pathColors, graphConfig, modal = false) { let { depth, @@ -10,7 +10,9 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) { repelForce, fontSize} = graphConfig; - const container = document.getElementById("graph-container") + const elementId = modal ? "graph-container-modal" : "graph-container" ; + + const container = document.getElementById(elementId); const { index, links, content } = await fetchData // Use .pathname to remove hashes / searchParams / text fragments @@ -109,7 +111,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) { .force("center", d3.forceCenter()) const svg = d3 - .select("#graph-container") + .select('#'+elementId) .append("svg") .attr("width", width) .attr("height", height) diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 776f32d77..947fc6f1e 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -184,11 +184,11 @@ article { &.broken { opacity: 0.5; - background-color: transparent; + background-color: transparent; } } } - + & p { overflow-wrap: anywhere; } @@ -293,7 +293,7 @@ footer { text-align: center; & ul { padding-left: 0; - } + } } hr { @@ -319,6 +319,11 @@ hr { flex-direction: row; gap: 2em; + &.vertical{ + flex-direction: column; + gap: 0; + } + @media all and (max-width: 780px) { flex-direction: column; } @@ -352,6 +357,18 @@ hr { } } + + #graph-container-modal { + border: var(--outlinegray) 1px solid; + border-radius: 5px; + box-sizing: border-box; + min-height: 250px; + + & > svg { + margin-bottom: -5px; + + } + } } .centered { @@ -591,5 +608,3 @@ header { padding: 0 1em; } } - - diff --git a/assets/styles/column.scss b/assets/styles/column.scss new file mode 100644 index 000000000..c047981d3 --- /dev/null +++ b/assets/styles/column.scss @@ -0,0 +1,44 @@ +div.sticky { + position: -webkit-sticky; + position: sticky; + top: 0; + // background-color: yellow; +} +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content */ +.modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +/* The Close Button */ +.close { + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: #000; + text-decoration: none; + cursor: pointer; +} diff --git a/assets/styles/r-c-min.scss b/assets/styles/r-c-min.scss new file mode 100644 index 000000000..ef7dd65fc --- /dev/null +++ b/assets/styles/r-c-min.scss @@ -0,0 +1 @@ +r-c,[r-c],[data-r-c]{display:flex;flex-wrap:wrap}r-c,[data-r-c]{width:auto!important}r-c,[r-c],[data-r-c],r-c > *,[r-c] > *,[data-r-c] > *{box-sizing:border-box}r-c,[r-c],[data-r-c]{margin:calc(5.455px + 1.42041vw);gap:calc(5.455px + 1.42041vw)}[join],[data-join]{margin:0;gap:0}[join] > *,[data-join] > *{padding:calc(5.455px + 1.42041vw)}[r-c]{margin:0}[r-c][join]{padding:0}r-c[center],[r-c][center],[data-center]{justify-content:center}r-c[right],[r-c][right],[data-right]{justify-content:flex-end}r-c[space-between],[r-c][space-between],[data-space-between]{justify-content:space-between}r-c[space-evenly],[r-c][space-evenly],[data-space-evenly]{justify-content:space-evenly}r-c[top],[r-c][top],[data-top]{align-items:flex-start}r-c[middle],[r-c][middle],[data-middle]{align-items:center}r-c[bottom],[r-c][bottom],[data-bottom]{align-items:flex-end}r-c > *,[r-c] > *,[data-r-c] > *,c1-1:not([x]),[c1-1]:not(x),[data-c1-2]:not(x),r-c[c1-1]:not(x) > *,[data-r-c][data-c1-1] > *{width:100%}c1-2:not([x]),[c1-2]:not(x),[data-c1-2]:not(x),r-c[c1-2]:not(x) > *,[data-r-c][data-c1-2] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}c1-3:not([x]),[c1-3]:not(x),[data-c1-3]:not(x),r-c[c1-3]:not(x) > *,[data-r-c][data-c1-3] > *{width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}c2-3:not([x]),[c2-3]:not(x),[data-c2-3]:not(x),r-c[c2-3]:not(x) > *,[data-r-c][data-c2-3] > *{width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}c1-4:not([x]),[c1-4]:not(x),[data-c1-4]:not(x),r-c[c1-4]:not(x) > *,[data-r-c][data-c1-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4*3)}c2-4:not([x]),[c2-4]:not(x),[data-c2-4]:not(x),r-c[c2-4]:not(x) > *,[data-r-c][data-c2-4] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}c3-4:not([x]),[c3-4]:not(x),[data-c3-4]:not(x),r-c[c3-4]:not(x) > *,[data-r-c][data-c3-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4)}c1-5:not([x]),[c1-5]:not(x),[data-c1-5]:not(x),r-c[c1-5]:not(x) > *,[data-r-c][data-c1-5] > *{width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}c2-5:not([x]),[c2-5]:not(x),[data-c2-5]:not(x),r-c[c2-5]:not(x) > *,[data-r-c][data-c2-5] > *{width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}c3-5:not([x]),[c3-5]:not(x),[data-c3-5]:not(x),r-c[c3-5]:not(x) > *,[data-r-c][data-c3-5] > *{width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}c4-5:not([x]),[c4-5]:not(x),[data-c4-5]:not(x),r-c[c4-5]:not(x) > *,[data-r-c][data-c4-5] > *{width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}c1-6:not([x]),[c1-6]:not(x),[data-c1-6]:not(x),r-c[c1-6]:not(x) > *,[data-r-c][data-c1-6] > *{width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}c2-6:not([x]),[c2-6]:not(x),[data-c2-6]:not(x),r-c[c2-6]:not(x) > *,[data-r-c][data-c2-6] > *{width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}c3-6:not([x]),[c3-6]:not(x),[data-c3-6]:not(x),r-c[c3-6]:not(x) > *,[data-r-c][data-c3-6] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}c4-6:not([x]),[c4-6]:not(x),[data-c4-6]:not(x),r-c[c4-6]:not(x) > *,[data-r-c][data-c4-6] > *{width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}c5-6:not([x]),[c5-6]:not(x),[data-c5-6]:not(x),r-c[c5-6]:not(x) > *,[data-r-c][data-c5-6] > *{width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}c1-7:not([x]),[c1-7]:not(x),[data-c1-7]:not(x),r-c[c1-7]:not(x) > *,[data-r-c][data-c1-7] > *{width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}c2-7:not([x]),[c2-7]:not(x),[data-c2-7]:not(x),r-c[c2-7]:not(x) > *,[data-r-c][data-c2-7] > *{width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}c3-7:not([x]),[c3-7]:not(x),[data-c3-7]:not(x),r-c[c3-7]:not(x) > *,[data-r-c][data-c3-7] > *{width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}c4-7:not([x]),[c4-7]:not(x),[data-c4-7]:not(x),r-c[c4-7]:not(x) > *,[data-r-c][data-c4-7] > *{width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}c5-7:not([x]),[c5-7]:not(x),[data-c5-7]:not(x),r-c[c5-7]:not(x) > *,[data-r-c][data-c5-7] > *{width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}c6-7:not([x]),[c6-7]:not(x),[data-c6-7]:not(x),r-c[c6-7]:not(x) > *,[data-r-c][data-c6-7] > *{width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}c1-8:not([x]),[c1-8]:not(x),[data-c1-8]:not(x),r-c[c1-8]:not(x) > *,[data-r-c][data-c1-8] > *{width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}c2-8:not([x]),[c2-8]:not(x),[data-c2-8]:not(x),r-c[c2-8]:not(x) > *,[data-r-c][data-c2-8] > *{width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}c3-8:not([x]),[c3-8]:not(x),[data-c3-8]:not(x),r-c[c3-8]:not(x) > *,[data-r-c][data-c3-8] > *{width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}c4-8:not([x]),[c4-8]:not(x),[data-c4-8]:not(x),r-c[c4-8]:not(x) > *,[data-r-c][data-c4-8] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}c5-8:not([x]),[c5-8]:not(x),[data-c5-8]:not(x),r-c[c5-8]:not(x) > *,[data-r-c][data-c5-8] > *{width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}c6-8:not([x]),[c6-8]:not(x),[data-c6-8]:not(x),r-c[c6-8]:not(x) > *,[data-r-c][data-c6-8] > *{width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}c7-8:not([x]),[c7-8]:not(x),[data-c7-8]:not(x),r-c[c7-8]:not(x) > *,[data-r-c][data-c7-8] > *{width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}[join] > c1-1,[join] > [data-c1-1],[data-join] > c1-1,[data-join] > [data-c1-1],[join][c1-1]:not(x) > *,[data-join][data-c1-1]:not(x) > *{width:100%}[join] > c1-2,[join] > [data-c1-2],[data-join] > c1-2,[data-join] > [data-c1-2],[join][c1-2]:not(x) > *,[data-join][data-c1-2]:not(x) > *,[join] > c2-4,[join] > [data-c2-4],[data-join] > c2-4,[data-join] > [data-c2-4],[join][c2-4]:not(x) > *,[data-join][data-c2-4]:not(x) > *,[join] > c3-6,[join] > [data-c3-6],[data-join] > c3-6,[data-join] > [data-c3-6],[join][c3-6]:not(x) > *,[data-join][data-c3-6]:not(x) > *,[join] > c4-8,[join] > [data-c4-8],[data-join] > c4-8,[data-join] > [data-c4-8],[join][c4-8]:not(x) > *,[data-join][data-c4-8]:not(x) > *{width:50%}[join] > c1-3,[join] > [data-c1-3],[data-join] > c1-3,[data-join] > [data-c1-3],[join][c1-3]:not(x) > *,[data-join][data-c1-3]:not(x) > *,[join] > c2-6,[join] > [data-c2-6],[data-join] > c2-6,[data-join] > [data-c2-6],[join][c2-6]:not(x) > *,[data-join][data-c2-6]:not(x) > *{width:calc(100%/3)}[join] > c2-3,[join] > [data-c2-3],[data-join] > c2-3,[data-join] > [data-c2-3],[join][c2-3]:not(x) > *,[data-join][data-c2-3]:not(x) > *,[join] > c4-6,[join] > [data-c4-6],[data-join] > c4-6,[data-join] > [data-c4-6],[join][c4-6]:not(x) > *,[data-join][data-c4-6]:not(x) > *{width:calc(100%/3*2)}[join] > c1-4,[join] > [data-c1-4],[data-join] > c1-4,[data-join] > [data-c1-4],[join][c1-4]:not(x) > *,[data-join][data-c1-4]:not(x) > *,[join] > c2-8,[join] > [data-c2-8],[data-join] > c2-8,[data-join] > [data-c2-8],[join][c2-8]:not(x) > *,[data-join][data-c2-8]:not(x) > *{width:25%}[join] > c3-4,[join] > [data-c3-4],[data-join] > c3-4,[data-join] > [data-c3-4],[join][c3-4]:not(x) > *,[data-join][data-c3-4]:not(x) > *,[join] > c6-8,[join] > [data-c6-8],[data-join] > c6-8,[data-join] > [data-c6-8],[join][c6-8]:not(x) > *,[data-join][data-c6-8]:not(x) > *{width:75%}[join] > c1-5,[join] > [data-c1-5],[data-join] > c1-5,[data-join] > [data-c1-5],[join][c1-5]:not(x) > *,[data-join][data-c1-5]:not(x) > *{width:20%}[join] > c2-5,[join] > [data-c2-5],[data-join] > c2-5,[data-join] > [data-c2-5],[join][c2-5]:not(x) > *,[data-join][data-c2-5]:not(x) > *{width:40%}[join] > c3-5,[join] > [data-c3-5],[data-join] > c3-5,[data-join] > [data-c3-5],[join][c3-5]:not(x) > *,[data-join][data-c3-5]:not(x) > *{width:60%}[join] > c4-5,[join] > [data-c4-5],[data-join] > c4-5,[data-join] > [data-c4-5],[join][c4-5]:not(x) > *,[data-join][data-c4-5]:not(x) > *{width:80%}[join] > c1-6,[join] > [data-c1-6],[data-join] > c1-6,[data-join] > [data-c1-6],[join][c1-6]:not(x) > *,[data-join][data-c1-6]:not(x) > *{width:calc(100%/6)}[join] > c5-6,[join] > [data-c5-6],[data-join] > c5-6,[data-join] > [data-c5-6],[join][c5-6]:not(x) > *,[data-join][data-c5-6]:not(x) > *{width:calc(100%/6*5)}[join] > c1-7,[join] > [data-c1-7],[data-join] > c1-7,[data-join] > [data-c1-7],[join][c1-7]:not(x) > *,[data-join][data-c1-7]:not(x) > *{width:calc(100%/7)}[join] > c2-7,[join] > [data-c2-7],[data-join] > c2-7,[data-join] > [data-c2-7],[join][c2-7]:not(x) > *,[data-join][data-c2-7]:not(x) > *{width:calc(100%/7*2)}[join] > c3-7,[join] > [data-c3-7],[data-join] > c3-7,[data-join] > [data-c3-7],[join][c3-7]:not(x) > *,[data-join][data-c3-7]:not(x) > *{width:calc(100%/7*3)}[join] > c4-7,[join] > [data-c4-7],[data-join] > c4-7,[data-join] > [data-c4-7],[join][c4-7]:not(x) > *,[data-join][data-c4-7]:not(x) > *{width:calc(100%/7*4)}[join] > c5-7,[join] > [data-c5-7],[data-join] > c5-7,[data-join] > [data-c5-7],[join][c5-7]:not(x) > *,[data-join][data-c5-7]:not(x) > *{width:calc(100%/7*5)}[join] > c6-7,[join] > [data-c6-7],[data-join] > c6-7,[data-join] > [data-c6-7],[join][c6-7]:not(x) > *,[data-join][data-c6-7]:not(x) > *{width:calc(100%/7*6)}[join] > c1-8,[join] > [data-c1-8],[data-join] > c1-8,[data-join] > [data-c1-8],[join][c1-8]:not(x) > *,[data-join][data-c1-8]:not(x) > *{width:calc(100%/8)}[join] > c3-8,[join] > [data-c3-8],[data-join] > c3-8,[data-join] > [data-c3-8],[join][c3-8]:not(x) > *,[data-join][data-c3-8]:not(x) > *{width:calc(100%/8*3)}[join] > c5-8,[join] > [data-c5-8],[data-join] > c5-8,[data-join] > [data-c5-8],[join][c5-8]:not(x) > *,[data-join][data-c5-8]:not(x) > *{width:calc(100%/8*5)}[join] > c7-8,[join] > [data-c7-8],[data-join] > c7-8,[data-join] > [data-c7-8],[join][c7-8]:not(x) > *,[data-join][data-c7-8]:not(x) > *{width:calc(100%/8*7)}[xs1],[data-xs1]{order:-8}[xs2],[data-xs2]{order:-7}[xs3],[data-xs3]{order:-6}[xs4],[data-xs4]{order:-5}[xs5],[data-xs5]{order:-4}[xs6],[data-xs6]{order:-3}[xs7],[data-xs7]{order:-2}[xs8],[data-xs8]{order:-1}@media (min-width:600px){[sm1-1]:not(x),[data-sm1-1]:not(x),r-c[sm1-1]:not(x) > *,[data-r-c][data-sm1-1] > *{width:100%}[sm1-2]:not(x),[data-sm1-2]:not(x),r-c[sm1-2]:not(x) > *,[data-r-c][data-sm1-2] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[sm1-3]:not(x),[data-sm1-3]:not(x),r-c[sm1-3]:not(x) > *,[data-r-c][data-sm1-3] > *{width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}[sm2-3]:not(x),[data-sm2-3]:not(x),r-c[sm2-3]:not(x) > *,[data-r-c][data-sm2-3] > *{width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}[sm1-4]:not(x),[data-sm1-4]:not(x),r-c[sm1-4]:not(x) > *,[data-r-c][data-sm1-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4*3)}[sm2-4]:not(x),[data-sm2-4]:not(x),r-c[sm2-4]:not(x) > *,[data-r-c][data-sm2-4] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[sm3-4]:not(x),[data-sm3-4]:not(x),r-c[sm3-4]:not(x) > *,[data-r-c][data-sm3-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4)}[sm1-5]:not(x),[data-sm1-5]:not(x),r-c[sm1-5]:not(x) > *,[data-r-c][data-sm1-5] > *{width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}[sm2-5]:not(x),[data-sm2-5]:not(x),r-c[sm2-5]:not(x) > *,[data-r-c][data-sm2-5] > *{width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}[sm3-5]:not(x),[data-sm3-5]:not(x),r-c[sm3-5]:not(x) > *,[data-r-c][data-sm3-5] > *{width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}[sm4-5]:not(x),[data-sm4-5]:not(x),r-c[sm4-5]:not(x) > *,[data-r-c][data-sm4-5] > *{width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}[sm1-6]:not(x),[data-sm1-6]:not(x),r-c[sm1-6]:not(x) > *,[data-r-c][data-sm1-6] > *{width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}[sm2-6]:not(x),[data-sm2-6]:not(x),r-c[sm2-6]:not(x) > *,[data-r-c][data-sm2-6] > *{width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}[sm3-6]:not(x),[data-sm3-6]:not(x),r-c[sm3-6]:not(x) > *,[data-r-c][data-sm3-6] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[sm4-6]:not(x),[data-sm4-6]:not(x),r-c[sm4-6]:not(x) > *,[data-r-c][data-sm4-6] > *{width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}[sm5-6]:not(x),[data-sm5-6]:not(x),r-c[sm5-6]:not(x) > *,[data-r-c][data-sm5-6] > *{width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}[sm1-7]:not(x),[data-sm1-7]:not(x),r-c[sm1-7]:not(x) > *,[data-r-c][data-sm1-7] > *{width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}[sm2-7]:not(x),[data-sm2-7]:not(x),r-c[sm2-7]:not(x) > *,[data-r-c][data-sm2-7] > *{width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}[sm3-7]:not(x),[data-sm3-7]:not(x),r-c[sm3-7]:not(x) > *,[data-r-c][data-sm3-7] > *{width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}[sm4-7]:not(x),[data-sm4-7]:not(x),r-c[sm4-7]:not(x) > *,[data-r-c][data-sm4-7] > *{width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}[sm5-7]:not(x),[data-sm5-7]:not(x),r-c[sm5-7]:not(x) > *,[data-r-c][data-sm5-7] > *{width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}[sm6-7]:not(x),[data-sm6-7]:not(x),r-c[sm6-7]:not(x) > *,[data-r-c][data-sm6-7] > *{width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}[sm1-8]:not(x),[data-sm1-8]:not(x),r-c[sm1-8]:not(x) > *,[data-r-c][data-sm1-8] > *{width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}[sm2-8]:not(x),[data-sm2-8]:not(x),r-c[sm2-8]:not(x) > *,[data-r-c][data-sm2-8] > *{width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}[sm3-8]:not(x),[data-sm3-8]:not(x),r-c[sm3-8]:not(x) > *,[data-r-c][data-sm3-8] > *{width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}[sm4-8]:not(x),[data-sm4-8]:not(x),r-c[sm4-8]:not(x) > *,[data-r-c][data-sm4-8] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[sm5-8]:not(x),[data-sm5-8]:not(x),r-c[sm5-8]:not(x) > *,[data-r-c][data-sm5-8] > *{width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}[sm6-8]:not(x),[data-sm6-8]:not(x),r-c[sm6-8]:not(x) > *,[data-r-c][data-sm6-8] > *{width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}[sm7-8]:not(x),[data-sm7-8]:not(x),r-c[sm7-8]:not(x) > *,[data-r-c][data-sm7-8] > *{width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}[join] > [sm1-1],[join] > [data-sm1-1],[data-join] > [sm1-1],[data-join] > [data-sm1-1],[join][sm1-1]:not([r-c]) > *,[data-join][data-sm1-1]:not([x]) > *{width:100%}[join] > [sm1-2],[join] > [data-sm1-2],[data-join] > [sm1-2],[data-join] > [data-sm1-2],[join][sm1-2]:not([r-c]) > *,[data-join][data-sm1-2]:not([x]) > *,[join] > [sm2-4],[join] > [data-sm2-4],[data-join] > [sm2-4],[data-join] > [data-sm2-4],[join][sm2-4]:not([r-c]) > *,[data-join][data-sm2-4]:not([x]) > *,[join] > [sm3-6],[join] > [data-sm3-6],[data-join] > [sm3-6],[data-join] > [data-sm3-6],[join][sm3-6]:not([r-c]) > *,[data-join][data-sm3-6]:not([x]) > *,[join] > [sm4-8],[join] > [data-sm4-8],[data-join] > [sm4-8],[data-join] > [data-sm4-8],[join][sm4-8]:not([r-c]) > *,[data-join][data-sm4-8]:not([x]) > *{width:50%}[join] > [sm1-3],[join] > [data-sm1-3],[data-join] > [sm1-3],[data-join] > [data-sm1-3],[join][sm1-3]:not([r-c]) > *,[data-join][data-sm1-3]:not([x]) > *,[join] > [sm2-6],[join] > [data-sm2-6],[data-join] > [sm2-6],[data-join] > [data-sm2-6],[join][sm2-6]:not([r-c]) > *,[data-join][data-sm2-6]:not([x]) > *{width:calc(100%/3)}[join] > [sm2-3],[join] > [data-sm2-3],[data-join] > [sm2-3],[data-join] > [data-sm2-3],[join][sm2-3]:not([r-c]) > *,[data-join][data-sm2-3]:not([x]) > *,[join] > [sm4-6],[join] > [data-sm4-6],[data-join] > [sm4-6],[data-join] > [data-sm4-6],[join][sm4-6]:not([r-c]) > *,[data-join][data-sm4-6]:not([x]) > *{width:calc(100%/3*2)}[join] > [sm1-4],[join] > [data-sm1-4],[data-join] > [sm1-4],[data-join] > [data-sm1-4],[join][sm1-4]:not([r-c]) > *,[data-join][data-sm1-4]:not([x]) > *,[join] > [sm2-8],[join] > [data-sm2-8],[data-join] > [sm2-8],[data-join] > [data-sm2-8],[join][sm2-8]:not([r-c]) > *,[data-join][data-sm2-8]:not([x]) > *{width:25%}[join] > [sm3-4],[join] > [data-sm3-4],[data-join] > [sm3-4],[data-join] > [data-sm3-4],[join][sm3-4]:not([r-c]) > *,[data-join][data-sm3-4]:not([x]) > *,[join] > [sm6-8],[join] > [data-sm6-8],[data-join] > [sm6-8],[data-join] > [data-sm6-8],[join][sm6-8]:not([r-c]) > *,[data-join][data-sm6-8]:not([x]) > *{width:75%}[join] > [sm1-5],[join] > [data-sm1-5],[data-join] > [sm1-5],[data-join] > [data-sm1-5],[join][sm1-5]:not([r-c]) > *,[data-join][data-sm1-5]:not([x]) > *{width:20%}[join] > [sm2-5],[join] > [data-sm2-5],[data-join] > [sm2-5],[data-join] > [data-sm2-5],[join][sm2-5]:not([r-c]) > *,[data-join][data-sm2-5]:not([x]) > *{width:40%}[join] > [sm3-5],[join] > [data-sm3-5],[data-join] > [sm3-5],[data-join] > [data-sm3-5],[join][sm3-5]:not([r-c]) > *,[data-join][data-sm3-5]:not([x]) > *{width:60%}[join] > [sm4-5],[join] > [data-sm4-5],[data-join] > [sm4-5],[data-join] > [data-sm4-5],[join][sm4-5]:not([r-c]) > *,[data-join][data-sm4-5]:not([x]) > *{width:80%}[join] > [sm1-6],[join] > [data-sm1-6],[data-join] > [sm1-6],[data-join] > [data-sm1-6],[join][sm1-6]:not([r-c]) > *,[data-join][data-sm1-6]:not([x]) > *{width:calc(100%/6)}[join] > [sm5-6],[join] > [data-sm5-6],[data-join] > [sm5-6],[data-join] > [data-sm5-6],[join][sm5-6]:not([r-c]) > *,[data-join][data-sm5-6]:not([x]) > *{width:calc(100%/6*5)}[join] > [sm1-7],[join] > [data-sm1-7],[data-join] > [sm1-7],[data-join] > [data-sm1-7],[join][sm1-7]:not([r-c]) > *,[data-join][data-sm1-7]:not([x]) > *{width:calc(100%/7)}[join] > [sm2-7],[join] > [data-sm2-7],[data-join] > [sm2-7],[data-join] > [data-sm2-7],[join][sm2-7]:not([r-c]) > *,[data-join][data-sm2-7]:not([x]) > *{width:calc(100%/7*2)}[join] > [sm3-7],[join] > [data-sm3-7],[data-join] > [sm3-7],[data-join] > [data-sm3-7],[join][sm3-7]:not([r-c]) > *,[data-join][data-sm3-7]:not([x]) > *{width:calc(100%/7*3)}[join] > [sm4-7],[join] > [data-sm4-7],[data-join] > [sm4-7],[data-join] > [data-sm4-7],[join][sm4-7]:not([r-c]) > *,[data-join][data-sm4-7]:not([x]) > *{width:calc(100%/7*4)}[join] > [sm5-7],[join] > [data-sm5-7],[data-join] > [sm5-7],[data-join] > [data-sm5-7],[join][sm5-7]:not([r-c]) > *,[data-join][data-sm5-7]:not([x]) > *{width:calc(100%/7*5)}[join] > [sm6-7],[join] > [data-sm6-7],[data-join] > [sm6-7],[data-join] > [data-sm6-7],[join][sm6-7]:not([r-c]) > *,[data-join][data-sm6-7]:not([x]) > *{width:calc(100%/7*6)}[join] > [sm1-8],[join] > [data-sm1-8],[data-join] > [sm1-8],[data-join] > [data-sm1-8],[join][sm1-8]:not([r-c]) > *,[data-join][data-sm1-8]:not([x]) > *{width:calc(100%/8)}[join] > [sm3-8],[join] > [data-sm3-8],[data-join] > [sm3-8],[data-join] > [data-sm3-8],[join][sm3-8]:not([r-c]) > *,[data-join][data-sm3-8]:not([x]) > *{width:calc(100%/8*3)}[join] > [sm5-8],[join] > [data-sm5-8],[data-join] > [sm5-8],[data-join] > [data-sm5-8],[join][sm5-8]:not([r-c]) > *,[data-join][data-sm5-8]:not([x]) > *{width:calc(100%/8*5)}[join] > [sm7-8],[join] > [data-sm7-8],[data-join] > [sm7-8],[data-join] > [data-sm7-8],[join][sm7-8]:not([r-c]) > *,[data-join][data-sm7-8]:not([x]) > *{width:calc(100%/8*7)}[sm1],[data-sm1]{order:-8}[sm2],[data-sm2]{order:-7}[sm3],[data-sm3]{order:-6}[sm4],[data-sm4]{order:-5}[sm5],[data-sm5]{order:-4}[sm6],[data-sm6]{order:-3}[sm7],[data-sm7]{order:-2}[sm8],[data-sm8]{order:-1}}@media (min-width:900px){[md1-1]:not(x),[data-md1-1]:not(x),r-c[md1-1]:not(x) > *,[data-r-c][data-md1-1] > *{width:100%}[md1-2]:not(x),[data-md1-2]:not(x),r-c[md1-2]:not(x) > *,[data-r-c][data-md1-2] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[md1-3]:not(x),[data-md1-3]:not(x),r-c[md1-3]:not(x) > *,[data-r-c][data-md1-3] > *{width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}[md2-3]:not(x),[data-md2-3]:not(x),r-c[md2-3]:not(x) > *,[data-r-c][data-md2-3] > *{width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}[md1-4]:not(x),[data-md1-4]:not(x),r-c[md1-4]:not(x) > *,[data-r-c][data-md1-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4*3)}[md2-4]:not(x),[data-md2-4]:not(x),r-c[md2-4]:not(x) > *,[data-r-c][data-md2-4] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[md3-4]:not(x),[data-md3-4]:not(x),r-c[md3-4]:not(x) > *,[data-r-c][data-md3-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4)}[md1-5]:not(x),[data-md1-5]:not(x),r-c[md1-5]:not(x) > *,[data-r-c][data-md1-5] > *{width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}[md2-5]:not(x),[data-md2-5]:not(x),r-c[md2-5]:not(x) > *,[data-r-c][data-md2-5] > *{width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}[md3-5]:not(x),[data-md3-5]:not(x),r-c[md3-5]:not(x) > *,[data-r-c][data-md3-5] > *{width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}[md4-5]:not(x),[data-md4-5]:not(x),r-c[md4-5]:not(x) > *,[data-r-c][data-md4-5] > *{width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}[md1-6]:not(x),[data-md1-6]:not(x),r-c[md1-6]:not(x) > *,[data-r-c][data-md1-6] > *{width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}[md2-6]:not(x),[data-md2-6]:not(x),r-c[md2-6]:not(x) > *,[data-r-c][data-md2-6] > *{width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}[md3-6]:not(x),[data-md3-6]:not(x),r-c[md3-6]:not(x) > *,[data-r-c][data-md3-6] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[md4-6]:not(x),[data-md4-6]:not(x),r-c[md4-6]:not(x) > *,[data-r-c][data-md4-6] > *{width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}[md5-6]:not(x),[data-md5-6]:not(x),r-c[md5-6]:not(x) > *,[data-r-c][data-md5-6] > *{width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}[md1-7]:not(x),[data-md1-7]:not(x),r-c[md1-7]:not(x) > *,[data-r-c][data-md1-7] > *{width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}[md2-7]:not(x),[data-md2-7]:not(x),r-c[md2-7]:not(x) > *,[data-r-c][data-md2-7] > *{width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}[md3-7]:not(x),[data-md3-7]:not(x),r-c[md3-7]:not(x) > *,[data-r-c][data-md3-7] > *{width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}[md4-7]:not(x),[data-md4-7]:not(x),r-c[md4-7]:not(x) > *,[data-r-c][data-md4-7] > *{width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}[md5-7]:not(x),[data-md5-7]:not(x),r-c[md5-7]:not(x) > *,[data-r-c][data-md5-7] > *{width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}[md6-7]:not(x),[data-md6-7]:not(x),r-c[md6-7]:not(x) > *,[data-r-c][data-md6-7] > *{width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}[md1-8]:not(x),[data-md1-8]:not(x),r-c[md1-8]:not(x) > *,[data-r-c][data-md1-8] > *{width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}[md2-8]:not(x),[data-md2-8]:not(x),r-c[md2-8]:not(x) > *,[data-r-c][data-md2-8] > *{width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}[md3-8]:not(x),[data-md3-8]:not(x),r-c[md3-8]:not(x) > *,[data-r-c][data-md3-8] > *{width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}[md4-8]:not(x),[data-md4-8]:not(x),r-c[md4-8]:not(x) > *,[data-r-c][data-md4-8] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[md5-8]:not(x),[data-md5-8]:not(x),r-c[md5-8]:not(x) > *,[data-r-c][data-md5-8] > *{width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}[md6-8]:not(x),[data-md6-8]:not(x),r-c[md6-8]:not(x) > *,[data-r-c][data-md6-8] > *{width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}[md7-8]:not(x),[data-md7-8]:not(x),r-c[md7-8]:not(x) > *,[data-r-c][data-md7-8] > *{width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}[join] > [md1-1],[join] > [data-md1-1],[data-join] > [md1-1],[data-join] > [data-md1-1],[join][md1-1]:not([r-c]) > *,[data-join][data-md1-1]:not([x]) > *{width:100%}[join] > [md1-2],[join] > [data-md1-2],[data-join] > [md1-2],[data-join] > [data-md1-2],[join][md1-2]:not([r-c]) > *,[data-join][data-md1-2]:not([x]) > *,[join] > [md2-4],[join] > [data-md2-4],[data-join] > [md2-4],[data-join] > [data-md2-4],[join][md2-4]:not([r-c]) > *,[data-join][data-md2-4]:not([x]) > *,[join] > [md3-6],[join] > [data-md3-6],[data-join] > [md3-6],[data-join] > [data-md3-6],[join][md3-6]:not([r-c]) > *,[data-join][data-md3-6]:not([x]) > *,[join] > [md4-8],[join] > [data-md4-8],[data-join] > [md4-8],[data-join] > [data-md4-8],[join][md4-8]:not([r-c]) > *,[data-join][data-md4-8]:not([x]) > *{width:50%}[join] > [md1-3],[join] > [data-md1-3],[data-join] > [md1-3],[data-join] > [data-md1-3],[join][md1-3]:not([r-c]) > *,[data-join][data-md1-3]:not([x]) > *,[join] > [md2-6],[join] > [data-md2-6],[data-join] > [md2-6],[data-join] > [data-md2-6],[join][md2-6]:not([r-c]) > *,[data-join][data-md2-6]:not([x]) > *{width:calc(100%/3)}[join] > [md2-3],[join] > [data-md2-3],[data-join] > [md2-3],[data-join] > [data-md2-3],[join][md2-3]:not([r-c]) > *,[data-join][data-md2-3]:not([x]) > *,[join] > [md4-6],[join] > [data-md4-6],[data-join] > [md4-6],[data-join] > [data-md4-6],[join][md4-6]:not([r-c]) > *,[data-join][data-md4-6]:not([x]) > *{width:calc(100%/3*2)}[join] > [md1-4],[join] > [data-md1-4],[data-join] > [md1-4],[data-join] > [data-md1-4],[join][md1-4]:not([r-c]) > *,[data-join][data-md1-4]:not([x]) > *,[join] > [md2-8],[join] > [data-md2-8],[data-join] > [md2-8],[data-join] > [data-md2-8],[join][md2-8]:not([r-c]) > *,[data-join][data-md2-8]:not([x]) > *{width:25%}[join] > [md3-4],[join] > [data-md3-4],[data-join] > [md3-4],[data-join] > [data-md3-4],[join][md3-4]:not([r-c]) > *,[data-join][data-md3-4]:not([x]) > *,[join] > [md6-8],[join] > [data-md6-8],[data-join] > [md6-8],[data-join] > [data-md6-8],[join][md6-8]:not([r-c]) > *,[data-join][data-md6-8]:not([x]) > *{width:75%}[join] > [md1-5],[join] > [data-md1-5],[data-join] > [md1-5],[data-join] > [data-md1-5],[join][md1-5]:not([r-c]) > *,[data-join][data-md1-5]:not([x]) > *{width:20%}[join] > [md2-5],[join] > [data-md2-5],[data-join] > [md2-5],[data-join] > [data-md2-5],[join][md2-5]:not([r-c]) > *,[data-join][data-md2-5]:not([x]) > *{width:40%}[join] > [md3-5],[join] > [data-md3-5],[data-join] > [md3-5],[data-join] > [data-md3-5],[join][md3-5]:not([r-c]) > *,[data-join][data-md3-5]:not([x]) > *{width:60%}[join] > [md4-5],[join] > [data-md4-5],[data-join] > [md4-5],[data-join] > [data-md4-5],[join][md4-5]:not([r-c]) > *,[data-join][data-md4-5]:not([x]) > *{width:80%}[join] > [md1-6],[join] > [data-md1-6],[data-join] > [md1-6],[data-join] > [data-md1-6],[join][md1-6]:not([r-c]) > *,[data-join][data-md1-6]:not([x]) > *{width:calc(100%/6)}[join] > [md5-6],[join] > [data-md5-6],[data-join] > [md5-6],[data-join] > [data-md5-6],[join][md5-6]:not([r-c]) > *,[data-join][data-md5-6]:not([x]) > *{width:calc(100%/6*5)}[join] > [md1-7],[join] > [data-md1-7],[data-join] > [md1-7],[data-join] > [data-md1-7],[join][md1-7]:not([r-c]) > *,[data-join][data-md1-7]:not([x]) > *{width:calc(100%/7)}[join] > [md2-7],[join] > [data-md2-7],[data-join] > [md2-7],[data-join] > [data-md2-7],[join][md2-7]:not([r-c]) > *,[data-join][data-md2-7]:not([x]) > *{width:calc(100%/7*2)}[join] > [md3-7],[join] > [data-md3-7],[data-join] > [md3-7],[data-join] > [data-md3-7],[join][md3-7]:not([r-c]) > *,[data-join][data-md3-7]:not([x]) > *{width:calc(100%/7*3)}[join] > [md4-7],[join] > [data-md4-7],[data-join] > [md4-7],[data-join] > [data-md4-7],[join][md4-7]:not([r-c]) > *,[data-join][data-md4-7]:not([x]) > *{width:calc(100%/7*4)}[join] > [md5-7],[join] > [data-md5-7],[data-join] > [md5-7],[data-join] > [data-md5-7],[join][md5-7]:not([r-c]) > *,[data-join][data-md5-7]:not([x]) > *{width:calc(100%/7*5)}[join] > [md6-7],[join] > [data-md6-7],[data-join] > [md6-7],[data-join] > [data-md6-7],[join][md6-7]:not([r-c]) > *,[data-join][data-md6-7]:not([x]) > *{width:calc(100%/7*6)}[join] > [md1-8],[join] > [data-md1-8],[data-join] > [md1-8],[data-join] > [data-md1-8],[join][md1-8]:not([r-c]) > *,[data-join][data-md1-8]:not([x]) > *{width:calc(100%/8)}[join] > [md3-8],[join] > [data-md3-8],[data-join] > [md3-8],[data-join] > [data-md3-8],[join][md3-8]:not([r-c]) > *,[data-join][data-md3-8]:not([x]) > *{width:calc(100%/8*3)}[join] > [md5-8],[join] > [data-md5-8],[data-join] > [md5-8],[data-join] > [data-md5-8],[join][md5-8]:not([r-c]) > *,[data-join][data-md5-8]:not([x]) > *{width:calc(100%/8*5)}[join] > [md7-8],[join] > [data-md7-8],[data-join] > [md7-8],[data-join] > [data-md7-8],[join][md7-8]:not([r-c]) > *,[data-join][data-md7-8]:not([x]) > *{width:calc(100%/8*7)}[md1],[data-md1]{order:-8}[md2],[data-md2]{order:-7}[md3],[data-md3]{order:-6}[md4],[data-md4]{order:-5}[md5],[data-md5]{order:-4}[md6],[data-md6]{order:-3}[md7],[data-md7]{order:-2}[md8],[data-md8]{order:-1}}@media (min-width:1200px){[lg1-1]:not(x),[data-lg1-1]:not(x),r-c[lg1-1]:not(x) > *,[data-r-c][data-lg1-1] > *{width:100%}[lg1-2]:not(x),[data-lg1-2]:not(x),r-c[lg1-2]:not(x) > *,[data-r-c][data-lg1-2] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[lg1-3]:not(x),[data-lg1-3]:not(x),r-c[lg1-3]:not(x) > *,[data-r-c][data-lg1-3] > *{width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}[lg2-3]:not(x),[data-lg2-3]:not(x),r-c[lg2-3]:not(x) > *,[data-r-c][data-lg2-3] > *{width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}[lg1-4]:not(x),[data-lg1-4]:not(x),r-c[lg1-4]:not(x) > *,[data-r-c][data-lg1-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4*3)}[lg2-4]:not(x),[data-lg2-4]:not(x),r-c[lg2-4]:not(x) > *,[data-r-c][data-lg2-4] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[lg3-4]:not(x),[data-lg3-4]:not(x),r-c[lg3-4]:not(x) > *,[data-r-c][data-lg3-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4)}[lg1-5]:not(x),[data-lg1-5]:not(x),r-c[lg1-5]:not(x) > *,[data-r-c][data-lg1-5] > *{width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}[lg2-5]:not(x),[data-lg2-5]:not(x),r-c[lg2-5]:not(x) > *,[data-r-c][data-lg2-5] > *{width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}[lg3-5]:not(x),[data-lg3-5]:not(x),r-c[lg3-5]:not(x) > *,[data-r-c][data-lg3-5] > *{width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}[lg4-5]:not(x),[data-lg4-5]:not(x),r-c[lg4-5]:not(x) > *,[data-r-c][data-lg4-5] > *{width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}[lg1-6]:not(x),[data-lg1-6]:not(x),r-c[lg1-6]:not(x) > *,[data-r-c][data-lg1-6] > *{width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}[lg2-6]:not(x),[data-lg2-6]:not(x),r-c[lg2-6]:not(x) > *,[data-r-c][data-lg2-6] > *{width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}[lg3-6]:not(x),[data-lg3-6]:not(x),r-c[lg3-6]:not(x) > *,[data-r-c][data-lg3-6] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[lg4-6]:not(x),[data-lg4-6]:not(x),r-c[lg4-6]:not(x) > *,[data-r-c][data-lg4-6] > *{width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}[lg5-6]:not(x),[data-lg5-6]:not(x),r-c[lg5-6]:not(x) > *,[data-r-c][data-lg5-6] > *{width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}[lg1-7]:not(x),[data-lg1-7]:not(x),r-c[lg1-7]:not(x) > *,[data-r-c][data-lg1-7] > *{width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}[lg2-7]:not(x),[data-lg2-7]:not(x),r-c[lg2-7]:not(x) > *,[data-r-c][data-lg2-7] > *{width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}[lg3-7]:not(x),[data-lg3-7]:not(x),r-c[lg3-7]:not(x) > *,[data-r-c][data-lg3-7] > *{width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}[lg4-7]:not(x),[data-lg4-7]:not(x),r-c[lg4-7]:not(x) > *,[data-r-c][data-lg4-7] > *{width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}[lg5-7]:not(x),[data-lg5-7]:not(x),r-c[lg5-7]:not(x) > *,[data-r-c][data-lg5-7] > *{width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}[lg6-7]:not(x),[data-lg6-7]:not(x),r-c[lg6-7]:not(x) > *,[data-r-c][data-lg6-7] > *{width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}[lg1-8]:not(x),[data-lg1-8]:not(x),r-c[lg1-8]:not(x) > *,[data-r-c][data-lg1-8] > *{width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}[lg2-8]:not(x),[data-lg2-8]:not(x),r-c[lg2-8]:not(x) > *,[data-r-c][data-lg2-8] > *{width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}[lg3-8]:not(x),[data-lg3-8]:not(x),r-c[lg3-8]:not(x) > *,[data-r-c][data-lg3-8] > *{width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}[lg4-8]:not(x),[data-lg4-8]:not(x),r-c[lg4-8]:not(x) > *,[data-r-c][data-lg4-8] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[lg5-8]:not(x),[data-lg5-8]:not(x),r-c[lg5-8]:not(x) > *,[data-r-c][data-lg5-8] > *{width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}[lg6-8]:not(x),[data-lg6-8]:not(x),r-c[lg6-8]:not(x) > *,[data-r-c][data-lg6-8] > *{width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}[lg7-8]:not(x),[data-lg7-8]:not(x),r-c[lg7-8]:not(x) > *,[data-r-c][data-lg7-8] > *{width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}[join] > [lg1-1],[join] > [data-lg1-1],[data-join] > [lg1-1],[data-join] > [data-lg1-1],[join][lg1-1]:not([r-c]) > *,[data-join][data-lg1-1]:not([x]) > *{width:100%}[join] > [lg1-2],[join] > [data-lg1-2],[data-join] > [lg1-2],[data-join] > [data-lg1-2],[join][lg1-2]:not([r-c]) > *,[data-join][data-lg1-2]:not([x]) > *,[join] > [lg2-4],[join] > [data-lg2-4],[data-join] > [lg2-4],[data-join] > [data-lg2-4],[join][lg2-4]:not([r-c]) > *,[data-join][data-lg2-4]:not([x]) > *,[join] > [lg3-6],[join] > [data-lg3-6],[data-join] > [lg3-6],[data-join] > [data-lg3-6],[join][lg3-6]:not([r-c]) > *,[data-join][data-lg3-6]:not([x]) > *,[join] > [lg4-8],[join] > [data-lg4-8],[data-join] > [lg4-8],[data-join] > [data-lg4-8],[join][lg4-8]:not([r-c]) > *,[data-join][data-lg4-8]:not([x]) > *{width:50%}[join] > [lg1-3],[join] > [data-lg1-3],[data-join] > [lg1-3],[data-join] > [data-lg1-3],[join][lg1-3]:not([r-c]) > *,[data-join][data-lg1-3]:not([x]) > *,[join] > [lg2-6],[join] > [data-lg2-6],[data-join] > [lg2-6],[data-join] > [data-lg2-6],[join][lg2-6]:not([r-c]) > *,[data-join][data-lg2-6]:not([x]) > *{width:calc(100%/3)}[join] > [lg2-3],[join] > [data-lg2-3],[data-join] > [lg2-3],[data-join] > [data-lg2-3],[join][lg2-3]:not([r-c]) > *,[data-join][data-lg2-3]:not([x]) > *,[join] > [lg4-6],[join] > [data-lg4-6],[data-join] > [lg4-6],[data-join] > [data-lg4-6],[join][lg4-6]:not([r-c]) > *,[data-join][data-lg4-6]:not([x]) > *{width:calc(100%/3*2)}[join] > [lg1-4],[join] > [data-lg1-4],[data-join] > [lg1-4],[data-join] > [data-lg1-4],[join][lg1-4]:not([r-c]) > *,[data-join][data-lg1-4]:not([x]) > *,[join] > [lg2-8],[join] > [data-lg2-8],[data-join] > [lg2-8],[data-join] > [data-lg2-8],[join][lg2-8]:not([r-c]) > *,[data-join][data-lg2-8]:not([x]) > *{width:25%}[join] > [lg3-4],[join] > [data-lg3-4],[data-join] > [lg3-4],[data-join] > [data-lg3-4],[join][lg3-4]:not([r-c]) > *,[data-join][data-lg3-4]:not([x]) > *,[join] > [lg6-8],[join] > [data-lg6-8],[data-join] > [lg6-8],[data-join] > [data-lg6-8],[join][lg6-8]:not([r-c]) > *,[data-join][data-lg6-8]:not([x]) > *{width:75%}[join] > [lg1-5],[join] > [data-lg1-5],[data-join] > [lg1-5],[data-join] > [data-lg1-5],[join][lg1-5]:not([r-c]) > *,[data-join][data-lg1-5]:not([x]) > *{width:20%}[join] > [lg2-5],[join] > [data-lg2-5],[data-join] > [lg2-5],[data-join] > [data-lg2-5],[join][lg2-5]:not([r-c]) > *,[data-join][data-lg2-5]:not([x]) > *{width:40%}[join] > [lg3-5],[join] > [data-lg3-5],[data-join] > [lg3-5],[data-join] > [data-lg3-5],[join][lg3-5]:not([r-c]) > *,[data-join][data-lg3-5]:not([x]) > *{width:60%}[join] > [lg4-5],[join] > [data-lg4-5],[data-join] > [lg4-5],[data-join] > [data-lg4-5],[join][lg4-5]:not([r-c]) > *,[data-join][data-lg4-5]:not([x]) > *{width:80%}[join] > [lg1-6],[join] > [data-lg1-6],[data-join] > [lg1-6],[data-join] > [data-lg1-6],[join][lg1-6]:not([r-c]) > *,[data-join][data-lg1-6]:not([x]) > *{width:calc(100%/6)}[join] > [lg5-6],[join] > [data-lg5-6],[data-join] > [lg5-6],[data-join] > [data-lg5-6],[join][lg5-6]:not([r-c]) > *,[data-join][data-lg5-6]:not([x]) > *{width:calc(100%/6*5)}[join] > [lg1-7],[join] > [data-lg1-7],[data-join] > [lg1-7],[data-join] > [data-lg1-7],[join][lg1-7]:not([r-c]) > *,[data-join][data-lg1-7]:not([x]) > *{width:calc(100%/7)}[join] > [lg2-7],[join] > [data-lg2-7],[data-join] > [lg2-7],[data-join] > [data-lg2-7],[join][lg2-7]:not([r-c]) > *,[data-join][data-lg2-7]:not([x]) > *{width:calc(100%/7*2)}[join] > [lg3-7],[join] > [data-lg3-7],[data-join] > [lg3-7],[data-join] > [data-lg3-7],[join][lg3-7]:not([r-c]) > *,[data-join][data-lg3-7]:not([x]) > *{width:calc(100%/7*3)}[join] > [lg4-7],[join] > [data-lg4-7],[data-join] > [lg4-7],[data-join] > [data-lg4-7],[join][lg4-7]:not([r-c]) > *,[data-join][data-lg4-7]:not([x]) > *{width:calc(100%/7*4)}[join] > [lg5-7],[join] > [data-lg5-7],[data-join] > [lg5-7],[data-join] > [data-lg5-7],[join][lg5-7]:not([r-c]) > *,[data-join][data-lg5-7]:not([x]) > *{width:calc(100%/7*5)}[join] > [lg6-7],[join] > [data-lg6-7],[data-join] > [lg6-7],[data-join] > [data-lg6-7],[join][lg6-7]:not([r-c]) > *,[data-join][data-lg6-7]:not([x]) > *{width:calc(100%/7*6)}[join] > [lg1-8],[join] > [data-lg1-8],[data-join] > [lg1-8],[data-join] > [data-lg1-8],[join][lg1-8]:not([r-c]) > *,[data-join][data-lg1-8]:not([x]) > *{width:calc(100%/8)}[join] > [lg3-8],[join] > [data-lg3-8],[data-join] > [lg3-8],[data-join] > [data-lg3-8],[join][lg3-8]:not([r-c]) > *,[data-join][data-lg3-8]:not([x]) > *{width:calc(100%/8*3)}[join] > [lg5-8],[join] > [data-lg5-8],[data-join] > [lg5-8],[data-join] > [data-lg5-8],[join][lg5-8]:not([r-c]) > *,[data-join][data-lg5-8]:not([x]) > *{width:calc(100%/8*5)}[join] > [lg7-8],[join] > [data-lg7-8],[data-join] > [lg7-8],[data-join] > [data-lg7-8],[join][lg7-8]:not([r-c]) > *,[data-join][data-lg7-8]:not([x]) > *{width:calc(100%/8*7)}[lg1],[data-lg1]{order:-8}[lg2],[data-lg2]{order:-7}[lg3],[data-lg3]{order:-6}[lg4],[data-lg4]{order:-5}[lg5],[data-lg5]{order:-4}[lg6],[data-lg6]{order:-3}[lg7],[data-lg7]{order:-2}[lg8],[data-lg8]{order:-1}}@media (min-width:1800px){[xl1-1]:not(x),[data-xl1-1]:not(x),r-c[xl1-1]:not(x) > *,[data-r-c][data-xl1-1] > *{width:100%}[xl1-2]:not(x),[data-xl1-2]:not(x),r-c[xl1-2]:not(x) > *,[data-r-c][data-xl1-2] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[xl1-3]:not(x),[data-xl1-3]:not(x),r-c[xl1-3]:not(x) > *,[data-r-c][data-xl1-3] > *{width:calc(100%/3 - (5.455px + 1.42041vw)/3*2)}[xl2-3]:not(x),[data-xl2-3]:not(x),r-c[xl2-3]:not(x) > *,[data-r-c][data-xl2-3] > *{width:calc(100%/3*2 - (5.455px + 1.42041vw)/3)}[xl1-4]:not(x),[data-xl1-4]:not(x),r-c[xl1-4]:not(x) > *,[data-r-c][data-xl1-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4*3)}[xl2-4]:not(x),[data-xl2-4]:not(x),r-c[xl2-4]:not(x) > *,[data-r-c][data-xl2-4] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[xl3-4]:not(x),[data-xl3-4]:not(x),r-c[xl3-4]:not(x) > *,[data-r-c][data-xl3-4] > *{width:calc(25% - (5.455px + 1.42041vw)/4)}[xl1-5]:not(x),[data-xl1-5]:not(x),r-c[xl1-5]:not(x) > *,[data-r-c][data-xl1-5] > *{width:calc(100%/5 - (5.455px + 1.42041vw)/5*4)}[xl2-5]:not(x),[data-xl2-5]:not(x),r-c[xl2-5]:not(x) > *,[data-r-c][data-xl2-5] > *{width:calc(100%/5*2 - (5.455px + 1.42041vw)/5*3)}[xl3-5]:not(x),[data-xl3-5]:not(x),r-c[xl3-5]:not(x) > *,[data-r-c][data-xl3-5] > *{width:calc(100%/5*3 - (5.455px + 1.42041vw)/5*2)}[xl4-5]:not(x),[data-xl4-5]:not(x),r-c[xl4-5]:not(x) > *,[data-r-c][data-xl4-5] > *{width:calc(100%/5*4 - (5.455px + 1.42041vw)/5)}[xl1-6]:not(x),[data-xl1-6]:not(x),r-c[xl1-6]:not(x) > *,[data-r-c][data-xl1-6] > *{width:calc(100%/6 - (5.455px + 1.42041vw)/6*5)}[xl2-6]:not(x),[data-xl2-6]:not(x),r-c[xl2-6]:not(x) > *,[data-r-c][data-xl2-6] > *{width:calc(100%/6*2 - (5.455px + 1.42041vw)/6*4)}[xl3-6]:not(x),[data-xl3-6]:not(x),r-c[xl3-6]:not(x) > *,[data-r-c][data-xl3-6] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[xl4-6]:not(x),[data-xl4-6]:not(x),r-c[xl4-6]:not(x) > *,[data-r-c][data-xl4-6] > *{width:calc(100%/6*4 - (5.455px + 1.42041vw)/6*2)}[xl5-6]:not(x),[data-xl5-6]:not(x),r-c[xl5-6]:not(x) > *,[data-r-c][data-xl5-6] > *{width:calc(100%/6*5 - (5.455px + 1.42041vw)/6)}[xl1-7]:not(x),[data-xl1-7]:not(x),r-c[xl1-7]:not(x) > *,[data-r-c][data-xl1-7] > *{width:calc(100%/7 - (5.455px + 1.42041vw)/7*6)}[xl2-7]:not(x),[data-xl2-7]:not(x),r-c[xl2-7]:not(x) > *,[data-r-c][data-xl2-7] > *{width:calc(100%/7*2 - (5.455px + 1.42041vw)/7*5)}[xl3-7]:not(x),[data-xl3-7]:not(x),r-c[xl3-7]:not(x) > *,[data-r-c][data-xl3-7] > *{width:calc(100%/7*3 - (5.455px + 1.42041vw)/7*4)}[xl4-7]:not(x),[data-xl4-7]:not(x),r-c[xl4-7]:not(x) > *,[data-r-c][data-xl4-7] > *{width:calc(100%/7*4 - (5.455px + 1.42041vw)/7*3)}[xl5-7]:not(x),[data-xl5-7]:not(x),r-c[xl5-7]:not(x) > *,[data-r-c][data-xl5-7] > *{width:calc(100%/7*5 - (5.455px + 1.42041vw)/7*2)}[xl6-7]:not(x),[data-xl6-7]:not(x),r-c[xl6-7]:not(x) > *,[data-r-c][data-xl6-7] > *{width:calc(100%/7*6 - (5.455px + 1.42041vw)/7)}[xl1-8]:not(x),[data-xl1-8]:not(x),r-c[xl1-8]:not(x) > *,[data-r-c][data-xl1-8] > *{width:calc(100%/8 - (5.455px + 1.42041vw)/8*7)}[xl2-8]:not(x),[data-xl2-8]:not(x),r-c[xl2-8]:not(x) > *,[data-r-c][data-xl2-8] > *{width:calc(100%/8*2 - (5.455px + 1.42041vw)/8*6)}[xl3-8]:not(x),[data-xl3-8]:not(x),r-c[xl3-8]:not(x) > *,[data-r-c][data-xl3-8] > *{width:calc(100%/8*3 - (5.455px + 1.42041vw)/8*5)}[xl4-8]:not(x),[data-xl4-8]:not(x),r-c[xl4-8]:not(x) > *,[data-r-c][data-xl4-8] > *{width:calc(50% - (5.455px + 1.42041vw)/2)}[xl5-8]:not(x),[data-xl5-8]:not(x),r-c[xl5-8]:not(x) > *,[data-r-c][data-xl5-8] > *{width:calc(100%/8*5 - (5.455px + 1.42041vw)/8*3)}[xl6-8]:not(x),[data-xl6-8]:not(x),r-c[xl6-8]:not(x) > *,[data-r-c][data-xl6-8] > *{width:calc(100%/8*6 - (5.455px + 1.42041vw)/8*2)}[xl7-8]:not(x),[data-xl7-8]:not(x),r-c[xl7-8]:not(x) > *,[data-r-c][data-xl7-8] > *{width:calc(100%/8*7 - (5.455px + 1.42041vw)/8)}[join] > [xl1-1],[join] > [data-xl1-1],[data-join] > [xl1-1],[data-join] > [data-xl1-1],[join][xl1-1]:not([r-c]) > *,[data-join][data-xl1-1]:not([x]) > *{width:100%}[join] > [xl1-2],[join] > [data-xl1-2],[data-join] > [xl1-2],[data-join] > [data-xl1-2],[join][xl1-2]:not([r-c]) > *,[data-join][data-xl1-2]:not([x]) > *,[join] > [xl2-4],[join] > [data-xl2-4],[data-join] > [xl2-4],[data-join] > [data-xl2-4],[join][xl2-4]:not([r-c]) > *,[data-join][data-xl2-4]:not([x]) > *,[join] > [xl3-6],[join] > [data-xl3-6],[data-join] > [xl3-6],[data-join] > [data-xl3-6],[join][xl3-6]:not([r-c]) > *,[data-join][data-xl3-6]:not([x]) > *,[join] > [xl4-8],[join] > [data-xl4-8],[data-join] > [xl4-8],[data-join] > [data-xl4-8],[join][xl4-8]:not([r-c]) > *,[data-join][data-xl4-8]:not([x]) > *{width:50%}[join] > [xl1-3],[join] > [data-xl1-3],[data-join] > [xl1-3],[data-join] > [data-xl1-3],[join][xl1-3]:not([r-c]) > *,[data-join][data-xl1-3]:not([x]) > *,[join] > [xl2-6],[join] > [data-xl2-6],[data-join] > [xl2-6],[data-join] > [data-xl2-6],[join][xl2-6]:not([r-c]) > *,[data-join][data-xl2-6]:not([x]) > *{width:calc(100%/3)}[join] > [xl2-3],[join] > [data-xl2-3],[data-join] > [xl2-3],[data-join] > [data-xl2-3],[join][xl2-3]:not([r-c]) > *,[data-join][data-xl2-3]:not([x]) > *,[join] > [xl4-6],[join] > [data-xl4-6],[data-join] > [xl4-6],[data-join] > [data-xl4-6],[join][xl4-6]:not([r-c]) > *,[data-join][data-xl4-6]:not([x]) > *{width:calc(100%/3*2)}[join] > [xl1-4],[join] > [data-xl1-4],[data-join] > [xl1-4],[data-join] > [data-xl1-4],[join][xl1-4]:not([r-c]) > *,[data-join][data-xl1-4]:not([x]) > *,[join] > [xl2-8],[join] > [data-xl2-8],[data-join] > [xl2-8],[data-join] > [data-xl2-8],[join][xl2-8]:not([r-c]) > *,[data-join][data-xl2-8]:not([x]) > *{width:25%}[join] > [xl3-4],[join] > [data-xl3-4],[data-join] > [xl3-4],[data-join] > [data-xl3-4],[join][xl3-4]:not([r-c]) > *,[data-join][data-xl3-4]:not([x]) > *,[join] > [xl6-8],[join] > [data-xl6-8],[data-join] > [xl6-8],[data-join] > [data-xl6-8],[join][xl6-8]:not([r-c]) > *,[data-join][data-xl6-8]:not([x]) > *{width:75%}[join] > [xl1-5],[join] > [data-xl1-5],[data-join] > [xl1-5],[data-join] > [data-xl1-5],[join][xl1-5]:not([r-c]) > *,[data-join][data-xl1-5]:not([x]) > *{width:20%}[join] > [xl2-5],[join] > [data-xl2-5],[data-join] > [xl2-5],[data-join] > [data-xl2-5],[join][xl2-5]:not([r-c]) > *,[data-join][data-xl2-5]:not([x]) > *{width:40%}[join] > [xl3-5],[join] > [data-xl3-5],[data-join] > [xl3-5],[data-join] > [data-xl3-5],[join][xl3-5]:not([r-c]) > *,[data-join][data-xl3-5]:not([x]) > *{width:60%}[join] > [xl4-5],[join] > [data-xl4-5],[data-join] > [xl4-5],[data-join] > [data-xl4-5],[join][xl4-5]:not([r-c]) > *,[data-join][data-xl4-5]:not([x]) > *{width:80%}[join] > [xl1-6],[join] > [data-xl1-6],[data-join] > [xl1-6],[data-join] > [data-xl1-6],[join][xl1-6]:not([r-c]) > *,[data-join][data-xl1-6]:not([x]) > *{width:calc(100%/6)}[join] > [xl5-6],[join] > [data-xl5-6],[data-join] > [xl5-6],[data-join] > [data-xl5-6],[join][xl5-6]:not([r-c]) > *,[data-join][data-xl5-6]:not([x]) > *{width:calc(100%/6*5)}[join] > [xl1-7],[join] > [data-xl1-7],[data-join] > [xl1-7],[data-join] > [data-xl1-7],[join][xl1-7]:not([r-c]) > *,[data-join][data-xl1-7]:not([x]) > *{width:calc(100%/7)}[join] > [xl2-7],[join] > [data-xl2-7],[data-join] > [xl2-7],[data-join] > [data-xl2-7],[join][xl2-7]:not([r-c]) > *,[data-join][data-xl2-7]:not([x]) > *{width:calc(100%/7*2)}[join] > [xl3-7],[join] > [data-xl3-7],[data-join] > [xl3-7],[data-join] > [data-xl3-7],[join][xl3-7]:not([r-c]) > *,[data-join][data-xl3-7]:not([x]) > *{width:calc(100%/7*3)}[join] > [xl4-7],[join] > [data-xl4-7],[data-join] > [xl4-7],[data-join] > [data-xl4-7],[join][xl4-7]:not([r-c]) > *,[data-join][data-xl4-7]:not([x]) > *{width:calc(100%/7*4)}[join] > [xl5-7],[join] > [data-xl5-7],[data-join] > [xl5-7],[data-join] > [data-xl5-7],[join][xl5-7]:not([r-c]) > *,[data-join][data-xl5-7]:not([x]) > *{width:calc(100%/7*5)}[join] > [xl6-7],[join] > [data-xl6-7],[data-join] > [xl6-7],[data-join] > [data-xl6-7],[join][xl6-7]:not([r-c]) > *,[data-join][data-xl6-7]:not([x]) > *{width:calc(100%/7*6)}[join] > [xl1-8],[join] > [data-xl1-8],[data-join] > [xl1-8],[data-join] > [data-xl1-8],[join][xl1-8]:not([r-c]) > *,[data-join][data-xl1-8]:not([x]) > *{width:calc(100%/8)}[join] > [xl3-8],[join] > [data-xl3-8],[data-join] > [xl3-8],[data-join] > [data-xl3-8],[join][xl3-8]:not([r-c]) > *,[data-join][data-xl3-8]:not([x]) > *{width:calc(100%/8*3)}[join] > [xl5-8],[join] > [data-xl5-8],[data-join] > [xl5-8],[data-join] > [data-xl5-8],[join][xl5-8]:not([r-c]) > *,[data-join][data-xl5-8]:not([x]) > *{width:calc(100%/8*5)}[join] > [xl7-8],[join] > [data-xl7-8],[data-join] > [xl7-8],[data-join] > [data-xl7-8],[join][xl7-8]:not([r-c]) > *,[data-join][data-xl7-8]:not([x]) > *{width:calc(100%/8*7)}[xl1],[data-xl1]{order:-8}[xl2],[data-xl2]{order:-7}[xl3],[data-xl3]{order:-6}[xl4],[data-xl4]{order:-5}[xl5],[data-xl5]{order:-4}[xl6],[data-xl6]{order:-3}[xl7],[data-xl7]{order:-2}[xl8],[data-xl8]{order:-1}} \ No newline at end of file diff --git a/assets/styles/tree.scss b/assets/styles/tree.scss new file mode 100644 index 000000000..3e507fa2a --- /dev/null +++ b/assets/styles/tree.scss @@ -0,0 +1,119 @@ +/* simple tree */ +.simple-tree { + user-select: none; + -moz-user-select: none; +} +.simple-tree>details>summary { + display: none; +} +.simple-tree a, +.simple-tree summary { + display: block; + width: fit-content; + width: -moz-fit-content; + border: solid 1px transparent; + padding: 0 2px; + outline: none; + cursor: pointer; +} +.simple-tree a { + text-decoration: none; + // color: inherit; + font-weight: 600; + font-size: .9rem; +} +.simple-tree ::-webkit-details-marker { + display: none; +} +.simple-tree summary { + list-style-type: none; + // background-color: #eee; + outline: none; +} +.simple-tree.dark summary { + background-color: #444; +} +.simple-tree details>:not(details), +.simple-tree details { + position: relative; +} +.simple-tree details :not(summary) { + margin-left: 20px; +} +.simple-tree.nodots details :not(summary) { + margin-left: 12px; +} +.simple-tree details::before, +.simple-tree details>:not(details)::before { + content: ''; + width: 10px; + display: block; + position: absolute; +} +.simple-tree details::before, +.simple-tree details>:not(details)::before { + // background: url('data:image/svg+xml;utf8,') left top / 2px 2px; +} +.simple-tree.dark details::before, +.simple-tree.dark details>:not(summary)::before { + background-image: url('data:image/svg+xml;utf8,'); +} +.simple-tree.nodots details::before, +.simple-tree.nodots details>:not(summary)::before { + background-image: none; +} +.simple-tree details::before { + top: 0; + height: 100%; + background-repeat: repeat-y; + left: 5px; + z-index: -1; +} +.simple-tree details>:not(details)::before { + top: 8px; + height: calc(100% - 8px); + background-repeat: repeat-x; + left: -15px; +} +.simple-tree details>summary::before { + // background: url('data:image/svg+xml;utf8,') center center / 12px 12px no-repeat; + background: url('data:image/svg+xml;utf8, + ')center center / 12px 12px no-repeat; + left: -22px; + top: 2px; + width: 16px; + height: 16px; +} +.simple-tree details[open]>summary::before { + background: url('data:image/svg+xml;utf8,') center center / 12px 12px no-repeat; + // background-image: url('data:image/svg+xml;utf8,'); + +} +/* async tree */ +.async-tree details[open][data-loaded=false] { + pointer-events: none; +} +.async-tree details[open][data-loaded=false]>summary::before { + background-image: url('data:image/svg+xml;utf8,'); +} +.async-tree.black details[open][data-loaded=false]>summary::before { + background-image: url('data:image/svg+xml;utf8,'); +} +/* select tree */ +.select-tree .selected { + // background-color: #beebff; + border: var(--outlinegray)1px solid; + border-radius: 5px; + // z-index: 1; +} + +.select-tree.dark .selected { + // background-color: #3a484e; + border-color: #99defd; + border-radius: 5px; +} + +.selectedOnPage { + // background-color: #3a484e; + border-color: #99defd; +} diff --git a/config.toml b/config.toml index 94c2f9b40..f7b7f5212 100644 --- a/config.toml +++ b/config.toml @@ -1,4 +1,4 @@ -baseURL = "https://quartz.jzhao.xyz/" +baseURL = "https://www.dhammacharts.org/quartz/" languageCode = "en-us" googleAnalytics = "G-XYFD95KB4J" pygmentsUseClasses = true diff --git a/data/config.yaml b/data/config.yaml index bae38dbaf..940e5a139 100644 --- a/data/config.yaml +++ b/data/config.yaml @@ -1,4 +1,5 @@ name: Jacky Zhao +enableColumnLayout: true enableToc: true openToc: false enableLinkPreview: true diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 06507a705..61433f03a 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,31 +3,80 @@ {{ partial "head.html" . }} -{{partial "search.html" .}} -
+ {{partial "search.html" .}} + + {{if $.Site.Data.config.enableColumnLayout}} + +
+ {{else}} +
+ {{end}} +
-

{{ .Site.Data.config.page_title }}

- Search IconIcon to open search +

{{ .Site.Data.config.page_title }}

+ + Search Icon + Icon to open search + + + + +
{{partial "darkmode.html" .}} -
-
- {{if .Title}}

{{ .Title }}

{{end}} + +
+ {{if .Title}} +

{{ .Title }}

{{end}}

- Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }}{{else}}Unknown{{end}}. + Last updated {{if ne .Date .Lastmod}}{{ .Lastmod.Format "January 2, 2006" }} + {{else}}Unknown{{end}}. {{ partial "github.html" . }}

{{partial "toc.html" .}} {{partial "textprocessing.html" . }}
- {{partial "footer.html" .}} -
+ {{if not $.Site.Data.config.enableColumnLayout}} + {{partial "footer.html" .}} + {{partial "contact.html" .}} + {{end}} + + + {{if $.Site.Data.config.enableColumnLayout}} + + + + + {{end}} + diff --git a/layouts/index.html b/layouts/index.html index 505361420..2a9b67728 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,23 +3,73 @@ {{ partial "head.html" . }} -{{partial "search.html" .}} -
- -
-

{{if .Title}}{{ .Title }}{{else}}Untitled{{end}}

- Search IconIcon to open search -
- {{partial "darkmode.html" .}} -
-
- {{partial "toc.html" .}} - {{partial "textprocessing.html" . }} - {{if $.Site.Data.config.enableRecentNotes}} - {{partial "recent.html" . }} + {{partial "search.html" .}} + + {{if $.Site.Data.config.enableColumnLayout}} + +
+ {{else}} +
+ {{end}} + + +
+

{{if .Title}}{{ .Title }} + {{else}}Untitled{{end}} +

+ + Search Icon + Icon to open search + + + + + +
+ {{partial "darkmode.html" .}} +
+
+ {{partial "toc.html" .}} + {{partial "textprocessing.html" . }} + {{if $.Site.Data.config.enableRecentNotes}} + {{partial "recent.html" . }} + {{end}} +
+ {{if not $.Site.Data.config.enableColumnLayout}} + {{partial "footerIndex.html" .}} + {{partial "contact.html" .}} + {{end}} +
+ + {{if $.Site.Data.config.enableColumnLayout}} + + + + {{end}} -
- {{partial "footerIndex.html" .}} -
+ + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index ddefe75cf..47836fbb3 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,16 +1,25 @@ +{{if $.Site.Data.config.enableColumnLayout}} + {{if $.Site.Data.config.enableFooter}} +
+
+ {{partial "graph.html" .}} +
+
+ {{partial "backlinks.html" .}} +
+
+ {{end}} +{{else}} +
- -
- -{{if $.Site.Data.config.enableFooter}} -
-
- {{partial "backlinks.html" .}} -
-
- {{partial "graph.html" .}} -
-
+ {{if $.Site.Data.config.enableFooter}} +
+
+ {{partial "backlinks.html" .}} +
+
+ {{partial "graph.html" .}} +
+
+ {{end}} {{end}} - -{{partial "contact.html" .}} \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 0890983b4..78a634db2 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -59,6 +59,12 @@ {{ end }} + + {{ if $.Site.Data.config.enableColumnLayout }} + {{ $drawTree := resources.Get "js/drawTree.js" | resources.Fingerprint "md5" | resources.Minify }} + + {{ end }} + {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint "md5" | resources.Minify | }} {{$contentIndex := resources.Get @@ -115,6 +121,13 @@ {{end}} + drawGraph( + {{strings.TrimRight "/" .Site.BaseURL}}, + 500, + {{$.Site.Data.graphConfig.paths}}, + {{$.Site.Data.graphConfig.globalGraph}}, + true + ); {{if $.Site.Data.config.enableLinkPreview}} initPopover( @@ -142,6 +155,70 @@ ], throwOnError : false }); + + const siteBaseURL = new URL(BASE_URL); + const pathBase = siteBaseURL.pathname; + + // a temporary function to traverse the tree and allowing to display something + function* traverse(o, path = []) { + for (var i in o) { + const itemPath = path.concat(i); + yield [i, o[i], itemPath, o]; + if (o[i] !== null && typeof o[i] == "object") { + //going one step down in the object tree!! + yield* traverse(o[i], itemPath); + } + } + } + + {{if $.Site.Data.config.enableColumnLayout}} + drawTree(pathBase).then( + function(structure) { + // console.log(structure) + for (var [key, value, path] of traverse(structure)) { + // console.log(key); + // console.log(value); + // console.log(path); + // console.log("---"); + let doc = document.getElementById("tree").innerHTML + if (value?.type == "folder") { + document.getElementById("tree").innerHTML = doc + '

'+value.name + '

' + } + if (value?.type == "page") { + document.getElementById("tree").innerHTML = doc + ' '+ value.name+'
' + } + } + } + ); + {{end}} + + // Get the modal + var modal = document.getElementById("myModal"); + + // Get the button that opens the modal + var btn = document.getElementById("myBtn"); + + // Get the element that closes the modal + var span = document.getElementsByClassName("close")[0]; + + // When the user clicks the button, open the modal + btn.onclick = function() { + modal.style.display = "block"; + } + + // When the user clicks on (x), close the modal + span.onclick = function() { + modal.style.display = "none"; + } + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } + } + + {{end}} };