updating documentaion and version bump for stinson

README.md

@@ -67,6 +67,7 @@ _For use in HTML markup:_
 *   Reyes: `class="reyes"`
 *   Rise: `class="rise"`
 *   Slumber: `class="slumber"`
+*   Stinson: `class="stinson"`
 *   Toaster: `class="toaster"`
 *   Valencia: `class="valencia"`
 *   Walden: `class="walden"`
@@ -140,6 +141,7 @@ _For use in Sass stylesheets:_
 *   Reyes: `@extend %reyes`
 *   Rise: `@extend %rise`
 *   Slumber: `@extend %slumber`
+*   Stinson: `@extend %stinson`
 *   Toaster: `@extend %toaster`
 *   Valencia: `@extend %valencia`
 *   Walden: `@extend %walden`
@@ -167,6 +169,7 @@ _For use in Sass stylesheets:_
 *   Reyes: `@include reyes()`
 *   Rise: `@include rise()`
 *   Slumber: `@include slumber()`
+*   Stinson: `@include stinson()`
 *   Toaster: `@include toaster()`
 *   Valencia: `@include valencia()`
 *   Walden: `@include walden()`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssgram",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "style": "source/css/cssgram.css",
   "dependencies": {},
   "author": {

site/css/demo-site.css

@@ -1055,6 +1055,47 @@
     background: rgba(3, 230, 26, 0.2);
     mix-blend-mode: hue; }
 
+/*
+ *
+ * Stinson
+ *
+ */
+
+.stinson {
+  position: relative;
+  -webkit-filter: contrast(0.75) saturate(0.85) brightness(1.15);
+          filter: contrast(0.75) saturate(0.85) brightness(1.15); }
+
+  .stinson img {
+    width: 100%;
+    z-index: 1; }
+
+  .stinson:before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2; }
+
+  .stinson:after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 3; }
+
+  .stinson::before {
+    background: rgba(240, 149, 128, 0.2);
+    mix-blend-mode: soft-light; }
+
 ::-moz-selection {
   background: #9b1c9b;
   color: white; }

site/index.html

@@ -177,7 +177,13 @@ <h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a h
               <figcaption>Slumber</figcaption>
             </figure>
           </li>
-                                                            <li class="demo__item">
+                                <li class="demo__item">
+            <figure class="stinson">
+              <img>
+              <figcaption>Stinson</figcaption>
+            </figure>
+          </li>
+                                              <li class="demo__item">
             <figure class="toaster">
               <img>
               <figcaption>Toaster</figcaption>
@@ -288,7 +294,8 @@ <h3>Available Classes</h3>
                                 <li>Reyes: <code>class="reyes"</code></li>
                                 <li>Rise: <code>class="rise"</code></li>
                                                             <li>Slumber: <code>class="slumber"</code></li>
-                                                            <li>Toaster: <code>class="toaster"</code></li>
+                                <li>Stinson: <code>class="stinson"</code></li>
+                                              <li>Toaster: <code>class="toaster"</code></li>
                                 <li>Valencia: <code>class="valencia"</code></li>
                                               <li>Walden: <code>class="walden"</code></li>
                                 <li>Willow: <code>class="willow"</code></li>
@@ -348,7 +355,8 @@ <h3>Available Extends</h3>
                                 <li>Reyes: <code>@extend %reyes;</code></li>
                                 <li>Rise: <code>@extend %rise;</code></li>
                                                             <li>Slumber: <code>@extend %slumber;</code></li>
-                                                            <li>Toaster: <code>@extend %toaster;</code></li>
+                                <li>Stinson: <code>@extend %stinson;</code></li>
+                                              <li>Toaster: <code>@extend %toaster;</code></li>
                                 <li>Valencia: <code>@extend %valencia;</code></li>
                                               <li>Walden: <code>@extend %walden;</code></li>
                                 <li>Willow: <code>@extend %willow;</code></li>
@@ -414,7 +422,8 @@ <h3>Available Mixins</h3>
                                 <li>Reyes: <code>@include reyes();</code></li>
                                 <li>Rise: <code>@include rise();</code></li>
                                                             <li>Slumber: <code>@include slumber();</code></li>
-                                                            <li>Toaster: <code>@include toaster();</code></li>
+                                <li>Stinson: <code>@include stinson();</code></li>
+                                              <li>Toaster: <code>@include toaster();</code></li>
                                 <li>Valencia: <code>@include valencia();</code></li>
                                               <li>Walden: <code>@include walden();</code></li>
                                 <li>Willow: <code>@include willow();</code></li>

site/test/index.html

@@ -3066,7 +3066,7 @@ <h3>CSSgram</h3>
 
     </section>
       <section id="Stinson">
-      <h2 class="filter-header"><a href="#Stinson">Stinson</a> <span class="done  done--nope">✗</span></h2>
+      <h2 class="filter-header"><a href="#Stinson">Stinson</a> <span class="done  done--yep">✓</span></h2>
 
       <div class="headers">
         <h3>Instagram</h3>

source/css/cssgram.css

@@ -1053,3 +1053,44 @@
   .maven:after {
     background: rgba(3, 230, 26, 0.2);
     mix-blend-mode: hue; }
+
+/*
+ *
+ * Stinson
+ *
+ */
+
+.stinson {
+  position: relative;
+  -webkit-filter: contrast(0.75) saturate(0.85) brightness(1.15);
+          filter: contrast(0.75) saturate(0.85) brightness(1.15); }
+
+  .stinson img {
+    width: 100%;
+    z-index: 1; }
+
+  .stinson:before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2; }
+
+  .stinson:after {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 3; }
+
+  .stinson::before {
+    background: rgba(240, 149, 128, 0.2);
+    mix-blend-mode: soft-light; }

source/css/stinson.css

@@ -8,11 +8,11 @@
   position: relative;
   -webkit-filter: contrast(0.75) saturate(0.85) brightness(1.15);
           filter: contrast(0.75) saturate(0.85) brightness(1.15); }
-
+  
   .stinson img {
     width: 100%;
     z-index: 1; }
-
+  
   .stinson:before {
     content: '';
     display: block;
@@ -23,7 +23,7 @@
     position: absolute;
     pointer-events: none;
     z-index: 2; }
-
+  
   .stinson:after {
     content: '';
     display: block;
@@ -34,8 +34,7 @@
     position: absolute;
     pointer-events: none;
     z-index: 3; }
-
-  &::before {
-    background: rgba(240, 149, 128, .2);
-    mix-blend-mode: soft-light;
-  }
+
+  .stinson::before {
+    background: rgba(240, 149, 128, 0.2);
+    mix-blend-mode: soft-light; }