From a917606816d6211c8f062517c1865a52de11f0ae Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Wed, 5 Aug 2026 13:44:58 -0500 Subject: [PATCH] Clean up and simplify styles --- sites/www/content/flip/index.md | 2 +- sites/www/lib/src/pages/flip_page.dart | 2 +- sites/www/lib/src/pages/not_found_page.dart | 1 - sites/www/lib/styles/components/_btn.scss | 41 +- .../www/lib/styles/components/_carousel.scss | 26 +- sites/www/lib/styles/components/_embeds.scss | 16 +- .../www/lib/styles/components/_features.scss | 33 +- .../styles/components/_filters-dropdown.scss | 2 +- sites/www/lib/styles/components/_forms.scss | 2 +- sites/www/lib/styles/components/_header.scss | 11 +- sites/www/lib/styles/components/_hero.scss | 14 +- sites/www/lib/styles/components/_icon.scss | 8 +- sites/www/lib/styles/components/_logos.scss | 37 - sites/www/lib/styles/components/_map.scss | 28 - .../lib/styles/components/_newsletter.scss | 14 +- sites/www/lib/styles/components/_tabs.scss | 29 +- sites/www/lib/styles/core/_base.scss | 24 +- sites/www/lib/styles/core/_structure.scss | 2 +- sites/www/lib/styles/core/_vars.scss | 95 +- sites/www/lib/styles/pages/_blog_page.scss | 10 +- sites/www/lib/styles/pages/_brand.scss | 64 +- sites/www/lib/styles/pages/_buildWithAI.scss | 30 +- sites/www/lib/styles/pages/_community.scss | 178 +- sites/www/lib/styles/pages/_culture.scss | 6 +- sites/www/lib/styles/pages/_developers.scss | 38 - sites/www/lib/styles/pages/_development.scss | 93 +- sites/www/lib/styles/pages/_ecosystem.scss | 10 +- sites/www/lib/styles/pages/_events.scss | 235 +-- sites/www/lib/styles/pages/_flip.scss | 187 ++ sites/www/lib/styles/pages/_games.scss | 10 +- sites/www/lib/styles/pages/_home.scss | 57 +- sites/www/lib/styles/pages/_integrations.scss | 2 +- sites/www/lib/styles/pages/_learn.scss | 99 - sites/www/lib/styles/pages/_majorEvents.scss | 1632 ----------------- sites/www/lib/styles/pages/_monetization.scss | 17 +- sites/www/lib/styles/pages/_news.scss | 113 +- sites/www/lib/styles/pages/_notfound.scss | 46 +- sites/www/lib/styles/pages/_partner.scss | 18 +- sites/www/lib/styles/pages/_showcase.scss | 10 - sites/www/lib/styles/styles.scss | 6 +- 40 files changed, 511 insertions(+), 2737 deletions(-) delete mode 100644 sites/www/lib/styles/components/_logos.scss delete mode 100644 sites/www/lib/styles/components/_map.scss delete mode 100644 sites/www/lib/styles/pages/_developers.scss create mode 100644 sites/www/lib/styles/pages/_flip.scss delete mode 100644 sites/www/lib/styles/pages/_learn.scss delete mode 100644 sites/www/lib/styles/pages/_majorEvents.scss diff --git a/sites/www/content/flip/index.md b/sites/www/content/flip/index.md index fb7046fd984..0835c7f64e6 100644 --- a/sites/www/content/flip/index.md +++ b/sites/www/content/flip/index.md @@ -1,6 +1,6 @@ --- title: I/O FLIP -bodyTags: interior +bodyTags: interior flip description: I/O FLIP is a modern AI take on a battle card game that uses generative AI to create custom cards for players to challenge each other. It was created to inspire developers to experiment with what is possible with generative AI + Google tools. Character images are generated with DreamBooth on Muse, and descriptions were generated using the PaLM API. Created in Flutter, it uses a suite of Firebase and Google Cloud tools for hosting and sharing. publishDate: "2023-05-04" --- diff --git a/sites/www/lib/src/pages/flip_page.dart b/sites/www/lib/src/pages/flip_page.dart index 7fd043fefd7..cfae7b29ba1 100644 --- a/sites/www/lib/src/pages/flip_page.dart +++ b/sites/www/lib/src/pages/flip_page.dart @@ -32,7 +32,7 @@ class FlipPage extends StatelessComponent { ]), div(classes: 'hero-details', [ a( - classes: 'btn secondary', + classes: 'btn white', href: 'https://flip.withgoogle.com', target: Target.blank, [.text('Play now')], diff --git a/sites/www/lib/src/pages/not_found_page.dart b/sites/www/lib/src/pages/not_found_page.dart index 93b72db271a..96afd03ceac 100644 --- a/sites/www/lib/src/pages/not_found_page.dart +++ b/sites/www/lib/src/pages/not_found_page.dart @@ -13,7 +13,6 @@ class NotFoundPage extends StatelessComponent { @override Component build(BuildContext context) { return main_([ - const section(classes: 'hero', []), section( classes: 'content-container', attributes: const { diff --git a/sites/www/lib/styles/components/_btn.scss b/sites/www/lib/styles/components/_btn.scss index 06f0b438b93..66add0071cb 100644 --- a/sites/www/lib/styles/components/_btn.scss +++ b/sites/www/lib/styles/components/_btn.scss @@ -20,7 +20,7 @@ font-size: var(--font-size-heading-5); } - &.solid { + &.solid, &.primary { background-color: var(--blue-6); color: white; } @@ -35,17 +35,11 @@ } } - &.primary { - background-color: var(--blue-6); - color: white; - } - &.quiet { background-color: transparent !important; border: none !important; color: black; padding: 0 var(--gutter-sm); - ; &:hover { background-color: transparent !important; @@ -54,19 +48,16 @@ } &.collapsed { - padding: 0 !important + padding: 0 !important; } .link-arrow-icon { - position: relative; - left: 0; + transform: translateX(0); + transition: transform 400ms var(--ui-anim-func); } - &:hover { - .link-arrow-icon { - transition: left 400ms var(--ui-anim-func); - left: 3px; - } + &:hover .link-arrow-icon { + transform: translateX(3px); } } @@ -81,22 +72,18 @@ cursor: pointer; padding: 0; - &:hover, - &.active { - transition: background-color 300ms ease; + transition: background-color 300ms ease; + + &:hover, &.active { background-color: rgba(250, 250, 250, 0.15); } } +main .btn { + border: 1px solid var(--blue-6); -main { - .btn { - border: 1px solid var(--blue-6); - font-size: var(--font-size-default); - - &:hover { - background-color: var(--blue-6); - color: white; - } + &:hover { + background-color: var(--blue-6); + color: white; } } diff --git a/sites/www/lib/styles/components/_carousel.scss b/sites/www/lib/styles/components/_carousel.scss index e5caa44d53e..f989ce36b50 100644 --- a/sites/www/lib/styles/components/_carousel.scss +++ b/sites/www/lib/styles/components/_carousel.scss @@ -12,8 +12,7 @@ .carousel { .carousel-slider { margin-left: calc(-1 * var(--gutter)); - padding: 20px 0 30px; - padding-left: var(--gutter); + padding: 20px 0 30px var(--gutter); align-items: stretch; display: flex; overflow-x: auto; @@ -87,26 +86,19 @@ background-repeat: no-repeat; background-position: center; background-size: contain; - border-top-left-radius: var(--ui-border-radius-sm); - border-top-right-radius: var(--ui-border-radius-sm); - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-radius: var(--ui-border-radius-sm) var(--ui-border-radius-sm) 0 0; height: 250px; } .text { padding: var(--spacer); display: flex; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-right-radius: var(--ui-border-radius-sm); - border-bottom-left-radius: var(--ui-border-radius-sm); + border-radius: 0 0 var(--ui-border-radius-sm) var(--ui-border-radius-sm); flex-direction: column; text-align: center; align-items: center; justify-content: center; background-color: var(--primary); - /* default, cms editable */ height: 500px; h4 { @@ -140,7 +132,6 @@ } &.dark { - h4, p { color: var(--grey-3); @@ -161,18 +152,12 @@ .media { width: var(--ui-card-width); - border-top-left-radius: var(--ui-border-radius-sm); - border-bottom-left-radius: var(--ui-border-radius-sm); - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-radius: var(--ui-border-radius-sm) 0 0 var(--ui-border-radius-sm); } .text { padding: var(--gutter-md); - border-bottom-left-radius: 0; - border-top-left-radius: 0; - border-top-right-radius: var(--ui-border-radius-sm); - border-bottom-right-radius: var(--ui-border-radius-sm); + border-radius: 0 var(--ui-border-radius-sm) var(--ui-border-radius-sm) 0; h3 { font-size: 54px; @@ -301,7 +286,6 @@ height: 100%; position: relative; width: 0; - /* dynamic */ } .carousel-nav { diff --git a/sites/www/lib/styles/components/_embeds.scss b/sites/www/lib/styles/components/_embeds.scss index 5c5123294ce..27022387dae 100644 --- a/sites/www/lib/styles/components/_embeds.scss +++ b/sites/www/lib/styles/components/_embeds.scss @@ -4,14 +4,12 @@ height: 0; overflow: hidden; max-width: 100%; -} -.embed-container iframe, -.embed-container object, -.embed-container embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + iframe, object, embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } diff --git a/sites/www/lib/styles/components/_features.scss b/sites/www/lib/styles/components/_features.scss index 6c3954e9dbf..b85dcf70f25 100644 --- a/sites/www/lib/styles/components/_features.scss +++ b/sites/www/lib/styles/components/_features.scss @@ -60,13 +60,8 @@ .features { margin-bottom: var(--gutter-sm); - - --anim-offset: 200px; - @keyframes slideup { - 0% { opacity: 0; } - 100% { opacity: 1; top: 0px } - } + --anim-offset: 200px; .stacked-feature { .feature { @@ -157,13 +152,8 @@ } &.active { + animation: marketing-slide-up 600ms var(--ui-anim-func) forwards; display: grid; - animation-duration: 600ms; - animation-delay: 0ms; - animation-name: slideup; - animation-iteration-count: 1; - animation-timing-function: var(--ui-anim-func); - animation-fill-mode: forwards; } .text { @@ -180,7 +170,7 @@ font-size: var(--font-size-heading-3); } } - + p { margin-bottom: var(--gutter-sm); font-size: var(--font-size-heading-4); @@ -194,10 +184,9 @@ .media { margin-bottom: var(--gutter); - width: var(--feature-img-width); overflow: hidden; order: 1; - + img { width: 100%; max-width: 600px; @@ -227,8 +216,8 @@ &.reverse { grid-template-columns: 40% 1fr; - .text { - order: 2; + .text { + order: 2; padding: 0 var(--gutter) 0 var(--gutter-xl); } @@ -314,7 +303,7 @@ &:hover { transition: background-color 300ms, box-shadow 200ms var(--ui-anim-func); - background-color: rgba(255, 255, 255, 0.15); /* #5298E3; */ + background-color: rgba(255, 255, 255, 0.15); box-shadow: var(--ui-drop-shadow); h3 .link-arrow-icon { @@ -364,7 +353,7 @@ grid-template-columns: minmax(0, 400px) minmax(0, 400px); column-gap: var(--gutter); } - + &.col-3 { grid-template-columns: minmax(0, 400px) minmax(0, 400px); column-gap: var(--gutter-sm); @@ -378,7 +367,7 @@ grid-template-columns: minmax(0, 500px) minmax(0, 500px); column-gap: 90px; } - + &.col-3 { grid-template-columns: minmax(0, 400px) minmax(0, 400px) minmax(0, 400px); column-gap: var(--gutter-sm); @@ -408,14 +397,14 @@ font-size: var(--font-size-heading-2); line-height: 1; /* tighter */ } - + p { margin-bottom: var(--gutter-sm); font-size: var(--font-size-heading-4); } } } - + @include breakpoints.screen(md) { grid-template-columns: 1fr 1fr; } diff --git a/sites/www/lib/styles/components/_filters-dropdown.scss b/sites/www/lib/styles/components/_filters-dropdown.scss index bca5292acef..75246f0fad2 100644 --- a/sites/www/lib/styles/components/_filters-dropdown.scss +++ b/sites/www/lib/styles/components/_filters-dropdown.scss @@ -36,7 +36,7 @@ top: calc(var(--button-height) + 10px); background-color: #ffffff; min-width: 160px; - box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); + box-shadow: var(--ui-drop-shadow); border-radius: 8px; z-index: 6; diff --git a/sites/www/lib/styles/components/_forms.scss b/sites/www/lib/styles/components/_forms.scss index 16c2d3f021a..6c9f679657a 100644 --- a/sites/www/lib/styles/components/_forms.scss +++ b/sites/www/lib/styles/components/_forms.scss @@ -131,7 +131,7 @@ form { color: black; font-size: var(--font-size-heading-5); } - + input[type=text], input[type=email], input[type=search] { diff --git a/sites/www/lib/styles/components/_header.scss b/sites/www/lib/styles/components/_header.scss index cbd7b9b38f5..ec8baabcbf3 100644 --- a/sites/www/lib/styles/components/_header.scss +++ b/sites/www/lib/styles/components/_header.scss @@ -19,7 +19,7 @@ display: flex; align-items: center; justify-content: center; - background: linear-gradient(124.64deg, #027DFD 0%, #833EF2 100%); + background: linear-gradient(124.64deg, #027dfd 0%, #833ef2 100%); border-radius: 0; color: white; font-size: var(--font-size-default); @@ -254,9 +254,8 @@ z-index: 15; position: fixed; left: var(--gutter-sm); - width: calc(100% - calc(var(--gutter-sm) * 2)); + width: calc(100% - var(--gutter-sm) * 2); justify-content: center; - /* when global-gamers-challenge button removed put: bottom: 44px; */ bottom: 44px; } @@ -275,7 +274,7 @@ /* Expand nav to 100% */ nav { background-color: var(--blue-6); - box-shadow: var(--ui-box-shadow); + box-shadow: var(--ui-drop-shadow); padding: var(--gutter-lg) var(--gutter-sm); display: block; position: fixed; @@ -284,8 +283,6 @@ width: 100%; height: 100%; top: 0; - /* overflow-y: auto; - overflow-x: hidden; */ overflow: hidden; animation-duration: 300ms; @@ -299,7 +296,6 @@ position: relative; top: 70px; display: inline-block; - /* when global-gamers-challenge button removed put: height: 90%; */ height: 85%; width: 100%; overflow-y: auto; @@ -370,7 +366,6 @@ font-weight: var(--font-weight-bold); } - /* &.active, */ &:active, &:hover { background-color: rgba(250, 250, 250, 0.15); diff --git a/sites/www/lib/styles/components/_hero.scss b/sites/www/lib/styles/components/_hero.scss index 4e01c9625e5..c2a7c8a9bb4 100644 --- a/sites/www/lib/styles/components/_hero.scss +++ b/sites/www/lib/styles/components/_hero.scss @@ -31,7 +31,7 @@ body.interior { } } } - + .text { text-align: center; order: 2; @@ -72,20 +72,20 @@ body.interior { .mantle { grid-template-columns: 1fr minmax(0, var(--img-width)); gap: var(--gutter-md); - + .text { text-align: left; - order: 1; + order: 1; padding-left: var(--gutter); - + h1 { margin: 0; font-size: 70px; } } - - .media { - order: 2; + + .media { + order: 2; img { max-width: 100%; diff --git a/sites/www/lib/styles/components/_icon.scss b/sites/www/lib/styles/components/_icon.scss index 7f929be0e33..da9179a4594 100644 --- a/sites/www/lib/styles/components/_icon.scss +++ b/sites/www/lib/styles/components/_icon.scss @@ -7,10 +7,10 @@ .material-symbols-rounded { font-variation-settings: - 'FILL' var(--icon-fill, 0), - 'wght' var(--icon-wght, 400), - 'GRAD' var(--icon-grad, 0), - 'opsz' var(--icon-opsz, 24); + 'FILL' var(--icon-fill, 0), + 'wght' var(--icon-wght, 400), + 'GRAD' var(--icon-grad, 0), + 'opsz' var(--icon-opsz, 24); } .icon { diff --git a/sites/www/lib/styles/components/_logos.scss b/sites/www/lib/styles/components/_logos.scss deleted file mode 100644 index 844ddf41af2..00000000000 --- a/sites/www/lib/styles/components/_logos.scss +++ /dev/null @@ -1,37 +0,0 @@ -.logos { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - gap: var(--gutter-sm); - - .logos-col { - &.centerpiece { - > div { - height: 356px; - width: 356px; - } - } - } - - .logos-col > div { - width: 163px; - height: 163px; - background-color: var(--grey-1); - box-shadow: var(--ui-drop-shadow-sm); - border-radius: var(--ui-border-radius-sm); - padding: 37px; - display: grid; - place-items: center; - - &::before { - content: ""; - display: block; - padding-bottom: 100%; - grid-area: 1 / 1 / 2 / 2; - } - - img { - width: 100%; - grid-area: 1 / 1 / 2 / 2; - } - } -} diff --git a/sites/www/lib/styles/components/_map.scss b/sites/www/lib/styles/components/_map.scss deleted file mode 100644 index 4d624d049f1..00000000000 --- a/sites/www/lib/styles/components/_map.scss +++ /dev/null @@ -1,28 +0,0 @@ -.map { - - button.gm-ui-hover-effect { - top: 1px !important; - right: 0px !important; - } - - .map-info-window { - padding: 20px; - - h4 { - font-size: 14px; - font-weight: var(--font-weight-normal); - margin-bottom: var(--spacer-sm); - color: var(--primary); - } - - h3 { - font-size: var(--font-size-heading-3); - margin-bottom: var(--spacer-sm); - } - - p { - font-size: var(--font-size-heading-5); - margin-bottom: var(--gutter-sm); - } - } -} diff --git a/sites/www/lib/styles/components/_newsletter.scss b/sites/www/lib/styles/components/_newsletter.scss index 9d25bf0c581..88134a11a52 100644 --- a/sites/www/lib/styles/components/_newsletter.scss +++ b/sites/www/lib/styles/components/_newsletter.scss @@ -12,11 +12,6 @@ } } - @keyframes slidedown { - 0% { opacity: 0; } - 100% { opacity: 1; top: 0; } - } - form { overflow: hidden; padding: 0.25rem; @@ -43,15 +38,10 @@ top: -150px; &.active { - animation-duration: 400ms; - animation-delay: 0ms; - animation-name: slidedown; - animation-iteration-count: 1; - animation-timing-function: var(--ui-anim-func); - animation-fill-mode: forwards; + animation: marketing-slide-up 400ms var(--ui-anim-func) forwards; } } - + .optin { font-size: var(--font-size-default); } diff --git a/sites/www/lib/styles/components/_tabs.scss b/sites/www/lib/styles/components/_tabs.scss index 0bee5e36aac..684f4d78a6c 100644 --- a/sites/www/lib/styles/components/_tabs.scss +++ b/sites/www/lib/styles/components/_tabs.scss @@ -4,11 +4,6 @@ --text-width: 394px; --anim-offset: 200px; - @keyframes slideup { - 0% { opacity: 0; } - 100% { opacity: 1; top: 0px } - } - .tabs-header, .tabs-footer { margin-bottom: 60px; @@ -56,7 +51,7 @@ @include breakpoints.screen(lg) { ul li { - max-width: 165px; + width: 165px; } } } @@ -73,16 +68,11 @@ } &.active { + animation: marketing-slide-up 600ms var(--ui-anim-func) forwards; display: grid; - animation-duration: 600ms; - animation-delay: 0ms; - animation-name: slideup; - animation-iteration-count: 1; - animation-timing-function: var(--ui-anim-func); - animation-fill-mode: forwards; } - .media { + .media { img, video { width: 100%; max-width: 600px; @@ -111,23 +101,12 @@ opacity: 0; &.active { + animation: marketing-slide-up 600ms var(--ui-anim-func) forwards; display: block; - animation-duration: 600ms; - animation-delay: 0ms; - animation-name: slideup; - animation-iteration-count: 1; - animation-timing-function: var(--ui-anim-func); - animation-fill-mode: forwards; } } @include breakpoints.screen(lg) { - .tabs-menu { - ul li { - width: 165px; - } - } - .tab-content { grid-template-columns: 1fr var(--text-width); align-items: center; diff --git a/sites/www/lib/styles/core/_base.scss b/sites/www/lib/styles/core/_base.scss index 21aa403bc81..cabafdee138 100644 --- a/sites/www/lib/styles/core/_base.scss +++ b/sites/www/lib/styles/core/_base.scss @@ -17,6 +17,17 @@ body { } } +@keyframes marketing-slide-up { + from { + opacity: 0; + } + + to { + opacity: 1; + top: 0; + } +} + code, kbd, pre { @@ -37,17 +48,8 @@ h6 { color: black; } - -:is(h1, - h2, - h3, - h4, - h5, - h6):not(:where(.post-content *)) { - margin-block-start: 0; - margin-block-end: 0; - margin-inline-start: 0; - margin-inline-end: 0; +:is(h1, h2, h3, h4, h5, h6):not(:where(.post-content *)) { + margin: 0; } h1 { diff --git a/sites/www/lib/styles/core/_structure.scss b/sites/www/lib/styles/core/_structure.scss index 8925eb80f3a..07f3f5fa19e 100644 --- a/sites/www/lib/styles/core/_structure.scss +++ b/sites/www/lib/styles/core/_structure.scss @@ -20,7 +20,7 @@ main { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.19%; margin: 0 auto; - max-width: var(--screen-xl-min); + max-width: var(--screen-xl-min); } .centered { diff --git a/sites/www/lib/styles/core/_vars.scss b/sites/www/lib/styles/core/_vars.scss index adea036fcc1..37a60ff9817 100644 --- a/sites/www/lib/styles/core/_vars.scss +++ b/sites/www/lib/styles/core/_vars.scss @@ -2,37 +2,28 @@ @use 'breakpoints'; :root { - --blue-10: #041E3C; - --blue-9: #042B59; - --blue-8: #043875; - --blue-7: #0553B1; - --blue-6: #0468D7; - /* new primary */ - --primary: #0468D7; - /* accessibility */ - --blue-5: #027DFD; - /* --primary: #027DFD; old primary */ - --blue-4: #13B9FD; - --blue-3: #81DDF9; - --blue-2: #B8EAFE; - --blue-1: #E7F8FF; - --pink: #F8BBD0; - --red: #D43324; - --coral: #F25D50; - --yellow: #F2DD22; - --violet-4: #833EF2; - --violet-3: #796CEB; - --violet-2: #6200EE; - --violet-1: #C6BAFA; - --green-3: #14C2AD; - --green-2: #A7FFEB; - --green-1: #1CDAC5; - --grey-6: #4A4A4A; - --grey-5: #A4A4A4; - --grey-4: #DADCE0; - --grey-3: #E8EAED; - --grey-2: #F1F3F4; - --grey-1: #F8F9FA; + --blue-10: #041e3c; + --blue-9: #042b59; + --blue-7: #0553b1; + --blue-6: #0468d7; + --blue-5: #027dfd; + --blue-4: #13b9fd; + --blue-2: #b8eafe; + --blue-1: #e7f8ff; + --pink: #f8bbd0; + --red: #d43324; + --coral: #f25d50; + --violet-4: #833ef2; + --violet-1: #c6bafa; + --green-3: #14c2ad; + --green-1: #1cdac5; + --grey-6: #4a4a4a; + --grey-5: #a4a4a4; + --grey-4: #dadce0; + --grey-3: #e8eaed; + --grey-2: #f1f3f4; + --grey-1: #f8f9fa; + --primary: var(--blue-6); --ui-anim-func: cubic-bezier(.27, .89, .39, .95); --ui-border-radius: 24px; @@ -40,8 +31,8 @@ --ui-border-color: var(--grey-3); --ui-btn-height: 40px; --ui-card-width: 484px; - --ui-drop-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25); - --ui-drop-shadow-sm: 0px 0px 16px rgba(0, 0, 0, 0.1); + --ui-drop-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); + --ui-drop-shadow-sm: 0 0 16px rgba(0, 0, 0, 0.1); --ui-header-event-banner-height: 50px; --ui-header-navigation-height: 86px; @@ -54,8 +45,6 @@ --font-size-heading-4: 18px; --font-size-heading-5: 16px; --font-size-default: 14px; - --font-size-scaling-2: calc(88 * 100vw / 1440); - --font-size-scaling-3: calc(72 * 100vw / 1440); --font-weight-normal: 400; --font-weight-bold: 600; --font-weight-bolder: 700; @@ -69,7 +58,7 @@ --site-fontWeight-bold: var(--font-weight-bold); --site-fontWeight-normal: var(--font-weight-normal); - --site-outline: rgba(194, 198, 214, .75); + --site-outline: rgba(194, 198, 214, 0.75); --site-outline-variant: #e7e8ed; --site-base-bgColor: #ffffff; @@ -80,8 +69,6 @@ --site-inset-bgColor: #f9fafb; --site-inset-bgColor-translucent: rgba(237, 240, 242, 0.8); - --site-inset-bgColor-translucent-extra: rgba(237, 240, 242, 0.2); - --site-inset-fgColor: var(--site-base-fgColor); --site-inset-borderColor: #dadce0; --site-link-fgColor: var(--site-primary-color); @@ -90,16 +77,7 @@ --site-secondaryContainer-bgColor: #c2e5ff; --site-secondaryContainer-fgColor: var(--site-base-fgColor); - --screen-xs-min: 480px; - /* mobile portrait */ - --screen-sm-min: 640px; - /* mobile landscape */ - --screen-md-min: 768px; - /* tablet portrait */ - --screen-lg-min: 1024px; - /* tablet landscape */ --screen-xl-min: 1280px; - /* arguable */ --spacer-sm: 8px; --spacer-md: 32px; @@ -114,25 +92,14 @@ --max-width: calc(var(--screen-xl-min) - (var(--gutter) * 2)); --gutter-auto: calc((100vw - var(--max-width)) / 2); - --grad-blue-green-145: linear-gradient(145deg, #F3FCFF 40%, #D3FFF5 90%); - --grad-yellow-blue-145: linear-gradient(145deg, #FAF9C5 40%, #E8F9FF 90%); - --grad-blue-yellow-35: linear-gradient(35deg, #E8F9FF 40%, #FAF9C5 90%); - --grad-yellow-blue-35: linear-gradient(35deg, #FAF9C5 40%, #E8F9FF 90%); - --grad-liteyellow-blue: linear-gradient(35deg, #FCFCE2 40%, #F5FBFE 90%); - --grad-red-blue-35: linear-gradient(35deg, #FCDDE8 0%, #F3FCFF 60%); - --grad-violet-blue-35: linear-gradient(35deg, #E3DDFD 30%, #F3FCFF 90%); - --grad-blue-light-35: linear-gradient(35deg, #DCF5FF 50%, #F3FCFF 90%); - --grad-yellow-blue-75: linear-gradient(75deg, rgba(249, 248, 196, 0.5) 0%, rgba(231, 248, 255, 0.5) 100%); + --grad-blue-green-35: linear-gradient(35deg, #f3fcff 10%, #93faee 80%); + --grad-blue-yellow-35: linear-gradient(35deg, #e8f9ff 40%, #faf9c5 90%); + --grad-liteyellow-blue: linear-gradient(35deg, #fcfce2 40%, #f5fbfe 90%); + --grad-red-blue-35: linear-gradient(35deg, #fcdde8 0%, #f3fcff 60%); + --grad-violet-blue-35: linear-gradient(35deg, #e3ddfd 30%, #f3fcff 90%); + --grad-blue-light-35: linear-gradient(35deg, #dcf5ff 50%, #f3fcff 90%); @include breakpoints.screen(lg) { - /* REFERENCE original sizing - --font-size-heading-1: 74px; - --font-size-heading-2: 46px; - --font-size-heading-3: 34px; - --font-size-heading-4: 24px; - --font-size-heading-5: 18px; - --font-size-default: 16px; - */ --font-size-heading-1: 60px; --font-size-heading-2: 36px; --font-size-heading-3: 28px; diff --git a/sites/www/lib/styles/pages/_blog_page.scss b/sites/www/lib/styles/pages/_blog_page.scss index a642f8c05f3..f08d8226e40 100644 --- a/sites/www/lib/styles/pages/_blog_page.scss +++ b/sites/www/lib/styles/pages/_blog_page.scss @@ -9,7 +9,6 @@ min-width: 8rem; .post-info .post-info-actions { - a, button { color: var(--site-base-fgColor-lighter); @@ -29,17 +28,15 @@ > .content { padding: 1.5rem; - color: var(--site-base-fgColor) + color: var(--site-base-fgColor); } - @media(min-width: 576px) { + @media (min-width: 576px) { > .content { - padding: 2rem + padding: 2rem; } } } - - } :where(.blog main) a { @@ -51,7 +48,6 @@ } .blog header { - .subtype { padding: 0 0.3rem; font-size: 1.25rem; diff --git a/sites/www/lib/styles/pages/_brand.scss b/sites/www/lib/styles/pages/_brand.scss index 053bb840cd2..a16a8deccc5 100644 --- a/sites/www/lib/styles/pages/_brand.scss +++ b/sites/www/lib/styles/pages/_brand.scss @@ -3,14 +3,14 @@ body.brand { section.hero { - --lt-blue: #196BD4; - --dk-blue: #1783E1; + --lt-blue: #196bd4; + --dk-blue: #1783e1; background-color: var(--primary); - background-image: + background-image: linear-gradient( - to bottom, - var(--lt-blue) 20%, + to bottom, + var(--lt-blue) 20%, transparent 60% ), radial-gradient( @@ -19,8 +19,8 @@ body.brand { var(--lt-blue) 80% ), linear-gradient( - 145deg, - var(--lt-blue) 0%, + 145deg, + var(--lt-blue) 0%, var(--dk-blue) 60% ); padding: var(--gutter-xl) 0; @@ -32,7 +32,7 @@ body.brand { h4, h1 { color: white; } - + h1 { max-width: 375px !important; margin-bottom: var(--spacer) !important; @@ -183,7 +183,7 @@ body.brand { .compare-cols { --green: #158477; - --red: #D43324; + --red: #d43324; display: grid; grid-template-columns: 1fr; @@ -203,7 +203,7 @@ body.brand { .compare-label { padding: var(--spacer-sm) 0; font-weight: var(--font-weight-normal); - font-size: var(----font-size-default); + font-size: var(--font-size-default); span { font-weight: var(--font-weight-bolder); @@ -230,7 +230,7 @@ body.brand { hgroup { margin-bottom: var(--gutter); - + h3 { font-size: var(--font-size-heading-2); margin-bottom: var(--gutter-sm); @@ -289,8 +289,8 @@ body.brand { padding: 110px 70px; } - > div:nth-child(1) .downloadable-image { - background-color: white; + > div:nth-child(1) .downloadable-image { + background-color: white; } } @@ -311,7 +311,7 @@ body.brand { .variation-grid { > div .downloadable-image { - background-color: white; + background-color: white; height: 370px; display: flex; justify-content: center; @@ -355,7 +355,7 @@ body.brand { } } } - + section#logo-sizing-spacing { padding-bottom: var(--spacer); @@ -367,7 +367,7 @@ body.brand { gap: 30px; } - @include breakpoints.screen(md) { + @include breakpoints.screen(md) { .compare-cols { grid-template-columns: 1fr; padding: 80px; @@ -404,11 +404,11 @@ body.brand { } > div:nth-child(1) .image-harness { - background-color: #2968D0; + background-color: #2968d0; } > div:nth-child(2) .image-harness { - background-color: #53B7F7; + background-color: #53b7f7; } } } @@ -456,21 +456,21 @@ body.brand { grid-template-columns: 1fr; gap: 0; align-items: center; - + &.colors-primary .colors-grid { - .color:nth-child(1) .color-chip { background-color: #042B59; } - .color:nth-child(2) .color-chip { background-color: #0553B1; } - .color:nth-child(3) .color-chip { background-color: #027DFD; } + .color:nth-child(1) .color-chip { background-color: #042b59; } + .color:nth-child(2) .color-chip { background-color: #0553b1; } + .color:nth-child(3) .color-chip { background-color: #027dfd; } } &.colors-secondary { padding-bottom: var(--spacer-md); .colors-grid { - .color:nth-child(1) .color-chip { background-color: #F25D50; } - .color:nth-child(2) .color-chip { background-color: #FFF275; } - .color:nth-child(3) .color-chip { background-color: #6200EE; } - .color:nth-child(4) .color-chip { background-color: #1CDAC5; } + .color:nth-child(1) .color-chip { background-color: #f25d50; } + .color:nth-child(2) .color-chip { background-color: #fff275; } + .color:nth-child(3) .color-chip { background-color: #6200ee; } + .color:nth-child(4) .color-chip { background-color: #1cdac5; } } } } @@ -512,7 +512,7 @@ body.brand { .color-chip { border-radius: var(--ui-border-radius-sm); } - + .color-desc { min-width: 100%; display: block; @@ -543,12 +543,12 @@ body.brand { gap: var(--gutter-lg); .colors-grid { - gap: var(--gutter-sm); - order: 1; + gap: var(--gutter-sm); + order: 1; } - .colors-desc { - order: 2; + .colors-desc { + order: 2; } } @@ -568,7 +568,7 @@ body.brand { .feature { gap: var(--gutter); padding: 0; - + .text { order: 1; padding-right: var(--gutter); diff --git a/sites/www/lib/styles/pages/_buildWithAI.scss b/sites/www/lib/styles/pages/_buildWithAI.scss index 284df7148cf..43d17ea7b18 100644 --- a/sites/www/lib/styles/pages/_buildWithAI.scss +++ b/sites/www/lib/styles/pages/_buildWithAI.scss @@ -49,11 +49,11 @@ body.buildWithAI { background-color: transparent !important; display: flex !important; gap: 1rem; - + li { background-color: var(--grey-1); border-radius: var(--ui-border-radius); - + &.active { background-color: var(--blue-6); } @@ -75,63 +75,63 @@ body.buildWithAI { align-items: center; justify-content: space-between; margin-bottom: 2rem; - + &:last-child { margin-bottom: 0; } - + &.reversed { flex-direction: row-reverse; } - + .media { flex: 1; display: flex; justify-content: center; - + img { max-width: 100%; height: auto; } - + img.genkit-logo { max-width: 220px !important; border-radius: 50%; transform: translate(-50px, -10px); } } - + .text { flex: 1; padding: 6rem; - + h3 { font-size: var(--font-size-heading-2); margin-bottom: var(--gutter-sm); color: black; } - + p { font-size: var(--font-size-heading-4); margin-bottom: var(--spacer); } } - + @media (max-width: 1023px) { flex-direction: column !important; text-align: center; - + &.reversed { flex-direction: column !important; } - + .text { padding: 1rem 0; } - + .media { margin-bottom: 2rem; - + img.genkit-logo { max-width: 200px !important; } diff --git a/sites/www/lib/styles/pages/_community.scss b/sites/www/lib/styles/pages/_community.scss index 788403c1b6a..ae551811f57 100644 --- a/sites/www/lib/styles/pages/_community.scss +++ b/sites/www/lib/styles/pages/_community.scss @@ -2,31 +2,28 @@ body.community { section.hero { - background: linear-gradient(225deg, - rgba(231, 248, 255, 0.5) 0%, - rgba(184, 234, 254, 0.5) 100%); - - .container { - .mantle { - .text { - @include breakpoints.screen(lg) { - width: 553px; - } + background: linear-gradient( + 225deg, + rgba(231, 248, 255, 0.5) 0%, + rgba(184, 234, 254, 0.5) 100% + ); + + .mantle .text { + @include breakpoints.screen(lg) { + width: 553px; + } - h1 { - font-size: 48px; - } + h1 { + font-size: 48px; + } - h3 { - margin-top: 8px; - margin-bottom: 32px; - font-size: 20px; - font-family: var(--font-body); - color: var(--grey-6); - line-height: 30px; - font-weight: var(--font-weight-normal); - } - } + h3 { + color: var(--grey-6); + font-family: var(--font-body); + font-size: 20px; + font-weight: var(--font-weight-normal); + line-height: 30px; + margin: 8px 0 32px; } } } @@ -35,137 +32,50 @@ body.community { padding-top: var(--gutter-md); } - #events, - #gdes { + #events, #gdes { background-image: var(--grad-liteyellow-blue); - } - - #events .features, - #gdes .features { - margin-bottom: 0; - } - - #community-events { - .feature-header hgroup { - max-width: 750px; - } - } - - #map { - .map { - background-color: #eee; - height: 700px; - .cluster img { - width: 100% !important; - height: 100% !important; - } - } - } - - #twitter { - padding: var(--gutter-sm) 0; - - .text { - order: 1 !important; - } - - .media { - order: 2 !important; - } - - .social-icons { - margin-bottom: var(--gutter); - - >div { - display: flex; - align-items: center; - - a { - margin-right: 1.25rem; - } - - span { - font-family: var(--font-ui); - font-size: var(--font-size-heading-5); - color: var(--grey-6); - } - } - } - - @include breakpoints.screen(lg) { - .feature { - align-items: flex-start; - grid-template-columns: 1fr 55%; - } - - .twitter-embed { - position: relative; - top: -8px; - } - - .social-icons { - margin-bottom: 0; - } + .features { + margin-bottom: 0; } } #community-grid { --dk-purple: #0e0e4c; - --md-purple: #00186b; --lt-purple: #34137e; background-color: var(--dk-purple); - background-image: linear-gradient(to bottom, - var(--dk-purple) 20%, - transparent 60%), - radial-gradient(ellipse at -50% -150%, + background-image: + linear-gradient(to bottom, var(--dk-purple) 20%, transparent 60%), + radial-gradient( + ellipse at -50% -150%, transparent 80%, - var(--dk-purple) 80%), + var(--dk-purple) 80% + ), linear-gradient(145deg, var(--dk-purple) 0%, var(--lt-purple) 60%); - /* TODO can likely be merged with main feature-grid styles */ - >div a { - .community-icon { - max-width: 74px; - max-height: 74px; - margin-bottom: var(--spacer-md); - - &.framed-icon { - border-radius: 5px; - background-color: white; - padding: 12px; - height: 74px; - width: 74px; - display: flex; - align-items: center; - justify-content: center; + > div a .community-icon { + margin-bottom: var(--spacer-md); + max-height: 74px; + max-width: 74px; - img { - width: 100%; - } - } + &.framed-icon { + align-items: center; + background-color: white; + border-radius: 5px; + display: flex; + height: 74px; + justify-content: center; + padding: 12px; + width: 74px; img { - margin-bottom: 0; + width: 100%; } } - } - } - - .dart-insert { - background-image: linear-gradient(to right, #5bccfc, #beeafe); - overflow: hidden; - grid-template-columns: 1fr; - - .media { - position: static; img { - height: 100%; - bottom: auto; - top: 0; - width: auto; + margin-bottom: 0; } } } diff --git a/sites/www/lib/styles/pages/_culture.scss b/sites/www/lib/styles/pages/_culture.scss index 74b03939745..e9a39259065 100644 --- a/sites/www/lib/styles/pages/_culture.scss +++ b/sites/www/lib/styles/pages/_culture.scss @@ -1,7 +1,7 @@ body.culture { section.hero { - background-image: linear-gradient(35deg, #DCF5FF 50%, #F3FCFF 90%); + background-image: var(--grad-blue-light-35); .container { > h2 { @@ -23,7 +23,7 @@ body.culture { } } } - + #feature-columns { .feature-columns { > div { @@ -33,7 +33,7 @@ body.culture { } #code { - background-image: linear-gradient(35deg, #DCF5FF 10%, #F3FCFF 60%); + background-image: linear-gradient(35deg, #dcf5ff 10%, #f3fcff 60%); padding: var(--gutter-xl) 0; > .container { diff --git a/sites/www/lib/styles/pages/_developers.scss b/sites/www/lib/styles/pages/_developers.scss deleted file mode 100644 index ae3bdf79d58..00000000000 --- a/sites/www/lib/styles/pages/_developers.scss +++ /dev/null @@ -1,38 +0,0 @@ -body.developers { - - section.hero { - background-image: var(--grad-blue-green-145); - } - - #feature-grid { - --lt-blue: #196BD4; - --dk-blue: #1783E1; - - background-color: var(--primary); - background-image: - linear-gradient( - to bottom, - var(--lt-blue) 20%, - transparent 60% - ), - radial-gradient( - ellipse at -50% -150%, - transparent 80%, - var(--lt-blue) 80% - ), - linear-gradient( - 145deg, - var(--lt-blue) 0%, - var(--dk-blue) 60% - ); - } - - #stories { - hgroup { - h2 { - max-width: 650px; - } - } - } - -} diff --git a/sites/www/lib/styles/pages/_development.scss b/sites/www/lib/styles/pages/_development.scss index e123811065c..41fee520a96 100644 --- a/sites/www/lib/styles/pages/_development.scss +++ b/sites/www/lib/styles/pages/_development.scss @@ -134,10 +134,6 @@ body.development { } } - #notification.module { - padding-bottom: 0; - } - /* iOS */ &.ios { .partial-border { @@ -152,7 +148,7 @@ body.development { position: absolute; left: 50%; transform: translate(-50%, -50%); - bottom: 0px; + bottom: 0; @include breakpoints.screen(lg) { width: 60%; @@ -326,6 +322,13 @@ body.development { max-height: 80%; /* Max height for items */ object-fit: contain; /* Ensure items are contained within their bounds */ + /* How far the side cards travel from the center. */ + --carousel-shift: 93%; + + @include breakpoints.screen(sm) { + --carousel-shift: 100%; + } + animation-name: carouselRotate3D; animation-duration: 10s; animation-iteration-count: infinite; @@ -835,26 +838,22 @@ body.development { } .container { - /* margin: 200px auto; */ - min-height: 75vh; display: flex; flex-direction: column; justify-content: center; gap: var(--gutter); - &.has-subtitle { justify-content: flex-start; - margin-bottom: 100px + margin-bottom: 100px; } - - + @include breakpoints.screen(sm) { gap: var(--gutter-lg); - + &.has-subtitle { - margin-bottom: 200px + margin-bottom: 200px; } } } @@ -869,21 +868,6 @@ body.development { z-index: -1; } - /* .video-container { - .title { - margin-top: var(--gutter-md); - } - - position: absolute; - top: 0; - width: 100%; - height: 100%; - - .container { - max-width: 90%; - } - } */ - .embed-container { border-radius: 30px; } @@ -893,15 +877,15 @@ body.development { @keyframes carouselRotate3D { 0% { /* Center State */ - transform: translate(-50%, -50%) translateX(0%) translateZ(0px) scale(1); + transform: translate(-50%, -50%) translateX(0%) translateZ(0) scale(1); opacity: 1; z-index: 3; } 25% { /* Right State */ - transform: translate(-50%, -50%) translateX(93%) translateZ(-100px) - scale(0.95); + transform: translate(-50%, -50%) translateX(var(--carousel-shift)) + translateZ(-100px) scale(0.95); opacity: 1; z-index: 2; } @@ -916,7 +900,8 @@ body.development { 75% { /* Left State */ - transform: translate(-50%, -50%) translateX(-93%) translateZ(-100px) + transform: translate(-50%, -50%) + translateX(calc(var(--carousel-shift) * -1)) translateZ(-100px) scale(0.95); opacity: 1; z-index: 2; @@ -924,50 +909,8 @@ body.development { 100% { /* Loop back to Center State */ - transform: translate(-50%, -50%) translateX(0%) translateZ(0px) scale(1); + transform: translate(-50%, -50%) translateX(0%) translateZ(0) scale(1); opacity: 1; z-index: 3; } } - -@include breakpoints.screen(sm) { - @keyframes carouselRotate3D { - 0% { - /* Center State */ - transform: translate(-50%, -50%) translateX(0%) translateZ(0px) scale(1); - opacity: 1; - z-index: 3; - } - - 25% { - /* Right State */ - transform: translate(-50%, -50%) translateX(100%) translateZ(-100px) - scale(0.95); - opacity: 1; - z-index: 2; - } - - 50% { - /* Back State */ - transform: translate(-50%, -50%) translateX(0%) translateZ(-200px) - scale(0.85); - opacity: 1; - z-index: 1; - } - - 75% { - /* Left State */ - transform: translate(-50%, -50%) translateX(-100%) translateZ(-100px) - scale(0.95); - opacity: 1; - z-index: 2; - } - - 100% { - /* Loop back to Center State */ - transform: translate(-50%, -50%) translateX(0%) translateZ(0px) scale(1); - opacity: 1; - z-index: 3; - } - } -} diff --git a/sites/www/lib/styles/pages/_ecosystem.scss b/sites/www/lib/styles/pages/_ecosystem.scss index 708e035dcb9..72c9a41ad47 100644 --- a/sites/www/lib/styles/pages/_ecosystem.scss +++ b/sites/www/lib/styles/pages/_ecosystem.scss @@ -1,17 +1,9 @@ body.ecosystem { - section.hero { background: var(--grad-red-blue-35); } - /* #everyone { - background-image: var(--grad-liteyellow-blue); - } */ - - #consultants-feature { - background: var(--grad-liteyellow-blue); - } - + #consultants-feature, #consultants-packages { background: var(--grad-liteyellow-blue); } diff --git a/sites/www/lib/styles/pages/_events.scss b/sites/www/lib/styles/pages/_events.scss index b97a7a4967b..37f1f3b332e 100644 --- a/sites/www/lib/styles/pages/_events.scss +++ b/sites/www/lib/styles/pages/_events.scss @@ -5,208 +5,36 @@ body.events { background-image: var(--grad-blue-yellow-35); } - #notification.module { - background-color: var(--grey-1); - } - - .carousel-featured-card { - &.flutter-apprentice .text { - background-color: var(--blue-7); - } - - &.flutter-engage .text { - background-color: var(--blue-4); - } - } - #newsletter { margin-top: var(--gutter-lg); } .event_image_container { - width: 100%; - position: relative; - padding-bottom: 56.25%; - /* Maintain a 16:9 aspect ratio (adjust as needed for other ratios) */ - overflow: hidden; - margin-bottom: var(--gutter-sm); background-color: var(--grey-1); border-radius: 2%; + margin-bottom: var(--gutter-sm); + overflow: hidden; + padding-bottom: 56.25%; + position: relative; + width: 100%; - >img { - position: absolute; - top: 0; - left: 0; - width: 100%; + > img { height: 100%; + left: 0; object-fit: contain; object-position: center; - } - } - - /* Override story detail defaults */ - &.event-detail { - .story-detail { - >h1 { - margin-bottom: var(--spacer-md); - } - - >h2 { - font-size: var(--font-size-heading-3); - max-width: 725px; - } - - .story-logo { - padding: 35px; - - img { - position: relative; - top: -6px; - left: -3px; - } - } - - .story-body { - max-width: 950px; - margin: 0 auto; - } - - .story-cta-button { - margin-bottom: 3rem; - position: relative; - top: -1rem; - - a.btn { - height: 50px; - padding: 0 var(--gutter); - font-size: var(--font-size-heading-5); - } - } - } - - &.event-challenge { - .story-detail { - >h1 { - max-width: 90% !important; - } - } - } - - #winners, - #mentions, - #sessions { - hgroup { - margin-bottom: var(--gutter-sm); - } - } - - #winners, - #sessions { - background-color: var(--grey-1); - } - - .event-sessions, - .event-winners { - display: grid; - column-gap: var(--gutter); - row-gap: var(--gutter-md); - text-align: left; - padding: var(--spacer) 0; - - .event-session, - .event-winner { - img { - margin-bottom: 16px; - width: 100%; - } - - h3 { - margin-bottom: 10px; - font-size: 16px; - line-height: 1.4; - /* tighter */ - text-align: center; - - span { - font-weight: var(--font-weight-normal); - color: var(--grey-6); - } - } - - h4 { - margin-bottom: var(--spacer-sm); - font-size: var(--font-size-heading-3); - line-height: 1.1; - /* tighter */ - max-width: 90%; - } - - p { - font-size: var(--font-size-heading-5); - } - - a:hover { - - h4, - p { - color: var(--primary); - } - } - } - - @include breakpoints.screen(md) { - grid-template-columns: repeat(2, 1fr); - } - - @include breakpoints.screen(lg) { - grid-template-columns: repeat(3, 1fr); - } - } - - .other-sessions, - .event-mentions { - padding: var(--spacer) 0; - - ul { - column-count: 1; - line-height: 1.5; - - li { - margin-bottom: 12px; - font-size: var(--font-size-heading-5); - - a { - color: var(--primary); - - &:hover { - text-decoration: underline; - } - } - } - } - - @include breakpoints.screen(md) { - ul { - column-count: 2; - } - } - - @include breakpoints.screen(lg) { - ul { - column-count: 3; - } - } + position: absolute; + top: 0; + width: 100%; } } #stories { .story-grid-header { + align-items: flex-end; display: flex; flex-direction: column; - align-items: flex-end; - // The shared `.story-grid-header` rule in `components/_stories.scss` - // only sizes `h3` headings, so size these ones here. h2 { font-size: var(--font-size-heading-2); margin-bottom: var(--gutter-sm); @@ -219,6 +47,10 @@ body.events { } @include breakpoints.screen(md) { + align-items: normal; + flex-direction: row; + justify-content: space-between; + h2 { margin-bottom: var(--gutter-md); text-align: left; @@ -227,35 +59,26 @@ body.events { .dropdown { margin-bottom: 0; } - - flex-direction: row; - align-items: normal; - justify-content: space-between; } } - .story-item { - .text { - div { - margin-bottom: var(--gutter-sm); - display: flex; - gap: 1rem; + .story-item .text div { + display: flex; + gap: 1rem; + margin-bottom: var(--gutter-sm); - span { - display: flex; - align-items: center; + span { + align-items: center; + display: flex; - img { - height: 15px; - max-width: 12px; - margin: 0; - margin-bottom: 2px; - } + img { + height: 15px; + margin: 0 0 2px; + max-width: 12px; + } - label { - text-wrap: nowrap; - } - } + label { + text-wrap: nowrap; } } } diff --git a/sites/www/lib/styles/pages/_flip.scss b/sites/www/lib/styles/pages/_flip.scss new file mode 100644 index 00000000000..8b7e55918ea --- /dev/null +++ b/sites/www/lib/styles/pages/_flip.scss @@ -0,0 +1,187 @@ +@use '../core/breakpoints'; + +body.flip #banner { + align-items: center; + display: flex; + flex-direction: column; + height: 1027px; + justify-content: flex-end; + + .embed-container { + height: 100%; + max-height: 600px; + max-width: 1075px; + padding: 0 var(--gutter-sm); + width: 100%; + + iframe { + position: static; + } + } + + .hero-details { + align-items: center; + display: flex; + flex-direction: column; + gap: var(--gutter-sm); + justify-content: space-between; + margin: 54px 0 69px; + + p { + color: white; + font-size: var(--font-size-heading-5); + max-width: 579px; + text-align: center; + } + } +} + +body.flip #story .story-detail { + padding: 0; + + .tabs { + .tabs-content { + margin: 64px auto; + max-width: 1112px; + } + + .tab-content { + @include breakpoints.screen(lg) { + margin-top: 116px; + } + + &.active { + display: block; + } + + #home.module { + padding: 0; + + .features.container { + width: 100%; + } + + .stacked-feature { + hgroup { + align-items: flex-start; + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: var(--spacer-md); + padding: 0; + text-align: left; + width: fit-content; + } + + .overview { + align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: 120px; + position: static; + + @include breakpoints.screen(lg) { + margin-bottom: 160px; + + &:nth-child(odd) { + flex-direction: row; + + .overview-content { + margin-left: 82px; + } + } + + &:nth-child(even) { + flex-direction: row-reverse; + + .overview-content { + margin-right: 82px; + } + } + } + + .overview-content { + align-items: flex-start; + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-between; + margin-top: 60px; + padding: 0; + text-align: left; + + @include breakpoints.screen(lg) { + margin-top: 0; + } + + h1 { + font-size: var(--font-size-heading-1); + line-height: 55px; + + @include breakpoints.screen(lg) { + font-size: 64px; + line-height: 72px; + } + } + + h4.eyebrow.faqs { + color: var(--violet-4); + margin-bottom: 16px; + } + + p { + margin: 0; + padding: 0; + } + + .btn { + margin-top: var(--spacer-md); + } + } + } + } + } + + #faqs.module { + .features.container { + margin: 0; + } + + .stacked-feature { + > hgroup { + margin: 0 0 var(--gutter-lg); + max-width: fit-content; + padding: 0; + text-align: left; + width: 100%; + } + + .feature { + align-items: flex-start; + border-bottom: 1px solid var(--grey-3); + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: var(--spacer); + padding: 0; + + &:last-child { + border-bottom: 0; + padding-bottom: 0; + } + + h3 { + margin: 0; + } + + p { + margin: var(--gutter-sm) 0 0; + padding: 0 0 var(--spacer); + } + } + } + } + } + } +} diff --git a/sites/www/lib/styles/pages/_games.scss b/sites/www/lib/styles/pages/_games.scss index 2482d9b1814..119616ae6f7 100644 --- a/sites/www/lib/styles/pages/_games.scss +++ b/sites/www/lib/styles/pages/_games.scss @@ -1,10 +1,6 @@ @use '../core/breakpoints'; body.games { - #notification.module { - background-color: var(--blue-10); - } - section.hero { --mobile-header-max-height: 360px; --desktop-header-max-height: 460px; @@ -750,7 +746,7 @@ body.games { h2 { color: var(--grey-1); } - + @include breakpoints.screen(lg) { padding: var(--gutter-lg) 0; } @@ -1144,10 +1140,6 @@ body.games { } } - #notification.module { - padding-bottom: 0; - } - .carousel .carousel-progress { margin-top: 0; } diff --git a/sites/www/lib/styles/pages/_home.scss b/sites/www/lib/styles/pages/_home.scss index 52c0f2a52f0..1b8f84e1744 100644 --- a/sites/www/lib/styles/pages/_home.scss +++ b/sites/www/lib/styles/pages/_home.scss @@ -7,17 +7,17 @@ body.home { overflow: hidden; /** PALETTE - tl #9D9AF1 rgba(157, 154, 241, 1) - tr #71C7EE rgba(113, 199, 238, 1) - br #3282DA rgba(50, 130, 218, 1) - bl #4D85F4 rgba(77, 133, 244, 1) - top #3680F6 rgba(54, 128, 246, 1) - bottom #1A68D3 rgba(26, 104, 211, 1) - center #1A68D3 rgba(26, 104, 211, 1) - shape #BFC2F4 + tl #9d9af1 rgba(157, 154, 241, 1) + tr #71c7ee rgba(113, 199, 238, 1) + br #3282da rgba(50, 130, 218, 1) + bl #4d85f4 rgba(77, 133, 244, 1) + top #3680f6 rgba(54, 128, 246, 1) + bottom #1a68d3 rgba(26, 104, 211, 1) + center #1a68d3 rgba(26, 104, 211, 1) + shape #bfc2f4 */ background-color: #1a68d3; - background-image: + background-image: /* Top down */ /* Blue glow upward from bottom center */ radial-gradient( ellipse at bottom, @@ -48,28 +48,14 @@ body.home { --anim-delay-2: 100ms; --anim-offset: 400px; - @keyframes slideup { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - top: 0; - } - } - h1 { color: white; position: relative; top: 110px; opacity: 0; margin-bottom: 80px; - animation-duration: var(--anim-dur); - animation-delay: var(--anim-delay-2); - animation-name: slideup; - animation-iteration-count: 1; - animation-timing-function: var(--ui-anim-func); - animation-fill-mode: forwards; + animation: marketing-slide-up var(--anim-dur) var(--ui-anim-func) + var(--anim-delay-2) forwards; } h2 { @@ -119,16 +105,6 @@ body.home { } } - @keyframes slideup-center { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - top: 0; - } - } - .inner-fixed { display: grid; grid-template-columns: 1fr var(--center-width) 1fr; @@ -157,7 +133,7 @@ body.home { .col-center { animation-duration: var(--anim-dur); animation-delay: var(--anim-delay-2); - animation-name: slideup-center; + animation-name: marketing-slide-up; animation-iteration-count: 1; animation-timing-function: var(--ui-anim-func); animation-fill-mode: forwards; @@ -171,7 +147,7 @@ body.home { height: var(--center-card-height); width: 100%; border-radius: var(--center-border-radius); - box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.35); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); } } @@ -242,13 +218,8 @@ body.home { } } - #notification { - padding-top: var(--gutter); - padding-bottom: 0 !important; - } - #tabs { - padding-bottom: 00px; + padding-bottom: 0; .tabs-header { margin-bottom: 50px; diff --git a/sites/www/lib/styles/pages/_integrations.scss b/sites/www/lib/styles/pages/_integrations.scss index 533d8d7575b..98be4ee95ec 100644 --- a/sites/www/lib/styles/pages/_integrations.scss +++ b/sites/www/lib/styles/pages/_integrations.scss @@ -1,5 +1,5 @@ body.integrations { section.hero { - background-image: linear-gradient(35deg, #F3FCFF 10%, #93FAEE 80%); + background-image: var(--grad-blue-green-35); } } diff --git a/sites/www/lib/styles/pages/_learn.scss b/sites/www/lib/styles/pages/_learn.scss deleted file mode 100644 index bbcf6ab1e20..00000000000 --- a/sites/www/lib/styles/pages/_learn.scss +++ /dev/null @@ -1,99 +0,0 @@ -body.learn { - - section.hero { - background-image: var(--grad-violet-blue-35); - } - - .learn-tabs { - padding-top: var(--gutter); - margin-bottom: var(--gutter-md); - - .tabs { - padding-bottom: var(--gutter-lg); - border-bottom: 1px solid var(--grey-4); - } - } - - .learn-stage-grid { - padding: 0; - - .feature-grid-features { - > div { - padding: var(--gutter-sm); - - &:hover { - box-shadow: none !important; - } - - i { - background-repeat: no-repeat; - background-color: #e7f8ff; - width: 68px; - height: 68px; - display: inline-block; - border-radius: 100%; - margin-bottom: var(--gutter-sm); - } - - h4 { - padding-bottom: var(--spacer-md); - margin-bottom: var(--spacer-md); - font-size: var(--font-size-heading-3); - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - min-height: 100px; - } - - ul { - text-align: left; - list-style: none; - padding-left: var(--gutter-sm); - font-size: var(--font-size-heading-4); - line-height: 1.4; - color: var(--grey-6); - - li { - margin-bottom: 14px; - position: relative; - - a { - color: var(--primary); - - &:hover { - text-decoration: underline; - } - } - } - - li:not(.nested):before { - position: absolute; - top: -2px; - left: -1.2rem; - content: '\2022'; - font-size: 1.2rem; - color: var(--grey-6); - } - } - } - } - } - - #transition-docs { - background-image: linear-gradient(35deg, #F5FBFE 50%, #FCFCE2 90%);; - } - - #cookbook { - background-image: var(--grad-violet-blue-35); - - .features { - margin-bottom: 0; - } - } - - .carousel-section { - padding-top: var(--gutter-lg); - } - - #start-learning { - padding-top: var(--gutter-lg); - } -} diff --git a/sites/www/lib/styles/pages/_majorEvents.scss b/sites/www/lib/styles/pages/_majorEvents.scss deleted file mode 100644 index 6d45277afb7..00000000000 --- a/sites/www/lib/styles/pages/_majorEvents.scss +++ /dev/null @@ -1,1632 +0,0 @@ -@use '../core/breakpoints'; - -#banner { - display: flex; - flex-direction: column; - justify-content: flex-end; - align-items: center; - - height: 1027px; - - .embed-container { - width: 100%; - height: 100%; - max-width: 1075px; - max-height: 600px; - - padding: 0 var(--gutter-sm); - - iframe { - position: static; - } - } - - .hero-details { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - gap: var(--gutter-sm); - - margin-top: 54px; - margin-bottom: 69px; - - .btn.secondary { - background-color: white; - border: none; - - &:hover { - color: var(--primary); - } - } - - p { - color: white; - text-align: center; - font-size: var(--font-size-heading-5); - max-width: 579px; - } - } -} - -#story { - .story-detail { - width: initial; - max-width: initial; - padding: initial; - - ul { - margin-left: var(--gutter); - margin-bottom: 0; - - a { - color: revert; - text-decoration: underline; - } - } - - .tabs { - --anim-offset: 200px; - - @keyframes slideup { - 0% { opacity: 0; } - 100% { opacity: 1; top: 0px } - } - - .modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 100; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - .modal-inner { - position: relative; - - width: 312px; - padding: 0px; - - border-radius: 10px; - background: white; - box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25); - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - .modal-media { - flex: 50%; - - .modal-img { - height: 320px; - object-fit: cover; - border-radius: 10px 10px 0 0; - } - - .modal-inner-close { - position: absolute; - top: 16px; - right: 16px; - cursor: pointer; - } - } - - .modal-body { - flex: 50%; - - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - gap: 12px; - - width: 100%; - padding: 24px; - - > h5, h3, p, a { - margin: 0; - padding: 0; - } - - > h5 { - color: #13C2AD; - } - - > a { - > h5 { - margin-right: 8px; - } - } - } - } - } - - .tabs-header { - margin-bottom: 64px; - flex-direction: row; - display: inherit; - } - - .tabs-menu ul { - background-color: white; - text-align: center; - display: flex; - overflow: scroll; - gap: 8px; - } - - ul::-webkit-scrollbar { - display: none; - } - - ul { - padding: 0; - - border-radius: 0; - - > a { - flex: none; - - margin-bottom: 0; - border: none; - - &:hover { - background-color: var(--grey-3); - color: var(--grey-6); - } - - &.active { - background-color: var(--blue-6); - color: white; - } - } - } - - .tabs-content { - max-width: 1112px; - margin: 64px auto; - } - - .tab-content { - display: none; - top: var(--anim-offset); - opacity: 0; - position: relative; - - &.no-spy { - top: 0; - } - - &.active { - display: block; - animation-duration: 600ms; - animation-delay: 0ms; - animation-name: slideup; - animation-iteration-count: 1; - animation-timing-function: var(--ui-anim-func); - animation-fill-mode: forwards; - } - - #home.module { - padding: 0; - - .features.container { - width: 100%; - } - - .stacked-feature { - .overview { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - position: static; - margin-bottom: 120px; - - .overview-content { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - text-align: left; - margin-top: 60px; - padding: 0; - flex: 50%; - - > hgroup { - margin-bottom: 32px; - } - - h1 { - font-size: 46px; - line-height: 55px; - } - - h4.eyebrow.faqs { - color: var(--violet-4); - margin-bottom: 16px; - } - - p { - margin: 0; - padding: 0; - } - - .btn { - margin-top: 32px; - } - } - } - - .on-demand { - .overview-content { - p { - margin-bottom: 40px !important; - } - } - - .btn { - height: 50px; - font-size: 16px; - } - } - - .holo-booth { - .overview-content { - .btn.primary { - background: linear-gradient(91.87deg, #4100E0 0.1%, #F8BBD0 120.1%); - box-shadow: 1px 6px 16px rgba(148, 85, 217, 0.24); - border: none; - padding: 13px 48px; - } - } - } - - .flutter-forward-extended { - .overview-content { - width: 100%; - } - - .btn { - height: 50px; - font-size: 16px; - } - - p { - font-size: 24px; - line-height: 32px; - } - } - - .get-involved { - .overview-content { - .get-involved-link { - margin-bottom: 0; - } - } - } - - hgroup { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - text-align: left; - padding: 0; - width: fit-content; - } - - .feature { - margin-top: 100px; - padding: 0; - - h3, p { - margin: 0; - padding: 0; - text-align: left; - } - - p { - margin-top: 24px; - } - } - } - } - - #faqs.module { - .features.container { - margin: 0; - } - - .stacked-feature { - > hgroup { - margin: 0 0 112px 0; - padding: 0; - - width: 100%; - max-width: fit-content; - - text-align: left; - } - - .feature { - margin-top: 40px; - padding: 0; - - border-bottom: 1px solid var(--grey-3); - &:last-child { - border-bottom: none; - padding-bottom: 0; - } - - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - - h3 { - margin: 0; - } - - p { - margin: 24px 0 0 0; - padding: 0 0 40px 0; - } - - /* This line is necessary due to Wagtail's Richtext editor adding empty p tags. */ - p:empty { - display: none; - } - } - } - } - - #schedule.module { - padding: 0; - - .features.container { - width: fit-content; - } - - .stacked-feature-banner { - position: static; - display: flex; - flex-direction: column-reverse; - justify-content: space-between; - align-items: flex-start; - - > hgroup { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - text-align: left; - - width: 90%; - max-width: 90%; - margin-top: 60px; - margin-bottom: 16px; - padding-left: 0; - - h1 { - font-size: 46px; - line-height: 55px; - } - - h4.eyebrow.faqs { - color: var(--violet-4); - } - - p { - font-size: var(--font-size-heading-4); - } - } - } - - .feature { - .schedule-section { - margin-top: 64px; - - p { - margin-bottom: 0; - } - - .btn.quiet.workshop-nav { - margin-top: 16px; - margin-bottom: 80px; - padding: 0; - color: var(--primary); - text-decoration: underline; - text-align: left; - font-size: var(--font-size-heading-4); - } - } - - padding: 0; - text-align: left; - - h1 { - font-size: 36px; - line-height: 40px; - } - - p { - margin-top: 16px; - padding: 0; - } - - h2 { - margin: 64px 0; - font-size: 34px; - line-height: 40px; - font-weight: var(--font-weight-normal); - } - - .schedule-container { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - border-bottom: 1px solid var(--grey-3); - - - .schedule-subsection { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - - margin-bottom: 64px; - - h3 { - font-size: 28px; - line-height: 34px; - font-weight: var(--font-weight-normal); - color: var(--grey-6); - margin: 0 0 8px 0; - min-width: 198px; - } - - p { - font-size: 20px; - line-height: 30px; - color: var(--grey-6); - - margin: 24px 0; - } - - h4 { - font-size: 20px; - line-height: 24px; - font-weight: var(--font-weight-normal); - color: var(--grey-6); - } - - ul { - margin-top: 16px; - - > p { - font-size: 16px; - line-height: 24px; - font-weight: var(--font-weight-bold);; - color: var(--grey-6); - - margin: 8px 0; - } - } - } - } - } - } - - #on-demand.module { - .stacked-feature { - .overview { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - gap: 80px; - position: static; - margin-bottom: 120px; - - .overview-content { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - text-align: left; - padding: 0; - flex: 50%; - - > hgroup { - margin-bottom: 32px; - } - - h1 { - font-size: 46px; - line-height: 55px; - } - - h4.eyebrow.faqs { - color: var(--violet-4); - } - - p { - margin: 0 0 32px 0; - padding: 0; - font-size: 24px; - } - - .btn.primary { - margin-top: 8px; - } - } - - .embed-container { - position: static; - width: 100%; - height: 286px; - margin: 0; - padding: 0; - - > iframe { - position: relative; - width: 100%; - height: 100%; - object-fit: cover; - } - } - - &.on-demand-demo { - margin-top: 150px; - margin-bottom: 0; - - .overview-content { - hgroup { - margin: 0; - } - - a { - height: 50px; - } - - p { - margin: 0; - } - - gap: 40px; - } - - .img-container { - flex: 50%; - height: 375px; - - > img { - height: 100%; - width: 100%; - object-fit: cover; - } - } - } - } - - hgroup { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - text-align: left; - padding: 0; - width: fit-content; - } - - .feature { - display: block; - margin-top: 100px; - padding: 0; - - h3, p { - margin: 0; - padding: 0; - text-align: left; - } - - p { - margin-top: 24px; - } - - .on-demand-section-container { - display: flex; - flex-direction: column; - align-items: center; - - margin-top: 48px; - - .on-demand-grid { - display: grid; - grid-template-columns: 1fr; - grid-gap: 24px; - - margin-top: 24px; - - .on-demand-card { - display: flex; - flex-direction: column; - align-items: center; - - border: 1px solid var(--grey-3); - border-radius: 4px; - - .embed-container { - position: static; - width: 100%; - min-height: 239px; - margin: 0; - padding: 0; - - > iframe { - position: relative; - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .card-content { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 12px; - - padding: 32px 48px 32px 32px; - - h3 { - font-size: 28px; - line-height: 34px; - font-weight: var(--font-weight-bold); - } - - p { - margin: 0; - font-size: 16px; - color: var(--grey-6); - } - } - } - } - - h3 { - font-size: 46px; - font-weight: var(--font-weight-normal); - color: rgba(0, 0, 0, 1); - } - } - } - } - } - - #community.module { - padding: 0; - - .community-header { - display: flex; - flex-direction: column-reverse; - justify-content: space-between; - align-items: center; - } - - hgroup { - display: flex; - flex-direction: column; - align-items: flex-start; - min-width: 300px; - text-align: left; - width: min-content; - margin-top: 60px; - } - - .eyebrow { - color: var(--violet-4); - } - - .community-section { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - - margin-top: 100px; - margin-bottom: 100px; - padding-bottom: 100px; - border-bottom: 1px solid var(--grey-3); - - #map { - width: 100%; - padding: 0; - - .map { - background-color: #eee; - width: 100%; - height: 700px; - - .cluster img { - width: 100% !important; - height: 100% !important; - } - - .map-info-window { - padding: 4px; - max-width: 354px; - text-align: left; - - h5 { - font-size: 16px; - line-height: 20px; - font-weight: var(--font-weight-normal); - color: rgba(0, 0, 0, 1); - margin-bottom: 14px; - } - - h3 { - font-size: 24px; - line-height: 30px; - font-weight: var(--font-weight-normal); - color: rgba(0, 0, 0, 1); - } - - p { - font-size: 14px; - line-height: 20px; - font-weight: var(--font-weight-normal); - margin: 0; - padding: 0; - } - - .btn { - &.quiet { - color: var(--primary); - font-size: 18px; - line-height: 20px; - font-weight: var(--font-weight-normal); - margin: 12px 0 0 0; - padding: 0; - } - } - } - } - } - - > h1 { - font-weight: var(--font-weight-normal); - } - - > p { - text-align: justify; - margin-top: 24px; - margin-bottom: 80px; - padding: 0; - } - - .collapsible-container { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: repeat(6, 1fr); - grid-auto-rows: 0; - grid-gap: 32px; - - &.expanded { - grid-auto-rows: auto auto; - } - - .qa-card { - padding: 48px; - border: 1px solid var(--grey-3); - max-width: 346px; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - > h3 { - font-weight: var(--font-weight-normal); - } - - > p { - font-weight: var(--font-weight-normal); - font-size: var(--font-size-heading-4); - line-height: 24px; - text-align: center; - margin: 0; - padding: 0; - } - - .btn { - &.quiet { - margin-top: 40px; - font-size: 16px; - color: var(--primary); - } - } - } - - .qa-card:nth-child(n + 7) { - display: none; - - &.expanded { - display: block; - } - } - } - - .btn { - &.quiet { - margin-top: 32px; - - > p, i { - margin: 0 12px 0 0; - padding: 0; - font-size: var(--font-size-heading-3); - color: var(--primary); - } - - &:hover { - color: var(--primary) !important; - } - } - } - } - } - - #twitter.module { - padding: var(--gutter-sm) 0; - display: flex; - flex-direction: column; - justify-content: space-between; - - .text { - text-align: left; - flex: 25%; - padding: 0; - max-width: 352px; - - h3 { - margin: 0 0 16px 0; - font-size: 36px; - line-height: 60px; - } - } - - .media { - flex: 75%; - max-width: 646px; - } - - .social-icons { - margin-bottom: var(--gutter); - display: flex; - gap: 16px; - } - } - - #seventeen-days-of-flutter.module { - padding: 0; - - .features.container { - width: fit-content; - } - - .stacked-feature { - .explore { - display: flex; - flex-direction: column-reverse; - justify-content: space-between; - align-items: center; - position: static; - margin-bottom: 120px; - - .explore-content { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - text-align: left; - margin-top: 60px; - padding: 0; - flex: 50%; - - > hgroup { - margin-bottom: 32px; - } - - h1 { - font-size: 46px; - line-height: 55px; - } - - h4.eyebrow.faqs { - color: var(--violet-4); - } - - p { - margin: 0 0 32px 0; - padding: 0; - } - - .btn.primary { - margin-top: 8px; - } - } - } - - hgroup { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - text-align: left; - padding: 0; - width: fit-content; - } - - .feature { - margin-top: 100px; - padding: 0; - - h3, p { - margin: 0; - padding: 0; - text-align: left; - } - - p { - margin-top: 24px; - } - } - } - - .content-cards { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 24px; - - div { - width: 312px; - height: 320px; - background: #041e3c; - border-radius: 20px; - position: relative; - display: flex; - overflow: hidden; - background-image: linear-gradient( - 359.97deg, - rgba(58, 241, 215, 0.53) 0.03%, - rgba(4, 30, 60, 0) 22.5% - ); - - &:hover { - cursor: pointer; - box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25); - background-image: linear-gradient( - 359.97deg, - rgba(58, 241, 215, 0.53) 0.03%, - rgba(4, 30, 60, 0) 66.5% - ); - - > img { - transform: scale(1.5); - opacity: 0; - } - - > h3 { - opacity: 1; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - - &.today-card { - border: solid 8px #F9E84C; - } - - &.locked-card{ - background-image: linear-gradient(359.97deg, #502c69 0.03%, rgba(4, 30, 60, 0) 66.5%); - cursor: initial; - } - - > img { - border-radius: 20px; - object-fit: cover; - transition: transform 0.3s cubic-bezier(.47,1.64,.41,.8), opacity 0.2s ease-in-out; - } - - > h3 { - width: 100%; - opacity: 0; - position: absolute; - top: 70%; - left: 50%; - transform: translate(-50%, -50%); - transition: top 0.5s cubic-bezier(.47,1.64,.41,.8), opacity 0.2s ease-in-out; - - color: white; - font-size: 40px; - line-height: 60px; - } - - .day-badge { - width: fit-content; - height: fit-content; - min-width: 80px; - min-height: 80px; - padding: 21px 14px; - - background-color: #27F5DD; - border-radius: 12px; - - position: absolute; - bottom: 8px; - right: 8px; - - display: flex; - justify-content: center; - align-items: center; - - font-size: 40px; - line-height: 34px; - font-weight: var(--font-weight-bold); - color: #041e3c; - - img { - transition: none; - transform: none; - opacity: 1; - } - - &.today { - background: #F9E84C; - border-radius: 12px 0; - bottom: 0; - right: 0; - } - - &.locked { - background: #041e3c; - color: white; - - &:hover { - cursor: initial; - } - } - - &:hover { - box-shadow: none; - } - } - } - } - } - } - } - - #guidelines.module, #workshop-details.module { - padding: 0; - - .container { - .guidelines-nav, .workshop-details-nav { - display: flex; - margin-bottom: 27px; - - .btn { - &.quiet { - color: var(--primary); - font-size: var(--font-size-heading-5); - - > i { - margin-right: 5px; - } - } - } - } - - .guidelines-header, .workshop-details-header { - display: flex; - flex-direction: column-reverse; - justify-content: space-between; - align-items: center; - padding: 0 28px; - margin-bottom: 40px; - - hgroup { - display: flex; - flex-direction: column; - align-items: flex-start; - min-width: 300px; - text-align: left; - width: min-content; - margin-top: 60px; - - .eyebrow { - color: var(--violet-4); - } - } - } - - .guidelines-body, .workshop-details-body { - .text-block { - margin-top: 48px; - margin-bottom: 48px; - padding-bottom: 48px; - border-bottom: 1px solid var(--grey-3); - - &:last-child { - border-bottom: none; - margin: 0; - padding: 0; - } - - h2 { - margin-bottom: 32px; - - text-align: left; - font-weight: var(--font-weight-bold); - font-size: 28px; - line-height: 34px; - } - - p { - padding: 0; - - font-weight: var(--font-weight-normal); - font-size: 16px; - line-height: 24px; - margin-bottom: 0; - color: var(----grey-6); - } - - a { - color: #1389FD; - } - - ul { - margin: 0; - padding: 0; - margin-left: 12px; - - font-size: var(--font-size-heading-5); - } - - &.columns { - display: grid; - grid-template-columns: 1fr 1fr; - - h2, ul { - grid-column: span 2; - } - } - } - } - } - } - - #workshop-details.module { - .container { - .workshop-details-body { - .text-block { - text-align: left; - max-width: 800px; - - b { - font-size: 16px; - } - - a { - text-decoration: underline; - } - } - } - - .workshop-details-body { - .text-block { - border: none; - - &:last-child { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - margin-bottom: 52px; - padding-bottom: 48px - } - } - } - } - - .btn { - &.quiet { - padding: 0; - } - } - } - } -} - -@include breakpoints.screen(lg) { - #story { - .story-detail { - .tabs { - - .modal { - .modal-inner { - width: 532px; - } - } - - .tabs-menu ul { - justify-content: center; - } - - .tab-content { - - margin-top: 116px; - - #home.module { - .stacked-feature { - .overview { - margin-bottom: 160px; - - .overview-content { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - text-align: left; - margin-top: 0; - padding: 0; - flex: 50%; - - > hgroup { - margin-bottom: 32px; - } - - h1 { - font-size: 64px; - line-height: 72px; - } - - h4.eyebrow.faqs { - color: var(--violet-4); - } - - p { - margin: 0; - padding: 0; - } - - .btn { - margin-top: 32px; - } - } - } - - .overview:nth-child(odd) { - flex-direction: row; - - .overview-content { - margin-left: 82px; - } - } - - .overview:nth-child(even) { - flex-direction: row-reverse; - - .overview-content { - margin-right: 82px; - } - } - - .holo-booth { - flex-direction: row-reverse; - align-items: flex-start; - gap: 82px; - - .img-container { - flex: 50%; - height: 375px; - } - - .overview-content { - flex: 50%; - margin-left: 0; - } - } - - .holo-booth { - flex-direction: row-reverse; - align-items: center; - gap: 82px; - - .img-container { - flex: 50%; - height: 375px; - } - - .overview-content { - flex: 50%; - margin-left: 0; - } - } - - .flutter-forward-extended { - p { - width: 515px; - } - } - - .get-involved { - flex-direction: row-reverse; - align-items: flex-start; - gap: 63px; - - .overview-content { - flex: 50%; - margin-left: 0; - } - } - } - } - - #schedule.module { - .stacked-feature-banner { - flex-direction: row; - justify-content: space-between; - - > hgroup { - max-width: 885px; - margin: 0 24px 120px 0; - - h1 { - font-size: 64px; - line-height: 72px; - } - } - } - - .feature { - .schedule-section { - margin-top: 80px; - - .btn.quiet.workshop-nav { - margin-bottom: 0; - } - } - - h1 { - font-size: 60px; - line-height: 60px; - } - - h2 { - margin: 80px 0; - font-size: 40px; - line-height: 56px; - font-weight: var(--font-weight-normal); - } - - .schedule-container { - margin-top: 80px; - align-items: flex-start; - - .schedule-subsection { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - - margin-bottom: 80px; - - > h3 { - margin-right: 24px; - min-width: 198px; - } - - h3 { - font-size: 28px; - line-height: 34px; - font-weight: var(--font-weight-normal); - color: var(--grey-6); - } - - p { - font-size: 20px; - line-height: 30px; - color: var(--grey-6); - } - - h4 { - font-size: 20px; - line-height: 24px; - font-weight: var(--font-weight-normal); - color: var(--grey-6); - } - - ul { - margin-top: 16px; - - > p { - margin: 0 0 4px 0; - font-size: 16px; - line-height: 24px; - font-weight: var(--font-weight-bold);; - color: var(--grey-6); - } - } - } - } - } - } - - #on-demand.module { - .stacked-feature { - .overview { - flex-direction: row; - margin-bottom: 160px; - - .overview-content { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - text-align: left; - margin-top: 0; - padding: 0; - flex: 50%; - - > hgroup { - margin-bottom: 32px; - } - - h1 { - font-size: 64px; - line-height: 72px; - } - - h4.eyebrow.faqs { - color: var(--violet-4); - } - - p { - margin: 0 0 32px 0; - padding: 0; - font-size: 24px; - } - - .btn.primary { - height: 50px; - font-size: 16px; - } - } - - .embed-container { - flex: 50%; - } - } - - .feature { - margin-top: 160px; - - .on-demand-section-container { - margin-top: 112px; - - .on-demand-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 24px; - - margin-top: 56px; - } - - > h3 { - font-size: 60px; - line-height: 60px; - font-weight: var(--font-weight-bold); - } - } - } - } - } - - #community.module { - .community-header { - flex-direction: row; - align-items: center; - } - - hgroup { - width: 400px; - margin-top: 0; - } - - .community-section { - - .collapsible-container { - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); - } - } - } - - #twitter.module { - flex-direction: row; - padding: 0 50px; - - .text { - max-width: 294px; - margin-right: 72px; - padding-right: 24px; - - h3 { - font-size: 60px; - line-height: 60px; - margin: 0 0 32px 0; - } - } - } - } - } - - #guidelines.module, #workshop-details.module { - .container { - .guidelines-header { - flex-direction: row; - align-items: center; - margin-bottom: 60px; - - hgroup { - width: 400px; - margin-top: 0; - } - } - - .guidelines-body, .workshop-details-body { - margin: 0 156px; - - .text-block { - ul { - display: grid; - grid-auto-flow: column; - grid-auto-columns: 50%; - margin-left: 0; - - li { - margin-left: 20px; - text-align: left; - } - - &.five-rows { - grid-template-rows: auto repeat(4, 1fr); - } - - &.eight-rows { - grid-template-rows: repeat(8, 1fr); - } - } - } - } - - .workshop-details-body { - margin: 0 190px; - } - } - } - } - } -} diff --git a/sites/www/lib/styles/pages/_monetization.scss b/sites/www/lib/styles/pages/_monetization.scss index 1041d04c6e0..4502f66a197 100644 --- a/sites/www/lib/styles/pages/_monetization.scss +++ b/sites/www/lib/styles/pages/_monetization.scss @@ -1,21 +1,16 @@ @use '../core/breakpoints'; body.monetization { - section.hero { - background-image: linear-gradient(35deg, #F3FCFF 10%, #93FAEE 80%); - } - - #resources { - background-image: linear-gradient(145deg, #0654B2 20%, #28F5DE 80%); + background-image: var(--grad-blue-green-35); } #resources-1 { - background-image: linear-gradient(145deg, #0654B2 20%, #28F5DE 80%); + background-image: linear-gradient(145deg, #0654b2 20%, #28f5de 80%); } #resources-2 { - background-image: linear-gradient(145deg, #0654B2 30%, #A57DF7 90%); + background-image: linear-gradient(145deg, #0654b2 30%, #a57df7 90%); } #tabs { @@ -89,7 +84,7 @@ body.monetization { } background-color: var(--blue-6); - color: #ffffff; + color: white; } } @@ -147,12 +142,12 @@ body.monetization { } .quiet { - color: #ffffff; + color: white; } .white-btn { border: 1px solid white; - color: #ffffff; + color: white; } } diff --git a/sites/www/lib/styles/pages/_news.scss b/sites/www/lib/styles/pages/_news.scss index 2e11e422228..35b2d661c89 100644 --- a/sites/www/lib/styles/pages/_news.scss +++ b/sites/www/lib/styles/pages/_news.scss @@ -1,117 +1,62 @@ @use '../core/breakpoints'; body.news { - section.hero { - background-image: linear-gradient(35deg, #F3FCFF 10%, #93FAEE 80%); - padding-top: var(--gutter) !important; - padding-bottom: var(--gutter) !important; + background-image: var(--grad-blue-green-35); + padding-block: var(--gutter) !important; @include breakpoints.screen(lg) { - .container { - > h2 { - max-width: 600px !important; - margin-top: var(--spacer) !important; - margin-bottom: var(--spacer) !important; - } + .mantle { + gap: 0; + grid-template-columns: 1fr 55%; - .mantle { - grid-template-columns: 1fr 55%; - gap: 0; - - .text { - padding-left: 0; + .text { + padding-left: 0; - h1 { - max-width: 100%; - font-size: 64px; - font-weight: var(--font-weight-bold); - line-height: 72px; - } + h1 { + font-size: 64px; + line-height: 72px; + max-width: 100%; + } - h2 { - font-weight: var(--font-weight-normal); - font-size: 34px; - line-height: 40px; - } + h2 { + font-size: 34px; + font-weight: var(--font-weight-normal); + line-height: 40px; } } } } } - .divider { - height: 4px; - width: 1340px; - background: var(--grey-3); - border-radius: 2px; - margin: 16px auto; - } - - #feature-columns { - .container { margin: 0 auto; } - - .feature-columns { - - .card { - padding: 0; - border: none; - width: 100%; - } - } - - @include breakpoints.screen(lg) { - .feature-columns p { - min-height: 141px; - } - } - } - #flutter-news-toolkit { - .container { margin: 0 auto} - - .media { - img { width: 312px; } + .container { + margin: 0 auto; } - - h3 { - font-size: 44px; + + .media img { + width: 312px; } @include breakpoints.screen(lg) { - .feature.toolkit { - grid-template-columns: 1fr 1fr; + .feature.toolkit { gap: 137px; - - h4 { - font-size: 24px; - } - - h3 { - font-size: 64px; - } + grid-template-columns: 1fr 1fr; p { font-size: 24px; } - + .text { - padding: 0; order: 2; + padding: 0; } - - .media { - img { - height: 575px; - width: 544px; - order: 1; - } + + .media img { + height: 575px; + width: 544px; } } } } - - #resources { - background-image: linear-gradient(145deg, #0654B2 20%, #28F5DE 80%); - } } diff --git a/sites/www/lib/styles/pages/_notfound.scss b/sites/www/lib/styles/pages/_notfound.scss index 645ca2e596d..e125c283221 100644 --- a/sites/www/lib/styles/pages/_notfound.scss +++ b/sites/www/lib/styles/pages/_notfound.scss @@ -1,71 +1,53 @@ @use '../core/breakpoints'; body.notfound { - - section.hero { - padding: 10px 0; - } - #content { - h1, h2 { + h1, + h2 { text-align: center; } - + h1 { font-size: var(--font-size-heading-1); margin-bottom: var(--gutter); } - + h2 { font-size: var(--font-size-heading-3); max-width: 658px; - margin: 0 auto; - margin-bottom: var(--gutter); + margin: 0 auto var(--gutter); } - + img { width: 100%; max-width: 850px; - margin: 0 auto; - margin-bottom: var(--gutter); + margin: 0 auto var(--gutter); display: block; } - + .links { display: grid; grid-template-columns: 1fr; - flex-direction: column; text-align: center; max-width: 620px; - margin: 0 auto; - margin-bottom: var(--gutter); - - ul { - padding: 0; - margin: 0; - display: block; + margin: 0 auto var(--gutter); - li { - margin-bottom: var(--spacer-sm); - } + ul li { + margin-bottom: var(--spacer-sm); } - + a { color: var(--blue-6); font-weight: var(--font-weight-bold); font-size: var(--font-size-heading-5); - + &:hover { text-decoration: underline; } } } - - @include breakpoints.screen(sm) { - section.hero { - padding: 20px 0; - } + @include breakpoints.screen(sm) { .links { grid-template-columns: 1fr 1fr 15%; justify-content: space-between; diff --git a/sites/www/lib/styles/pages/_partner.scss b/sites/www/lib/styles/pages/_partner.scss index 4bfb111566a..45d6d4b56b4 100644 --- a/sites/www/lib/styles/pages/_partner.scss +++ b/sites/www/lib/styles/pages/_partner.scss @@ -3,10 +3,6 @@ body.partner { font-family: var(--font-body); - #notification.module { - background-color: var(--grey-1); - } - section.hero { background: linear-gradient(224deg, var(--blue-1) 0%, var(--blue-2) 100%); } @@ -90,12 +86,12 @@ body.partner { .carousel .carousel-slider { padding-left: var(--gutter); - + .carousel-featured-card .text { - + h3, p, .btn.quiet { color: white; - + &:hover { color: white !important; } @@ -103,7 +99,7 @@ body.partner { } } } - + #stories { .story-grid-header { width: 100%; @@ -123,7 +119,7 @@ body.partner { @include breakpoints.screen(md) { .hero-content { - width: 80%; + width: 80%; } .text-container { @@ -143,7 +139,7 @@ body.partner { @include breakpoints.screen(lg) { .hero-content { width: 70%; - + h2 { font-size: 3.625rem !important; } @@ -155,7 +151,7 @@ body.partner { .carousel-section { padding: 0 80px 70px 80px; - + h1 { margin-left: 50px; margin-bottom: 44px; diff --git a/sites/www/lib/styles/pages/_showcase.scss b/sites/www/lib/styles/pages/_showcase.scss index d428af7937a..eec3004e790 100644 --- a/sites/www/lib/styles/pages/_showcase.scss +++ b/sites/www/lib/styles/pages/_showcase.scss @@ -1,16 +1,6 @@ @use '../core/breakpoints'; body.showcase { - #header { - .container > .mantle > .media { - padding: 92px 0 92px; - } - } - - #notification.module { - background-color: var(--grey-1); - } - #flutter-apps { padding: 56px 0; diff --git a/sites/www/lib/styles/styles.scss b/sites/www/lib/styles/styles.scss index 972a5c113c0..f68b8bceeb2 100644 --- a/sites/www/lib/styles/styles.scss +++ b/sites/www/lib/styles/styles.scss @@ -23,8 +23,6 @@ @use 'components/hero'; @use 'components/icon'; @use 'components/insert'; -@use 'components/logos'; -@use 'components/map'; @use 'components/newsletter'; @use 'components/notification'; @use 'components/stories'; @@ -36,14 +34,12 @@ @use 'pages/buildWithAI'; @use 'pages/community'; @use 'pages/culture'; -@use 'pages/developers'; @use 'pages/ecosystem'; @use 'pages/events'; +@use 'pages/flip'; @use 'pages/games'; @use 'pages/home'; @use 'pages/integrations'; -@use 'pages/learn'; -@use 'pages/majorEvents'; @use 'pages/monetization'; @use 'pages/development'; @use 'pages/news';