fix layout, make alert box white

docs/docs.css

@@ -18,17 +18,15 @@ body {
   padding: 0;
 }
 
-main {
-  width: 90rem;
-  margin-left: 240px;
-  margin-bottom: 60px;
-  margin-top: 25px;
-}
+/* Layout: */
 
-.container{
-  width: 80%;
-}
+.col-main {
+  flex: 1;
+}  
 
+.col-complementary {
+  flex: 1;
+}
 
 aside {
   width: 200px;
@@ -146,4 +144,33 @@ pre {
 .menu-items {
   padding: 0;
   font-size: 14px;
+}
+
+/* responsive shiz */
+@media only screen and (min-width: 640px) {
+  .layout {
+    display: flex;
+    justify-content: space-between;
+  }
+  .standard-dialog {
+    margin-right: 20px;
+    margin-top: 18px;
+  }
+  .sidebar {
+    z-index: 1;
+  }
+}
+@media only screen and (max-width: 600px) {
+  .sidebar {
+    display: none !important;
+  }
+  .example {
+    margin: 0px;
+  }
+  .component {
+    display: contents;
+  }
+  .scale-down {
+    transform: scale(0.8);
+  }
 }

style.css

@@ -136,12 +136,12 @@ hr {
   border-top: 0.15em solid #000;
 }
 
-.container {
+/*.container {
   width: 50%;
   margin: 0 auto;
   display: block;
 }
-
+*/
 h1,
 .heading {
   font-family: Chicago;
@@ -171,6 +171,7 @@ h2 {
 .modal-dialog, .alert-box {
   width: auto;
   padding: 13px;
+  background: #fff;
 }
 
 .modal-contents, .alert-contents {
@@ -550,7 +551,7 @@ form {
 select {
   border: 1.5px solid;
   height: auto;
-  min-width: 25%;
+  width: 10rem;
   font-family: Chicago_12;
   font-size: 18px;
   background-image: svg-load("./icon/select-button.svg");