@trimble-oss/modus-docs-hugo-theme 1.0.0-alpha1 → 1.0.0-alpha11

package/static/js/theme-toggle.js

@@ -1,48 +0,0 @@
-// script adapted from Adam Argyle's tutorial: https://web.dev/building-a-theme-switch-component/
-
-const storageKey = 'theme-preference';
-
-const onClick = () => {
-  theme.value = theme.value === 'light' ? 'dark' : 'light';
-
-  setPreference();
-};
-
-const getColorPreference = () => {
-  if (localStorage.getItem(storageKey)) return localStorage.getItem(storageKey);
-  else
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light';
-};
-
-const setPreference = () => {
-  localStorage.setItem(storageKey, theme.value);
-  reflectPreference();
-};
-
-const reflectPreference = () => {
-  document.firstElementChild.setAttribute('data-bs-theme', theme.value);
-
-  document
-    .querySelector('#theme-toggle')
-    ?.setAttribute('aria-label', theme.value);
-};
-
-const theme = {
-  value: getColorPreference(),
-};
-
-reflectPreference();
-
-window.onload = () => {
-  reflectPreference();
-  document.querySelector('#theme-toggle').addEventListener('click', onClick);
-};
-
-window
-  .matchMedia('(prefers-color-scheme: dark)')
-  .addEventListener('change', ({ matches: isDark }) => {
-    theme.value = isDark ? 'dark' : 'light';
-    setPreference();
-  });

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

@@ -1,17 +1,17 @@
 /*! purgecss start ignore */
 .autocomplete-suggestions {
-  cursor: default;
+  background-color: #fff;
   border: 1px solid #cbcdd6;
   border-top: 0;
-  background-color: #fff;
   box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
-  position: absolute;
+  box-sizing: border-box;
+  cursor: default;
   display: none;
-  z-index: 33333; // higher than navbar
   max-height: 254px;
   overflow: hidden;
   overflow-y: auto;
-  box-sizing: border-box;
+  position: absolute;
+  z-index: 33333; // higher than navbar
 }
 
 [data-bs-theme="dark"] {
@@ -26,19 +26,19 @@
 }
 
 .autocomplete-suggestion {
-  position: relative;
+  color: #353a40;
   cursor: pointer;
-  padding: 7px;
   line-height: 23px;
-  white-space: nowrap;
   overflow: hidden;
+  padding: 7px;
+  position: relative;
   text-overflow: ellipsis;
-  color: #353a40;
+  white-space: nowrap;
 }
 
 .autocomplete-suggestion b {
-  font-weight: 400;
   color: #1f8dd6;
+  font-weight: 400;
 }
 
 .autocomplete-suggestion.selected {
@@ -52,8 +52,8 @@
 }
 
 .autocomplete-suggestion > .context {
-  font-size: 12px;
   color: #7d808d;
+  font-size: 12px;
 }
 
 .autocomplete-suggestion.selected > .context {

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

@@ -18,8 +18,8 @@
 }
 
 .card-post .card-header {
-  min-height: 89px;
-  background-size: cover;
-  background-position: center;
   aspect-ratio: 4 / 1;
+  background-position: center;
+  background-size: cover;
+  min-height: 89px;
 }

package/assets/{styles → css}/_javascript-disabled.scss

@@ -1,7 +1,7 @@
 .no-js input,
 .no-js a[data-toggle] {
-  pointer-events: none !important;
   opacity: 0.65;
+  pointer-events: none !important;
 }
 
 .no-js nav.navbar {
@@ -9,12 +9,12 @@
 }
 
 .no-js body::before {
-  height: 32px;
   background-color: #e0e1e9;
-  text-align: center;
   content: "⚠️ JavaScript is disabled. This site requires JavaScript to be enabled ⚠️";
   display: block;
+  height: 32px;
   position: fixed;
+  text-align: center;
   top: 0;
   width: 100%;
   z-index: 1;

package/assets/{styles → css}/_list-js.scss

@@ -1,13 +1,13 @@
 .list:empty::before {
+  background-color: rgba(133, 133, 133, 0.1);
+  border-radius: 0.5rem;
+  content: "Nothing found, try searching again.";
   display: block;
-  width: 100%;
-  padding: 100px 2rem;
-  margin-right: 15px;
   margin-left: 15px;
+  margin-right: 15px;
+  padding: 100px 2rem;
   text-align: center;
-  content: "Nothing found, try searching again.";
-  background-color: rgba(133, 133, 133, 0.1);
-  border-radius: 0.5rem;
+  width: 100%;
 }
 
 [data-bs-theme="dark"] {

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

@@ -12,15 +12,15 @@
 
 // right menu
 #TableOfContents li a {
-  padding-top: 0.3rem;
-  padding-bottom: 0.3rem;
-  font-size: 13px;
   border-left: 1px solid transparent;
+  font-size: 13px;
+  padding-bottom: 0.3rem;
+  padding-top: 0.3rem;
 }
 
 .menu-right a {
-  font-size: 13px;
   color: #171c1e;
+  font-size: 13px;
 }
 
 [data-bs-theme="dark"] {
@@ -50,6 +50,6 @@ hr {
 
 // scrollspy color
 .menu-right #TableOfContents li .active {
-  color: #000 !important;
   border-left: 1px solid #0d6aa8 !important;
+  color: #000 !important;
 }

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

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

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

@@ -1,6 +1,6 @@
 body[data-url^="/news/"] header {
   aspect-ratio: 4 / 1;
-  background-size: cover;
   background-position: center;
+  background-size: cover;
   min-height: 200px;
 }

package/assets/{styles → css}/_onetrust-cookie-banner.scss

@@ -16,25 +16,25 @@
 #onetrust-accept-btn-handler {
   background-color: #0063a3 !important;
   border-color: #0063a3 !important;
-  padding: 0.1875rem 1rem !important;
   font-size: 0.8rem !important;
   font-weight: 600 !important;
-  user-select: none !important;
   line-height: 1.75 !important;
+  padding: 0.1875rem 1rem !important;
   text-transform: lowercase !important;
+  user-select: none !important;
 }
 
 /** 'Cookie Settings' button **/
 #onetrust-pc-btn-handler {
-  color: #0063a3 !important;
   border: 1px solid #0063a3 !important;
+  color: #0063a3 !important;
   font-size: 0.8rem !important;
   font-weight: 600 !important;
-  padding: 0.1875rem 1rem !important;
-  user-select: none !important;
   line-height: 1.75 !important;
+  padding: 0.1875rem 1rem !important;
   text-decoration: none !important;
   text-transform: lowercase !important;
+  user-select: none !important;
 }
 
 /** capitalize first letter of button **/
@@ -57,9 +57,9 @@
 
 /* stylelint-disable-next-line */
 #onetrust-banner-sdk.otFlat {
-  max-width: 998px;
   margin-left: auto !important;
   margin-right: auto !important;
+  max-width: 998px;
   overflow-y: hidden !important;
 }
 
@@ -87,8 +87,8 @@
 }
 
 .ot-table-header {
-  position: static !important;
   border-bottom-width: 2px !important;
+  position: static !important;
 }
 
 #ot-sdk-cookie-policy-v2 table,
@@ -140,17 +140,17 @@
 
 .ot-acc-txt,
 .ot-acc-txt p {
-  color: #252a2e !important;
   background-color: #f1f1f6 !important;
+  color: #252a2e !important;
 }
 
 #ot-sdk-btn {
   border-color: #0063a3 !important;
   font-size: 14px !important;
+  line-height: 1.75 !important;
   padding: 0.1875rem 1rem !important;
   text-transform: lowercase;
   user-select: none !important;
-  line-height: 1.75 !important;
 }
 
 #ot-sdk-btn::first-letter {

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

@@ -1,11 +1,11 @@
 // blog posts
 header.header-blog {
-  background-size: cover;
-  min-height: 90px;
   aspect-ratio: 21/9;
   background-position: center;
+  background-size: cover;
   border-radius: 8px;
   max-height: 600px;
+  min-height: 90px;
 }
 
 .share svg {

package/assets/{styles → css}/_scroll-to-top-btn.scss

@@ -1,14 +1,14 @@
 .btn-to-top {
-  font-size: 18px;
-  line-height: 48px !important;
   background-color: #353a40 !important;
-  width: 48px;
   bottom: 20px;
-  right: 20px;
-  z-index: 6000;
+  font-size: 18px;
+  line-height: 48px !important;
   opacity: 0;
+  right: 20px;
   transform: translateY(100px);
   transition: all 1s ease;
+  width: 48px;
+  z-index: 6000;
 }
 
 .btn-to-top-show {

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

@@ -50,8 +50,8 @@
 
   [data-bs-theme="dark"] .sun-and-moon > .sun {
     transform: scale(1.75);
-    transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
     transition-duration: 0.25s;
+    transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
   }
 
   [data-bs-theme="dark"] .sun-and-moon > .sun-beams {
@@ -70,13 +70,13 @@
 
   aspect-ratio: 1;
   cursor: pointer;
-  touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
 }
 
 .theme-toggle > svg {
-  inline-size: 100%;
   block-size: 100%;
+  inline-size: 100%;
   max-height: 18px;
   max-width: 18px;
   stroke-linecap: round;