chore: update styles for framework and community sections

sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts

@@ -3,24 +3,79 @@ import { display } from "@microsoft/fast-foundation";
 
 export const ContentPlacementContainerStyles = css`
     ${display("block")}:host {
+        --border-width: calc(var(--outline-width) * 1px);
+        --border: var(--border-width) solid var(--neutral-outline-rest);
         contain: none;
         font-family: var(--body-font);
     }
-    .container {
-        display: flex;
-        flex-wrap: wrap;
+
+    .framework_container,
+    .community_container {
+        display: grid;
+        grid-template-columns: 1fr;
         justify-content: center;
     }
-    /* This creates the blur and background color changes on hover */
-    /* start */
-    .container:hover site-content-placement {
-        filter: blur(2px);
+
+    .framework_ContentPlacement {
+        border: var(--border);
+        border-width: 0 0 var(--border-width);
+        padding: 0 calc(var(--design-unit) * 2px);
     }
-    .container:hover site-content-placement:hover {
-        /* background: linear-gradient(349.8deg, rgba(143, 68, 95, 0.3) 20.91%, rgba(148, 81, 73, 0.3) 99.75%); */
-        box-shadow: 0px 10px 44px rgba(0, 0, 0, 0.1);
-        border-radius: var(--design-unit);
-        filter: blur(0);
+
+    .framework_ContentPlacement:last-of-type {
+        border-bottom: none;
+    }
+
+    @media screen and (min-width: 700px) {
+        .framework_ContentPlacement {
+            border-width: 0 var(--border-width) var(--border-width) 0;
+        }
+    }
+
+    @media screen and (min-width: 700px) and (max-width: 999px) {
+        .framework_container {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        .framework_ContentPlacement:nth-of-type(even) {
+            border-right: none;
+        }
+
+        .framework_ContentPlacement:nth-last-of-type(-n + 2):nth-of-type(odd) {
+            /* The last two items on medium screens have no bottom border */
+            border-bottom: none;
+        }
+    }
+
+    @media screen and (min-width: 1000px) {
+        .framework_container,
+        .community_container {
+            grid-template-columns: repeat(3, 1fr);
+        }
+
+        .framework_ContentPlacement:nth-of-type(3n),
+        .framework_ContentPlacement:first-of-type
+            + .framework_ContentPlacement:last-of-type,
+        .framework_ContentPlacement:only-of-type {
+            border-right: none;
+        }
+
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n):nth-last-of-type(-n + 3), /* first item when only three items are present */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n) ~ .framework_ContentPlacement:nth-last-of-type(-n + 3), /* last three items when full row of three */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n - 1) ~ .framework_ContentPlacement:nth-last-of-type(-n + 2), /* more than one row, last row with only two items */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(3n - 2) ~ .framework_ContentPlacement:last-of-type, /* more than one row, last row with only one item */
+        .framework_ContentPlacement:first-of-type:nth-last-of-type(-n + 2) {
+            /* only two items on a row that should fit three */
+            border-bottom: none;
+        }
+    }
+
+    .icon {
+        fill: currentColor;
+    }
+
+    h3 {
+        margin-top: 0 0 calc(var(--design-unit) * 5px) 0;
+        font-size: var(--type-ramp-plus-2-font-size);
     }
-    /* end */
 `;

sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts

@@ -1,29 +1,22 @@
 import { html, repeat, when } from "@microsoft/fast-element";
 import { ContentPlacementContainer } from "./content-placement-container";
+import { CommunityContentPlacementData } from "../../data/community.data";
 
 export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>`
-    <div class="container">
+    <div
+        class="container ${x =>
+            ["framework", "community"].includes(x.section)
+                ? `${x.section}_container`
+                : ""}"
+    >
         ${when(
             x => x.section === "framework",
             html<ContentPlacementContainer>`
                 ${repeat(
                     x => x.frameworkContentPlacementData,
-                    html`<site-content-placement divider>
+                    html`<site-content-placement class="framework_ContentPlacement">
                         <h3>${x => x.header}</h3>
                         <p slot="body">${x => x.body}</p>
-                        <span slot="compatibility"
-                            ><img
-                                src=${x => x.compatibilityImageSrc}
-                                alt=${x => x.compatibilityImageAlt}
-                            />
-                            ${x => x.compatibilityText}</span
-                        >
-                        <fast-anchor
-                            slot="action"
-                            appearance="lightweight"
-                            href=${x => x.actionLink}
-                            >${x => x.actionText}</fast-anchor
-                        >
                     </site-content-placement>`
                 )}
             `
@@ -33,10 +26,8 @@ export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>
             html<ContentPlacementContainer>`
                 ${repeat(
                     x => x.communityContentPlacementData,
-                    html`<site-content-placement>
-                        <div slot="icon">
-                            <img src=${x => x.iconSrc} alt=${x => x.iconAlt} />
-                        </div>
+                    html`<site-content-placement icon>
+                        <div slot="icon" :innerHTML=${x => x.icon}></div>
                         <h3>${x => x.header}</h3>
                         <p slot="body">${x => x.body}</p>
                         <fast-anchor

sites/fast-website/src/app/components/content-placement/content-placement.styles.ts

@@ -8,50 +8,30 @@ export const ContentPlacementStyles = css`
         box-sizing: border-box;
     }
 
-    :host([hidden]) {
-        display: none;
-    }
-
     fast-card {
         background: transparent;
-        padding: 0 calc(var(--design-unit) * 5px) calc(var(--design-unit) * 3px);
+        padding: calc(var(--design-unit) * 5px);
         text-align: left;
         display: flex;
         flex-direction: column;
     }
 
     fast-card ::slotted([slot="body"]) {
         flex: 1 1 auto;
+        margin: 0;
+        font-size: var(--type-ramp-base-font-size);
     }
 
-    fast-card:hover .contentPlacement_footer__hoverVisible {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .contentPlacement_footer__hoverVisible {
-        visibility: hidden;
-    }
-
-    fast-card:hover .contentPlacement_footer__hoverVisible {
-        visibility: visible;
-    }
-
-    fast-card:hover .contentPlacement_divider {
-        visibility: visible;
+    fast-card ::slotted([slot="action"]) {
+        margin-top: calc(var(--design-unit) * 2px);
     }
 
     fast-card:hover .contentPlacement_icon {
         visibility: visible;
     }
 
-    .contentPlacement_divider {
-        visibility: hidden;
-    }
-
     fast-card .contentPlacement_icon {
         visibility: hidden;
-        margin-top: calc(var(--design-unit) * 4px);
+        margin-bottom: calc(var(--design-unit) * 5px);
     }
 `;

sites/fast-website/src/app/components/content-placement/content-placement.template.ts

@@ -2,22 +2,10 @@ import { html, when } from "@microsoft/fast-element";
 import { ContentPlacement } from "./content-placement";
 
 export const ContentPlacementTemplate = html<ContentPlacement>`<fast-card>
-    <div class=${x => (x.divider ? "" : "contentPlacement_icon")}>
+    <div class=${x => (x.icon ? "contentPlacement_icon" : "")}>
         <slot name="icon"></slot>
     </div>
     <slot></slot>
     <slot name="body"></slot>
-    ${when(
-        x => x.divider,
-        html`<fast-divider class="contentPlacement_divider"></fast-divider>`
-    )}
-    <div
-        class=${x =>
-            x.divider
-                ? "contentPlacement_footer__hoverVisible"
-                : "contentPlacement_footer__alwaysVisible"}
-    >
-        <slot name="action"></slot>
-        <slot name="compatibility"></slot>
-    </div>
+    ${when(x => x.icon, html`<slot name="action"></slot>`)}
 </fast-card> `;

sites/fast-website/src/app/components/content-placement/content-placement.ts

@@ -1,5 +1,6 @@
 import { attr, FASTElement } from "@microsoft/fast-element";
 
 export class ContentPlacement extends FASTElement {
-    @attr({ mode: "boolean" }) divider: boolean = false;
+    @attr({ mode: "boolean" })
+    public icon: boolean = false;
 }

sites/fast-website/src/app/css/style.css

@@ -3,6 +3,12 @@
   --background-color: #242424;
 }
 
+html,
+body {
+  width: 100%;
+  overflow-x: hidden;
+}
+
 body {
   background-color: var(--background-color);
   color: var(--neutral-foreground-rest);
@@ -33,7 +39,6 @@ body {
 
 .section {
   grid-column: 2;
-  --card-width: 400px;
   color: var(--neutral-foreground-rest);
 }
 

sites/fast-website/src/app/data/community.data.ts

@@ -1,10 +1,13 @@
+import DiscordIcon from "svg/icon-discord.svg";
+import GithubIcon from "svg/icon-github.svg";
+import TwitterIcon from "svg/icon-twitter.svg";
+
 export interface CommunityContentPlacementData {
     actionLink: string;
     actionText: string;
     body: string;
     header: string;
-    iconAlt: string;
-    iconSrc: string;
+    icon: string;
 }
 
 export const communityContentPlacementData: CommunityContentPlacementData[] = [
@@ -14,25 +17,22 @@ export const communityContentPlacementData: CommunityContentPlacementData[] = [
         body:
             "Join our active community on Discord. Follow the latest updates and contributions, ask questions, give feedback, or keep up on our reading list.",
         header: "Discord",
-        iconAlt: "Discord",
-        iconSrc: "https://via.placeholder.com/16",
+        icon: DiscordIcon,
     },
     {
         actionLink: "https://twitter.com/fast_dna",
         actionText: "Follow us on Twitter",
         body:
             "Follow along as we share out the latest happenings on Twitter. You will find important updates, announcements, and sneak peeks.",
         header: "Twitter",
-        iconAlt: "Twitter",
-        iconSrc: "https://via.placeholder.com/16",
+        icon: TwitterIcon,
     },
     {
         actionLink: "https://github.com/microsoft/fast-dna",
         actionText: "Get Started on Github",
         body:
             "Explore the FAST repository on Github and try out our components, utilities, and tools. Or, mix-and-match with your own solutions.",
         header: "Github",
-        iconAlt: "Github",
-        iconSrc: "https://via.placeholder.com/16",
+        icon: GithubIcon,
     },
 ];

sites/fast-website/src/app/data/framework.data.ts

@@ -1,57 +1,37 @@
 export interface FrameworkContentPlacementData {
-    actionLink?: string;
-    actionText?: string;
     body?: string;
-    compatibilityImageAlt?: string;
-    compatibilityImageSrc?: string;
-    compatibilityText?: string;
-    divider?: boolean;
     header?: string;
 }
 
-const frameworkContentPlacementReusableData: FrameworkContentPlacementData = {
-    actionLink: "#",
-    actionText: "Learn More",
-    compatibilityImageAlt: "Smiley face",
-    compatibilityImageSrc: "https://via.placeholder.com/16",
-    compatibilityText: "No issues!",
-};
-
 export const frameworkContentPlacementData: FrameworkContentPlacementData[] = [
     {
         body:
             "Angular's default binding syntax will always set properties on an element. This works well for rich data, like objects and arrays, and also works well for primitive values so long as the Custom Element author has mapped any exposed attributes to corresponding properties.",
         header: "Angular 8.2.14",
-        ...frameworkContentPlacementReusableData,
     },
     {
         body:
             "DIO uses a runtime heuristic to determine if it should pass data to Custom Elements as either properties or attributes. If a property is already defined on the element instance, DIO will use properties, otherwise it will fallback to attributes.",
         header: "DIO",
-        ...frameworkContentPlacementReusableData,
     },
     {
         body:
             "hyperHTML will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.",
         header: "hyperHTML 2.32.2",
-        ...frameworkContentPlacementReusableData,
     },
     {
         body:
             "Dojo will pass data as attributes only when the data is a type of string, otherwise it is set as a property.",
         header: "Dojo 6.0.4",
-        ...frameworkContentPlacementReusableData,
     },
     {
         body:
             "Hybrids will pass data to an element as properties, as long as the property is defined on the element's prototype. Otherwise it will fallback to passing data as attributes.",
         header: "hybrids 4.1.7",
-        ...frameworkContentPlacementReusableData,
     },
     {
         body:
             "AngularJS can declaratively pass data to attributes using ng-attr, or to properties using ng-prop.",
         header: "AngularJS (1.x) 1.7.9",
-        ...frameworkContentPlacementReusableData,
     },
 ];