From 47a5179ca6889686ed59ffc906bac8afaa925aa6 Mon Sep 17 00:00:00 2001 From: Cameron Koegel <53310569+ckoegel@users.noreply.github.com> Date: Thu, 5 Jan 2023 15:48:20 -0500 Subject: [PATCH] DX-3022 Optimize Sass (#864) * 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 --- site/src/components/Carousel.js | 8 +- site/src/components/FeaturePanels.js | 8 +- site/src/components/ItemGrid.js | 2 +- site/src/components/LandingPage.js | 8 +- site/src/components/SplashPage.js | 6 +- site/src/css/base/_root.scss | 4 +- site/src/css/components/_Carousel.scss | 174 +++++++++--------- site/src/css/components/_FeaturePanel.scss | 76 ++++---- site/src/css/components/_ItemGrid.scss | 44 ++--- site/src/css/components/_LandingPage.scss | 92 ++++----- site/src/css/components/_RedocStandalone.scss | 2 +- site/src/css/components/_SdkPage.scss | 120 ++++++------ .../css/components/_SpecVersionDropdown.scss | 4 +- site/src/css/components/_SplashPage.scss | 145 +++++++-------- .../components/modules/_CarouselSlide.scss | 102 +++++----- .../src/css/components/modules/_DocsSdks.scss | 56 +++--- .../components/modules/_RedocRightPanel.scss | 5 +- site/src/css/layout/_footer.scss | 2 +- site/src/css/layout/_navbar.scss | 4 +- site/src/css/utils/_variables.scss | 12 +- 20 files changed, 440 insertions(+), 434 deletions(-) diff --git a/site/src/components/Carousel.js b/site/src/components/Carousel.js index e634e45e5..1dcade739 100644 --- a/site/src/components/Carousel.js +++ b/site/src/components/Carousel.js @@ -118,14 +118,14 @@ export default function Carousel({itemList, title}) { return (
-
-
-
+
+
+
{categories.map((category, idx) => ( {category} ))}
-
+
diff --git a/site/src/components/FeaturePanels.js b/site/src/components/FeaturePanels.js index 5eeebaeff..2707c0eb9 100644 --- a/site/src/components/FeaturePanels.js +++ b/site/src/components/FeaturePanels.js @@ -3,11 +3,11 @@ import React from 'react'; function FeaturePanel({Svg, title, text, link}) { return ( -
- -
{title}
+
+ +
{title}
-
+
{text}
 diff --git a/site/src/components/ItemGrid.js b/site/src/components/ItemGrid.js index 27bda0b1c..f04aa1dc1 100644 --- a/site/src/components/ItemGrid.js +++ b/site/src/components/ItemGrid.js @@ -2,7 +2,7 @@ import React from 'react'; function Item({Svg, title, link}) { return ( -
+
diff --git a/site/src/components/LandingPage.js b/site/src/components/LandingPage.js index bf1fa3d33..6bd621f8c 100644 --- a/site/src/components/LandingPage.js +++ b/site/src/components/LandingPage.js @@ -4,15 +4,15 @@ import ItemGrid from '@site/src/components/ItemGrid.js'; export default function LandingPage({itemList, Svg, h1Text, h2Text}) { return (
-
-
+
+

{h1Text}

{h2Text}

-
- +
+
); diff --git a/site/src/components/SplashPage.js b/site/src/components/SplashPage.js index 917c28682..4e340b28c 100644 --- a/site/src/components/SplashPage.js +++ b/site/src/components/SplashPage.js @@ -46,9 +46,9 @@ function SplashPageImage({Svg}) { function SplashPageTextBlock({title, text, linkText, link}) { return (
-
{title}
-
{text}
- +
{title}
+
{text}
+
) } diff --git a/site/src/css/base/_root.scss b/site/src/css/base/_root.scss index 5c7743f00..4b76a079a 100644 --- a/site/src/css/base/_root.scss +++ b/site/src/css/base/_root.scss @@ -17,8 +17,8 @@ --ifm-color-primary-lightest: #{$blue25}; /* Infima Font Overrides */ - --ifm-font-family-base: 'Overpass'; - --ifm-font-family-monospace: 'Overpass Mono'; + --ifm-font-family-base: #{$overpass}; + --ifm-font-family-monospace: #{$overpass-mono}; --ifm-font-color-base: var(--ifm-color-content); --ifm-font-color-secondary: var(--ifm-color-content-secondary); --ifm-font-size-base: 95%; diff --git a/site/src/css/components/_Carousel.scss b/site/src/css/components/_Carousel.scss index 25c12e81f..2f4258fb9 100644 --- a/site/src/css/components/_Carousel.scss +++ b/site/src/css/components/_Carousel.scss @@ -7,7 +7,7 @@ height: 550px; display: flex; flex-direction: column; - margin: 2em 0; + margin: 30px 0; @include mobile-view { height: 300px; @@ -17,10 +17,6 @@ height: 240px; } - .decoration { - - } - .top-amoeba { @extend %carousel-decoration; margin-bottom: -1px; @@ -55,100 +51,100 @@ @include mobile-view { height: 100%; } + } - .carousel-header { - width: auto; - height: 50px; - color: var(--ifm-font-color-base); - font-family: 'Overpass Bold'; - font-size: 2.2rem; - display: flex; - justify-content: center; - align-items: center; - - @include mobile-view { - height: 30px; - font-size: 1.8rem; - } - @include slim-mobile-view { - height: 22px; - font-size: 1.5rem; - } - @include ultra-slim-mobile-view { - height: 20px; - font-size: 1.2rem; - } - } - - .carousel-content { - height: auto; - margin: 0 auto; - position: relative; - display: flex; - justify-content: center; - } - - .carousel { - width: 100%; - height: 100%; - overflow: visible; - position: relative; - } - - .carousel-slides { - display: flex; - overflow: visible; - position: relative; - width: 100%; - height: 100%; + .carousel-header { + width: auto; + height: 50px; + color: var(--ifm-font-color-base); + font-family: $overpass-bold; + font-size: 2.2rem; + display: flex; + justify-content: center; + align-items: center; - @include slide; + @include mobile-view { + height: 30px; + font-size: 1.8rem; } - - .transition { - transition: all .25s ease-out; + @include slim-mobile-view { + height: 22px; + font-size: 1.5rem; } - - .disabled { - pointer-events: none; + @include ultra-slim-mobile-view { + height: 20px; + font-size: 1.2rem; } + } - .nav-buttons { - position: absolute; - width: 100vw; - height: auto; - display: flex; - padding: 0 3em; - justify-content: space-between; - - @include mobile-view { - padding: 0 2em; - } + .carousel-content { + height: auto; + margin: 0 auto; + position: relative; + display: flex; + justify-content: center; + } - button { - border-radius: 50%; - border: none; - background-color: $white; - font-family: 'Material Icons'; - color: $blue50; - font-size: 2.4rem; - line-height: 2.2rem; - padding: 0; + .carousel { + width: 100%; + height: 100%; + overflow: visible; + position: relative; + } - &:hover { - cursor: pointer; - } - } + .carousel-slides { + display: flex; + overflow: visible; + position: relative; + width: 100%; + height: 100%; + + @include slide; + } - .left-button::before { - content: 'chevron_left'; - margin-left: -2px; - } - - .right-button::before { - content: 'chevron_right'; - margin-left: 2px; + .transition { + transition: all .25s ease-out; + } + + .disabled { + pointer-events: none; + } + + .nav-buttons { + position: absolute; + width: 100vw; + height: auto; + display: flex; + padding: 0 3em; + justify-content: space-between; + + @include mobile-view { + padding: 0 2em; + } + + button { + border-radius: 50%; + border: none; + background-color: $white; + font-family: 'Material Icons'; + color: $blue50; + font-size: 2.4rem; + line-height: 2.2rem; + padding: 0; + + &:hover { + cursor: pointer; } } + + .left-button::before { + content: 'chevron_left'; + margin-left: -2px; + } + + .right-button::before { + content: 'chevron_right'; + margin-left: 2px; + } } } diff --git a/site/src/css/components/_FeaturePanel.scss b/site/src/css/components/_FeaturePanel.scss index cbe097c41..0020f8d53 100644 --- a/site/src/css/components/_FeaturePanel.scss +++ b/site/src/css/components/_FeaturePanel.scss @@ -9,7 +9,7 @@ .panel { width: 300px; height: 250px; - margin: 0 .6em 1.2em; + margin: 0 9px 18px; display: flex; flex-direction: column; background-color: var(--ifm-background-color); @@ -19,51 +19,51 @@ text-decoration: none; @include slim-mobile-view { - margin: 0 0 1.2rem; + margin: 0 0 18px; height: auto; } &:hover { text-decoration: none; } + } - .header { - width: auto; - height: 50px; - margin: 20px 15px; - display: flex; + .panel-header { + width: auto; + height: 50px; + margin: 20px 15px; + display: flex; + } - .icon { - width: 50px; - height: auto; - } - - .title { - width: calc(100% - 50px); - height: auto; - padding-left: 5px; - padding-top: 2px; - color: var(--ifm-font-color-base); - font-family: 'Overpass Bold'; - font-size: 1.1rem; - line-height: 1.1rem; - display: flex; - align-items: center; - } - } - - .content { - width: 100%; - flex-grow: 1; - padding: 5px 25px 10px; - display: flex; - flex-direction: column; + .panel-icon { + width: 50px; + height: auto; + } + + .panel-title { + width: calc(100% - 50px); + height: auto; + padding-left: 5px; + padding-top: 2px; + color: var(--ifm-font-color-base); + font-family: $overpass-bold; + font-size: 1.1rem; + line-height: 1.1rem; + display: flex; + align-items: center; + } + + .panel-content { + width: 100%; + flex-grow: 1; + padding: 5px 25px 10px; + display: flex; + flex-direction: column; + } - .panel-text { - width: 100%; - flex-grow: 1; - color: var(--ifm-font-color-base); - } - } + .panel-text { + width: 100%; + flex-grow: 1; + color: var(--ifm-font-color-base); } } diff --git a/site/src/css/components/_ItemGrid.scss b/site/src/css/components/_ItemGrid.scss index d733fc22e..f74c2ee12 100644 --- a/site/src/css/components/_ItemGrid.scss +++ b/site/src/css/components/_ItemGrid.scss @@ -6,7 +6,8 @@ justify-content: flex-start; width: 100%; - .item { + .item-grid-item { + $item-size: 50px; width: 50%; height: 75px; display: flex; @@ -19,39 +20,40 @@ } .item-image { - height: 50px; - width: 50px; + height: $item-size; + width: $item-size; display: flex; align-items: center; justify-content: center; - - .item-svg { - height: 100%; - width: 100%; - } + } + + .item-svg { + height: 100%; + width: 100%; } .item-text { height: 100%; - width: calc(100% - 80px); + width: calc(100% - $item-size); display: flex; align-items: center; padding-left: 2rem; overflow: visible; - .text-link { - &:hover { - text-decoration: none; - } - - h3 { - margin: 0; - font-size: 1.1rem; - color: var(--ifm-font-color-base); + } - &:hover { - color: $blue55; - } + .text-link { + &:hover { + text-decoration: none; + } + + h3 { + margin: 0; + font-size: 1.1rem; + color: var(--ifm-font-color-base); + + &:hover { + color: $blue55; } } } diff --git a/site/src/css/components/_LandingPage.scss b/site/src/css/components/_LandingPage.scss index d0792fba0..c76ba8537 100644 --- a/site/src/css/components/_LandingPage.scss +++ b/site/src/css/components/_LandingPage.scss @@ -12,11 +12,11 @@ flex-direction: row; } - .left { + .landing-page-left { width: 50%; height: auto; - padding-left: 10rem; - margin-bottom: 10rem; + padding-left: 150px; + margin-bottom: 150px; display: flex; flex-direction: column; @@ -28,53 +28,53 @@ width: 100%; padding: 0rem 2rem; } - - .title { - margin-bottom: 2rem; + } - @include small-desktop-view { - width: 100%; - height: 5rem; - margin-bottom: 5rem; - } - - h1 { - font-size: 3.6rem; - font-weight: 200; - line-height: 3.6rem; - transition: 0.2s; + .landing-page-title { + margin-bottom: 30px; - @include mobile-view { - font-size: 2.4rem; - line-height: 2.4rem; - } - @include slim-mobile-view { - font-size: 1.6rem; - line-height: 1.6rem; - text-align: center; - } - } - - h2 { - font-family: 'Overpass Bold'; + @include small-desktop-view { + width: 100%; + height: 75px; + margin-bottom: 75px; + } + + h1 { + font-size: 3.6rem; + font-weight: 200; + line-height: 3.6rem; + transition: 0.2s; + + @include mobile-view { font-size: 2.4rem; line-height: 2.4rem; - transition: 0.2s; + } + @include slim-mobile-view { + font-size: 1.6rem; + line-height: 1.6rem; + text-align: center; + } + } + + h2 { + font-family: $overpass-bold; + font-size: 2.4rem; + line-height: 2.4rem; + transition: 0.2s; - @include mobile-view { - font-size: 1.6rem; - line-height: 1.6rem; - } - @include slim-mobile-view { - font-size: 1.2rem; - line-height: 1.2rem; - text-align: center; - } + @include mobile-view { + font-size: 1.6rem; + line-height: 1.6rem; + } + @include slim-mobile-view { + font-size: 1.2rem; + line-height: 1.2rem; + text-align: center; } } } - .right { + .landing-page-right { width: 50%; height: 80vh; padding-top: 56px; @@ -85,11 +85,11 @@ @include small-desktop-view { display: none; } + } - .right-image { - width: 75%; - height: auto; - max-height: 550px; - } + .landing-page-right-image { + width: 75%; + height: auto; + max-height: 550px; } } diff --git a/site/src/css/components/_RedocStandalone.scss b/site/src/css/components/_RedocStandalone.scss index aad50c30b..e5c82b688 100644 --- a/site/src/css/components/_RedocStandalone.scss +++ b/site/src/css/components/_RedocStandalone.scss @@ -9,7 +9,7 @@ .RedocStandalone { position: relative; z-index: 0; - margin-bottom: 10rem; + margin-bottom: 150px; @include redoc-headers; @include redoc-loading-circle; diff --git a/site/src/css/components/_SdkPage.scss b/site/src/css/components/_SdkPage.scss index a1f6ea8c0..931545bd5 100644 --- a/site/src/css/components/_SdkPage.scss +++ b/site/src/css/components/_SdkPage.scss @@ -11,11 +11,11 @@ display: flex; align-items: center; justify-content: center; - - .sdk-svg { - height: 225px; - width: 180px; - } + } + + .sdk-svg { + height: 225px; + width: 180px; } .sdk-product-table { @@ -23,81 +23,81 @@ padding: 0 5rem; display: flex; justify-content: center; - margin-bottom: 10rem; + margin-bottom: 150px; @include mobile-view { - margin-bottom: 5rem; + margin-bottom: 75px; padding: 0 2rem; } + } + + .table-holder { + width: auto; + height: auto; + overflow: auto; - .table-holder { + table { width: auto; - height: auto; - overflow: auto; - - table { - width: auto; - overflow: visible; - min-width: 360px; - color: var(--ifm-font-color-base); - - /* remove all border lines */ - td, th, tr { - border: none; - } + overflow: visible; + min-width: 360px; + color: var(--ifm-font-color-base); - /* left padding for first column */ - td:first-child, th:first-child { - padding-left: 1rem; - } + /* remove all border lines */ + td, th, tr { + border: none; + } - /* right padding for last column */ - td:last-child, th:last-child { - padding-right: 1rem; - } + /* left padding for first column */ + td:first-child, th:first-child { + padding-left: 1rem; + } - tr:nth-child(2n) { - background-color: var(--cloud-color); - } + /* right padding for last column */ + td:last-child, th:last-child { + padding-right: 1rem; + } - thead { - background-color: var(--cloud-color); + tr:nth-child(2n) { + background-color: var(--cloud-color); + } - th { - /* rounded top left edge */ - &:first-child { - border-radius: 20px 0 0 0; - } + thead { + background-color: var(--cloud-color); - /* rounded top right edge */ - &:last-child { - border-radius: 0 20px 0 0; - } + th { + /* rounded top left edge */ + &:first-child { + border-radius: 20px 0 0 0; } - } - tbody { - tr:last-child { - /* rounded bottom left edge */ - td:first-child { - border-radius: 0 0 0 20px; - } - /* rounded bottom right edge */ - td:last-child { - border-radius: 0 0 20px 0; - } + /* rounded top right edge */ + &:last-child { + border-radius: 0 20px 0 0; } + } + } - tr:nth-child(2n+1) { - background-color: var(--cloud-accent); + tbody { + tr:last-child { + /* rounded bottom left edge */ + td:first-child { + border-radius: 0 0 0 20px; } + /* rounded bottom right edge */ + td:last-child { + border-radius: 0 0 20px 0; + } + } + + tr:nth-child(2n+1) { + background-color: var(--cloud-accent); } } } + } - .sdk-migration-guides { - text-align: center; - font-weight: bold; - } + .sdk-migration-guides { + text-align: center; + font-weight: bold; } } diff --git a/site/src/css/components/_SpecVersionDropdown.scss b/site/src/css/components/_SpecVersionDropdown.scss index 20499e547..af63899bd 100644 --- a/site/src/css/components/_SpecVersionDropdown.scss +++ b/site/src/css/components/_SpecVersionDropdown.scss @@ -10,7 +10,7 @@ label { width: auto; - margin-right: 1em; + margin-right: 15px; z-index: 1; border: none; background-color: transparent; @@ -26,7 +26,7 @@ option { list-style: none; - margin-bottom: 0.8em; + margin-bottom: 12px; cursor: pointer; } } diff --git a/site/src/css/components/_SplashPage.scss b/site/src/css/components/_SplashPage.scss index 01aea642b..46178da5d 100644 --- a/site/src/css/components/_SplashPage.scss +++ b/site/src/css/components/_SplashPage.scss @@ -8,7 +8,7 @@ justify-content: center; align-items: center; color: var(--ifm-font-color-base); - margin-bottom: 6em; + margin-bottom: 90px; .splash-header { width: 100%; @@ -16,7 +16,7 @@ padding: 4em 2em; h1 { - font-family: 'Overpass'; + font-family: $overpass; font-size: 4.2rem; line-height: 4.2rem; font-weight: 200; @@ -33,7 +33,7 @@ } h2 { - font-family: 'Overpass Light'; + font-family: $overpass-light; font-size: 1.6rem; text-align: center; @@ -54,93 +54,94 @@ display: flex; align-items: center; justify-content: space-between; - margin-bottom: 6em; + margin-bottom: 90px; @include mobile-view { margin-bottom: 0; } + } - .splash-row-left { - width: 45%; - height: 100%; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; + .splash-row-left { + width: 45%; + height: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; - @include mobile-view { - width: auto; - } + @include mobile-view { + width: auto; } + } - .splash-row-right { - width: 45%; - height: 100%; - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; + .splash-row-right { + width: 45%; + height: 100%; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; - @include mobile-view { - width: auto; - justify-content: flex-start; - } + @include mobile-view { + width: auto; + justify-content: flex-start; } + } - .text-block { - width: 90%; - height: auto; - display: flex; - flex-direction: column; + .text-block { + width: 90%; + height: auto; + display: flex; + flex-direction: column; + + } - .title { - width: 100%; - height: auto; - font-family: 'Overpass Bold'; - font-size: 2.1rem; - - @include slim-mobile-view { - font-size: 1.6rem; - line-height: 1.8rem; - } - } - - .text { - width: 100%; - height: auto; - font-family: 'Overpass'; - font-size: var(--ifm-font-size-base); - margin-bottom: 0.8em; - } + .text-block-title { + width: 100%; + height: auto; + font-family: $overpass-bold; + font-size: 2.1rem; + + @include slim-mobile-view { + font-size: 1.6rem; + line-height: 1.8rem; + } + } + + .text-block-text { + width: 100%; + height: auto; + font-family: $overpass; + font-size: var(--ifm-font-size-base); + margin-bottom: 12px; + } + + .text-block-link { + a { + width: auto; + height: auto; + font-family: $overpass-bold; + color: var(--ifm-font-color-base); + text-decoration: none; - .link { - a { - width: auto; - height: auto; - font-family: 'Overpass Bold'; - color: var(--ifm-font-color-base); - text-decoration: none; - - &:hover { - color: $blue55; - text-decoration: none; - } - } + &:hover { + color: $blue55; + text-decoration: none; } } + } + + .image { + width: 100%; + height: 100%; + + @include mobile-view { + display: none; + } - .image { + svg { width: 100%; height: 100%; - - @include mobile-view { - display: none; - } - - svg { - width: 100%; - height: 100%; - } } } } diff --git a/site/src/css/components/modules/_CarouselSlide.scss b/site/src/css/components/modules/_CarouselSlide.scss index ecc6d5807..b4b1a3d30 100644 --- a/site/src/css/components/modules/_CarouselSlide.scss +++ b/site/src/css/components/modules/_CarouselSlide.scss @@ -7,7 +7,7 @@ justify-content: center; align-items: flex-start; - .item { + .slide-item { background-color: var(--cloud-color); border-radius: 24px; box-shadow: 0px 0px 20px $black-shadow; @@ -15,68 +15,68 @@ flex-direction: column; align-items: center; justify-content: space-evenly; + } - .image { - margin-top: 20px; - background-size: cover; - border-radius: 14px; - box-shadow: 0px 0px 10px $black-shadow; - } + .slide-image { + margin-top: 20px; + background-size: cover; + border-radius: 14px; + box-shadow: 0px 0px 10px $black-shadow; + } - .categories { + .slide-categories { + height: auto; + width: auto; + display: flex; + flex-direction: row; + justify-content: flex-start; + + a { height: auto; width: auto; - display: flex; - flex-direction: row; - justify-content: flex-start; - - a { - height: auto; - width: auto; - font-family: 'Overpass Bold'; - text-transform: uppercase; - font-size: 0.9rem; - line-height: 0.9rem; - text-align: left; - letter-spacing: 0.07em; - text-decoration: none; - color: var(--ifm-font-color-base); + font-family: $overpass-bold; + text-transform: uppercase; + font-size: 0.9rem; + line-height: 0.9rem; + text-align: left; + letter-spacing: 0.07em; + text-decoration: none; + color: var(--ifm-font-color-base); - &:not(:last-child):after { - content: ', '; - } + &:not(:last-child):after { + content: ', '; + } - &:hover { - color: $blue55; - } - @include ultra-slim-mobile-view { - font-size: 0.6rem; - line-height: 0.6rem; - } + &:hover { + color: $blue55; + } + @include ultra-slim-mobile-view { + font-size: 0.6rem; + line-height: 0.6rem; } } + } - .post { - height: auto; - font-family: 'Overpass'; - font-size: 1.1rem; - line-height: 1.1rem; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + .slide-post { + height: auto; + font-family: $overpass; + font-size: 1.1rem; + line-height: 1.1rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; - @include ultra-slim-mobile-view { - font-size: 0.9rem; - line-height: 0.9rem; - } + @include ultra-slim-mobile-view { + font-size: 0.9rem; + line-height: 0.9rem; + } - a { - text-decoration: none; - color: var(--ifm-font-color-base); + a { + text-decoration: none; + color: var(--ifm-font-color-base); - &:hover { - color: $blue55; - } + &:hover { + color: $blue55; } } } diff --git a/site/src/css/components/modules/_DocsSdks.scss b/site/src/css/components/modules/_DocsSdks.scss index 0215a9400..1e7113c94 100644 --- a/site/src/css/components/modules/_DocsSdks.scss +++ b/site/src/css/components/modules/_DocsSdks.scss @@ -10,16 +10,16 @@ .sdks-text { width: 60%; height: auto; - - .postman-link { + } + + .postman-link { + color: $orange50; + font-family: $overpass-bold; + text-decoration: none; + + &:hover { color: $orange50; - font-family: 'Overpass Bold'; text-decoration: none; - - &:hover { - color: $orange50; - text-decoration: none; - } } } @@ -28,26 +28,26 @@ height: 100px; display: flex; justify-content: center; - - .sdk-image-container { - width: 150px; - height: auto; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - - a { - width: 40px; - height: 40px; - border-radius: 50%; - box-shadow: 1px 3px 3px var(--shadow-color), -1px 0px 3px var(--shadow-color); - } - - svg { - width: 100%; - height: 100%; - } + } + + .sdk-image-container { + width: 150px; + height: auto; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + + a { + width: 40px; + height: 40px; + border-radius: 50%; + box-shadow: 1px 3px 3px var(--shadow-color), -1px 0px 3px var(--shadow-color); + } + + svg { + width: 100%; + height: 100%; } } } diff --git a/site/src/css/components/modules/_RedocRightPanel.scss b/site/src/css/components/modules/_RedocRightPanel.scss index b997743cf..b46b8b6c8 100644 --- a/site/src/css/components/modules/_RedocRightPanel.scss +++ b/site/src/css/components/modules/_RedocRightPanel.scss @@ -59,6 +59,7 @@ .operation-response-samples { .tab-success, .tab-error { @extend %redoc-sample-tab; + font-family: $overpass-bold } .response-sample { @@ -71,11 +72,11 @@ @extend %redoc-sample-container; span { - margin-top: 1rem; + margin-top: 15px; } > div { - margin-top: 1rem; + margin-top: 15px; } } diff --git a/site/src/css/layout/_footer.scss b/site/src/css/layout/_footer.scss index 2cedcbb96..cab84c475 100644 --- a/site/src/css/layout/_footer.scss +++ b/site/src/css/layout/_footer.scss @@ -136,7 +136,7 @@ .menu-title { color: var(--ifm-color-primary); - font-family: 'Overpass Bold'; + font-family: $overpass-bold; font-size: 1rem; line-height: 1.2rem; letter-spacing: 0.1em; diff --git a/site/src/css/layout/_navbar.scss b/site/src/css/layout/_navbar.scss index 7931f25e7..5a5bde4cf 100644 --- a/site/src/css/layout/_navbar.scss +++ b/site/src/css/layout/_navbar.scss @@ -17,7 +17,7 @@ } .navbar__link { - font-family: 'Overpass Bold'; + font-family: $overpass-bold; &:after { // dropdown menu caret border: none; @@ -38,7 +38,7 @@ .dropdown__link { font-size: 1rem; - font-family: 'Overpass Light'; + font-family: $overpass-light; } } } diff --git a/site/src/css/utils/_variables.scss b/site/src/css/utils/_variables.scss index c82ab94ce..0cce876c3 100644 --- a/site/src/css/utils/_variables.scss +++ b/site/src/css/utils/_variables.scss @@ -2,6 +2,12 @@ /* Variables */ +// Fonts +$overpass: 'Overpass'; +$overpass-bold: 'Overpass Bold'; +$overpass-light: 'Overpass Light'; +$overpass-mono: 'Overpass Mono'; + // Colors $blue2: rgb(245, 251, 254); $blue5: rgb(230, 245, 253); @@ -42,7 +48,7 @@ $sample-bg-dark: rgb(18, 18, 18); border-radius: 20px; color: $white; font-size: .8rem; - font-family: 'Overpass Bold'; + font-family: $overpass-bold; text-transform: uppercase; line-height: 1.2rem; letter-spacing: 0.1em; @@ -56,7 +62,7 @@ $sample-bg-dark: rgb(18, 18, 18); background-size: 20px 20px; background-position: center; background-repeat: no-repeat; - margin-right: 0.5rem; + margin-right: 7.5px; border-radius: 15.5px; &:hover { @@ -66,7 +72,7 @@ $sample-bg-dark: rgb(18, 18, 18); %redoc-sample-tab { background: var(--pre-background); - font-family: 'Overpass Bold'; + font-family: $overpass; border-style: solid; border-width: 2px; word-wrap: normal;