bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

make Buffy wink

This commit is contained in:
Matthias Kretschmann 2016-02-10 01:04:57 +01:00
parent 8c04fcc683
commit 5b1a5be196
5 changed files with 60 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
_src/_assets/javascripts/page-community.js Normal file
View File

@ -0,0 +1,15 @@
//=include ../../../node_modules/is-in-viewport/lib/isInViewport.js
jQuery(function($) {
// start Buffy animation when in viewport
var buffy = $('#buffy');
if (buffy.isInViewport() ) {
buffy.addClass('is-ready');
} else {
buffy.removeClass('is-ready');
}
});

48
_src/_assets/styles/page-community.scss
View File

@ -10,12 +10,8 @@
}
}
.section-community,
.section-conduct {
@extend .text-center;
}
.section-community {
@extend .text-center;
position: relative;
// make room for BuffyDB
padding-bottom: 200px;
@ -33,15 +29,6 @@
margin-top: 0;
}
.buffy {
@extend .img--responsive;
vertical-align: bottom;
height: 220px;
position: absolute;
bottom: 0;
right: 0;
}
.social-link {
&,
.icon {
@ -79,3 +66,36 @@
}
}
}
//
// Buffy: positioned and animated
//
#buffy {
@extend .img--responsive;
vertical-align: bottom;
height: 220px;
position: absolute;
bottom: 0;
right: 0;
#arm {
transform-origin: right;
}
&.is-ready {
#arm {
animation: buffy-wink 1s ease-in-out 3s;
}
}
&:hover #arm {
animation: buffy-wink 1s ease-in-out;
}
}
@keyframes buffy-wink {
0% { transform: rotate(0); }
25%, 50% { transform: rotate(-20deg); }
30%, 100% { transform: rotate(0); }
}

9
_src/_assets/images/buffy-with-stage.svg → _src/_includes/svg/buffy-with-stage.svg
View File

@ -1,4 +1,4 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1091.39 579.95">
<svg id="buffy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1091.39 579.95">
<defs>
<style>
.cls-1 {
@ -46,8 +46,11 @@
<path class="cls-1" d="M1091.39,595.28H276.5s0-579.95,810-579.95h4.89V595.28Z" transform="translate(0 -15.33)"/>
<path class="cls-2" d="M0,595.28H1091.39V487C608.5,473,209.5,500,0,595.28Z" transform="translate(0 -15.33)"/>
<g>
<path class="cls-3" d="M824.74,242.87C783,240.4,751.5,270.32,751.5,270.32l-37.75-34.76h-2.92l34.8,50s56.76-10.16,71.28-21.85c3.92-3.15,9.86-17.52,9.86-17.52S825.72,242.93,824.74,242.87Z" transform="translate(0 -15.33)"/>
<path class="cls-4" d="M712.25,238.56c1.12,0.3,2.42-.2,3.07-1.9a20.29,20.29,0,0,0,.66-11.27c-2.62-6-9.82-9.46-11.4-8-1.93,1.72,4,11,3.1,11.49l-4.24-7.2s-4.51,3.25.56,10.06C705.57,233.79,708.09,237.45,712.25,238.56Z" transform="translate(0 -15.33)"/>
<g id="arm">
<path class="cls-3" d="M824.74,242.87C783,240.4,751.5,270.32,751.5,270.32l-37.75-34.76h-2.92l34.8,50s56.76-10.16,71.28-21.85c3.92-3.15,9.86-17.52,9.86-17.52S825.72,242.93,824.74,242.87Z" transform="translate(0 -15.33)"/>
<path class="cls-4" d="M712.25,238.56c1.12,0.3,2.42-.2,3.07-1.9a20.29,20.29,0,0,0,.66-11.27c-2.62-6-9.82-9.46-11.4-8-1.93,1.72,4,11,3.1,11.49l-4.24-7.2s-4.51,3.25.56,10.06C705.57,233.79,708.09,237.45,712.25,238.56Z" transform="translate(0 -15.33)"/>
</g>
<path class="cls-5" d="M855.76,427.48s-0.09.28-.17,0.62-0.22,1-.39,1.73-0.32,1.75-.41,2.88c-0.05.56-.13,1.16-0.17,1.8l-0.08,2c-0.05.7,0,1.44,0,2.2s0,1.55.09,2.36l0.23,2.5c0.06,0.86.26,1.71,0.39,2.59a50.2,50.2,0,0,0,1.18,5.39,25.91,25.91,0,0,0,.84,2.72L858.2,457c0.78,1.76,1.5,3.56,2.34,5.27s1.78,3.35,2.71,4.92l2.91,4.4c1,1.37,2,2.58,2.91,3.75l1.32,1.66c0.41,0.53.88,1,1.28,1.41l2.13,2.27,1.86,2-2-1.8-2.34-2.07c-0.44-.41-1-0.8-1.42-1.3L868.38,476c-1-1.09-2.18-2.22-3.3-3.51l-3.38-4.21c-1.1-1.52-2.14-3.16-3.25-4.8s-2-3.48-2.94-5.25l-1.23-2.77a28.33,28.33,0,0,1-1.15-2.79,54,54,0,0,1-1.79-5.62c-0.23-.93-0.53-1.83-0.68-2.75l-0.5-2.67c-0.19-.87-0.23-1.73-0.34-2.56s-0.21-1.63-.23-2.41l-0.11-2.23c0-.71,0-1.39,0-2,0-1.27.11-2.4,0.17-3.32s0.18-1.66.29-2.22l0.14-.77Z" transform="translate(0 -15.33)"/>
<path class="cls-6" d="M880,487c-0.2-.12-6.78-0.26-8.55-1.8a4.24,4.24,0,1,1,5.56-6.41C878.74,480.28,880,487,880,487Z" transform="translate(0 -15.33)"/>
<path class="cls-7" d="M814.17,151.72c-15.78,2.43-40.82-44.55-40.82-44.55s8.68,73.39,43.46,63.7C821.26,169.63,818.73,151,814.17,151.72Z" transform="translate(0 -15.33)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

17
_src/community.html
View File

@ -2,6 +2,8 @@
layout: page
title: Community
js: page-community.min.js
---
<section class="section section-community">
@ -54,18 +56,5 @@ title: Community
</div>
<img class="buffy" src="/assets/img/buffy-with-stage.svg" alt="">
{% include svg/buffy-with-stage.svg %}
</section>
<!-- <section class="section section-contribute">
<div class="row">
<header class="section-header">
<h1 class="section-title">Community Guidelines</h1>
<p class="section-description">We’re happy you’re participating in this project and doing something big that's going to help the world. Thanks for abiding by our Community Guidelines.</p>
</header>
<p>
</p>
</div>
</section> -->

3
package.json
View File

@ -19,7 +19,8 @@
"normalize-opentype.css": ">=0.2.4",
"parsleyjs": "^2.0.7",
"svg4everybody": "^2.0.0",
"vivus": "^0.2.2"
"vivus": "^0.2.2",
"is-in-viewport": "^2.3.0"
},
"devDependencies": {
"browser-sync": ">=2.10.0",