DX-2631 Update API Reference Page

site/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.0.0-beta.21",
     "@docusaurus/preset-classic": "^2.0.0-beta.21",
+    "@lottiefiles/react-lottie-player": "3.4.7",
     "buffer": "^6.0.3",
     "js-yaml": "^4.1.0",
     "mobx": "^6.3.0",

site/src/components/ItemGrid.js

@@ -8,7 +8,7 @@ function Item({Svg, title, link}) {
                 <Svg className={itemGridStyles.itemSvg} alt={title} />
             </a>
             <div className="text--center padding-horiz--md">
-            <h2>{title}</h2>
+                <h2>{title}</h2>
             </div>
         </div>
     );

site/src/css/apis.module.css

@@ -1,13 +1,323 @@
-.image {
+.landing {
     width: 100%;
-    height: 900px;
-    background-image: url(../../static/img/landingimage2.png);
+    height: calc(100vh - var(--ifm-navbar-height));
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+@media screen and (max-width: 600px) {
+    .landing {
+        height: 120vh;
+    }
+}
+
+.top  {
+    width: 100%;
+    height: 55%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+}
+
+@media screen and (max-width: 1152px) {
+    .top {
+        height: 35%;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .top {
+        height: 27%;
+    }
+}
+
+.title {
+    height: 100%;
+    width: 50%;
+    padding-left: 10rem;
+    padding-top: 10rem;
+}
+
+@media screen and (max-width: 1152px) {
+    .title {
+        width: 100%;
+        height: 5rem;
+        padding-left: 0;
+        padding-top: 5rem;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .title {
+        padding-top: 2rem;
+    }
+}
+
+@media screen and (max-height: 900px) {
+    .title {
+        width: 100%;
+        padding-top: 3rem;
+        padding-left: 0;
+        text-align: center;
+    }
+}
+
+.title h1 {
+    font-size: 56px;
+    font-weight: 200;
+    line-height: 66px;
+    transition: .2s;
+}
+
+@media screen and (max-width: 1152px) {
+    .title h1 {
+        font-size: 36px;
+        line-height: 36px;
+        text-align: center;
+        padding: 0 2rem 0 2rem;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .title h1 {
+        font-size: 24px;
+        line-height: 24px;
+        text-align: center;
+    }
+}
+
+.title h2 {
+    font-size: 36px;
+    font-family: 'Overpass Bold';
+    line-height: 42px;
+    transition: .2s;
+}
+
+@media screen and (max-width: 1152px) {
+    .title h2 {
+        font-size: 24px;
+        line-height: 24px;
+        text-align: center;
+        padding: 0 2rem 0 2rem;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .title h2 {
+        font-size: 18px;
+        line-height: 18px;
+        text-align: center;
+    }
+}
+
+.title p {
+    font-size: 22px;
+    font-weight: 200;
+    line-height: 28px;
+    transition: .2s;
+}
+
+@media screen and (max-width: 1152px) {
+    .title p {
+        font-size: 18px;
+        line-height: 18px;
+        text-align: center;
+        padding: 0 2rem 0 2rem;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .title p {
+        font-size: 14px;
+        line-height: 14px;
+        text-align: center;
+    }
+}
+
+.image {
+    width: 50%;
+    height: 100%;
+    background-image: url(../../static/img/apiLanding.png);
     background-size: contain;
     background-repeat: no-repeat;
+    background-position: center;
 }
 
 @media screen and (max-width: 1152px) {
     .image {
-    display: none;
+        display: none;
+    }
+}
+
+@media screen and (max-height: 900px) {
+    .image {
+        display: none;
+    }
+}
+
+.bottom {
+    height: 45%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 0 10rem 0 10rem;
+}
+
+@media screen and (max-width: 1152px) {
+    .bottom {
+        height: 65%;
+        padding: 0 2rem 0 2rem;
+    }
+}
+
+@media screen and (max-width: 350) {
+    .bottom {
+        height: 73%;
+        padding: 0 2rem 0 2rem;
     }
 }
+
+.products {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    width: 100%;
+}
+
+.product {
+    width: 33%;
+    height: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding-left: 2rem;
+}
+
+@media screen and (max-width: 1152px) {
+    .product {
+        width: 50%;
+        height: 33%;
+    }
+}
+
+
+@media screen and (max-width: 600px) {
+    .product {
+        width: 100%;
+        height: 16%;
+        padding-left: 0;
+    }
+}
+
+.productSvg {
+    width: 25%;
+    height: 50%;
+}
+
+@media screen and (max-width: 600px) {
+    .productSvg {
+        width: 15%;
+    }
+}
+
+.productInfo {
+    width: 75%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-left: 2rem;
+}
+
+.productInfo h1 {
+    font-size: 26px;
+    line-height: 26px;
+    font-family: 'Overpass';
+}
+
+@media screen and (max-width: 1152px) {
+    .productInfo h1 {
+        font-size: 22px;
+        line-height: 22px;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .productInfo h1 {
+        font-size: 18px;
+        line-height: 18px;
+        margin-bottom: 1px;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .productInfo h1 {
+        font-size: 16px;
+        line-height: 16px;
+        margin-bottom: 1px;
+    }
+}
+
+@media screen and (max-height: 900px) {
+    .productInfo h1 {
+        font-size: 20px;
+        line-height: 20px;
+        margin-bottom: 1px;
+    }
+}
+
+.apiList {
+    width: 100%;
+    height: calc(100% - 28px);
+}
+
+@media screen and (max-height: 900px) {
+    .apiList li {
+        line-height: 20px;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .apiList li {
+        line-height: 16px;
+    }
+}
+
+.apiList a {
+    font-family: 'Overpass';
+    font-size: 18px;
+    line-height: 32px;
+    color: #FFFFFF;
+    font-style: italic;
+}
+
+@media screen and (max-height: 900px) {
+    .apiList a {
+        font-size: 16px;
+        line-height: 16px;
+    }
+}
+
+@media screen and (max-width: 1152px) {
+    .apiList a {
+        font-size: 16px;
+        line-height: 22px;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .apiList a {
+        font-size: 14px;
+        line-height: 18px;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    .apiList a {
+        font-size: 12px;
+        line-height: 14px;
+    }
+}
+

site/src/css/sdks.module.css

@@ -45,14 +45,11 @@ html[data-theme='dark'] .sdkProductTable tbody {
 
 .image {
   width: 100%;
-  height: 800px;
-  background-image: url(../../static/img/landingimage.png);
-  background-size: contain;
-  background-repeat: no-repeat;
+  height: 100%;
 }
 
 @media screen and (max-width: 1152px) {
   .image {
-  display: none;
+    display: none;
   }
 }

site/src/css/twoColumn.module.css

@@ -51,6 +51,7 @@
         font-size: 36px;
         line-height: 36px;
         text-align: center;
+        padding: 0 2rem 0 2rem;
     }
 }