Dmitrydao/UI fixes original

_data/navigation.js

@@ -83,7 +83,6 @@ module.exports = {
       {
         section: 'INTRODUCTION',
         contents: [
-          { title: 'Getting Started', url: 'getting-started' },
           {
             title: 'Tutorials',
             url: 'tutorials',
@@ -241,27 +240,43 @@ module.exports = {
         section: 'DATA PROVIDER NODES',
         contents: [
           {
-            url: 'chainlink-alarm-clock',
             title: 'Chainlink Alarm Clock (Testnet)',
+            url: 'chainlink-alarm-clock'
           },
-          { url: 'lcx-testnet', title: 'LCX (Testnet)' },
+          { title: 'LCX (Testnet)', url: 'lcx-testnet' },
           {
-            url: 'kraken-rates-oracle-node',
             title: 'Kraken Rates Oracle Node',
+            url: 'kraken-rates-oracle-node'
           },
           {
-            url: 'tiingo-eod-stock-price-oracle',
             title: 'Tiingo EOD Stock Price Oracle',
+            url: 'tiingo-eod-stock-price-oracle'
           },
-          { url: 'geodb-oracle-node', title: 'GeoDB Oracle Node' },
+          { title: 'GeoDB Oracle Node', url: 'geodb-oracle-node' },
           {
-            url: 'therundown-oracle-node',
             title: 'TheRunDown Oracle Node',
+            url: 'therundown-oracle-node',
           },
-          { url: 'dns-ownership-oracle', title: 'DNS Ownership Oracle' },
+          { title: 'DNS Ownership Oracle', url: 'dns-ownership-oracle' },
           {
-            url: 'watchsignals',
             title: 'WatchSignals Luxury Watch Price Oracle',
+            url: 'watchsignals'
+          },
+          {
+            title: 'Genesis Volatility Cryptocurrency Options Oracle',
+            url: 'genesis-volatility'
+          },
+          {
+            title: 'dxFeed Price Oracle',
+            url: 'dxfeed-oracle'
+          },
+          {
+            title: 'CipherTrace DeFi Compli Oracle',
+            url: 'ciphertrace-defi-compli-oracle'
+          },
+          {
+            title: 'Bookmaker Ratings Oracle',
+            url: 'bookmaker-ratings-oracle'
           },
         ],
       },

_src/docs.css

@@ -22,6 +22,13 @@ ul li code {
   padding: 0.2em 0.4em;
 }
 
+#page {
+  max-width: 1440px;
+  margin: 0px auto;
+  color: #666;
+}
+
+/** Code Tabs */
 code-tabs {
   max-width: 100%;
   overflow-x: scroll;
@@ -46,13 +53,13 @@ code-tabs {
   display: none;
 }
 
+/** Callouts */
 rdme-callout {
   display: block;
   border-style: solid;
   border-width: 0 0 0 3.5px;
   border-color: rgb(80, 175, 81);
   background-color: rgb(243, 248, 243);
-  /*  */
   padding:16px 16px 4px 16px;
   margin: 16px 0;
 }
@@ -61,18 +68,15 @@ rdme-callout > *:first-child {
   font-size: 17.5px;
 }
 
+.footer-heading, .cl-box-blue h1, .cl-box-blue h2, .cl-box-blue h3 {
+  color: #fff;
+}
+
+/** Top Navigation */
 #nav-container {
   height: 88px;
-
   border-bottom: 4px solid #dfe7fb;
 }
-#page {
-  max-width: 1440px;
-  margin: 0px auto;
-  color: #666;
-}
-
-/** Top Navigation */
 #nav-container nav {
   position: relative;
   text-decoration: none;
@@ -141,27 +145,6 @@ navigation a.active:hover {
   color: #384248;
 }
 
-
-
-.cl-button--ghost {
-  display: inline-block;
-  padding: 8px;
-  padding-left: 20px;
-  padding-right: 20px;
-  border: 2px solid #375bd2;
-  margin: 0 0.3em 0.3em 0;
-  border-radius: 6px;
-  box-sizing: border-box;
-  text-decoration: none !important;
-  color: #375bd2;
-  text-align: center;
-  transition: all 0.2s;
-}
-.cl-button--ghost:hover {
-  color: #fff;
-  background-color: #375bd2;
-}
-
 /** Tables */
 th {
   text-align: left;
@@ -191,6 +174,54 @@ tr:nth-child(2n) {
   position: relative;
 }
 
+.row {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -.5rem;
+  margin-left: -.5rem;
+}
+.cl-button-container{
+  align-items: center;
+  text-align: center;
+}
+.cl-section {
+    padding: 0 0 48px;
+    justify-content: center;
+    align-content: space-between;
+}
+.markdown-body .cl-section {
+    padding: 0 0 48px;
+    text-align: center;
+}
+.markdown-body img {
+    box-sizing: content-box;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 48px;
+    margin-left: auto;
+    margin-right: auto;
+    border-style: none;
+    outline: none !important;
+}
+
+.cl-section--one {
+  margin-top: 30px;
+}
+.cl-section--one h3 {
+  font-size: 18px;
+}
+
 /** Fonts */
 @font-face {
   font-family: 'Circular';
@@ -284,46 +315,10 @@ tr:nth-child(2n) {
   position: relative;
 }
 
-@media all and (max-width: 1100px) {
-  .cl-custom-page {
-    margin-right: 30px;
-  }
-}
-
-@media only screen and (max-width: 1023px) {
-  .cl-featuredcard {
-    height: auto;
-    margin-bottom: 20px;
-  }
-}
-
 .cl-section--one .cl-featuredcard {
   height: 380px;
 }
 
-@media only screen and (min-width: 1100px) {
-  .cl-section--one .cl-featuredcard .cl-button--ghost {
-    transform: translateX(-50%);
-    bottom: 50px;
-    position: absolute;
-  }
-}
-
-@media only screen and (min-width: 1023px) and (max-width: 1099px) {
-  .cl-section--one .cl-featuredcard .cl-button--ghost {
-    transform: translateX(-50%);
-    bottom: 30px;
-    position: absolute;
-    width: 80%;
-  }
-}
-
-@media only screen and (max-width: 1023px) {
-  .cl-section--one .cl-featuredcard {
-    height: auto;
-  }
-}
-
 .cl-image-featured {
   display: inline-block;
   width: 50px;
@@ -375,12 +370,6 @@ tr:nth-child(2n) {
   border-radius: 16px;
 }
 
-@media only screen and (max-width: 1023px) {
-  .cl-box {
-    padding: 24px 24px;
-  }
-}
-
 .cl-box__lightblue {
   background-color: #f5f7fe;
 }
@@ -399,15 +388,6 @@ tr:nth-child(2n) {
   margin-bottom: 40px;
 }
 
-@media only screen and (max-width: 1023px) {
-  .cl-featuredcard-docs {
-    padding: 16px;
-    border-radius: 8px;
-    border: 1px solid #dee7fc;
-    margin-bottom: 20px;
-  }
-}
-
 .divider {
   width: 100%;
   height: 1px;
@@ -442,6 +422,7 @@ tr:nth-child(2n) {
 .cl-box-blue {
   background-color: #375bd2;
   border-radius: 16px;
+  color: #fff;
 }
 
 .cl-section--questions,
@@ -453,12 +434,6 @@ tr:nth-child(2n) {
   padding: 2px 1px;
 }
 
-@media only screen and (max-width: 400px) {
-  .cl-section--questions a {
-    display: block;
-  }
-}
-
 /** Copied from chain.link **/
 html {
   font-family: sans-serif;
@@ -781,12 +756,6 @@ input[type='reset'] {
   .nav-content > div {
     width: 100%;
   }
-  .corner-floated {
-    clear: both;
-    float: none;
-    padding: 4px 16px 0;
-    margin-top: 0;
-  }
   #nav-container {
     height: auto;
   }
@@ -810,3 +779,86 @@ input[type='reset'] {
     padding: 0;
   }
 }
+@media only screen and (max-width: 1023px) {
+  .cl-featuredcard {
+    height: auto;
+    margin-bottom: 20px;
+  }
+  .cl-section--one .cl-featuredcard {
+    height: auto;
+  }
+  .cl-box {
+    padding: 24px 24px;
+  }
+  .cl-featuredcard-docs {
+    padding: 16px;
+    border-radius: 8px;
+    border: 1px solid #dee7fc;
+    margin-bottom: 20px;
+  }
+}
+@media screen and (max-width: 1099px) {
+  .corner-floated {
+    clear: both;
+    float: none;
+    padding: 4px 16px 0;
+    margin-top: 0;
+  }
+}
+@media only screen and (min-width: 576px) {
+  .col-md-4 {
+    flex-basis: 32%;
+    max-width: 32%;
+    margin: 0 10px 10px 0;
+  }
+  .col-md-4:last-child {
+    margin-right: 0;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .col-md-6 {
+    flex-basis: 48%;
+    max-width: 48%;
+    margin: 0 10px 10px 0;
+  }
+  .col-md-6:last-child {
+    margin-right: 0;
+  }
+}
+@media only screen and (min-width: 576px) and (max-width: 1140px) {
+  .col-sm-12 {
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .col-md-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+    margin-left: 20px;
+  }
+}
+@media only screen and (max-width: 400px) {
+  .cl-section--questions a {
+    display: block;
+  }
+}
+@media only screen and (max-width: 576px) {
+  .cl-button--ghost {
+    margin-left: 10px;
+  }
+}
+@media only screen and (min-width: 1023px) and (max-width: 1099px) {
+  .cl-section--one .cl-featuredcard .cl-button--ghost {
+    transform: translateX(-50%);
+    bottom: 30px;
+    position: absolute;
+    width: 80%;
+  }
+}
+@media all and (max-width: 1100px) {
+  .cl-custom-page {
+    margin-right: 30px;
+  }
+}