diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss index ec7fb9aa58d2b8..4885114e6360f6 100644 --- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss +++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.module.scss @@ -47,11 +47,15 @@ background-color:$color-getStarted-darker; color: $ms-color-neutralLighter; - a, a:visited, + a:not(.title), a:visited, a:hover.title, .getStartedLink { border-bottom: 1px solid $ms-color-neutralLight; } + a.title { + border-bottom: 1px solid transparent; + } + a, a:hover, a:active, .getStartedLink { color: $ms-color-neutralLight; @@ -59,11 +63,15 @@ } .feature { - align-items: center; - display: flex; - flex-direction: column; margin-bottom: 32px; + .featureImage { + align-items: center; + display: flex; + flex-direction: column; + width: 100%; + } + img { height: 100%; margin-bottom: 8px; @@ -91,7 +99,7 @@ font-size: $font-size-big; font-weight: $ms-font-weight-semilight; margin-bottom: $contentMargin-vertical; - width: 100%; + display: table; } @media screen and (max-width: $uhf-screen-max-mobile) { diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx index 7841a5f4ecd702..2818756338b6d3 100644 --- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx +++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx @@ -49,26 +49,31 @@ export class GetStartedPage extends React.Component {
- Illustration of Typography and color swatches. -
Styles
+
+ Illustration of Typography and color swatches. +
+ Styles
Fabric gives you access to Segoe, Microsoft’s official typeface, along with the color palette, type ramp, icons, and responsive grid for Office 365.
- Illustration of Icons -
Icons
+
+ Illustration of Icons +
+ Icons
Fabric includes Office’s official product icons. Fabric also provides a suite of product and document symbols, so you can use the same metaphors we use.
- Illustration of Components -
Components
+
+ Illustration of Components +
+ Components
Components are the building blocks of your UI. Fabric has a variety of components, including navigation, commands, containers, and content.
- Design Toolkit + Design Toolkit The Fabric design toolkit is built with Adobe XD and provides controls and layout templates that enable you to create seamless, beautiful Office experiences. - Learn more
diff --git a/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json b/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json new file mode 100644 index 00000000000000..9d49b54fe3fc0a --- /dev/null +++ b/common/changes/@uifabric/fabric-website/get-started-links_2018-04-16-19-47.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/fabric-website", + "comment": "GetStarted page: Give titles links to their corresponding pages.", + "type": "minor" + } + ], + "packageName": "@uifabric/fabric-website", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file