Skip to content

Commit

Permalink
Improve toc element alignment, boxes landing page search bar appearan…
Browse files Browse the repository at this point in the history
…ce, fix toc error on landing page
  • Loading branch information
nathan-contino committed Dec 10, 2024
1 parent 0d43af2 commit 673a53c
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 39 deletions.
12 changes: 9 additions & 3 deletions jekyll-assets/_layouts/docs.html
Original file line number Diff line number Diff line change
Expand Up @@ -96,16 +96,22 @@ <h1 id="docs-header-title">
{% endif %}>
<div class="toc-toggle-container">
{% if entry.subsections[0] %}
<a class="level3" href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}" >
<a id="{{ item.path }}#{{entry.anchor}}-toc" class="toc-item" title="expand {{ entry.heading | strip_html }}"
<a
class="level3"
href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}" >
<a
id="{{ item.path }}#{{entry.anchor}}-toc"
class="toc-item"
title="expand {{ entry.heading | strip_html }}"
>
<script type="text/javascript">if (window.location.href.includes('{{ item.path }}#{{ entry.anchor }}')) { document.getElementById('{{ item.path }}#{{entry.anchor}}-toc').setAttribute('style', 'font-weight:bold'); document.getElementById('{{ item.path }}#{{ entry.anchor }}').checked = true; }</script>
{{ entry.heading | markdownify }}
</a>
</a>
{% else %}
<a class="level3">
<a id="{{ item.path }}#{{entry.anchor}}-toc" title="expand {{ entry.heading | strip_html }}"
<a id="{{ item.path }}#{{entry.anchor}}-toc"
title="expand {{ entry.heading | strip_html }}"
href="{{ site.baseurl }}{{ item.path }}#{{ entry.anchor }}"
onclick="document.getElementById('mobile-toggle').checked = false;"
class="toc-item no-dropdown"
Expand Down
43 changes: 35 additions & 8 deletions jekyll-assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,16 @@ div.subtitle p {
border: 1px solid var(--accent);
}

/* boxes page, constrain search bar/theme toggle line to a reasonable size */
body > .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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -453,7 +474,7 @@ a.level4 ~ a p {
padding-bottom: 3px;
margin-left: 25px;
margin-right: 5px;
width: auto;
width: 100%;
}
a.level1:hover {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
Expand All @@ -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;
}
Expand Down Expand Up @@ -1508,7 +1535,7 @@ input:not(:checked) ~ li ~ .itemcontents .sectlevel1 {
}

#docsearch {
flex-grow: 1;
flex-grow: 3;
}

#__rptl-header {
Expand Down
59 changes: 31 additions & 28 deletions jekyll-assets/scripts/toc.js
Original file line number Diff line number Diff line change
@@ -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();
}

0 comments on commit 673a53c

Please sign in to comment.