├── package.json ├── assets ├── images │ ├── bg-desktop.jpg │ ├── bg-mobile.jpg │ └── bg-tablet.jpg ├── fonts │ └── perfetta-pixellove │ │ ├── ghost-perfetta.eot │ │ ├── ghost-perfetta.ttf │ │ ├── ghost-perfetta.woff │ │ ├── license.txt │ │ └── ghost-perfetta.svg ├── js │ ├── jquery.fitvids.js │ └── index.js └── css │ ├── normalize.css │ └── main.css ├── partials ├── config.hbs ├── navigation.hbs ├── pagination.hbs ├── logo.hbs └── footer.hbs ├── LICENSE ├── index.hbs ├── page-full-width.hbs ├── tag.hbs ├── author.hbs ├── default.hbs ├── page.hbs ├── post.hbs └── README.md /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Perfetta", 3 | "version": "1.5.1" 4 | } -------------------------------------------------------------------------------- /assets/images/bg-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GavickPro/Perfetta-Free-Ghost-Theme/HEAD/assets/images/bg-desktop.jpg -------------------------------------------------------------------------------- /assets/images/bg-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GavickPro/Perfetta-Free-Ghost-Theme/HEAD/assets/images/bg-mobile.jpg -------------------------------------------------------------------------------- /assets/images/bg-tablet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GavickPro/Perfetta-Free-Ghost-Theme/HEAD/assets/images/bg-tablet.jpg -------------------------------------------------------------------------------- /partials/config.hbs: -------------------------------------------------------------------------------- 1 | {{! Your Google Analitycs ID }} 2 | var ga_ua = 'UA-XXXXX-X'; 3 | 4 | {{! Your Disqus shortname }} 5 | var disqus_shortname = 'example'; -------------------------------------------------------------------------------- /assets/fonts/perfetta-pixellove/ghost-perfetta.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GavickPro/Perfetta-Free-Ghost-Theme/HEAD/assets/fonts/perfetta-pixellove/ghost-perfetta.eot -------------------------------------------------------------------------------- /assets/fonts/perfetta-pixellove/ghost-perfetta.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GavickPro/Perfetta-Free-Ghost-Theme/HEAD/assets/fonts/perfetta-pixellove/ghost-perfetta.ttf -------------------------------------------------------------------------------- /assets/fonts/perfetta-pixellove/ghost-perfetta.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GavickPro/Perfetta-Free-Ghost-Theme/HEAD/assets/fonts/perfetta-pixellove/ghost-perfetta.woff -------------------------------------------------------------------------------- /partials/navigation.hbs: -------------------------------------------------------------------------------- 1 | {{! Put your menu content here or make this file empty in order to remove the menu }} 2 | -------------------------------------------------------------------------------- /partials/pagination.hbs: -------------------------------------------------------------------------------- 1 | {{!-- In this file you can override your pagination --}} 2 | -------------------------------------------------------------------------------- /partials/logo.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 GavickPro - Released under The MIT License. 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /partials/footer.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/fonts/perfetta-pixellove/license.txt: -------------------------------------------------------------------------------- 1 | PIXELLOVE PRO - LICENSE 2 | 3 | 'PixelLove Pro' icons are provided under the following agreement: 4 | 5 | 6 | THE PURCHASER OF PIXELLOVE PRO IS PERMITTED TO: 7 | 8 | A perpetual, non-exclusive, non-transferable use of the icons for the permitted uses. All other rights, including, without limitation, all copyright and other intellectual property rights relating to the icons, are retained by Pixel Love Ltd; 9 | 10 | Use the icons for both personal and commercial projects; 11 | 12 | Include up to 100 icons in an HTML theme (as long as this license is included with the theme) 13 | 14 | Edit the icons, however all copyright and other intellectual property rights relating to the icons whether edited or not remain the property of Pixel Love Ltd. 15 | 16 | 17 | YOU ARE NOT PERMITTED TO: 18 | 19 | Sub-license, re-sell, rent, lend, assign, gift or otherwise transfer or distribute the icons or the rights granted under this license (in summary, you may use the icons as part of personal/commercial projects only if they do not form the core of that project, for example as an icon pack); 20 | 21 | Include icons in your HTML theme without including this license. 22 | 23 | 24 | MORE INFORMATION 25 | 26 | If you are unsure about usage or the terms of the license then email hello@pixellove.com or tweet @pixelloveicons for clarification. All logos and trademarks for Social Network icons remain the property of their respective owners. 27 | 28 | Like the icons? Please, please, please tweet, blog, recommend and generally share the PixelLove! 29 | 30 | Email: hello@pixellove.com 31 | Twitter: http://twitter.com/pixelloveicons 32 | Web: http://www.pixellove.com 33 | 34 | © All Rights Reserved, Pixel Love Ltd -------------------------------------------------------------------------------- /index.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{! The main content area on the homepage }} 4 |
5 | 6 | {{! Each post will be output using this markup }} 7 | {{#foreach posts}} 8 | 9 |
10 |
11 |
12 | {{#if image}} 13 | 14 | {{{title}}} 15 | 16 | {{/if}} 17 | 18 |

19 | {{{title}}} 20 |

21 |
22 |
23 |

{{excerpt}}…

24 | 25 | Read more 26 |
27 |
28 | 29 | 51 |
52 | 53 | {{/foreach}} 54 | 55 | {{!! After all the posts, we have the previous/next pagination links }} 56 | {{pagination}} 57 |
-------------------------------------------------------------------------------- /page-full-width.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 |
4 | {{! Everything inside the #post tags pulls data from the post }} 5 |
6 | {{#post}} 7 | {{#contentFor "metaTags"}} 8 | 9 | {{/contentFor}} 10 | 11 |
12 |
13 | {{#if image}} 14 | {{{title}}} 15 | {{/if}} 16 | 17 |

18 | {{{title}}} 19 |

20 |
21 | 22 |
23 | {{content}} 24 |
25 | 26 | 43 |
44 | {{/post}} 45 |
46 |
-------------------------------------------------------------------------------- /tag.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{! The main content area on the homepage }} 4 |
5 |

6 | {{tag.name}} 7 | A {{pagination.total}}-post collection 8 |

9 | 10 | {{! Each post will be output using this markup }} 11 | {{#foreach posts}} 12 | 13 |
14 |
15 |
16 | {{#if image}} 17 | {{{title}}} 18 | {{/if}} 19 | 20 |

21 | {{{title}}} 22 |

23 |
24 |
25 |

{{excerpt}}…

26 | 27 | Read more 28 |
29 |
30 | 31 | 53 |
54 | 55 | {{/foreach}} 56 | 57 | {{!! After all the posts, we have the previous/next pagination links }} 58 | {{pagination}} 59 |
-------------------------------------------------------------------------------- /author.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{! The main content area on the homepage }} 4 |
5 | {{! Everything inside the #author tags pulls data from the author }} 6 | {{#author}} 7 |
8 | {{#if image}} 9 | {{name}}'s Picture 10 | {{/if}} 11 |

Posts by {{name}} ({{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}})

12 |

{{bio}}

13 |
14 | {{#if location}}
Location:
{{location}}
{{/if}} 15 | {{#if website}}
Website:
{{website}}
{{/if}} 16 |
17 | 18 |
19 | {{/author}} 20 | 21 | {{! Each post will be output using this markup }} 22 | {{#foreach posts}} 23 | 24 |
25 |
26 |
27 | {{#if image}} 28 | {{{title}}} 29 | {{/if}} 30 | 31 |

32 | {{{title}}} 33 |

34 |
35 |
36 |

{{excerpt}}…

37 | 38 | Read more 39 |
40 |
41 | 42 | 64 |
65 | 66 | {{/foreach}} 67 | 68 | {{!! After all the posts, we have the previous/next pagination links }} 69 | {{pagination}} 70 |
-------------------------------------------------------------------------------- /assets/js/jquery.fitvids.js: -------------------------------------------------------------------------------- 1 | /*global jQuery */ 2 | /*jshint multistr:true browser:true */ 3 | /*! 4 | * FitVids 1.0.3 5 | * 6 | * Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com 7 | * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ 8 | * Released under the WTFPL license - http://sam.zoy.org/wtfpl/ 9 | * 10 | * Date: Thu Sept 01 18:00:00 2011 -0500 11 | */ 12 | 13 | (function( $ ){ 14 | 15 | "use strict"; 16 | 17 | $.fn.fitVids = function( options ) { 18 | var settings = { 19 | customSelector: null 20 | }; 21 | 22 | if(!document.getElementById('fit-vids-style')) { 23 | 24 | var div = document.createElement('div'), 25 | ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0], 26 | cssStyles = '­'; 27 | 28 | div.className = 'fit-vids-style'; 29 | div.id = 'fit-vids-style'; 30 | div.style.display = 'none'; 31 | div.innerHTML = cssStyles; 32 | 33 | ref.parentNode.insertBefore(div,ref); 34 | 35 | } 36 | 37 | if ( options ) { 38 | $.extend( settings, options ); 39 | } 40 | 41 | return this.each(function(){ 42 | var selectors = [ 43 | "iframe[src*='player.vimeo.com']", 44 | "iframe[src*='youtube.com']", 45 | "iframe[src*='youtube-nocookie.com']", 46 | "iframe[src*='kickstarter.com'][src*='video.html']", 47 | "object", 48 | "embed" 49 | ]; 50 | 51 | if (settings.customSelector) { 52 | selectors.push(settings.customSelector); 53 | } 54 | 55 | var $allVideos = $(this).find(selectors.join(',')); 56 | $allVideos = $allVideos.not("object object"); // SwfObj conflict patch 57 | 58 | $allVideos.each(function(){ 59 | var $this = $(this); 60 | if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } 61 | var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), 62 | width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), 63 | aspectRatio = height / width; 64 | if(!$this.attr('id')){ 65 | var videoID = 'fitvid' + Math.floor(Math.random()*999999); 66 | $this.attr('id', videoID); 67 | } 68 | $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); 69 | $this.removeAttr('height').removeAttr('width'); 70 | }); 71 | }); 72 | }; 73 | // Works with either jQuery or Zepto 74 | })( window.jQuery || window.Zepto ); 75 | -------------------------------------------------------------------------------- /default.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{! Document Settings }} 5 | 6 | 7 | 8 | {{! Page Meta }} 9 | {{meta_title}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | {{! Loading additional OpenGraph metatags}} 22 | {{{block "metaTags"}}} 23 | 24 | 25 | 26 | {{! Styles'n'Scripts }} 27 | 28 | 29 | 30 | 31 | 34 | 35 | {{! Ghost outputs important style and meta data with this tag }} 36 | {{ghost_head}} 37 | 38 | 39 | {{> logo}} 40 | 41 | {{#if @blog.navigation}} 42 | {{navigation}} 43 | {{/if}} 44 | 45 | {{{body}}} 46 | 47 | {{> footer}} 48 | 49 | {{! Ghost outputs important scripts and data with this tag }} 50 | {{ghost_foot}} 51 | 52 | 57 | 58 | 59 | 60 | 61 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /page.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 |
4 | {{! Everything inside the #post tags pulls data from the post }} 5 |
6 | {{#post}} 7 | {{#contentFor "metaTags"}} 8 | 9 | {{/contentFor}} 10 | 11 |
12 |
13 | {{#if image}} 14 | {{{title}}} 15 | {{/if}} 16 | 17 |

18 | {{{title}}} 19 |

20 |
21 | 22 |
23 | {{content}} 24 |
25 | 26 | 54 |
55 | 56 | 78 | {{/post}} 79 |
80 |
-------------------------------------------------------------------------------- /post.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 |
4 | {{! Everything inside the #post tags pulls data from the post }} 5 |
6 | {{#post}} 7 | {{#contentFor "metaTags"}} 8 | 9 | {{/contentFor}} 10 | 11 |
12 |
13 | {{#if image}} 14 | {{{title}}} 15 | {{/if}} 16 | 17 |

18 | {{{title}}} 19 |

20 |
21 | 22 |
23 | {{content}} 24 |
25 | 26 | 57 | 58 |
59 |
60 |
61 |
62 | 63 | 85 | 86 | 97 | {{/post}} 98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /assets/fonts/perfetta-pixellove/ghost-perfetta.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by Fontastic.me 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Perfetta 2 | 3 | Free theme for [Ghost](http://github.com/tryghost/ghost/) prepared by [GavickPro](http://www.gavick.com/). 4 | 5 | [-> DEMO <-](http://perfetta.ghost.io) 6 | 7 | **Important** The v.1.3.0 adds a built-in support for the post cover images - if you are using older version of the theme, you will have to set cover images for all your older posts. 8 | 9 | ## Download 10 | 11 | **Important** All below packages contain the "perfetta" directory with the theme which should be moved to the content/themes directory. 12 | 13 | [Download v.1.5.1 for Ghost 0.6.*](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v.1.5.1) 14 | 15 | [Download v.1.5.0 for Ghost 0.6.0](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v.1.5.0) 16 | 17 | [Download v.1.4.0 for Ghost 0.5.9](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v.1.4.0) 18 | 19 | [Download v.1.3.0 for Ghost 0.5.2](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v.1.3.0) 20 | 21 | [Download v.1.2.0 for Ghost 0.5.0](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v1.2.0) 22 | 23 | [Download v.1.1.2 for Ghost 0.4.2](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v1.1.2) 24 | 25 | [Download v.1.1.1 for Ghost 0.4.2](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v1.1.1) 26 | 27 | [Download v.1.1.0 for Ghost 0.4.2](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v1.1.0) 28 | 29 | [Download v.1.0.0 for Ghost 0.4.1](https://github.com/GavickPro/Perfetta-Free-Ghost-Theme/releases/tag/v1.0.0) 30 | 31 | ![Screenshot](https://www.gavick.com/res/free-restaurant-coffe-ghost-theme-gavickpro.jpg) 32 | 33 | ## Important information 34 | 35 | This theme contains a few features which may require some additional knowledge or settings. 36 | 37 | ### Featured images/videos 38 | 39 | The image or video placed at the beginning of the post will be used as a featured image/video on the post list. Additionally if you want to display the post over the title on the post page, you have to set the alternative text of the image to **featured-image**. 40 | 41 | In theory you can use different images as a featured image on the posts’ list and on the post page (in this case you can add the **featured-image** alternative text to a different image). 42 | 43 | The videos will be responsive thanks to the fitvids jQuery plugin. 44 | 45 | ### Animations 46 | 47 | Animated blocks on the post list uses the [scrollReveal.js library](http://scrollrevealjs.org/). It is a very simple library for scroll-based animations. The official documentation for this library is [available here](https://github.com/julianlloyd/scrollReveal.js). 48 | 49 | ### Disqus comments 50 | 51 | You can specify your Disqus username in the **partials/config.hbs** file in the following line: 52 | 53 | ```js 54 | var disqus_shortname = ''; 55 | ``` 56 | 57 | ### Google Analytics support 58 | 59 | You can specify your Google Analytics tracking code ID in the **partials/config.hbs** file in the following line: 60 | 61 | ```js 62 | var ga_ua = 'UA-XXXXX-X'; 63 | ``` 64 | 65 | ### Background image 66 | 67 | The image displayed in the background is a blog cover image which can be defined in the Ghost settings. 68 | 69 | If you want to use a responsive version of this image, you should leave blank the cover image under the Ghost settings and replace images in the **assets/images/** directory with your own ones. 70 | 71 | ### Logo area 72 | 73 | The text "Free Ghost Theme" can be changed in the **partials/logo.hbs** file in the following fragment: 74 | 75 | ```html 76 | Free Ghost Theme 77 | ``` 78 | 79 | ### Footer area 80 | 81 | You can modify the content of the page footer in the **partials/footer.hbs** file. It will be displayed on all subpages of your Ghost blog. 82 | 83 | ## Useful Ghost resources 84 | 85 | We recommend these Ghost resources if you need to improve your knowledge regarding this CMS: 86 | 87 | * [Ghost cheatsheet](http://howtoghost.net/ghost-cheatsheet/) 88 | * [Ghost API overview](http://www.metacotta.com/ghost-api-overview/) 89 | * [How to make Ghost Themes](http://docs.ghost.org/themes/) 90 | * [Ghost Themes development links](http://ghost.centminmod.com/ghost-themes/) 91 | * [Ghost dev bookmarks](https://github.com/ninjaas/ghost-dev-bookmark) 92 | 93 | ## Copyright & License 94 | 95 | Copyright (C) 2014 GavickPro - Released under the MIT License. 96 | 97 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 98 | 99 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 100 | 101 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 102 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 103 | -------------------------------------------------------------------------------- /assets/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { display: block; } 23 | /** 24 | * Correct `inline-block` display not defined in IE 8/9. 25 | */ 26 | 27 | audio, 28 | canvas, 29 | video { display: inline-block; } 30 | /** 31 | * Prevent modern browsers from displaying `audio` without controls. 32 | * Remove excess height in iOS 5 devices. 33 | */ 34 | 35 | audio:not([controls]) { 36 | display: none; 37 | height: 0; 38 | } 39 | /** 40 | * Address `[hidden]` styling not present in IE 8/9. 41 | * Hide the `template` element in IE, Safari, and Firefox < 22. 42 | */ 43 | 44 | [hidden], 45 | template { display: none; } 46 | /* ========================================================================== 47 | Base 48 | ========================================================================== */ 49 | 50 | /** 51 | * 1. Set default font family to sans-serif. 52 | * 2. Prevent iOS text size adjust after orientation change, without disabling 53 | * user zoom. 54 | */ 55 | 56 | html { 57 | font-family: sans-serif; /* 1 */ 58 | -ms-text-size-adjust: 100%; /* 2 */ 59 | -webkit-text-size-adjust: 100%; /* 2 */ 60 | } 61 | /** 62 | * Remove default margin. 63 | */ 64 | 65 | body { margin: 0; } 66 | /* ========================================================================== 67 | Links 68 | ========================================================================== */ 69 | 70 | /** 71 | * Remove the gray background color from active links in IE 10. 72 | */ 73 | 74 | a { background: transparent; } 75 | /** 76 | * Address `outline` inconsistency between Chrome and other browsers. 77 | */ 78 | 79 | a:focus { outline: thin dotted; } 80 | /** 81 | * Improve readability when focused and also mouse hovered in all browsers. 82 | */ 83 | 84 | a:active, 85 | a:hover { outline: 0; } 86 | /* ========================================================================== 87 | Typography 88 | ========================================================================== */ 89 | 90 | /** 91 | * Address variable `h1` font-size and margin within `section` and `article` 92 | * contexts in Firefox 4+, Safari 5, and Chrome. 93 | */ 94 | 95 | h1 { 96 | font-size: 2em; 97 | margin: 0.67em 0; 98 | } 99 | /** 100 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 101 | */ 102 | 103 | abbr[title] { border-bottom: 1px dotted; } 104 | p { margin: 1em 0 2em } 105 | /** 106 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 107 | */ 108 | 109 | b, 110 | strong { font-weight: bold; } 111 | /** 112 | * Address styling not present in Safari 5 and Chrome. 113 | */ 114 | 115 | dfn { font-style: italic; } 116 | /** 117 | * Address differences between Firefox and other browsers. 118 | */ 119 | 120 | hr { 121 | border: 0; 122 | -moz-box-sizing: content-box; 123 | box-sizing: content-box; 124 | height: 6rem; 125 | position: relative; 126 | } 127 | blockquote { position: relative; } 128 | /** 129 | * Address styling not present in IE 8/9. 130 | */ 131 | 132 | mark { 133 | background: #ff0; 134 | color: #000; 135 | } 136 | /** 137 | * Correct font family set oddly in Safari 5 and Chrome. 138 | */ 139 | 140 | code, 141 | kbd, 142 | pre, 143 | samp { 144 | font-family: monospace, serif; 145 | font-size: 1em; 146 | } 147 | /** 148 | * Improve readability of pre-formatted text in all browsers. 149 | */ 150 | 151 | pre { 152 | background: #F6F7F9; 153 | border-left: 4px solid #DA6426; 154 | margin: 1em 0 2em; 155 | padding: 2rem 0 2rem 6rem; 156 | white-space: pre-wrap; 157 | } 158 | /** 159 | * Set consistent quote types. 160 | */ 161 | 162 | q { quotes: "\201C" "\201D" "\2018" "\2019"; } 163 | /** 164 | * Address inconsistent and variable font size in all browsers. 165 | */ 166 | 167 | small { font-size: 80%; } 168 | /** 169 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 170 | */ 171 | 172 | sub, 173 | sup { 174 | font-size: 75%; 175 | line-height: 0; 176 | position: relative; 177 | vertical-align: baseline; 178 | } 179 | sup { top: -0.5em; } 180 | sub { bottom: -0.25em; } 181 | /* ========================================================================== 182 | Embedded content 183 | ========================================================================== */ 184 | 185 | /** 186 | * Remove border when inside `a` element in IE 8/9. 187 | */ 188 | 189 | img { border: 0; } 190 | /** 191 | * Correct overflow displayed oddly in IE 9. 192 | */ 193 | 194 | svg:not(:root) { overflow: hidden; } 195 | /* ========================================================================== 196 | Figures 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari 5. 201 | */ 202 | 203 | figure { margin: 0; } 204 | /* ========================================================================== 205 | Forms 206 | ========================================================================== */ 207 | 208 | /** 209 | * Define consistent border, margin, and padding. 210 | */ 211 | 212 | fieldset { 213 | border: 1px solid #c0c0c0; 214 | margin: 0 2px; 215 | padding: 0.35em 0.625em 0.75em; 216 | } 217 | /** 218 | * 1. Correct `color` not being inherited in IE 8/9. 219 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 220 | */ 221 | 222 | legend { 223 | border: 0; /* 1 */ 224 | padding: 0; /* 2 */ 225 | } 226 | /** 227 | * 1. Correct font family not being inherited in all browsers. 228 | * 2. Correct font size not being inherited in all browsers. 229 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 230 | */ 231 | 232 | button, 233 | input, 234 | select, 235 | textarea { 236 | font-family: inherit; /* 1 */ 237 | font-size: 100%; /* 2 */ 238 | margin: 0; /* 3 */ 239 | } 240 | /** 241 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 242 | * the UA stylesheet. 243 | */ 244 | 245 | button, 246 | input { line-height: normal; } 247 | /** 248 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 249 | * All other form control elements do not inherit `text-transform` values. 250 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 251 | * Correct `select` style inheritance in Firefox 4+ and Opera. 252 | */ 253 | 254 | button, 255 | select { text-transform: none; } 256 | /** 257 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 258 | * and `video` controls. 259 | * 2. Correct inability to style clickable `input` types in iOS. 260 | * 3. Improve usability and consistency of cursor style between image-type 261 | * `input` and others. 262 | */ 263 | 264 | button, 265 | html input[type="button"], /* 1 */ 266 | input[type="reset"], 267 | input[type="submit"] { 268 | -webkit-appearance: button; /* 2 */ 269 | cursor: pointer; /* 3 */ 270 | } 271 | /** 272 | * Re-set default cursor for disabled elements. 273 | */ 274 | 275 | button[disabled], 276 | html input[disabled] { cursor: default; } 277 | /** 278 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 279 | * 2. Remove excess padding in IE 8/9/10. 280 | */ 281 | 282 | input[type="checkbox"], 283 | input[type="radio"] { 284 | box-sizing: border-box; /* 1 */ 285 | padding: 0; /* 2 */ 286 | } 287 | /** 288 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 289 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 290 | * (include `-moz` to future-proof). 291 | */ 292 | 293 | input[type="search"] { 294 | -webkit-appearance: textfield; /* 1 */ 295 | -moz-box-sizing: content-box; 296 | -webkit-box-sizing: content-box; /* 2 */ 297 | box-sizing: content-box; 298 | } 299 | 300 | /** 301 | * Remove inner padding and search cancel button in Safari 5 and Chrome 302 | * on OS X. 303 | */ 304 | 305 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 306 | -webkit-appearance: none; 307 | } 308 | 309 | /** 310 | * Remove inner padding and border in Firefox 4+. 311 | */ 312 | 313 | button::-moz-focus-inner, input::-moz-focus-inner { 314 | border: 0; 315 | padding: 0; 316 | } 317 | /** 318 | * 1. Remove default vertical scrollbar in IE 8/9. 319 | * 2. Improve readability and alignment in all browsers. 320 | */ 321 | 322 | textarea { 323 | overflow: auto; /* 1 */ 324 | vertical-align: top; /* 2 */ 325 | } 326 | /* ========================================================================== 327 | Tables 328 | ========================================================================== */ 329 | 330 | /** 331 | * Remove most spacing between table cells. 332 | */ 333 | 334 | table { 335 | border-collapse: collapse; 336 | border-spacing: 0; 337 | } 338 | -------------------------------------------------------------------------------- /assets/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JS file for Casper behaviours 3 | */ 4 | 5 | /*globals jQuery, document */ 6 | (function ($) { 7 | "use strict"; 8 | 9 | $(document).ready(function(){ 10 | // add class loaded used for animation 11 | setTimeout(function() { 12 | $(document.body).addClass('loaded'); 13 | }, 500); 14 | // move main image to header 15 | if($('#post-page').length > 0) { 16 | var featured_video = $('.post-content iframe:first-child') 17 | // check if the featured image exists 18 | if(featured_video && featured_video.length > 0) { 19 | $('.post-header h2').before(featured_video); 20 | } 21 | } 22 | // fit videos 23 | $(".post-header").fitVids(); 24 | $(".post-content").fitVids(); 25 | 26 | // menu behaviour 27 | var main_menu = $(".menu"); 28 | main_menu.click(function() { 29 | if(main_menu.hasClass("menu--open")) { 30 | main_menu.removeClass("menu--open"); 31 | } else { 32 | main_menu.addClass("menu--open"); 33 | } 34 | }); 35 | }); 36 | }(jQuery)); 37 | 38 | (function(root, factory) { 39 | if (typeof define === 'function' && define.amd) { 40 | define(factory); 41 | } else if (typeof exports === 'object') { 42 | module.exports = factory(require, exports, module); 43 | } else { 44 | root.scrollReveal = factory(); 45 | } 46 | }(this, function(require, exports, module) { 47 | 48 | /* 49 | _ _ _____ _ _ 50 | | | | __ \ | | (_) 51 | ___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___ 52 | / __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __| 53 | \__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \ 54 | |___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ v.0.1.2 55 | _/ | 56 | |__/ 57 | 58 | "Declarative on-scroll reveal animations." 59 | 60 | /*============================================================================= 61 | 62 | scrollReveal.js was inspired by cbpScroller.js (c) 2014 Codrops. 63 | 64 | Licensed under the MIT license. 65 | http://www.opensource.org/licenses/mit-license.php 66 | 67 | =============================================================================*/ 68 | 69 | /*! scrollReveal.js v0.1.2 (c) 2014 Julian Lloyd | MIT license */ 70 | 71 | /*===========================================================================*/ 72 | 73 | 74 | window.scrollReveal = (function (window) { 75 | 76 | 'use strict'; 77 | 78 | function scrollReveal(options) { 79 | 80 | this.docElem = window.document.documentElement; 81 | this.options = this.extend(this.defaults, options); 82 | this.styleBank = []; 83 | 84 | if (this.options.init == true) this.init(); 85 | } 86 | 87 | scrollReveal.prototype = { 88 | 89 | defaults: { 90 | after: '0s', 91 | enter: 'bottom', 92 | move: '24px', 93 | over: '0.66s', 94 | easing: 'ease-in-out', 95 | 96 | // if 0, the element is considered in the viewport as soon as it enters 97 | // if 1, the element is considered in the viewport when it's fully visible 98 | viewportFactor: 0.33, 99 | 100 | // if false, animations occur only once 101 | // if true, animations occur each time an element enters the viewport 102 | reset: false, 103 | 104 | // if true, scrollReveal.init() is automaticaly called upon instantiation 105 | init: true 106 | }, 107 | 108 | /*=============================================================================*/ 109 | 110 | init: function () { 111 | 112 | this.scrolled = false; 113 | 114 | var self = this; 115 | 116 | // Check DOM for the data-scrollReveal attribute 117 | // and initialize all found elements. 118 | this.elems = Array.prototype.slice.call(this.docElem.querySelectorAll('[data-scroll-reveal]')); 119 | this.elems.forEach(function (el, i) { 120 | 121 | // Capture original style attribute 122 | if (!self.styleBank[el]) { 123 | self.styleBank[el] = el.getAttribute('style'); 124 | } 125 | 126 | self.update(el); 127 | }); 128 | 129 | var scrollHandler = function () { 130 | if (!self.scrolled) { 131 | self.scrolled = true; 132 | setTimeout(function () { 133 | self._scrollPage(); 134 | }, 60); 135 | } 136 | }; 137 | 138 | var resizeHandler = function () { 139 | 140 | // If we’re still waiting for settimeout, reset the timer. 141 | if (self.resizeTimeout) { 142 | clearTimeout(self.resizeTimeout); 143 | } 144 | function delayed() { 145 | self._scrollPage(); 146 | self.resizeTimeout = null; 147 | } 148 | self.resizeTimeout = setTimeout(delayed, 200); 149 | }; 150 | 151 | window.addEventListener('scroll', scrollHandler, false); 152 | window.addEventListener('resize', resizeHandler, false); 153 | }, 154 | 155 | /*=============================================================================*/ 156 | 157 | _scrollPage: function () { 158 | var self = this; 159 | 160 | this.elems.forEach(function (el, i) { 161 | self.update(el); 162 | }); 163 | this.scrolled = false; 164 | }, 165 | 166 | /*=============================================================================*/ 167 | 168 | parseLanguage: function (el) { 169 | 170 | // Splits on a sequence of one or more commas or spaces. 171 | var words = el.getAttribute('data-scroll-reveal').split(/[, ]+/), 172 | parsed = {}; 173 | 174 | function filter (words) { 175 | var ret = [], 176 | 177 | blacklist = [ 178 | "from", 179 | "the", 180 | "and", 181 | "then", 182 | "but", 183 | "with" 184 | ]; 185 | 186 | words.forEach(function (word, i) { 187 | if (blacklist.indexOf(word) > -1) { 188 | return; 189 | } 190 | ret.push(word); 191 | }); 192 | 193 | return ret; 194 | } 195 | 196 | words = filter(words); 197 | 198 | words.forEach(function (word, i) { 199 | 200 | switch (word) { 201 | case "enter": 202 | parsed.enter = words[i + 1]; 203 | return; 204 | 205 | case "after": 206 | parsed.after = words[i + 1]; 207 | return; 208 | 209 | case "wait": 210 | parsed.after = words[i + 1]; 211 | return; 212 | 213 | case "move": 214 | parsed.move = words[i + 1]; 215 | return; 216 | 217 | case "ease": 218 | parsed.move = words[i + 1]; 219 | parsed.ease = "ease"; 220 | return; 221 | 222 | case "ease-in": 223 | parsed.move = words[i + 1]; 224 | parsed.easing = "ease-in"; 225 | return; 226 | 227 | case "ease-in-out": 228 | parsed.move = words[i + 1]; 229 | parsed.easing = "ease-in-out"; 230 | return; 231 | 232 | case "ease-out": 233 | parsed.move = words[i + 1]; 234 | parsed.easing = "ease-out"; 235 | return; 236 | 237 | case "over": 238 | parsed.over = words[i + 1]; 239 | return; 240 | 241 | default: 242 | return; 243 | } 244 | }); 245 | 246 | return parsed; 247 | }, 248 | 249 | 250 | /*=============================================================================*/ 251 | 252 | update: function (el) { 253 | 254 | var css = this.genCSS(el); 255 | var style = this.styleBank[el]; 256 | 257 | if (style != null) style += ";"; else style = ""; 258 | 259 | if (!el.getAttribute('data-scroll-reveal-initialized')) { 260 | el.setAttribute('style', style + css.initial); 261 | el.setAttribute('data-scroll-reveal-initialized', true); 262 | } 263 | 264 | if (!this.isElementInViewport(el, this.options.viewportFactor)) { 265 | if (this.options.reset) { 266 | el.setAttribute('style', style + css.initial + css.reset); 267 | } 268 | return; 269 | } 270 | 271 | if (el.getAttribute('data-scroll-reveal-complete')) return; 272 | 273 | if (this.isElementInViewport(el, this.options.viewportFactor)) { 274 | el.setAttribute('style', style + css.target + css.transition); 275 | // Without reset enabled, we can safely remove the style tag 276 | // to prevent CSS specificy wars with authored CSS. 277 | if (!this.options.reset) { 278 | setTimeout(function () { 279 | if (style != "") { 280 | el.setAttribute('style', style); 281 | } else { 282 | el.removeAttribute('style'); 283 | } 284 | el.setAttribute('data-scroll-reveal-complete',true); 285 | }, css.totalDuration); 286 | } 287 | return; 288 | } 289 | }, 290 | 291 | /*=============================================================================*/ 292 | 293 | genCSS: function (el) { 294 | var parsed = this.parseLanguage(el), 295 | enter, 296 | axis; 297 | 298 | if (parsed.enter) { 299 | 300 | if (parsed.enter == "top" || parsed.enter == "bottom") { 301 | enter = parsed.enter; 302 | axis = "y"; 303 | } 304 | 305 | if (parsed.enter == "left" || parsed.enter == "right") { 306 | enter = parsed.enter; 307 | axis = "x"; 308 | } 309 | 310 | } else { 311 | 312 | if (this.options.enter == "top" || this.options.enter == "bottom") { 313 | enter = this.options.enter 314 | axis = "y"; 315 | } 316 | 317 | if (this.options.enter == "left" || this.options.enter == "right") { 318 | enter = this.options.enter 319 | axis = "x"; 320 | } 321 | } 322 | 323 | // After all values are parsed, let’s make sure our our 324 | // pixel distance is negative for top and left entrances. 325 | // 326 | // ie. "move 25px from top" starts at 'top: -25px' in CSS. 327 | 328 | if (enter == "top" || enter == "left") { 329 | if (parsed.move) { 330 | parsed.move = "-" + parsed.move; 331 | } 332 | else { 333 | parsed.move = "-" + this.options.move; 334 | } 335 | } 336 | 337 | var dist = parsed.move || this.options.move, 338 | dur = parsed.over || this.options.over, 339 | delay = parsed.after || this.options.after, 340 | easing = parsed.easing || this.options.easing; 341 | 342 | var transition = "-webkit-transition: -webkit-transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" + 343 | "transition: transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" + 344 | "-webkit-perspective: 1000;" + 345 | "-webkit-backface-visibility: hidden;"; 346 | 347 | // The same as transition, but removing the delay for elements fading out. 348 | var reset = "-webkit-transition: -webkit-transform " + dur + " " + easing + " 0s, opacity " + dur + " " + easing + " " + delay + ";" + 349 | "transition: transform " + dur + " " + easing + " 0s, opacity " + dur + " " + easing + " " + delay + ";" + 350 | "-webkit-perspective: 1000;" + 351 | "-webkit-backface-visibility: hidden;"; 352 | 353 | var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" + 354 | "transform: translate" + axis + "(" + dist + ");" + 355 | "opacity: 0;"; 356 | 357 | var target = "-webkit-transform: translate" + axis + "(0);" + 358 | "transform: translate" + axis + "(0);" + 359 | "opacity: 1;"; 360 | return { 361 | transition: transition, 362 | initial: initial, 363 | target: target, 364 | reset: reset, 365 | totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000) 366 | }; 367 | }, 368 | 369 | getViewportH : function () { 370 | var client = this.docElem['clientHeight'], 371 | inner = window['innerHeight']; 372 | 373 | return (client < inner) ? inner : client; 374 | }, 375 | 376 | getOffset : function(el) { 377 | var offsetTop = 0, 378 | offsetLeft = 0; 379 | 380 | do { 381 | if (!isNaN(el.offsetTop)) { 382 | offsetTop += el.offsetTop; 383 | } 384 | if (!isNaN(el.offsetLeft)) { 385 | offsetLeft += el.offsetLeft; 386 | } 387 | } while (el = el.offsetParent) 388 | 389 | return { 390 | top: offsetTop, 391 | left: offsetLeft 392 | } 393 | }, 394 | 395 | isElementInViewport : function(el, h) { 396 | var scrolled = window.pageYOffset, 397 | viewed = scrolled + this.getViewportH(), 398 | elH = el.offsetHeight, 399 | elTop = this.getOffset(el).top, 400 | elBottom = elTop + elH, 401 | h = h || 0; 402 | 403 | return (elTop + elH * h) <= viewed 404 | && (elBottom) >= scrolled 405 | || (el.currentStyle? el.currentStyle : window.getComputedStyle(el, null)).position == 'fixed'; 406 | }, 407 | 408 | extend: function (a, b){ 409 | for (var key in b) { 410 | if (b.hasOwnProperty(key)) { 411 | a[key] = b[key]; 412 | } 413 | } 414 | return a; 415 | } 416 | }; // end scrollReveal.prototype 417 | 418 | return scrollReveal; 419 | })(window); 420 | 421 | return scrollReveal; 422 | 423 | })); 424 | 425 | window.scrollReveal = new scrollReveal(); -------------------------------------------------------------------------------- /assets/css/main.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------- 2 | 3 | Perfetta Ghost Theme by GavickPro 4 | 14-06-2015 5 | v.1.5.1 6 | 7 | - - - - - - - - - - - - - - - - - - 8 | 9 | 1. Basic Elements 10 | 1.1 Fonts 11 | 2. Page elements 12 | 2.1 Logo 13 | 2.2 Footer 14 | 2.3 Pagination 15 | 3. Post items 16 | 4. RWD 17 | ----------------------------------*/ 18 | 19 | /*--------------------------------- 20 | 1. Basic elements 21 | ----------------------------------*/ 22 | html { 23 | font-size: 62.5%; 24 | -webkit-font-smoothing: subpixel-antialiased; 25 | } 26 | body { 27 | background-attachment: fixed; 28 | background-color: #f3f3f3; 29 | background-size: cover; 30 | background-repeat: no-repeat; 31 | color: #777; 32 | font-family: Raleway, sans-serif; 33 | font-size: 16px; 34 | font-weight: 300; 35 | line-height: 1.6; 36 | } 37 | body.default-bg { background-image: url('../images/bg-desktop.jpg'); } 38 | a { 39 | color: #da6426; 40 | text-decoration: none; 41 | } 42 | .loaded a { 43 | -webkit-transition: all 0.3s ease-out; 44 | -moz-transition: all 0.3s ease-out; 45 | -ms-transition: all 0.3s ease-out; 46 | transition: all 0.3s ease-out; 47 | } 48 | a:active, 49 | a:focus, 50 | a:hover { color: #363636; } 51 | img { max-width: 100%; } 52 | .page-wrap { 53 | margin: 0 auto; 54 | max-width: 1100px; 55 | width: 100%; 56 | } 57 | h1, 58 | h2, 59 | h3, 60 | h4, 61 | h5, 62 | h6 { color: #363636 } 63 | hr:after { 64 | color: #bbb; 65 | content: "* * *"; 66 | display: block; 67 | font-family: ghost-perfetta; 68 | font-size: 13px; 69 | position: absolute; 70 | text-align: center; 71 | top: 20px; 72 | width: 100%; 73 | } 74 | blockquote:before { 75 | color: #DA6426; 76 | content: "\""; 77 | font-family: serif; 78 | font-size: 50px; 79 | font-style: italic; 80 | font-weight: 300; 81 | height: 10px; 82 | left: -40px; 83 | position: absolute; 84 | top: -25px; 85 | width: 20px; 86 | } 87 | iframe { 88 | border: none; 89 | } 90 | /*--------------------------------- 91 | 1.1 Fonts 92 | ----------------------------------*/ 93 | @font-face { 94 | font-family: "ghost-perfetta"; 95 | src: url("../fonts/perfetta-pixellove/ghost-perfetta.eot"); 96 | src: url("../fonts/perfetta-pixellove/ghost-perfetta.eot?#iefix") format("embedded-opentype"), url("../fonts/perfetta-pixellove/ghost-perfetta.ttf") format("truetype"), url("../fonts/perfetta-pixellove/ghost-perfetta.svg#ghost-perfetta") format("svg"), url("../fonts/perfetta-pixellove/ghost-perfetta.woff") format("woff"); 97 | font-weight: normal; 98 | font-style: normal; 99 | } 100 | [data-icon]:before { 101 | font-family: "ghost-perfetta" !important; 102 | content: attr(data-icon); 103 | font-style: normal !important; 104 | font-weight: normal !important; 105 | font-variant: normal !important; 106 | text-transform: none !important; 107 | speak: none; 108 | line-height: 1; 109 | -webkit-font-smoothing: antialiased; 110 | -moz-osx-font-smoothing: grayscale; 111 | } 112 | [class^="icon-"]:before, 113 | [class*=" icon-"]:before { 114 | font-family: "ghost-perfetta" !important; 115 | font-style: normal !important; 116 | font-weight: normal !important; 117 | font-variant: normal !important; 118 | text-transform: none !important; 119 | speak: none; 120 | line-height: 1; 121 | -webkit-font-smoothing: antialiased; 122 | -moz-osx-font-smoothing: grayscale; 123 | } 124 | .icon-email:before { content: "a"; } 125 | .icon-fb:before { content: "b"; } 126 | .icon-gplus:before { content: "c"; } 127 | .icon-phone:before { content: "d"; } 128 | .icon-pinterest:before { content: "e"; } 129 | .icon-rss:before { content: "f"; } 130 | .icon-star:before { content: "*"; } 131 | .icon-twitter:before { content: "g"; } 132 | .icon-youtube:before { content: "h"; } 133 | /*--------------------------------- 134 | 1.2 Animation end states 135 | ----------------------------------*/ 136 | body.loaded .blog-desc { 137 | opacity: 1; 138 | -webkit-transform: translateY(0px); 139 | -moz-transform: translateY(0px); 140 | -ms-transform: translateY(0px); 141 | transform: translateY(0px); 142 | } 143 | /*--------------------------------- 144 | 2.1 Logo 145 | ----------------------------------*/ 146 | #logo { 147 | margin: 82px auto 88px; 148 | position: relative; 149 | text-align: center; 150 | } 151 | #logo a { color: #ffffff; } 152 | #logo small { 153 | color: #ffffff; 154 | font-family: Arial, sans-serif; 155 | font-size: 12px; 156 | font-weight: bold; 157 | position: relative; 158 | text-transform: uppercase; 159 | top: 30px; 160 | } 161 | #logo:before { 162 | color: #ffffff; 163 | content: "* * *"; 164 | display: block; 165 | font-family: ghost-perfetta; 166 | font-size: 10px; 167 | position: absolute; 168 | top: -40px; 169 | width: 100%; 170 | } 171 | .blog-title { 172 | border: 1px solid #ffffff; 173 | border-left: none; 174 | border-right: none; 175 | display: inline-block; 176 | font-family: Cookie, serif; 177 | font-size: 72px; 178 | font-weight: normal; 179 | line-height: 108px; 180 | letter-spacing: 2px; 181 | margin: 0 auto; 182 | padding: 0 58px; 183 | position: relative; 184 | width: auto; 185 | } 186 | .blog-title:after { 187 | border: 1px solid #ffffff; 188 | border-left: none; 189 | border-right: none; 190 | content: ""; 191 | height: 108px; 192 | position: absolute; 193 | width: 100%; 194 | left: 8px; 195 | top: 0px; 196 | } 197 | .blog-title:before { 198 | border: 1px solid #ffffff; 199 | border-left: none; 200 | border-right: none; 201 | content: ""; 202 | height: 108px; 203 | position: absolute; 204 | width: 100%; 205 | left: -12px; 206 | top: -4px; 207 | } 208 | .blog-title a { 209 | position: relative; 210 | z-index: 1; 211 | } 212 | .blog-desc { 213 | font-size: 14px; 214 | font-family: Arial, sans-serif; 215 | font-weight: 700; 216 | margin: -32px 0 0 0; 217 | opacity: 0; 218 | -webkit-transform: translateY(-10px); 219 | -moz-transform: translateY(-10px); 220 | -ms-transform: translateY(-10px); 221 | transform: translateY(-10px); 222 | } 223 | .loaded .blog-desc { 224 | -webkit-transition: all 0.5s ease-out; 225 | -moz-transition: all 0.5s ease-out; 226 | -ms-transition: all 0.5s ease-out; 227 | transition: all 0.5s ease-out; 228 | } 229 | /*--------------------------------- 230 | 2.2 Footer 231 | ----------------------------------*/ 232 | footer.page-wrap > div { margin-left: 170px; } 233 | #footer-content { 234 | background: #34373b; 235 | color: #8e9798; 236 | font-family: Arial, sans-serif; 237 | font-size: 12px; 238 | padding: 50px; 239 | } 240 | #footer-content > div { 241 | float: left; 242 | width: 50%; 243 | } 244 | #footer-content p { 245 | margin: 0 20px 12px 0; 246 | } 247 | #footer-content p i { 248 | color: #c3c8c9; 249 | font-size: 14px; 250 | padding: 0 8px 0 0; 251 | position: relative; 252 | top: 3px; 253 | } 254 | #footer-content .footer-phone, 255 | #footer-content .footer-email { float: left; } 256 | #footer-content dl dt, 257 | #footer-content dl dd { 258 | display: block; 259 | float: left; 260 | margin-bottom: 12px; 261 | padding: 0; 262 | } 263 | #footer-content dl dd { 264 | margin: 0 20px 12px 4px; 265 | } 266 | #footer-content dl dt:nth-child(5n) { clear: both; } 267 | #footer-content h3 { 268 | color: #fff; 269 | font-size: 12px; 270 | margin: 0 0 16px 0; 271 | text-transform: uppercase; 272 | } 273 | #footer-content:after { 274 | clear: both; 275 | content: ""; 276 | display: table; 277 | } 278 | #social-icons { 279 | font-size: 20px; 280 | margin-bottom: 20px; 281 | margin-top: 50px; 282 | text-align: center; 283 | } 284 | #social-icons a { 285 | color: #363636; 286 | display: inline-block; 287 | height: 24px; 288 | margin: 0 4px; 289 | overflow: hidden; 290 | width: 20px; 291 | } 292 | #social-icons a:active, 293 | #social-icons a:focus, 294 | #social-icons a:hover { color: #da6426; } 295 | #copyrights { 296 | color: #555; 297 | font-family: Arial, sans-serif; 298 | font-size: 12px; 299 | line-height: 18px; 300 | padding: 0 0 30px 0; 301 | text-align: center; 302 | } 303 | #copyrights a { color: #DA6426; } 304 | #copyrights a:active, 305 | #copyrights a:focus, 306 | #copyrights a:hover { color: #fff; } 307 | /*--------------------------------- 308 | 2.3 Pagination 309 | ----------------------------------*/ 310 | .pagination { 311 | -webkit-box-sizing: border-box; 312 | -moz-box-sizing: border-box; 313 | -ms-box-sizing: border-box; 314 | box-sizing: border-box; 315 | margin: -60px 0 20px 0; 316 | padding-left: 170px; 317 | text-align: right; 318 | } 319 | .pagination > div { 320 | background: #da6426; 321 | display: inline-block; 322 | } 323 | .pagination > div > a, 324 | .pagination > div > span { 325 | border-left: 1px solid #e18352; 326 | color: #ffffff; 327 | float: left; 328 | font-family: Arial, sans-serif; 329 | font-size: 12px; 330 | padding: 12px; 331 | } 332 | .pagination > div > a:first-child, 333 | .pagination > div > span:first-child { border-left: none; } 334 | .pagination > div > a:active, 335 | .pagination > div > a:focus, 336 | .pagination > div > a:hover { background-color: #e18352; } 337 | /*--------------------------------- 338 | 3. Post items 339 | ----------------------------------*/ 340 | .post { position: relative; } 341 | .post > div { 342 | background: #ffffff; 343 | margin: 0 0 60px 170px; 344 | } 345 | .post > aside { 346 | background: #34373b; 347 | color: #8e9798; 348 | padding: 0 0 10px 0; 349 | position: absolute; 350 | top: 0; 351 | width: 130px; 352 | } 353 | .post > aside:after { 354 | background: transparent; 355 | border: 8px solid transparent; 356 | border-left: 8px solid #da6426; 357 | content: ""; 358 | position: absolute; 359 | right: -16px; 360 | top: 32px; 361 | } 362 | .post > aside > time { 363 | background: #da6426; 364 | -webkit-box-sizing: border-box; 365 | -moz-box-sizing: border-box; 366 | -ms-box-sizing: border-box; 367 | box-sizing: border-box; 368 | color: #ffffff; 369 | display: block; 370 | font-size: 18px; 371 | line-height: 1; 372 | padding: 22px; 373 | position: relative; 374 | text-align: center; 375 | text-transform: uppercase; 376 | z-index: 1; 377 | } 378 | .post > aside > time span { display: block; } 379 | .post > aside dl { 380 | font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 381 | margin: 0; 382 | text-align: center; 383 | } 384 | .post > aside dd, 385 | .post > aside ul { margin: 0; } 386 | .post > aside .item-author, 387 | .post > aside .item-author + dd { 388 | display: inline; 389 | font-size: 12px; 390 | font-style: italic; 391 | line-height: 50px; 392 | } 393 | .post > aside .item-tags { 394 | border-top: 1px solid #5a5f66; 395 | line-height: 1px; 396 | margin: 0 auto; 397 | text-indent: -9999px; 398 | width: 40%; 399 | } 400 | .post > aside .item-tags + dd ul { 401 | line-height: 1.1; 402 | padding: 12px; 403 | } 404 | .post > aside .item-tags + dd ul li { 405 | display: inline-block; 406 | font-size: 12px; 407 | font-style: italic; 408 | list-style-type: none; 409 | padding: 0; 410 | } 411 | .post > aside a { 412 | color: #8e9798; 413 | } 414 | .post > aside a:active, 415 | .post > aside a:focus, 416 | .post > aside a:hover { 417 | color: #da6426; 418 | } 419 | .post .post-readmore { 420 | border: 1px solid #da6426; 421 | color: #da6426; 422 | display: inline-block; 423 | font-family: Arial, sans-serif; 424 | font-size: 12px; 425 | font-weight: 400; 426 | height: 40px; 427 | line-height: 40px; 428 | margin: 40px 0 0 0; 429 | padding: 0 40px; 430 | text-transform: uppercase; 431 | } 432 | .post .post-readmore:active, 433 | .post .post-readmore:focus, 434 | .post .post-readmore:hover { 435 | border-color: #34373b; 436 | color: #34373b; 437 | } 438 | .post-header img:first-child, 439 | .post-header video:first-child, 440 | .post-header embed:first-child, 441 | .post-header iframe:first-child { 442 | background: #333; 443 | width: 100%; 444 | } 445 | .post-header h2 { 446 | font-size: 36px; 447 | margin: 0 0 45px 0; 448 | position: relative; 449 | text-align: center; 450 | } 451 | .post-header h2 a { 452 | color: #363636; 453 | display: block; 454 | padding: 65px 65px 20px 65px; 455 | position: relative; 456 | } 457 | .post-header h2 a:hover { color: #DA6426; } 458 | .post-header h2 a:after { 459 | border-top: 1px solid #e5e5e5; 460 | bottom: -3px; 461 | content: ""; 462 | left: 50%; 463 | margin: 0 0 0 -28%; 464 | position: absolute; 465 | width: 60%; 466 | } 467 | .post-header h2 a:before { 468 | border-top: 1px solid #e5e5e5; 469 | bottom: -4px; 470 | content: ""; 471 | left: 50%; 472 | margin: 0 0 0 -27%; 473 | position: absolute; 474 | width: 60%; 475 | } 476 | .post-header h2:after { 477 | border-top: 1px solid #e5e5e5; 478 | bottom: 0px; 479 | content: ""; 480 | left: 50%; 481 | margin: 0 0 0 -30%; 482 | position: absolute; 483 | width: 60%; 484 | } 485 | .post-title span { 486 | position: relative; 487 | } 488 | .post.featured .post-title span:before { 489 | color: #da6426; 490 | content: "*"; 491 | font-family: ghost-perfetta; 492 | font-size: 18px; 493 | position: relative; 494 | right: 4px; 495 | top: -15px; 496 | } 497 | .post-header p { 498 | margin: 0; 499 | } 500 | .post-excerpt { 501 | padding: 0 65px 65px 65px; 502 | text-align: center; 503 | } 504 | .post-content { 505 | padding: 0 65px 65px 65px; 506 | } 507 | .post-content img, 508 | .post-content video, 509 | .post-content embed, 510 | .post-content iframe { 511 | max-width: 100%; 512 | } 513 | .post-content img { 514 | display: block; 515 | margin: 14px auto; 516 | } 517 | .post-footer, 518 | .post-comments { 519 | padding: 0 65px 6.5px 65px; 520 | } 521 | .author .post-author-avatar { 522 | float: left; 523 | margin: 24px 40px 20px 0; 524 | overflow: hidden; 525 | } 526 | .author .post-author-avatar img { 527 | display: block; 528 | max-width: 100px 529 | } 530 | .author { 531 | border-top: 1px solid #e5e5e5; 532 | border-bottom: 1px solid #e5e5e5; 533 | clear: both; 534 | font-size: 14px; 535 | padding: 10px; 536 | } 537 | .author h3 { 538 | color: #DA6426; 539 | margin: 20px 0 0; 540 | } 541 | .share:after, 542 | .author:after, 543 | .post-footer:after, 544 | .post-comments:after { 545 | content: ""; 546 | clear: both; 547 | display: table; 548 | } 549 | .share { 550 | margin: -40px auto 60px; 551 | width: 250px; 552 | } 553 | .share h4 { 554 | color: #363636; 555 | float: left; 556 | font-size: 14px; 557 | margin: 0 20px 0 0; 558 | } 559 | .share a { 560 | display: block; 561 | float: left; 562 | font-size: 20px; 563 | height: 25px; 564 | margin: 0 10px 0 0; 565 | overflow: hidden; 566 | width: 20px; 567 | } 568 | .share a:hover { color: #363636 } 569 | .icon-twitter { color: #2aa9e0 } 570 | .icon-fb { color: #204385 } 571 | .icon-gplus { color: #d3492c } 572 | 573 | /* Full width */ 574 | .full-width .post > div { 575 | margin: 0 0 60px 0; 576 | } 577 | .full-width + footer.page-wrap > div { 578 | margin-left: 0; 579 | } 580 | 581 | /* Tag page */ 582 | .page-title { 583 | color: #fff; 584 | font-size: 36px; 585 | line-height: 1; 586 | text-align: center; 587 | } 588 | .author-bio, 589 | .page-title > small { 590 | color: #fff; 591 | clear: both; 592 | display: inline-block; 593 | font-size: 14px; 594 | line-height: 1; 595 | position: relative; 596 | text-align: center; 597 | top: -10px; 598 | width: 100%; 599 | } 600 | 601 | /* Author page */ 602 | .author-profile { 603 | font-size: 14px; 604 | margin: 0 auto 40px auto; 605 | max-width: 640px; 606 | text-align: center; 607 | } 608 | .author-profile a { 609 | color: #fff; 610 | border-bottom: 1px dotted #fff; 611 | } 612 | .author-profile a:active, 613 | .author-profile a:focus, 614 | .author-profile a:hover { 615 | color: #DA6426; 616 | border-bottom-color: #DA6426; 617 | } 618 | .author-profile img { 619 | border: 1px solid rgba(255, 255, 255, .5); 620 | border-radius: 50%; 621 | display: block; 622 | margin: 0 auto; 623 | padding: 3px; 624 | overflow: hidden; 625 | width: 100px; 626 | } 627 | .author-bio { 628 | line-height: 1.6; 629 | margin: 0; 630 | } 631 | .author-meta { 632 | color: #fff; 633 | margin: 5px 0 0 0; 634 | text-align: center; 635 | } 636 | .author-meta dt { 637 | display: inline-block; 638 | font-weight: bold; 639 | margin: 0 10px; 640 | } 641 | .author-meta dd { 642 | display: inline-block; 643 | margin: 0; 644 | padding: 0; 645 | } 646 | .author-profile .subscribe-button { 647 | margin: 10px 0; 648 | } 649 | 650 | /*--------------------------------- 651 | 4. Menu 652 | ----------------------------------*/ 653 | 654 | .menu { 655 | padding: 0 0 60px 0; 656 | text-align: center; 657 | } 658 | 659 | .menu__item { 660 | color: #fff; 661 | display: inline-block; 662 | font-size: 16px; 663 | font-weight: bold; 664 | line-height: 26px; 665 | margin: 0 20px; 666 | padding: 0; 667 | } 668 | 669 | .menu__item:active, 670 | .menu__item:focus, 671 | .menu__item:hover { 672 | border-bottom: 3px double #da6426; 673 | color: #da6426; 674 | } 675 | 676 | .menu__item--active { 677 | border-bottom: 3px double #fff; 678 | color: #fff; 679 | } 680 | 681 | /*--------------------------------- 682 | 5. RWD 683 | ----------------------------------*/ 684 | 685 | @media (max-width: 1140px) { 686 | body { 687 | padding: 0 10px; 688 | } 689 | body.default-bg { 690 | background-image: url('../images/bg-tablet.jpg'); 691 | } 692 | } 693 | 694 | @media (max-width: 900px) { 695 | html { 696 | font-size: 55%; 697 | } 698 | .post-header h2 a { 699 | padding: 45px 40px 20px 40px; 700 | } 701 | .post-content, 702 | .post-excerpt, 703 | .post-footer, 704 | .post-comments { 705 | padding: 0 40px 65px 40px; 706 | } 707 | #footer-content { 708 | padding: 40px; 709 | } 710 | #footer-content dl dt { 711 | clear: both; 712 | } 713 | #footer-content .footer-phone, 714 | #footer-content .footer-email { 715 | clear: both; 716 | } 717 | .share { 718 | margin: 0 auto 60px; 719 | } 720 | .pagination { 721 | padding-left: 0; 722 | } 723 | } 724 | 725 | @media (max-width: 700px) { 726 | .post { 727 | padding-top: 75px; 728 | } 729 | .post > div { 730 | margin: 0 0 60px 0; 731 | } 732 | footer.page-wrap > div { 733 | margin-left: 0; 734 | } 735 | .post > aside { 736 | padding: 0; 737 | width: 100%; 738 | } 739 | .post > aside > time { 740 | float: left; 741 | width: 25%; 742 | } 743 | .post > aside dl { 744 | float: right; 745 | padding: 10px 0; 746 | width: 70%; 747 | } 748 | .post > aside dt, 749 | .post > aside dd { 750 | border: none; 751 | display: block; 752 | float: left; 753 | line-height: 30px!important; 754 | margin: 0 10px 0 0!important; 755 | padding: 0; 756 | } 757 | .post > aside dd ul { 758 | padding: 0!important; 759 | } 760 | .post > aside dd ul li { 761 | line-height: 30px; 762 | } 763 | .post > aside .item-tags { 764 | border: none; 765 | clear: both; 766 | font-size: 12px; 767 | font-style: italic; 768 | line-height: 30px!important; 769 | text-indent: 0; 770 | width: auto; 771 | } 772 | .post > aside:after { 773 | display: none; 774 | } 775 | .menu { 776 | color: #fff; 777 | padding: 0 0 30px 0; 778 | position: relative; 779 | } 780 | 781 | .menu:before { 782 | color: #fff; 783 | content: "≡ Menu"; 784 | cursor: pointer; 785 | font-family: Arial, sans-serif; 786 | font-weight: bold; 787 | } 788 | 789 | .menu__wrap { 790 | background: #fff; 791 | border-radius: 2px; 792 | left: -9999px; 793 | position: absolute; 794 | width: 300px; 795 | } 796 | 797 | .menu__item { 798 | border-top: 1px solid #e5e5e5; 799 | border-bottom: none!important; 800 | color: #da6426; 801 | margin: 0; 802 | padding: 5px 0; 803 | width: 100%; 804 | } 805 | 806 | .menu__item--active { 807 | background: #da6426; 808 | border-color: #da6426; 809 | color: #fff; 810 | } 811 | 812 | .menu__item:active, 813 | .menu__item:focus, 814 | .menu__item:hover { 815 | color: #fff!important; 816 | background: #da6426!important; 817 | } 818 | 819 | .menu__item--active + .menu__item { 820 | border-top: none; 821 | } 822 | 823 | .menu--open .menu__wrap { 824 | float: none; 825 | margin: 20px auto; 826 | position: static; 827 | } 828 | } 829 | 830 | @media (max-width: 480px) { 831 | body.default-bg { 832 | background-image: url('../images/bg-mobile.jpg'); 833 | } 834 | .blog-title { 835 | font-size: 42px; 836 | line-height: 88px; 837 | padding: 0 28px; 838 | } 839 | .blog-title:after { 840 | height: 88px; 841 | } 842 | .blog-title:before { 843 | height: 88px; 844 | } 845 | #logo { 846 | margin: 52px auto 58px; 847 | } 848 | #logo:before { 849 | top: -30px; 850 | } 851 | #logo small { 852 | top: 20px; 853 | } 854 | .post { 855 | padding-top: 60px; 856 | } 857 | .post > aside > time { 858 | padding: 15px; 859 | width: 45%; 860 | } 861 | .post > aside > dl { 862 | padding: 16px 0; 863 | width: 50%; 864 | } 865 | .post > aside .item-tags, 866 | .post > aside .item-tags + dd { 867 | display: none; 868 | } 869 | .post-header h2 a { 870 | padding: 25px 20px 20px 20px; 871 | } 872 | .post-content, 873 | .post-excerpt, 874 | .post-footer, 875 | .post-comments { 876 | padding: 0 20px 65px 20px; 877 | } 878 | .post-header h2 { 879 | font-size: 24px; 880 | } 881 | .post .post-readmore { 882 | margin: 20px 0 0 0; 883 | } 884 | #footer-content > div { 885 | padding-top: 20px; 886 | width: 100%; 887 | } 888 | #footer-content > div:first-child { 889 | padding-top: 0; 890 | } 891 | .pagination > div > a, .pagination > div > span { 892 | font-size: 11px; 893 | padding: 12px 8px; 894 | } 895 | .author .post-author-avatar { 896 | margin: 24px 20px 10px 0; 897 | } 898 | .author .post-author-avatar img { 899 | max-width: 56px; 900 | } 901 | .author { 902 | font-size: 15px; 903 | } 904 | pre { 905 | padding: 10px 0 10px 20px; 906 | } 907 | .menu:before { 908 | font-size: 16px; 909 | } 910 | } --------------------------------------------------------------------------------