Add link to twitter and codepen, simplify mosaic effect

_dev/index.haml

@@ -68,6 +68,8 @@
         .container
           %h1 Image Effects with CSS
           %h2 Bennett Feely
+            %a{ href: "http://twitter.com/bennettfeely" } Twitter
+            %a{ href: "http://codepen.io/bennettfeely/" } CodePen
           %hr
           %h2 How it works
           %p Using one or more newer CSS properties (<code>background-blend-mode</code>, <code>mix-blend-mode</code>, or <code>filter</code>) gives us a surprising amount of possibilities to manipulate a single source image.
@@ -82,6 +84,7 @@
           %p{ data-label: "Fallback" } By default, the source image is displayed without any effects. When CSS <code>@supports</code> detects support for the required CSS properties and values for an individual effect, then the effect will be enabled. This amounts to a precise, native, and lightweight feature detection.
           %hr
           %p{ data-label: "Download" } A complete CSS library of these effects can be downloaded <a href="css/all.css">unminified (13kb)</a> or <a href="css/all.min.css">minified (8.9kb)</a>. Using <a href="https://css-tricks.com/snippets/htaccess/active-gzip-compression/">gzip</a>, the entire image effects library is less than 1300 bytes.
+          %p This project is available <a href="https://github.com/bennettfeely/image-effects">on GitHub</a>.
       %article.grid-item#pencil
         %figure.box
           .title.container
@@ -748,7 +751,6 @@
                 %svg{ class: "icon" }
                   %use{ xlink:href: "#copy-icon" }
                 Copy
-
       %footer.grid-item
         .container
           %h1 More CSS fun...
@@ -794,7 +796,13 @@
                 %a{ href: "https://medium.com/@bennettfeely/css-blend-modes-could-be-the-next-big-thing-in-web-design-6b51bf53743a#.gwfmepwa0" }
                   %span CSS Blend Modes could be the next big thing in Web Design <cite>by Bennett Feely</cite> (2013)
             %hr
-          &copy;2016 Bennett Feely
+            %small &copy;2016 Bennett Feely
+      %section.grid-item.suggestion-box
+        .container
+          %h3 Add your image effect on this page
+          %hr
+          %p
+            <a href="http://twitter.com/bennettfeely">Tweet</a> or <a href="mailto:bfeelyweb@gmail.com?Subject=Image%20effect%20suggestion">email</a> a link to your CSS image effect demo. If it's neat I'll add it to this page with your name and a link to your website.
 
     // Scripts
     %script{ src: "js/masonry.min.js" }

_dev/partials/mosaic.css

@@ -1,14 +1,6 @@
 .mosaic-effect {
-  background-image: url(photo.jpg);
-  background-size: cover;
+  background-image: url(photo.jpg), url(photo.jpg);
+  background-size: cover, 5% 5%;
   background-position: center;
-}
-
-@supports (background-blend-mode: overlay) {
-  .mosaic-effect {
-    background-image: url(photo.jpg), url(photo.jpg);
-    background-size: cover, 5% 5%;
-    background-position: center;
-    background-blend-mode: overlay;
-  }
+  background-blend-mode: overlay;
 }

_dev/partials/mosaic.scss

@@ -1,14 +1,8 @@
 .mosaic-effect {
 	$url : url(photo.jpg);
 
-	background-image: $url;
-	background-size: cover;
+	background-image: $url, $url;
+	background-size: cover, 5% 5%;
 	background-position: center;
-
-	@supports (background-blend-mode: overlay) {
-		background-image: $url, $url;
-		background-size: cover, 5% 5%;
-		background-position: center;
-	  background-blend-mode: overlay;
-	}
+  background-blend-mode: overlay;
 }

_dev/style.scss

@@ -110,6 +110,7 @@
 	}
 
 	h1 {
+		cursor: default;
 		font-size: 40px;
 		font-weight: 400;
 		line-height: .95;
@@ -129,7 +130,7 @@
 		text-decoration: none;
 	}
 	p {
-		font-size: 18px;
+		font-size: 17px;
 		margin-top: 10px;
 
 		code {
@@ -183,8 +184,21 @@
 		h2 {
 			margin: 10px 0;
 
-			&:before {
-				@extend %partition;
+			a {
+				font-size: 15px;
+				font-weight: 500;
+				color: $blue;
+				border-bottom: 1px solid;
+				margin-left: 10px;
+				vertical-align: middle;
+
+				&:hover {
+					color: shade($blue, 20%);
+					background: $lightblue;
+				}
+				&:active {
+					color: shade($blue, 50%);
+				}
 			}
 		}
 		hr {
@@ -518,7 +532,9 @@
 
 // Buttons ===========================================================================
 	.share-box,
-	.follow-box {
+	.follow-box,
+	.suggestion-box {
+		cursor: default;
 		@extend %no-select;
 		@extend %no-tap;
 
@@ -546,13 +562,13 @@
 		padding: 10px 12px;
 		background: $white;
 		margin-top: 5px;
+		transition:
+			background $transition,
+			color $transition;
 	}
 
 	.share-button {
 		cursor: pointer;
-		transition:
-			background $transition,
-			color $transition;
 
 		&:hover {
 			transition-duration: $transition/2;
@@ -588,12 +604,19 @@
 		background: mix($white, $lightgray);
 		cursor: default;
 		margin-left: 5px;
-		// box-shadow: none;
+	}
+
+	.suggestion-box {
+		p {
+			font-size: 16px;
+		}
 	}
 
 
 // Footer ============================================================================
 	footer {
+		@extend %no-select;
+
 		ul {
 			margin: 15px 0;
 			list-style: none;
@@ -622,6 +645,13 @@
 			padding: 10px 0;
 			line-height: 1.1;
 		}
+
+		small {
+			display: block;
+			cursor: default;
+			font-size: 1em;
+			margin-top: 10px;
+		}
 	}
 
 

css/all.css

@@ -285,18 +285,10 @@
 
 /* Mosaic effect ================================================================== */
 .mosaic-effect {
-   background-image: url(photo.jpg);
-   background-size: cover;
+   background-image: url(photo.jpg), url(photo.jpg);
+   background-size: cover, 5% 5%;
    background-position: center;
-}
-
-@supports (background-blend-mode: overlay) {
-   .mosaic-effect {
-      background-image: url(photo.jpg), url(photo.jpg);
-      background-size: cover, 5% 5%;
-      background-position: center;
-      background-blend-mode: overlay;
-   }
+   background-blend-mode: overlay;
 }
 
 /* Photo border effect ============================================================ */