From 673a53cbabac96d00ec56a21d2f2cbbb8f93dd51 Mon Sep 17 00:00:00 2001 From: Nate Contino Date: Tue, 10 Dec 2024 12:01:15 +0000 Subject: [PATCH] Improve toc element alignment, boxes landing page search bar appearance, fix toc error on landing page --- jekyll-assets/_layouts/docs.html | 12 +++++-- jekyll-assets/css/style.css | 43 ++++++++++++++++++----- jekyll-assets/scripts/toc.js | 59 +++++++++++++++++--------------- 3 files changed, 75 insertions(+), 39 deletions(-) diff --git a/jekyll-assets/_layouts/docs.html b/jekyll-assets/_layouts/docs.html index f779368c3..988738443 100644 --- a/jekyll-assets/_layouts/docs.html +++ b/jekyll-assets/_layouts/docs.html @@ -96,8 +96,13 @@

{% endif %}>
{% if entry.subsections[0] %} - - + {{ entry.heading | markdownify }} @@ -105,7 +110,8 @@

{% else %} - .toptitle > #search-theme-toggle-container { + width: 50%; + margin: auto; +} + +body > .toptitle > #search-theme-toggle-container > #theme-toggle-container { + flex-grow: 0; +} + #docs-container { position: relative; flex-grow: 1; @@ -273,6 +283,17 @@ pre { flex-direction: row; gap: 20px; align-items: center; + justify-content: center; +} + +#theme-toggle-container { + flex-grow: 1; + align-self: center; + align-items: start; +} + +#docsearch { + flex-grow: 1; } #search-theme-toggle-container #theme-toggle-container::after { @@ -365,7 +386,7 @@ input:checked + li span label div .toc-item::before { position: sticky; top: 0; float: right; - height: 200vh; /* push element one page height up so it can (almost) never overlap footer */ + height: calc(160vh + 1%); /* push element one page height up so it can (almost) never overlap footer */ } #on-this-page-inner { @@ -420,7 +441,7 @@ a.level1 ~ a p { padding-bottom: 3px; margin-left: 5px; margin-right: 5px; - width: auto; + width: 100%; } a.level2 ~ a p { @@ -431,7 +452,7 @@ a.level2 ~ a p { padding-bottom: 3px; margin-left: 15px; margin-right: 5px; - width: auto; + width: 100%; } a.level3 ~ a p { @@ -442,7 +463,7 @@ a.level3 ~ a p { padding-bottom: 3px; margin-left: 25px; margin-right: 5px; - width: auto; + width: 100%; } a.level4 ~ a p { @@ -453,7 +474,7 @@ a.level4 ~ a p { padding-bottom: 3px; margin-left: 25px; margin-right: 5px; - width: auto; + width: 100%; } a.level1:hover { @@ -657,7 +678,7 @@ nav#mobile-contents li { margin-right: 0px; padding-bottom: 10vh; padding-right: 0px; - padding-left: 10px; + padding-left: 19px; } #content h1 { @@ -1390,6 +1411,12 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { box-shadow: var(--code-bg-colour-transparent) 0px 10px 15px -5px, var(--code-bg-colour-transparent) 0px 10px 10px -5px; } +@media screen and (max-width: 1200px) { + #content { + max-width: 73vw; + } +} + @media screen and (max-width: 1024px) { /* docs header always takes up space at page top for mobile screens -- anchors should scroll down a little extra to accommodate */ @@ -1405,7 +1432,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { overflow: hidden; } - /* when the mobile menu is visible, hide all page content so we don't end up with dueling scrollbars */ + /* when the mobile menu is visible, hide all page content so we don't end up with dueling scrollbars */ #mobile-toggle:checked ~ #__rptl-header { display: none; } @@ -1508,7 +1535,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 { } #docsearch { - flex-grow: 1; + flex-grow: 3; } #__rptl-header { diff --git a/jekyll-assets/scripts/toc.js b/jekyll-assets/scripts/toc.js index b42313a81..9f190663b 100644 --- a/jekyll-assets/scripts/toc.js +++ b/jekyll-assets/scripts/toc.js @@ -1,33 +1,36 @@ /* Trigger Tocbot dynamic TOC, works with tocbot 3.0.2 */ function makeToc() { -var oldtoc = document.getElementById('toc').nextElementSibling; -var newtoc = document.getElementById('tocbot'); -newtoc.setAttribute('id', 'tocbot'); -newtoc.setAttribute('class', 'js-toc'); -oldtoc.parentNode.replaceChild(newtoc, oldtoc); -tocbot.init({ contentSelector: '#content', - headingSelector: 'h1, h2, h3, h4', - smoothScroll: true, - includeHtml: true -}); -var handleTocOnResize = function() { - var width = window.innerWidth - || document.documentElement.clientWidth - || document.body.clientWidth; - if (width < 768) { - tocbot.refresh({ contentSelector: '#content', + var tocElement = document.getElementById('toc'); + if (tocElement) { /* only run on pages that have a toc -- exclude boxes landing pages, for instance */ + var oldtoc = tocElement.nextElementSibling; + var newtoc = document.getElementById('tocbot'); + newtoc.setAttribute('id', 'tocbot'); + newtoc.setAttribute('class', 'js-toc'); + oldtoc.parentNode.replaceChild(newtoc, oldtoc); + tocbot.init({ contentSelector: '#content', headingSelector: 'h1, h2, h3, h4', - collapseDepth: 6, - activeLinkClass: 'ignoreactive', - throttleTimeout: 1000, - smoothScroll: true }); + smoothScroll: true, + includeHtml: true + }); + var handleTocOnResize = function() { + var width = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth; + if (width < 768) { + tocbot.refresh({ contentSelector: '#content', + headingSelector: 'h1, h2, h3, h4', + collapseDepth: 6, + activeLinkClass: 'ignoreactive', + throttleTimeout: 1000, + smoothScroll: true }); + } + else { + tocbot.refresh({ contentSelector: '#content', + headingSelector: 'h1, h2, h3, h4', + smoothScroll: true }); + } + }; + window.addEventListener('resize', handleTocOnResize); + handleTocOnResize(); } - else { - tocbot.refresh({ contentSelector: '#content', - headingSelector: 'h1, h2, h3, h4', - smoothScroll: true }); - } -}; -window.addEventListener('resize', handleTocOnResize); -handleTocOnResize(); } \ No newline at end of file