tweak colors, spacing and icons

templates/modern/layout/_master.tmpl

@@ -42,6 +42,7 @@
           </button>
           <div class="collapse navbar-collapse" id="navbar">
             <form class="d-flex ms-auto" role="search" id="search">
+              <i class="bi bi-search"></i>
               <input class="form-control" id="search-query" type="search" disabled placeholder="{{__global.search}}" autocomplete="off" aria-label="Search">
             </form>
           </div>
@@ -64,7 +65,7 @@
 
       <div class="content">
         <div class="actionbar">
-          <button class="btn btn-lg border-0 d-md-none" style="margin-top: -.5em; margin-left: -.8em"
+          <button class="btn btn-lg border-0 d-md-none" style="margin-top: -.65em; margin-left: -.8em"
               type="button" data-bs-toggle="offcanvas" data-bs-target="#tocOffcanvas"
               aria-controls="tocOffcanvas" aria-expanded="false" aria-label="Show table of contents">
             <i class="bi bi-list"></i>

templates/modern/src/docfx.scss

@@ -28,7 +28,6 @@ h5,
 h6,
 .xref,
 .text-break {
-  white-space: nowrap;
   word-wrap: break-word;
   word-break: break-word;
 }
@@ -89,6 +88,13 @@ article {
   font-weight: normal;
 }
 
+@mixin underline-on-hover {
+  text-decoration: none;
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
+}
+
 @import "layout.scss";
 @import "nav.scss";
 @import "toc.scss";

templates/modern/src/layout.scss

@@ -5,7 +5,7 @@
 
 $header-height: 60px;
 $footer-height: 60px;
-$main-padding-top: 1rem;
+$main-padding-top: 1.6rem;
 $main-padding-bottom: 4rem;
 
 // Makes a div sticky to top
@@ -142,6 +142,7 @@ body[data-layout="landing"] {
           >.actionbar {
             display: flex;
             align-items: flex-start;
+            margin-top: .5rem;
             min-height: 40px;
           }
 
@@ -160,7 +161,7 @@ body[data-layout="landing"] {
 
         >.affix {
           display: block;
-          width: 254px;
+          width: 230px;
           max-height: calc(100vh - #{$header-height});
           overflow-x: hidden;
           overflow-y: auto;

templates/modern/src/markdown.scss

@@ -60,8 +60,8 @@ pre {
   >.code-action {
     display: none;
     position: absolute;
-    top: .5rem;
-    right: 0;
+    top: .25rem;
+    right: .2rem;
 
     .bi-check-lg {
       font-size: 1.2rem;

templates/modern/src/markdown.ts

@@ -24,7 +24,7 @@ export function renderMarkdown() {
  */
 function renderWordBreaks() {
   document.querySelectorAll<HTMLElement>('article h1,h2,h3,h4,h5,h6,.xref,.text-break').forEach(e => {
-    if (e.innerHTML === e.innerText) {
+    if (e.innerHTML?.trim() === e.innerText?.trim()) {
       const children: (string | Node)[] = []
       for (const text of breakWord(e.innerText)) {
         if (children.length > 0) {
@@ -79,7 +79,7 @@ function renderClickableImage() {
  */
 function renderTables() {
   document.querySelectorAll('table').forEach(table => {
-    table.classList.add('table', 'table-bordered', 'table-striped', 'table-condensed')
+    table.classList.add('table', 'table-bordered', 'table-condensed')
     const wrapper = document.createElement('div')
     wrapper.className = 'table-responsive'
     table.parentElement.insertBefore(wrapper, table)
@@ -126,13 +126,17 @@ function renderAnchor() {
  */
 function renderCodeCopy() {
   document.querySelectorAll<HTMLElement>('pre>code').forEach(code => {
+    if (code.innerText.trim().length === 0) {
+      return
+    }
+
     let copied = false
     renderCore()
 
     function renderCore() {
       const dom = copied
         ? html`<a class='btn border-0 link-success code-action'><i class='bi bi-check-lg'></i></a>`
-        : html`<a class='btn border-0 code-action' href='#' @click=${copy}><i class='bi bi-clipboard'></i></a>`
+        : html`<a class='btn border-0 code-action' title='copy' href='#' @click=${copy}><i class='bi bi-clipboard'></i></a>`
       render(dom, code.parentElement)
 
       async function copy(e) {

templates/modern/src/nav.scss

@@ -3,14 +3,35 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
-.navbar-brand {
-  display: flex;
-  align-items: center;
+.navbar {
+  .navbar-brand {
+    display: flex;
+    align-items: center;
+  }
+
+  .navbar-nav {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  form {
+    align-items: center;
+    >i.bi {
+      position: relative;
+      left: 1.8rem;
+      opacity: .5;
+    }
+    >input[type=search] {
+      padding-left: 2.5rem;
+    }
+  }
 }
 
-.navbar-nav {
-  display: flex;
-  flex-wrap: nowrap;
+.breadcrumb {
+  font-size: 14px;
+  a {
+    @include underline-on-hover;
+  }
 }
 
 .affix {
@@ -35,7 +56,10 @@
     }
 
     li {
-      margin: .2rem 0;
+      margin: .4rem 0;
+      a {
+        @include underline-on-hover;
+      }
     }
   }
 }
@@ -44,11 +68,11 @@
   margin-top: 2rem;
 
   a.edit-link {
-    text-decoration: none;
+    @include underline-on-hover;
 
     &::before {
       content: "\F4CA";
-
+      display: inline-block;
       @include adjust-icon;
     }
   }

templates/modern/src/nav.ts

@@ -56,7 +56,7 @@ export function renderFooter() {
     const docurl = meta('docfx:docurl')
     const github = parseGitHubRepo(docurl)
     if (github) {
-      return html`<a href='${github}' class='btn border-0'><i class='bi bi-github'></i></a>`
+      return html`<a href='${github}' title='GitHub' class='btn border-0'><i class='bi bi-github'></i></a>`
     }
   }
 

templates/modern/src/theme.ts

@@ -24,9 +24,9 @@ export function themePicker(refresh: () => void) {
 
   return html`
     <div class='dropdown'>
-      <button class='btn border-0 dropdown-toggle' type='button' data-bs-toggle='dropdown' aria-expanded='false'>
+      <a title='Change theme' class='btn border-0 dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'>
         <i class='bi bi-${icon}'></i>
-      </button>
+      </a>
       <ul class='dropdown-menu'>
         <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'light')}><i class='bi bi-sun'></i> Light</a></li>
         <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'dark')}><i class='bi bi-moon'></i> Dark</a></li>

templates/modern/src/toc.scss

@@ -3,10 +3,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
-$expand-stub-width: 1.2rem;
+$expand-stub-width: .85rem;
 
 .toc {
   min-width: 0;
+  font-size: 14px;
 
   ul {
     flex-direction: column;
@@ -17,19 +18,14 @@ $expand-stub-width: 1.2rem;
 
   li {
     font-weight: normal;
-    margin: .4em 0;
+    margin: .6em 0;
     padding-left: $expand-stub-width;
     position: relative;
   }
 
   li > a {
     display: inline;
-    text-decoration: none;
-
-    &:hover, &:focus {
-      background: none;
-      text-decoration: underline;
-    }
+    @include underline-on-hover;
   }
 
   li > ul {
@@ -45,8 +41,10 @@ $expand-stub-width: 1.2rem;
     width: $expand-stub-width;
     cursor: pointer;
     font-family: bootstrap-icons;
+    font-size: .8em;
     content: "\F285";
     position: absolute;
+    margin-top: .2em;
     margin-left: -$expand-stub-width;
     transition: transform 0.35s ease;
     transform-origin: .5em 50%;