DX-3027 Change Mobile Spacing (#893)

* DX-3022 Optimize Sass

* fix instances of px instead of rem

* fixes to nesting

* fix more nesting

* update font weight in tab switchers

* update fonts to use variables

* overpass light variable

* revert size and layout css

* update sizing and layouts to use px

* use variable for item grid item size

* DX-3027 Change Mobile Spacing

* update redoc version to fix arrows and expanding

* fix merge error

Co-authored-by: AJ Rice <[email protected]>

Author: ckoegel

site/package.json

@@ -20,7 +20,7 @@
     "@docusaurus/core": "^2.2.0",
     "@docusaurus/preset-classic": "^2.2.0",
     "@types/react": "^17.0.0",
-    "bandwidth-redoc": "^1.1.0",
+    "bandwidth-redoc": "^1.2.0",
     "buffer": "^6.0.3",
     "core-js": "^3.1.4",
     "docusaurus-plugin-sass": "^0.2.2",

site/src/css/components/_Carousel.scss

@@ -11,7 +11,6 @@
 
     @include mobile-view {
         height: 300px;
-        margin: 0;
     }
     @include ultra-slim-mobile-view {
         height: 240px;

site/src/css/components/_LandingPage.scss

@@ -11,6 +11,9 @@
     @include small-desktop-view {
         flex-direction: row;
     }
+    @include mobile-view {
+        padding-top: 2rem;
+    }
 
     .landing-page-left {
         width: 50%;
@@ -27,6 +30,10 @@
         @include mobile-view {
             width: 100%;
             padding: 0rem 2rem;
+            margin-bottom: 50px;
+        }
+        @include slim-mobile-view {
+            margin-bottom: 0;
         }
     }
 
@@ -38,6 +45,9 @@
             height: 75px;
             margin-bottom: 75px;
         }
+        @include mobile-view {
+            margin-bottom: 20px;
+        }
 
         h1 {
             font-size: 3.6rem;

site/src/css/components/_SplashPage.scss

@@ -10,11 +10,19 @@
     color: var(--ifm-font-color-base);
     margin-bottom: 90px;
 
+    @include slim-mobile-view {
+        margin-bottom: 30px;
+    }
+
     .splash-header {
         width: 100%;
         height: auto;
         padding: 4em 2em;
 
+        @include mobile-view {
+            padding: 2em 2em;
+        }
+
         h1 {
             font-family: $overpass;
             font-size: 4.2rem;
@@ -57,7 +65,8 @@
         margin-bottom: 90px;
 
         @include mobile-view {
-            margin-bottom: 0;
+            height: auto;
+            margin-bottom: 30px;
         }
     }
 

site/yarn.lock

@@ -2712,10 +2712,10 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-bandwidth-redoc@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/bandwidth-redoc/-/bandwidth-redoc-1.1.0.tgz#15728d5c22b25903daabdcedda69b020a06d0517"
-  integrity sha512-NVqsFhcnybL/I57ow8wf2+edWWw5mamg3ClIQkxvfxAxV5qmpKaj1vOZ8w3ptPdOKgMI/EkyhAuSozbYkKdhAw==
+bandwidth-redoc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/bandwidth-redoc/-/bandwidth-redoc-1.2.0.tgz#71c85e5a5e2efea08070f6935901f13e25932d2e"
+  integrity sha512-vSYMVdRgJ4FTKsw3zqcAGxfmR6TrMIRYLBlnkrUeDWl5TBU5c+9ZwwBz/mFxUEqvr98qBpSFwgptNnWi2zuzYg==
   dependencies:
     "@redocly/openapi-core" "^1.0.0-beta.104"
     classnames "^2.3.1"