Dev

assets/base-styles.css

@@ -102,7 +102,6 @@
 
 }
 
-
 /* Base Styles
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 /* NOTE
@@ -115,8 +114,9 @@ body {
   line-height: 1.6;
   font-weight: 400;
   font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: rgb(50, 50, 50); }
-
+  color: #a5b1cd;
+  background-color: #282b38;
+}
 
 /* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -138,7 +138,7 @@ p {
 /* Blockquotes
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 blockquote {
-  border-left: 4px lightgrey solid;
+  border-left: 4px #282b38 solid;
   padding-left: 1rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -173,7 +173,7 @@ input[type="button"] {
   text-transform: uppercase;
   text-decoration: none;
   white-space: nowrap;
-  background-color: transparent;
+  background-color: #282b38;
   border-radius: 4px;
   border: 1px solid #bbb;
   cursor: pointer;
@@ -227,7 +227,7 @@ textarea,
 select {
   height: 38px;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
+  background-color: #282b38;
   border: 1px solid #D1D1D1;
   border-radius: 4px;
   box-shadow: none;
@@ -302,7 +302,7 @@ th,
 td {
   padding: 12px 15px;
   text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
+  border-bottom: 1px solid #282b38; }
 th:first-child,
 td:first-child {
   padding-left: 0; }
@@ -352,7 +352,7 @@ hr {
   margin-top: 3rem;
   margin-bottom: 3.5rem;
   border-width: 0;
-  border-top: 1px solid #E1E1E1; }
+  border-top: 1px solid #282b38; }
 
 
 /* Clearing
@@ -390,4 +390,4 @@ there.
 @media (min-width: 1000px) {}
 
 /* Larger than Desktop HD */
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {}

assets/custom-styles.css

@@ -7,39 +7,128 @@
 
 /* Banner
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
+
 .banner {
     height: 75px;
-    background-color: #fc8600; /* Machine Learning Color is orange */
-    padding-top: 0px;
-    padding-left: 0px;
-    padding-right: 0px;
+    background-color: #2f3445; /* Machine Learning Color is orange */
+    padding: 3rem 0;
     width: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 6% !important;
+    display: block;
+    overflow: hidden;
 }
 
 .banner h2 {
-    color: white;
+    color: #a5b1cd;
     display: inline-block;
-    font-family: 'Open Sans', sans-serif;
-    font-size:4rem;
-    line-height:1;
+    font-family: 'Playfair Display', sans-serif;
+    font-size: 4rem;
+    line-height: 1;
+}
+
+.banner h2:hover {
+    color: #b4b5bf;
 }
 
 .banner Img {
     position: relative;
     float: right;
-    height: 75px;
+    height: 8rem;
 }
 
 /* Scalable Container
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .container.scalable {
-    width: 90%;
+    width: 95%;
     max-width: none;
+    margin-bottom: 5%;
+}
+
+/* Dropdowns
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.Select-control {
+    color: #a5b1cd;
+}
+
+.Select {
+    color: #a5b1cd;
+}
+
+.Select-menu-outer {
+    background-color: #2f3445;
+    border: 1px solid gray;
+}
+
+.Select div {
+    background-color: #2f3445;
+}
+
+.Select-menu-outer div:hover {
+    background-color: rgba(255, 255, 255, 0.01);
+}
+
+.Select-value-label {
+    color: #a5b1cd !important;
+}
+
+.Select--single > .Select-control .Select-value, .Select-placeholder {
+    border: 1px solid gray;
+    border-radius: 4px;
+}
+
+.card {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    width: 75%;
+}
+
+#last-card {
+    border-bottom: none;
+}
+
+.graph-title {
+    font-size: 2rem;
+    margin: 15% 0 0 25%;
+}
+
+#button-zero-threshold {
+    background-color: #2f3445;
+    color: #a5b1cd;
+    border-color: gray;
+}
+
+#button-card {
+    display: flex;
+    flex-direction: column;
+}
+
+#first-card {
+    padding-top: 0 !important;
+}
+
+#left-column {
+    margin: 0 3% 0 0 !important;
+}
+
+
+/* Slider
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.rc-slider-track {
+    background-color: #13c6e9 !important;
+}
+
+.rc-slider-handle {
+    border: solid 2px #13c6e9 !important
+}
+
+input[type='radio']:checked {
+    background-color: #13c6e9 !important;
+    border-color: #13c6e9 !important;
 }
 
 /* Remove Undo
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 ._dash-undo-redo {
-  display: none;
+    display: none;
 }

requirements.txt

@@ -1,15 +1,15 @@
 # Core
 gunicorn>=19.8.1
 plotly==2.7.0
-dash==0.40.0
-dash-renderer==0.21.0
-dash-html-components==0.15.0
-dash-core-components==0.45.0
-dash-table==3.6.0
+dash>=0.40.0
+dash-renderer>=0.21.0
+dash-html-components>=0.15.0
+dash-core-components>=0.45.0
+dash-table>=3.6.0
 
 # Additional
-colorlover==0.2.1
-numpy==1.16.2
-pandas==0.24.2
-scikit-learn==0.20.3
-scipy==1.2.1
+colorlover>=0.2.1
+numpy>=1.16.2
+pandas>=0.24.2
+scikit-learn>=0.20.3
+scipy>=1.2.1

utils/dash_reusable_components.py

@@ -16,13 +16,11 @@ def _omit(omitted_keys, d):
 # Custom Display Components
 def Card(children, **kwargs):
     return html.Section(
-        children,
+        className='card',
+        children=children,
         style=_merge({
             'padding': 20,
             'margin': 5,
-            'borderRadius': 5,
-            'border': 'thin lightgrey solid',
-
             # Remove possibility to select the text for better UX
             'user-select': 'none',
             '-moz-user-select': 'none',
@@ -98,4 +96,4 @@ def DemoDescription(filename, strip=False):
                 'font-family': 'Roboto, sans-serif'
             },
             children=dcc.Markdown(dedent(text))
-    )
+    )