Add usage snippets and code styling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spirit.css",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "A simple, yet complete CSS framework",
   "main": "index.html",
   "scripts": {

prism.css

@@ -4,11 +4,14 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
  * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
  * Based on https://github.com/chriskempson/tomorrow-theme
  * @author Rose Pritchard
+
+ * customised by Siddharth S. (github.com/siddharthsham)
+
  */
 
 code[class*="language-"],
 pre[class*="language-"] {
-	color: #ccc;
+	color: #abb2bf;
 	background: none;
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	font-size: 1em;
@@ -32,19 +35,19 @@ pre[class*="language-"] {
 
 /* Code blocks */
 pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
+	padding: 0 1rem;
+	margin: .5rem 0;
 	overflow: auto;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background: #2d2d2d;
+	background: #282c34;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
+	padding: .5rem;
 	border-radius: .3em;
 	white-space: normal;
 }
@@ -54,15 +57,14 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: #999;
+	color: #818896;
 }
 
 .token.punctuation {
-	color: #ccc;
+	color: #abb2bf;
 }
 
 .token.tag,
-.token.attr-name,
 .token.namespace,
 .token.deleted {
 	color: #e2777a;
@@ -75,30 +77,29 @@ pre[class*="language-"] {
 .token.boolean,
 .token.number,
 .token.function {
-	color: #f08d49;
+	color: #61aeee;
 }
 
+.token.attr-name,
 .token.property,
 .token.class-name,
 .token.constant,
 .token.symbol {
-	color: #f8c555;
+	color: #d19a66;
 }
 
 .token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
-	color: #cc99cd;
+	color: #c678dd;
 }
 
-.token.string,
-.token.char,
-.token.attr-value,
+
 .token.regex,
 .token.variable {
-	color: #7ec699;
+	color: #e06c75;
 }
 
 .token.operator,
@@ -119,7 +120,10 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
+.token.attr-value,
+.token.string,
+.token.char,
 .token.inserted {
-	color: green;
+	color: #98c379;
 }
 

scss/_typography.scss

@@ -1,7 +1,11 @@
 body {
-    font-size: 1rem;
+    font-size: min(calc(0.75rem + 0.75vw), 1.25rem);
+    line-height: 1.5;
+    font-family: $sans-font, $native-sans-font;
+    font-weight: 400;
 }
 
+
 h1,
 h2,
 h3,
@@ -48,13 +52,6 @@ h6 {
     margin: calc(0.5rem + 0.75vh) 0 calc(0.25rem + 0.75vh) 0;
 }
 
-body {
-    font-size: min(calc(0.75rem + 0.75vw), 1.25rem);
-    line-height: 1.5;
-    font-family: $sans-font, $native-sans-font;
-    font-weight: 400;
-}
-
 a,
 ins,
 u {

scss/_variables.scss

@@ -1,5 +1,18 @@
 // font families
 
+// $base:    #282c34;
+// $mono-1:  #abb2bf;
+// $mono-2:  #818896;
+// $mono-3:  #5c6370;
+// $hue-1:   #56b6c2;
+// $hue-2:   #61aeee;
+// $hue-3:   #c678dd;
+// $hue-4:   #98c379;
+// $hue-5:   #e06c75;
+// $hue-5-2: #be5046;
+// $hue-6:   #d19a66;
+// $hue-6-2: #e6c07b;
+
 // native font snippet from Bootstrap
 $native-sans-font: -apple-system,
 BlinkMacSystemFont,