Docs fixes and improvements

.cspell.json

@@ -431,6 +431,7 @@
     "google",
     "googleplay",
     "googleplaybilling",
+    "googletagmanager",
     "gowanus",
     "GPGGA",
     "GPGSA",
@@ -973,6 +974,7 @@
     "ssal",
     "ssid",
     "staa",
+    "stackoverflow",
     "starbird",
     "starttrip",
     "startuplistener",

.stylelintrc.json

@@ -5,6 +5,7 @@
     "at-rule-no-unknown": null,
     "color-hex-length": null,
     "color-function-notation": null,
+    "media-feature-range-notation": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
     "no-invalid-position-at-import-rule": null,

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

assets/css/_article.scss

@@ -1,8 +1,5 @@
 header.container-fluid {
-  background-color: #fff;
-  background-position: center;
-  background-size: cover;
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 1441 334' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23f1f1f6' d='M0 0h1440v332H0z'/%3E%3Cpath fill='%23e0e1e9' d='M0 334V0h886z'/%3E%3Cpath fill='%23fff' d='M1437.605 245l3.395 87H615z'/%3E%3C/g%3E%3C/svg%3E");
+  background-color: #f1f1f6;
 }
 
 // anchors # for deep links within docs

assets/css/_data-theme-dark.scss

@@ -5,14 +5,13 @@ html[data-theme="dark"] {
   }
 
   header.container-fluid {
-    background-color: #585c65;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 1441 334' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23353a40' d='M0 0h1440v332H0z'/%3E%3Cpath fill='%23252a2e' d='M0 334V0h886z'/%3E%3Cpath fill='%23585c65' d='M1437.605 245l3.395 87H615z'/%3E%3C/g%3E%3C/svg%3E");
-    color: #f1f1f1;
+    background-color: #171c1e;
+    color: #f1f1f6;
   }
 
   header.container-fluid h1,
   header.container-fluid h2 {
-    color: #f1f1f1;
+    color: #f1f1f6;
   }
 
   main h1,
@@ -22,7 +21,7 @@ html[data-theme="dark"] {
   }
 
   main .bg-light {
-    background-color: #222 !important;
+    background-color: #252a2e !important;
   }
 
   svg.text-secondary {
@@ -66,7 +65,7 @@ html[data-theme="dark"] {
   }
 
   article footer {
-    color: #f1f1f1;
+    color: #f1f1f6;
   }
 
   .form-control {

assets/css/_footer.scss

@@ -1,8 +1,5 @@
 .footer {
   background-color: #07599b;
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 1441 334' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%2307599B' d='M0 0h1440v332H0z'/%3E%3Cpath fill='%2300437B' d='M0 334V0h886z'/%3E%3Cpath fill='%23197CB6' d='M1437.605 245l3.395 87H615z'/%3E%3C/g%3E%3C/svg%3E");
-  background-size: cover;
-  background-position: center;
   content-visibility: auto; /* stylelint-disable-line */
   contain-intrinsic-size: 333px; /* stylelint-disable-line */
   font-size: 14px;

assets/css/_ie11.scss

@@ -5,12 +5,6 @@
     justify-content: space-between !important;
   }
 
-  header.container-fluid,
-  footer {
-    background-image: none !important;
-    color: #fff !important;
-  }
-
   .navbar-main {
     max-height: 70px;
   }

assets/css/_mobile.scss

@@ -11,6 +11,7 @@
     font-size: 0.7rem !important;
     letter-spacing: -1px;
   }
+
   .search-desktop {
     max-width: 106px !important;
   }
@@ -22,6 +23,7 @@
     font-size: 0.7rem !important;
     letter-spacing: -1px;
   }
+
   .search-desktop {
     max-width: 96px !important;
   }

content/components/inputs.md

@@ -651,14 +651,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
 
 Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
 
-However, if your form also includes custom button-like elements such as `<a ... class="btn btn-*">`, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](/components/buttons#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Internet Explorer 10. The anchor-based controls will also still be focusable and operable using the keyboard. You must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
-{{< /callout >}}
-
-{{< callout danger >}}
-
-#### Cross-browser compatibility
-
-While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the `disabled` attribute on a `<fieldset>`. Use custom JavaScript to disable the fieldset in these browsers.
+However, if your form also includes custom button-like elements such as `<a ... class="btn btn-*">`, these will only be given a style of `pointer-events: none`. The anchor-based controls will also still be focusable and operable using the keyboard. You must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
 {{< /callout >}}
 
 ### File browser

content/device-support.md

@@ -22,7 +22,7 @@ Modus Bootstrap supports the following browsers:
 - iOS >= 12
 - Safari >= 12
 
-Note: As [Microsoft themselves have dropped support](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/) we no longer include that in our default browserlist config, but you can add easily add support by editing the browserlist config for your project.
+Note: As [Microsoft themselves have dropped support](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/) we no longer include that in our default browserslist config, but you can add support by editing the browserslist config for your project.
 
 We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intended browser support via CSS prefixes, which uses [Browserslist](https://github.com/browserslist/browserslist) to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.
 

content/examples.md

@@ -12,3 +12,4 @@ hidden: true
 - [Table with Sticky Header](/examples/table-with-sticky-header/) <small class="text-muted"></small>
 - [Table with Sticky Header and First Column](/examples/table-with-sticky-header-and-column/) <small class="text-muted"></small>
 - [Collapsible Side Panel](/examples/collapsible-side-panel)
+- [Maps Webapp](/examples/maps-webapp)

content/utilities/interactions.md

@@ -15,5 +15,3 @@ Change the way in which the content is selected when the user interacts with it.
 <p class="user-select-auto">This paragraph has default select behavior.</p>
 <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
 {{< /example >}}
-
-Note: `user-select-all` is not supported on Internet Explorer.