diff --git a/assets/images/get-started/hero-bottom.png b/assets/images/get-started/hero-bottom.png index f052b0d1e..885b494cd 100644 Binary files a/assets/images/get-started/hero-bottom.png and b/assets/images/get-started/hero-bottom.png differ diff --git a/assets/stylesheets/new-stylesheets/_themes.scss b/assets/stylesheets/new-stylesheets/_themes.scss index 12bd7e49c..a4a240c95 100644 --- a/assets/stylesheets/new-stylesheets/_themes.scss +++ b/assets/stylesheets/new-stylesheets/_themes.scss @@ -1,16 +1,21 @@ - @mixin light-theme() { --site-text-color: #051416; - --site-navigation-border-bottom: linear-gradient(0deg, #f6b391 0%, #f8ce6e 92%); - --site-navigation-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + --site-navigation-border-bottom: linear-gradient( + 0deg, + #f6b391 0%, + #f8ce6e 92% + ); + --site-navigation-box-shadow: + rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, + rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; --site-navigation-background: rgba(255, 255, 255, 0.5); - --site-navigation-text-color: #3D3D3D; + --site-navigation-text-color: #3d3d3d; --site-navigation-item-background: rgba(0, 0, 0, 0.05); --site-tabs-background: rgba(255, 255, 255, 0.8); --site-tabs-active-background: #ffffff; --site-navigation-menu-toggle-invert: invert(0); --site-navigation-item-border: 1px solid #051416; - --site-code-box-text: #3D3D3D; + --site-code-box-text: #3d3d3d; --site-link-with-right-arrow-color: #384fea; --site-link-with-right-arrow-icon-filter: none; --site-content-link-with-right-arrow-icon-filter: brightness(0); @@ -25,11 +30,38 @@ --install-release-box-tr-border-bottom: 1px solid #f2f2f2; --install-release-box-tr-bg: #ffffff; - --homepage-hero-bg: linear-gradient(179deg,#fac685 3%, #fbdab0 87%, #ffffff 100%); + --get-started-page-bg: #fafafa; + --get-started-card-primary-bg: rgba(255, 255, 255, 0.9); + --get-started-card-secondary-bg: rgba(236, 236, 236, 1); + --get-started-boxes-bg: rgba(255, 255, 255, 0.5); + --get-started-code-box-pre-bg: #fff; + --get-started-code-box-pre-border: 1px solid #d5d5d5; + + --homepage-hero-bg: linear-gradient( + 179deg, + #fac685 3%, + #fbdab0 87%, + #ffffff 100% + ); --homepage-install-text: #3d3d3d; - --homepage-pillar-1-bg: linear-gradient(to bottom, #ffffff 0%, #d9f2ff 75%, #fff3d8 90%); - --homepage-pillar-2-bg: linear-gradient(to top, #e4937f 0%, #fdd9a1 72%, #fff3d8 100%); - --homepage-pillar-3-bg: linear-gradient(180deg, #e4937f 0%, #a268c1 36%, #4b3773 100%); + --homepage-pillar-1-bg: linear-gradient( + to bottom, + #ffffff 0%, + #d9f2ff 75%, + #fff3d8 90% + ); + --homepage-pillar-2-bg: linear-gradient( + to top, + #e4937f 0%, + #fdd9a1 72%, + #fff3d8 100% + ); + --homepage-pillar-3-bg: linear-gradient( + 180deg, + #e4937f 0%, + #a268c1 36%, + #4b3773 100% + ); --home-quicklinks-bg: rgba(255, 177, 100, 0.9); --home-quicklinks-color: #801a1a; @@ -77,31 +109,55 @@ --site-navigation-text-color: #ffffff; --site-navigation-item-background: rgba(0, 0, 0, 0.4); --site-tabs-background: rgba(35, 52, 74, 1); - --site-tabs-active-background: #505F83; + --site-tabs-active-background: #505f83; --site-navigation-menu-toggle-invert: invert(1); --site-navigation-item-border: 1px solid #ffffff; --site-code-box-text: #ffffff; - --site-link-with-right-arrow-color: #1EC1FD; - --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%) saturate(602%) hue-rotate(172deg) brightness(102%) contrast(101%); + --site-link-with-right-arrow-color: #1ec1fd; + --site-link-with-right-arrow-icon-filter: invert(66%) sepia(89%) + saturate(602%) hue-rotate(172deg) brightness(102%) contrast(101%); --site-content-link-with-right-arrow-icon-filter: brightness(0) invert(1); --page-bg: #fff; - --install-page-bg: linear-gradient(0deg, #FF8115 0%, #B7451B 92%); - --install-site-code-box-bg: #23344A; + --install-page-bg: linear-gradient(0deg, #ff8115 0%, #b7451b 92%); + --install-site-code-box-bg: #23344a; --install-site-code-box-pre-bg: #111727; --install-release-box-th-bg: #111727; --install-release-box-th-color: #ffffff; --install-release-box-tr-border-bottom: 1px solid #051416; --install-release-box-tr-bg: #384461; - --homepage-install-text: #DEDEDE;; - --homepage-hero-bg: linear-gradient(180deg, #144173 0%, #141228 68%, #144173 99%); - --homepage-pillar-1-bg: linear-gradient(179deg, #144173 1%, #000000 57%, #350839 88%, #B7451B 99%); - --homepage-pillar-2-bg: linear-gradient(0deg, #A268C1 4%, #FF8115 8%, #B7451B 99%); - --homepage-pillar-3-bg: linear-gradient(180deg, #A268C1 4%, #4B3773 99%); + --get-started-page-bg: rgb(5, 20, 35); + --get-started-card-primary-bg: rgba(35, 52, 74, 0.9); + --get-started-card-secondary-bg: rgba(56, 68, 97, 1); + --get-started-boxes-bg: rgba(25, 52, 74, 0.5); + --get-started-code-box-pre-bg: #111727; + --get-started-code-box-pre-border: 1px solid #575757; + + --homepage-install-text: #dedede; + --homepage-hero-bg: linear-gradient( + 180deg, + #144173 0%, + #141228 68%, + #144173 99% + ); + --homepage-pillar-1-bg: linear-gradient( + 179deg, + #144173 1%, + #000000 57%, + #350839 88%, + #b7451b 99% + ); + --homepage-pillar-2-bg: linear-gradient( + 0deg, + #a268c1 4%, + #ff8115 8%, + #b7451b 99% + ); + --homepage-pillar-3-bg: linear-gradient(180deg, #a268c1 4%, #4b3773 99%); - --home-quicklinks-bg: #23344A; + --home-quicklinks-bg: #23344a; --home-quicklinks-color: #ffffff; // rubber band @@ -137,4 +193,4 @@ --color-syntax-strings: rgb(255, 129, 112); --color-syntax-type-declarations: rgb(107, 223, 255); --color-syntax-urls: rgb(102, 153, 255); -} \ No newline at end of file +} diff --git a/assets/stylesheets/new-stylesheets/pages/_get-started.scss b/assets/stylesheets/new-stylesheets/pages/_get-started.scss index a136acfcb..bbda08bf4 100644 --- a/assets/stylesheets/new-stylesheets/pages/_get-started.scss +++ b/assets/stylesheets/new-stylesheets/pages/_get-started.scss @@ -1,8 +1,9 @@ @use '../helpers' as *; .get-started { + color: var(--site-text-color); position: relative; - background: #f2f2f2; + background: var(--get-started-page-bg); @include noise(); } @@ -18,7 +19,6 @@ aspect-ratio: 980 / 473; border-radius: 22px; overflow: hidden; - background-color: rgba(255, 255, 255, 0.8); margin-bottom: 50px; position: relative; z-index: 2; @@ -79,10 +79,9 @@ li { display: inline-block; - color: #801a1a; font-weight: 400; padding: 16px 16px 20px; - background-color: rgba(97, 75, 138, 0.8); + background-color: var(--get-started-boxes-bg); border-radius: 20px; font-size: 14px; white-space: nowrap; @@ -90,7 +89,6 @@ span { display: block; text-align: left; - color: white; &.title { font-size: 24px; @@ -102,7 +100,7 @@ &.text { font-size: 14px; white-space: normal; - line-height: 1.14; + line-height: 1.3; } } } @@ -136,7 +134,7 @@ margin-bottom: 50px; .content { - background-color: white; + background-color: var(--get-started-card-primary-bg); padding: 53px 50px 40px; max-width: 980px; margin: 0 auto; @@ -159,6 +157,7 @@ text-align: center; font-size: 48px; margin-bottom: 52px; + color: var(--site-text-color); } a { @@ -180,7 +179,7 @@ gap: 20px; li { - background-color: #f9f9f9; + background-color: var(--get-started-card-secondary-bg); display: flex; align-items: center; gap: 20px; @@ -235,7 +234,7 @@ // padding: 0 0 40px; li { - background-color: #f9f9f9; + background-color: var(--get-started-card-secondary-bg); padding: 20px 30px 20px 20px; display: flex; text-align: left; @@ -388,6 +387,7 @@ pre { max-height: 400px; + border: var(--get-started-code-box-pre-border); } &.code-box-with-tabs { @@ -533,7 +533,7 @@ p { font-size: 17px; padding: 0 100px; - margin-bottom: 45px; + margin-bottom: 26px; } a { @@ -575,11 +575,11 @@ &.background { border-radius: 22px; padding: 50px; - background: rgba(255, 255, 255, 0.9); + background: var(--get-started-card-primary-bg); box-sizing: border-box; .code { - background: #fff; + background: var(--get-started-code-box-pre-bg); max-height: 400px; overflow: scroll; } @@ -600,13 +600,13 @@ .code { max-width: none; width: 100%; - border: 1px solid #d5d5d5; + border: var(--get-started-code-box-pre-border); border-radius: 22px; - background: #fff; + background: var(--get-started-code-box-pre-bg); overflow: hidden; .highlight { - background: #fff; + background: var(--get-started-code-box-pre-bg); } } @@ -650,12 +650,12 @@ .code { flex: 1; margin-right: 40px; - border: 1px solid #d5d5d5; + border: var(--get-started-code-box-pre-border); border-radius: 22px; height: fit-content; overflow: hidden; pre.highlight { - background: #fff; + background: var(--get-started-code-box-pre-bg); } } @@ -743,11 +743,11 @@ .code { flex: 1; margin-right: 40px; - border: 1px solid #d5d5d5; + border: var(--get-started-code-box-pre-border); border-radius: 22px; overflow: hidden; pre.highlight { - background: #fff; + background: var(--get-started-code-primary-bg); } } @@ -811,7 +811,7 @@ padding-top: 37px; margin-bottom: 70px; border-radius: 22px; - background: rgba(255, 255, 255, 0.9); + background: var(--get-started-card-primary-bg); h2 { font-size: 48px; @@ -855,7 +855,7 @@ } .stand-alone-link { - background: rgba(255, 255, 255, 0.9); + background: var(--get-started-card-primary-bg); padding: 20px 50px; opacity: 0.9; border-radius: 20px; @@ -863,6 +863,13 @@ margin: auto; display: block; margin-bottom: 90px; + position: relative; + z-index: 1; + + &:hover { + cursor: pointer; + } + a { @include link-with-right-arrow; }