From ca29c3008b26e8378ac7c2736199a50cd6d947c5 Mon Sep 17 00:00:00 2001
From: Hannu Pelkonen <hannu@sc5.io>
Date: Fri, 27 Mar 2015 16:06:16 +0200
Subject: [PATCH] Change CSS order to prevent leakages when not using
 encapsulation

---
 lib/app/index.html    | 10 +++++++---
 lib/app/sass/app.scss |  5 ++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/lib/app/index.html b/lib/app/index.html
index f0c14a56..cb483049 100644
--- a/lib/app/index.html
+++ b/lib/app/index.html
@@ -4,8 +4,6 @@
   <meta charset="UTF-8">
   <link rel="icon" href="assets/img/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" type="text/css" data-noreload href="{{{appRoot}}}/css/app.css">
-  <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/styleguide_at_rules.css">
   <script>
     (function() {
       'use strict';
@@ -16,17 +14,23 @@
         ],
         head = document.querySelector('head');
 
-      function addCssLink(href) {
+      function addCssLink(href, options) {
         var link = document.createElement('link');
         link.setAttribute('rel', 'stylesheet');
         link.setAttribute('type', 'text/css');
         link.setAttribute('href', href);
+        if (options && options.noReload) {
+          link.setAttribute('data-noreload', true);
+        }
         head.appendChild(link);
       }
 
       if (typeof head.createShadowRoot !== 'function') {
         userStyleFiles.forEach(addCssLink);
       }
+
+      addCssLink('{{{appRoot}}}/styleguide_at_rules.css');
+      addCssLink('{{{appRoot}}}/css/app.css', {noReload: true});
     }());
   </script>
   <script type="text/ng-template" id="userStyles.html">
diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss
index b2e7b082..7df21c06 100644
--- a/lib/app/sass/app.scss
+++ b/lib/app/sass/app.scss
@@ -94,7 +94,8 @@ h4.sg,
 h5.sg {
   @include default-font;
   font-family: $primary-font;
-  font-weight: inherit;
+  font-weight: normal;
+  font-style: normal;
   line-height: 1.2;
   margin: 1.414em 0 .5em;
   color: #444;
@@ -398,6 +399,7 @@ $mobile: new-breakpoint(max-width 768px);
 
     h1 {
       font-family: $secondary-font;
+      font-style: normal;
       font-size: 1.8em;
       font-weight: 100;
       line-height: $header-height;
@@ -516,6 +518,7 @@ $mobile: new-breakpoint(max-width 768px);
 
 .sg.side-nav-toggle {
   font-family: $secondary-font;
+  font-style: normal;
 
   position: absolute;
   top: 2.0em;