improve index.html interface with ninja template

site/assets/fonts/material-design/scss/_core.scss

@@ -0,0 +1,10 @@
+.#{$mdi-css-prefix}:before,
+.#{$mdi-css-prefix}-set {
+  display: inline-block;
+  font: normal normal normal #{$mdi-font-size-base}/1 '#{$mdi-font-name}';
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: translate(0, 0);
+}

site/assets/fonts/material-design/scss/_extras.scss

@@ -0,0 +1,32 @@
+.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-18px'},
+.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-18px'}:before { font-size: 18px; }
+.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-24px'},
+.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-24px'}:before { font-size: 24px; }
+.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-36px'},
+.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-36px'}:before { font-size: 36px; }
+.#{$mdi-css-prefix}-set.#{$mdi-css-prefix + '-48px'},
+.#{$mdi-css-prefix}.#{$mdi-css-prefix + '-48px'}:before { font-size: 48px; }
+.#{$mdi-css-prefix}-dark { color: rgba(0, 0, 0, 0.54); }
+.#{$mdi-css-prefix}-dark.mdi-inactive { color: rgba(0, 0, 0, 0.26); }
+.#{$mdi-css-prefix}-light { color: rgba(255, 255, 255, 1); }
+.#{$mdi-css-prefix}-light.mdi-inactive { color: rgba(255, 255, 255, 0.3); }
+$degrees: 45 90 135 180 225 270 315;
+@each $degree in $degrees {
+    .#{$mdi-css-prefix}-rotate-#{$degree} {
+        -webkit-transform: rotate(#{$degree}deg);
+        -ms-transform: rotate(#{$degree}deg);
+        transform: rotate(#{$degree}deg);
+    }
+}
+.#{$mdi-css-prefix}-flip-horizontal {
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+        filter: FlipH;
+        -ms-filter: "FlipH";
+}
+.#{$mdi-css-prefix}-flip-vertical {
+        -webkit-transform: scaleY(-1);
+        transform: scaleY(-1);
+        filter: FlipV;
+        -ms-filter: "FlipV";
+}

site/assets/fonts/material-design/scss/_functions.scss

@@ -0,0 +1,16 @@
+@function char($character-code) {
+    @if function-exists("selector-append") {
+        @return unquote("\"\\#{$character-code}\"");
+    }
+
+    @if "\\#{'x'}" == "\\x" {
+        @return str-slice("\x", 1, 1) + $character-code;
+    }
+    @else {
+        @return #{"\"\\"}#{$character-code + "\""};
+    }
+}
+
+@function mdi($name) {
+    @return char(map-get($mdi-icons, $name));
+}

site/assets/fonts/material-design/scss/_icons.scss

@@ -0,0 +1,9 @@
+@each $key, $value in $mdi-icons {
+    .#{$mdi-css-prefix}-#{$key}:before {
+        content: char($value);
+    }
+}
+.#{$mdi-css-prefix}-blank:before {
+    content: "\F68C";
+    visibility: hidden;
+}

site/assets/fonts/material-design/scss/_path.scss

@@ -0,0 +1,11 @@
+@font-face {
+  font-family: '#{$mdi-font-name}';
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?v=#{$mdi-version}');
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff2?v=#{$mdi-version}') format('woff2'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff?v=#{$mdi-version}') format('woff'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.ttf?v=#{$mdi-version}') format('truetype'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}

site/assets/fonts/material-design/scss/materialdesignicons.scss

@@ -0,0 +1,7 @@
+/* MaterialDesignIcons.com */
+@import "variables";
+@import "functions";
+@import "path";
+@import "core";
+@import "icons";
+@import "extras";