add actions section under each post

- comment vi tweet, thanks through bitcoin
- add vex modals with custom theme
- add bitcoin icon
- fix footer layout

_src/_assets/icons/entypo/bitcoin.svg

@@ -0,0 +1,4 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20">
+  <title>bitcoin</title>
+  <path d="M8.16,10A3.67,3.67,0,0,0,10,6.76c0-1-.37-3.19-3.42-3.84V0.81A0.82,0.82,0,0,0,5.79,0,0.82,0.82,0,0,0,5,.81V2.7H3.95V0.81A0.82,0.82,0,0,0,3.16,0a0.82,0.82,0,0,0-.79.81V2.7H0.79a0.81,0.81,0,0,0,0,1.62H1.05V15.68H0.79a0.81,0.81,0,0,0,0,1.62H2.37v1.89a0.82,0.82,0,0,0,.79.81,0.82,0.82,0,0,0,.79-0.81V17.3H5v1.89a0.82,0.82,0,0,0,.79.81,0.82,0.82,0,0,0,.79-0.81V17.08C9.63,16.43,10,14.27,10,13.24A3.67,3.67,0,0,0,8.16,10ZM4.53,4.32c2.58,0,3.89.81,3.89,2.43S7.11,9.19,4.53,9.19H2.63V4.32H4.53Zm0,11.35H2.63V10.81H4.53c2.58,0,3.89.81,3.89,2.43S7.11,15.68,4.53,15.68Z"/>
+</svg>

_src/_assets/js/app.js

@@ -3,7 +3,7 @@
 //=require ../../../node_modules/svg4everybody/dist/svg4everybody.js
 //=require ../../../node_modules/jquery/dist/jquery.js
 //=require ../../../bower_components/time-elements/time-elements.js
-
+//=require ../../../node_modules/vex-js/js/vex.combined.min.js
 
 //
 // include modules
@@ -27,4 +27,14 @@
         nosvg: false
     });
 
+    $('.js-vex-btc').click(function(e) {
+        e.preventDefault();
+
+        vex.defaultOptions.className = 'vex-theme-kremalicious vex-bitcoin';
+        vex.dialog.buttons.YES.text = 'Close';
+        vex.open({
+            content: '<h3 class=\"vex__title\">My Bitcoin Address</h3>\n <img src=\"/assets/img/btc-qr.png\" />\n <pre class=\"highlight\"><code class=\"nt\">171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V</code></pre>'
+        });
+    });
+
 }(jQuery));

_src/_assets/styl/actions.styl

@@ -0,0 +1,47 @@
+.actions
+    @extend .divider-top, .divider-bottom, .small
+    margin-top: ($spacer * 2)
+    padding: $spacer 0
+
+    .grid
+        margin-bottom: 0
+
+.action
+    padding-left: 32px
+
+    .icon
+        margin-right: 8px
+        margin-left: -32px
+        margin-bottom: -3px
+
+.action__title
+    font-size: $font-size-base
+    line-height: $line-height
+    margin-top: 0
+    color: $text-color
+    margin-bottom: 0
+    display: inline-block
+
+.action__text
+    display: block
+    margin-bottom: 0
+
+.donate
+    .btc
+        @extend .mini
+        display: inline-block
+        width: 80px
+        white-space: nowrap
+        overflow: hidden
+        text-overflow: ellipsis
+
+.vex-bitcoin
+    @extend .textcenter
+
+    img
+        margin-bottom: $spacer
+        width: 156px
+
+    pre
+        @extend .small
+        display: inline-block

_src/_assets/styl/buttons.styl

@@ -127,6 +127,7 @@ a.btn-primary
     line-height: 1
     font-size: $font-size-large
     padding: 3px
+    cursor: pointer
 
     button.&
         cursor: pointer

_src/_assets/styl/code.styl

@@ -9,7 +9,7 @@ kbd,
 pre,
 samp
     font-family: $font-family-monospace
-    font-size: $font-size-mini
+    font-size: $font-size-small
     hyphens: none
 
 code,

_src/_assets/styl/comments.styl

@@ -1,17 +0,0 @@
-//
-// kremalicious3
-// --------------
-// Comments
-//
-
-.comments
-    @extend .textcenter
-    font-size: $font-size-small
-    font-style: italic
-    color: $text-color-dimmed
-
-    p
-        margin-bottom: ($spacer/2)
-
-    .btn-wrap
-        height: 27px

_src/_assets/styl/content-featured.styl

@@ -13,18 +13,25 @@
 
     .grid__col
         &:first-child
-            margin-left: -8%
+            margin-left: -($spacer)
         &:last-child
-            margin-right: -8%
+            margin-right: -($spacer)
 
     @media $breakpoint2
         padding-bottom: ($spacer*3)
         .grid__col
             padding-top: 0
             &:first-child
-                margin-left: -16%
+                margin-left: -($spacer * 2)
             &:last-child
-                margin-right: -16%
+                margin-right: -($spacer * 2)
+
+    @media $breakpoint3
+        .grid__col
+            &:first-child
+                margin-left: -($spacer * 4)
+            &:last-child
+                margin-right: -($spacer * 4)
 
     .hentry__teaser
         picture

_src/_assets/styl/content.styl

@@ -56,11 +56,17 @@
     picture
         max-width: none
         display: block
-        margin: ($spacer*1.5) -8%
+        margin: ($spacer*1.5)
+        margin-left: -($spacer)
+        margin-right: -($spacer)
 
         @media $breakpoint2
-            margin-left: -16%
+            margin-left: -($spacer * 2)
-            margin-right: -16%
+            margin-right: -($spacer * 2)
+
+        @media $breakpoint3
+            margin-left: -($spacer * 4)
+            margin-right: -($spacer * 4)
 
     img
         @extend .media-frame

_src/_assets/styl/footer.styl

@@ -75,3 +75,14 @@
     @extend .h5
     color: $text-color-dimmed
     margin-bottom: ($spacer/2)
+
+.footer__btc
+    margin-left: ($spacer / 2)
+    .icon
+        width: 10px
+        margin-right: 0
+    code
+        font-size: .55rem
+        background: none
+        color: $link-color
+        padding: 0

_src/_assets/styl/kremalicious3.styl

@@ -26,6 +26,7 @@
 @import 'syntax'
 @import 'alerts'
 @import 'animations'
+@import 'vex'
 
 // Content
 @import 'content'
@@ -33,7 +34,6 @@
 @import 'content-link'
 @import 'content-featured'
 @import 'content-related'
-@import 'comments'
 
 @import 'page-about'
 @import 'page-404'
@@ -45,6 +45,7 @@
 @import 'search'
 @import 'tooltips'
 @import 'footer'
+@import 'actions'
 
 // Print
 @import 'print'

_src/_assets/styl/layout.styl

@@ -34,7 +34,7 @@
     border-bottom: 1px solid rgba(255,255,255,.7)
     box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
 
-    transform: translate3d(0,-($spacer*7),0)
+    transform: translate3d(0,-($spacer*6.5),0)
 
     @media $breakpoint2
         transform: translate3d(0,-($spacer*5),0)
@@ -43,10 +43,10 @@
         transform: translate3d(0,0,0)
 
 .site__footer
-    margin-top: -200px
+    margin-top: -($spacer*6.5)
 
     @media $breakpoint2
-        margin-top: -160px
+        margin-top: 0
 
     .has-menu-open &
         margin-top: 0
@@ -59,7 +59,7 @@
         @extend .transition
         position: relative
         z-index: 2
-        margin-bottom: 420px
+        margin-bottom: 30rem
         transform: translate3d(0,($spacer*3),0)
 
         .has-menu-open &

_src/_assets/styl/navigation.styl

@@ -62,6 +62,7 @@
 
 .nav-link
     @extend .category
+    font-size: $font-size-small
     text-shadow: 0 1px 0 rgba(#fff, .5)
     padding: $padding-base-vertical $padding-base-horizontal
     margin-bottom: 0

_src/_assets/styl/typography.styl

@@ -236,7 +236,7 @@ hr
     font-size: $font-size-small
 
 .mini
-    font-size: $font-size-small
+    font-size: $font-size-mini
 
 // Quotes
 /////////////////////////////////////

_src/_assets/styl/variables.styl

@@ -45,7 +45,7 @@ $font-size-root-lg          = 20px
 $font-size-base             = 1rem
 $font-size-large            = 1.35rem
 $font-size-small            = 0.8rem
-$font-size-mini             = 0.7rem
+$font-size-mini             = 0.6rem
 
 $font-size-h1               = 3rem
 $font-size-h2               = 2rem

_src/_assets/styl/vex.styl

@@ -0,0 +1,126 @@
+.vex,
+.vex *,
+.vex *:before,
+.vex *:after
+    box-sizing: border-box
+
+.vex
+    position: fixed
+    overflow: auto
+    -webkit-overflow-scrolling: touch
+    z-index: 1111
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+
+.vex-scrollbar-measure
+    position: absolute
+    top: -9999px
+    width: 50px
+    height: 50px
+    overflow: scroll
+
+.vex-overlay
+    animation: vex-fadein .3s
+    position: fixed
+    background: rgba(0, 0, 0, .4)
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+
+    .vex.vex-closing &
+        animation: vex-fadeout .3s
+
+.vex-content
+    animation: vex-fadein .3s
+    background: #fff
+
+    .vex.vex-closing &
+        animation: vex-fadeout .2s
+
+.vex-dialog-form
+    margin: 0 // Browser reset
+
+.vex-dialog-button
+    text-rendering: optimizeLegibility
+    appearance: none
+    cursor: pointer
+    -webkit-tap-highlight-color: transparent
+
+// Prevent background scrolling when vex is open
+// https://github.com/HubSpot/vex/issues/18
+body.vex-open
+    overflow: hidden
+
+
+//
+// Custom theme
+//
+.vex-theme-kremalicious
+    display: flex
+    align-items: center
+    justify-content: center
+
+    .vex-overlay
+        background: alpha($body-bg, .8)
+        backdrop-filter: blur(5px)
+
+    .vex-content
+        background: transparent
+        padding: 0
+        position: relative
+        width: 100%
+        max-width: $screen-small-min
+        border-radius: $border-radius-base
+        border: 1px solid alpha($brand-grey-light, .2)
+
+    .vex__title
+        @extend .h4
+        margin-top: ($spacer/2)
+        border-bottom: 1px solid alpha($brand-grey-light, .2)
+        padding-bottom: ($spacer/2)
+
+    .vex-dialog-buttons
+        margin-top: $spacer
+        border-top: 1px solid alpha($brand-grey-light, .2)
+        padding-top: ($spacer/2)
+
+    .vex-dialog-button
+        @extend .btn
+
+    .vex-dialog-button-primary
+        @extend .btn-primary
+
+    .vex-close
+        @extend .close
+        position: absolute
+        top: ($spacer/4)
+        right: ($spacer/2)
+
+
+        &:before
+            @extend .close
+            content: "\00D7" // ×
+            display: block
+
+        &:hover,
+        &:focus
+            &:before
+                color: $link-color
+
+//
+// Overlay/content animations
+//
+@keyframes vex-fadein
+        0%
+            opacity: 0
+        100%
+            opacity: 1
+
+@keyframes vex-fadeout
+        0%
+            opacity: 1
+        100%
+            opacity: 0

_src/_includes/actions.html

@@ -0,0 +1,23 @@
+
+<aside class="actions">
+    <div class="grid grid--gutters grid--full grid-small--half">
+        <div class="grid__col">
+            <article class="action comment">
+                <svg class="icon icon-entypo icon-entypo-twitter">
+                    <use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
+                </svg>
+                <h1 class="action__title">Have a comment?</h1>
+                <p class="action__text">Hit me up <a href="https://twitter.com/intent/tweet?text=@kremalicious&url={{ site.url }}{{ page.url }}">@kremalicious</a></p>
+            </article>
+        </div>
+        <div class="grid__col">
+            <article class="action donate">
+                <svg class="icon icon-entypo icon-entypo-bitcoin">
+                    <use xlink:href="/assets/img/sprite.svg#entypo-bitcoin"></use>
+                </svg>
+                <h1 class="action__title">Found something useful?</h1>
+                <p class="action__text">Say thanks <a href="#" class="js-vex-btc">with Bitcoins.</a></p>
+            </article>
+        </div>
+    </div>
+</aside>

_src/_includes/footer.html

@@ -44,6 +44,12 @@
                         </svg>
                         View source
                     </a>
+                    <a href="#" class="footer__btc js-vex-btc">
+                        <svg class="icon icon-entypo icon-entypo-bitcoin">
+                            <use xlink:href="/assets/img/sprite.svg#entypo-bitcoin"></use>
+                        </svg>
+                        <code>171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V</code>
+                    </a>
                 </p>
             </section>
 

_src/_layouts/post.html

@@ -19,6 +19,8 @@ layout: base
             {{ content }}
         </section>
 
+        {% include actions.html %}
+
         {% include entry_meta.html %}
 
         {% include relatedposts.html %}

_src/_posts/2008-05-22-showcasing-the-css-parallax-effect-12-creative-usages.md

@@ -8,6 +8,8 @@ date: 2008-05-22 20:01:12+00:00
 wordpress_id: 59
 categories:
     - design
+
+tags:
     - css
 
 redirect_from:

gulpfile.js

@@ -60,7 +60,7 @@ var ICONS = {
         dist: DIST + '/assets/img/',
         prefix: 'entypo-',
         icons: [
-            'twitter', 'facebook', 'google+', 'magnifying-glass', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye'
+            'twitter', 'facebook', 'google+', 'magnifying-glass', 'rss', 'link', 'arrow-with-circle-down', 'forward', 'heart', 'info-with-circle', 'infinity', 'github', 'chevron-right', 'chevron-left', 'eye', 'bitcoin'
         ]
     }
 }

package.json

@@ -52,7 +52,8 @@
     "gulp-uncss": "^1.0.4",
     "gulp-util": ">=3.0.6",
     "merge-stream": ">=0.1.7",
-    "run-sequence": ">=1.1.0"
+    "run-sequence": ">=1.1.0",
+    "vex-js": "^2.3.4"
   },
   "engines": {
     "node": ">=0.10.29"