From d243cccf57fa963d760051c8835daae6ebe452da Mon Sep 17 00:00:00 2001 From: John Kreitlow Date: Sun, 24 May 2020 14:31:20 -0700 Subject: [PATCH 1/6] Update eslintrc rule --- sites/fast-website/.eslintrc.js | 6 + sites/fast-website/src/public/background.svg | 174 +++++++++++++++++++ 2 files changed, 180 insertions(+) create mode 100644 sites/fast-website/src/public/background.svg diff --git a/sites/fast-website/.eslintrc.js b/sites/fast-website/.eslintrc.js index 60469f994fe..72416c5031d 100644 --- a/sites/fast-website/.eslintrc.js +++ b/sites/fast-website/.eslintrc.js @@ -3,5 +3,11 @@ module.exports = { rules: { "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/typedef": [ + "error", + { + arrowParameter: "false", + }, + ], }, }; diff --git a/sites/fast-website/src/public/background.svg b/sites/fast-website/src/public/background.svg new file mode 100644 index 00000000000..c87d59f655f --- /dev/null +++ b/sites/fast-website/src/public/background.svg @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 65b88504a8267ba29c24ddb4fbdba03dcd7bfe18 Mon Sep 17 00:00:00 2001 From: John Kreitlow Date: Tue, 26 May 2020 09:53:50 -0700 Subject: [PATCH 2/6] Add background-design component --- .../background-design.styles.ts | 45 +++++ .../background-design.template.ts | 11 ++ .../background-design/background-design.ts | 58 ++++++ .../app/components/background-design/index.ts | 11 ++ .../fast-website/src/app/components/index.ts | 9 +- sites/fast-website/src/app/css/style.css | 57 ++++-- sites/fast-website/src/app/svg/background.svg | 175 ++++++++++++++++++ sites/fast-website/src/public/background.svg | 174 ----------------- sites/fast-website/src/public/index.html | 104 +++++------ sites/fast-website/webpack.dev.js | 2 +- 10 files changed, 395 insertions(+), 251 deletions(-) create mode 100644 sites/fast-website/src/app/components/background-design/background-design.styles.ts create mode 100644 sites/fast-website/src/app/components/background-design/background-design.template.ts create mode 100644 sites/fast-website/src/app/components/background-design/background-design.ts create mode 100644 sites/fast-website/src/app/components/background-design/index.ts create mode 100644 sites/fast-website/src/app/svg/background.svg delete mode 100644 sites/fast-website/src/public/background.svg diff --git a/sites/fast-website/src/app/components/background-design/background-design.styles.ts b/sites/fast-website/src/app/components/background-design/background-design.styles.ts new file mode 100644 index 00000000000..64c90f3cafe --- /dev/null +++ b/sites/fast-website/src/app/components/background-design/background-design.styles.ts @@ -0,0 +1,45 @@ +import { css } from "@microsoft/fast-element"; +import { display } from "@microsoft/fast-foundation"; +import { neutralFillRestBehavior } from "@microsoft/fast-components"; + +export const BackgroundDesignStyles = css` + ${display("block")} :host { + contain: content; + filter: blur(calc(var(--blur-amount) * 65px)); + height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */ + isolation: isolate; + position: fixed; + pointer-events: none; + z-index: 0; + } + + :host, + :host::after { + left: 0; + top: 0; + } + + :host, + :host::after, + :host svg { + width: 100%; + } + + :host::after, + :host svg { + height: 100%; + } + + :host svg { + fill: none; + object-position: 50% 50%; + } + + :host::after { + background: linear-gradient(var(--neutral-fill-rest) 90%, transparent); + content: ""; + display: block; + opacity: 0.45; + position: absolute; + } +`.withBehaviors(neutralFillRestBehavior); diff --git a/sites/fast-website/src/app/components/background-design/background-design.template.ts b/sites/fast-website/src/app/components/background-design/background-design.template.ts new file mode 100644 index 00000000000..18a3d22a0c5 --- /dev/null +++ b/sites/fast-website/src/app/components/background-design/background-design.template.ts @@ -0,0 +1,11 @@ +import { html } from "@microsoft/fast-element"; +import BackgroundImage from "svg/background.svg"; +import { BackgroundDesign } from "./background-design"; + +export const BackgroundDesignTemplate = html` + +`; diff --git a/sites/fast-website/src/app/components/background-design/background-design.ts b/sites/fast-website/src/app/components/background-design/background-design.ts new file mode 100644 index 00000000000..06e1b3ed545 --- /dev/null +++ b/sites/fast-website/src/app/components/background-design/background-design.ts @@ -0,0 +1,58 @@ +import { FASTElement, observable } from "@microsoft/fast-element"; + +export class BackgroundDesign extends FASTElement { + private animationFrame: number | void; + private cachedClientHeight: number = this.clientHeight; + private resizeTimeout: number | void; + private scrollTimeout: number | void; + + @observable + public blurAmount: number = 0; + + constructor() { + super(); + + window.addEventListener("resize", this.resizeHandler, { passive: true }); + window.addEventListener("scroll", this.scrollHandler, { passive: true }); + + // trigger both events in case we're viewing a page refresh + window.dispatchEvent(new Event("resize")); + window.dispatchEvent(new Event("scroll")); + } + + private resizeHandler = (): void => { + if (this.resizeTimeout) { + this.resizeTimeout = window.clearTimeout(this.resizeTimeout); + } + + this.resizeTimeout = window.setTimeout(this.setCachedClientHeight, 150); + }; + + private setCachedClientHeight = (): void => { + this.cachedClientHeight = this.clientHeight; + }; + + private render = (): void => { + const amount = window.scrollY / this.cachedClientHeight; + this.blurAmount = amount < 1 ? amount : 1; + this.animationFrame = window.requestAnimationFrame(this.render); + }; + + private cancelAnimationLoop = (): void => { + if (this.animationFrame) { + this.animationFrame = window.cancelAnimationFrame(this.animationFrame); + } + }; + + private scrollHandler = (): void => { + if (this.scrollTimeout) { + window.clearTimeout(this.scrollTimeout); + } + + if (!this.animationFrame) { + this.animationFrame = window.requestAnimationFrame(this.render); + } + + this.scrollTimeout = window.setTimeout(this.cancelAnimationLoop, 150); + }; +} diff --git a/sites/fast-website/src/app/components/background-design/index.ts b/sites/fast-website/src/app/components/background-design/index.ts new file mode 100644 index 00000000000..a38a185a8f6 --- /dev/null +++ b/sites/fast-website/src/app/components/background-design/index.ts @@ -0,0 +1,11 @@ +import { customElement } from "@microsoft/fast-element"; +import { BackgroundDesign } from "./background-design"; +import { BackgroundDesignTemplate as template } from "./background-design.template"; +import { BackgroundDesignStyles as styles } from "./background-design.styles"; + +@customElement({ + name: "background-design", + styles, + template, +}) +export class SiteBackgroundDesign extends BackgroundDesign {} diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts index ad83da98ed0..7377479c6bf 100644 --- a/sites/fast-website/src/app/components/index.ts +++ b/sites/fast-website/src/app/components/index.ts @@ -1,8 +1,9 @@ +export { SiteBackgroundDesign } from "./background-design"; +export { SiteCardSection } from "./card-section"; export { SiteColorSwatch } from "./color-swatch"; -export { SiteSectionHeader } from "./section-header"; -export { FastFrame } from "./fast-frame"; -export { SiteNavigation } from "./navigation"; export { SiteContentPlacement } from "./content-placement"; export { SiteContentPlacementContainer } from "./content-placement-container"; +export { FastFrame } from "./fast-frame"; export { SiteFeatureCard } from "./feature-card"; -export { SiteCardSection } from "./card-section"; +export { SiteNavigation } from "./navigation"; +export { SiteSectionHeader } from "./section-header"; diff --git a/sites/fast-website/src/app/css/style.css b/sites/fast-website/src/app/css/style.css index 39219532bc3..7984efb05ce 100644 --- a/sites/fast-website/src/app/css/style.css +++ b/sites/fast-website/src/app/css/style.css @@ -1,6 +1,5 @@ -:root { - /* FIXME: Is there a better way to set default props to prevent FOUC? */ - --background-color: #242424; +html { + font: 16px "Segoe UI", Arial, Helvetica, sans-serif; } html, @@ -23,6 +22,8 @@ body { .wrapper { display: grid; grid-template-columns: minmax(5vw, 1fr) minmax(0px, 1200px) minmax(5vw, 1fr); + position: relative; + z-index: 1; } .header { @@ -62,13 +63,45 @@ li { display: none; } +fast-divider { + border: none; + display: flex; + flex-direction: column; + height: 58px; + justify-content: space-between; + margin: calc(var(--design-unit) * 5px) calc(50% - 1.5px); + width: 3px; +} + +fast-divider::before, +fast-divider::after { + background-color: var(--accent-fill-rest); + content: ''; + width: 3px; +} + +fast-divider::before { + border-radius: 50%; + height: 3px; +} + +fast-divider::after { + border-radius: calc(var(--corner-radius) * 1px); + height: calc(var(--type-ramp-plus-5-font-size) + var(--design-unit) * 1px); +} + .section { - grid-column: 2; color: var(--neutral-foreground-rest); + min-height: 85vmin; + display: flex; + justify-content: center; + align-items: center; + grid-column: 2; } .section-content { display: flex; + flex-flow: row wrap; align-items: center; justify-content: center; min-height: 300px; @@ -81,14 +114,14 @@ li { } .section-heading-hero { - font-size: 60px; - line-height: 72px; + font-size: var(--type-ramp-plus-6-font-size); + line-height: var(--type-ramp-plus-6-line-height); margin: 0; } .section-heading { - font-size: 46px; - line-height: 56px; + font-size: var(--type-ramp-plus-5-font-size); + line-height: var(--type-ramp-plus-5-line-height); margin: 0; } @@ -98,7 +131,7 @@ li { margin-bottom: 60px; } -.footer { +.site-footer { grid-column: 2; display: flex; align-items: center; @@ -189,16 +222,16 @@ li { z-index: 2; } - .footer site-navigation { + .site-footer site-navigation { height: 100%; justify-content: flex-start; } - .footer ul { + .site-footer ul { flex-direction: column; } - .footer site-navigation::part(nav-button) { + .site-footer site-navigation::part(nav-button) { display: none; } } diff --git a/sites/fast-website/src/app/svg/background.svg b/sites/fast-website/src/app/svg/background.svg new file mode 100644 index 00000000000..8bf95369503 --- /dev/null +++ b/sites/fast-website/src/app/svg/background.svg @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sites/fast-website/src/public/background.svg b/sites/fast-website/src/public/background.svg deleted file mode 100644 index c87d59f655f..00000000000 --- a/sites/fast-website/src/public/background.svg +++ /dev/null @@ -1,174 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html index be5b3b4089a..b3f3a235249 100644 --- a/sites/fast-website/src/public/index.html +++ b/sites/fast-website/src/public/index.html @@ -6,13 +6,13 @@ <%= htmlWebpackPlugin.options.title %> - +
-
    -
  • Components
    • +
  • Components
  • Integration
  • Documentation
  • Community
- + Github - <%= require("svg/icon-github.svg") %> + + <%= require("svg/icon-github.svg") %> +
- -
ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS -

The adaptive interface system for modern web experiences

+

The adaptive interface system for modern web experiences

Interfaces bult with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.

- Get started + Get started
-
FLEXIBLE AND ADAPTABLE -

One component, many faces

-

Using an unopinionated architecture and Adaptive Styling, one suite of components can blend into any environment.

- Explore components +

Dynamic themes with Adaptive UI

+

FAST provides an innovative theming system called Adaptive UI, which builds design system properties that designers use every day directly into every component.

+ Explore components + +
- -
- -
- -
FULLY INTEGRATED -

Works with existing frameworks

- Learn more +

Works with existing frameworks

+

Standards-based Web Components are the foundation of each FAST component, making them compatible with almost any modern web framework.

+ Learn More + +
- -
- -
- -
A COMPREHENSIVE TOOLKIT -

Feature and Utilities

- Read documentation +

Feature and Utilities

+ +

At id vitae iaculis volutpat laoreet. Massa ut scelerisque ut ac, in aliquam odio. Semper sagittis blandit in sed turpis lorem at diam iaculis. Lorem porta elementum iaculis sed ut nunc.

+ Read documentation + +
- -
- -
- -
LEARN, MODIFY AND FOLLOW -

Join the community

+

Join the community

+

Our community drives the rhythm and direction of FAST. By taking part, your voice will help shape our future.

 + +
- -
- -
- - - - -
- -
    -
  • License
    • -
  • Privacy & Cookies
    • -
  • Terms of Use
    • -
  • © 2020 Microsoft
    • -
- - -
- +
+ +
    +
  • License
    • +
  • Privacy & Cookies
    • +
  • Terms of Use
    • +
  • © 2020 Microsoft
    • +
+ + +
diff --git a/sites/fast-website/webpack.dev.js b/sites/fast-website/webpack.dev.js index 5d5a8eac84c..ef0d479c248 100644 --- a/sites/fast-website/webpack.dev.js +++ b/sites/fast-website/webpack.dev.js @@ -7,7 +7,7 @@ const baseConfig = require("./webpack.common"); module.exports = merge(baseConfig, { devServer: { contentBase: "./src/public", - open: true, + host: "0.0.0.0", port: 7700, }, mode: "development", From decff9e2a5b515335bbe8af775e5f00e7c100a32 Mon Sep 17 00:00:00 2001 From: John Kreitlow Date: Fri, 29 May 2020 10:13:54 -0700 Subject: [PATCH 3/6] Revert webpack dev settings --- sites/fast-website/webpack.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/fast-website/webpack.dev.js b/sites/fast-website/webpack.dev.js index ef0d479c248..5d5a8eac84c 100644 --- a/sites/fast-website/webpack.dev.js +++ b/sites/fast-website/webpack.dev.js @@ -7,7 +7,7 @@ const baseConfig = require("./webpack.common"); module.exports = merge(baseConfig, { devServer: { contentBase: "./src/public", - host: "0.0.0.0", + open: true, port: 7700, }, mode: "development", From 3fb8c24f9d6b2ea1ddbe80ad4b75d33972d7dc73 Mon Sep 17 00:00:00 2001 From: John Kreitlow Date: Fri, 29 May 2020 10:15:02 -0700 Subject: [PATCH 4/6] Compress background svg --- sites/fast-website/src/app/svg/background.svg | 176 +----------------- 1 file changed, 1 insertion(+), 175 deletions(-) diff --git a/sites/fast-website/src/app/svg/background.svg b/sites/fast-website/src/app/svg/background.svg index 8bf95369503..89a48b96753 100644 --- a/sites/fast-website/src/app/svg/background.svg +++ b/sites/fast-website/src/app/svg/background.svg @@ -1,175 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + From 966317e2fd88f192c754b3d7781caa0ed73b3943 Mon Sep 17 00:00:00 2001 From: John Kreitlow Date: Fri, 29 May 2020 10:19:40 -0700 Subject: [PATCH 5/6] Fix background container structure --- .../background-design.styles.ts | 39 ++++++++++--------- .../background-design.template.ts | 4 +- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/sites/fast-website/src/app/components/background-design/background-design.styles.ts b/sites/fast-website/src/app/components/background-design/background-design.styles.ts index 64c90f3cafe..b05641dd7a1 100644 --- a/sites/fast-website/src/app/components/background-design/background-design.styles.ts +++ b/sites/fast-website/src/app/components/background-design/background-design.styles.ts @@ -9,37 +9,38 @@ export const BackgroundDesignStyles = css` height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */ isolation: isolate; position: fixed; - pointer-events: none; z-index: 0; - } - - :host, - :host::after { left: 0; top: 0; - } - - :host, - :host::after, - :host svg { width: 100%; } - :host::after, - :host svg { + :host .background-image { + align-items: center; + display: flex; height: 100%; + justify-content: center; + position: relative; + width: 100%; } - :host svg { - fill: none; - object-position: 50% 50%; - } - - :host::after { - background: linear-gradient(var(--neutral-fill-rest) 90%, transparent); + :host .background-image::after { + background: var(--background-color); content: ""; display: block; + height: 100%; + left: 0; opacity: 0.45; position: absolute; + top: 0; + width: 100%; + } + + :host .background-image svg { + height: auto; + min-width: 1440px; + object-fit: cover; + object-position: 50% 50%; + width: 100%; } `.withBehaviors(neutralFillRestBehavior); diff --git a/sites/fast-website/src/app/components/background-design/background-design.template.ts b/sites/fast-website/src/app/components/background-design/background-design.template.ts index 18a3d22a0c5..e4d5bbbdcf2 100644 --- a/sites/fast-website/src/app/components/background-design/background-design.template.ts +++ b/sites/fast-website/src/app/components/background-design/background-design.template.ts @@ -4,8 +4,8 @@ import { BackgroundDesign } from "./background-design"; export const BackgroundDesignTemplate = html` `; From e9abc110219d734366765a26f8c0edc4a312f81d Mon Sep 17 00:00:00 2001 From: John Kreitlow Date: Fri, 29 May 2020 10:20:14 -0700 Subject: [PATCH 6/6] Remove scrolling filter effect --- .../background-design.styles.ts | 1 - .../background-design.template.ts | 2 +- .../background-design/background-design.ts | 59 +------------------ 3 files changed, 3 insertions(+), 59 deletions(-) diff --git a/sites/fast-website/src/app/components/background-design/background-design.styles.ts b/sites/fast-website/src/app/components/background-design/background-design.styles.ts index b05641dd7a1..04ceeb424e9 100644 --- a/sites/fast-website/src/app/components/background-design/background-design.styles.ts +++ b/sites/fast-website/src/app/components/background-design/background-design.styles.ts @@ -5,7 +5,6 @@ import { neutralFillRestBehavior } from "@microsoft/fast-components"; export const BackgroundDesignStyles = css` ${display("block")} :host { contain: content; - filter: blur(calc(var(--blur-amount) * 65px)); height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */ isolation: isolate; position: fixed; diff --git a/sites/fast-website/src/app/components/background-design/background-design.template.ts b/sites/fast-website/src/app/components/background-design/background-design.template.ts index e4d5bbbdcf2..cfa4c292880 100644 --- a/sites/fast-website/src/app/components/background-design/background-design.template.ts +++ b/sites/fast-website/src/app/components/background-design/background-design.template.ts @@ -3,7 +3,7 @@ import BackgroundImage from "svg/background.svg"; import { BackgroundDesign } from "./background-design"; export const BackgroundDesignTemplate = html` -