Optimize Performance

layouts/css/_variables.styl

@@ -7,6 +7,8 @@ $node-gray  = #333
 $darkgray   = #666
 $lightgray  = #999
 
+$border-color = #c0c0c0
+
 padded-link($padding)
     padding-left $padding
     padding-right $padding

layouts/css/base.styl

@@ -3,8 +3,8 @@
 // Base styles
 body
     box-sizing border-box
-    font 300 20px/1.5 'Source Sans Pro', Arial, sans-serif
-    color #333
+    font 300 20px/1.5 'Source Sans Pro', Open Sans, Roboto, Helvetica, Arial, sans-serif
+    color $node-gray
     margin 0
     background-color #fff
 
@@ -18,7 +18,7 @@ h2,
 h3,
 h4,
 h5
-    font-weight normal
+    font-weight 400
 
 a,
 a:link,
@@ -55,7 +55,7 @@ code
 
 
 pre
-    background-color #333
+    background-color $node-gray
     border-radius 3px
     padding 0.75em 1.2em
     font-size 0.8em

layouts/css/layout/_lists.styl

@@ -5,12 +5,17 @@
     li
         display inline-block
 
-@media screen and (min-width: 481px)
-  .list-divider-pipe
+        + li:before
+            content '|'
+            padding 0 .3em 0 .1em
+            color $lightgray
 
-      li
 
-          + li:before
-              content '|'
-              padding 0 .3em 0 .1em
-              color $lightgray
+@media screen and (max-width: 480px)
+    nav
+        .list-divider-pipe
+            margin-bottom 1rem
+            overflow hidden
+
+            li + li:before
+                display none

layouts/css/layout/_sticky-footer.styl

@@ -1,10 +1,10 @@
-html
-    height 100%
+// html
+//     height 100%
 
 body
     display flex
     flex-direction column
-    height 100%
+    // height 100%
     min-height 100vh
     margin 0
 

layouts/css/page-modules/_download.styl

@@ -44,7 +44,7 @@
         width 33%
 
     td
-        border 1px solid #ccc
+        border 1px solid $border-color
 
         a,
         span
@@ -63,17 +63,17 @@ h5.download-table-previous-releases-header
 
 .download-table
     font-size small
-    border 1px solid #C0C0C0
+    border 1px solid $border-color
 
     td
         padding 5px
 
     > thead
-        font-weight bold
+        font-weight 600
 
     > tbody
         td
-            border-top 1px solid #C0C0C0
+            border-top 1px solid $border-color
 
         tr:nth-child(odd)
             background-color #eee
@@ -136,7 +136,7 @@ td.download-table-last
         td:before
             content attr(data-label)
             float left
-            font-weight bold
+            font-weight 600
 
         > thead > tr > th,
         > tbody > tr > th,

layouts/partials/footer.hbs

@@ -1,15 +1,5 @@
 <a href="#" id="scrollToTop">&uarr; <span>{{i18n.scrollToTop}}</span></a>
 
-<script type="text/javascript">
-    var $scrollToTop = document.getElementById('scrollToTop');
-    (window.onscroll = function() {
-        $scrollToTop.style.display = (window.pageYOffset > window.innerHeight) ? 'block' : 'none';
-    })();
-    $scrollToTop.onclick = function() {
-        window.scrollTo(0, 0);
-        return false;
-    };
-</script>
 <footer role="contentinfo">
 
     <div class="linuxfoundation-footer">
@@ -26,3 +16,16 @@
     </div>
 
 </footer>
+
+<link rel="stylesheet" href="/static/css/prism-tomorrow.css" media="all">
+<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" async defer></script>
+<script type="text/javascript">
+    var $scrollToTop = document.getElementById('scrollToTop');
+    (window.onscroll = function() {
+        $scrollToTop.style.display = (window.pageYOffset > window.innerHeight) ? 'block' : 'none';
+    })();
+    $scrollToTop.onclick = function() {
+        window.scrollTo(0, 0);
+        return false;
+    };
+</script>

layouts/partials/html-head.hbs

@@ -5,7 +5,6 @@
     <link rel="dns-prefetch" href="http://fonts.googleapis.com">
     <link rel="dns-prefetch" href="http://fonts.gstatic.com">
     <link rel="dns-prefetch" href="http://www.google-analytics.com">
-    <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
 
     <meta name="author" content="{{ site.author }}">
     <meta name="robots" content="{{#if robots}}{{ robots }}{{else}}index, follow{{/if}}">
@@ -19,14 +18,15 @@
         <link rel="alternate" href="/{{ ../site.locale }}/{{ link }}" title="{{ text }}" type="application/rss+xml">
     {{/each}}
     <link rel="stylesheet" href="/{{ site.locale }}/styles.css" media="all">
-    <link rel="stylesheet" href="/static/css/prism-tomorrow.css" media="all">
+
     <script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        var WebFontConfig = { google: { families: ['Source Sans Pro:300,400,600'] } };
+        !function(n,o,d,e,j,s){n.GoogleAnalyticsObject=d;n[d]||(n[d]=function(){
+        (n[d].q=n[d].q||[]).push(arguments)});n[d].l=+new Date;j=o.createElement(e);
+        s=o.getElementsByTagName(e)[0];j.src='//www.google-analytics.com/analytics.js';
+        s.parentNode.insertBefore(j,s)}(window,document,'ga','script');
 
-      ga('create', 'UA-67020396-1', 'auto');
-      ga('send', 'pageview');
+        ga('create', 'UA-67020396-1', 'auto');
+        ga('send', 'pageview');
     </script>
 </head>