From 01d729da8e3b73d328cdb225dc4def736c7b13b2 Mon Sep 17 00:00:00 2001 From: nkrambo Date: Thu, 29 May 2025 16:27:59 -0700 Subject: [PATCH] feat(Homepage): darkmode support --- _includes/new-includes/header/navigation.html | 4 +- assets/stylesheets/_screen.scss | 9 +- assets/stylesheets/application.scss | 7 + assets/stylesheets/new-stylesheets/_core.scss | 11 +- .../stylesheets/new-stylesheets/_syntax.scss | 184 +++++++++---- .../stylesheets/new-stylesheets/_themes.scss | 91 +++++++ .../includes/callout/_base.scss | 2 +- .../includes/footer/_base.scss | 1 + .../includes/navigation/_base.scss | 19 +- .../includes/navigation/_mobile.scss | 8 +- .../new-stylesheets/pages/_index.scss | 79 +++--- .../new-stylesheets/pages/_landing.scss | 249 ------------------ index.md | 2 +- 13 files changed, 308 insertions(+), 358 deletions(-) delete mode 100644 assets/stylesheets/new-stylesheets/pages/_landing.scss diff --git a/_includes/new-includes/header/navigation.html b/_includes/new-includes/header/navigation.html index 9186fc02e..1394b9b19 100644 --- a/_includes/new-includes/header/navigation.html +++ b/_includes/new-includes/header/navigation.html @@ -1,13 +1,13 @@ \ No newline at end of file diff --git a/assets/stylesheets/_screen.scss b/assets/stylesheets/_screen.scss index 71c778544..71ae192e0 100644 --- a/assets/stylesheets/_screen.scss +++ b/assets/stylesheets/_screen.scss @@ -1,13 +1,5 @@ @use './core/_helpers' as mixhelpers; -*, -*:before, -*:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - html, body { display: flex; @@ -208,6 +200,7 @@ h2.header-with-anchor { main { padding-top: 66px; // height of nav + background-color: var(--color-fill); .callout { display: grid; diff --git a/assets/stylesheets/application.scss b/assets/stylesheets/application.scss index 566184202..1b21ff66b 100644 --- a/assets/stylesheets/application.scss +++ b/assets/stylesheets/application.scss @@ -27,4 +27,11 @@ body { @include dark-theme; } + + // Use linear-gradient so over scroll color matches footer background color, when user rubberbands. + background-image: linear-gradient( + 180deg, + var(--nav-scroller-gradient-start) 50%, + var(--nav-scroller-gradient-end) 50% + ); } diff --git a/assets/stylesheets/new-stylesheets/_core.scss b/assets/stylesheets/new-stylesheets/_core.scss index 7ada3a79b..bc42414e6 100644 --- a/assets/stylesheets/new-stylesheets/_core.scss +++ b/assets/stylesheets/new-stylesheets/_core.scss @@ -16,7 +16,7 @@ body { transition: background-color 0.3s ease, color 0.3s ease; - @include light-theme; + @include light-theme; &[data-color-scheme='light'] { color-scheme: light; @@ -24,7 +24,6 @@ body { &[data-color-scheme='dark'] { color-scheme: dark; - @include dark-theme; } @@ -32,6 +31,13 @@ body { #install { color: var(--site-text-color); } + + // Use linear-gradient so over scroll color matches footer background color, when user rubberbands. + background-image: linear-gradient( + 180deg, + var(--nav-scroller-gradient-start) 50%, + var(--nav-scroller-gradient-end) 50% + ); } h2 { @@ -42,6 +48,7 @@ main { display: flex; flex-direction: column; min-height: 100vh; + background-color: var(--page-bg); } code { diff --git a/assets/stylesheets/new-stylesheets/_syntax.scss b/assets/stylesheets/new-stylesheets/_syntax.scss index 5e0576237..bce4d85a8 100644 --- a/assets/stylesheets/new-stylesheets/_syntax.scss +++ b/assets/stylesheets/new-stylesheets/_syntax.scss @@ -28,71 +28,167 @@ } } -.code-box pre { - button { - border-radius: 0; - } -} - pre.highlight { - background: #fff; - padding: 1em; - overflow-x: auto; - border-radius: 10px; - font-size: 15px; + background: var(--color-code-background); + font-size: 14px; line-height: 1.53; + overflow-x: auto; - .c, - .cm, - .cp, - .c1, + .c, /* Comment */ + .cm, /* Comment.Multiline */ + .cp, /* Comment.Preproc */ + .c1, /* Comment.Single */ .cs { - color: #6e6e6e; - font-style: italic; + /* Comment.Special */ + color: var(--color-syntax-comments); } - .k, - .kt, + .k, /* Keyword */ + .kc, /* Keyword.Constant */ + .kd, /* Keyword.Declaration */ + .kp, /* Keyword.Pseudo */ .kr, - .kd { - color: #ad3da4; + .kt, /* Keyword.Reserved */ + .nb { + /* Name.Builtin */ + color: var(--color-syntax-keywords); } - .s, - .s1, - .s2, - .sd { - color: #d12f1b; + .nv, /* Name.Variable */ + .nf { + /* Name.Function */ + color: var(--color-syntax-project-constants); } - .nf { - color: #703daa; + .n { + color: #B181EC; } - .nc, - .no, - .nt { - color: #3b5bdb; + .o, .p { + color: var(--color-syntax-brackets-dots); + } + + .s, /* Literal.String */ + .sb, /* Literal.String.Backtick */ + .sc, /* Literal.String.Char >> --color-syntax-characters */ + .sd, /* Literal.String.Doc */ + .s2, /* Literal.String.Double */ + .se, /* Literal.String.Escape */ + .sh, /* Literal.String.Heredoc */ + .si, /* Literal.String.Interpol */ + .s1, /* Literal.String.Single */ + .sx { + /* Literal.String.Other */ + color: var(--color-syntax-strings); + } + + .na { + /* Name.Attribute */ + color: var(--color-syntax-attributes); } - .nv, - .vg, + .nc, /* Name.Class */ + .ni, /* Name.Entity */ + .no, /* Name.Constant */ + .vc, /* Name.Variable.Class */ + .vg, /* Name.Variable.Global */ .vi { - color: #333; + /* Name.Variable.Instance */ + color: var(--color-syntax-other-type-names); + } + + .err, /* Error */ + .gr, /* Generic.Error */ + .gt, /* Generic.Traceback */ + .ne { + /* Name.Exception */ + color: var(--color-syntax-strings); + } + + .m, /* Literal.Number */ + .mf, /* Literal.Number.Float */ + .mh, /* Literal.Number.Hex */ + .mi, /* Literal.Number.Integer */ + .il, /* Literal.Number.Integer.Long */ + .mo { + /* Literal.Number.Oct */ + color: var(--color-syntax-numbers); + } + + .ge { + /* Generic.Emph */ + font-style: italic; + } + + .nt { + /* Name.Tag */ + color: var(--color-syntax-characters); + } + + .gd, /* Generic.Deleted */ + .gd .x { + /* Generic.Deleted.Specific */ + color: var(--color-syntax-plain-text); + background-color: var(--color-fill-red-secondary); + } + + .gi, /* Generic.Inserted */ + .gi .x { + /* Generic.Inserted.Specific */ + color: var(--color-syntax-plain-text); + background-color: var(--color-fill-green-secondary); + } + + .gh, /* Generic.Heading */ + .bp, /* Name.Builtin.Pseudo */ + .go, /* Generic.Output */ + .gp, /* Generic.Prompt */ + .gu, /* Generic.Subheading */ + .w { + /* Text.Whitespace */ + color: var(--color-syntax-comments); + } + + .nn { + /* Name.Namespace */ + color: var(--color-syntax-other-declarations); } - .m, - .mi, - .mf { - color: #098658; + .sr { + /* Literal.String.Regex */ + color: var(--color-figure-green); } - .o { - color: #000; + .ss { + /* Literal.String.Symbol */ + color: var(--color-syntax-heading); } - .err { - background-color: #ffeef0; - color: #d73a49; + /* Make prompts non-selectable, to make it easy to copy and paste */ + .gp { + -webkit-user-select: none; + user-select: none; + + & + .w { + -webkit-user-select: none; + user-select: none; + } } } + +.language-console { + color: var(--color-syntax-plain-text); +} + +// Explicit syntax highlighting for C++ code blocks: + +.language-cpp .cp, +.language-cpp .kt, +.language-cpp .nl, +.language-cpp .o, +.language-c\+\+ .cp, +.language-c\+\+ .kt, +.language-c\+\+ .nl, +.language-c\+\+ .o { + color: var(--color-syntax-keywords); +} diff --git a/assets/stylesheets/new-stylesheets/_themes.scss b/assets/stylesheets/new-stylesheets/_themes.scss index ca5ebdcfa..12bd7e49c 100644 --- a/assets/stylesheets/new-stylesheets/_themes.scss +++ b/assets/stylesheets/new-stylesheets/_themes.scss @@ -1,3 +1,4 @@ + @mixin light-theme() { --site-text-color: #051416; --site-navigation-border-bottom: linear-gradient(0deg, #f6b391 0%, #f8ce6e 92%); @@ -14,6 +15,8 @@ --site-link-with-right-arrow-icon-filter: none; --site-content-link-with-right-arrow-icon-filter: brightness(0); + --page-bg: #fff; + --install-page-bg: linear-gradient(0deg, #f6b391 0%, #f8ce6e 92%); --install-site-code-box-bg: #ffffff; --install-site-code-box-pre-bg: #f2f2f2; @@ -21,6 +24,49 @@ --install-release-box-th-color: #333; --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%); + --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%); + --home-quicklinks-bg: rgba(255, 177, 100, 0.9); + --home-quicklinks-color: #801a1a; + + // rubber band + --nav-scroller-gradient-start: #1e162e; + --nav-scroller-gradient-end: #fff; + + // syntax + --color-syntax-attributes: rgb(148, 113, 0); + --color-syntax-characters: rgb(39, 42, 216); + --color-syntax-comments: rgb(112, 127, 140); + --color-syntax-documentation-markup: rgb(80, 99, 117); + --color-syntax-documentation-markup-keywords: rgb(80, 99, 117); + --color-syntax-brackets-dots: rgba(45, 100, 105); + --color-syntax-heading: rgb(186, 45, 162); + --color-syntax-keywords: rgb(173, 61, 164); + --color-syntax-marks: rgb(0, 0, 0); + --color-syntax-numbers: rgb(39, 42, 216); + --color-syntax-other-class-names: rgb(112, 61, 170); + --color-syntax-other-constants: rgb(75, 33, 176); + --color-syntax-other-declarations: rgb(4, 124, 176); + --color-syntax-other-function-and-method-names: rgb(75, 33, 176); + --color-syntax-other-instance-variables-and-globals: rgb(112, 61, 170); + --color-syntax-other-preprocessor-macros: rgb(120, 73, 42); + --color-syntax-other-type-names: rgb(112, 61, 170); + --color-syntax-param-internal-name: rgb(64, 64, 64); + --color-syntax-plain-text: rgb(0, 0, 0); + --color-syntax-preprocessor-statements: rgb(120, 73, 42); + --color-syntax-project-class-names: rgb(62, 128, 135); + --color-syntax-project-constants: rgb(45, 100, 105); + --color-syntax-project-function-and-method-names: rgb(45, 100, 105); + --color-syntax-project-instance-variables-and-globals: rgb(62, 128, 135); + --color-syntax-project-preprocessor-macros: rgb(120, 73, 42); + --color-syntax-project-type-names: rgb(62, 128, 135); + --color-syntax-strings: rgb(209, 47, 27); + --color-syntax-type-declarations: rgb(3, 99, 140); + --color-syntax-urls: rgb(19, 55, 255); } @mixin dark-theme() { @@ -39,6 +85,8 @@ --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-site-code-box-pre-bg: #111727; @@ -46,4 +94,47 @@ --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%); + + --home-quicklinks-bg: #23344A; + --home-quicklinks-color: #ffffff; + + // rubber band + --nav-scroller-gradient-start: #1e162e; + --nav-scroller-gradient-end: #000; + + // syntax + --color-syntax-attributes: rgb(204, 151, 104); + --color-syntax-characters: rgb(217, 201, 124); + --color-syntax-comments: rgb(127, 140, 152); + --color-syntax-documentation-markup: rgb(127, 140, 152); + --color-syntax-documentation-markup-keywords: rgb(163, 177, 191); + --color-syntax-brackets-dots: rgba(255, 255, 255); + --color-syntax-keywords: rgb(255, 121, 179); + --color-syntax-marks: rgb(255, 255, 255); + --color-syntax-numbers: rgb(217, 201, 124); + --color-syntax-other-class-names: rgb(218, 186, 255); + --color-syntax-other-constants: rgb(167, 235, 221); + --color-syntax-other-declarations: rgb(78, 176, 204); + --color-syntax-other-function-and-method-names: rgb(178, 129, 235); + --color-syntax-other-instance-variables-and-globals: rgb(178, 129, 235); + --color-syntax-other-preprocessor-macros: rgb(255, 161, 79); + --color-syntax-other-type-names: rgb(218, 186, 255); + --color-syntax-param-internal-name: rgb(191, 191, 191); + --color-syntax-plain-text: rgb(255, 255, 255); + --color-syntax-preprocessor-statements: rgb(255, 161, 79); + --color-syntax-project-class-names: rgb(172, 242, 228); + --color-syntax-project-constants: rgb(120, 194, 179); + --color-syntax-project-function-and-method-names: rgb(120, 194, 179); + --color-syntax-project-instance-variables-and-globals: rgb(120, 194, 179); + --color-syntax-project-preprocessor-macros: rgb(255, 161, 79); + --color-syntax-project-type-names: rgb(172, 242, 228); + --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/includes/callout/_base.scss b/assets/stylesheets/new-stylesheets/includes/callout/_base.scss index a18a7f4e3..15bdb8856 100644 --- a/assets/stylesheets/new-stylesheets/includes/callout/_base.scss +++ b/assets/stylesheets/new-stylesheets/includes/callout/_base.scss @@ -4,7 +4,7 @@ gap: 40px; align-items: flex-start; padding: 1em; - margin: 1.5em auto; + margin: 2.5em auto; max-width: 980px; box-sizing: border-box; text-align: center; diff --git a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss index c5052e783..c721acc1f 100644 --- a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss +++ b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss @@ -17,6 +17,7 @@ footer.global-footer { text-align: center; padding: 6rem 3rem 3rem 3.5em; color: rgb(235, 236, 240); + z-index: 10; .container { max-width: 980px; diff --git a/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss b/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss index 711141074..1619a0889 100644 --- a/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss +++ b/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss @@ -16,8 +16,8 @@ .wrapper { @include flex-between; - padding: 0 20px; max-width: 1234px; + padding: 0 20px; margin: 0 auto; } @@ -47,18 +47,26 @@ li { a { display: block; - padding: 22px 15px; + padding: 22px 5px; font-size: 19px; color: var(--site-navigation-text-color); transition: background-color 0.2s ease, color 0.2s ease; // smooth hover + + & > span { + padding: 12px 15px; + border-radius: 36px; + } // hover/focus states &:hover, &:focus { - background-color: var(--site-navigation-item-background); outline: none; // basic focus outline removal + + & > span { + background-color: var(--site-navigation-item-background); + } } // visual focus indicator for accessibility @@ -70,8 +78,11 @@ &.active { a { - background-color: var(--site-navigation-item-background); outline: none; // basic focus outline removal + + & > span { + background-color: rgba(230, 150, 80, .9); + } } } } diff --git a/assets/stylesheets/new-stylesheets/includes/navigation/_mobile.scss b/assets/stylesheets/new-stylesheets/includes/navigation/_mobile.scss index 3f5f96978..0a58462eb 100644 --- a/assets/stylesheets/new-stylesheets/includes/navigation/_mobile.scss +++ b/assets/stylesheets/new-stylesheets/includes/navigation/_mobile.scss @@ -38,8 +38,14 @@ } a { - padding: 1rem; + padding: 0; display: block; + + & > span { + padding: 1rem; + border-radius: 0; + display: block; + } } &.border { diff --git a/assets/stylesheets/new-stylesheets/pages/_index.scss b/assets/stylesheets/new-stylesheets/pages/_index.scss index 2be50e4f1..4ed053510 100644 --- a/assets/stylesheets/new-stylesheets/pages/_index.scss +++ b/assets/stylesheets/new-stylesheets/pages/_index.scss @@ -24,6 +24,10 @@ $icons: ( text-align: center; font-weight: 600; } + + .callout-subtitle { + margin-bottom: 22px; + } } .animation-container { @@ -58,13 +62,7 @@ $icons: ( padding-bottom: 8vw; text-align: center; position: relative; - - background-image: linear-gradient( - 179deg, - #fac685 3%, - #fbdab0 87%, - #ffffff 100% - ); + background-image: var(--homepage-hero-bg); @include noise(); @media only screen and (max-width: 1024px) { @@ -87,10 +85,9 @@ $icons: ( h1 { font-size: 48px; line-height: 1.2; - color: #3d3d3d; + color: var(--site-code-box-text); letter-spacing: 0; text-align: center; - text-shadow: 0 2px 30px #fac686; font-weight: 600; margin-bottom: 30px; position: relative; @@ -106,7 +103,7 @@ $icons: ( .hero-content > p { opacity: 0.66; font-size: 17px; - color: #3d3d3d; + color: var(--homepage-install-text); font-weight: 500; margin-top: 11px; } @@ -114,7 +111,7 @@ $icons: ( /* Get Started */ h2 { font-size: 32px; - color: #000000; + color: var(--site-text-color); letter-spacing: 0; text-align: center; font-weight: 400; @@ -126,7 +123,7 @@ $icons: ( .sub-text > h2 { font-size: 32px; - color: #3D3D3D; + color: var(--site-code-box-text); letter-spacing: 0; text-align: center; font-weight: 400; @@ -149,9 +146,10 @@ $icons: ( a { display: flex; text-decoration: none; - color: #801a1a; + color: var(--home-quicklinks-color); + background-color: var(--home-quicklinks-bg); + // background-color: #fff; font-weight: 400; - background-color: rgba(255, 177, 100, 0.9); border-radius: 36px; font-size: 14px; padding: 12px; @@ -168,10 +166,12 @@ $icons: ( background-position: center; display: inline-block; vertical-align: middle; + background-color: var(--home-quicklinks-color); @each $name in $icons { &.#{$name} { - background-image: url(/assets/images/icon-#{$name}.svg); + mask: url("/assets/images/icon-#{$name}.svg") center / contain no-repeat; + -webkit-mask: url("/assets/images/icon-#{$name}.svg") center / contain no-repeat; } } } @@ -179,7 +179,8 @@ $icons: ( /* Hover/focus styles */ &:hover, &:focus { - background-color: rgba(230, 150, 80, 0.9); + // background-color: rgba(230, 150, 80, 0.9); + // background-color: color.adjust($foo, $lightness: -10%); outline: none; } @@ -331,18 +332,22 @@ $icons: ( } } -#pillar-0 { - background-color: #bbbbbb; -} + body[data-color-scheme='dark'] { + .callout.with-code { + .code { + pre.highlight { + border: 1px solid #575757; + background: #111727; + } + } + } + } #pillar-1 { - background-image: linear-gradient( - to bottom, - #ffffff 0%, - #d9f2ff 75%, - #fff3d8 90% - ); + background-image: var(--homepage-pillar-1-bg); padding: 11.88vw 0 16.88vw; + color: var(--site-text-color); + .swoop { @include swoop-ratio(444, 97, 1.33); z-index: 1; @@ -354,12 +359,7 @@ $icons: ( #pillar-2 { padding: 0.94vw 0 12.5vw; - background-image: linear-gradient( - to top, - #e4937f 0%, - #fdd9a1 72%, - #fff3d8 100% - ); + background-image: var(--homepage-pillar-2-bg); .swoop { @include swoop-ratio(2624, 1073, 1.33); @@ -372,12 +372,7 @@ $icons: ( } #pillar-3 { - background-image: linear-gradient( - 180deg, - #e4937f 0%, - #a268c1 36%, - #4b3773 100% - ); + background-image: var(--homepage-pillar-3-bg); padding: 5vw 0 40px; .callout { @@ -388,12 +383,4 @@ $icons: ( .callout-text { text-align: center; } -} - -#pillar-4 { - background-color: #d8bfd8; -} - -#pillar-5 { - background-color: #b0e0e6; -} +} \ No newline at end of file diff --git a/assets/stylesheets/new-stylesheets/pages/_landing.scss b/assets/stylesheets/new-stylesheets/pages/_landing.scss deleted file mode 100644 index ec8b4b489..000000000 --- a/assets/stylesheets/new-stylesheets/pages/_landing.scss +++ /dev/null @@ -1,249 +0,0 @@ -@use "../helpers" as *; -@use 'sass:list'; - -@mixin swoop-ratio($width, $height) { - aspect-ratio: list.slash($width, calc($height * 1.2)); -} - -.section { - padding: 242px 0; - text-align: center; - - h2 { - font-size: 45px; - color: #3d3d3d; - letter-spacing: 0; - text-align: center; - font-weight: 600; - } -} - -#what-is-swift { - padding-top: 72px; // height of navigation, plus standard - text-align: center; - position: relative; - background-color: #fbd19d; - - @media only screen and (max-width: 1024px) { - & { - padding: calc(72px + 142px) 10px 214px; - padding-left: 10px; - padding-right: 10px; - } - } - - &::before { - content: ""; - display: block; - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - background: url(/assets/images/noise.png); - opacity: 0.04; - } - - .hero-content { - margin-top: 23vw; - z-index: 5; - } - - // we can add a noise filter background, but we might need to use an image in base64 - // &:after { - // content: ""; - // position: absolute; - // top: 0; - // left: 0; - // width: 100%; - // height: 100%; - // opacity: 0.3; // grain intensity - // z-index: -1; // place it behind the body content - // pointer-events: none; // make sure it doesn't interfere with click events - - // /* The SVG noise filter embedded as a Data URI */ - // background-image: url('data:image/svg+xml,'); - // } - - h1 { - font-size: 44px; - color: #3d3d3d; - letter-spacing: 0; - text-align: center; - text-shadow: 0 2px 30px #fac686; - font-weight: 600; - margin-bottom: 50px; - position: relative; - z-index: 3; - } - - /* Install */ - .hero-content > a { - z-index: 5; - position: relative; - display: inline-block; - font-size: 35px; - color: #ffffff; - letter-spacing: 0; - font-weight: 400; - text-decoration: none; - padding: 15px 95px; - background-image: linear-gradient(to bottom right, #ff7f00, #f05238); - border-radius: 37px; - white-space: nowrap; // prevent link text from breaking mid-word - transition: - background-color 0.2s ease, - color 0.2s ease; // smooth hover - - /* hover/focus states */ - &:hover, - &:focus { - background-color: #ff7f00; - color: #e0e0e0; - outline: none; // basic focus outline removal - } - - /* Visual focus indicator for accessibility */ - &:focus-visible { - outline: 2px solid dodgerblue; - outline-offset: 2px; - } - } - - /* Get Started */ - h2 { - font-size: 40px; - color: #000000; - letter-spacing: 0; - text-align: center; - font-weight: 600; - margin-top: 113px; - margin-bottom: 24px; - } - - nav[aria-label="Get started with Swift"] { - max-width: 1100px; - margin: 0 auto; - position: relative; - z-index: 5; - - @media only screen and (max-width: 1024px) { - & { - max-width: 100%; - } - } - - ul { - /* Reset default list styling */ - list-style: none; - padding: 0; - margin: 0; - - /* Flexbox */ - display: flex; - flex-wrap: wrap; // allow items to wrap onto the next line - justify-content: center; - - /* Spacing between items, row and column */ - gap: 15px; - - /* Button styles */ - li a { - display: inline-block; - text-decoration: none; - font-size: 25px; - color: #051416; - letter-spacing: 0; - font-weight: 400; - padding: 20px 25px; - background: rgba(255, 255, 255, 0.9); - border-radius: 36px; - white-space: nowrap; // prevent link text from breaking mid-word - transition: - background-color 0.2s ease, - color 0.2s ease; // smooth hover - - /* hover/focus states */ - &:hover, - &:focus { - background-color: #e0e0e0; - color: #000; - outline: none; // basic focus outline removal - } - - /* Visual focus indicator for accessibility */ - &:focus-visible { - outline: 2px solid dodgerblue; - outline-offset: 2px; - } - } - } - } -} - -.pillar { - position: relative; - overflow: visible; - - .swoop { - display: block; - background: none no-repeat; - background-size: 120%; - background-position: -25% 0; - position: absolute; - bottom: 0; - left: 0; - right: 0; - width: 100%; - transform: translateY(50%); - pointer-events: none; - - @for $i from 1 through 5 { - &.swoop-#{$i}.visible { - background-image: url(/assets/images/page-scroll-swoops/swoop-#{$i}.png); - z-index: 5 - $i; - } - } - - } -} - -#pillar-0 { - background-color: #bbbbbb; -} - -#pillar-1 { - background-color: #fadadd; - - .swoop { - @include swoop-ratio(1358, 353) - } -} - -#pillar-2 { - background-color: #b4f8c8; - - .swoop { - @include swoop-ratio(1181, 291) - } -} - -#pillar-3 { - background-color: #fdfd96; - - .swoop { - @include swoop-ratio(444, 97) - } -} - -#pillar-4 { - background-color: #d8bfd8; - - .swoop { - @include swoop-ratio(1265, 224) - } -} - -#pillar-5 { - background-color: #b0e0e6; -} \ No newline at end of file diff --git a/index.md b/index.md index 3a1349cff..377b7f65b 100644 --- a/index.md +++ b/index.md @@ -57,7 +57,7 @@ atom: true


- It’s the combination of approachability, speed, safety, and all of Swift’s strengths that make it so unique. + It's the combination of approachability, speed, safety, and all of
Swift’s strengths that make it so unique.

{% for callout in pillar1_callouts %}