Moves inline styles into separate files #194

Author: hirako2000

examples/assets/css/layout.css

@@ -0,0 +1,10 @@
+html, body {
+  position: relative;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}

examples/assets/css/style.css

@@ -0,0 +1,72 @@
+html, body {
+  position: relative;
+  height: 100%;
+  margin:0;
+  padding: 0;
+  overflow: hidden;
+  background: #262C38;
+}
+
+div.sidebar {
+  width: 300px;
+  float: left;
+  position: relative;
+  height: 100%;
+  overflow: auto;
+}
+
+.sidebar h1 {
+  font-family: 'Montserrat', sans-serif;
+  color: white;
+  text-align: center;
+}
+
+ul {
+  color: white;
+  list-style: none;
+}
+
+li.h {
+  color: white;
+  text-decoration: none;
+  font-family: 'Oxygen', sans-serif;
+  font-size: 14pt;
+  font-weight: bold;
+  line-height: 2;
+  padding-top: 15px;
+}
+
+li a {
+  color: white;
+  text-decoration: none;
+  font-family: 'Oxygen', sans-serif;
+}
+
+li a:hover {
+  text-decoration: underline;
+}
+
+iframe {
+  width: calc(100% - 300px);
+  float: right;
+  height: 100%;
+  border: none;
+}
+
+a.source {
+  position: fixed;
+  bottom: 50px;
+  right: 50px;
+  color: white;
+  border: 2px solid white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-family: 'Oxygen', sans-serif;
+  transition: all 0.1s linear;
+}
+
+a.source:hover {
+  background: #fff;
+  color: #078BDA;
+}

examples/index.pug

@@ -1,81 +1,9 @@
 html
   head
     include meta.pug
+    include style.pug
     style.
       @import url('https://fonts.googleapis.com/css?family=Cabin|Fjalla+One|Montserrat|Oxygen');
-
-      html, body {
-        position: relative;
-        height: 100%;
-        margin:0;
-        padding: 0;
-        overflow: hidden;
-        background: #262C38;
-      }
-
-      div.sidebar {
-        width: 300px;
-        float: left;
-        position: relative;
-        height: 100%;
-        overflow: auto;
-      }
-
-      .sidebar h1 {
-        font-family: 'Montserrat', sans-serif;
-        color: white;
-        text-align: center;
-      }
-
-      ul {
-        color: white;
-        list-style: none;
-      }
-
-      li.h {
-        color: white;
-        text-decoration: none;
-        font-family: 'Oxygen', sans-serif;
-        font-size: 14pt;
-        font-weight: bold;
-        line-height: 2;
-        padding-top: 15px;
-      }
-
-      li a {
-        color: white;
-        text-decoration: none;
-        font-family: 'Oxygen', sans-serif;
-      }
-
-      li a:hover {
-        text-decoration: underline;
-      }
-
-      iframe {
-        width: calc(100% - 300px);
-        float: right;
-        height: 100%;
-        border: none;
-      }
-
-      a.source {
-        position: fixed;
-        bottom: 50px;
-        right: 50px;
-        color: white;
-        border: 2px solid white;
-        padding: 5px 10px;
-        border-radius: 5px;
-        text-decoration: none;
-        font-family: 'Oxygen', sans-serif;
-        transition: all 0.1s linear;
-      }
-
-      a.source:hover {
-        background: #fff;
-        color: #078BDA;
-      }
   body
     div.sidebar
       h1 Examples

examples/layout.pug

@@ -3,17 +3,7 @@ html
     title Example
     include meta.pug
     block head
-    style(type='text/css').
-      html, body {
-        position: relative;
-        height: 100%;
-      }
-
-      body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
+    link(rel='stylesheet', href='../../assets/css/layout.css', type='text/css' )
   body
     block body
 

examples/style.pug

@@ -0,0 +1 @@
+link(rel='stylesheet', href='assets/css/style.css', type='text/css' )