remove #base_window_layer

This layer was previously overriding the layout defined by
https://www.w3.org/StyleSheets/TR/2016/base.css, as well as acting as a
scroll container for the non-dialog content. It was removed in favor of
the base layout, and scroll is simply disabled on the body when a dialog
is open.

examples/dialog-modal/css/dialog.css

@@ -1,51 +1,3 @@
-html, body {
-  height: 100%;
-}
-
-body {
-  max-width: 100%;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-}
-
-body:not(.toc-inline) {
-  padding: 0;
-}
-
-#base_window_layer {
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  /* Use overflow scroll and webkit-overflow-scrolling to add momentum scroll*/
-  overflow: scroll;
-  -webkit-overflow-scrolling: touch;
-  padding: 1.6em 0 2em;
-}
-
-#base_window_layer main, #base_window_layer nav {
-  max-width: 50em;
-  margin: auto;
-  padding-right: 1.5em;
-  padding-left: 50px;
-  padding-left: calc(26px + 1.5em);
-}
-
-@media screen and (min-width: 78em) {
-  body:not(.toc-inline) #base_window_layer main, body:not(.toc-inline) #base_window_layer nav  {
-    padding-left: 29em;
-  }
-
-  body:not(.toc-inline) {
-    padding: 0;
-  }
-}
-
-body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content nav  {
-  padding-left: 1.5em;
-}
-
-
 .hidden {
   display: none
 }
@@ -66,7 +18,7 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na
     top: 2rem;
     left: 50vw;  /* move to the middle of the screen (assumes relative parent is the body/viewport) */
     transform: translateX(-50%);  /* move backwards 50% of this element's width */
-    min-width: calc(640px - (15px * 2));  /* = breakpoint - left+right margin */
+    min-width: calc(640px - (15px * 2));  /* == breakpoint - left+right margin */
     min-height: auto;
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22);
   }
@@ -151,14 +103,34 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na
 
 /* native <dialog> element uses the ::backdrop pseudo-element */
 /*dialog::backdrop,*/
-.dialog-backdrop.active {
+.dialog-backdrop {
+  display: none;
   position: fixed;
-  overflow-y: scroll;
+  overflow-y: auto;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
-  background: rgba(0, 0, 0, 0.3);
+}
+
+@media screen and (min-width: 640px) {
+  .dialog-backdrop {
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.dialog-backdrop.active {
+  display: block;
+}
+
+.no-scroll {
+  overflow-y: auto !important;
+}
+
+/* this is added to the body when a dialog is open */
+.has-dialog {
+  overflow: hidden;
+}
 
 /* styling for alert-dialog example */
 .notes {