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

package/assets/css/_menu-right.scss

@@ -7,6 +7,7 @@
 #TableOfContents ul ul,
 #TableOfContents ul ul li {
   list-style: none;
+  padding-left: 0 !important;
   text-indent: 10px;
 }
 

package/assets/css/_mobile.scss

@@ -29,8 +29,8 @@
 /* SM */
 @media (max-width: 767px) {
   #sidebar.show {
-    min-width: calc(100% - 68px) !important;
-    width: calc(100% - 68px) !important;
+    min-width: 100%;
+    width: 100%
   }
 
   #sidebar.show + div {

package/assets/css/_sidebar.scss

@@ -40,7 +40,7 @@
 }
 
 .col-main {
-  max-width: calc(100vw - 81px);
+  width: 100%;
 }
 
 .collapse-horizontal.collapse:not(.show) {
@@ -57,7 +57,7 @@
 
 #sidebar.collapsing + div,
 #sidebar.show + div {
-  max-width: calc(100vw - 332px);
+  max-width: 100%;
 }
 
 .col-sidebar .sticky-offset {

package/assets/css/_theme-toggle.scss

@@ -3,11 +3,11 @@
 }
 
 .sun-and-moon > :is(.moon, .sun) {
-  fill: var(--icon-fill);
+  fill: #fff;
 }
 
 .sun-and-moon > .sun-beams {
-  stroke: var(--icon-fill);
+  stroke: #fff;
   stroke-width: 2px;
 }
 
@@ -44,10 +44,6 @@
     }
   }
 
-  [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;
@@ -66,8 +62,6 @@
 }
 
 .theme-toggle {
-  --icon-fill: rgb(0, 0, 0);
-
   aspect-ratio: 1;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;

package/assets/css/modus-docs.scss

@@ -4,7 +4,6 @@
 @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

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 -}}>
   {{- .Text | safeHTML -}}
-</a>
+</a>{{- /* trim whitespace */ -}}

package/layouts/_default/home.html

@@ -2,30 +2,13 @@
 
 <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-auto col-12 col-main border-start border-secondary border-opacity-10 p-0 overflow-x-hidden">
-
-      <script>
-        function _calculateScrollbarWidth() {
-          document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
-        }
-        // recalculate on resize
-        window.addEventListener('resize', _calculateScrollbarWidth, false);
-        // recalculate on dom load
-        document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false);
-        // recalculate on load (assets loaded as well)
-        window.addEventListener('load', _calculateScrollbarWidth);
-      </script>
+    <div class="col col-main border-start border-secondary border-opacity-10 p-0 overflow-x-hidden">
 
       <main id="main" class="container">
 

package/layouts/_default/list.html

@@ -2,11 +2,6 @@
 
 <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);">
@@ -14,7 +9,7 @@
       </div>
     </div>
 
-    <div class="col col-auto col-12 col-main border-start border-secondary border-opacity-10 p-0">
+    <div class="col col-main border-start border-secondary border-opacity-10 p-0">
       <div class="mx-auto mw-100">
 
         {{ partial "header" . }}

package/layouts/_default/single.html

@@ -2,18 +2,13 @@
 
 <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-auto col-12 col-main border-start border-secondary border-opacity-10 p-0 overflow-y-hidden">
+    <div class="col col-main border-start border-secondary border-opacity-10 p-0 overflow-y-hidden">
 
       {{ partial "header" . }}
 

package/layouts/partials/menu-right.html

@@ -1,16 +1,17 @@
 <div class="sticky-top sticky-offset">
   {{ if and (gt .WordCount 200 ) (not .Params.hideToc) }}
-  <div class="h5 pt-2 ml-3 on-this-page">
+  <div class="h5 pt-2 ms-1 on-this-page">
     On this page
   </div>
   {{- .TableOfContents -}}
   <script>
     document.addEventListener('DOMContentLoaded', function () {
       document.querySelectorAll('#TableOfContents ul').forEach(function (ul) {
-        ul.classList.add('list-unstyled', 'pl-0', 'ml-0');
+        ul.classList.add('list-unstyled', 'ps-1');
       });
       document.querySelectorAll('#TableOfContents a').forEach(function (a) {
         a.classList.add('nav-link');
+        a.classList.add('ps-1');
       });
     });
   </script>

package/layouts/partials/navbar.html

@@ -23,6 +23,8 @@
       {{ partial "navbar-search" . }}
       {{ end }}
 
+      {{ partial "navbar-theme-toggle" . }}
+
       {{- with .Site.Params.RemoveSearch -}}{{else}}
       <div class="dropdown">
         <button type="button" class="btn btn-lg btn-primary bg-transparent btn-icon-only"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trimble-oss/modus-docs-hugo-theme",
-  "version": "1.0.0-alpha27",
+  "version": "1.0.0-alpha29",
   "description": "A Documentation theme for Hugo built by Trimble",
   "homepage": "https://github.com/trimble-oss/modus-docs-hugo-theme",
   "bugs": {
@@ -28,20 +28,20 @@
     "svgo": "npx svgo --folder=\"static/img/icons/\""
   },
   "dependencies": {
-    "@trimble-oss/modus-bootstrap": "^2.0.2",
-    "@trimble-oss/modus-icons": "^1.15.0"
+    "@trimble-oss/modus-bootstrap": "^2.0.7",
+    "@trimble-oss/modus-icons": "^1.16.0"
   },
   "devDependencies": {
     "autoprefixer": "10.4.20",
     "eslint": "8.57.1",
     "eslint-config-prettier": "9.1.0",
     "htmlhint": "1.1.4",
-    "hugo-bin": "0.131.3",
-    "postcss": "8.4.47",
+    "hugo-bin": "0.140.1",
+    "postcss": "8.5.1",
     "postcss-cli": "11.0.0",
-    "prettier": "3.3.3",
-    "stylelint": "16.9.0",
-    "stylelint-config-standard-scss": "13.1.0",
+    "prettier": "3.4.2",
+    "stylelint": "16.14.1",
+    "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4"
   },
   "hugo-bin": {
@@ -57,6 +57,6 @@
     "node": ">=18.0.0"
   },
   "volta": {
-    "node": "20.17.0"
+    "node": "20.18.1"
   }
 }

package/assets/css/_col-sidebar.scss

@@ -1,27 +0,0 @@
-.col-sidebar {
-  width: 64px !important;
-}
-
-.col-sidebar .list-group {
-  height: calc(100dvh - 66px);
-}
-
-[data-bs-theme="light"] {
-  .col-sidebar a.btn:hover,
-  .col-sidebar button:hover {
-    background-color: #e0e1e9 !important;
-  }
-}
-
-[data-bs-theme="dark"] {
-  .col-sidebar a.btn:hover,
-  .col-sidebar button:hover {
-    background-color: #424649 !important;
-  }
-}
-
-.col-sidebar button.list-group-item {
-  height: 48px;
-  margin-left: 6px;
-  width: 48px;
-}

package/layouts/partials/col-sidebar.html

@@ -1,21 +0,0 @@
-<div
-  class="list-group d-block border-0 text-center sticky-top sticky-offset d-flex flex-column align-items-start justify-content-between">
-
-  <div class="mx-auto w-100">
-  </div>
-
-  <div>
-    {{- with .Site.Params.GitHubRepo -}}
-    <a href="{{- . -}}"
-      class="btn btn-lg btn-outline-secondary text-body bg-transparent btn-icon-only border-0 mx-1 p-1" target="_blank"
-      rel="noopener" data-bs-toggle="tooltip" title="GitHub">
-      {{ partial "icons/brands/github.svg" (dict "class" "mt-2" "width" "24" "height" "24") }}
-    </a>
-    {{ end }}
-
-    {{- if not .Site.Params.disableThemeToggle -}}
-    {{ partial "btn-theme-toggle" . }}
-    {{ end }}
-  </div>
-
-</div>