Add background-design component

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);

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<BackgroundDesign>`
+    <template style="--blur-amount: ${x => x.blurAmount}">
+        <slot name="background-image">
+            ${BackgroundImage}
+        </slot>
+    </template>
+`;

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);
+    };
+}

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 {}

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";

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;
@@ -183,16 +216,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;
   }
 }