From 915f36c494684eb067aecae8e85abe41e2e12023 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Mon, 11 Jul 2022 10:38:35 -0700 Subject: [PATCH 1/4] chore: align headers and carousel margins --- src/components/styles.scss | 6 ++++-- src/pages/index.jsx | 8 ++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index eca782c2..00155a7a 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -101,7 +101,8 @@ input[type='text'] { } .slick-list { - margin: 0 -2px !important; + margin: 0 -7px !important; + // padding: 0 7px !important; } .slick-dots li button { @@ -125,13 +126,14 @@ input[type='text'] { display: flex !important; margin-top: 2px; flex-direction: row; - column-gap: 15px; + column-gap: 0px; flex-wrap: nowrap; align-items: flex-start; } .slick-slide { height: inherit !important; + margin: 6.5px !important; } @media only screen and (max-width: 425px) { diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 10e90a04..630dd90d 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -30,7 +30,7 @@ const TRIPLE_COLUMN_BREAKPOINT = '1420px'; const DOUBLE_COLUMN_BREAKPOINT = '1180px'; const SINGLE_COLUMN_BREAKPOINT = '900px'; const COLUMN_BREAKPOINT = '1131px'; -//used to set the height of the Spinner to reduce layout shift on page load +// used to set the height of the Spinner to reduce layout shift on page load const TILE_HEIGHT = '362px'; /** @@ -384,7 +384,7 @@ const QuickstartsPage = ({ data, location }) => { >
{ font-size: 16px; color: var(--color-neutrals-800); align-text: center; - margin: 0 0 13px 4px; + margin: 0 0 13px 0; span { } strong { @@ -641,7 +641,7 @@ const QuickstartsPage = ({ data, location }) => { font-size: 16px; color: var(--color-neutrals-800); align-text: center; - margin: 75px 0 13px 4px; + margin: 75px 0 13px 0; strong { font-family: 'SoĢˆhne-Leicht'; From 81bf20586922f36a58d42f1351c79a7905d23771 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Mon, 11 Jul 2022 10:44:31 -0700 Subject: [PATCH 2/4] chore: align categories with guided install tile --- src/pages/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 630dd90d..27bb7cab 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -393,7 +393,7 @@ const QuickstartsPage = ({ data, location }) => { font-size: 28px; line-height: 36px; font-weight: normal; - margin-bottom: 12px; + margin-bottom: 23px; letter-spacing: -0.5px; } @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { From 05b930a8bc459e7eeb7c862fd65dbf15436ab07e Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Mon, 11 Jul 2022 11:43:11 -0700 Subject: [PATCH 3/4] chore: align carousel arrows --- src/components/styles.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 00155a7a..512b5b00 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -101,8 +101,7 @@ input[type='text'] { } .slick-list { - margin: 0 -7px !important; - // padding: 0 7px !important; + margin: 0 -6.5px !important; } .slick-dots li button { @@ -111,6 +110,10 @@ input[type='text'] { .slick-prev { z-index: 100; + left: -27px !important; +} +.slick-next { + right: -28px !important; } .slick-disabled .arrow-bg { From 299d7ff5a3d585a8bff520176ec6e3014fdbfef4 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Mon, 11 Jul 2022 14:19:12 -0700 Subject: [PATCH 4/4] chore: align dashboard carousel arrows --- src/components/QuickstartDashboards.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/QuickstartDashboards.js b/src/components/QuickstartDashboards.js index 4bd4c040..1511d329 100644 --- a/src/components/QuickstartDashboards.js +++ b/src/components/QuickstartDashboards.js @@ -25,9 +25,9 @@ const QuickstartDashboards = ({ quickstart }) => { css={css` width: 62px; height: 62px; - margin-left: -3.5rem; + margin-left: -2rem; @media screen and (max-width: ${MOBILE_BREAKPOINT}) { - margin-left: -1.5rem; + margin-left: -1.6rem; } `} /> @@ -38,9 +38,9 @@ const QuickstartDashboards = ({ quickstart }) => { css={css` width: 62px; height: 62px; - margin-right: -3.5rem; + margin-right: -2rem; @media screen and (max-width: ${MOBILE_BREAKPOINT}) { - margin-right: -2rem; + margin-right: -1.5rem; } `} />