Updating Some Styles

diff --git a/sass/app.scss b/sass/app.scss
index 8e3e58b44e99357e32a3e2e9b8a184e8e17237d5..d53992a23c7032c4e28317f04d367a8a77d67ecf 100644 (file)
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -205,18 +205,26 @@ ul.header-social-links { display: block;
 hr { border-style: dashed; }
 
 /* templates */
-.template-thumbs .notable-post { position: absolute; top: 47%; text-align: center; width: 100%;  display:none; z-index:1;
+.template-thumbs .preview-post { position: absolute; top: 47%; text-align: center; width: 100%;  display:none; z-index:1;
   h5 { color: #ffffff; margin: 0px; line-height: 1; display:inline; }
   img { display: inline-block; width: 20px; margin-top: -4px; margin-right: 8px;}
 }
-
+@media only screen {
+  .preview{
+    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    -webkit-transition: background-color 400ms ease-in-out;
+    -moz-transition: background-color 400ms ease-in-out;
+    transition: background-color 400ms ease-in-out;
+  }
+}
 .template-thumbs { margin-bottom: 50px;
   a { display: block; position: relative;
     &.button { display: inline-block; width: 45%; }
     img.thumb { display: block; margin-bottom: 15px; border: #f1f1f1 1px solid; width:100%;}
-    &.notable:hover { background-color: rgba(0,0,0,0.5); 
+    &.preview:hover { background-color: rgba(0,0,0,0.5); 
       img.thumb { opacity: 0.4; }
-      .notable-post { display:block; }
+      .preview-post { display:block; }
     }
   }
   span { display: block; color: #333; 

diff --git a/stylesheets/app.css b/stylesheets/app.css
index 039476f445d18af9863832586cd26e16ecf3e69c..11e27151f631501626386763e88ff853b40ba963 100644 (file)
--- a/stylesheets/app.css
+++ b/stylesheets/app.css
@@ -11567,7 +11567,7 @@ hr {
 
 /* templates */
 /* line 208, ../sass/app.scss */
-.template-thumbs .notable-post {
+.template-thumbs .preview-post {
   position: absolute;
   top: 47%;
   text-align: center;
@@ -11576,76 +11576,86 @@ hr {
   z-index: 1;
 }
 /* line 209, ../sass/app.scss */
-.template-thumbs .notable-post h5 {
+.template-thumbs .preview-post h5 {
   color: #ffffff;
   margin: 0px;
   line-height: 1;
   display: inline;
 }
 /* line 210, ../sass/app.scss */
-.template-thumbs .notable-post img {
+.template-thumbs .preview-post img {
   display: inline-block;
   width: 20px;
   margin-top: -4px;
   margin-right: 8px;
 }
 
-/* line 213, ../sass/app.scss */
+@media only screen {
+  /* line 213, ../sass/app.scss */
+  .preview {
+    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+    -webkit-transition: background-color 400ms ease-in-out;
+    -moz-transition: background-color 400ms ease-in-out;
+    transition: background-color 400ms ease-in-out;
+  }
+}
+/* line 221, ../sass/app.scss */
 .template-thumbs {
   margin-bottom: 50px;
 }
-/* line 214, ../sass/app.scss */
+/* line 222, ../sass/app.scss */
 .template-thumbs a {
   display: block;
   position: relative;
 }
-/* line 215, ../sass/app.scss */
+/* line 223, ../sass/app.scss */
 .template-thumbs a.button {
   display: inline-block;
   width: 45%;
 }
-/* line 216, ../sass/app.scss */
+/* line 224, ../sass/app.scss */
 .template-thumbs a img.thumb {
   display: block;
   margin-bottom: 15px;
   border: #f1f1f1 1px solid;
   width: 100%;
 }
-/* line 217, ../sass/app.scss */
-.template-thumbs a.notable:hover {
+/* line 225, ../sass/app.scss */
+.template-thumbs a.preview:hover {
   background-color: rgba(0, 0, 0, 0.5);
 }
-/* line 218, ../sass/app.scss */
-.template-thumbs a.notable:hover img.thumb {
+/* line 226, ../sass/app.scss */
+.template-thumbs a.preview:hover img.thumb {
   opacity: 0.4;
 }
-/* line 219, ../sass/app.scss */
-.template-thumbs a.notable:hover .notable-post {
+/* line 227, ../sass/app.scss */
+.template-thumbs a.preview:hover .preview-post {
   display: block;
 }
-/* line 222, ../sass/app.scss */
+/* line 230, ../sass/app.scss */
 .template-thumbs span {
   display: block;
   color: #333;
 }
-/* line 223, ../sass/app.scss */
+/* line 231, ../sass/app.scss */
 .template-thumbs span.description {
   font-size: 0.875em;
   margin-bottom: 15px;
 }
-/* line 225, ../sass/app.scss */
+/* line 233, ../sass/app.scss */
 .template-thumbs h6.name {
   font-size: 1.3125em;
   font-family: "Proxima Nova", "proxima-nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   color: #0d2b40;
   display: inline;
 }
-/* line 226, ../sass/app.scss */
+/* line 234, ../sass/app.scss */
 .template-thumbs h6.name span {
   display: inline-block;
   font-weight: 400;
 }
-/* line 227, ../sass/app.scss */
+/* line 235, ../sass/app.scss */
 .template-thumbs h6.name a {
   display: inline-block;
   float: right;
@@ -11655,27 +11665,27 @@ hr {
   line-height: 24px;
 }
 
-/* line 230, ../sass/app.scss */
+/* line 238, ../sass/app.scss */
 .thumb-select {
   margin-top: 20px;
 }
-/* line 231, ../sass/app.scss */
+/* line 239, ../sass/app.scss */
 .thumb-select label, .thumb-select select {
   display: inline-block;
 }
-/* line 232, ../sass/app.scss */
+/* line 240, ../sass/app.scss */
 .thumb-select select {
   width: 110px;
   margin-left: 10px;
 }
 
-/* line 234, ../sass/app.scss */
+/* line 242, ../sass/app.scss */
 .how-to-use {
   position: relative;
   padding: 30px 0;
 }
 
-/* line 235, ../sass/app.scss */
+/* line 243, ../sass/app.scss */
 .inky-small {
   height: 377px;
   width: 323px;
@@ -11685,7 +11695,7 @@ hr {
   z-index: 2;
 }
 
-/* line 236, ../sass/app.scss */
+/* line 244, ../sass/app.scss */
 .inky-small.load {
   animation-name: small-inky;
   -webkit-animation-name: small-inky;
@@ -11695,7 +11705,7 @@ hr {
   -webkit-animation-iteration-count: infinite;
 }
 
-/* line 238, ../sass/app.scss */
+/* line 246, ../sass/app.scss */
 .inky-comp {
   height: 220px;
   width: 240px;
@@ -11705,7 +11715,7 @@ hr {
   z-index: 2;
 }
 
-/* line 239, ../sass/app.scss */
+/* line 247, ../sass/app.scss */
 .inky-comp.load {
   animation-name: small-inky;
   -webkit-animation-name: small-inky;
@@ -11716,12 +11726,12 @@ hr {
 }
 
 /* downloading */
-/* line 242, ../sass/app.scss */
+/* line 250, ../sass/app.scss */
 .main-text {
   position: relative;
 }
 
-/* line 243, ../sass/app.scss */
+/* line 251, ../sass/app.scss */
 .inky-fish {
   background: url(../images/inky-mobile-hold.svg) no-repeat center center;
   background-size: cover;
@@ -11732,48 +11742,48 @@ hr {
   top: 40px;
 }
 
-/* line 244, ../sass/app.scss */
+/* line 252, ../sass/app.scss */
 .under-inky-fish {
   margin-top: 50px;
   margin-bottom: 50px;
 }
-/* line 245, ../sass/app.scss */
+/* line 253, ../sass/app.scss */
 .under-inky-fish ul {
   font-size: 0.875em;
   margin-left: 15px;
 }
 
-/* line 247, ../sass/app.scss */
+/* line 255, ../sass/app.scss */
 .read-docs {
   margin-top: 20px;
 }
-/* line 248, ../sass/app.scss */
+/* line 256, ../sass/app.scss */
 .read-docs a {
   background: #e5ecee url(../images/icons/read-docs.png) no-repeat 38px center;
   padding: 23px 23px 23px 97px;
   background-size: 32px 44px;
   display: block;
 }
-/* line 249, ../sass/app.scss */
+/* line 257, ../sass/app.scss */
 .read-docs span {
   margin-bottom: 0;
   display: block;
 }
-/* line 250, ../sass/app.scss */
+/* line 258, ../sass/app.scss */
 .read-docs span.title {
   color: #0c2739;
   font-size: 1.3125em;
   font-family: "Proxima Nova", "proxima-nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   margin-bottom: 10px;
 }
-/* line 251, ../sass/app.scss */
+/* line 259, ../sass/app.scss */
 .read-docs span.description {
   font-size: 0.875em;
   color: #333;
   line-height: 1.6;
 }
 
-/* line 255, ../sass/app.scss */
+/* line 263, ../sass/app.scss */
 .inky-fish.load {
   animation-name: inky-fishes;
   -webkit-animation-name: inky-fishes;
@@ -11788,54 +11798,54 @@ hr {
 }
 
 @keyframes inky-fishes {
-  /* line 257, ../sass/app.scss */
+  /* line 265, ../sass/app.scss */
   0% {
     transform: rotate(-15deg);
   }
 
-  /* line 258, ../sass/app.scss */
+  /* line 266, ../sass/app.scss */
   50% {
     transform: rotate(15deg);
   }
 
-  /* line 259, ../sass/app.scss */
+  /* line 267, ../sass/app.scss */
   100% {
     transform: rotate(-15deg);
   }
 }
 
 @-webkit-keyframes inky-fishes {
-  /* line 263, ../sass/app.scss */
+  /* line 271, ../sass/app.scss */
   0% {
     -webkit-transform: rotate(-15deg);
   }
 
-  /* line 264, ../sass/app.scss */
+  /* line 272, ../sass/app.scss */
   50% {
     -webkit-transform: rotate(15deg);
   }
 
-  /* line 265, ../sass/app.scss */
+  /* line 273, ../sass/app.scss */
   100% {
     -webkit-transform: rotate(-15deg);
   }
 }
 
 /* process */
-/* line 272, ../sass/app.scss */
+/* line 280, ../sass/app.scss */
 .how-to-use {
   position: relative;
 }
-/* line 273, ../sass/app.scss */
+/* line 281, ../sass/app.scss */
 .how-to-use.one {
   margin-bottom: 10px;
 }
-/* line 274, ../sass/app.scss */
+/* line 282, ../sass/app.scss */
 .how-to-use.one p, .how-to-use.one img, .how-to-use.one h3 {
   width: 430px;
   margin-left: 80px;
 }
-/* line 275, ../sass/app.scss */
+/* line 283, ../sass/app.scss */
 .how-to-use.one .process-1 {
   background: url(../images/inky-outlook.svg) no-repeat center center;
   height: 335px;
@@ -11845,20 +11855,20 @@ hr {
   right: 65px;
   top: -50px;
 }
-/* line 276, ../sass/app.scss */
+/* line 284, ../sass/app.scss */
 .how-to-use.one .bump-space {
   margin-left: 120px;
 }
-/* line 278, ../sass/app.scss */
+/* line 286, ../sass/app.scss */
 .how-to-use.two {
   margin-bottom: 10px;
 }
-/* line 279, ../sass/app.scss */
+/* line 287, ../sass/app.scss */
 .how-to-use.two p, .how-to-use.two img, .how-to-use.two h3 {
   width: 460px;
   margin-left: 110px;
 }
-/* line 280, ../sass/app.scss */
+/* line 288, ../sass/app.scss */
 .how-to-use.two .process-2 {
   height: 134px;
   width: 231px;
@@ -11867,29 +11877,29 @@ hr {
   left: 8px;
   top: 38px;
 }
-/* line 281, ../sass/app.scss */
+/* line 289, ../sass/app.scss */
 .how-to-use.two .process-2 img {
   margin-left: 0px;
 }
-/* line 283, ../sass/app.scss */
+/* line 291, ../sass/app.scss */
 .how-to-use.two .bump-space {
   margin-left: 270px;
 }
-/* line 285, ../sass/app.scss */
+/* line 293, ../sass/app.scss */
 .how-to-use.three {
   margin-bottom: 30px;
 }
-/* line 286, ../sass/app.scss */
+/* line 294, ../sass/app.scss */
 .how-to-use.three p, .how-to-use.three img, .how-to-use.three h3 {
   width: 460px;
   margin-left: 110px;
 }
-/* line 287, ../sass/app.scss */
+/* line 295, ../sass/app.scss */
 .how-to-use.three p.with-border {
   border-bottom: 1px solid #ddd;
   padding-bottom: 20px;
 }
-/* line 288, ../sass/app.scss */
+/* line 296, ../sass/app.scss */
 .how-to-use.three .process-3 {
   height: 377px;
   width: 273px;
@@ -11898,35 +11908,35 @@ hr {
   right: 110px;
   top: -80px;
 }
-/* line 289, ../sass/app.scss */
+/* line 297, ../sass/app.scss */
 .how-to-use.three .process-3 img {
   margin-left: 0px;
 }
-/* line 290, ../sass/app.scss */
+/* line 298, ../sass/app.scss */
 .how-to-use.three .process-3 .inky-point {
   background: url(../images/inky-point.svg) no-repeat center center;
   height: 386px;
   width: 349px;
   background-size: cover;
 }
-/* line 292, ../sass/app.scss */
+/* line 300, ../sass/app.scss */
 .how-to-use.three .bump-space {
   margin-left: 50px;
 }
-/* line 294, ../sass/app.scss */
+/* line 302, ../sass/app.scss */
 .how-to-use.four {
   margin-bottom: 30px;
 }
-/* line 295, ../sass/app.scss */
+/* line 303, ../sass/app.scss */
 .how-to-use.four p, .how-to-use.four img, .how-to-use.four h3 {
   width: 460px;
   margin-left: 110px;
 }
-/* line 296, ../sass/app.scss */
+/* line 304, ../sass/app.scss */
 .how-to-use.four .bump-space {
   margin-left: 300px;
 }
-/* line 297, ../sass/app.scss */
+/* line 305, ../sass/app.scss */
 .how-to-use.four .process-4 {
   background: url(../images/fish-3.svg) no-repeat center center;
   height: 116px;
@@ -11936,7 +11946,7 @@ hr {
   right: 0;
   top: 35px;
 }
-/* line 298, ../sass/app.scss */
+/* line 306, ../sass/app.scss */
 .how-to-use.four .process-4-2 {
   height: 63px;
   width: 96px;
@@ -11945,30 +11955,30 @@ hr {
   left: 201px;
   top: -16px;
 }
-/* line 299, ../sass/app.scss */
+/* line 307, ../sass/app.scss */
 .how-to-use.four .process-4-2 img {
   margin-left: 0px;
 }
-/* line 303, ../sass/app.scss */
+/* line 311, ../sass/app.scss */
 .how-to-use.five {
   padding-bottom: 190px;
 }
-/* line 304, ../sass/app.scss */
+/* line 312, ../sass/app.scss */
 .how-to-use.five .number {
   top: -13px;
 }
-/* line 305, ../sass/app.scss */
+/* line 313, ../sass/app.scss */
 .how-to-use.five p, .how-to-use.five img, .how-to-use.five h3 {
   width: 460px;
   margin-left: 110px;
 }
-/* line 306, ../sass/app.scss */
+/* line 314, ../sass/app.scss */
 .how-to-use.five .bump-space {
   margin-left: 185px;
   position: relative;
   z-index: 2;
 }
-/* line 307, ../sass/app.scss */
+/* line 315, ../sass/app.scss */
 .how-to-use.five .process-5 {
   height: 377px;
   width: 273px;
@@ -11977,7 +11987,7 @@ hr {
   left: 0;
   top: -120px;
 }
-/* line 308, ../sass/app.scss */
+/* line 316, ../sass/app.scss */
 .how-to-use.five .process-5-2 {
   height: 56px;
   width: 217px;
@@ -11986,15 +11996,15 @@ hr {
   right: 20px;
   top: 92px;
 }
-/* line 309, ../sass/app.scss */
+/* line 317, ../sass/app.scss */
 .how-to-use.five .process-5-2 img {
   margin-left: 0px;
 }
-/* line 312, ../sass/app.scss */
+/* line 320, ../sass/app.scss */
 .how-to-use h3 {
   margin-bottom: 10px;
 }
-/* line 313, ../sass/app.scss */
+/* line 321, ../sass/app.scss */
 .how-to-use .number {
   display: block;
   font-family: "Proxima Nova", "proxima-nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
@@ -12004,20 +12014,20 @@ hr {
   position: absolute;
   top: 23px;
 }
-/* line 314, ../sass/app.scss */
+/* line 322, ../sass/app.scss */
 .how-to-use .campaign-monitor {
   background: url(../images/campaign-monitor.png) no-repeat left center;
   background-size: 18px 12px;
   padding-left: 30px;
 }
 
-/* line 316, ../sass/app.scss */
+/* line 324, ../sass/app.scss */
 .water {
   background: #004454;
   height: 80px;
 }
 
-/* line 317, ../sass/app.scss */
+/* line 325, ../sass/app.scss */
 .process-5-3 {
   background: url(../images/inky-boat.svg) bottom center no-repeat;
   height: 327px;
@@ -12028,13 +12038,13 @@ hr {
   top: -210px;
 }
 @media only screen and (max-width: 767px) {
-  /* line 317, ../sass/app.scss */
+  /* line 325, ../sass/app.scss */
   .process-5-3 {
     width: 100%;
   }
 }
 
-/* line 321, ../sass/app.scss */
+/* line 329, ../sass/app.scss */
 .process-2.load img {
   animation-name: fish1;
   -webkit-animation-name: fish1;
@@ -12046,40 +12056,40 @@ hr {
 }
 
 @keyframes fish1 {
-  /* line 323, ../sass/app.scss */
+  /* line 331, ../sass/app.scss */
   0% {
     transform: translateX(0%);
   }
 
-  /* line 324, ../sass/app.scss */
+  /* line 332, ../sass/app.scss */
   50% {
     transform: translateX(3%);
   }
 
-  /* line 325, ../sass/app.scss */
+  /* line 333, ../sass/app.scss */
   100% {
     transform: translateX(0%);
   }
 }
 
 @-webkit-keyframes fish1 {
-  /* line 329, ../sass/app.scss */
+  /* line 337, ../sass/app.scss */
   0% {
     -webkit-transform: translateX(0%);
   }
 
-  /* line 330, ../sass/app.scss */
+  /* line 338, ../sass/app.scss */
   50% {
     -webkit-transform: translateX(3%);
   }
 
-  /* line 331, ../sass/app.scss */
+  /* line 339, ../sass/app.scss */
   100% {
     -webkit-transform: translateX(0%);
   }
 }
 
-/* line 335, ../sass/app.scss */
+/* line 343, ../sass/app.scss */
 .process-3.load div {
   animation-name: small-inky;
   -webkit-animation-name: small-inky;
@@ -12093,40 +12103,40 @@ hr {
 }
 
 @keyframes small-inky {
-  /* line 347, ../sass/app.scss */
+  /* line 355, ../sass/app.scss */
   0% {
     transform: translateY(0%);
   }
 
-  /* line 348, ../sass/app.scss */
+  /* line 356, ../sass/app.scss */
   50% {
     transform: translateY(2%);
   }
 
-  /* line 349, ../sass/app.scss */
+  /* line 357, ../sass/app.scss */
   100% {
     transform: translateY(0%);
   }
 }
 
 @-webkit-keyframes small-inky {
-  /* line 353, ../sass/app.scss */
+  /* line 361, ../sass/app.scss */
   0% {
     -webkit-transform: translateY(0%);
   }
 
-  /* line 354, ../sass/app.scss */
+  /* line 362, ../sass/app.scss */
   50% {
     -webkit-transform: translateY(2%);
   }
 
-  /* line 355, ../sass/app.scss */
+  /* line 363, ../sass/app.scss */
   100% {
     -webkit-transform: translateY(0%);
   }
 }
 
-/* line 359, ../sass/app.scss */
+/* line 367, ../sass/app.scss */
 .process-4-2.load img {
   animation-name: fish2;
   -webkit-animation-name: fish2;
@@ -12137,40 +12147,40 @@ hr {
 }
 
 @keyframes fish2 {
-  /* line 361, ../sass/app.scss */
+  /* line 369, ../sass/app.scss */
   0% {
     transform: translateY(0%);
   }
 
-  /* line 362, ../sass/app.scss */
+  /* line 370, ../sass/app.scss */
   50% {
     transform: translateY(12%);
   }
 
-  /* line 363, ../sass/app.scss */
+  /* line 371, ../sass/app.scss */
   100% {
     transform: translateY(0%);
   }
 }
 
 @-webkit-keyframes fish2 {
-  /* line 367, ../sass/app.scss */
+  /* line 375, ../sass/app.scss */
   0% {
     -webkit-transform: translateY(0%);
   }
 
-  /* line 368, ../sass/app.scss */
+  /* line 376, ../sass/app.scss */
   50% {
     -webkit-transform: translateY(12%);
   }
 
-  /* line 369, ../sass/app.scss */
+  /* line 377, ../sass/app.scss */
   100% {
     -webkit-transform: translateY(0%);
   }
 }
 
-/* line 372, ../sass/app.scss */
+/* line 380, ../sass/app.scss */
 .process-5-2.load img {
   animation-name: fish3;
   -webkit-animation-name: fish3;
@@ -12181,98 +12191,98 @@ hr {
 }
 
 @keyframes fish3 {
-  /* line 374, ../sass/app.scss */
+  /* line 382, ../sass/app.scss */
   0% {
     transform: translateX(0%);
   }
 
-  /* line 375, ../sass/app.scss */
+  /* line 383, ../sass/app.scss */
   50% {
     transform: translateX(5%);
   }
 
-  /* line 376, ../sass/app.scss */
+  /* line 384, ../sass/app.scss */
   100% {
     transform: translateX(0%);
   }
 }
 
 @-webkit-keyframes fish3 {
-  /* line 380, ../sass/app.scss */
+  /* line 388, ../sass/app.scss */
   0% {
     -webkit-transform: translateX(0%);
   }
 
-  /* line 381, ../sass/app.scss */
+  /* line 389, ../sass/app.scss */
   50% {
     -webkit-transform: translateX(5%);
   }
 
-  /* line 382, ../sass/app.scss */
+  /* line 390, ../sass/app.scss */
   100% {
     -webkit-transform: translateX(0%);
   }
 }
 
 /* docs  */
-/* line 387, ../sass/app.scss */
+/* line 395, ../sass/app.scss */
 .doc-nav {
   list-style: none;
   margin-top: 50px;
 }
-/* line 388, ../sass/app.scss */
+/* line 396, ../sass/app.scss */
 .doc-nav li {
   display: block;
   width: 100%;
   font-size: 0.875em;
   margin-bottom: 10px;
 }
-/* line 389, ../sass/app.scss */
+/* line 397, ../sass/app.scss */
 .doc-nav li a {
   color: #333;
   display: block;
 }
-/* line 390, ../sass/app.scss */
+/* line 398, ../sass/app.scss */
 .doc-nav li a.current {
   font-weight: bold;
   margin-bottom: 10px;
 }
-/* line 391, ../sass/app.scss */
+/* line 399, ../sass/app.scss */
 .doc-nav li a:hover {
   color: #000;
 }
-/* line 393, ../sass/app.scss */
+/* line 401, ../sass/app.scss */
 .doc-nav li ul li {
   font-size: 1em;
 }
 
-/* line 397, ../sass/app.scss */
+/* line 405, ../sass/app.scss */
 .docs h1 {
   margin-top: 30px;
   margin-bottom: 0;
 }
-/* line 398, ../sass/app.scss */
+/* line 406, ../sass/app.scss */
 .docs .label {
   background: #ddd;
   color: #333;
 }
-/* line 399, ../sass/app.scss */
+/* line 407, ../sass/app.scss */
 .docs table {
   width: 100%;
   font-size: 0.9375em;
 }
-/* line 400, ../sass/app.scss */
+/* line 408, ../sass/app.scss */
 .docs table td {
   line-height: 1.6;
   vertical-align: top;
 }
-/* line 402, ../sass/app.scss */
+/* line 410, ../sass/app.scss */
 .docs hr.section {
   margin-top: 50px;
   border-style: solid;
   border-width: 2px;
 }
-/* line 407, ../sass/app.scss */
+/* line 415, ../sass/app.scss */
 .docs code.geshi {
   display: block;
   padding: 15px;
@@ -12280,13 +12290,13 @@ hr {
   font-size: 14px;
   color: #fff;
 }
-/* line 414, ../sass/app.scss */
+/* line 422, ../sass/app.scss */
 .docs iframe {
   width: 100%;
   border: 1px solid #ddd;
 }
 
-/* line 419, ../sass/app.scss */
+/* line 427, ../sass/app.scss */
 .prev-next-section {
   *zoom: 1;
   border-top: 1px dashed #ddd;
@@ -12302,19 +12312,19 @@ hr {
 .prev-next-section:after {
   clear: both;
 }
-/* line 420, ../sass/app.scss */
+/* line 428, ../sass/app.scss */
 .prev-next-section a {
   font-weight: bold;
   color: #333;
 }
 
 @media only screen and (max-width: 767px) {
-  /* line 425, ../sass/app.scss */
+  /* line 433, ../sass/app.scss */
   .top-area {
     position: relative;
   }
 
-  /* line 426, ../sass/app.scss */
+  /* line 434, ../sass/app.scss */
   .top-area .inky-phone {
     display: block;
     background: url(../images/inky-mobile-hold.svg);
@@ -12328,33 +12338,33 @@ hr {
     background-size: cover;
   }
 
-  /* line 427, ../sass/app.scss */
+  /* line 435, ../sass/app.scss */
   .top-area .home-text {
     padding: 40px 0 50px;
     position: relative;
     z-index: 2;
   }
 
-  /* line 428, ../sass/app.scss */
+  /* line 436, ../sass/app.scss */
   .templates-callout {
     top: 0px;
     margin-bottom: 50px;
   }
 
-  /* line 431, ../sass/app.scss */
+  /* line 439, ../sass/app.scss */
   .how-to-use h3, .how-to-use p {
     width: 100% !important;
     margin-left: 0 !important;
   }
-  /* line 432, ../sass/app.scss */
+  /* line 440, ../sass/app.scss */
   .how-to-use .bump-space {
     margin-left: 0 !important;
   }
-  /* line 433, ../sass/app.scss */
+  /* line 441, ../sass/app.scss */
   .how-to-use .process-1, .how-to-use .process-2, .how-to-use .process-3, .how-to-use .process-4, .how-to-use .process-4-2, .how-to-use .process-5, .how-to-use .process-5-2 {
     display: none !important;
   }
-  /* line 434, ../sass/app.scss */
+  /* line 442, ../sass/app.scss */
   .how-to-use .number {
     position: relative;
     text-align: left;
@@ -12362,13 +12372,13 @@ hr {
     font-size: 3.625em;
     top: auto;
   }
-  /* line 435, ../sass/app.scss */
+  /* line 443, ../sass/app.scss */
   .how-to-use img {
     margin-left: 0 !important;
     width: 100% !important;
   }
 
-  /* line 437, ../sass/app.scss */
+  /* line 445, ../sass/app.scss */
   .callout .row .stamp {
     width: 129px;
     right: 0;
@@ -12376,16 +12386,16 @@ hr {
     top: -54px;
   }
 }
-/* line 440, ../sass/app.scss */
+/* line 448, ../sass/app.scss */
 ul.mobile-nav {
   display: block;
   margin-bottom: 0;
 }
-/* line 441, ../sass/app.scss */
+/* line 449, ../sass/app.scss */
 ul.mobile-nav li {
   display: block;
 }
-/* line 442, ../sass/app.scss */
+/* line 450, ../sass/app.scss */
 ul.mobile-nav a {
   display: block;
   padding: 10px;
@@ -12394,33 +12404,33 @@ ul.mobile-nav a {
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
   font-weight: bold;
 }
-/* line 443, ../sass/app.scss */
+/* line 451, ../sass/app.scss */
 ul.mobile-nav a.current {
   background: #002f3b;
 }
 
 @media only screen and (min-width: 767px) and (max-width: 1024px) {
-  /* line 448, ../sass/app.scss */
+  /* line 456, ../sass/app.scss */
   .callout .row .stamp {
     top: -134px;
     right: 0;
   }
 
-  /* line 449, ../sass/app.scss */
+  /* line 457, ../sass/app.scss */
   .inky {
     right: -620px;
   }
 
-  /* line 450, ../sass/app.scss */
+  /* line 458, ../sass/app.scss */
   .how-to-use {
     position: relative;
   }
-  /* line 452, ../sass/app.scss */
+  /* line 460, ../sass/app.scss */
   .how-to-use.one p, .how-to-use.one img, .how-to-use.one h3 {
     width: 400px;
     margin-left: 70px;
   }
-  /* line 453, ../sass/app.scss */
+  /* line 461, ../sass/app.scss */
   .how-to-use.one .process-1 {
     background: url(../images/inky.svg) no-repeat center center;
     height: 325px;
@@ -12430,20 +12440,20 @@ ul.mobile-nav a.current {
     right: -13px;
     top: -50px;
   }
-  /* line 454, ../sass/app.scss */
+  /* line 462, ../sass/app.scss */
   .how-to-use.one .bump-space {
     margin-left: 60px;
   }
-  /* line 456, ../sass/app.scss */
+  /* line 464, ../sass/app.scss */
   .how-to-use.two {
     margin-bottom: 10px;
   }
-  /* line 457, ../sass/app.scss */
+  /* line 465, ../sass/app.scss */
   .how-to-use.two p, .how-to-use.two img, .how-to-use.two h3 {
     width: 440px;
     margin-left: 100px;
   }
-  /* line 458, ../sass/app.scss */
+  /* line 466, ../sass/app.scss */
   .how-to-use.two .process-2 {
     height: 65px;
     width: 124px;
@@ -12453,29 +12463,29 @@ ul.mobile-nav a.current {
     top: 38px;
     z-index: -1;
   }
-  /* line 459, ../sass/app.scss */
+  /* line 467, ../sass/app.scss */
   .how-to-use.two .process-2 img {
     margin-left: 0px;
   }
-  /* line 461, ../sass/app.scss */
+  /* line 469, ../sass/app.scss */
   .how-to-use.two .bump-space {
     margin-left: 100px;
   }
-  /* line 463, ../sass/app.scss */
+  /* line 471, ../sass/app.scss */
   .how-to-use.three {
     margin-bottom: 30px;
   }
-  /* line 464, ../sass/app.scss */
+  /* line 472, ../sass/app.scss */
   .how-to-use.three p, .how-to-use.three img, .how-to-use.three h3 {
     width: 350px;
     margin-left: 100px;
   }
-  /* line 465, ../sass/app.scss */
+  /* line 473, ../sass/app.scss */
   .how-to-use.three p.with-border {
     border-bottom: 1px solid #ddd;
     padding-bottom: 20px;
   }
-  /* line 466, ../sass/app.scss */
+  /* line 474, ../sass/app.scss */
   .how-to-use.three .process-3 {
     height: 377px;
     width: 273px;
@@ -12484,28 +12494,28 @@ ul.mobile-nav a.current {
     right: 70px;
     top: -100px;
   }
-  /* line 467, ../sass/app.scss */
+  /* line 475, ../sass/app.scss */
   .how-to-use.three .process-3 img {
     margin-left: 0px;
   }
-  /* line 469, ../sass/app.scss */
+  /* line 477, ../sass/app.scss */
   .how-to-use.three .bump-space {
     margin-left: 0;
   }
-  /* line 471, ../sass/app.scss */
+  /* line 479, ../sass/app.scss */
   .how-to-use.four {
     margin-bottom: 30px;
   }
-  /* line 472, ../sass/app.scss */
+  /* line 480, ../sass/app.scss */
   .how-to-use.four p, .how-to-use.four img, .how-to-use.four h3 {
     width: 350px;
     margin-left: 100px;
   }
-  /* line 473, ../sass/app.scss */
+  /* line 481, ../sass/app.scss */
   .how-to-use.four .bump-space {
     margin-left: 150px;
   }
-  /* line 474, ../sass/app.scss */
+  /* line 482, ../sass/app.scss */
   .how-to-use.four .process-4 {
     background: url(../images/fish-3.png) no-repeat center center;
     height: 116px;
@@ -12515,7 +12525,7 @@ ul.mobile-nav a.current {
     right: 0;
     top: 35px;
   }
-  /* line 475, ../sass/app.scss */
+  /* line 483, ../sass/app.scss */
   .how-to-use.four .process-4-2 {
     height: 63px;
     width: 96px;
@@ -12524,30 +12534,30 @@ ul.mobile-nav a.current {
     left: 40px;
     top: -16px;
   }
-  /* line 476, ../sass/app.scss */
+  /* line 484, ../sass/app.scss */
   .how-to-use.four .process-4-2 img {
     margin-left: 0px;
   }
-  /* line 480, ../sass/app.scss */
+  /* line 488, ../sass/app.scss */
   .how-to-use.five {
     padding-bottom: 160px;
   }
-  /* line 481, ../sass/app.scss */
+  /* line 489, ../sass/app.scss */
   .how-to-use.five .number {
     top: -13px;
   }
-  /* line 482, ../sass/app.scss */
+  /* line 490, ../sass/app.scss */
   .how-to-use.five p, .how-to-use.five img, .how-to-use.five h3 {
     width: 470px;
     margin-left: 100px;
   }
-  /* line 483, ../sass/app.scss */
+  /* line 491, ../sass/app.scss */
   .how-to-use.five .bump-space {
     margin-left: 20px;
     position: relative;
     z-index: 2;
   }
-  /* line 484, ../sass/app.scss */
+  /* line 492, ../sass/app.scss */
   .how-to-use.five .process-5 {
     height: 377px;
     width: 273px;
@@ -12556,7 +12566,7 @@ ul.mobile-nav a.current {
     left: 0;
     top: -120px;
   }
-  /* line 485, ../sass/app.scss */
+  /* line 493, ../sass/app.scss */
   .how-to-use.five .process-5-2 {
     height: 80px;
     width: 130px;
@@ -12565,15 +12575,15 @@ ul.mobile-nav a.current {
     right: 50px;
     top: 92px;
   }
-  /* line 486, ../sass/app.scss */
+  /* line 494, ../sass/app.scss */
   .how-to-use.five .process-5-2 img {
     margin-left: 0px;
   }
-  /* line 489, ../sass/app.scss */
+  /* line 497, ../sass/app.scss */
   .how-to-use h3 {
     margin-bottom: 10px;
   }
-  /* line 490, ../sass/app.scss */
+  /* line 498, ../sass/app.scss */
   .how-to-use .number {
     display: block;
     font-family: "Proxima Nova", "proxima-nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
@@ -12583,97 +12593,97 @@ ul.mobile-nav a.current {
     position: absolute;
     top: 23px;
   }
-  /* line 491, ../sass/app.scss */
+  /* line 499, ../sass/app.scss */
   .how-to-use .campaign-monitor {
     background: url(../images/campaign-monitor.png) no-repeat left center;
     background-size: 18px 12px;
     padding-left: 30px;
   }
 
-  /* line 493, ../sass/app.scss */
+  /* line 501, ../sass/app.scss */
   .inky-small.load {
     right: -250px;
     width: 283px;
   }
 
-  /* line 494, ../sass/app.scss */
+  /* line 502, ../sass/app.scss */
   .top-bar-section .has-form {
     padding: 11px 15px;
     height: 45px;
   }
 
-  /* line 495, ../sass/app.scss */
+  /* line 503, ../sass/app.scss */
   .button.tiny {
     padding: 5px 10px;
   }
 
-  /* line 496, ../sass/app.scss */
+  /* line 504, ../sass/app.scss */
   .top-area.main {
     overflow-x: hidden;
   }
 }
 /* coming-soon */
-/* line 500, ../sass/app.scss */
+/* line 508, ../sass/app.scss */
 .coming-soon {
   background: #004454;
 }
-/* line 501, ../sass/app.scss */
+/* line 509, ../sass/app.scss */
 .coming-soon .home-text {
   padding: 80px 0 83px;
 }
-/* line 502, ../sass/app.scss */
+/* line 510, ../sass/app.scss */
 .coming-soon .cs-text {
   margin-bottom: 5px;
   color: rgba(255, 255, 255, 0.5);
 }
-/* line 503, ../sass/app.scss */
+/* line 511, ../sass/app.scss */
 .coming-soon input {
   height: 42px;
 }
-/* line 504, ../sass/app.scss */
+/* line 512, ../sass/app.scss */
 .coming-soon .confirm {
   font-size: 1em;
   font-style: italic;
 }
-/* line 505, ../sass/app.scss */
+/* line 513, ../sass/app.scss */
 .coming-soon .confirm.error {
   color: red;
 }
 
 @media only screen and (max-width: 767px) {
-  /* line 511, ../sass/app.scss */
+  /* line 519, ../sass/app.scss */
   .coming-soon h1, .coming-soon p {
     text-align: center;
   }
-  /* line 512, ../sass/app.scss */
+  /* line 520, ../sass/app.scss */
   .coming-soon .home-text {
     padding: 20px 0 0 0;
   }
 
-  /* line 515, ../sass/app.scss */
+  /* line 523, ../sass/app.scss */
   .zurb-footer-top .global .footer-link-block.services {
     background: url(../images/icons/footer-studios.png) left top no-repeat;
   }
-  /* line 516, ../sass/app.scss */
+  /* line 524, ../sass/app.scss */
   .zurb-footer-top .global .footer-link-block.foundation {
     background: url(../images/icons/footer-foundation.png) left top no-repeat;
   }
-  /* line 517, ../sass/app.scss */
+  /* line 525, ../sass/app.scss */
   .zurb-footer-top .global .footer-link-block.apps {
     background: url(../images/icons/footer-products.png) left top no-repeat;
   }
-  /* line 518, ../sass/app.scss */
+  /* line 526, ../sass/app.scss */
   .zurb-footer-top .global .footer-link-block.expo {
     background: url(../images/icons/footer-expo.png) left top no-repeat;
   }
 }
-/* line 522, ../sass/app.scss */
+/* line 530, ../sass/app.scss */
 .cs-inky {
   background: url(../images/inky-mobile.svg) no-repeat right bottom;
   background-size: 624px 558px;
 }
 @media only screen and (max-width: 767px) {
-  /* line 522, ../sass/app.scss */
+  /* line 530, ../sass/app.scss */
   .cs-inky {
     background: url(../images/inky-mobile-hold.svg) no-repeat center bottom;
     background-size: 147px 200px;
@@ -12682,11 +12692,11 @@ ul.mobile-nav a.current {
 }
 
 /* inliner */
-/* line 531, ../sass/app.scss */
+/* line 539, ../sass/app.scss */
 .inliner-form .inactive {
   display: none;
 }
-/* line 532, ../sass/app.scss */
+/* line 540, ../sass/app.scss */
 .inliner-form textarea {
   min-height: 500px;
   font-family: "Lucida Console", Monaco, monospace;
@@ -12697,61 +12707,61 @@ ul.mobile-nav a.current {
   -ms-transition: all 0.7s ease-out;
   -o-transition: all 0.7s ease-out;
 }
-/* line 542, ../sass/app.scss */
+/* line 550, ../sass/app.scss */
 .inliner-form label {
   margin-bottom: 8px;
   line-height: 1.4;
 }
-/* line 543, ../sass/app.scss */
+/* line 551, ../sass/app.scss */
 .inliner-form.options label {
   margin-bottom: 0;
 }
 
-/* line 545, ../sass/app.scss */
+/* line 553, ../sass/app.scss */
 .inky-inliner {
   margin-bottom: 50px;
 }
-/* line 546, ../sass/app.scss */
+/* line 554, ../sass/app.scss */
 .inky-inliner h4 {
   margin-bottom: 5px;
 }
-/* line 547, ../sass/app.scss */
+/* line 555, ../sass/app.scss */
 .inky-inliner p {
   margin-bottom: 10px;
 }
-/* line 548, ../sass/app.scss */
+/* line 556, ../sass/app.scss */
 .inky-inliner .button:not(.secondary) {
   background: #004454;
   color: #FFF;
 }
-/* line 549, ../sass/app.scss */
+/* line 557, ../sass/app.scss */
 .inky-inliner .button:not(.secondary):hover {
   background: #002B36;
 }
-/* line 551, ../sass/app.scss */
+/* line 559, ../sass/app.scss */
 .inky-inliner textarea.result {
   min-height: 300px;
 }
-/* line 554, ../sass/app.scss */
+/* line 562, ../sass/app.scss */
 .inky-inliner .show-on-submit {
   display: none;
 }
-/* line 557, ../sass/app.scss */
+/* line 565, ../sass/app.scss */
 .inky-inliner .alert-box {
   background: #004454;
   border-color: 002932;
 }
-/* line 560, ../sass/app.scss */
+/* line 568, ../sass/app.scss */
 .inky-inliner .alert-box a {
   color: #fff;
 }
 
-/* line 565, ../sass/app.scss */
+/* line 573, ../sass/app.scss */
 .inline-advantages {
   margin-left: 25px;
 }
 
-/* line 566, ../sass/app.scss */
+/* line 574, ../sass/app.scss */
 #previewModal {
   height: 100%;
   width: 100%;
@@ -12762,7 +12772,7 @@ ul.mobile-nav a.current {
   z-index: 45;
   display: none;
 }
-/* line 576, ../sass/app.scss */
+/* line 584, ../sass/app.scss */
 #previewModal .control-bar {
   width: 100%;
   position: fixed;
@@ -12771,77 +12781,77 @@ ul.mobile-nav a.current {
   background: #f7f7f7;
   box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.25);
 }
-/* line 584, ../sass/app.scss */
+/* line 592, ../sass/app.scss */
 #previewModal .control-bar .close-btn {
   margin: 14px 10px;
   display: inline-block;
 }
-/* line 589, ../sass/app.scss */
+/* line 597, ../sass/app.scss */
 #previewModal .control-bar .report-btn {
   margin: 5px 10px;
   float: right;
 }
-/* line 595, ../sass/app.scss */
+/* line 603, ../sass/app.scss */
 #previewModal iframe {
   margin-top: 40px;
   border: none;
   width: 100%;
   height: 100%;
 }
-/* line 602, ../sass/app.scss */
+/* line 610, ../sass/app.scss */
 #previewModal.active {
   display: block;
 }
 
-/* line 607, ../sass/app.scss */
+/* line 615, ../sass/app.scss */
 #inlinerReportModal ol {
   margin-left: 2em;
 }
 
 /* compatibility */
-/* line 614, ../sass/app.scss */
+/* line 622, ../sass/app.scss */
 table span {
   display: block;
   text-align: center;
 }
-/* line 615, ../sass/app.scss */
+/* line 623, ../sass/app.scss */
 table .check {
   color: green;
 }
-/* line 616, ../sass/app.scss */
+/* line 624, ../sass/app.scss */
 table .x {
   color: red;
 }
 
-/* line 618, ../sass/app.scss */
+/* line 626, ../sass/app.scss */
 .compatibility-section {
   background: #f8f8f8;
   border: 1px solid #ddd;
   padding: 15px;
 }
-/* line 619, ../sass/app.scss */
+/* line 627, ../sass/app.scss */
 .compatibility-section p {
   margin-bottom: 0;
 }
-/* line 620, ../sass/app.scss */
+/* line 628, ../sass/app.scss */
 .compatibility-section a.reveal-table {
   font-size: 0.875em;
   display: block;
   text-align: right;
   line-height: 22px;
 }
-/* line 621, ../sass/app.scss */
+/* line 629, ../sass/app.scss */
 .compatibility-section table {
   display: none;
   margin: 20px 0 0;
 }
-/* line 622, ../sass/app.scss */
+/* line 630, ../sass/app.scss */
 .compatibility-section.active table {
   display: block;
 }
 
 /* magellan */
-/* line 626, ../sass/app.scss */
+/* line 634, ../sass/app.scss */
 [data-magellan-expedition] {
   background: transparent;
   left: auto;
@@ -12849,25 +12859,25 @@ table .x {
   min-width: 0;
 }
 
-/* line 629, ../sass/app.scss */
+/* line 637, ../sass/app.scss */
 ul.sub-nav li a {
   display: block;
   font-size: 0.875em;
   padding: 5px 0;
   color: #333;
 }
-/* line 630, ../sass/app.scss */
+/* line 638, ../sass/app.scss */
 ul.sub-nav li.active a {
   color: #CC7691;
   font-weight: bold;
 }
 
 /* copy/paste */
-/* line 635, ../sass/app.scss */
+/* line 643, ../sass/app.scss */
 h6 {
   position: relative;
 }
-/* line 636, ../sass/app.scss */
+/* line 644, ../sass/app.scss */
 h6 small.cp {
   position: absolute;
   right: 0;

diff --git a/templates.php b/templates.php
index 98b2f01bec587da4e93cb233cb90527d24c6c38e..2048906a5fa1cdcaf92443b81771ee9d98515782 100644 (file)
--- a/templates.php
+++ b/templates.php
@@ -44,53 +44,54 @@
     <br><br>
     <ul class="large-block-grid-3 small-block-grid-1 template-thumbs">
       <li>
-        <a href="downloads/templates/basic.html" class="notable" target="_blank">
-          <div class="notable-post"><img src="images/notable-icon.png"><h5>View on Notable</h5></div>
+        <a href="downloads/templates/basic.html" class="preview" target="_blank">
+          <div class="preview-post"><h5>Preview</h5></div>
           <img src="images/templates/basic.jpg" class="thumb">
         </a>
         <h6 class="name"><span>Basic</span> <a href="https://litmus.com/pub/85a1b19">View Tests</a></h6>
         <span class="description">This template is perfect for sending a basic but nice looking email to your readers.</span>
         <a href="downloads/templates/basic.html.zip" class="button primary" onClick="ga('send', 'event', 'Ink', 'Download', 'templates/basic.html.zip');">Download</a>
-        <a href="downloads/templates/basic.html" class="button secondary" target="_blank">Preview</a>
+        <a href="https://notableapp.com/posts/745212" class="button secondary" target="_blank">More Info</a>
       </li>
       <li>
-        <a href="downloads/templates/hero.html" class="notable" target="_blank">
-          <div class="notable-post"><img src="images/notable-icon.png"><h5>View on Notable</h5></div>
+        <a href="downloads/templates/hero.html" class="preview" target="_blank">
+          <div class="preview-post"><h5>Preview</h5></div>
           <img src="images/templates/hero.jpg" class="thumb">
         </a>
         <h6 class="name"><span>Hero</span> <a href="https://litmus.com/pub/6d34a4c">View Tests</a></h6>
         <span class="description">Want to include a snazzy hero image in your email? This template is for you!</span>
         <a href="downloads/templates/hero.html.zip" class="button primary" onClick="ga('send', 'event', 'Ink', 'Download', 'templates/hero.html.zip');">Download</a>
-        <a href="downloads/templates/hero.html" class="button secondary" target="_blank">Preview</a>
+        <a href="https://notableapp.com/posts/744389" class="button secondary" target="_blank">More Info</a>
       </li>
       <li>
-        <a href="https://notableapp.com/posts/744339" class="notable" target="_blank">
-          <div class="notable-post"><img src="images/notable-icon.png"><h5>View on Notable</h5></div>
+        <a href="downloads/templates/sidebar.html" class="preview" target="_blank">
+          <div class="preview-post"><h5>Preview</h5></div>
           <img src="images/templates/sidebar.jpg" class="thumb">
         </a>
         <h6 class="name"><span>Sidebar</span> <a href="https://litmus.com/pub/f6f3c9d">View Tests</a></h6>
         <span class="description">This template includes a sidebar area for a list of links, perfect for linking to additional content.</span>
         <a href="downloads/templates/sidebar.html.zip" class="button primary" onClick="ga('send', 'event', 'Ink', 'Download', 'templates/sidebar.html.zip');">Download</a>
-        <a href="downloads/templates/sidebar.html" class="button secondary" target="_blank">Preview</a>
+        <a href="https://notableapp.com/posts/744339" class="button secondary" target="_blank">More Info</a>
       </li>
       <li>
-        <a href="https://notableapp.com/posts/744071" class="notable" target="_blank">
-          <div class="notable-post"><img src="images/notable-icon.png"><h5>View on Notable</h5></div>
+        <a href="downloads/templates/sidebar-hero.html" class="preview" target="_blank">
+          <div class="preview-post"><h5>Preview</h5></div>
           <img src="images/templates/sidebar-hero.jpg" class="thumb">
         </a>
         <h6 class="name"><span>Sidebar Hero</span> <a href="https://litmus.com/pub/c00b7d3">View Tests</a></h6>
         <span class="description">Want a sidebar and a hero image? Let's go crazy! This template combines the Sidebar and Hero templates.</span>
         <a href="downloads/templates/sidebar-hero.html.zip" class="button primary" onClick="ga('send', 'event', 'Ink', 'Download', 'templates/sidebar-hero.html.zip');">Download</a>
-        <a href="downloads/templates/sidebar-hero.html" class="button secondary" target="_blank">Preview</a>
+        <a href="https://notableapp.com/posts/744071" class="button secondary" target="_blank">More Info</a>
       </li>
       <!-- <li>
         <a href="downloads/templates/newsletter.html" target="_blank">
+          <div class="preview-post"><h5>Preview</h5></div>
           <img class="thumb" src="images/templates/newsletter.jpg">
         </a>
         <h6 class="name"><span>Newsletter</span> <a href="https://litmus.com/pub/ff3824a">View Tests</a></h6>
         <span class="description">This template is perfect for a point-by-point newsletter. For good measure, we've thrown in a hero image, too.</span>
         <a href="downloads/templates/newsletter.html.zip" class="button primary" onClick="ga('send', 'event', 'Ink', 'Download', 'templates/newsletter.html.zip');">Download</a>
-        <a href="downloads/templates/newsletter.html" class="button secondary" target="_blank">Preview</a>
+        <a href="downloads/templates/newsletter.html" class="button secondary" target="_blank">More Info</a>
       </li> -->
     </ul> 
     <!--