From 48b394f885b8da3b04196ea34723f1ffed624666 Mon Sep 17 00:00:00 2001 From: Kris Kenney <70179215+nr-kkenney@users.noreply.github.com> Date: Thu, 28 Oct 2021 10:29:11 -0700 Subject: [PATCH 1/4] chore: make quickstart header sticky * reorganized the header to have logo on the left, title & summary in the middle, and CTA buttons on the right * header is sticky and will remain on page when a user scrolls. it will 'stack' up with the global header which is also sticky --- src/templates/QuickstartDetails.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js index d46dcd6a2..c107e69be 100644 --- a/src/templates/QuickstartDetails.js +++ b/src/templates/QuickstartDetails.js @@ -107,13 +107,22 @@ const QuickstartDetails = ({ data, location }) => { ) } css={css` + background: var(--primary-background-color); border-bottom: none; display: grid; padding-bottom: 0; - grid-template-areas: 'title logo' 'summ logo' 'cta logo'; + grid-template-areas: + 'logo title cta' + 'logo summ cta'; grid-column-gap: 1rem; grid-row-gap: 1rem; + justify-content: normal; + justify-self: center; + position: sticky; row-gap: 1rem; + top: var(--global-header-height); + width: 101%; + z-index: 80; h1 { font-weight: normal; @@ -130,6 +139,7 @@ const QuickstartDetails = ({ data, location }) => { max-height: 5rem; grid-area: logo; align-self: center; + justify-self: center; .dark-mode & { background-color: white; @@ -145,8 +155,7 @@ const QuickstartDetails = ({ data, location }) => {
{ css={css` grid-area: cta; display: flex; - justify-content: flex-start; + justify-content: center; + align-self: center; @media (max-width: 760px) { flex-direction: column; align-items: stretch; From 387859a6759c2b39b2c4b05b71791dba3775f53e Mon Sep 17 00:00:00 2001 From: Kris Kenney <70179215+nr-kkenney@users.noreply.github.com> Date: Thu, 28 Oct 2021 15:03:59 -0700 Subject: [PATCH 2/4] chore: add vertical padding, only use sticky changes for non-mobile --- src/templates/QuickstartDetails.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js index c107e69be..c66496bb7 100644 --- a/src/templates/QuickstartDetails.js +++ b/src/templates/QuickstartDetails.js @@ -107,10 +107,8 @@ const QuickstartDetails = ({ data, location }) => { ) } css={css` - background: var(--primary-background-color); border-bottom: none; display: grid; - padding-bottom: 0; grid-template-areas: 'logo title cta' 'logo summ cta'; @@ -118,17 +116,23 @@ const QuickstartDetails = ({ data, location }) => { grid-row-gap: 1rem; justify-content: normal; justify-self: center; - position: sticky; + padding-bottom: 8px; + padding-top: 8px; row-gap: 1rem; - top: var(--global-header-height); width: 101%; - z-index: 80; h1 { font-weight: normal; grid-area: title; padding-bottom: 1rem; } + + @media (min-width: 760px) { + background: var(--primary-background-color); + position: sticky; + top: var(--global-header-height); + z-index: 80; + } `} > {quickstart.logoUrl && ( From 4ca9cf24603b467d4c32d420384fad218d7eb92f Mon Sep 17 00:00:00 2001 From: Kris Kenney <70179215+nr-kkenney@users.noreply.github.com> Date: Fri, 29 Oct 2021 14:18:56 -0700 Subject: [PATCH 3/4] chore: add back previous mobile style, general aesthetic updates * keeping mobile the way it was before so that it is unaffected by all the recent changes in this branch. * add box shadow & border to the header * move padding to be only for desktop display * remove box-shadow on header in dark mode --- src/templates/QuickstartDetails.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js index c66496bb7..b13d1b93b 100644 --- a/src/templates/QuickstartDetails.js +++ b/src/templates/QuickstartDetails.js @@ -109,15 +109,14 @@ const QuickstartDetails = ({ data, location }) => { css={css` border-bottom: none; display: grid; - grid-template-areas: - 'logo title cta' - 'logo summ cta'; grid-column-gap: 1rem; grid-row-gap: 1rem; + grid-template-areas: + 'title logo' + 'summ logo' + 'cta logo'; justify-content: normal; justify-self: center; - padding-bottom: 8px; - padding-top: 8px; row-gap: 1rem; width: 101%; @@ -129,10 +128,21 @@ const QuickstartDetails = ({ data, location }) => { @media (min-width: 760px) { background: var(--primary-background-color); + border: 1px solid var(--border-color); + border-radius: 0.25rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + grid-template-areas: + 'logo title cta' + 'logo summ cta'; + padding: 8px 0; position: sticky; top: var(--global-header-height); z-index: 80; } + + .dark-mode & { + box-shadow: none; + } `} > {quickstart.logoUrl && ( From eda3cd180ae7374e616348bb09925b0540b272ec Mon Sep 17 00:00:00 2001 From: Kris Kenney <70179215+nr-kkenney@users.noreply.github.com> Date: Tue, 2 Nov 2021 17:37:51 -0700 Subject: [PATCH 4/4] chore: address pr comments * remove border shadow, adjust border to only be bottom & increase header padding * target only dark mode class --- src/templates/QuickstartDetails.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js index b13d1b93b..3c415d0a5 100644 --- a/src/templates/QuickstartDetails.js +++ b/src/templates/QuickstartDetails.js @@ -128,19 +128,18 @@ const QuickstartDetails = ({ data, location }) => { @media (min-width: 760px) { background: var(--primary-background-color); - border: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); border-radius: 0.25rem; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); grid-template-areas: 'logo title cta' 'logo summ cta'; - padding: 8px 0; + padding: 16px 0 24px; position: sticky; top: var(--global-header-height); z-index: 80; } - .dark-mode & { + .dark-mode { box-shadow: none; } `}