From b6bc671f789a567a20436ded2e764d1814234788 Mon Sep 17 00:00:00 2001 From: John Kreitlow <863023+radium-v@users.noreply.github.com> Date: Fri, 29 May 2020 15:57:56 -0700 Subject: [PATCH] feat: add background image and preliminary effects (#3185) * Update eslintrc rule * Add background-design component * Revert webpack dev settings * Compress background svg * Fix background container structure * Remove scrolling filter effect --- sites/fast-website/.eslintrc.js | 6 + .../background-design.styles.ts | 45 ++++++++ .../background-design.template.ts | 11 ++ .../background-design/background-design.ts | 3 + .../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 | 1 + sites/fast-website/src/public/index.html | 104 ++++++++---------- 9 files changed, 171 insertions(+), 76 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 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/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..04ceeb424e9 --- /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; + height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */ + isolation: isolate; + position: fixed; + z-index: 0; + left: 0; + top: 0; + width: 100%; + } + + :host .background-image { + align-items: center; + display: flex; + height: 100%; + justify-content: center; + position: relative; + width: 100%; + } + + :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 new file mode 100644 index 00000000000..cfa4c292880 --- /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..8591ce1cfc1 --- /dev/null +++ b/sites/fast-website/src/app/components/background-design/background-design.ts @@ -0,0 +1,3 @@ +import { FASTElement } from "@microsoft/fast-element"; + +export class BackgroundDesign extends FASTElement {} 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..89a48b96753 --- /dev/null +++ b/sites/fast-website/src/app/svg/background.svg @@ -0,0 +1 @@ + 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
    • -
- - -
- +