m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00
Code

add actions section under each post

Browse Source 
- comment vi tweet, thanks through bitcoin
- add vex modals with custom theme
- add bitcoin icon
- fix footer layout
This commit is contained in:
Matthias Kretschmann 2016-04-17 20:01:42 +02:00
parent 514b926abd
commit 5def95446e
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
22 changed files with 266 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_src/_assets/icons/entypo/bitcoin.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 721 B

BIN
_src/_assets/img/btc-qr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 B

12
_src/_assets/js/app.js
View File

@ -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));

47
_src/_assets/styl/actions.styl Normal file
View File

@ -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

1
_src/_assets/styl/buttons.styl
View File

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

2
_src/_assets/styl/code.styl
View File

@ -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,

17
_src/_assets/styl/comments.styl
View File

@ -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

15
_src/_assets/styl/content-featured.styl
View File

@ -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

12
_src/_assets/styl/content.styl
View File

@ -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-right: -16%
margin-left: -($spacer * 2)
margin-right: -($spacer * 2)
@media $breakpoint3
margin-left: -($spacer * 4)
margin-right: -($spacer * 4)
img
@extend .media-frame

11
_src/_assets/styl/footer.styl
View File

@ -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

3
_src/_assets/styl/kremalicious3.styl
View File

@ -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'

8
_src/_assets/styl/layout.styl
View File

@ -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 &

1
_src/_assets/styl/navigation.styl
View File

@ -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

2
_src/_assets/styl/typography.styl
View File

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

2
_src/_assets/styl/variables.styl
View File

@ -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

126
_src/_assets/styl/vex.styl Normal file
View File

@ -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" // &times;
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

23
_src/_includes/actions.html Normal file
View File

@ -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>

6
_src/_includes/footer.html
View File

@ -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>

2
_src/_layouts/post.html
View File

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

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

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

2
gulpfile.js
View File

@ -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'
]
}
}

3
package.json
View File

@ -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"