Improvements to CSS (#7834)

Merge pull request 7834

docs/_sass/_font-awesome.scss

@@ -1,13 +1,15 @@
 @font-face {
   font-family: 'FontAwesome';
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
   src: url('../fonts/FontAwesome.eot?9h6hxj');
   src: url('../fonts/FontAwesome.eot?9h6hxj#iefix') format('embedded-opentype'),
        url('../fonts/FontAwesome.woff?9h6hxj') format('woff'),
        url('../fonts/FontAwesome.ttf?9h6hxj') format('truetype'),
        url('../fonts/FontAwesome.svg?9h6hxj#FontAwesome') format('svg');
-  font-weight: normal;
-  font-style: normal;
 }
+
 .fa {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
@@ -16,9 +18,11 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
 .fa-link:before {
   content: "\f0c1";
 }
+
 .fa-pencil:before {
   content: "\f040";
 }

docs/_sass/_fonts.scss

@@ -1,87 +1,90 @@
-/* lato-300 - latin */
+// *.woff2 support: Chrome 26+, Opera 23+, FireFox 3.6
+// *.woff support: Chrome 6+, Firefox 3.6+, IE9+, Safari 5.1+
+
+// Lato Light (300)
 @font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 300;
   src: local('Lato Light'), local('Lato-Light'),
-       url('../fonts/lato-v14-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-300.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-300.woff') format('woff');
   font-display: swap;
 }
 
-/* lato-300italic - latin */
+// Lato Light, Italic (300)
 @font-face {
   font-family: 'Lato';
   font-style: italic;
   font-weight: 300;
   src: local('Lato Light Italic'), local('Lato-LightItalic'),
-       url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-300italic.woff') format('woff');
   font-display: swap;
 }
 
-/* lato-regular - latin */
+// Lato Regular (400)
 @font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
   src: local('Lato Regular'), local('Lato-Regular'),
-       url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-regular.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-regular.woff') format('woff');
   font-display: swap;
 }
 
-/* lato-italic - latin */
+// Lato Regular, Italic (400)
 @font-face {
   font-family: 'Lato';
   font-style: italic;
   font-weight: 400;
   src: local('Lato Italic'), local('Lato-Italic'),
-       url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-italic.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-italic.woff') format('woff');
   font-display: swap;
 }
 
-/* lato-700 - latin */
+// Lato Bold (700)
 @font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
   src: local('Lato Bold'), local('Lato-Bold'),
-       url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-700.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-700.woff') format('woff');
   font-display: swap;
 }
 
-/* lato-700italic - latin */
+// Lato Bold, Italic (700)
 @font-face {
   font-family: 'Lato';
   font-style: italic;
   font-weight: 700;
   src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
-       url('../fonts/lato-v14-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-700italic.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-700italic.woff') format('woff');
   font-display: swap;
 }
 
-/* lato-900 - latin */
+// Lato Black (900)
 @font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 900;
   src: local('Lato Black'), local('Lato-Black'),
-       url('../fonts/lato-v14-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-900.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-900.woff') format('woff');
   font-display: swap;
 }
 
-/* lato-900italic - latin */
+// Lato Black, Italic (900)
 @font-face {
   font-family: 'Lato';
   font-style: italic;
   font-weight: 900;
   src: local('Lato Black Italic'), local('Lato-BlackItalic'),
-       url('../fonts/lato-v14-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('../fonts/lato-v14-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/lato-v14-latin-900italic.woff2') format('woff2'),
+       url('../fonts/lato-v14-latin-900italic.woff') format('woff');
   font-display: swap;
 }

docs/_sass/_style.scss

@@ -1,26 +1,36 @@
 /* Base */
 
- html {
-   box-sizing: border-box;
- }
+@charset "utf-8";
 
- *,
- *:before,
- *:after {
-   box-sizing: inherit;
- }
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
 
 body {
-  font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 21px;
+  font-weight: 300;  
   color: #ddd;
   background-color: #333;
   @include box-shadow(inset 0 3px 30px rgba(0,0,0,.3));
   text-shadow: 0 1px 3px rgba(0,0,0,.5);
-  -webkit-font-feature-settings: "kern" 1;
-  -moz-font-feature-settings: "kern" 1;
-  -o-font-feature-settings: "kern" 1;
-  font-feature-settings: "kern" 1;
-  font-kerning: normal;
+
+  // Not legible with 300 weight
+  // -moz-osx-font-smoothing: grayscale;
+  // -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  
+  -webkit-font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'onum', 'pnum';
+  -moz-font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'onum', 'pnum';
+  -ms-font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'onum', 'pnum';
+  -o-font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'onum', 'pnum';
+  font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'onum', 'pnum';
   margin: 0;
 }