From a64dd6ded37eb21a748885a25333c24eae38718a Mon Sep 17 00:00:00 2001 From: lialun Date: Sun, 10 Sep 2017 22:39:41 +0800 Subject: [PATCH 01/12] update compatible with ghost>=1.0 update theme style update readme --- README.md | 35 +++++++++---------- assets/css/default.css | 78 ++++++++++++++++++++++++++++++++---------- assets/js/default.js | 12 ++++--- default.hbs | 3 +- package.json | 17 +++++++-- partials/config.hbs | 2 +- 6 files changed, 99 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 7cb2abd..0e2f172 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,26 @@ # EverBlog -A three rows layout ghost blog theme +A three-row Ghost blog theme, inspired from Evernote. -##Demo: +## Demo: [http://allan.li/](http://allan.li/) -##Source: +## Source: https://github.com/lialun/EverBlog -##Introduction: +## Introduction: ### Chinese Introduction : [http://allan.li/everblog-theme/](http://allan.li/everblog-theme/) -##Advantage -1. three rows layout,information classification clear and accurate. -2. small themes, load very fast. -3. global ajax request, response fast. -4. dark and light theme change,not dazzling in the night. -5. adaptate mobile phone. + +## Advantage +1. Three rows layout,make information classification clear and accurate. +2. Small theme & Global AJAX request. +3. Dark or light theme toggle. +4. Mobile-Friendly. ##Usage: -1. The pic in the top left corner is the Blog Logo, upload in the Admin System-General, default size 70*70px. -2. Navigation list add in the Admin system-Navigation. - You can add Tag URL which can be found in the Admin system-Tags,like "http://allan.li/tag/java/". - You can add Blog URL ,like "http://allan.li/sql-common-resources/". - You can also add external URL ,like "http://google.com/",it will open in new tab. -3. Change Post per page much bigger(like 15),or auto load next page will be fail. -4. The blog which will auto load in the index page, is set in /partials/config.hbs,the default_post param.or leave blank will not auto load blog. -5. Highlight plugin is Prism, support cssjsbashcc++c#gophppythonsqlgroovyhttp.when need highlight,just add \`\`\` and the language name,like \`\`\`java. \ No newline at end of file +1. The pic in the top left corner is the `Publication logo`, upload in the Admin System-`General`, default size 70*70px. +2. Navigation list add in the Admin system-`Design`-`Navigation`. + You can add Tag URL which can be found in the Admin system-Tags, like "http://allan.li/tag/java/". + You can add Blog URL, like "http://allan.li/sql-common-resources/". + You can also add external URL, like "http://google.com/", it will open in new tab. +3. Open mainpage will auto load "/welcome/" blog, if don't have that blog right area will leave blank.You can change the default open blog URL in /partials/config.hbs. +4. Code highlighting plugin is Prism, support supports: css, js, bash, c, c++, c#, go, php, python, sql, groovy, http. To highlight, use markdown code-block (three ticks) and the language name: (```javascript) \ No newline at end of file diff --git a/assets/css/default.css b/assets/css/default.css index 2a0567e..250b63d 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -9,7 +9,7 @@ html { body { height: 100%; font-size: 100%; - font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体" ! important; + font-family: Helvetica, Tahoma, "Microsoft YaHei", Arial, sans-serif ! important; } div, a { @@ -35,11 +35,6 @@ code { height: 100%; } -.octicon { - width: 16px; - height: 16px; -} - .text-overflow { white-space: nowrap; text-overflow: ellipsis; @@ -53,7 +48,8 @@ code { .list-group-item:first-child, .list-group-item:last-child { border-radius: 0; } -/*--------------scroll------------------*/ + +/*--------------scroll------------------*/ .scroll { -ms-overflow-style: none; overflow: -moz-scrollbars-none; @@ -88,6 +84,7 @@ code { #navigation { height: 100%; + font-size: 1.1rem; } #logo img { @@ -134,41 +131,42 @@ code { } #blog-list .tag-stats { - height: 5rem; + height: 5.5rem; list-style-position: inside; margin: 0; - padding: 7px 12px; + padding: 0.8rem 1rem; text-align: center; } #blog-list .tag-stats-header { - font-size: 1.7rem; + font-size: 1.8rem; } #blog-list .tag-stats-count { - font-size: 0.9rem; + font-size: 1rem; } #blog-list .blog-excerpt { cursor: pointer; list-style-position: inside; margin: 0; - padding: 7px 12px; + padding: 0.6rem 0.8rem; } .blog-excerpt-title { + font-size: 1.0rem; padding-bottom: 0.1rem; } .blog-excerpt-date { - font-size: 0.7rem; + font-size: 0.8rem; } .blog-excerpt-content { - font-size: 0.8rem; + font-size: 0.9rem; font-weight: 400; - line-height: 1.25rem; - height: 3.75rem; + line-height: 1.20rem; + height: 3.60rem; text-overflow: ellipsis; overflow: hidden; } @@ -223,7 +221,7 @@ code { } .blog-view-title { - margin-bottom: 1rem; + margin-bottom: 0.8rem; text-align: center; font-size: 2rem; } @@ -238,8 +236,50 @@ code { } .blog-view-content { - font-size: 0.9rem; + font-size: 1.1rem; font-weight: 300; - line-height: 1.3rem; + line-height: 1.6rem; margin-bottom: 3rem; } + +.blog-view-content blockquote { + font-size: 1.1rem; +} + +.blog-view-content h1 { + font-size: 2.2rem; + margin-top: 1.4rem; + margin-bottom: 0.8rem; +} + +.blog-view-content h2 { + font-size: 1.9rem; + margin-top: 1.2rem; + margin-bottom: 0.8rem; +} + +.blog-view-content h3 { + font-size: 1.7rem; + margin-top: 1.1rem; + margin-bottom: 0.5rem; +} + +.blog-view-content h4 { + font-size: 1.5rem; + margin-top: 0.9rem; + margin-bottom: 0.3rem; +} + +.blog-view-content h6, .blog-view-content h5 { + font-size: 1.2rem; + margin-top: 0.7rem; + margin-bottom: 0.2rem; +} + +.blog-view-content .mark, .blog-view-content mark { + padding: 0.1rem; +} + +.blog-view-content pre code { + font-size: 0.9rem; +} \ No newline at end of file diff --git a/assets/js/default.js b/assets/js/default.js index 190903d..5035182 100644 --- a/assets/js/default.js +++ b/assets/js/default.js @@ -40,7 +40,7 @@ } //load default blog (if url is main page or tag, blog content page will be blank) if ($("#blog-view").text().trim().length == 0 && default_post != "") { - loadBlogByURL(default_post, false, false); + loadBlogByURL(default_post, false, false, false); } //Scroll4Ever bindScroll4Ever(); @@ -61,7 +61,7 @@ function navigationFunction(obj) { if (link.match("^(http|https)://" + host + "/tag/.*", "i") || link.match("^(http|https)://" + host + "/?$", "i")) { loadBlogListByURL(link, true); } else if (link.match("^(http|https)://" + host + "/.*/$", "i")) { - loadBlogByURL(link, true, true); + loadBlogByURL(link, true, true, true); } else { window.open(link, '_self') } @@ -76,7 +76,7 @@ function loadBlog(obj) { $(obj).addClass("active"); //load blog var url = $(obj).attr("href"); - loadBlogByURL(url, true, true); + loadBlogByURL(url, true, true, true); } function loadBlogListByURL(url, isSetReplaceState) { @@ -103,7 +103,7 @@ function loadBlogListByURL(url, isSetReplaceState) { }); } -function loadBlogByURL(url, isSetReplaceState, isChangeScreen) { +function loadBlogByURL(url, isSetReplaceState, isChangeScreen, isShowAlert) { $.ajax({ type: "get", url: url, @@ -128,7 +128,9 @@ function loadBlogByURL(url, isSetReplaceState, isChangeScreen) { NProgress.done(); }, error: function () { - alert("Something went wrong!"); + if (isShowAlert) { + alert("Something went wrong! please try again later."); + } } }); } diff --git a/default.hbs b/default.hbs index 77460b3..947e7a8 100644 --- a/default.hbs +++ b/default.hbs @@ -1,10 +1,9 @@ - + {{meta_title}} - diff --git a/package.json b/package.json index 0baf52a..a1b9c5c 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,15 @@ { - "name": "EverBlog", - "version": "0.2.1" -} + "name": "everblog", + "description": "A three rows layout ghost blog theme", + "version": "0.3.0", + "engines": { + "ghost": ">=1.0.0" + }, + "license": "GPL", + "author": { + "email": "account@lialun.io" + }, + "config": { + "posts_per_page": 12 + } +} \ No newline at end of file diff --git a/partials/config.hbs b/partials/config.hbs index 65e52c2..a6fef67 100644 --- a/partials/config.hbs +++ b/partials/config.hbs @@ -4,5 +4,5 @@ var light_theme = "{{asset "css/white.css"}}";//the location of light theme css var dark_theme = "{{asset "css/grey.css"}}";//the location of dark theme css //config - var default_post = "";//the post which show when the blog main page is open. + var default_post = "/welcome/";//the post which show when the blog main page is open. From fdcbc1faf37c9775ee7ead0e9f200da39109e32f Mon Sep 17 00:00:00 2001 From: lialun Date: Sun, 10 Sep 2017 22:53:19 +0800 Subject: [PATCH 02/12] update readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0e2f172..3875f70 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,8 @@ https://github.com/lialun/EverBlog 3. Dark or light theme toggle. 4. Mobile-Friendly. -##Usage: +## Usage: +0. download the last release version, and `Upload a theme` in Admin System-`Design`. 1. The pic in the top left corner is the `Publication logo`, upload in the Admin System-`General`, default size 70*70px. 2. Navigation list add in the Admin system-`Design`-`Navigation`. You can add Tag URL which can be found in the Admin system-Tags, like "http://allan.li/tag/java/". From f4531cea0d9d9d652b3b429b1d2bf12abcc0d8ef Mon Sep 17 00:00:00 2001 From: lialun Date: Tue, 12 Sep 2017 08:34:23 +0800 Subject: [PATCH 03/12] style little change fix scroll in ios --- assets/css/default.css | 30 ++++++++++++++++++------------ partials/blog-view.hbs | 22 ++++++++++++---------- 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 250b63d..a3e3bf8 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -4,12 +4,14 @@ html { height: 100%; font-size: 16px; + overflow: hidden; } body { height: 100%; font-size: 100%; font-family: Helvetica, Tahoma, "Microsoft YaHei", Arial, sans-serif ! important; + -webkit-overflow-scrolling: touch; } div, a { @@ -183,7 +185,7 @@ code { height: 100%; } -@media (min-width: 991px) { +@media (min-width: 992px) { #blog-view-header { display: none; } @@ -192,7 +194,7 @@ code { #blog-view-header { width: 100%; position: absolute; - z-index: 99999; + z-index: 99999999; } #blog-view-header div { @@ -208,12 +210,16 @@ code { .blog-view-container { height: 100%; position: relative; - margin: 0 auto; + padding: 0; + overflow-x: hidden; + overflow-y: auto; +} + +.blog-view-container-fix-width { max-width: 1280px; min-width: 240px; padding: 0 1rem; - overflow-x: hidden; - overflow-y: auto; + margin: 0 auto; } .blog-view-container header { @@ -236,42 +242,42 @@ code { } .blog-view-content { - font-size: 1.1rem; + font-size: 1rem; font-weight: 300; line-height: 1.6rem; margin-bottom: 3rem; } .blog-view-content blockquote { - font-size: 1.1rem; + font-size: 1rem; } .blog-view-content h1 { - font-size: 2.2rem; + font-size: 2.1rem; margin-top: 1.4rem; margin-bottom: 0.8rem; } .blog-view-content h2 { - font-size: 1.9rem; + font-size: 1.8rem; margin-top: 1.2rem; margin-bottom: 0.8rem; } .blog-view-content h3 { - font-size: 1.7rem; + font-size: 1.6rem; margin-top: 1.1rem; margin-bottom: 0.5rem; } .blog-view-content h4 { - font-size: 1.5rem; + font-size: 1.4rem; margin-top: 0.9rem; margin-bottom: 0.3rem; } .blog-view-content h6, .blog-view-content h5 { - font-size: 1.2rem; + font-size: 1.1rem; margin-top: 0.7rem; margin-bottom: 0.2rem; } diff --git a/partials/blog-view.hbs b/partials/blog-view.hbs index 1aa9995..12e2872 100644 --- a/partials/blog-view.hbs +++ b/partials/blog-view.hbs @@ -6,17 +6,19 @@
-
-
- {{title}} +
+
+
+ {{title}} +
+
+ {{date format="YYYY-MM-DD"}} +
+
+
+
+ {{content}}
-
- {{date format="YYYY-MM-DD"}} -
-
-
-
- {{content}}
From c9e69167c2c50966310f8dc5c6037389a723df32 Mon Sep 17 00:00:00 2001 From: lialun Date: Tue, 12 Sep 2017 09:02:59 +0800 Subject: [PATCH 04/12] update headroom.js to 0.9.4 --- assets/js/headroom.min.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/js/headroom.min.js b/assets/js/headroom.min.js index fcf9c18..39a74e3 100644 --- a/assets/js/headroom.min.js +++ b/assets/js/headroom.min.js @@ -1,7 +1,7 @@ /*! - * headroom.js v0.7.0 - Give your page some headroom. Hide your header until you need it - * Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/headroom.js + * headroom.js v0.9.4 - Give your page some headroom. Hide your header until you need it + * Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/headroom.js * License: MIT */ -!function(a,b){"use strict";function c(a){this.callback=a,this.ticking=!1}function d(b){return b&&"undefined"!=typeof a&&(b===a||b.nodeType)}function e(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var b,c,f=a||{};for(c=1;ca,c=a+this.getViewportHeight()>this.getScrollerHeight();return b||c},toleranceExceeded:function(a,b){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance[b]},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=athis.lastKnownScrollY?"down":"up",c=this.toleranceExceeded(a,b);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),this.shouldUnpin(a,c)?this.unpin():this.shouldPin(a,c)&&this.pin(),this.lastKnownScrollY=a)}},g.options={tolerance:{up:0,down:0},offset:0,scroller:a,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",initial:"headroom"}},g.cutsTheMustard="undefined"!=typeof h&&h.rAF&&h.bind&&h.classList,a.Headroom=g}(window,document); \ No newline at end of file +!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Headroom=b()}(this,function(){"use strict";function a(a){this.callback=a,this.ticking=!1}function b(a){return a&&"undefined"!=typeof window&&(a===window||a.nodeType)}function c(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var d,e,f=a||{};for(e=1;ethis.getScrollerHeight();return b||c},toleranceExceeded:function(a,b){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance[b]},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=athis.lastKnownScrollY?"down":"up",c=this.toleranceExceeded(a,b);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),a+this.getViewportHeight()>=this.getScrollerHeight()?this.bottom():this.notBottom(),this.shouldUnpin(a,c)?this.unpin():this.shouldPin(a,c)&&this.pin(),this.lastKnownScrollY=a)}},e.options={tolerance:{up:0,down:0},offset:0,scroller:window,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},e.cutsTheMustard="undefined"!=typeof f&&f.rAF&&f.bind&&f.classList,e}); \ No newline at end of file From 19dca5424d93092bc7f032d312e5f23722babbd8 Mon Sep 17 00:00:00 2001 From: lialun Date: Thu, 14 Sep 2017 22:37:21 +0800 Subject: [PATCH 05/12] fix animate bug with "-webkit-overflow-scrolling: touch;" --- assets/css/animate.min.css | 6 -- assets/css/default.css | 126 +++++++++++++++++++++++++++++++++++++ assets/js/default.js | 7 ++- default.hbs | 1 - 4 files changed, 130 insertions(+), 10 deletions(-) delete mode 100644 assets/css/animate.min.css diff --git a/assets/css/animate.min.css b/assets/css/animate.min.css deleted file mode 100644 index 0b6a47d..0000000 --- a/assets/css/animate.min.css +++ /dev/null @@ -1,6 +0,0 @@ -@charset "UTF-8";/*! -Animate.css - http://daneden.me/animate -Licensed under the MIT license - http://opensource.org/licenses/MIT - -Copyright (c) 2015 Daniel Eden -*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{100%,20%,53%,80%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{100%,20%,53%,80%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);animation-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{100%,50%,from{opacity:1}25%,75%{opacity:0}}@keyframes flash{100%,50%,from{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{100%,from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{100%,from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{from{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{from{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{100%,11.1%,from{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{100%,11.1%,from{-webkit-transform:none;transform:none}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(0.390625deg) skewY(0.390625deg);transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{100%,20%,40%,60%,80%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{100%,20%,40%,60%,80%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{100%,60%,75%,90%,from{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);animation-timing-function:cubic-bezier(0.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{from{opacity:0}100%{opacity:1}}@keyframes fadeIn{from{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{from{opacity:1}100%{opacity:0}}@keyframes fadeOut{from{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{from{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{from{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{from{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{from{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{from{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{from{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{from{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{from{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{from{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{from{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} \ No newline at end of file diff --git a/assets/css/default.css b/assets/css/default.css index a3e3bf8..a8c59f9 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -288,4 +288,130 @@ code { .blog-view-content pre code { font-size: 0.9rem; +} + +/*-----------------------------------------*/ +/*----------- animate.css ------------*/ +/*-----------------------------------------*/ +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +@-webkit-keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +@keyframes bounceOutUp { + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } +} + +.bounceOutUp { + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; +} + +@-webkit-keyframes bounceInDown { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + to { + -webkit-transform: none; + transform: none; + } +} + +@keyframes bounceInDown { + from, 60%, 75%, 90%, to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + + to { + -webkit-transform: none; + transform: none; + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; } \ No newline at end of file diff --git a/assets/js/default.js b/assets/js/default.js index 5035182..f6a7af4 100644 --- a/assets/js/default.js +++ b/assets/js/default.js @@ -195,11 +195,12 @@ function headroomInit() { return; } var headroom = new Headroom(myElement, { - tolerance: 5, + "offset": 100, + "tolerance": 0, "classes": { "initial": "animated", - "pinned": "flipInX", - "unpinned": "flipOutX" + "pinned": "bounceInDown", + "unpinned": "bounceOutUp" }, scroller: document.querySelector(".blog-view-container") }); diff --git a/default.hbs b/default.hbs index 947e7a8..d80aeb7 100644 --- a/default.hbs +++ b/default.hbs @@ -16,7 +16,6 @@ - {{ghost_head}} From d51001bd7b810bcfc19c614f97cd15dbfab3a5d3 Mon Sep 17 00:00:00 2001 From: lialun Date: Thu, 14 Sep 2017 22:38:36 +0800 Subject: [PATCH 06/12] update version to 0.3.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a1b9c5c..51a1579 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "everblog", "description": "A three rows layout ghost blog theme", - "version": "0.3.0", + "version": "0.3.1", "engines": { "ghost": ">=1.0.0" }, From 503a1be47d3fce6128927b255830dfeeab7bceae Mon Sep 17 00:00:00 2001 From: lialun Date: Sat, 16 Sep 2017 19:59:44 +0800 Subject: [PATCH 07/12] add post img support update version to 0.3.2 --- assets/css/default.css | 33 +++++++++++++++++++++++++++++---- package.json | 2 +- partials/blog-list.hbs | 12 +----------- partials/blog-view.hbs | 5 ++++- partials/blog_excerpt.hbs | 25 +++++++++++++++++++++++++ partials/tag-blog-list.hbs | 20 +++++--------------- 6 files changed, 65 insertions(+), 32 deletions(-) create mode 100644 partials/blog_excerpt.hbs diff --git a/assets/css/default.css b/assets/css/default.css index a8c59f9..9e5ab6a 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -133,10 +133,9 @@ code { } #blog-list .tag-stats { - height: 5.5rem; list-style-position: inside; margin: 0; - padding: 0.8rem 1rem; + padding: 1.4rem 1rem; text-align: center; } @@ -152,7 +151,20 @@ code { cursor: pointer; list-style-position: inside; margin: 0; - padding: 0.6rem 0.8rem; + padding: 0.6rem 0.6rem; +} + +.blog-excerpt-img { + margin: 0 0 0.3rem 0; +} + +.blog-excerpt-img img { + width: 100%; + max-height: 13rem; + object-fit: cover; + -webkit-border-radius: 0.3rem; + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; } .blog-excerpt-title { @@ -216,16 +228,29 @@ code { } .blog-view-container-fix-width { - max-width: 1280px; min-width: 240px; padding: 0 1rem; margin: 0 auto; } +@media (min-width: 992px) { + .blog-view-container-fix-width { + width: 70%; + } +} + .blog-view-container header { padding-top: 4rem; } +.blog-view-img { + width: 100%; + margin-bottom: 1.5rem; + -webkit-border-radius: 0.5rem; + -moz-border-radius: 0.5rem; + border-radius: 0.5rem; +} + .blog-view-title { margin-bottom: 0.8rem; text-align: center; diff --git a/package.json b/package.json index 51a1579..e7781f9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "everblog", "description": "A three rows layout ghost blog theme", - "version": "0.3.1", + "version": "0.3.2", "engines": { "ghost": ">=1.0.0" }, diff --git a/partials/blog-list.hbs b/partials/blog-list.hbs index e825d96..6d0c878 100644 --- a/partials/blog-list.hbs +++ b/partials/blog-list.hbs @@ -2,17 +2,7 @@
{{#foreach posts}} -
-
- {{{title}}} -
-
- {{date format="YYYY-MM-DD"}} -
-
- {{excerpt characters="120"}} -
-
+ {{> blog_excerpt}} {{/foreach}}
{{pagination}} diff --git a/partials/blog-view.hbs b/partials/blog-view.hbs index 12e2872..b2b4f4e 100644 --- a/partials/blog-view.hbs +++ b/partials/blog-view.hbs @@ -2,12 +2,15 @@
- +
+ {{#if feature_image}} + + {{/if}}
{{title}}
diff --git a/partials/blog_excerpt.hbs b/partials/blog_excerpt.hbs new file mode 100644 index 0000000..7e08c74 --- /dev/null +++ b/partials/blog_excerpt.hbs @@ -0,0 +1,25 @@ +{{#if feature_image}} +
+
+ +
+
+ {{{title}}} +
+
+ {{date format="YYYY-MM-DD"}} +
+
+{{else}} +
+
+ {{{title}}} +
+
+ {{date format="YYYY-MM-DD"}} +
+
+ {{excerpt characters="180"}} +
+
+{{/if}} diff --git a/partials/tag-blog-list.hbs b/partials/tag-blog-list.hbs index d8e0ed7..5979dc7 100644 --- a/partials/tag-blog-list.hbs +++ b/partials/tag-blog-list.hbs @@ -2,25 +2,15 @@
- {{tag.name}} + {{tag.name}}
{{pagination.total}} articles
- {{#foreach posts}} -
-
- {{{title}}} -
-
- {{date format="YYYY-MM-DD"}} -
-
- {{excerpt characters="180"}} -
-
- {{/foreach}} + {{#foreach posts}} + {{> blog_excerpt}} + {{/foreach}}
- {{pagination}} + {{pagination}}
\ No newline at end of file From 593d56bcad57c327d2f987e4899cee4a834363e4 Mon Sep 17 00:00:00 2001 From: lialun Date: Sun, 24 Sep 2017 23:20:23 +0800 Subject: [PATCH 08/12] add search update version to 0.4.0 --- assets/css/default.css | 129 ++++++++++++++++++++++++++- assets/css/grey.css | 38 +++++--- assets/css/white.css | 16 ++++ assets/image/search.svg | 5 ++ assets/js/default.js | 182 ++++++++++++++++++++++++++++++++++----- assets/js/ghostsearch.js | 126 +++++++++++++++++++++++++++ default.hbs | 5 +- package.json | 2 +- partials/blog-list.hbs | 17 +++- 9 files changed, 482 insertions(+), 38 deletions(-) create mode 100644 assets/image/search.svg create mode 100644 assets/js/ghostsearch.js diff --git a/assets/css/default.css b/assets/css/default.css index 9e5ab6a..e9d2809 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -128,7 +128,7 @@ code { } #blog-list .list-group { - height: 100%; + height: calc(100% - 3.7rem); margin-bottom: 0; } @@ -154,6 +154,23 @@ code { padding: 0.6rem 0.6rem; } +#search-input { + text-align: center; + width: 100%; + height: 3.7rem; +} + +.search-form-input { + width: 80%; + vertical-align: middle; +} + +.search-info { + text-align: center; + font-size: 1.2rem; + margin: 0.7rem; +} + .blog-excerpt-img { margin: 0 0 0.3rem 0; } @@ -316,7 +333,7 @@ code { } /*-----------------------------------------*/ -/*----------- animate.css ------------*/ +/*------------- animate.css -------------*/ /*-----------------------------------------*/ .animated { -webkit-animation-duration: 1s; @@ -439,4 +456,112 @@ code { .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; +} + +/*-----------------------------------------*/ +/*--------------- makiko ----------------*/ +/*-----------------------------------------*/ +.container { + margin: 0 auto; + text-align: center; + /* overflow: hidden; */ +} + +*, *:after, *:before { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.input { + position: relative; + display: inline-block; + width: 100%; + vertical-align: top; +} + +.input__field { + position: relative; + display: block; + float: right; + padding: 1rem 1.5rem; + width: 60%; + border: none; + border-radius: 0; + font-weight: bold; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + -webkit-appearance: none; /* for box shadows to show on iOS */ +} + +.input__field:focus { + outline: none; +} + +.input__label { + display: inline-block; + float: right; + padding: 0 1em; + width: 40%; + font-weight: bold; + font-size: 1.2rem; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.input__label-content { + position: relative; + display: block; + padding: 1.1rem 1.5rem; + width: 100%; +} + +/* Makiko */ +.input--makiko { + overflow: hidden; +} + +.input__field--makiko { + width: 100%; + font-size: 1.2rem; + background: transparent; + z-index: 10; + font-weight: 500; +} + +.input__label--makiko { + position: absolute; + width: 100%; + text-align: left; + pointer-events: none; +} + +#search-img { + content: ''; + position: absolute; + width: 1.6rem; + height: 1.6rem; + top: 37%; + left: 1.3rem; + background: url(../image/search.svg) no-repeat center center; + background-size: 100%; + -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); + transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); +} + +.input__label-content--makiko { + display: block; + padding: 1.2rem 0 0 2.3rem; + -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); + transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1); +} + +.input__field--makiko:focus + #search-img, +.input--filled #search-img { + -webkit-transform: scale3d(38, 38, 1); + transform: scale3d(38, 38, 1); } \ No newline at end of file diff --git a/assets/css/grey.css b/assets/css/grey.css index 7d88542..0af7e16 100644 --- a/assets/css/grey.css +++ b/assets/css/grey.css @@ -1,9 +1,9 @@ /*Use Prism to highlight code*/ @import url("/assets/css/prism/prism-okaidia.css"); -/*--------------------------------------*/ -/*-------------导航栏（左列）--------------*/ -/*--------------------------------------*/ +/*---------------------------------------------*/ +/*------------- navigation(left) --------------*/ +/*---------------------------------------------*/ /*主体*/ #navigation { background-color: #222222; @@ -32,9 +32,9 @@ box-shadow: inset -15px 0 15px -15px #040404; } -/*----------------------------------------*/ -/*-------------文章列表（中列）--------------*/ -/*----------------------------------------*/ +/*--------------------------------------------*/ +/*---------- article list(middle) ----------*/ +/*--------------------------------------------*/ /*主体*/ #blog-list { box-shadow: inset -15px 0 15px -15px #090909; @@ -109,9 +109,27 @@ #next-page { color: #FFCC00; } -/*----------------------------------------*/ -/*-------------文章内容（右列）--------------*/ -/*----------------------------------------*/ + +/*makiko*/ +.input--makiko { + background: #282828; +} + +.search-info { + color: #FFCC00; +} + +#search-img path { + fill: #FFCC00 !important; +} + +.input__label-content--makiko { + color: #FFCC00; +} + +/*-----------------------------------------*/ +/*----------- content(right) ------------*/ +/*-----------------------------------------*/ #blog-view { background-color: #333333; } @@ -163,7 +181,7 @@ } .blog-view-content pre code { - box-shadow: none!important; + box-shadow: none !important; } .blog-view-content blockquote { diff --git a/assets/css/white.css b/assets/css/white.css index 4dd6ed6..13cd15e 100644 --- a/assets/css/white.css +++ b/assets/css/white.css @@ -101,6 +101,22 @@ pre[class*="language-"] { #next-page { color: #F9F9F9; } +/*makiko*/ +.input--makiko { + background: #2A2C38; +} + +.search-info { + color: #F9F9F9; +} + +#search-img path { + fill: #F9F9F9 !important; +} + +.input__label-content--makiko { + color: #F9F9F9; +} /*----------------------------------------*/ /*-------------文章内容（右列）--------------*/ /*----------------------------------------*/ diff --git a/assets/image/search.svg b/assets/image/search.svg new file mode 100644 index 0000000..d1dc302 --- /dev/null +++ b/assets/image/search.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/js/default.js b/assets/js/default.js index f6a7af4..2900a7f 100644 --- a/assets/js/default.js +++ b/assets/js/default.js @@ -1,20 +1,20 @@ +var needInitSearchListener = true; +(function ($) { //load theme - if (getCookie("themeStyle") == "") { - if (default_theme == "default") { + if (getCookie("themeStyle") === "") { + if (default_theme === "default") { var h = new Date().getHours(); if (h >= 7 && h <= 20) { setCookie("themeStyle", "light"); } else { setCookie("themeStyle", "dark"); } - } else if (default_theme == "dark") { + } else if (default_theme === "dark") { setCookie("themeStyle", "dark"); } else { setCookie("themeStyle", "light"); } } - ; changeTheme(getCookie("themeStyle")); //navigation active var url = window.location.href; @@ -46,9 +46,79 @@ bindScroll4Ever(); //loading bar headroomInit(); -}) -(jQuery); + //search + var ghost = new GhostSearch({ + inputId: ".search-form-input", + targetId: ".search-result-container", + info_template: "
{{amount}} articles
", + result_template: "
" + + "
" + + "{{title}}" + + "
" + + "
" + + "{{pubDate}}" + + "
" + + "
" + + "{{excerpt_or_content}}" + + "
\n" + + "
", + status_change_callback: searchStatusChange + }); + $(document).ajaxComplete(function () { + if (needInitSearchListener) { + ghost.listen(); + needInitSearchListener = false; + } + svgImage(); + }); + //search style + SearchStyleInit(); + + + jQuery('img.svg').each(function () { + var $img = jQuery(this); + var imgID = $img.attr('id'); + var imgClass = $img.attr('class'); + var imgURL = $img.attr('src'); + + jQuery.get(imgURL, function (data) { + // Get the SVG tag, ignore the rest + var $svg = jQuery(data).find('svg'); + + // Add replaced image's ID to the new SVG + if (typeof imgID !== 'undefined') { + $svg = $svg.attr('id', imgID); + } + // Add replaced image's classes to the new SVG + if (typeof imgClass !== 'undefined') { + $svg = $svg.attr('class', imgClass + ' replaced-svg'); + } + + // Remove any invalid XML tags as per http://validator.w3.org + $svg = $svg.removeAttr('xmlns:a'); + + // Check if the viewport is set, else we gonna set it if we can. + if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { + $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) + } + + // Replace image with new SVG + $img.replaceWith($svg); + + }, 'xml'); + }); +})(jQuery); + +function searchStatusChange(isHaveSearch) { + if (isHaveSearch) { + $(".search-result-list").show(); + $(".blog-except-list").hide(); + } else { + $(".search-result-list").hide(); + $(".blog-except-list").show(); + } +} function navigationFunction(obj) { // @@ -93,6 +163,9 @@ function loadBlogListByURL(url, isSetReplaceState) { } $("#blog-list").html($("#blog-list", $.parseHTML(dates)).html()); bindScroll4Ever(); + headroomInit(); + SearchStyleInit(); + needInitSearchListener = true; }, complete: function () { NProgress.done(); @@ -156,6 +229,7 @@ function smallScreenPageChange(page) { } var loading = false; + function loadBlogListNextPage() { var scope = $("#pagination #next-page"); scope.html('Loading next...'); @@ -174,10 +248,10 @@ function loadBlogListNextPage() { function bindScroll4Ever() { $("#blog-list .scroll").scroll(function () { - var scrollTop = $("#blog-list .list-group").scrollTop();//scroll distance - var listGroupScreenHeight = $("#blog-list .list-group").height();//scroll height + var scrollTop = $("#blog-list .blog-except-list").scrollTop();//scroll distance + var listGroupScreenHeight = $("#blog-list .blog-except-list").height();//scroll height var listGroupRealHeight = 0; - $("#blog-list .list-container").children().each(function () { + $("#blog-list .blog-except-list .list-container").children().each(function () { listGroupRealHeight += $(this).height(); }); //scroll height + scroll distance + 100>element real height @@ -190,21 +264,50 @@ function bindScroll4Ever() { } function headroomInit() { - var myElement = document.querySelector("#blog-view-header"); - if (myElement == null) { - return; + const blog_view_header_ele = document.querySelector("#blog-view-header"); + if (blog_view_header_ele !== null) { + new Headroom(blog_view_header_ele, { + "offset": 100, + "tolerance": 0, + "classes": { + "initial": "animated", + "pinned": "bounceInDown", + "unpinned": "bounceOutUp" + }, + scroller: document.querySelector(".blog-view-container") + }).init() } - var headroom = new Headroom(myElement, { - "offset": 100, - "tolerance": 0, - "classes": { - "initial": "animated", - "pinned": "bounceInDown", - "unpinned": "bounceOutUp" - }, - scroller: document.querySelector(".blog-view-container") +} + +function SearchStyleInit() { + if (!String.prototype.trim) { + (function () { + // Make sure we trim BOM and NBSP + var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; + String.prototype.trim = function () { + return this.replace(rtrim, ''); + }; + })(); + } + [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) { + // in case the input is already filled.. + if (inputEl.value.trim() !== '') { + inputEl.parentNode.classList.add('input--filled') + } + // events: + inputEl.addEventListener('focus', onInputFocus); + inputEl.addEventListener('blur', onInputBlur); }); - headroom.init(); + + function onInputFocus(ev) { + ev.target.parentNode.classList.add('input--filled') + } + + function onInputBlur(ev) { + if (ev.target.value.trim() === '') { + ev.target.parentNode.classList.remove('input--filled') + } + } } function setCookie(c_name, value, expiredays) { @@ -253,3 +356,38 @@ function changeTheme(theme) { setCookie("themeStyle", "dark"); } } + +function svgImage() { + jQuery('img.svg').each(function () { + var $img = jQuery(this); + var imgID = $img.attr('id'); + var imgClass = $img.attr('class'); + var imgURL = $img.attr('src'); + + jQuery.get(imgURL, function (data) { + // Get the SVG tag, ignore the rest + var $svg = jQuery(data).find('svg'); + + // Add replaced image's ID to the new SVG + if (typeof imgID !== 'undefined') { + $svg = $svg.attr('id', imgID); + } + // Add replaced image's classes to the new SVG + if (typeof imgClass !== 'undefined') { + $svg = $svg.attr('class', imgClass + ' replaced-svg'); + } + + // Remove any invalid XML tags as per http://validator.w3.org + $svg = $svg.removeAttr('xmlns:a'); + + // Check if the viewport is set, else we gonna set it if we can. + if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { + $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) + } + + // Replace image with new SVG + $img.replaceWith($svg); + + }, 'xml'); + }); +} diff --git a/assets/js/ghostsearch.js b/assets/js/ghostsearch.js new file mode 100644 index 0000000..164faa4 --- /dev/null +++ b/assets/js/ghostsearch.js @@ -0,0 +1,126 @@ +function Ajax() { + "use strict"; + var aja = {}; + aja.tarUrl = ''; + aja.postString = ''; + aja.xhr = new XMLHttpRequest(); + aja.processHandler = function () { + if (aja.xhr.readyState === 4 && aja.xhr.status === 200) + aja.resultHandler(aja.xhr.responseText); + }; + aja.get = function (tarUrl, callbackHandler) { + aja.tarUrl = tarUrl; + aja.resultHandler = callbackHandler; + aja.xhr.onreadystatechange = aja.processHandler; + aja.xhr.open('get', aja.tarUrl, true); + aja.xhr.send(); + }; + return aja; +} + +GhostSearch = function (config) { + this.init(config); +}; + +GhostSearch.prototype.init = function (config) { + this.result_template = config.result_template; + this.info_template = config.info_template; + this.targetId = config.targetId; + this.inputId = config.inputId; + this.status_change_callback = config.status_change_callback; + this.blogData = []; + this.ajax = new Ajax(); + this.loadAPI(); + this.listen(); +}; + +GhostSearch.prototype.loadAPI = function () { + if (this.inited) return false; + var that = this; + var obj = {limit: "all", include: "tags", formats: "plaintext"}; + var blogData = []; + this.ajax.get(ghost.url.api('posts', obj), function (data) { + var searchData = JSON.parse(data).posts; + searchData.forEach(function (arrayItem) { + var tag_arr = arrayItem.tags.map(function (v) { + return v.name; + }); + if (arrayItem.meta_description === null) { + arrayItem.meta_description = '' + } + if (arrayItem.custom_excerpt === null) { + arrayItem.custom_excerpt = '' + } + var tag = tag_arr.join(", "); + if (tag.length < 1) { + tag = "undefined"; + } + var parsedData = { + id: String(arrayItem.id), + title: String(arrayItem.title), + description: String(arrayItem.meta_description), + plaintext: String(arrayItem.plaintext), + pubDate: String(arrayItem.created_at.split('T')[0]), + tag: tag, + url: String(arrayItem.url), + custom_excerpt: String(arrayItem.custom_excerpt), + excerpt_or_content: arrayItem.custom_excerpt.length > 1 ? arrayItem.custom_excerpt : arrayItem.plaintext + }; + blogData.push(parsedData); + }); + that.blogData = blogData; + that.inited = true; + }) +}; + +GhostSearch.prototype.listen = function () { + var that = this; + var inputEle = document.querySelector(that.inputId); + if (inputEle === null) { + return + } + ['input', 'propertychange'].forEach(event => { + inputEle.removeEventListener(event, search, false); + inputEle.addEventListener(event, search, false) + } + ); + + function search(inputEle) { + var ele = inputEle.target; + var targetEle = document.querySelector(that.targetId); + if (!ele.value) { + targetEle.innerHTML = ''; + that.status_change_callback(false); + } else { + var _r = that.search(ele.value); //[{}, {}] + var _HTML = that.format(that.info_template, { + amount: _r.length + }); + for (i in _r) _HTML += that.format(that.result_template, _r[i]); + targetEle.innerHTML = _HTML; + that.status_change_callback(true); + } + } +}; + +GhostSearch.prototype.format = function (text, obj) { + return text.replace(/{{([^{}]*)}}/g, function (a, b) { + var r = obj[b]; + return typeof r === "string" || typeof r === "number" ? r : a + }) +}; + +GhostSearch.prototype.search = function (searchKeyword) { + var _result = []; + var searchKeywords = searchKeyword.toLowerCase().replace(/(^\s+)|(\s+$)/g, "").split(" "); + var regexWord = "^"; + searchKeywords.forEach(kw => regexWord = regexWord + "(?=.*" + kw + ")"); + regexWord = regexWord + ".*$"; + var regex = new RegExp(regexWord); + this.blogData.forEach(function (i) { + if (regex.test((i.title.toLowerCase() + i.custom_excerpt.toLowerCase() + i.plaintext.toLowerCase() + i.pubDate.toLowerCase() + i.url.toLowerCase()).replace(/[\n\r]/g, ""))) { + _result.push(i) + } + }); + return _result; +}; \ No newline at end of file diff --git a/default.hbs b/default.hbs index d80aeb7..27b8b3b 100644 --- a/default.hbs +++ b/default.hbs @@ -8,9 +8,9 @@ - + - + {{> config}} @@ -26,6 +26,7 @@ + diff --git a/package.json b/package.json index e7781f9..f7fb2f6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "everblog", "description": "A three rows layout ghost blog theme", - "version": "0.3.2", + "version": "0.4.0", "engines": { "ghost": ">=1.0.0" }, diff --git a/partials/blog-list.hbs b/partials/blog-list.hbs index 6d0c878..d4e7a91 100644 --- a/partials/blog-list.hbs +++ b/partials/blog-list.hbs @@ -1,5 +1,20 @@
-
+
+ + + + +
+ + + +
{{#foreach posts}} {{> blog_excerpt}} From 1883ff02cd70cd17b54a7e9cc888de6a623bac20 Mon Sep 17 00:00:00 2001 From: lialun Date: Sat, 28 Oct 2017 11:23:47 +0800 Subject: [PATCH 09/12] fix blog list height bug update version to 0.4.1 --- assets/css/default.css | 5 +++++ package.json | 2 +- partials/tag-blog-list.hbs | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index e9d2809..bf9dbf0 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -132,6 +132,11 @@ code { margin-bottom: 0; } +#blog-list .tag-list-group { + height: 100%; + margin-bottom: 0; +} + #blog-list .tag-stats { list-style-position: inside; margin: 0; diff --git a/package.json b/package.json index f7fb2f6..1bf1477 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "everblog", "description": "A three rows layout ghost blog theme", - "version": "0.4.0", + "version": "0.4.1", "engines": { "ghost": ">=1.0.0" }, diff --git a/partials/tag-blog-list.hbs b/partials/tag-blog-list.hbs index 5979dc7..3abcdd5 100644 --- a/partials/tag-blog-list.hbs +++ b/partials/tag-blog-list.hbs @@ -1,5 +1,5 @@
-
+
{{tag.name}} From 6059c40e93aac0b04f0987dcc3de8fda6c200724 Mon Sep 17 00:00:00 2001 From: Sean 'Doc' Rinehart Date: Sun, 8 Jan 2017 15:51:46 -0600 Subject: [PATCH 10/12] Touch up forked readme file --- README.md | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3875f70..19733db 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# EverBlog +# ORIGNAL README A three-row Ghost blog theme, inspired from Evernote. ## Demo: @@ -24,4 +24,30 @@ https://github.com/lialun/EverBlog You can add Blog URL, like "http://allan.li/sql-common-resources/". You can also add external URL, like "http://google.com/", it will open in new tab. 3. Open mainpage will auto load "/welcome/" blog, if don't have that blog right area will leave blank.You can change the default open blog URL in /partials/config.hbs. -4. Code highlighting plugin is Prism, support supports: css, js, bash, c, c++, c#, go, php, python, sql, groovy, http. To highlight, use markdown code-block (three ticks) and the language name: (```javascript) \ No newline at end of file +4. Code highlighting plugin is Prism, support supports: css, js, bash, c, c++, c#, go, php, python, sql, groovy, http. To highlight, use markdown code-block (three ticks) and the language name: (```javascript) + +# MY README +A three-row Ghost blog theme, with evernote inspired navigation + +> Forked from the original [EverBlog by lialun](https://github.com/lialun/EverBlog) + +##Demos: +- [Original - Chinese - allan.li](http://allan.li) +- [Forked - English - codecaptive.com](http://codecaptive.com) + +##Advantages +- Three row layout, making information classification clear and accurate +- Small theme + Global AJAX request == Fast load and response times +- End-Users can toggle between dark or light theme +- Responsive / Mobile-Friendly + +##Usage: +1. The pic in the top left corner is the Blog Logo, upload in the Admin System-General, default size 70*70px +2. Navigation list added in the Admin system-Navigation + - Tag URLs, such as "http://codecaptive.com/tag/java/" + - Blog URLs, such as "http://allan.li/sql-common-resources/" + - External URLs, such as "http://google.com/" (which open in a new tab) +3. Change your post per page count much higher (15+), or auto load next page fails. +4. The blog which will auto load in the index page, is set in /partials/config.hbs, the default_post param, or leave blank will not auto load blog. +5. Code highlighting plugin is Prism - supports: css, js, bash, c, c++, c#, go, php, python, sql, groovy, http. To highlight, use markdown code-block (three ticks) and the language name: (\`\`\`javascript) +>>>>>>> Touch up forked readme file From 62585a0c2956312d5382a826a03c580ccd5e8ab4 Mon Sep 17 00:00:00 2001 From: Sean 'Doc' Rinehart Date: Sun, 8 Jan 2017 15:57:18 -0600 Subject: [PATCH 11/12] Add blog description to template --- assets/css/default.css | 4 ++++ partials/navigation.hbs | 9 +++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index bf9dbf0..b65156d 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -95,6 +95,10 @@ code { height: 70px; } +#description { + color: #DDDDDD; +} + #category-list { padding-bottom: 100px; } diff --git a/partials/navigation.hbs b/partials/navigation.hbs index 15e0002..2986e83 100644 --- a/partials/navigation.hbs +++ b/partials/navigation.hbs @@ -4,7 +4,12 @@ -
+
+ +
+

{{@blog.description}}

+
+
@@ -28,4 +33,4 @@
-
\ No newline at end of file +
From 3ebbb1160160618c57471bf6e3ed99aaddda3eb7 Mon Sep 17 00:00:00 2001 From: Sean 'Doc' Rinehart Date: Mon, 18 Sep 2017 17:57:50 -0500 Subject: [PATCH 12/12] Alter package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 1bf1477..cc09fca 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ }, "license": "GPL", "author": { - "email": "account@lialun.io" + "name": "Doc Rinehart", + "email": "test@test.test" }, "config": { "posts_per_page": 12