diff --git a/.buildinfo b/.buildinfo index dd1b4566..c05803c5 100644 --- a/.buildinfo +++ b/.buildinfo @@ -1,4 +1,4 @@ # Sphinx build info version 1 # This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done. -config: 4f4926e84c5e9b7b19185b2601b9c80c +config: 7f0696966261c11bdd0c3656aa633dcc tags: 645f666f9bcd5a90fca523b33c5a78b7 diff --git a/_static/macros.html b/_static/macros.html new file mode 100644 index 00000000..3be46824 --- /dev/null +++ b/_static/macros.html @@ -0,0 +1,7 @@ +{% macro head_assets() %} + +{% endmacro %} + +{% macro body_scripts() %} + +{% endmacro %} \ No newline at end of file diff --git a/_static/scripts/components/toctree.js b/_static/scripts/components/toctree.js new file mode 100644 index 00000000..114dc393 --- /dev/null +++ b/_static/scripts/components/toctree.js @@ -0,0 +1,64 @@ +/** + * This method introduces a click function to click the + * underlying "a" tag for "li" element with toctree-l2 of the design. + */ +export const toctreeClick = () => { + const toctreeSubtopics = document.querySelectorAll( + ".toctree-wrapper li.toctree-l2" + ); + + toctreeSubtopics.forEach((toctreel2) => { + const link = toctreel2.querySelector("a"); + toctreel2.addEventListener("click", () => { + link.click(); + }); + }); +}; + +/** + * This method introduces calculations for grid for toc tree + * not letting the grid to overflow the space provided by + * sphinx on different platforms + */ +export const gridCalculation = () => { + const toctrees = document.querySelectorAll(".toctree-wrapper li.toctree-l1"); + + toctrees.forEach((toctree) => { + const containerWidth = toctree.clientWidth; + const subtrees = toctree.querySelectorAll("li.toctree-l2 a"); + const subtreeContainer = toctree.querySelector("ul"); + + let width = 0; + let noOfElements = 0; + const MAX_ELEMENTS = 3; + const UNIT_SPACE = 16; + + // handling the empty case + if (subtrees.length === 0) { + return; + } + + // handling the single element case + if (subtrees.length === 1) { + subtreeContainer.classList.add("grid-3"); + return; + } + + for (let i = 0; i < Math.min(MAX_ELEMENTS, subtrees.length); i++) { + // Getting the size of text in the list + // considering the padding applied on right and left side + width += subtrees[i].offsetWidth + 2 * UNIT_SPACE; + + if (width > containerWidth) { + break; + } else { + noOfElements++; + } + + // considering the gap applied + width += UNIT_SPACE; + } + + subtreeContainer.classList.add(`grid-${noOfElements}`); + }); +}; diff --git a/_static/scripts/grg-sphinx-theme.js b/_static/scripts/grg-sphinx-theme.js new file mode 100644 index 00000000..c282d77b --- /dev/null +++ b/_static/scripts/grg-sphinx-theme.js @@ -0,0 +1,6 @@ +import { toctreeClick, gridCalculation } from "./components/toctree.js"; + +document.addEventListener("DOMContentLoaded", () => { + toctreeClick(); + gridCalculation(); +}); diff --git a/_static/styles/animations.css b/_static/styles/animations.css new file mode 100644 index 00000000..7d08e667 --- /dev/null +++ b/_static/styles/animations.css @@ -0,0 +1,21 @@ +@keyframes slideUp { + from { + transform: translateY(5%); + opacity: 0; + } + to { + transform: translateY(0%); + opacity: 1; + } +} + +@keyframes slideDown { + from { + transform: translateY(-5%); + opacity: 0; + } + to { + transform: translateY(0%); + opacity: 1; + } +} \ No newline at end of file diff --git a/_static/styles/components/navbar.css b/_static/styles/components/navbar.css new file mode 100644 index 00000000..3b2b0384 --- /dev/null +++ b/_static/styles/components/navbar.css @@ -0,0 +1,50 @@ +/* Customizing the navbar dropdown */ +.bd-header .navbar-nav .dropdown .dropdown-menu { + box-shadow: var(--pst-shadow); + border: 0; + animation: 0.1s slideDown; + min-width: 10rem; + padding: 0.5rem 0; +} + +/* Overriding the CSS for section title in drop down */ +ol li>p:first-child, ul li>p:first-child { + margin-top: 0; + margin-bottom: 0; +} + +/* Making sure font behavior is same across the pages for navbar */ +.nav-link, +.bd-header .navbar-nav li a.nav-link, +.bd-header .navbar-nav .dropdown button, +.bd-sidebar-primary, +.bd-sidebar-primary .nav-link { + color: var(--pst-color-text-base); + font-size: 14px; + font-weight: 400; +} + +.nav-section-title.nav-link, +.bd-sidebar-primary .nav-section-title.nav-link { + color: var(--pst-color-text-muted); + font-weight: bold; +} + +.nav-section-title:not(:first-of-type) { + border-top: 1px solid var(--pst-color-border); +} + +.nav-link.nav-external:after { + transform: rotate(-45deg); + color: var(--pst-color-shadow); +} + +.dropdown-toggle:after { + position: absolute; + border: 0; + content: "\f078"; + font: var(--fa-font-solid); + font-size: .75em; + margin-top: 0.4rem; + margin-left: 0.5em; +} diff --git a/_static/styles/components/toctree.css b/_static/styles/components/toctree.css new file mode 100644 index 00000000..d70559e0 --- /dev/null +++ b/_static/styles/components/toctree.css @@ -0,0 +1,48 @@ +.toctree-wrapper li.toctree-l1 { + margin-bottom: 2em; +} + +.toctree-wrapper li.toctree-l1 a { + font-size: 1.8em; + font-weight: 600; + color: var(--pst-color-text-base); +} + +.toctree-wrapper li.toctree-l2 { + border: 1px solid var(--pst-color-border); + border-radius: 4px; + padding: 1em; +} + +.toctree-wrapper li.toctree-l2 a { + font-size: 16px; + font-weight: 600; + color: var(--pst-color-primary); + text-decoration: none; +} + +.toctree-wrapper li.toctree-l2:hover { + border: 1px solid var(--pst-color-secondary); + cursor: pointer; +} + +.toctree-wrapper li.toctree-l2:hover a { + color: var(--pst-color-secondary); +} + +.toctree-wrapper li.toctree-l1 ul { + display: grid; + gap: 1em; + padding-inline-start: 0; + padding: 1em 0; +} + +.toctree-wrapper li.toctree-l2 ul { + display: none; +} + +@media only screen and (max-width: 767px) { + .toctree-wrapper li.toctree-l1 ul { + grid-template-columns: repeat(1, 1fr); + } +} \ No newline at end of file diff --git a/_static/styles/grg-sphinx-theme.css b/_static/styles/grg-sphinx-theme.css new file mode 100644 index 00000000..763a4c4e --- /dev/null +++ b/_static/styles/grg-sphinx-theme.css @@ -0,0 +1,5 @@ +@import "./animations.css"; +@import "./variables.css"; +@import "./components/toctree.css"; +@import "./components/navbar.css"; +@import url("https://cdn.jsdelivr.net/gh/GRG-projects/CDN@latest/util.min.css"); \ No newline at end of file diff --git a/_static/styles/variables.css b/_static/styles/variables.css new file mode 100644 index 00000000..665d2336 --- /dev/null +++ b/_static/styles/variables.css @@ -0,0 +1,4 @@ +html { + --pst-icon-external-link: "\f178"; + --pst-shadow: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08); +} \ No newline at end of file diff --git a/blog.html b/blog.html index 167510cc..e3d8dd6b 100644 --- a/blog.html +++ b/blog.html @@ -11,6 +11,7 @@ + @@ -97,7 +101,7 @@ - - +
@@ -218,22 +395,196 @@ aria-label="Site Navigation"> Site Navigation

+ +
@@ -2077,10 +2428,14 @@

+ + + +