@trimble-oss/modus-docs-hugo-theme 1.0.0-alpha29 → 1.0.0-alpha3

package/README.md

@@ -1,12 +1,8 @@
 # Modus Docs Hugo Theme (Experimental)
 
-[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/trimble-oss/modus-docs-hugo-theme/main/LICENSE)
-[![GitHub Super-Linter](https://github.com/trimble-oss/modus-docs-hugo-theme/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)
-[![npm Version](https://img.shields.io/npm/v/@trimble-oss/modus-docs-hugo-theme)](https://www.npmjs.com/package/@trimble-oss/modus-docs-hugo-theme)
-
 A documentation theme for Hugo.
 
-**Status: Alpha. This theme is currently under development.**
+Status: Alpha. This theme is currently under development and is not yet ready for production use.
 
 ## Installation
 

package/assets/js/auto-complete.min.js

@@ -1 +1 @@
-var autoComplete=function(){function e(e){function t(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function o(e,t,o){e.attachEvent?e.attachEvent("on"+t,o):e.addEventListener(t,o)}function s(e,t,o){e.detachEvent?e.detachEvent("on"+t,o):e.removeEventListener(t,o)}function n(e,s,n,l){o(l||document,s,function(o){for(var s,l=o.target||o.srcElement;l&&!(s=t(l,e));)l=l.parentElement;s&&n.call(l,o)})}if(document.querySelector){var l={selector:0,source:0,minChars:3,delay:150,offsetLeft:0,offsetTop:1,cache:1,menuClass:"",renderItem:function(e,t){t=t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");var o=new RegExp("("+t.split(" ").join("|")+")","gi");return'<div class="autocomplete-suggestion" role="link" data-val="'+e+'">'+e.replace(o,"<b>$1</b>")+"</div>"},onSelect:function(){}};for(var c in e)e.hasOwnProperty(c)&&(l[c]=e[c]);for(var a="object"==typeof l.selector?[l.selector]:document.querySelectorAll(l.selector),u=0;u<a.length;u++){var i=a[u];i.sc=document.createElement("div"),i.sc.className="autocomplete-suggestions"+l.menuClass,i.autocompleteAttr=i.getAttribute("autocomplete"),i.setAttribute("autocomplete","off"),i.cache={},i.last_val="",i.updateSC=function(e,t){var o=i.getBoundingClientRect();if(i.sc.style.left=Math.round(o.left+(window.pageXOffset||document.documentElement.scrollLeft)+l.offsetLeft)+"px",i.sc.style.top=Math.round(o.bottom+(window.pageYOffset||document.documentElement.scrollTop)+l.offsetTop)+"px",i.sc.style.width=Math.round(o.right-o.left)+"px",!e&&(i.sc.style.display="block",i.sc.maxHeight||(i.sc.maxHeight=parseInt((window.getComputedStyle?getComputedStyle(i.sc,null):i.sc.currentStyle).maxHeight)),i.sc.suggestionHeight||(i.sc.suggestionHeight=i.sc.querySelector(".autocomplete-suggestion").offsetHeight),i.sc.suggestionHeight))if(t){var s=i.sc.scrollTop,n=t.getBoundingClientRect().top-i.sc.getBoundingClientRect().top;n+i.sc.suggestionHeight-i.sc.maxHeight>0?i.sc.scrollTop=n+i.sc.suggestionHeight+s-i.sc.maxHeight:0>n&&(i.sc.scrollTop=n+s)}else i.sc.scrollTop=0},o(window,"resize",i.updateSC),document.body.appendChild(i.sc),n("autocomplete-suggestion","mouseleave",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&setTimeout(function(){e.className=e.className.replace("selected","")},20)},i.sc),n("autocomplete-suggestion","mouseover",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&(e.className=e.className.replace("selected","")),this.className+=" selected"},i.sc),n("autocomplete-suggestion","mousedown",function(e){if(t(this,"autocomplete-suggestion")){var o=this.getAttribute("data-val");i.value=o,l.onSelect(e,o,this),i.sc.style.display="none"}},i.sc),i.blurHandler=function(){try{var e=document.querySelector(".autocomplete-suggestions:hover")}catch(t){var e=0}e?i!==document.activeElement&&setTimeout(function(){i.focus()},20):(i.last_val=i.value,i.sc.style.display="none",setTimeout(function(){i.sc.style.display="none"},350))},o(i,"blur",i.blurHandler);var r=function(e){var t=i.value;if(i.cache[t]=e,e.length&&t.length>=l.minChars){for(var o="",s=0;s<e.length;s++)o+=l.renderItem(e[s],t);i.sc.innerHTML=o,i.updateSC(0)}else i.sc.style.display="none"};i.keydownHandler=function(e){var t=window.event?e.keyCode:e.which;if((40==t||38==t)&&i.sc.innerHTML){var o,s=i.sc.querySelector(".autocomplete-suggestion.selected");return s?(o=40==t?s.nextSibling:s.previousSibling,o?(s.className=s.className.replace("selected",""),o.className+=" selected",i.value=o.getAttribute("data-val")):(s.className=s.className.replace("selected",""),i.value=i.last_val,o=0)):(o=40==t?i.sc.querySelector(".autocomplete-suggestion"):i.sc.childNodes[i.sc.childNodes.length-1],o.className+=" selected",console.log(o),i.value=o.getAttribute("data-val")),i.updateSC(0,o),!1}if(27==t)i.value=i.last_val,i.sc.style.display="none";else if(13==t||9==t){var s=i.sc.querySelector(".autocomplete-suggestion.selected");s&&"none"!=i.sc.style.display&&(l.onSelect(e,s.getAttribute("data-val"),s),setTimeout(function(){i.sc.style.display="none"},20))}},o(i,"keydown",i.keydownHandler),i.keyupHandler=function(e){var t=window.event?e.keyCode:e.which;if(!t||(35>t||t>40)&&13!=t&&27!=t){var o=i.value;if(o.length>=l.minChars){if(o!=i.last_val){if(i.last_val=o,clearTimeout(i.timer),l.cache){if(o in i.cache)return void r(i.cache[o]);for(var s=1;s<o.length-l.minChars;s++){var n=o.slice(0,o.length-s);if(n in i.cache&&!i.cache[n].length)return void r([])}}i.timer=setTimeout(function(){l.source(o,r)},l.delay)}}else i.last_val=o,i.sc.style.display="none"}},o(i,"keyup",i.keyupHandler),i.focusHandler=function(e){i.last_val="\n",i.keyupHandler(e)},l.minChars||o(i,"focus",i.focusHandler)}this.destroy=function(){for(var e=0;e<a.length;e++){var t=a[e];s(window,"resize",t.updateSC),s(t,"blur",t.blurHandler),s(t,"focus",t.focusHandler),s(t,"keydown",t.keydownHandler),s(t,"keyup",t.keyupHandler),t.autocompleteAttr?t.setAttribute("autocomplete",t.autocompleteAttr):t.removeAttribute("autocomplete"),document.body.removeChild(t.sc),t=null}}}}return e}();!function(){"function"==typeof define&&define.amd?define("autoComplete",function(){return autoComplete}):"undefined"!=typeof module&&module.exports?module.exports=autoComplete:window.autoComplete=autoComplete}();
+var autoComplete=function(){function e(e){function t(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function o(e,t,o){e.attachEvent?e.attachEvent("on"+t,o):e.addEventListener(t,o)}function s(e,t,o){e.detachEvent?e.detachEvent("on"+t,o):e.removeEventListener(t,o)}function n(e,s,n,l){o(l||document,s,function(o){for(var s,l=o.target||o.srcElement;l&&!(s=t(l,e));)l=l.parentElement;s&&n.call(l,o)})}if(document.querySelector){var l={selector:0,source:0,minChars:3,delay:150,offsetLeft:0,offsetTop:1,cache:1,menuClass:"",renderItem:function(e,t){t=t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");var o=new RegExp("("+t.split(" ").join("|")+")","gi");return'<div class="autocomplete-suggestion" data-val="'+e+'">'+e.replace(o,"<b>$1</b>")+"</div>"},onSelect:function(){}};for(var c in e)e.hasOwnProperty(c)&&(l[c]=e[c]);for(var a="object"==typeof l.selector?[l.selector]:document.querySelectorAll(l.selector),u=0;u<a.length;u++){var i=a[u];i.sc=document.createElement("div"),i.sc.className="autocomplete-suggestions "+l.menuClass,i.autocompleteAttr=i.getAttribute("autocomplete"),i.setAttribute("autocomplete","off"),i.cache={},i.last_val="",i.updateSC=function(e,t){var o=i.getBoundingClientRect();if(i.sc.style.left=Math.round(o.left+(window.pageXOffset||document.documentElement.scrollLeft)+l.offsetLeft)+"px",i.sc.style.top=Math.round(o.bottom+(window.pageYOffset||document.documentElement.scrollTop)+l.offsetTop)+"px",i.sc.style.width=Math.round(o.right-o.left)+"px",!e&&(i.sc.style.display="block",i.sc.maxHeight||(i.sc.maxHeight=parseInt((window.getComputedStyle?getComputedStyle(i.sc,null):i.sc.currentStyle).maxHeight)),i.sc.suggestionHeight||(i.sc.suggestionHeight=i.sc.querySelector(".autocomplete-suggestion").offsetHeight),i.sc.suggestionHeight))if(t){var s=i.sc.scrollTop,n=t.getBoundingClientRect().top-i.sc.getBoundingClientRect().top;n+i.sc.suggestionHeight-i.sc.maxHeight>0?i.sc.scrollTop=n+i.sc.suggestionHeight+s-i.sc.maxHeight:0>n&&(i.sc.scrollTop=n+s)}else i.sc.scrollTop=0},o(window,"resize",i.updateSC),document.body.appendChild(i.sc),n("autocomplete-suggestion","mouseleave",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&setTimeout(function(){e.className=e.className.replace("selected","")},20)},i.sc),n("autocomplete-suggestion","mouseover",function(){var e=i.sc.querySelector(".autocomplete-suggestion.selected");e&&(e.className=e.className.replace("selected","")),this.className+=" selected"},i.sc),n("autocomplete-suggestion","mousedown",function(e){if(t(this,"autocomplete-suggestion")){var o=this.getAttribute("data-val");i.value=o,l.onSelect(e,o,this),i.sc.style.display="none"}},i.sc),i.blurHandler=function(){try{var e=document.querySelector(".autocomplete-suggestions:hover")}catch(t){var e=0}e?i!==document.activeElement&&setTimeout(function(){i.focus()},20):(i.last_val=i.value,i.sc.style.display="none",setTimeout(function(){i.sc.style.display="none"},350))},o(i,"blur",i.blurHandler);var r=function(e){var t=i.value;if(i.cache[t]=e,e.length&&t.length>=l.minChars){for(var o="",s=0;s<e.length;s++)o+=l.renderItem(e[s],t);i.sc.innerHTML=o,i.updateSC(0)}else i.sc.style.display="none"};i.keydownHandler=function(e){var t=window.event?e.keyCode:e.which;if((40==t||38==t)&&i.sc.innerHTML){var o,s=i.sc.querySelector(".autocomplete-suggestion.selected");return s?(o=40==t?s.nextSibling:s.previousSibling,o?(s.className=s.className.replace("selected",""),o.className+=" selected",i.value=o.getAttribute("data-val")):(s.className=s.className.replace("selected",""),i.value=i.last_val,o=0)):(o=40==t?i.sc.querySelector(".autocomplete-suggestion"):i.sc.childNodes[i.sc.childNodes.length-1],o.className+=" selected",console.log(o),i.value=o.getAttribute("data-val")),i.updateSC(0,o),!1}if(27==t)i.value=i.last_val,i.sc.style.display="none";else if(13==t||9==t){var s=i.sc.querySelector(".autocomplete-suggestion.selected");s&&"none"!=i.sc.style.display&&(l.onSelect(e,s.getAttribute("data-val"),s),setTimeout(function(){i.sc.style.display="none"},20))}},o(i,"keydown",i.keydownHandler),i.keyupHandler=function(e){var t=window.event?e.keyCode:e.which;if(!t||(35>t||t>40)&&13!=t&&27!=t){var o=i.value;if(o.length>=l.minChars){if(o!=i.last_val){if(i.last_val=o,clearTimeout(i.timer),l.cache){if(o in i.cache)return void r(i.cache[o]);for(var s=1;s<o.length-l.minChars;s++){var n=o.slice(0,o.length-s);if(n in i.cache&&!i.cache[n].length)return void r([])}}i.timer=setTimeout(function(){l.source(o,r)},l.delay)}}else i.last_val=o,i.sc.style.display="none"}},o(i,"keyup",i.keyupHandler),i.focusHandler=function(e){i.last_val="\n",i.keyupHandler(e)},l.minChars||o(i,"focus",i.focusHandler)}this.destroy=function(){for(var e=0;e<a.length;e++){var t=a[e];s(window,"resize",t.updateSC),s(t,"blur",t.blurHandler),s(t,"focus",t.focusHandler),s(t,"keydown",t.keydownHandler),s(t,"keyup",t.keyupHandler),t.autocompleteAttr?t.setAttribute("autocomplete",t.autocompleteAttr):t.removeAttribute("autocomplete"),document.body.removeChild(t.sc),t=null}}}}return e}();!function(){"function"==typeof define&&define.amd?define("autoComplete",function(){return autoComplete}):"undefined"!=typeof module&&module.exports?module.exports=autoComplete:window.autoComplete=autoComplete}();

package/assets/js/scroll-to-top.js

@@ -0,0 +1,33 @@
+/*
+ * Scroll to top widget
+ * Copyright (C) 2022 Trimble Inc.
+ * Licensed under MIT
+ */
+
+let target = document.querySelector('footer');
+
+let scrollToTopBtn = document.querySelector('.btn-to-top');
+let rootElement = document.documentElement;
+
+function callback(entries, observer) {
+  entries.forEach((entry) => {
+    window.onscroll = function (e) {
+      if (entry.isIntersecting) {
+        scrollToTopBtn.classList.add('btn-to-top-show');
+      } else {
+        scrollToTopBtn.classList.remove('btn-to-top-show');
+      }
+    };
+  });
+}
+
+function scrollToTop() {
+  rootElement.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+}
+scrollToTopBtn.addEventListener('click', scrollToTop);
+
+const observer = new IntersectionObserver(callback);
+observer.observe(target);

package/assets/js/search.min.js

@@ -1 +1 @@
-var lunrIndex,pagesIndex;function endsWith(a,b){return-1!==a.indexOf(b,a.length-b.length)}function initLunr(){endsWith(baseurl,"/")||(baseurl+="/");jQuery.getJSON(baseurl+"index.json").done(function(a){pagesIndex=a,lunrIndex=lunr(function(){this.ref("uri"),this.field("title",{boost:15}),this.field("tags",{boost:10}),this.field("content",{boost:5}),this.pipeline.remove(lunr.stemmer),this.searchPipeline.remove(lunr.stemmer),pagesIndex.forEach(function(a){this.add(a)},this)})}).fail(function(a,b,c){console.error("Error getting Hugo index file:",b+", "+c)})}function search(a){return lunrIndex.search(a+"^100 "+a+"*^10 *"+a+"^10 "+a+"~2^1").map(function(a){return pagesIndex.filter(function(b){return b.uri===a.ref})[0]})}initLunr(),jQuery(document).ready(function(){new autoComplete({selector:jQuery("#search-by").get(0),source:function(a,b){b(search(a))},renderItem:function(a,b){var c=a.content.match("(?:\\s?(?:[\\w]+)\\s?){0,2}"+b+"(?:\\s?(?:[\\w]+)\\s?){0,"+2+"}");return a.context=c,"<div class=\"autocomplete-suggestion\" role=\"link\" data-term=\""+b+"\" aria-label=\""+a.title+"\" data-title=\""+a.title+"\" data-uri=\""+a.uri+"?q="+b+"#"+b+"\" data-context=\""+a.context+"\">\xBB "+a.title+"<div aria-hidden=\"true\" class=\"context\">"+(a.context||"")+"</div></div>"},onSelect:function(a,b,c){location.href=c.getAttribute("data-uri")}})});
+var lunrIndex,pagesIndex;function endsWith(a,b){return-1!==a.indexOf(b,a.length-b.length)}function initLunr(){endsWith(baseurl,"/")||(baseurl+="/");jQuery.getJSON(baseurl+"index.json").done(function(a){pagesIndex=a,lunrIndex=lunr(function(){this.ref("uri"),this.field("title",{boost:15}),this.field("tags",{boost:10}),this.field("content",{boost:5}),this.pipeline.remove(lunr.stemmer),this.searchPipeline.remove(lunr.stemmer),pagesIndex.forEach(function(a){this.add(a)},this)})}).fail(function(a,b,c){console.error("Error getting Hugo index file:",b+", "+c)})}function search(a){return lunrIndex.search(a+"^100 "+a+"*^10 *"+a+"^10 "+a+"~2^1").map(function(a){return pagesIndex.filter(function(b){return b.uri===a.ref})[0]})}initLunr(),jQuery(document).ready(function(){new autoComplete({selector:jQuery("#search-by").get(0),source:function(a,b){b(search(a))},renderItem:function(a,b){var c=a.content.match("(?:\\s?(?:[\\w]+)\\s?){0,2}"+b+"(?:\\s?(?:[\\w]+)\\s?){0,"+2+"}");return a.context=c,"<div class=\"autocomplete-suggestion\" data-term=\""+b+"\" data-title=\""+a.title+"\" data-uri=\""+a.uri+"?q="+b+"#"+b+"\" data-context=\""+a.context+"\">\xBB "+a.title+"<div class=\"context\">"+(a.context||"")+"</div></div>"},onSelect:function(a,b,c){location.href=c.getAttribute("data-uri")}})});

package/assets/js/was-this-page-helpful.js

@@ -1,22 +1,15 @@
 $(function () {
-  $('.feedback').fadeIn('slow').addClass('d-block');
+  $('.feedback').fadeIn('slow').addClass('d-block').removeClass('d-none');
   $('.btn-feedback').click(function () {
     $('.btn-feedback').addClass('img-grayscale').attr('disabled', 'disabled');
     $('.feedback-thanks').fadeIn('slow').addClass('d-block');
   });
-
   $('.btn-feedback-helpful').click(function () {
     $('.feedback-helpful').fadeIn('slow').addClass('d-block');
-    $('.icon-helpful-solid').addClass('d-block');
-    $('.icon-helpful-solid').removeClass('d-none');
-    $('.icon-helpful-outlined').removeClass('d-block');
-    $('.icon-helpful-outlined').addClass('d-none');
+    $('.feedback-helpful').removeClass('d-none');
   });
   $('.btn-feedback-not-helpful').click(function () {
     $('.feedback-not-helpful').fadeIn('slow').addClass('d-block');
-    $('.icon-not-helpful-solid').addClass('d-block');
-    $('.icon-not-helpful-solid').removeClass('d-none');
-    $('.icon-not-helpful-solid').removeClass('d-none');
-    $('.icon-not-helpful-outlined').addClass('d-none');
+    $('.feedback-not-helpful').removeClass('d-none');
   });
 });

package/assets/{css → styles}/_article.scss

@@ -33,17 +33,17 @@ header {
 // external links have an icon
 .menu-right a[href^="http"]::after,
 article a:not(.stretched-link)[href^="https"]::after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  margin-bottom: -1px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.78 19.78H4.22V4.22h6.67c.61 0 1.11-.5 1.11-1.11C12 2.5 11.5 2 10.89 2H3c-.55 0-1 .45-1 1v18c0 .55.45 1 1 1h18c.55 0 1-.45 1-1v-7.89c0-.61-.5-1.11-1.11-1.11-.61 0-1.11.5-1.11 1.11v6.67ZM14.22 3.11c0 .61.5 1.11 1.11 1.11h2.88L8.07 14.36c-.43.43-.43 1.13 0 1.57.43.43 1.13.43 1.57 0L19.78 5.79v2.88c0 .61.5 1.11 1.11 1.11.61 0 1.11-.5 1.11-1.11V3c0-.55-.45-1-1-1h-5.67c-.61 0-1.11.5-1.11 1.11Z'/%3E%3C/svg%3E");
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: contain;
-  content: "";
   display: inline-block;
-  height: 12px;
-  margin-bottom: -1px;
-  margin-left: 4px;
   opacity: 0.7;
-  width: 12px;
 }
 
 main .sticky-offset {
@@ -53,24 +53,20 @@ main .sticky-offset {
 // offsets the anchors to adjust for the fixed navbar
 article h2:target::before,
 article h3:target::before {
-  content: " ";
   display: block;
+  content: " ";
   height: 80px;
   margin-top: -80px;
   visibility: hidden;
 }
 
-#main {
-  max-width: 1090px;
-}
-
 #main::before {
-  content: " ";
   display: block;
+  content: " ";
   height: 80px;
   margin-top: -80px;
-  top: 80px;
   visibility: hidden;
+  top: 80px;
 }
 
 // anchors # for deep links within docs
@@ -81,15 +77,15 @@ a.header-link {
 
 a.header-link::after {
   content: "#";
-  display: inline-block;
   min-width: 20px;
+  display: inline-block;
 }
 
 .docs-callout {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
   border-left-width: 0.25rem !important;
   border-radius: 0.25rem;
-  margin-bottom: 1.25rem;
-  margin-top: 1.25rem;
 }
 
 .docs-callout-danger {
@@ -121,4 +117,3 @@ article .nav-tabs .nav-link::after {
 article table {
   width: 100%;
 }
-

package/assets/styles/_col-sidebar.scss

@@ -0,0 +1,3 @@
+.col-sidebar {
+  width: 64px !important;
+}

package/assets/{css → styles}/_menu-right.scss

@@ -7,21 +7,20 @@
 #TableOfContents ul ul,
 #TableOfContents ul ul li {
   list-style: none;
-  padding-left: 0 !important;
   text-indent: 10px;
 }
 
 // right menu
 #TableOfContents li a {
-  border-left: 1px solid transparent;
-  font-size: 13px;
-  padding-bottom: 0.3rem;
   padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+  font-size: 13px;
+  border-left: 1px solid transparent;
 }
 
 .menu-right a {
-  color: #171c1e;
   font-size: 13px;
+  color: #171c1e;
 }
 
 [data-bs-theme="dark"] {
@@ -51,6 +50,6 @@ hr {
 
 // scrollspy color
 .menu-right #TableOfContents li .active {
-  border-left: 1px solid #0d6aa8 !important;
   color: #000 !important;
+  border-left: 1px solid #0d6aa8 !important;
 }

package/assets/{css → styles}/_mobile.scss

@@ -29,8 +29,8 @@
 /* SM */
 @media (max-width: 767px) {
   #sidebar.show {
-    min-width: 100%;
-    width: 100%
+    width: calc(100% - 68px) !important;
+    min-width: calc(100% - 68px) !important;
   }
 
   #sidebar.show + div {
@@ -38,7 +38,7 @@
     width: 0;
   }
 
-  #sidebar.collapsing {
+  .collapsing {
     transition: none !important;
   }
 }
@@ -46,7 +46,7 @@
 /* SM Only */
 @media (min-width: 575px) and (max-width: 767px) {
   #sidebar-menu .list-unstyled li {
-    display: inline-block;
     width: 50%;
+    display: inline-block;
   }
 }

package/assets/styles/_navbar-search.scss

@@ -0,0 +1,53 @@
+.search-container {
+  width: 40px;
+  left: -12px;
+}
+
+.form-control-search {
+  background-image: url("https://cdn.jsdelivr.net/npm/@trimble-oss/modus-icons@1.3.1/dist/modus-solid/svg/search.svg");
+  background-position: 5px center;
+  background-repeat: no-repeat;
+  border-left: 0;
+  border-right: 0;
+  padding: 0;
+  width: 0 !important;
+  z-index: 1210;
+  transition: all 0.2s;
+  left: auto;
+  top: 10px;
+  right: 5px;
+}
+
+.form-control-search:focus {
+  width: 363px !important;
+  max-width: calc(100vw - 200px);
+  text-indent: 18px;
+  padding: 0 4px 4px 16px;
+  visibility: visible;
+}
+
+.form-control-search:focus + .btn-search {
+  transition: all 1s;
+  background-color: transparent;
+  pointer-events: none !important;
+}
+
+.form-control-search:focus + .btn-search img {
+  opacity: 0;
+}
+
+.btn-search {
+  top: 0;
+}
+
+.btn-search i {
+  margin-top: 18px;
+}
+
+[data-bs-theme="dark"] .form-control-search {
+  background-image: url("/img/icons/search-white.svg") !important;
+}
+
+[data-bs-theme="dark"] .btn-search img {
+  filter: invert(1);
+}

package/assets/styles/_navbar.scss

@@ -0,0 +1,5 @@
+html[data-bs-theme="dark"] {
+  .dropdown-menu img {
+    filter: invert(1);
+  }
+}

package/assets/{css → styles}/_sidebar.scss

@@ -40,7 +40,7 @@
 }
 
 .col-main {
-  width: 100%;
+  max-width: calc(100vw - 81px);
 }
 
 .collapse-horizontal.collapse:not(.show) {
@@ -48,16 +48,16 @@
 }
 
 .row-main {
-  min-height: calc(100dvh - 66px);
+  height: calc(100dvh - 66px);
 }
 
 #sidebar.collapsing {
-  transition: none !important;
+  transition: none;
 }
 
 #sidebar.collapsing + div,
 #sidebar.show + div {
-  max-width: 100%;
+  max-width: calc(100vw - 332px);
 }
 
 .col-sidebar .sticky-offset {

package/assets/{css → styles}/_skippy.scss

@@ -8,8 +8,8 @@
   outline: 1px dotted;
 }
 
-.visually-hidden-focusable:focus {
-  margin-bottom: 30px;
+.sr-only-focusable:focus {
   top: 0 !important;
+  margin-bottom: 30px;
   z-index: 22222;
 }

package/assets/styles/_tables.scss

@@ -0,0 +1,5 @@
+main table {
+  width: 100%;
+  margin-bottom: 1rem;
+  vertical-align: top;
+}

package/assets/{css → styles}/_theme-light.scss

@@ -1,5 +1,5 @@
 [data-bs-theme="light"] {
-  article a.btn-primary:not(.dropdown-toggle)::after {
+  article a.btn-primary::after {
     filter: invert(1);
   }
 }

package/assets/{css → styles}/_theme-toggle.scss

@@ -3,11 +3,11 @@
 }
 
 .sun-and-moon > :is(.moon, .sun) {
-  fill: #fff;
+  fill: var(--icon-fill);
 }
 
 .sun-and-moon > .sun-beams {
-  stroke: #fff;
+  stroke: var(--icon-fill);
   stroke-width: 2px;
 }
 
@@ -44,10 +44,14 @@
     }
   }
 
+  [data-bs-theme="dark"] .sun-and-moon > :is(.moon, .sun) {
+    fill: rgb(255, 255, 255);
+  }
+
   [data-bs-theme="dark"] .sun-and-moon > .sun {
     transform: scale(1.75);
-    transition-duration: 0.25s;
     transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
+    transition-duration: 0.25s;
   }
 
   [data-bs-theme="dark"] .sun-and-moon > .sun-beams {
@@ -62,15 +66,17 @@
 }
 
 .theme-toggle {
+  --icon-fill: rgb(0, 0, 0);
+
   aspect-ratio: 1;
   cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .theme-toggle > svg {
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
   max-height: 18px;
   max-width: 18px;
   stroke-linecap: round;

package/assets/{css → styles}/_was-this-page-helpful.scss

@@ -1,10 +1,10 @@
 .feedback {
-  border-color: #90939f;
+  border-color: #90939f !important;
 }
 
 .btn-feedback {
-  min-width: 32px;
   opacity: 0.7;
+  min-width: 32px;
 }
 
 .btn-feedback svg {
@@ -16,8 +16,8 @@
 }
 
 .btn-feedback[disabled] {
-  cursor: default;
   opacity: 0.4;
+  cursor: default;
   pointer-events: none;
 }
 

package/assets/{css/modus-docs.scss → styles/styles.scss}

@@ -4,10 +4,11 @@
 @import "autocomplete"; // search autocomplete dropdown
 @import "article";
 @import "cards";
+@import "col-sidebar"; // 1st column
 @import "codefences"; // code syntax highlighting
 @import "codefences-dark"; // code syntax highlighting
 @import "javascript-disabled"; // display message at top if JS is disabled
-@import "mq-forced-colors-active"; // forced colors mode
+// @import "list-js";
 @import "sidebar";
 @import "menu-right"; // 'On this page' menu
 @import "mobile"; // optimizations for xxs mobile screens
@@ -16,8 +17,7 @@
 @import "news";
 @import "posts";
 @import "print";
-
-// @import "scroll-to-top-btn";
+@import "scroll-to-top-btn";
 @import "skippy"; // skip to content accessibility
 @import "tables";
 @import "footer";
@@ -40,7 +40,7 @@ h6 {
 }
 
 // underline links
-main a:not([class], li.breadcrumb-item a) {
+main a {
   text-decoration: underline;
 }
 
@@ -62,5 +62,5 @@ code {
 }
 
 main {
-  min-height: calc(100vh - 340px);
+  min-height: calc(100vh - 418px);
 }

package/data/navbar_apps.yml

@@ -1,19 +1,15 @@
-- title: Modus Style Guide
-  icon: "/img/icons/trimble.svg"
-  url: "https://modus.trimble.com/"
-
 - title: Modus Web Components
-  icon: "/img/icons/web-components.svg"
+  icon: ""
   url: "https://modus-web-components.trimble.com/"
 
 - title: Modus Icons
-  icon: "/img/icons/check-circle-outlined.svg"
+  icon: ""
   url: "https://modus-icons.trimble.com"
 
 - title: Modus Bootstrap
-  icon: "/img/icons/code.svg"
+  icon: ""
   url: "https://modus-bootstrap.trimble.com/"
 
 - title: Modus on GitHub
-  icon: "/img/icons/github.svg"
+  icon: ""
   url: "https://github.com/trimble-oss/?q=modus&type=all&language=&sort=stargazers"

package/layouts/_default/_markup/render-heading.html

@@ -1,17 +1,17 @@
-<h{{ .Level }} id="{{- .Anchor | safeURL -}}"
+<h{{ .Level }} id="{{ .Anchor | safeURL }}"
   class="{{- if (eq .Level 2 ) }}
   h1 mt-5 {{- end -}}
  {{- if (eq .Level 3 ) }}
   h2 mt-5 {{- end -}}
   {{- if (eq .Level 4 ) }}h4 fw-bold mt-3{{- end -}}{{ if eq .Anchor "use-when" }} text-success{{- end -}}{{ if eq .Anchor "dont-use-when" }} text-danger{{- end -}}">
   {{ if eq .Anchor "use-when" }}
-  <svg width="18" height="18" fill="currentColor" class="mx-1 mb-1"
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="mx-1 mb-1"
     viewBox="0 0 24 24">
     <path
       d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm5.56 7.74-6.39 6.4a1 1 0 0 1-1.42-.01l-3.3-3.34-.01-.01a.993.993 0 0 1 .01-1.4.996.996 0 0 1 1.41 0l2.6 2.62 5.68-5.69a.996.996 0 0 1 1.41 0v.02h.01c.39.39.39 1.02 0 1.41Z" />
   </svg>{{- end -}}
   {{- if eq .Anchor "dont-use-when" -}}
-  <svg width="18" height="18" fill="currentColor" class="mx-1 mb-1"
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="mx-1 mb-1"
     viewBox="0 0 24 24">
     <path
       d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41Z" />
@@ -20,4 +20,4 @@
   {{ if and (ne .Anchor "use-when") (ne .Anchor "dont-use-when") }}
   <a class="header-link text-light text-decoration-none fw-normal" href="#{{- .Anchor | safeURL -}}"
     aria-label="anchor"></a>{{ end }}
-</h{{ .Level }}>
+</h{{ .Level }}>

package/layouts/_default/_markup/render-link.html

@@ -1,4 +1,4 @@
-<a href="{{- .Destination | safeURL -}}" {{ with .Title}} title="{{- . -}}"
-  {{- end -}}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener" {{- end -}}>
+<a href="{{ .Destination | safeURL }}" {{ with .Title}} title="{{ . }}"
+  {{- end -}}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener" {{ end }}>
   {{- .Text | safeHTML -}}
-</a>{{- /* trim whitespace */ -}}
+</a>

package/layouts/_default/baseof.html

@@ -1,6 +1,5 @@
 <!doctype html>
-<html lang="{{ with .Site.LanguageCode }}{{- . -}}{{ else }}en-US{{- end -}}"
-  class="h-100 no-js {{ with .Page.Params.html_class }}{{ . -}}{{- end -}}">
+<html lang="en-US" class="h-100 no-js {{ with .Page.Params.html_class }}{{ . -}}{{- end -}}">
 
 <head>
   {{ partial "meta" . }}
@@ -28,10 +27,7 @@
       if (event.which === 27) {
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
         tooltipTriggerList.forEach(function (tooltipTriggerEl) {
-          var bootstrapTooltip = bootstrap.Tooltip.getInstance(tooltipTriggerEl);
-          if (bootstrapTooltip) {
-            bootstrapTooltip.hide();
-          }
+          $(tooltipTriggerEl).tooltip('hide');
         });
       }
     });
@@ -41,8 +37,6 @@
     const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
     const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
   </script>
-
-  {{- if not .IsHome -}}
   <script>
     // Disable all links with #
     var links = document.querySelectorAll('a[href="#"]');
@@ -54,6 +48,7 @@
       });
     });
   </script>
+  {{- if not .IsHome -}}
   <script>
     // Change Submit buttons within docs examples to type=button
     var article = document.querySelector('article');
@@ -68,4 +63,4 @@
   {{- end -}}
 </body>
 
-</html>
+</html>

package/layouts/_default/home.html

@@ -2,13 +2,18 @@
 
 <div class="container-fluid">
   <div class="row row-main px-0">
+
+    <div class="col-1 col-sidebar px-0 bg-body shadow-sm">
+      {{ partial "col-sidebar" . }}
+    </div>
+
     <div class="col col-auto px-0 collapse collapse-horizontal bg-dark bg-opacity-10" id="sidebar">
       <div id="sidebar-menu" class="z-2 sticky-top sticky-offset shadow-sm overflow-auto w-100">
         {{ partial "col-sidebar-menu" . }}
       </div>
     </div>
 
-    <div class="col col-main border-start border-secondary border-opacity-10 p-0 overflow-x-hidden">
+    <div class="col col-auto col-12 col-main border-start p-0 overflow-x-hidden">
 
       <main id="main" class="container">
 
@@ -16,11 +21,11 @@
 
       </main>
 
-      <footer class="p-2 footer py-4 bg-secondary bg-opacity-10 border-top border-secondary border-opacity-25">
+      <footer class="p-2 footer py-4 bg-secondary bg-opacity-10">
         {{ partial "footer" . }}
       </footer>
     </div>
 
   </div>
 </div>
-{{- end -}}
+{{- end -}}

package/layouts/_default/list.html

@@ -2,6 +2,11 @@
 
 <div class="container-fluid">
   <div class="row row-main px-0">
+
+    <div class="col-1 col-sidebar px-0 bg-body shadow-sm">
+      {{ partial "col-sidebar" . }}
+    </div>
+
     <div class="col col-auto px-0 collapse collapse-horizontal bg-dark bg-opacity-10 show" id="sidebar">
       <div id="sidebar-menu" class="sticky-top sticky-offset shadow-sm overflow-auto"
         style="min-height: calc(100vh - 66px);max-height: calc(100vh - 66px);">
@@ -9,7 +14,7 @@
       </div>
     </div>
 
-    <div class="col col-main border-start border-secondary border-opacity-10 p-0">
+    <div class="col col-auto col-12 col-main border-start p-0">
       <div class="mx-auto mw-100">
 
         {{ partial "header" . }}
@@ -33,4 +38,4 @@
 
   </div>
 </div>
-{{- end -}}
+{{- end -}}

package/layouts/_default/redirect.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ with .Site.LanguageCode }}{{- . -}}{{ else }}en-US{{- end -}}">
+<html lang="en">
 
 <head>
   <meta charset="utf-8">