From de8d29c20f18c754cfe3896357a5354857727c12 Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Wed, 7 Dec 2022 16:25:47 -0500 Subject: [PATCH 01/10] DX-3022 Optimize Sass --- site/src/css/components/_Carousel.scss | 20 ++++++++------------ site/src/css/components/_FeaturePanel.scss | 10 +++++----- site/src/css/components/_GitHubLink.scss | 6 +++--- site/src/css/components/_ItemGrid.scss | 8 ++++---- site/src/css/components/_LandingPage.scss | 2 +- 5 files changed, 21 insertions(+), 25 deletions(-) diff --git a/site/src/css/components/_Carousel.scss b/site/src/css/components/_Carousel.scss index 25c12e81f..700883a22 100644 --- a/site/src/css/components/_Carousel.scss +++ b/site/src/css/components/_Carousel.scss @@ -4,23 +4,19 @@ .carousel-container { width: 100%; - height: 550px; + height: 36.2rem; display: flex; flex-direction: column; margin: 2em 0; @include mobile-view { - height: 300px; + height: 19.8rem; margin: 0; } @include ultra-slim-mobile-view { - height: 240px; + height: 15.8rem; } - .decoration { - - } - .top-amoeba { @extend %carousel-decoration; margin-bottom: -1px; @@ -45,7 +41,7 @@ .content { width: 100%; - height: 450px; + height: 29.6rem; background-color: var(--carousel-color); overflow: hidden; display: flex; @@ -58,7 +54,7 @@ .carousel-header { width: auto; - height: 50px; + height: 3.3rem; color: var(--ifm-font-color-base); font-family: 'Overpass Bold'; font-size: 2.2rem; @@ -67,15 +63,15 @@ align-items: center; @include mobile-view { - height: 30px; + height: 2rem; font-size: 1.8rem; } @include slim-mobile-view { - height: 22px; + height: 1.5rem; font-size: 1.5rem; } @include ultra-slim-mobile-view { - height: 20px; + height: 1.3rem; font-size: 1.2rem; } } diff --git a/site/src/css/components/_FeaturePanel.scss b/site/src/css/components/_FeaturePanel.scss index cbe097c41..823c75bf9 100644 --- a/site/src/css/components/_FeaturePanel.scss +++ b/site/src/css/components/_FeaturePanel.scss @@ -7,8 +7,8 @@ justify-content: center; .panel { - width: 300px; - height: 250px; + width: 19.8rem; + height: 16.4rem; margin: 0 .6em 1.2em; display: flex; flex-direction: column; @@ -29,17 +29,17 @@ .header { width: auto; - height: 50px; + height: 3.3rem; margin: 20px 15px; display: flex; .icon { - width: 50px; + width: 3.3rem; height: auto; } .title { - width: calc(100% - 50px); + width: calc(100% - 3.3rem); height: auto; padding-left: 5px; padding-top: 2px; diff --git a/site/src/css/components/_GitHubLink.scss b/site/src/css/components/_GitHubLink.scss index 464b3e0df..a3c59752a 100644 --- a/site/src/css/components/_GitHubLink.scss +++ b/site/src/css/components/_GitHubLink.scss @@ -3,12 +3,12 @@ .github-icon { background-image: var(--github-logo); background-position: center; - background-size: 50px; + background-size: 3.3rem; background-repeat: no-repeat; a { - width: 60px; - height: 60px; + width: 4rem; + height: 4rem; display: flex; } } diff --git a/site/src/css/components/_ItemGrid.scss b/site/src/css/components/_ItemGrid.scss index d733fc22e..7519ce598 100644 --- a/site/src/css/components/_ItemGrid.scss +++ b/site/src/css/components/_ItemGrid.scss @@ -8,7 +8,7 @@ .item { width: 50%; - height: 75px; + height: 5rem; display: flex; flex-direction: row; align-items: center; @@ -19,8 +19,8 @@ } .item-image { - height: 50px; - width: 50px; + height: 3.3rem; + width: 3.3rem; display: flex; align-items: center; justify-content: center; @@ -33,7 +33,7 @@ .item-text { height: 100%; - width: calc(100% - 80px); + width: calc(100% - 3.3rem); display: flex; align-items: center; padding-left: 2rem; diff --git a/site/src/css/components/_LandingPage.scss b/site/src/css/components/_LandingPage.scss index d0792fba0..214b6b131 100644 --- a/site/src/css/components/_LandingPage.scss +++ b/site/src/css/components/_LandingPage.scss @@ -89,7 +89,7 @@ .right-image { width: 75%; height: auto; - max-height: 550px; + max-height: 36rem; } } } From b6f0876904dae7d6849c7f0b7aabfeb82e64819f Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Wed, 7 Dec 2022 16:36:20 -0500 Subject: [PATCH 02/10] fix instances of px instead of rem --- site/src/css/components/_SdkPage.scss | 8 ++++---- site/src/css/components/modules/_DocsGetStarted.scss | 2 +- site/src/css/components/modules/_DocsSdks.scss | 8 ++++---- site/src/css/components/modules/_RedocLoadingCircle.scss | 4 ++-- site/src/css/layout/_markdown.scss | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/site/src/css/components/_SdkPage.scss b/site/src/css/components/_SdkPage.scss index a1f6ea8c0..6433f33d7 100644 --- a/site/src/css/components/_SdkPage.scss +++ b/site/src/css/components/_SdkPage.scss @@ -7,14 +7,14 @@ .sdk-image { width: 100%; - height: 250px; + height: 16.4rem; display: flex; align-items: center; justify-content: center; .sdk-svg { - height: 225px; - width: 180px; + height: 14.8; + width: 11.8rem; } } @@ -38,7 +38,7 @@ table { width: auto; overflow: visible; - min-width: 360px; + min-width: 23.7rem; color: var(--ifm-font-color-base); /* remove all border lines */ diff --git a/site/src/css/components/modules/_DocsGetStarted.scss b/site/src/css/components/modules/_DocsGetStarted.scss index 24fdab2f1..46df325f1 100644 --- a/site/src/css/components/modules/_DocsGetStarted.scss +++ b/site/src/css/components/modules/_DocsGetStarted.scss @@ -16,7 +16,7 @@ .get-started-image { width: 40%; - height: 100px; + height: 6.6rem; display: flex; justify-content: center; diff --git a/site/src/css/components/modules/_DocsSdks.scss b/site/src/css/components/modules/_DocsSdks.scss index 0215a9400..b83bc6f1a 100644 --- a/site/src/css/components/modules/_DocsSdks.scss +++ b/site/src/css/components/modules/_DocsSdks.scss @@ -25,12 +25,12 @@ .sdks-images { width: 40%; - height: 100px; + height: 6.6rem; display: flex; justify-content: center; .sdk-image-container { - width: 150px; + width: 9.9rem; height: auto; display: flex; flex-wrap: wrap; @@ -38,8 +38,8 @@ align-items: center; a { - width: 40px; - height: 40px; + width: 2.6rem; + height: 2.6rem; border-radius: 50%; box-shadow: 1px 3px 3px var(--shadow-color), -1px 0px 3px var(--shadow-color); } diff --git a/site/src/css/components/modules/_RedocLoadingCircle.scss b/site/src/css/components/modules/_RedocLoadingCircle.scss index 0d20f742f..f5dcb0585 100644 --- a/site/src/css/components/modules/_RedocLoadingCircle.scss +++ b/site/src/css/components/modules/_RedocLoadingCircle.scss @@ -2,8 +2,8 @@ @mixin redoc-loading-circle { &> div > svg:last-child { // Loading Circle Sizing and Animation - width: 48px; - height: 48px; + width: 3.3rem; + height: 3.3rem; animation-name: ckw; animation-duration: 6s; animation-iteration-count: infinite; diff --git a/site/src/css/layout/_markdown.scss b/site/src/css/layout/_markdown.scss index 1d4026439..7bac9a14e 100644 --- a/site/src/css/layout/_markdown.scss +++ b/site/src/css/layout/_markdown.scss @@ -14,8 +14,8 @@ html.docs-wrapper { /* SVG Images on docs/about pages */ .about-image { - height: 100px; - width: 100px; + height: 6.6rem; + width: 6.6rem; display: block; margin-left: auto; margin-right: auto; From 48f435298cde460ea2d2d2405f496240f1201ebb Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Thu, 8 Dec 2022 12:04:25 -0500 Subject: [PATCH 03/10] fixes to nesting --- site/src/css/components/_Carousel.scss | 168 +++++++++--------- site/src/css/components/_FeaturePanel.scss | 2 +- .../components/modules/_CarouselSlide.scss | 100 +++++------ .../src/css/components/modules/_DocsSdks.scss | 56 +++--- 4 files changed, 163 insertions(+), 163 deletions(-) diff --git a/site/src/css/components/_Carousel.scss b/site/src/css/components/_Carousel.scss index 700883a22..6ceb4b41b 100644 --- a/site/src/css/components/_Carousel.scss +++ b/site/src/css/components/_Carousel.scss @@ -51,100 +51,100 @@ @include mobile-view { height: 100%; } + } - .carousel-header { - width: auto; - height: 3.3rem; - 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: 2rem; - font-size: 1.8rem; - } - @include slim-mobile-view { - height: 1.5rem; - font-size: 1.5rem; - } - @include ultra-slim-mobile-view { - height: 1.3rem; - 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: 3.3rem; + 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: 2rem; + font-size: 1.8rem; } - - .transition { - transition: all .25s ease-out; + @include slim-mobile-view { + height: 1.5rem; + font-size: 1.5rem; } - - .disabled { - pointer-events: none; + @include ultra-slim-mobile-view { + height: 1.3rem; + 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; + } + + .carousel { + width: 100%; + height: 100%; + overflow: visible; + position: relative; + } - 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-slides { + display: flex; + overflow: visible; + position: relative; + width: 100%; + height: 100%; + + @include slide; + } - &:hover { - cursor: pointer; - } - } + .transition { + transition: all .25s ease-out; + } - .left-button::before { - content: 'chevron_left'; - margin-left: -2px; - } - - .right-button::before { - content: 'chevron_right'; - margin-left: 2px; + .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 823c75bf9..66228be8e 100644 --- a/site/src/css/components/_FeaturePanel.scss +++ b/site/src/css/components/_FeaturePanel.scss @@ -6,7 +6,7 @@ flex-wrap: wrap; justify-content: center; - .panel { + .panel { //TODO: rename some of these to better organize width: 19.8rem; height: 16.4rem; margin: 0 .6em 1.2em; diff --git a/site/src/css/components/modules/_CarouselSlide.scss b/site/src/css/components/modules/_CarouselSlide.scss index ecc6d5807..e04bb2857 100644 --- a/site/src/css/components/modules/_CarouselSlide.scss +++ b/site/src/css/components/modules/_CarouselSlide.scss @@ -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; - } + .image { + margin-top: 20px; + background-size: cover; + border-radius: 14px; + box-shadow: 0px 0px 10px $black-shadow; + } - .categories { + .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; + .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 b83bc6f1a..8ec8d6c7b 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: 6.6rem; display: flex; justify-content: center; - - .sdk-image-container { - width: 9.9rem; - height: auto; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - - a { - width: 2.6rem; - height: 2.6rem; - 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: 9.9rem; + height: auto; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + + a { + width: 2.6rem; + height: 2.6rem; + border-radius: 50%; + box-shadow: 1px 3px 3px var(--shadow-color), -1px 0px 3px var(--shadow-color); + } + + svg { + width: 100%; + height: 100%; } } } From f93dc8f5930241341a5ce21ee14c4a18526a5acd Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Thu, 8 Dec 2022 15:49:42 -0500 Subject: [PATCH 04/10] fix more nesting --- 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/components/_FeaturePanel.scss | 74 +++++----- site/src/css/components/_ItemGrid.scss | 37 ++--- site/src/css/components/_LandingPage.scss | 88 +++++------ site/src/css/components/_SdkPage.scss | 116 +++++++-------- site/src/css/components/_SplashPage.scss | 137 +++++++++--------- .../components/modules/_CarouselSlide.scss | 8 +- 11 files changed, 247 insertions(+), 245 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 7637d5db3..c6d46331e 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/components/_FeaturePanel.scss b/site/src/css/components/_FeaturePanel.scss index 66228be8e..1e4e8151f 100644 --- a/site/src/css/components/_FeaturePanel.scss +++ b/site/src/css/components/_FeaturePanel.scss @@ -6,7 +6,7 @@ flex-wrap: wrap; justify-content: center; - .panel { //TODO: rename some of these to better organize + .panel { width: 19.8rem; height: 16.4rem; margin: 0 .6em 1.2em; @@ -26,44 +26,44 @@ &:hover { text-decoration: none; } + } - .header { - width: auto; - height: 3.3rem; - margin: 20px 15px; - display: flex; + .panel-header { + width: auto; + height: 3.3rem; + margin: 20px 15px; + display: flex; + } - .icon { - width: 3.3rem; - height: auto; - } - - .title { - width: calc(100% - 3.3rem); - 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: 3.3rem; + height: auto; + } + + .panel-title { + width: calc(100% - 3.3rem); + 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 7519ce598..f4b6fadcb 100644 --- a/site/src/css/components/_ItemGrid.scss +++ b/site/src/css/components/_ItemGrid.scss @@ -6,7 +6,7 @@ justify-content: flex-start; width: 100%; - .item { + .item-grid-item { width: 50%; height: 5rem; display: flex; @@ -24,11 +24,11 @@ display: flex; align-items: center; justify-content: center; - - .item-svg { - height: 100%; - width: 100%; - } + } + + .item-svg { + height: 100%; + width: 100%; } .item-text { @@ -39,19 +39,20 @@ 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 214b6b131..5d43e9bcc 100644 --- a/site/src/css/components/_LandingPage.scss +++ b/site/src/css/components/_LandingPage.scss @@ -12,7 +12,7 @@ flex-direction: row; } - .left { + .landing-page-left { width: 50%; height: auto; padding-left: 10rem; @@ -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: 2rem; - @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: 5rem; + margin-bottom: 5rem; + } + + 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: 36rem; - } + .landing-page-right-image { + width: 75%; + height: auto; + max-height: 36rem; } } diff --git a/site/src/css/components/_SdkPage.scss b/site/src/css/components/_SdkPage.scss index 6433f33d7..fc0946ce9 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: 14.8; - width: 11.8rem; - } + } + + .sdk-svg { + height: 14.8; + width: 11.8rem; } .sdk-product-table { @@ -29,75 +29,75 @@ margin-bottom: 5rem; 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: 23.7rem; - color: var(--ifm-font-color-base); - - /* remove all border lines */ - td, th, tr { - border: none; - } + overflow: visible; + min-width: 23.7rem; + 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/_SplashPage.scss b/site/src/css/components/_SplashPage.scss index 01aea642b..c3eece3c9 100644 --- a/site/src/css/components/_SplashPage.scss +++ b/site/src/css/components/_SplashPage.scss @@ -59,88 +59,89 @@ @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: 0.8em; + } + + .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 e04bb2857..6e33facc9 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; @@ -17,14 +17,14 @@ justify-content: space-evenly; } - .image { + .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; @@ -57,7 +57,7 @@ } } - .post { + .slide-post { height: auto; font-family: 'Overpass'; font-size: 1.1rem; From a2e926dee3df7164dea1ff5c85d064d4cc039204 Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Thu, 8 Dec 2022 16:50:50 -0500 Subject: [PATCH 05/10] update font weight in tab switchers --- site/src/css/components/modules/_RedocRightPanel.scss | 1 + site/src/css/utils/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/site/src/css/components/modules/_RedocRightPanel.scss b/site/src/css/components/modules/_RedocRightPanel.scss index b997743cf..a9c8b9518 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 { diff --git a/site/src/css/utils/_variables.scss b/site/src/css/utils/_variables.scss index c82ab94ce..490415800 100644 --- a/site/src/css/utils/_variables.scss +++ b/site/src/css/utils/_variables.scss @@ -66,7 +66,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; From 20b9d2c31ade9494004f3da64907904263d69681 Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Fri, 9 Dec 2022 15:29:07 -0500 Subject: [PATCH 06/10] update fonts to use variables --- site/src/css/base/_root.scss | 4 ++-- site/src/css/components/_Carousel.scss | 2 +- site/src/css/components/_FeaturePanel.scss | 2 +- site/src/css/components/_LandingPage.scss | 2 +- site/src/css/components/_SplashPage.scss | 8 ++++---- site/src/css/components/modules/_CarouselSlide.scss | 4 ++-- site/src/css/components/modules/_DocsSdks.scss | 2 +- site/src/css/components/modules/_RedocRightPanel.scss | 2 +- site/src/css/layout/_footer.scss | 2 +- site/src/css/layout/_navbar.scss | 2 +- site/src/css/utils/_variables.scss | 9 +++++++-- 11 files changed, 22 insertions(+), 17 deletions(-) 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 6ceb4b41b..3b0063ffa 100644 --- a/site/src/css/components/_Carousel.scss +++ b/site/src/css/components/_Carousel.scss @@ -57,7 +57,7 @@ width: auto; height: 3.3rem; color: var(--ifm-font-color-base); - font-family: 'Overpass Bold'; + font-family: $overpass-bold; font-size: 2.2rem; display: flex; justify-content: center; diff --git a/site/src/css/components/_FeaturePanel.scss b/site/src/css/components/_FeaturePanel.scss index 1e4e8151f..4196237be 100644 --- a/site/src/css/components/_FeaturePanel.scss +++ b/site/src/css/components/_FeaturePanel.scss @@ -46,7 +46,7 @@ padding-left: 5px; padding-top: 2px; color: var(--ifm-font-color-base); - font-family: 'Overpass Bold'; + font-family: $overpass-bold; font-size: 1.1rem; line-height: 1.1rem; display: flex; diff --git a/site/src/css/components/_LandingPage.scss b/site/src/css/components/_LandingPage.scss index 5d43e9bcc..086dca003 100644 --- a/site/src/css/components/_LandingPage.scss +++ b/site/src/css/components/_LandingPage.scss @@ -57,7 +57,7 @@ } h2 { - font-family: 'Overpass Bold'; + font-family: $overpass-bold; font-size: 2.4rem; line-height: 2.4rem; transition: 0.2s; diff --git a/site/src/css/components/_SplashPage.scss b/site/src/css/components/_SplashPage.scss index c3eece3c9..de01c42a8 100644 --- a/site/src/css/components/_SplashPage.scss +++ b/site/src/css/components/_SplashPage.scss @@ -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; @@ -99,7 +99,7 @@ .text-block-title { width: 100%; height: auto; - font-family: 'Overpass Bold'; + font-family: $overpass-bold; font-size: 2.1rem; @include slim-mobile-view { @@ -111,7 +111,7 @@ .text-block-text { width: 100%; height: auto; - font-family: 'Overpass'; + font-family: $overpass; font-size: var(--ifm-font-size-base); margin-bottom: 0.8em; } @@ -120,7 +120,7 @@ a { width: auto; height: auto; - font-family: 'Overpass Bold'; + font-family: $overpass-bold; color: var(--ifm-font-color-base); text-decoration: none; diff --git a/site/src/css/components/modules/_CarouselSlide.scss b/site/src/css/components/modules/_CarouselSlide.scss index 6e33facc9..b4b1a3d30 100644 --- a/site/src/css/components/modules/_CarouselSlide.scss +++ b/site/src/css/components/modules/_CarouselSlide.scss @@ -34,7 +34,7 @@ a { height: auto; width: auto; - font-family: 'Overpass Bold'; + font-family: $overpass-bold; text-transform: uppercase; font-size: 0.9rem; line-height: 0.9rem; @@ -59,7 +59,7 @@ .slide-post { height: auto; - font-family: 'Overpass'; + font-family: $overpass; font-size: 1.1rem; line-height: 1.1rem; overflow: hidden; diff --git a/site/src/css/components/modules/_DocsSdks.scss b/site/src/css/components/modules/_DocsSdks.scss index 8ec8d6c7b..b98e4368e 100644 --- a/site/src/css/components/modules/_DocsSdks.scss +++ b/site/src/css/components/modules/_DocsSdks.scss @@ -14,7 +14,7 @@ .postman-link { color: $orange50; - font-family: 'Overpass Bold'; + font-family: $overpass-bold; text-decoration: none; &:hover { diff --git a/site/src/css/components/modules/_RedocRightPanel.scss b/site/src/css/components/modules/_RedocRightPanel.scss index a9c8b9518..48a1dd2c4 100644 --- a/site/src/css/components/modules/_RedocRightPanel.scss +++ b/site/src/css/components/modules/_RedocRightPanel.scss @@ -59,7 +59,7 @@ .operation-response-samples { .tab-success, .tab-error { @extend %redoc-sample-tab; - font-family: 'Overpass Bold' + font-family: $overpass-bold } .response-sample { 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..bdcf913f5 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; diff --git a/site/src/css/utils/_variables.scss b/site/src/css/utils/_variables.scss index 490415800..5f8f4d4c9 100644 --- a/site/src/css/utils/_variables.scss +++ b/site/src/css/utils/_variables.scss @@ -2,6 +2,11 @@ /* Variables */ +// Fonts +$overpass: 'Overpass'; +$overpass-bold: 'Overpass Bold'; +$overpass-mono: 'Overpass Mono'; + // Colors $blue2: rgb(245, 251, 254); $blue5: rgb(230, 245, 253); @@ -42,7 +47,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; @@ -66,7 +71,7 @@ $sample-bg-dark: rgb(18, 18, 18); %redoc-sample-tab { background: var(--pre-background); - font-family: 'Overpass'; + font-family: $overpass; border-style: solid; border-width: 2px; word-wrap: normal; From 7d717334bde17d39f439901e630f4b9df89841b6 Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Tue, 3 Jan 2023 13:41:29 -0500 Subject: [PATCH 07/10] overpass light variable --- site/src/css/components/_SplashPage.scss | 2 +- site/src/css/layout/_navbar.scss | 2 +- site/src/css/utils/_variables.scss | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/css/components/_SplashPage.scss b/site/src/css/components/_SplashPage.scss index de01c42a8..dcd6c8b82 100644 --- a/site/src/css/components/_SplashPage.scss +++ b/site/src/css/components/_SplashPage.scss @@ -33,7 +33,7 @@ } h2 { - font-family: 'Overpass Light'; + font-family: $overpass-light; font-size: 1.6rem; text-align: center; diff --git a/site/src/css/layout/_navbar.scss b/site/src/css/layout/_navbar.scss index bdcf913f5..5a5bde4cf 100644 --- a/site/src/css/layout/_navbar.scss +++ b/site/src/css/layout/_navbar.scss @@ -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 5f8f4d4c9..713c2dcba 100644 --- a/site/src/css/utils/_variables.scss +++ b/site/src/css/utils/_variables.scss @@ -5,6 +5,7 @@ // Fonts $overpass: 'Overpass'; $overpass-bold: 'Overpass Bold'; +$overpass-light: 'Overpass Light'; $overpass-mono: 'Overpass Mono'; // Colors From c4d626d9e57ba5adfdfd638df47f43db7d936110 Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Tue, 3 Jan 2023 14:56:52 -0500 Subject: [PATCH 08/10] revert size and layout css --- site/src/css/components/_Carousel.scss | 16 ++++++++-------- site/src/css/components/_FeaturePanel.scss | 12 ++++++------ site/src/css/components/_GitHubLink.scss | 6 +++--- site/src/css/components/_ItemGrid.scss | 8 ++++---- site/src/css/components/_LandingPage.scss | 2 +- site/src/css/components/_SdkPage.scss | 8 ++++---- .../css/components/modules/_DocsGetStarted.scss | 2 +- site/src/css/components/modules/_DocsSdks.scss | 8 ++++---- .../components/modules/_RedocLoadingCircle.scss | 4 ++-- site/src/css/layout/_markdown.scss | 4 ++-- 10 files changed, 35 insertions(+), 35 deletions(-) diff --git a/site/src/css/components/_Carousel.scss b/site/src/css/components/_Carousel.scss index 3b0063ffa..0cb96a35f 100644 --- a/site/src/css/components/_Carousel.scss +++ b/site/src/css/components/_Carousel.scss @@ -4,17 +4,17 @@ .carousel-container { width: 100%; - height: 36.2rem; + height: 550px; display: flex; flex-direction: column; margin: 2em 0; @include mobile-view { - height: 19.8rem; + height: 300px; margin: 0; } @include ultra-slim-mobile-view { - height: 15.8rem; + height: 240px; } .top-amoeba { @@ -41,7 +41,7 @@ .content { width: 100%; - height: 29.6rem; + height: 450px; background-color: var(--carousel-color); overflow: hidden; display: flex; @@ -55,7 +55,7 @@ .carousel-header { width: auto; - height: 3.3rem; + height: 50px; color: var(--ifm-font-color-base); font-family: $overpass-bold; font-size: 2.2rem; @@ -64,15 +64,15 @@ align-items: center; @include mobile-view { - height: 2rem; + height: 30px; font-size: 1.8rem; } @include slim-mobile-view { - height: 1.5rem; + height: 22px; font-size: 1.5rem; } @include ultra-slim-mobile-view { - height: 1.3rem; + height: 20px; font-size: 1.2rem; } } diff --git a/site/src/css/components/_FeaturePanel.scss b/site/src/css/components/_FeaturePanel.scss index 4196237be..539443a82 100644 --- a/site/src/css/components/_FeaturePanel.scss +++ b/site/src/css/components/_FeaturePanel.scss @@ -7,8 +7,8 @@ justify-content: center; .panel { - width: 19.8rem; - height: 16.4rem; + width: 300px; + height: 250px; margin: 0 .6em 1.2em; display: flex; flex-direction: column; @@ -19,7 +19,7 @@ text-decoration: none; @include slim-mobile-view { - margin: 0 0 1.2rem; + margin: 0 0 1.2em; height: auto; } @@ -30,18 +30,18 @@ .panel-header { width: auto; - height: 3.3rem; + height: 50px; margin: 20px 15px; display: flex; } .panel-icon { - width: 3.3rem; + width: 50px; height: auto; } .panel-title { - width: calc(100% - 3.3rem); + width: calc(100% - 50px); height: auto; padding-left: 5px; padding-top: 2px; diff --git a/site/src/css/components/_GitHubLink.scss b/site/src/css/components/_GitHubLink.scss index a3c59752a..464b3e0df 100644 --- a/site/src/css/components/_GitHubLink.scss +++ b/site/src/css/components/_GitHubLink.scss @@ -3,12 +3,12 @@ .github-icon { background-image: var(--github-logo); background-position: center; - background-size: 3.3rem; + background-size: 50px; background-repeat: no-repeat; a { - width: 4rem; - height: 4rem; + width: 60px; + height: 60px; display: flex; } } diff --git a/site/src/css/components/_ItemGrid.scss b/site/src/css/components/_ItemGrid.scss index f4b6fadcb..5ea6dd056 100644 --- a/site/src/css/components/_ItemGrid.scss +++ b/site/src/css/components/_ItemGrid.scss @@ -8,7 +8,7 @@ .item-grid-item { width: 50%; - height: 5rem; + height: 75px; display: flex; flex-direction: row; align-items: center; @@ -19,8 +19,8 @@ } .item-image { - height: 3.3rem; - width: 3.3rem; + height: 50px; + width: 50px; display: flex; align-items: center; justify-content: center; @@ -33,7 +33,7 @@ .item-text { height: 100%; - width: calc(100% - 3.3rem); + width: calc(100% - 50px); display: flex; align-items: center; padding-left: 2rem; diff --git a/site/src/css/components/_LandingPage.scss b/site/src/css/components/_LandingPage.scss index 086dca003..8c661ef4b 100644 --- a/site/src/css/components/_LandingPage.scss +++ b/site/src/css/components/_LandingPage.scss @@ -90,6 +90,6 @@ .landing-page-right-image { width: 75%; height: auto; - max-height: 36rem; + max-height: 550px; } } diff --git a/site/src/css/components/_SdkPage.scss b/site/src/css/components/_SdkPage.scss index fc0946ce9..cbeffcde2 100644 --- a/site/src/css/components/_SdkPage.scss +++ b/site/src/css/components/_SdkPage.scss @@ -7,15 +7,15 @@ .sdk-image { width: 100%; - height: 16.4rem; + height: 250px; display: flex; align-items: center; justify-content: center; } .sdk-svg { - height: 14.8; - width: 11.8rem; + height: 225px; + width: 180px; } .sdk-product-table { @@ -39,7 +39,7 @@ table { width: auto; overflow: visible; - min-width: 23.7rem; + min-width: 360px; color: var(--ifm-font-color-base); /* remove all border lines */ diff --git a/site/src/css/components/modules/_DocsGetStarted.scss b/site/src/css/components/modules/_DocsGetStarted.scss index 46df325f1..24fdab2f1 100644 --- a/site/src/css/components/modules/_DocsGetStarted.scss +++ b/site/src/css/components/modules/_DocsGetStarted.scss @@ -16,7 +16,7 @@ .get-started-image { width: 40%; - height: 6.6rem; + height: 100px; display: flex; justify-content: center; diff --git a/site/src/css/components/modules/_DocsSdks.scss b/site/src/css/components/modules/_DocsSdks.scss index b98e4368e..1e7113c94 100644 --- a/site/src/css/components/modules/_DocsSdks.scss +++ b/site/src/css/components/modules/_DocsSdks.scss @@ -25,13 +25,13 @@ .sdks-images { width: 40%; - height: 6.6rem; + height: 100px; display: flex; justify-content: center; } .sdk-image-container { - width: 9.9rem; + width: 150px; height: auto; display: flex; flex-wrap: wrap; @@ -39,8 +39,8 @@ align-items: center; a { - width: 2.6rem; - height: 2.6rem; + width: 40px; + height: 40px; border-radius: 50%; box-shadow: 1px 3px 3px var(--shadow-color), -1px 0px 3px var(--shadow-color); } diff --git a/site/src/css/components/modules/_RedocLoadingCircle.scss b/site/src/css/components/modules/_RedocLoadingCircle.scss index f5dcb0585..0d20f742f 100644 --- a/site/src/css/components/modules/_RedocLoadingCircle.scss +++ b/site/src/css/components/modules/_RedocLoadingCircle.scss @@ -2,8 +2,8 @@ @mixin redoc-loading-circle { &> div > svg:last-child { // Loading Circle Sizing and Animation - width: 3.3rem; - height: 3.3rem; + width: 48px; + height: 48px; animation-name: ckw; animation-duration: 6s; animation-iteration-count: infinite; diff --git a/site/src/css/layout/_markdown.scss b/site/src/css/layout/_markdown.scss index 7bac9a14e..1d4026439 100644 --- a/site/src/css/layout/_markdown.scss +++ b/site/src/css/layout/_markdown.scss @@ -14,8 +14,8 @@ html.docs-wrapper { /* SVG Images on docs/about pages */ .about-image { - height: 6.6rem; - width: 6.6rem; + height: 100px; + width: 100px; display: block; margin-left: auto; margin-right: auto; From 307527834d5a1e809ef59b92480f1dd99a8a4562 Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Wed, 4 Jan 2023 10:30:14 -0500 Subject: [PATCH 09/10] update sizing and layouts to use px --- site/src/css/components/_Carousel.scss | 2 +- site/src/css/components/_FeaturePanel.scss | 4 ++-- site/src/css/components/_LandingPage.scss | 10 +++++----- site/src/css/components/_RedocStandalone.scss | 2 +- site/src/css/components/_SdkPage.scss | 4 ++-- site/src/css/components/_SpecVersionDropdown.scss | 4 ++-- site/src/css/components/_SplashPage.scss | 6 +++--- site/src/css/components/modules/_RedocRightPanel.scss | 4 ++-- site/src/css/utils/_variables.scss | 2 +- 9 files changed, 19 insertions(+), 19 deletions(-) diff --git a/site/src/css/components/_Carousel.scss b/site/src/css/components/_Carousel.scss index 0cb96a35f..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; diff --git a/site/src/css/components/_FeaturePanel.scss b/site/src/css/components/_FeaturePanel.scss index 539443a82..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,7 +19,7 @@ text-decoration: none; @include slim-mobile-view { - margin: 0 0 1.2em; + margin: 0 0 18px; height: auto; } diff --git a/site/src/css/components/_LandingPage.scss b/site/src/css/components/_LandingPage.scss index 8c661ef4b..c76ba8537 100644 --- a/site/src/css/components/_LandingPage.scss +++ b/site/src/css/components/_LandingPage.scss @@ -15,8 +15,8 @@ .landing-page-left { width: 50%; height: auto; - padding-left: 10rem; - margin-bottom: 10rem; + padding-left: 150px; + margin-bottom: 150px; display: flex; flex-direction: column; @@ -31,12 +31,12 @@ } .landing-page-title { - margin-bottom: 2rem; + margin-bottom: 30px; @include small-desktop-view { width: 100%; - height: 5rem; - margin-bottom: 5rem; + height: 75px; + margin-bottom: 75px; } h1 { 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 cbeffcde2..931545bd5 100644 --- a/site/src/css/components/_SdkPage.scss +++ b/site/src/css/components/_SdkPage.scss @@ -23,10 +23,10 @@ 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; } } 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 dcd6c8b82..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%; @@ -54,7 +54,7 @@ display: flex; align-items: center; justify-content: space-between; - margin-bottom: 6em; + margin-bottom: 90px; @include mobile-view { margin-bottom: 0; @@ -113,7 +113,7 @@ height: auto; font-family: $overpass; font-size: var(--ifm-font-size-base); - margin-bottom: 0.8em; + margin-bottom: 12px; } .text-block-link { diff --git a/site/src/css/components/modules/_RedocRightPanel.scss b/site/src/css/components/modules/_RedocRightPanel.scss index 48a1dd2c4..b46b8b6c8 100644 --- a/site/src/css/components/modules/_RedocRightPanel.scss +++ b/site/src/css/components/modules/_RedocRightPanel.scss @@ -72,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/utils/_variables.scss b/site/src/css/utils/_variables.scss index 713c2dcba..0cce876c3 100644 --- a/site/src/css/utils/_variables.scss +++ b/site/src/css/utils/_variables.scss @@ -62,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 { From ac87c0bee6b22b16731a3577ec7a0b9e2c751839 Mon Sep 17 00:00:00 2001 From: Cameron Koegel Date: Wed, 4 Jan 2023 10:50:11 -0500 Subject: [PATCH 10/10] use variable for item grid item size --- site/src/css/components/_ItemGrid.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/site/src/css/components/_ItemGrid.scss b/site/src/css/components/_ItemGrid.scss index 5ea6dd056..f74c2ee12 100644 --- a/site/src/css/components/_ItemGrid.scss +++ b/site/src/css/components/_ItemGrid.scss @@ -7,6 +7,7 @@ width: 100%; .item-grid-item { + $item-size: 50px; width: 50%; height: 75px; display: flex; @@ -19,8 +20,8 @@ } .item-image { - height: 50px; - width: 50px; + height: $item-size; + width: $item-size; display: flex; align-items: center; justify-content: center; @@ -33,7 +34,7 @@ .item-text { height: 100%; - width: calc(100% - 50px); + width: calc(100% - $item-size); display: flex; align-items: center; padding-left: 2rem;