From 7c53d78134a7e1fc58a2654c63f9d04d7fa73e93 Mon Sep 17 00:00:00 2001 From: Jesse Borden Date: Thu, 29 May 2025 16:13:04 -0700 Subject: [PATCH 1/2] Add misc mobile and desktop component styles. --- .../includes/footer/_base.scss | 57 +++++++------- .../new-stylesheets/pages/_get-started.scss | 76 ++++++++++++++++++- .../new-stylesheets/pages/_index.scss | 29 ++++++- get-started/embedded/index.md | 3 - 4 files changed, 129 insertions(+), 36 deletions(-) diff --git a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss index c5052e783..04cba6e86 100644 --- a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss +++ b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss @@ -12,11 +12,13 @@ } footer.global-footer { - background-color: #1E162E; + background-color: #1e162e; padding: 20px; text-align: center; padding: 6rem 3rem 3rem 3.5em; color: rgb(235, 236, 240); + position: relative; + z-index: 2; .container { max-width: 980px; @@ -31,22 +33,22 @@ footer.global-footer { .notes { .logo { - display: flex; - width: 116px; + display: flex; + width: 116px; - svg { - flex: 1; - } + svg { + flex: 1; + } - #logotype { - fill: #ebecf0; - } + #logotype { + fill: #ebecf0; + } } } h3 { margin-bottom: 15px; - color: #FCA76C; + color: #fca76c; font-size: 1.17em; line-height: 1.2; font-weight: bold; @@ -127,7 +129,7 @@ footer.global-footer { } input:checked + .color-scheme-toggle-label { - background: #FCA76C; + background: #fca76c; color: #1e162e; } } @@ -141,20 +143,19 @@ footer.global-footer { align-items: flex-end; color: #d1d2d4; - nav { display: inline-block; - ul { - list-style: none; - padding: 0; - margin: 0; - display: inline-flex; + ul { + list-style: none; + padding: 0; + margin: 0; + display: inline-flex; - a { - color: #d1d2d4; - } + a { + color: #d1d2d4; } + } } .legals { @@ -165,7 +166,9 @@ footer.global-footer { margin-bottom: 1.5em; line-height: 1.5em; - p { margin: 0; } + p { + margin: 0; + } a { color: #d1d2d4; @@ -177,7 +180,7 @@ footer.global-footer { margin-right: 1.75em; a { - padding: .35em 0; + padding: 0.35em 0; border-bottom: 1px solid transparent; &:hover { @@ -202,19 +205,19 @@ footer.global-footer { &.github { @include icon-style($icon-github); } - + &.bluesky { @include icon-style($icon-bluesky); } - + &.feed { @include icon-style($icon-feed); } - + &.mastodon { @include icon-style($icon-mastodon); } - + &.x { @include icon-style($icon-x); } @@ -222,4 +225,4 @@ footer.global-footer { } } } -} \ 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 81581be24..cf4fc6ad8 100644 --- a/assets/stylesheets/new-stylesheets/pages/_get-started.scss +++ b/assets/stylesheets/new-stylesheets/pages/_get-started.scss @@ -49,6 +49,11 @@ margin-bottom: 20px; position: relative; z-index: 1; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } > p { @@ -71,7 +76,7 @@ grid-template-columns: repeat(3, 1fr); gap: 20px; - @media only screen and (max-width: 767px) { + @media only screen and (max-width: 768px) { & { grid-template-columns: 1fr; } @@ -137,7 +142,7 @@ .content { background-color: white; - padding: 53px 50px 40px; + padding: 30px 50px 20px; max-width: 980px; margin: 0 auto; z-index: 3; @@ -150,6 +155,10 @@ margin: 0 10px; } + @media only screen and (max-width: 768px) { + padding: 22px 15px 10px; + } + .section-icon { width: 60px; margin: 40px 0 0; @@ -159,10 +168,20 @@ text-align: center; font-size: 48px; margin-bottom: 52px; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + margin-bottom: 22px; + } } a { @include link-with-right-arrow(); + + @media only screen and (max-width: 768px) { + padding-bottom: 15px; + } } .primary-cards, @@ -285,7 +304,8 @@ .name { margin-bottom: 6px; - font-size: 21px; + font-size: 22px; + line-height: 1.33; } .text { @@ -312,6 +332,11 @@ margin-bottom: 44px; width: 100%; text-align: center; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } .card-wrapper { @@ -353,7 +378,6 @@ p { margin-bottom: 25px; - padding-right: 90px; } a { @@ -441,12 +465,22 @@ font-size: 22px; line-height: 1.2; margin-bottom: 5px; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } } h2 { font-size: 48px; margin-bottom: 27px; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } p, @@ -518,12 +552,21 @@ font-size: 48px; font-weight: 600; margin-bottom: 29px; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } p { font-size: 17px; padding: 0 100px; margin-bottom: 45px; + + @media only screen and (max-width: 768px) { + padding: 0; + } } a { @@ -550,6 +593,11 @@ font-size: 48px; margin-bottom: 30px; line-height: 1.2; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } p { @@ -604,6 +652,11 @@ font-size: 48px; margin-bottom: 30px; line-height: 1.2; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } p { @@ -630,6 +683,11 @@ margin-bottom: 44px; width: 100%; text-align: center; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } .card-wrapper { @@ -715,6 +773,11 @@ h2 { font-size: 48px; margin-bottom: 30px; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } p { @@ -807,6 +870,11 @@ font-size: 48px; margin-bottom: 44px; text-align: center; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } h3 { diff --git a/assets/stylesheets/new-stylesheets/pages/_index.scss b/assets/stylesheets/new-stylesheets/pages/_index.scss index 2be50e4f1..873b613ca 100644 --- a/assets/stylesheets/new-stylesheets/pages/_index.scss +++ b/assets/stylesheets/new-stylesheets/pages/_index.scss @@ -23,6 +23,11 @@ $icons: ( letter-spacing: 0; text-align: center; font-weight: 600; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } } @@ -69,7 +74,7 @@ $icons: ( @media only screen and (max-width: 1024px) { & { - padding: calc(72px + 142px) 10px 214px; + padding: calc(72px + 142px) 10px 24vw; padding-left: 10px; padding-right: 10px; } @@ -95,6 +100,11 @@ $icons: ( margin-bottom: 30px; position: relative; z-index: 3; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } /* Install */ @@ -122,11 +132,16 @@ $icons: ( margin-bottom: 29px; position: relative; z-index: 1; + + @media only screen and (max-width: 768px) { + font-size: 32px; + line-height: 1.33; + } } .sub-text > h2 { font-size: 32px; - color: #3D3D3D; + color: #3d3d3d; letter-spacing: 0; text-align: center; font-weight: 400; @@ -134,6 +149,12 @@ $icons: ( margin-bottom: 60px; position: relative; z-index: 1; + + @media only screen and (max-width: 768px) { + font-size: 28px; + margin-bottom: 30px; + line-height: 1.33; + } } nav[aria-label='Get started with Swift'] { @@ -350,6 +371,10 @@ $icons: ( background-position: 60% 0; @include lazyloadBg('/assets/images/landing-page/swoops/swoop-1.png'); } + + @media only screen and (max-width: 768px) { + padding-top: 17.88vw; + } } #pillar-2 { diff --git a/get-started/embedded/index.md b/get-started/embedded/index.md index 0124c055e..fde269889 100644 --- a/get-started/embedded/index.md +++ b/get-started/embedded/index.md @@ -11,9 +11,6 @@ title: Embedded - {% include new-includes/components/card-grid.html content = site.data.new-data.get-started.embedded.card-grid %} From d80e905587ae6e6b0f6ca259eab85880756b17ce Mon Sep 17 00:00:00 2001 From: Jesse Borden Date: Thu, 29 May 2025 16:16:49 -0700 Subject: [PATCH 2/2] Update hero animation logo speed. --- assets/javascripts/new-javascripts/hero.js | 31 +++++++++++++--------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/assets/javascripts/new-javascripts/hero.js b/assets/javascripts/new-javascripts/hero.js index 913a35b50..d37274520 100644 --- a/assets/javascripts/new-javascripts/hero.js +++ b/assets/javascripts/new-javascripts/hero.js @@ -1,5 +1,7 @@ const heroAnimation = async () => { - const isReduceMotionEnabled = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + const isReduceMotionEnabled = window.matchMedia( + '(prefers-reduced-motion: reduce)', + ).matches const urlParams = new URLSearchParams(location.search) const hasDebugParam = urlParams.has('debug') @@ -118,7 +120,12 @@ const heroAnimation = async () => { return { ctx, pathInstance } } - const initLogo = ({ canvas, image, positionStart: [posX, posY], positionEnd: [endX, endY] }) => { + const initLogo = ({ + canvas, + image, + positionStart: [posX, posY], + positionEnd: [endX, endY], + }) => { const ctx = canvas.getContext('2d') // Same reason for conversion as initSwoops ctx.translate(posX - image.naturalWidth / 2, posY - image.naturalHeight / 2) @@ -128,9 +135,9 @@ const heroAnimation = async () => { ctx.drawImage(image, 0, 0) } else { ctx.globalAlpha = 1 - const deltaX = endX - posX; - const deltaY = endY - posY; - ctx.drawImage(image, deltaX, deltaY); + const deltaX = endX - posX + const deltaY = endY - posY + ctx.drawImage(image, deltaX, deltaY) } return ctx @@ -147,11 +154,11 @@ const heroAnimation = async () => { logo.image = logoImage // init canvas for each swoop layer heroSwoops.forEach((swoop, i) => { - swoop.image = swoopImages[i]; - const canvasData = initSwoops(swoop); - swoop.ctx = canvasData.ctx; - swoop.pathInstance = canvasData.pathInstance; - }); + swoop.image = swoopImages[i] + const canvasData = initSwoops(swoop) + swoop.ctx = canvasData.ctx + swoop.pathInstance = canvasData.pathInstance + }) // init logo canvas logo.ctx = initLogo(logo) } catch (error) { @@ -160,7 +167,7 @@ const heroAnimation = async () => { } if (isReduceMotionEnabled) { - return; + return } const DURATION = 1000 @@ -271,7 +278,7 @@ const heroAnimation = async () => { logo.state, { ease: 'out(1.1)', - duration: 250, + duration: 200, delay: 750, progress: 1, // ease: 'inOutQuad',