feat: add background image and preliminary effects

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",
+            },
+        ],
     },
 };

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

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>
+        <div class="background-image">
+            ${BackgroundImage}
+        </div>
+    </template>
+`;

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

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;
@@ -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;
   }
 }

sites/fast-website/src/public/index.html

@@ -6,127 +6,111 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
-    <fast-design-system-provider id="body-provider" class="body-provider"
+    <fast-design-system-provider
+      class="body-provider"
       use-defaults
-      background-color="#1F1F1F"
-      accent-base-color="#F33378"
+      type-ramp-base-font-size="16px"
     >
+      <background-design></background-design>
       <div class="wrapper">
-        <!-- header:start -->
         <header class="header">
           <site-navigation>
             <fast-anchor class="logo" slot="start" appearance="lightweight" href="#">
               <%= require("svg/icon-brand.svg") %>
             </fast-anchor>
             <div class="anchor-wrapper">
               <ul>
-                <li><fast-anchor appearance="lightweight" href="#">Components</fast-anchor></li>
+                <li><fast-anchor appearance="lightweight" href="https://explore.fast.design/">Components</fast-anchor></li>
                 <li><fast-anchor appearance="lightweight" href="#">Integration</fast-anchor></li>
                 <li><fast-anchor appearance="lightweight" href="#">Documentation</fast-anchor></li>
                 <li><fast-anchor appearance="lightweight" href="#">Community</fast-anchor></li>
               </ul>
-              <fast-anchor class="github-link" slot="end" appearance="lightweight" href="#">
+              <fast-anchor href="https://github.com/microsoft/fast-dna/" class="github-link" slot="end" appearance="lightweight">
                 Github
-                <%= require("svg/icon-github.svg") %>
+                <span slot="end">
+                  <%= require("svg/icon-github.svg") %>
+                </span>
               </fast-anchor>
             </div>
           </site-navigation>
         </header>
-        <!-- header:end -->
 
-        <!-- hero-section:start -->
         <section class="section">
           <div class="section-content">
             <site-section-header>
               <fast-badge slot="badge" class="section-badge">ADAPTIVE UI SYSTEM, UTILITIES, & TOOLS</fast-badge>
-              <p class="section-heading-hero">The adaptive interface system for modern web experiences</p>
+              <h1 class="section-heading-hero">The adaptive interface system for modern web experiences</h1>
               <p slot="body">Interfaces bult with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components.</p>
-              <fast-button slot="action" appearance="outline">Get started</fast-button>
+              <fast-button slot="action" appearance="accent">Get started</fast-button>
             </site-section-header>
           </div>
         </section>
-        <!-- hero-section:end -->
 
         <section class="section">
           <div class="section-content">
             <site-section-header>
               <fast-badge slot="badge" class="section-badge">FLEXIBLE AND ADAPTABLE</fast-badge>
-              <p class="section-heading">One component, many faces</p>
-              <p slot="body">Using an unopinionated architecture and Adaptive Styling, one suite of components can blend into any environment.</p>
-              <fast-button slot="action" appearance="outline">Explore components</fast-button>
+              <h2 class="section-heading">Dynamic themes with Adaptive UI</h2>
+              <p slot="body">FAST provides an innovative theming system called Adaptive UI, which builds design system properties that designers use every day directly into every component.</p>
+              <fast-button slot="action" appearance="accent">Explore components</fast-button>
             </site-section-header>
+            <fast-divider role="presentation"></fast-divider>
+            <fast-frame></fast-frame>
           </div>
         </section>
 
-        <!-- adaptive-ui-system:start -->
-        <section class="section">
-          <fast-frame></fast-frame>
-        </section>
-        <!-- adaptive-ui-system:end -->
-
         <section class="section">
           <div class="section-content">
             <site-section-header>
               <fast-badge slot="badge" class="section-badge">FULLY INTEGRATED</fast-badge>
-              <p class="section-heading">Works with existing frameworks</p>
-              <fast-button slot="action" appearance="outline">Learn more</fast-button>
+              <h2 class="section-heading">Works with existing frameworks</h2>
+              <p slot="body">Standards-based Web Components are the foundation of each FAST component, making them compatible with almost any modern web framework.</p>
+              <fast-button slot="action" appearance="accent">Learn More</fast-button>
             </site-section-header>
+            <fast-divider role="presentation"></fast-divider>
+            <site-content-placement-container section="framework"></site-content-placement-container>
           </div>
         </section>
 
-        <!-- frameworks:start -->
-        <section class="section">
-          <site-content-placement-container section="framework"></site-content-placement-container>
-        </section>
-        <!-- frameworks:end -->
-
         <section class="section">
           <div class="section-content">
             <site-section-header>
               <fast-badge slot="badge" class="section-badge">A COMPREHENSIVE TOOLKIT</fast-badge>
-              <p class="section-heading">Feature and Utilities</p>
-              <fast-button slot="action" appearance="outline">Read documentation</fast-button>
+              <h2 class="section-heading">Feature and Utilities</h2>
+              <!-- FIXME: lorem ipsum -->
+              <p style="color: #0F0" slot="body">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.</p>
+              <fast-button slot="action" appearance="accent">Read documentation</fast-button>
             </site-section-header>
+            <fast-divider role="presentation"></fast-divider>
+            <site-content-placement-container section="feature"></site-content-placement-container>
           </div>
         </section>
 
-        <!-- documentation:start -->
-        <section class="section">
-          <site-content-placement-container section="feature"></site-content-placement-container>
-        </section>
-        <!-- documentation:end -->
-
         <section class="section">
           <div class="section-content">
             <site-section-header>
               <fast-badge slot="badge" class="section-badge">LEARN, MODIFY AND FOLLOW</fast-badge>
-              <p class="section-heading">Join the community</p>
+              <h2 class="section-heading">Join the community</h2>
+              <p slot="body">Our community drives the rhythm and direction of FAST. By taking part, your voice will help shape our future.</p>
             </site-section-header>
+            <fast-divider role="presentation"></fast-divider>
+            <site-content-placement-container section="community"></site-content-placement-container>
           </div>
         </section>
 
-        <!-- community:start -->
-        <section class="section">
-          <site-content-placement-container section="community"></site-content-placement-container>
-        </section>
-        <!-- community:end -->
-
-        <!-- footer:start -->
-          <fast-divider class="divider"></fast-divider>
-          <div class="footer">
-            <site-navigation>
-              <ul>
-                <li><fast-anchor appearance="lightweight" href="#">License</fast-anchor></li>
-                <li><fast-anchor appearance="lightweight" href="#">Privacy & Cookies</fast-anchor></li>
-                <li><fast-anchor appearance="lightweight" href="#">Terms of Use</fast-anchor></li>
-                <li><fast-anchor appearance="lightweight" href="#">&copy; 2020 Microsoft</fast-anchor></li>
-              </ul>
-            </site-navigation>
-            <fast-anchor class="logo" appearance="lightweight" href="#">
-              <%= require("svg/icon-brand.svg") %>
-            </fast-anchor>
-          </div>
-        <!-- footer:end -->
+        <footer class="site-footer">
+          <site-navigation>
+            <ul>
+              <li><fast-anchor appearance="lightweight" href="#">License</fast-anchor></li>
+              <li><fast-anchor appearance="lightweight" href="#">Privacy & Cookies</fast-anchor></li>
+              <li><fast-anchor appearance="lightweight" href="#">Terms of Use</fast-anchor></li>
+              <li><fast-anchor appearance="lightweight" href="#">&copy; 2020 Microsoft</fast-anchor></li>
+            </ul>
+          </site-navigation>
+          <fast-anchor class="logo" appearance="lightweight" href="#">
+            <%= require("svg/icon-brand.svg") %>
+          </fast-anchor>
+        </footer>
       </div>
     </fast-design-system-provider>
   </body>