@trimble-oss/modus-docs-hugo-theme 1.0.0-alpha7 → 1.0.0-alpha8

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

@@ -81,6 +81,10 @@ a.header-link::after {
   display: inline-block;
 }
 
+#main {
+  max-width: 1090px;
+}
+
 .docs-callout {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;

package/assets/css/_navbar-search.scss

@@ -0,0 +1,54 @@
+.search-container {
+  width: 40px;
+  left: -12px;
+}
+
+.form-control-search {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.38 14.92-.66.05-.41-.41c2.44-2.81 2.28-7.1-.5-9.7S7.8 2.4 5.17 4.94a6.988 6.988 0 0 0-.08 9.98c2.61 2.61 6.77 2.72 9.52.34l.41.41-.05.65 3.89 3.89a.996.996 0 1 0 1.41-1.41l-3.88-3.88Zm-2.81-1.41a5.016 5.016 0 0 1-7.08 0c-1.95-1.95-1.95-5.13 0-7.08s5.13-1.95 7.08 0 1.95 5.13 0 7.08Z'/%3E%3C/svg%3E");
+  background-position: 5px center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='m16.38 14.92-.66.05-.41-.41c2.44-2.81 2.28-7.1-.5-9.7S7.8 2.4 5.17 4.94a6.988 6.988 0 0 0-.08 9.98c2.61 2.61 6.77 2.72 9.52.34l.41.41-.05.65 3.89 3.89a.996.996 0 1 0 1.41-1.41l-3.88-3.88Zm-2.81-1.41a5.016 5.016 0 0 1-7.08 0c-1.95-1.95-1.95-5.13 0-7.08s5.13-1.95 7.08 0 1.95 5.13 0 7.08Z'/%3E%3C/svg%3E") !important;
+}
+
+[data-bs-theme="dark"] .btn-search img {
+  filter: invert(1);
+}

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

@@ -3,3 +3,7 @@ html[data-bs-theme="dark"] {
     filter: invert(1);
   }
 }
+
+.navbar-site-title {
+  margin-top: 12px;
+}

package/assets/css/_tables.scss

@@ -0,0 +1,34 @@
+main table {
+  width: 100%;
+  margin-bottom: 1rem;
+  border: 1px solid rgba(133, 133, 133, 0.1);
+  vertical-align: top;
+
+  // border-color: var(--bs-table-border-color);
+}
+
+main table thead th {
+  vertical-align: middle;
+  line-height: 1.25;
+  border-bottom-width: 1px;
+}
+
+main table thead tr {
+  background-color: rgba(133, 133, 133, 0.1);
+}
+
+main table td {
+  font-size: 0.875rem;
+  vertical-align: middle;
+}
+
+.table-bordered > :not(caption) > * > * {
+  border-width: 0 var(--bs-border-width);
+}
+
+table > :not(caption) > * > * {
+  padding: 0.25rem 1rem;
+  background-color: var(--bs-table-bg);
+  border-bottom-width: var(--bs-border-width);
+  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}

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

@@ -1,5 +1,5 @@
 .feedback {
-  border-color: #90939f !important;
+  border-color: #90939f;
 }
 
 .btn-feedback {

package/layouts/_default/single.html

@@ -17,7 +17,7 @@
 
       {{ partial "header" . }}
 
-      <main class="container mx-auto mt-5" style="max-width: 1090px;">
+      <main class="container mx-auto mt-5" id="main">
         <div class="row">
           <div class="col-12 col-xl-9">
             {{ if .Params.blog }}

package/layouts/partials/col-sidebar-menu.html

@@ -12,7 +12,7 @@
   }
 </script>
 
-<!-- https://github.com/twbs/bootstrap/blob/v5.3.0/site/layouts/partials/docs-sidebar.html -->
+<!-- https://github.com/twbs/bootstrap/blob/v5.3.2/site/layouts/partials/docs-sidebar.html -->
 <div class="">
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}

package/layouts/partials/col-sidebar.html

@@ -16,7 +16,7 @@
 
   <div>
     {{- with .Site.Params.GitHubRepo -}}
-    <a href="{{- . -}}" class="btn btn-lg btn-outline-secondary bg-transparent btn-icon-only border-0 mx-1"
+    <a href="{{- . -}}" class="btn btn-lg btn-outline-secondary text-body bg-transparent btn-icon-only border-0 mx-1"
       target="_blank" rel="noopener" data-bs-toggle="tooltip" title="GitHub">
       {{ partial "icons/brands/github.svg" (dict "class" "mt-2" "width" "22" "height" "22") }}
     </a>
@@ -25,4 +25,4 @@
     {{ partial "btn-theme-toggle" . }}
   </div>
 
-</div>
+</div>

package/layouts/partials/meta.html

@@ -10,7 +10,7 @@
 
 <!-- Compiles and minifies the sites Sass files from /assets/css/ -->
 {{- $sassOptions := (dict "enableSourceMap" true) -}}
-{{ $styles := resources.Get "styles/styles.scss" | toCSS $sassOptions | postCSS | minify }}
+{{ $styles := resources.Get "css/modus-docs.scss" | toCSS $sassOptions | postCSS | minify }}
 <link rel="stylesheet" href="{{ $styles.RelPermalink }}?v{{ hugo.Version }}">
 
 <!-- Load jQuery from CDN with fallback -->

package/layouts/partials/navbar.html

@@ -11,7 +11,7 @@
         <img src="https://modus-bootstrap.trimble.com/img/trimble-icon-rev.svg"
           class="d-inline-block d-sm-none px-1 mt-1" height="25" width="25" alt="home" />
         {{- if .Site.Params.Title -}}
-        <div class="float-end text-white h2 d-none d-md-inline-block" style="margin-top: 12px;">
+        <div class="float-end text-white h2 d-none d-md-inline-block navbar-site-title">
           {{- .Site.Title -}}
         </div>
         {{- end -}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trimble-oss/modus-docs-hugo-theme",
-  "version": "1.0.0-alpha7",
+  "version": "1.0.0-alpha8",
   "description": "A Documentation theme for Hugo built by Trimble",
   "homepage": "https://github.com/trimble-oss/modus-docs-hugo-theme",
   "bugs": {
@@ -15,7 +15,7 @@
   "scripts": {
     "build": "npx hugo",
     "lint": "npm run lint-css && npm run lint-html && npm run lint-js",
-    "lint-css": "stylelint \"assets/styles/*.*\" --fix",
+    "lint-css": "stylelint \"assets/css/*.*\" --fix",
     "lint-html": "htmlhint \"build/**/index.html\"",
     "lint-js": "eslint assets/js/*.js --fix",
     "lint-links": "npx linkinator ./",

package/assets/styles/_navbar-search.scss

@@ -1,53 +0,0 @@
-.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/_tables.scss

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