Merge pull request #167 from frappe/docs

Home Page

docs/assets/css/default.css

@@ -1,99 +0,0 @@
-/*
-
-Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #F0F0F0;
-}
-
-
-/* Base color: saturation 0; */
-
-.hljs,
-.hljs-subst {
-  color: #444;
-}
-
-.hljs-comment {
-  color: #888888;
-}
-
-.hljs-keyword,
-.hljs-attribute,
-.hljs-selector-tag,
-.hljs-meta-keyword,
-.hljs-doctag,
-.hljs-name {
-  font-weight: bold;
-}
-
-
-/* User color: hue: 0 */
-
-.hljs-type,
-.hljs-string,
-.hljs-number,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-quote,
-.hljs-template-tag,
-.hljs-deletion {
-  color: #880000;
-}
-
-.hljs-title,
-.hljs-section {
-  color: #880000;
-  font-weight: bold;
-}
-
-.hljs-regexp,
-.hljs-symbol,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-link,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #BC6060;
-}
-
-
-/* Language color: hue: 90; */
-
-.hljs-literal {
-  color: #78A960;
-}
-
-.hljs-built_in,
-.hljs-bullet,
-.hljs-code,
-.hljs-addition {
-  color: #397300;
-}
-
-
-/* Meta color: hue: 200 */
-
-.hljs-meta {
-  color: #1f7199;
-}
-
-.hljs-meta-string {
-  color: #4d99bf;
-}
-
-
-/* Misc effects */
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

docs/assets/css/frappe_theme.css

@@ -1,693 +0,0 @@
-/*-------------------------------------
-
-Custom CSS
-
----------------------------------------*/
-body {
-  font-family: "proxima-nova", sans-serif;
-  font-size: 15px;
-  color: #6c7680;
-  text-rendering: optimizeLegibility !important;
-  line-height: 1.5em;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-p.lead {
-  font-family: "proxima-nova", sans-serif;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.lead,
-.page-sidebar,
-.breadcrumb,
-.label,
-.h6,
-.sans,
-blockquote {
-  font-family: "proxima-nova", sans-serif;
-  color: #36414C;
-}
-button,
-.button,
-.btn {
-  font-family: "proxima-nova", sans-serif;
-}
-.page-header-block,
-.page-header-actions {
-  display: none;
-}
-.btn-primary {
-  background-color: #7575ff;
-  border-color: #7575ff;
-}
-.btn-primary :hover {
-  background-color: #5b5be5;
-}
-article button,
-article .button,
-article .btn,
-blockquote {
-  font-size: 0.93em;
-}
-article ul > li,
-article ol > li {
-  margin: 10px 0px;
-}
-figcaption {
-  font-size: 0.8em;
-  color: #B8C2CC;
-  padding: 10px 0px;
-  line-height: 1.3em;
-}
-.text-extra-muted {
-  color: #B8C2CC !important;
-}
-.page-sidebar,
-.breadcrumb {
-  line-height: 1.5em;
-}
-.breadcrumb {
-  background-color: transparent;
-  padding: 10px 0px;
-}
-.breadcrumb a,
-.breadcrumb a:hover,
-.breadcrumb a:focus,
-.breadcrumb a:visited {
-  color: inherit;
-}
-.container,
-.navbar,
-footer {
-  max-width: 900px;
-  margin: auto;
-}
-@media (min-width: 768px) {
-  .narrow {
-    max-width: 75%;
-    margin: auto;
-  }
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 700;
-}
-p.description,
-p.description a {
-  color: #B8C2CC;
-  font-size: 1.06em;
-  margin: 12px 0 0;
-  text-decoration: none;
-}
-p.description a:focus,
-p.description a:active,
-p.description a:hover {
-  color: #36414C;
-}
-.hero-content p.description,
-.page-hero p.description,
-.hero-content p.description a,
-.page-hero p.description a {
-  font-size: 0.9em;
-}
-.hero-content .x-large.button,
-.page-hero .x-large.button {
-  font-size: 1em;
-}
-a {
-  color: #5E64FF;
-}
-a,
-a:focus,
-a:hover {
-  transition: color 0.3s, border 0.3s, background-color 0.3s;
-}
-a.grey {
-  color: #36414C;
-}
-a.close,
-a.btn {
-  text-decoration: none;
-}
-.navbar a,
-.sidebar-navbar-items a {
-  color: inherit;
-  text-decoration: none;
-  border-color: inherit;
-}
-.page-padding,
-.page-content {
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-.page-title {
-  text-align: center;
-  margin-top: 30px;
-}
-.page-sub-title {
-  color: #8D99A6;
-  text-align: center;
-  margin-top: 0px;
-  margin-bottom: 45px;
-  font-weight: 300;
-}
-.btn-white {
-  background-color: #fff;
-  color: #36414C;
-  border-color: #d1d8dd;
-}
-.btn-white:hover {
-  background-color: #fafbfc;
-}
-.screenshot {
-  border: 2px solid #d1d8dd;
-  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.15);
-  margin: 15px 0px;
-}
-blockquote {
-  border-left: 5px solid #F0F4F7;
-  background-color: #fafbfc;
-  margin-top: 15px;
-}
-blockquote p {
-  margin: 0px;
-}
-.page-hero {
-  padding: 130px 0px 100px;
-  margin-top: -60px;
-}
-h1 {
-  font-size: 2.13em;
-}
-.navbar {
-  background-color: transparent;
-}
-.button {
-  display: inline-block;
-  border-radius: 4px;
-  padding: 7px 12px 9px;
-  line-height: 1;
-  text-decoration: none;
-}
-.button:hover,
-.button:active,
-.button:focus {
-  text-decoration: none;
-}
-.large.button {
-  font-size: 1.33em;
-  padding: 12px 24px 10px;
-  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
-}
-.x-large.button {
-  font-size: 1.6em;
-  padding: 16px 40px;
-  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
-}
-.small.button {
-  padding-top: 11px;
-}
-.blue.button {
-  color: #fff;
-  background: #7575ff;
-  border: 0px;
-  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
-}
-.blue.button:hover {
-  background: #5b5be5;
-}
-.white.button {
-  color: #6C7680;
-  border: 1px solid #d1d8dd;
-}
-.white.button:hover {
-  background: #fafbfc;
-}
-.navbar {
-  padding: 10px 0px;
-  border-bottom: 1px solid #d1d8dd;
-}
-.navbar-brand,
-.navbar-brand:hover,
-.navbar-brand:visited,
-.navbar-brand:focus {
-  font-size: 1.2em;
-  text-decoration: none;
-  color: #36414C;
-}
-.hero {
-  padding: 70px 0;
-  font-size: 1.6em;
-  font-weight: 300;
-  text-align: center;
-}
-.hero-content {
-  font-weight: 300;
-  margin-top: 12px;
-}
-.hero-content h1 {
-  padding-top: 24px;
-  font-size: 1.5em;
-}
-.hero-content p {
-  width: 80%;
-  margin: 0 auto 24px;
-  line-height: 1.4;
-}
-.hero-content p.description {
-  margin-top: 16px;
-  margin-bottom: 0px;
-}
-.group,
-.border-bottom {
-  border-bottom: 1px solid #d1d8dd;
-}
-.row.section,
-section {
-  padding: 70px 0 70px;
-}
-.row.section p,
-section p {
-  color: #6c7680;
-}
-.content {
-  padding: 24px 40px 0;
-}
-.small-content {
-  text-align: center;
-  padding: 0 32px;
-}
-.small-content img {
-  width: 130px;
-  height: 130px;
-}
-.small-content h1 {
-  font-size: 1.5em;
-}
-.tiny-content {
-  margin-bottom: 40px;
-  font-size: 1em;
-}
-.tiny-content h1 {
-  color: #36414c;
-}
-.tiny-content p {
-  margin: 6px 0 0;
-  color: #858d95;
-}
-.tiny-content h1 {
-  font-size: 1.2em;
-}
-footer {
-  color: #8D99A6;
-  padding: 3px 0;
-  border-top: 1px solid #d1d8dd;
-}
-footer h1 {
-  color: #36414C;
-  font-size: 1.42em;
-  margin: 0;
-}
-footer p {
-  margin: 0;
-  padding: 2px 0 10px;
-  color: #6c7680;
-}
-footer ul,
-footer ul li {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  text-align: center;
-}
-footer li a {
-  text-decoration: none;
-  color: #6c7680;
-}
-footer li a:hover,
-footer li a:active,
-footer li a:focus {
-  color: #36414C;
-  text-decoration: none;
-}
-.footer-list {
-  text-align: center;
-  display: inline-block;
-  width: 100%;
-  margin-top: 50px;
-  margin-bottom: 10px;
-}
-.footer-list ul {
-  margin-top: 20px;
-}
-.footer-list li {
-  margin: 0px 15px;
-  display: inline-block;
-}
-.footer-link {
-  color: #B8C2CC;
-}
-.footer-link:hover,
-.footer-link:focus {
-  color: #8D99A6;
-}
-.copyright {
-  font-size: 0.8em;
-  text-align: center;
-  padding-bottom: 50px;
-}
-.copyright p {
-  padding-bottom: 0px;
-  color: #B8C2CC;
-}
-.center {
-  text-align: center;
-}
-/*-------------------------------------
-
-ERPNext
-
----------------------------------------*/
-.erp-next-logo {
-  margin: 8px 0;
-  height: 14px;
-  width: 76px;
-}
-.erp-hero {
-  width: 500px;
-  margin: auto;
-}
-.tabs {
-  text-align: center;
-}
-.tabs ul,
-.tabs li {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  display: inline-block;
-}
-.tabs ul {
-  margin: 0 auto;
-}
-.tabs li {
-  width: 64px;
-  text-align: center;
-  margin: 0 16px;
-}
-.tabs li input {
-  background: transparent;
-  border: 0;
-  color: #8d99a6;
-  padding-bottom: 8px;
-  transition: 0.5s;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-}
-.tabs li input:focus {
-  outline: none;
-}
-.tabs li input:hover {
-  color: #36414c;
-}
-.tabs li input.active {
-  color: #36414c;
-  border-bottom: 2px solid #7575ff;
-}
-.feature {
-  text-align: center;
-  display: none;
-}
-.feature p,
-.feature h1 {
-  width: 65%;
-  margin: 0 auto;
-}
-.feature h1 {
-  padding: 40px 0 16px;
-}
-.feature p {
-  font-size: 1.13em;
-  padding-bottom: 24px;
-}
-/*-------------------------------------
-
-Frappé for Developers
-
----------------------------------------*/
-.developers-hero {
-  width: 313px;
-}
-.developers-logo {
-  height: 19px;
-}
-.erp-framework {
-  width: 80%;
-  margin: 30px auto;
-}
-.get-involved {
-  color: #36414c;
-  font-size: 1.2em;
-  text-align: center;
-}
-.get-involved p {
-  margin-top: 0;
-}
-.get-involved img {
-  width: 20px;
-  height: 20px;
-  margin: -3px 10px 0 -5px;
-}
-.get-involved .button {
-  margin: 0 4px;
-}
-/*-------------------------------------
-
-Frappé
-
----------------------------------------*/
-.frappe-hero {
-  width: 385px;
-}
-.frappe-logo {
-  height: 19px;
-}
-.open-source {
-  text-align: center;
-}
-.open-source img {
-  width: 325px;
-}
-.team-picture {
-  text-align: center;
-}
-.team-picture h1 {
-  margin: 0 0 40px;
-}
-.team-description {
-  text-align: center;
-  margin-bottom: 20px;
-}
-.team-description a {
-  text-decoration: none;
-}
-.input-label {
-  margin: 16px 0 3px;
-  color: #8d99a6;
-  font-size: 0.93em;
-}
-#message {
-  height: 150px;
-}
-#send {
-  display: block;
-  text-align: center;
-  margin-top: 16px;
-}
-.office-map {
-  width: 394px;
-  margin-top: 40px;
-}
-.contact .content {
-  margin-top: -40px;
-}
-.page-breadcrumbs {
-  display: none !important;
-}
-.half-width {
-  max-width: 50%;
-  margin-left: auto;
-  margin-right: auto;
-}
-.width-75 {
-  max-width: 75%;
-  margin-left: auto;
-  margin-right: auto;
-}
-.media-object {
-  max-width: 120px;
-  margin-right: 15px;
-}
-.browser-image {
-  border: 1px solid #d1d8dd;
-}
-.fake-browser-frame {
-  position: relative;
-  margin: 40px auto;
-  max-width: 600px;
-}
-.fake-browser-frame::before {
-  content: "";
-  height: 24px;
-  position: absolute;
-  top: -24px;
-  left: 0px;
-  right: 0px;
-  border: 1px solid #d1d8dd;
-  border-bottom: none;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-.fake-browser-frame::after {
-  content: '\f052  \f052  \f052';
-  position: absolute;
-  color: #d1d8dd;
-  top: -17px;
-  left: 8px;
-  /* octicon */
-  font: normal normal 12px octicons;
-  line-height: 1;
-  display: inline-block;
-  text-decoration: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.fake-iphone-frame {
-  position: relative;
-  padding: 40px 8px;
-  border: 1px solid #d1d8dd;
-  border-radius: 15px;
-}
-.fake-ipad-frame {
-  position: relative;
-  padding: 8px 40px;
-  border: 1px solid #d1d8dd;
-  border-radius: 15px;
-}
-.cover {
-  width: 100%;
-}
-.underline {
-  color: inherit;
-  text-decoration: underline;
-}
-.underline:hover,
-.underline:focus,
-.underline:active {
-  color: #36414C;
-}
-.spacer {
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-article h3 {
-  margin-top: 40px;
-}
-article hr + h3 {
-  margin-top: 0px;
-}
-.negative-margin {
-  margin-left: -15px;
-  margin-right: -15px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.navbar-icon {
-  width: 24px;
-  margin-right: 7px;
-  margin-top: -3px;
-}
-.large-description {
-  line-height: 1.5;
-  font-size: 1.5em;
-  font-weight: 200;
-  display: inline-block;
-}
-@media (max-width: 767px) {
-  .navbar {
-    height: auto;
-  }
-  .hero {
-    font-size: 1.2em;
-  }
-  .large-description {
-    font-size: 1.2em;
-  }
-  .hero-content h1 {
-    font-size: 1.2em;
-  }
-  .hero-content p {
-    width: 100%;
-  }
-  .small-content {
-    padding-top: 70px;
-  }
-  .small-content:first-child {
-    padding-top: 0px;
-  }
-  .page-content {
-    padding-top: 0px;
-  }
-  .footer-list {
-    margin-top: 40px;
-  }
-  .footer-list li {
-    margin: 15px 0px;
-    display: block;
-    text-align: left;
-  }
-  .copyright {
-    text-align: left;
-    padding-bottom: 55px;
-  }
-  .half-width {
-    max-width: 90%;
-  }
-  .width-75 {
-    max-width: 100%;
-  }
-  .fake-iphone-frame {
-    display: inline-block;
-    margin-bottom: 60px;
-  }
-  .erp-hero {
-    margin-bottom: 1px;
-  }
-}
-.website-list .result {
-  border: none;
-}
-.page-container {
-  max-width: 970px;
-  margin: 0 auto;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.jumbotron {
-  margin-bottom: 0;
-}

docs/assets/css/hljs.css

@@ -0,0 +1,99 @@
+/*
+  github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+*/
+
+.hljs {
+  display: block;
+  color: #36414c;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F8F8F9;
+  border-radius: 3px;
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #998;
+ font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+ color: #333;
+ font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+ color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+ color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+ color: #900;
+ font-weight: bold;
+}
+
+.hljs-subst {
+ font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+ color: #458;
+ font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+ color: #000080;
+ font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+ color: #009926;
+}
+
+.hljs-symbol,
+
+.hljs-bullet {
+ color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+ color: #0086b3;
+}
+
+.hljs-meta {
+ color: #999;
+ font-weight: bold;
+}
+
+.hljs-deletion {
+ background: #fdd;
+}
+
+.hljs-addition {
+ background: #dfd;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}

docs/assets/css/index.css

@@ -1,70 +1,97 @@
-.page-header {
-	width: 100%;
-	text-align: center;
-	color: #fff;
-	padding: 2em 0;
+body {
+	/* container styles */
+    max-width: 720px;
+    margin: auto;
+
+	font-family: "proxima-nova", sans-serif;
+	font-size: 15px;
+	color: #6c7680;
+	text-rendering: optimizeLegibility !important;
+	line-height: 1.5em;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
 }
-.jumbotron {
-    padding: 2rem 2rem;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.lead,
+.page-sidebar,
+.breadcrumb,
+.label,
+.h6,
+.sans,
+blockquote {
+	font-family: "proxima-nova", sans-serif;
+	color: #36414C;
 }
-.project-name {
-	padding-top: 1.8em;
-	font-size: 2.5em;
+
+header {
+	margin: 4rem 0;  /* SAME 1 */
+	font-size: 1.6em;
+	font-weight: 300;
+	text-align: center;
 }
-.project-tagline {
-	font-size: 1em;
-	opacity: 0.7;
-	padding: 2em;
+header .lead-text {
+	line-height: 3rem;
+	margin: 2rem 0;
 }
-.btn-transparent {
-	margin: 0 0.5em;
-	color: #fff;
-	background: rgba(255, 255, 255, 0.1);
-	border: 1px solid rgba(255, 255, 255, 0.4);
+.demo-tip {
+	margin-top: 1rem;   /* SAME 2 */
+	font-size: 1rem;
 }
-.btn-transparent:hover {
-	color: #fff;
-	background: rgba(255, 255, 255, 0.3);
+section {
+	margin: 4em 0;   /* SAME 1 */
 }
-
-.main-content {
-	padding: 2em;
+h1 {
+	font-size: 3.5rem;
+    margin-bottom: 1.5rem;
 }
-
-.main-content .row {
-	margin-bottom: 20px;
+h1, h6 {
+	font-weight: 700;
 }
-
-hr {
-	margin-bottom: 2rem;
+.btn {
+	outline: none !important;
 }
-
-.step-explain {
-	margin-top: 30px;
+.blue.button {
+	color: #fff;
+	background: #7575ff;
+	border: 0px;
+	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
 }
-
-pre.highlight {
-	background: #f7f7f7;
-	border-radius: 3px;
+.blue.button:hover {
+	background: #5b5be5;
 }
-
-.btn {
-	outline: none !important;
+.large.button {
+	font-size: 1.33em;
+	padding: 12px 24px 10px;
+	border-bottom: 3px solid rgba(0, 0, 0, 0.2);
+}
+a {
+	color: #5E64FF;
 }
-.dashboard-section h1 {
-	margin-left: -2px;
+a, a:focus, a:hover {
+	transition: color 0.3s, border 0.3s, background-color 0.3s;
 }
 
-.hero .gantt-container {
-	text-align: left;
+
+/* BaseCSS */
+.margin-top {
+	margin-top: 1rem; /* SAME 2 */
 }
-.hero {
-	/*font-size: 1.4rem;*/
+.mv1 {
+	margin: 2em 0 1em 0;
 }
-.data-container {
-	padding: 20px;
-	padding-bottom: 0px;
+.border {
+	border: 1px solid #ddd;
+	border-radius: 3px;
 }
+
+
+/* Moon images */
 .image-container {
 	padding: 3px;
 }
@@ -72,19 +99,12 @@ pre.highlight {
 	display: block;
     width: 100%;
 }
-.data p {
+.content-data p {
 	margin-bottom: 5px;
 	font-size: 12px;
 }
-.margin-vertical-px {
-	margin: 15px 0px;
-}
 
-.margin-vertical-rem {
-	margin: 2em 0 1em 0;
-}
 
-.border {
-	border: 1px solid #ddd;
-	border-radius: 3px;
+.text-center {
+	text-align: center;
 }

docs/assets/css/normalize.css

@@ -1,424 +0,0 @@
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit; /* 1 */
-  font: inherit; /* 2 */
-  margin: 0; /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
-button {
-  overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-input {
-  line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */ /* 2 */
-  box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/* Tables
-   ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}

docs/assets/css/reset.css

@@ -0,0 +1,353 @@
+/*!
+ *this reset is a copy of bootstrap's reboot.css which is inturn a fork of normalise*
+ * Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+
+ *,
+ *::before,
+ *::after {
+   box-sizing: border-box;
+ }
+
+ html {
+   font-family: sans-serif;
+   -webkit-text-size-adjust: 100%;
+   -ms-text-size-adjust: 100%;
+   -ms-overflow-style: scrollbar;
+   -webkit-tap-highlight-color: transparent;
+   --line-height: 3;
+   line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
+ }
+
+ @-ms-viewport {
+   width: device-width;
+ }
+
+ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+   display: block;
+ }
+
+ body {
+   margin: 0;
+   font-size: 1em;
+   font-weight: 400;
+   /* line-height: 1.5; */
+   text-align: left;
+   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans",  Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+   color: #36414c;
+   font-weight:normal;
+   -webkit-text-size-adjust: 100%;
+   -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;
+   text-rendering: optimizeLegibility;
+ }
+
+ [tabindex="-1"]:focus {
+   outline: 0 !important;
+ }
+
+ hr {
+   box-sizing: content-box;
+   height: 0;
+   overflow: visible;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+   margin-top: 0;
+   margin-bottom: 1.6rem;
+ }
+
+ p {
+   margin-top: 0;
+   margin-bottom: 1rem;
+ }
+
+ abbr[title],
+ abbr[data-original-title] {
+   text-decoration: underline;
+   -webkit-text-decoration: underline dotted;
+   text-decoration: underline dotted;
+   cursor: help;
+   border-bottom: 0;
+ }
+
+ address {
+   margin-bottom: 1rem;
+   font-style: normal;
+   line-height: inherit;
+ }
+
+ ol,
+ ul,
+ dl {
+   margin-top: 0;
+   margin-bottom: 1rem;
+ }
+
+ ol ol,
+ ul ul,
+ ol ul,
+ ul ol {
+   margin-bottom: 0;
+ }
+
+ dt {
+   font-weight: 700;
+ }
+
+ dd {
+   margin-bottom: .5rem;
+   margin-left: 0;
+ }
+
+ blockquote {
+   margin: 0 0 1rem;
+ }
+
+ dfn {
+   font-style: italic;
+ }
+
+ b,
+ strong {
+   font-weight: bolder;
+ }
+
+ small {
+   font-size: 80%;
+ }
+
+ sub,
+ sup {
+   position: relative;
+   font-size: 75%;
+   line-height: 0;
+   vertical-align: baseline;
+ }
+
+ sub {
+   bottom: -.25em;
+ }
+
+ sup {
+   top: -.5em;
+ }
+
+ a {
+   color: #007bff;
+   text-decoration: none;
+   background-color: transparent;
+   -webkit-text-decoration-skip: objects;
+ }
+
+ a:hover {
+   color: #0056b3;
+   text-decoration: underline;
+ }
+
+ a:not([href]):not([tabindex]) {
+   color: inherit;
+   text-decoration: none;
+ }
+
+ a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
+   color: inherit;
+   text-decoration: none;
+ }
+
+ a:not([href]):not([tabindex]):focus {
+   outline: 0;
+ }
+
+ pre,
+ code,
+ kbd,
+ samp {
+   font-family: monospace, monospace;
+   font-size: 1em;
+ }
+
+ pre {
+   margin-top: 0;
+   margin-bottom: 1rem;
+   overflow: auto;
+   -ms-overflow-style: scrollbar;
+ }
+
+ figure {
+   margin: 0 0 1rem;
+ }
+
+ img {
+   vertical-align: middle;
+   border-style: none;
+ }
+
+ svg:not(:root) {
+   overflow: hidden;
+ }
+
+ a,
+ area,
+ button,
+ [role="button"],
+ input:not([type="range"]),
+ label,
+ select,
+ summary,
+ textarea {
+   -ms-touch-action: manipulation;
+   touch-action: manipulation;
+ }
+
+ table {
+   border-collapse: collapse;
+ }
+
+ caption {
+   padding-top: 0.75rem;
+   padding-bottom: 0.75rem;
+   color: #6c757d;
+   text-align: left;
+   caption-side: bottom;
+ }
+
+ th {
+   text-align: inherit;
+ }
+
+ label {
+   display: inline-block;
+   margin-bottom: .5rem;
+ }
+
+ button {
+   border-radius: 0;
+ }
+
+ button:focus {
+   outline: 1px dotted;
+   outline: 5px auto -webkit-focus-ring-color;
+ }
+
+ input,
+ button,
+ select,
+ optgroup,
+ textarea {
+   margin: 0;
+   font-family: inherit;
+   font-size: inherit;
+   line-height: inherit;
+ }
+
+ button,
+ input {
+   overflow: visible;
+ }
+
+ button,
+ select {
+   text-transform: none;
+ }
+
+ button,
+ html [type="button"],
+ [type="reset"],
+ [type="submit"] {
+   -webkit-appearance: button;
+ }
+
+ button::-moz-focus-inner,
+ [type="button"]::-moz-focus-inner,
+ [type="reset"]::-moz-focus-inner,
+ [type="submit"]::-moz-focus-inner {
+   padding: 0;
+   border-style: none;
+ }
+
+ input[type="radio"],
+ input[type="checkbox"] {
+   box-sizing: border-box;
+   padding: 0;
+ }
+
+ input[type="date"],
+ input[type="time"],
+ input[type="datetime-local"],
+ input[type="month"] {
+   -webkit-appearance: listbox;
+ }
+
+ textarea {
+   overflow: auto;
+   resize: vertical;
+ }
+
+ fieldset {
+   min-width: 0;
+   padding: 0;
+   margin: 0;
+   border: 0;
+ }
+
+ legend {
+   display: block;
+   width: 100%;
+   max-width: 100%;
+   padding: 0;
+   margin-bottom: .5rem;
+   font-size: 1.5rem;
+   line-height: inherit;
+   color: inherit;
+   white-space: normal;
+ }
+
+ progress {
+   vertical-align: baseline;
+ }
+
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
+   height: auto;
+ }
+
+ [type="search"] {
+   outline-offset: -2px;
+   -webkit-appearance: none;
+ }
+
+ [type="search"]::-webkit-search-cancel-button,
+ [type="search"]::-webkit-search-decoration {
+   -webkit-appearance: none;
+ }
+
+ ::-webkit-file-upload-button {
+   font: inherit;
+   -webkit-appearance: button;
+ }
+
+ output {
+   display: inline-block;
+ }
+
+ summary {
+   display: list-item;
+   cursor: pointer;
+ }
+
+ template {
+   display: none;
+ }
+
+ [hidden] {
+   display: none !important;
+ }
+ /*# sourceMappingURL=bootstrap-reboot.css.map */

docs/assets/js/data.js

@@ -1,5 +1,4 @@
-import { SEC_IN_DAY, MONTH_NAMES_SHORT, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
-import { getRandomBias } from '../../../src/js/utils/helpers';
+import { MONTH_NAMES_SHORT } from '../../../src/js/utils/date-utils';
 
 // Composite Chart
 // ================================================================================
@@ -178,28 +177,3 @@ export const moonData = {
 
 // ================================================================================
 
-let today = new Date();
-let start = clone(today);
-addDays(start, 4);
-let end = clone(start);
-start.setFullYear( start.getFullYear() - 2 );
-end.setFullYear( end.getFullYear() - 1 );
-
-export let dataPoints = {};
-
-let startTs = timestampSec(start);
-let endTs = timestampSec(end);
-
-startTs = timestampToMidnight(startTs);
-endTs = timestampToMidnight(endTs, true);
-
-while (startTs < endTs) {
-	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
-	startTs += SEC_IN_DAY;
-}
-
-export const heatmapData = {
-	dataPoints: dataPoints,
-	start: start,
-	end: end
-};

docs/assets/js/demoConfig.js

@@ -0,0 +1,54 @@
+import { lineCompositeData, barCompositeData } from './data';
+
+export default {
+	lineComposite: {
+		elementID: "#chart-composite-1",
+		options: {
+			title: "Fireball/Bolide Events - Yearly (reported)",
+			data: lineCompositeData,
+			type: "line",
+			height: 190,
+			colors: ["green"],
+			isNavigable: 1,
+			valuesOverPoints: 1,
+
+			lineOptions: {
+				dotSize: 8
+			}
+		}
+	},
+
+	barComposite: {
+		elementID: "#chart-composite-2",
+		options: {
+			data: barCompositeData,
+			type: "bar",
+			height: 210,
+			colors: ["violet", "light-blue", "#46a9f9"],
+			valuesOverPoints: 1,
+			axisOptions: {
+				xAxisMode: "tick"
+			},
+			barOptions: {
+				stacked: 1
+			}
+		}
+	},
+
+	demoMain: {
+		elementID: "",
+		options: {
+			title: "My Awesome Chart",
+			data: "typeData",
+			type: "axis-mixed",
+			height: 300,
+			colors: ["purple", "magenta", "light-blue"],
+			maxSlices: 10,
+
+			tooltipOptions: {
+				formatTooltipX: d => (d + '').toUpperCase(),
+				formatTooltipY: d => d + ' pts',
+			}
+		}
+	}
+}

docs/assets/js/index.js

@@ -1,45 +1,19 @@
 import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
 import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
+import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
 import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
-	barCompositeData, typeData, trendsData, moonData, heatmapData } from './data';
-
+	barCompositeData, typeData, trendsData, moonData } from './data';
+import demoConfig from './demoConfig';
+// import { lineComposite, barComposite } from './demoConfig';
 // ================================================================================
 
-let c1 = document.querySelector("#chart-composite-1");
-let c2 = document.querySelector("#chart-composite-2");
-
 let Chart = frappe.Chart; // eslint-disable-line no-undef
 
-let lineCompositeChart = new Chart (c1, {
-	title: "Fireball/Bolide Events - Yearly (reported)",
-	data: lineCompositeData,
-	type: 'line',
-	height: 190,
-	colors: ['green'],
-	isNavigable: 1,
-	valuesOverPoints: 1,
+let lc = demoConfig.lineComposite;
+let lineCompositeChart = new Chart (lc.elementID, lc.options);
 
-	lineOptions: {
-		dotSize: 8
-	},
-	// yAxisMode: 'tick'
-	// regionFill: 1
-});
-
-let barCompositeChart = new Chart (c2, {
-	data: barCompositeData,
-	type: 'bar',
-	height: 210,
-	colors: ['violet', 'light-blue', '#46a9f9'],
-	valuesOverPoints: 1,
-	axisOptions: {
-		xAxisMode: 'tick'
-	},
-	barOptions: {
-		stacked: 1
-	},
-
-});
+let bc = demoConfig.barComposite;
+let barCompositeChart = new Chart (bc.elementID, bc.options);
 
 lineCompositeChart.parent.addEventListener('data-select', (e) => {
 	let i = e.index;
@@ -288,6 +262,32 @@ eventsChart.parent.addEventListener('data-select', (e) => {
 // Heatmap
 // ================================================================================
 
+let today = new Date();
+let start = clone(today);
+addDays(start, 4);
+let end = clone(start);
+start.setFullYear( start.getFullYear() - 2 );
+end.setFullYear( end.getFullYear() - 1 );
+
+let dataPoints = {};
+
+let startTs = timestampSec(start);
+let endTs = timestampSec(end);
+
+startTs = timestampToMidnight(startTs);
+endTs = timestampToMidnight(endTs, true);
+
+while (startTs < endTs) {
+	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
+	startTs += SEC_IN_DAY;
+}
+
+const heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};
+
 let heatmapArgs = {
 	title: "Monthly Distribution",
 	data: heatmapData,

docs/assets/js/index.min.js

@@ -46,12 +46,6 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
 
 // Universal constants
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
-
-
 /**
  * Returns whether or not two given arrays are equal.
  * @param {Array} arr1 First array
@@ -120,6 +114,7 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
 
 
 
+// https://stackoverflow.com/a/11252167/6495043
 
 
 function clone(date) {
@@ -160,8 +155,6 @@ function addDays(date, numberOfDays) {
 	date.setDate(date.getDate() + numberOfDays);
 }
 
-// Composite Chart
-// ================================================================================
 var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
 
 var lineCompositeData = {
@@ -274,69 +267,70 @@ var moonData = {
 
 // ================================================================================
 
-var today = new Date();
-var start = clone(today);
-addDays(start, 4);
-var end = clone(start);
-start.setFullYear(start.getFullYear() - 2);
-end.setFullYear(end.getFullYear() - 1);
-
-var dataPoints = {};
-
-var startTs = timestampSec(start);
-var endTs = timestampSec(end);
-
-startTs = timestampToMidnight(startTs);
-endTs = timestampToMidnight(endTs, true);
+var demoConfig = {
+	lineComposite: {
+		elementID: "#chart-composite-1",
+		options: {
+			title: "Fireball/Bolide Events - Yearly (reported)",
+			data: lineCompositeData,
+			type: "line",
+			height: 190,
+			colors: ["green"],
+			isNavigable: 1,
+			valuesOverPoints: 1,
+
+			lineOptions: {
+				dotSize: 8
+			}
+		}
+	},
 
-while (startTs < endTs) {
-	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
-	startTs += SEC_IN_DAY;
-}
+	barComposite: {
+		elementID: "#chart-composite-2",
+		options: {
+			data: barCompositeData,
+			type: "bar",
+			height: 210,
+			colors: ["violet", "light-blue", "#46a9f9"],
+			valuesOverPoints: 1,
+			axisOptions: {
+				xAxisMode: "tick"
+			},
+			barOptions: {
+				stacked: 1
+			}
+		}
+	},
 
-var heatmapData = {
-	dataPoints: dataPoints,
-	start: start,
-	end: end
+	demoMain: {
+		elementID: "",
+		options: {
+			title: "My Awesome Chart",
+			data: "typeData",
+			type: "axis-mixed",
+			height: 300,
+			colors: ["purple", "magenta", "light-blue"],
+			maxSlices: 10,
+
+			tooltipOptions: {
+				formatTooltipX: function formatTooltipX(d) {
+					return (d + '').toUpperCase();
+				},
+				formatTooltipY: function formatTooltipY(d) {
+					return d + ' pts';
+				}
+			}
+		}
+	}
 };
 
-// ================================================================================
-
-var c1 = document.querySelector("#chart-composite-1");
-var c2 = document.querySelector("#chart-composite-2");
-
 var Chart = frappe.Chart; // eslint-disable-line no-undef
 
-var lineCompositeChart = new Chart(c1, {
-	title: "Fireball/Bolide Events - Yearly (reported)",
-	data: lineCompositeData,
-	type: 'line',
-	height: 190,
-	colors: ['green'],
-	isNavigable: 1,
-	valuesOverPoints: 1,
+var lc = demoConfig.lineComposite;
+var lineCompositeChart = new Chart(lc.elementID, lc.options);
 
-	lineOptions: {
-		dotSize: 8
-	}
-	// yAxisMode: 'tick'
-	// regionFill: 1
-});
-
-var barCompositeChart = new Chart(c2, {
-	data: barCompositeData,
-	type: 'bar',
-	height: 210,
-	colors: ['violet', 'light-blue', '#46a9f9'],
-	valuesOverPoints: 1,
-	axisOptions: {
-		xAxisMode: 'tick'
-	},
-	barOptions: {
-		stacked: 1
-	}
-
-});
+var bc = demoConfig.barComposite;
+var barCompositeChart = new Chart(bc.elementID, bc.options);
 
 lineCompositeChart.parent.addEventListener('data-select', function (e) {
 	var i = e.index;
@@ -575,6 +569,32 @@ eventsChart.parent.addEventListener('data-select', function (e) {
 // Heatmap
 // ================================================================================
 
+var today = new Date();
+var start = clone(today);
+addDays(start, 4);
+var end = clone(start);
+start.setFullYear(start.getFullYear() - 2);
+end.setFullYear(end.getFullYear() - 1);
+
+var dataPoints = {};
+
+var startTs = timestampSec(start);
+var endTs = timestampSec(end);
+
+startTs = timestampToMidnight(startTs);
+endTs = timestampToMidnight(endTs, true);
+
+while (startTs < endTs) {
+	dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
+	startTs += SEC_IN_DAY;
+}
+
+var heatmapData = {
+	dataPoints: dataPoints,
+	start: start,
+	end: end
+};
+
 var heatmapArgs = {
 	title: "Monthly Distribution",
 	data: heatmapData,
@@ -650,4 +670,3 @@ document.querySelector('.export-heatmap').addEventListener('click', function ()
 });
 
 }());
-//# sourceMappingURL=index.min.js.map

docs/index.html

@@ -7,12 +7,11 @@
     <meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize">
     <meta name="description" content="A simple, responsive, modern charts library for the web.">
 
-    <link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
-    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen">
     <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
     <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
-    <link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
+    <link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen">
+
     <script src="assets/js/highlight.pack.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
 
@@ -23,32 +22,19 @@
   </head>
 
   <body>
-    <div class="container">
-      <div class="row hero" style="padding-top: 30px; padding-bottom: 0px;">
-        <div class="jumbotron" style="background: transparent;">
-          <h1>Frappe Charts</h1>
-          <p class="mt-2">GitHub-inspired simple and modern SVG charts for the web</p>
-          <p class="mt-2">with zero dependencies.</p>
-        </div>
-
-        <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-1" class="border"><svg height=225></svg></div>
-          <p class="mt-1">Click or use arrow keys to navigate data points</p>
-        </div>
-        <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
-          <div id="chart-composite-2" class="border"><svg height=225></svg></div>
-        </div>
-      </div>
-
-      <div class="group later">
-        <div class="row section">
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">Create a chart</h6>
-              <pre><code class="hljs html">  &lt!--HTML--&gt;
+    <header>
+      <h1>Frappe Charts</h1>
+      <p class="lead-text">GitHub-inspired simple and modern SVG charts for the web<br>with zero dependencies.</p>
+      <div id="chart-composite-1" class="border"></div>
+      <p class="demo-tip">Click or use arrow keys to navigate data points</p>
+      <div id="chart-composite-2" class="border"></div>
+    </header>
+
+    <section>
+      <h6>Create a chart</h6>
+      <pre><code class="hljs html">  &lt!--HTML--&gt;
   &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
-              <pre><code class="hljs javascript">  // Javascript
+      <pre><code class="hljs javascript">  // Javascript
   let chart = new frappe.Chart( "#chart", { // or DOM element
     data: {
       labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
@@ -88,130 +74,91 @@
 
   chart.export();
 </code></pre>
-              <!-- <div id="chart-types" class="border" style="margin-bottom: 15px"></div> -->
-              <!-- <div >
-                <div class="btn-group x-axis-buttons margin-vertical-px" role="group">
-                  <button type="button" class="btn btn-sm btn-secondary active" data-type='span'>X span</button>
-                  <button type="button" class="btn btn-sm btn-secondary" data-type='tick'>X tick</button>
-                </div>
-                <div class="btn-group y-axis-buttons margin-vertical-px" role="group">
-                  <button type="button" class="btn btn-sm btn-secondary active" data-type='span'>Y span</button>
-                  <button type="button" class="btn btn-sm btn-secondary" data-type='tick'>Y tick</button>
-                </div>
-                <div class="input-group input-group-sm">
-                  <span class="input-group-addon">.00</span>
-                  <input type="text" class="form-control" aria-label="Amount (rounded to the nearest dollar)">
-                </div>
-              </div> -->
-
-              <div id="chart-aggr" class="border"></div>
-              <div class="btn-group aggr-type-buttons margin-vertical-px mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
-              </div>
-              <div class="btn-group export-buttons margin-vertical-px mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
-              </div>
-              <!-- <p class="text-muted">
-                <a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a>
-              </p> -->
-            </div>
-          </div>
 
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Update Values
-              </h6>
-              <div id="chart-update" class="border"></div>
-              <div class="chart-update-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
-                <button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
-              </div>
-            </div>
-          </div>
+      <div id="chart-aggr" class="border"></div>
+      <div class="btn-group aggr-type-buttons margin-top mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
+      </div>
+      <div class="btn-group export-buttons margin-top mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button>
+      </div>
+    </section>
 
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Plot Trends
-              </h6>
-              <div id="chart-trends" class="border"></div>
-              <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
-                <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
-              </div>
-              <div class="btn-group export-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
-              </div>
-              <!-- <pre><code class="hljs javascript margin-vertical-px">  ...
-    lineOptions: 'line',   // Line Chart specific properties:
-
-    hideDots: 1,   // Hide data points on the line; default 0
-    heatline: 1,    // Show a value-wise line gradient; default 0
-    regionFill: 1, // Fill the area under the graph; default 0
-  ...</code></pre> -->
-            </div>
-          </div>
+    <section>
+      <h6>Update Values</h6>
+      <div id="chart-update" class="border"></div>
+
+      <div class="chart-update-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
+        <button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button>
+      </div>
+    </section>
 
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                Listen to state change
-              </h6>
-              <div class="row">
-                <div class="col-sm-8">
-                  <div id="chart-events" class="border"></div>
-                </div>
-                <div class="col-sm-4">
-                  <div class="chart-events-data" class="border data-container">
-                    <div class="image-container border">
-                      <img class="moon-image" src="./assets/img/europa.jpg">
-                    </div>
-                    <div class="data margin-vertical-px">
-                      <h6 class="moon-name">Europa</h6>
-                      <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
-                      <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
-                      <p>Diameter: <span class="diameter">3121.6</span> km</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  ...
-    isNavigable: 1, // Navigate across data points; default 0
+    <section>
+      <h6>Plot Trends</h6>
+      <div id="chart-trends" class="border"></div>
+
+      <div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button>
+        <button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button>
+      </div>
+      <div class="btn-group export-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button>
+      </div>
+    </section>
+
+    <section>
+      <h6>Listen to state change</h6>
+      <div class="row">
+        <div class="col-sm-8">
+          <div id="chart-events" class="border"></div>
+        </div>
+        <div class="col-sm-4 chart-events-data">
+          <div class="image-container border">
+            <img class="moon-image" src="./assets/img/europa.jpg">
+          </div>
+          <div class="content-data margin-top">
+            <h6 class="moon-name">Europa</h6>
+            <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>
+            <p>Mass: <span class="mass">4800000</span>  x 10^16 kg</p>
+            <p>Diameter: <span class="diameter">3121.6</span> km</p>
+          </div>
+        </div>
+      </div>
+      <pre><code class="hljs javascript margin-top">  ...
+  isNavigable: 1, // Navigate across data points; default 0
   ...
 
   chart.parent.addEventListener('data-select', (e) => {
     update_moon_data(e.index); // e contains index and value of current datapoint
   });</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">
-                And a Month-wise Heatmap
-              </h6>
-              <div id="chart-heatmap" class="border"
-                style="overflow: scroll;"></div>
-              <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
-              </div>
-              <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
-                <button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
-                <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
-              </div>
-              <div class="btn-group export-buttons mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
-              </div>
-              <pre><code class="hljs javascript margin-vertical-px">  let heatmap = new frappe.Chart("#heatmap", {
+    </section>
+
+    <section>
+      <h6>
+        And a Month-wise Heatmap
+      </h6>
+      <div id="chart-heatmap" class="border"
+        style="overflow: scroll;"></div>
+      <div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
+      </div>
+      <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
+        <button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
+      </div>
+      <div class="btn-group export-buttons mt-1 mx-auto" role="group">
+        <button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button>
+      </div>
+      <pre><code class="hljs javascript margin-top">  let heatmap = new frappe.Chart("#heatmap", {
     type: 'heatmap',
     title: "Monthly Distribution",
     data: {
@@ -223,138 +170,126 @@
     countLabel: 'Level',
     discreteDomains: 0  // default: 1
     colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
-                  // Set of five incremental colors,
-                  // preferably with a low-saturation color for zero data;
-                  // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
+                // Set of five incremental colors,
+                // preferably with a low-saturation color for zero data;
+                // def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
   });</code></pre>
-            </div>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
-              data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
-                See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
-                by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
-                <a href="https://codepen.io">CodePen</a>.
-            </p>
-            <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-          </div>
-
-          <div class="col-sm-10 push-sm-1">
-              <div class="dashboard-section">
-                <h6 class="margin-vertical-rem">Available options:</h6>
-                <pre><code class="hljs javascript">
-  ...
-  {
-    data: {
-      labels: [],
-      datasets: [],
-      yRegions: [],
-      yMarkers: []
+    </section>
+
+    <section>
+      <h6>Demo</h6>
+      <p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"
+        data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">
+          See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>
+          by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on
+          <a href="https://codepen.io">CodePen</a>.
+      </p>
+      <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+    </section>
+
+    <section>
+      <h6>Available options</h6>
+      <pre><code class="hljs javascript">
+    ...
+    {
+      data: {
+        labels: [],
+        datasets: [],
+        yRegions: [],
+        yMarkers: []
+      }
+      title: '',
+      colors: [],
+      height: 200,
+
+      tooltipOptions: {
+        formatTooltipX: d => (d + '').toUpperCase(),
+        formatTooltipY: d => d + ' pts',
+      }
+
+      // Axis charts
+      isNavigable: 1,        // default: 0
+      valuesOverPoints: 1,   // default: 0
+      barOptions: {
+        spaceRatio: 1        // default: 0.5
+        stacked: 1           // default: 0
+      }
+
+      lineOptions: {
+        dotSize: 6,          // default: 4
+        hideLine: 0,         // default: 0
+        hideDots: 1,         // default: 0
+        heatline: 1,         // default: 0
+        regionFill: 1        // default: 0
+      }
+
+      axisOptions: {
+        yAxisMode: 'span',   // Axis lines, default
+        xAxisMode: 'tick',   // No axis lines, only short ticks
+        xIsSeries: 1         // Allow skipping x values for space
+                              // default: 0
+      },
+
+      // Pie/Percentage charts
+      maxLegendPoints: 6,    // default: 20
+      maxSlices: 10,         // default: 20
+
+      // Percentage chart
+      barOptions: {
+        height: 15           // default: 20
+        depth: 5             // default: 2
+      }
+
+      // Heatmap
+      discreteDomains: 1,    // default: 1
     }
-    title: '',
-    colors: [],
-    height: 200,
+    ...
 
-    tooltipOptions: {
-      formatTooltipX: d => (d + '').toUpperCase(),
-      formatTooltipY: d => d + ' pts',
-    }
-
-    // Axis charts
-    isNavigable: 1,        // default: 0
-    valuesOverPoints: 1,   // default: 0
-    barOptions: {
-      spaceRatio: 1        // default: 0.5
-      stacked: 1           // default: 0
-    }
-
-    lineOptions: {
-      dotSize: 6,          // default: 4
-      hideLine: 0,         // default: 0
-      hideDots: 1,         // default: 0
-      heatline: 1,         // default: 0
-      regionFill: 1        // default: 0
-    }
-
-    axisOptions: {
-      yAxisMode: 'span',   // Axis lines, default
-      xAxisMode: 'tick',   // No axis lines, only short ticks
-      xIsSeries: 1         // Allow skipping x values for space
-                           // default: 0
-    },
+  // Updating values
+  chart.update(data);
 
-    // Pie/Percentage charts
-    maxLegendPoints: 6,    // default: 20
-    maxSlices: 10,         // default: 20
+  // Axis charts:
+  chart.addDataPoint(label, valueFromEachDataset, index)
+  chart.removeDataPoint(index)
+  chart.updateDataset(datasetValues, index)
 
-    // Percentage chart
-    barOptions: {
-      height: 15           // default: 20
-      depth: 5             // default: 2
-    }
+  // Exporting
+  chart.export();
 
-    // Heatmap
-    discreteDomains: 1,    // default: 1
-  }
-  ...
+  // Unbind window-resize events
+  chart.unbindWindowEvents();
 
-    // Updating values
-    chart.update(data);
-
-    // Axis charts:
-    chart.addDataPoint(label, valueFromEachDataset, index)
-    chart.removeDataPoint(index)
-    chart.updateDataset(datasetValues, index)
-
-    // Exporting
-    chart.export();
-
-    // Unbind window-resize events
-    chart.unbindWindowEvents();
-
-  </code></pre>
-              </div>
-            </div>
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <h6 class="margin-vertical-rem">Install</h6>
-              <p class="step-explain">Install via npm</p>
-              <pre><code class="hljs console">  npm install frappe-charts</code></pre>
-              <p class="step-explain">And include it in your project</p>
-              <pre><code class="hljs javascript">  import { Chart } from "frappe-charts"</code></pre>
-              <p class="step-explain">... or include it directly in your HTML</p>
-              <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
-              <p class="step-explain">Use as:</p>
-              <pre><code class="hljs javascript">  new Chart();          // ES6 module
+</code></pre>
+    </section>
+
+    <section>
+      <h6>Install</h6>
+      <p>Install via npm</p>
+      <pre><code class="hljs console">  npm install frappe-charts</code></pre>
+      <p>And include it in your project</p>
+      <pre><code class="hljs javascript">  import { Chart } from "frappe-charts"</code></pre>
+      <p>... or include it directly in your HTML</p>
+      <pre><code class="hljs html">  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;</code></pre>
+      <p>Use as:</p>
+      <pre><code class="hljs javascript">  new Chart();          // ES6 module
                         // or
   new frappe.Chart();   // Browser</code></pre>
-
-            </div>
-          </div>
-
-
-          <div class="col-sm-10 push-sm-1">
-            <div class="dashboard-section">
-              <!-- Closing -->
-              <div class="text-center" style="margin-top: 70px">
-                <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button">Download</button></a>
-                <p style="margin-top: 3rem;margin-bottom: 1.5rem;"><a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a></p>
-                <p style="margin-top: 1rem;">
-                  <a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
-                </p>
-                <p>License: MIT</p>
-              </div>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-    </div>
-
-    <div class="built-with-frappe text-center" style="margin-top: -20px">
+    </section>
+
+    <section class="text-center">
+      <!-- Closing -->
+      <a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a>
+      <p style="margin-top: 3rem;margin-bottom: 1.5rem;">
+        <!-- <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a> -->
+        <a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a>
+      </p>
+      <p style="margin-top: 1rem;">
+        <a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a>
+      </p>
+      <p>License: MIT</p>
+    </section>
+
+    <footer class="built-with-frappe text-center">
         <img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png">
         <p style="margin: 24px 0 0px 0; font-size: 15px">
           Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>.
@@ -366,7 +301,7 @@
           <a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and
           <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a>
         </p>
-    </div>
+    </footer>
 
     <a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github">
       <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">