├── package.json ├── assets ├── favicon.ico ├── fonts │ ├── casper-icons.eot │ ├── casper-icons.ttf │ ├── casper-icons.woff │ └── casper-icons.svg ├── css │ ├── customizations.css │ ├── prism.css │ └── screen.css └── js │ ├── jquery.fitvids.js │ ├── index.js │ └── prism.js ├── .gitignore ├── page.hbs ├── tag.hbs ├── partials └── loop.hbs ├── LICENSE ├── index.hbs ├── README.md ├── author.hbs ├── default.hbs └── post.hbs /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Casper", 3 | "version": "1.1.0" 4 | } 5 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegram/Casper/master/assets/favicon.ico -------------------------------------------------------------------------------- /assets/fonts/casper-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegram/Casper/master/assets/fonts/casper-icons.eot -------------------------------------------------------------------------------- /assets/fonts/casper-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegram/Casper/master/assets/fonts/casper-icons.ttf -------------------------------------------------------------------------------- /assets/fonts/casper-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegram/Casper/master/assets/fonts/casper-icons.woff -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | b-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | 17 | .idea/* 18 | *.iml 19 | projectFilesBackup 20 | 21 | .DS_Store -------------------------------------------------------------------------------- /assets/css/customizations.css: -------------------------------------------------------------------------------- 1 | .post-header h1, 2 | .home-template h1, 3 | a { 4 | color: #db2e34; 5 | } 6 | 7 | a:hover { 8 | color: #fd030c; 9 | } 10 | 11 | .page-title{ 12 | color: #db2e34; 13 | } 14 | 15 | .page-description{ 16 | color: rgba(255,255,255); 17 | text-shadow: rgba(0,0,0,0.15) 0px 0px 10px; 18 | -------------------------------------------------------------------------------- /page.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{! This is a page template. A page outputs content just like any other post, and has all the same 4 | attributes by default, but you can also customise it to behave differently if you prefer. }} 5 | 6 | 10 | 11 |
12 | 13 |
14 | {{! Everything inside the #post tags pulls data from the post }} 15 | {{#post}} 16 | 17 |

{{title}}

18 | 19 |
20 | {{content}} 21 |
22 | 23 | {{/post}} 24 |
25 | 26 |
27 | -------------------------------------------------------------------------------- /tag.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} 3 | 4 | {{! The big featured header }} 5 |
6 | 10 |
11 |
12 |

{{tag.name}}

13 |

A {{pagination.total}}-post collection

14 |
15 |
16 |
17 | 18 | {{! The main content area on the homepage }} 19 |
20 | 21 | {{! The tag below includes the post loop - partials/loop.hbs }} 22 | {{> "loop"}} 23 | 24 |
-------------------------------------------------------------------------------- /partials/loop.hbs: -------------------------------------------------------------------------------- 1 | {{! Previous/next page links - only displayed on page 2+ }} 2 |
3 | {{pagination}} 4 |
5 | 6 | {{! This is the post loop - each post will be output using this markup }} 7 | {{#foreach posts}} 8 |
9 |
10 |

{{{title}}}

11 |
12 |
13 |

{{excerpt words="26"}} »

14 |
15 | 21 |
22 | {{/foreach}} 23 | 24 | {{! Previous/next page links - displayed on every page }} 25 | {{pagination}} 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013-2014 Ghost Foundation - 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 | -------------------------------------------------------------------------------- /index.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} 3 | 4 | {{! The big featured header }} 5 |
6 | 10 |
11 |
12 |

{{@blog.title}}

13 |

{{@blog.description}}

14 |
15 |
16 | 17 |
18 | 19 | {{! The main content area on the homepage }} 20 |
21 | 22 | {{! The tag below includes the post loop - partials/loop.hbs }} 23 | {{> "loop"}} 24 | 25 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Casper 2 | 3 | The default theme for [Ghost](http://github.com/tryghost/ghost/). 4 | 5 | To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page. 6 | 7 | ## Copyright & License 8 | 9 | Copyright (c) 2013-2014 Ghost Foundation - Released under the MIT License. 10 | 11 | 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: 12 | 13 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | 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 16 | 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. 17 | -------------------------------------------------------------------------------- /author.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | {{! The tag above means - insert everything in this file into the {body} of the default.hbs template }} 3 | 4 | {{! The big featured header }} 5 | 6 | {{! Everything inside the #author tags pulls data from the author }} 7 | {{#author}} 8 |
9 | 13 |
14 | 15 |
16 | {{#if image}} 17 |
18 |
19 |
20 | {{/if}} 21 |

{{name}}

22 |

{{bio}}

23 |
24 | {{#if location}}{{location}}{{/if}} 25 | {{#if website}}{{website}}{{/if}} 26 | {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} 27 |
28 |
29 | {{/author}} 30 | 31 | {{! The main content area on the homepage }} 32 |
33 | 34 | {{! The tag below includes the post loop - partials/loop.hbs }} 35 | {{> "loop"}} 36 | 37 |
-------------------------------------------------------------------------------- /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 | {{! Styles'n'Scripts }} 18 | 19 | 20 | {{! Ghost outputs important style and meta data with this tag }} 21 | {{ghost_head}} 22 | 23 | 24 | 25 | {{! Everything else gets inserted here }} 26 | {{{body}}} 27 | 28 | 32 | 33 | {{! Ghost outputs important scripts and data with this tag }} 34 | {{ghost_foot}} 35 | 36 | {{! The main JavaScript file for Casper }} 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /assets/js/jquery.fitvids.js: -------------------------------------------------------------------------------- 1 | /*global jQuery */ 2 | /*jshint browser:true */ 3 | /*! 4 | * FitVids 1.1 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 | */ 11 | 12 | (function( $ ){ 13 | 14 | "use strict"; 15 | 16 | $.fn.fitVids = function( options ) { 17 | var settings = { 18 | customSelector: null 19 | }; 20 | 21 | if(!document.getElementById('fit-vids-style')) { 22 | // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js 23 | var head = document.head || document.getElementsByTagName('head')[0]; 24 | var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; 25 | var div = document.createElement('div'); 26 | div.innerHTML = '

x

'; 27 | head.appendChild(div.childNodes[1]); 28 | } 29 | 30 | if ( options ) { 31 | $.extend( settings, options ); 32 | } 33 | 34 | return this.each(function(){ 35 | var selectors = [ 36 | "iframe[src*='player.vimeo.com']", 37 | "iframe[src*='youtube.com']", 38 | "iframe[src*='youtube-nocookie.com']", 39 | "iframe[src*='kickstarter.com'][src*='video.html']", 40 | "object", 41 | "embed" 42 | ]; 43 | 44 | if (settings.customSelector) { 45 | selectors.push(settings.customSelector); 46 | } 47 | 48 | var $allVideos = $(this).find(selectors.join(',')); 49 | $allVideos = $allVideos.not("object object"); // SwfObj conflict patch 50 | 51 | $allVideos.each(function(){ 52 | var $this = $(this); 53 | if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } 54 | var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), 55 | width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), 56 | aspectRatio = height / width; 57 | if(!$this.attr('id')){ 58 | var videoID = 'fitvid' + Math.floor(Math.random()*999999); 59 | $this.attr('id', videoID); 60 | } 61 | $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); 62 | $this.removeAttr('height').removeAttr('width'); 63 | }); 64 | }); 65 | }; 66 | // Works with either jQuery or Zepto 67 | })( window.jQuery || window.Zepto ); 68 | -------------------------------------------------------------------------------- /post.hbs: -------------------------------------------------------------------------------- 1 | {{!< default}} 2 | 3 | {{! The comment above "< default" means - insert everything in this file into 4 | the {body} of the default.hbs template, which contains our header/footer. }} 5 | 6 | {{! Everything inside the #post tags pulls data from the post }} 7 | {{#post}} 8 | 9 |
10 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 |

{{title}}

22 | 25 |
26 | 27 |
28 | {{content}} 29 |
30 | 31 | 75 | 76 |
77 | 78 |
79 | 80 | {{/post}} 81 | -------------------------------------------------------------------------------- /assets/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JS file for Casper behaviours 3 | */ 4 | 5 | /* globals jQuery, document */ 6 | (function ($, sr, undefined) { 7 | "use strict"; 8 | 9 | var $document = $(document), 10 | 11 | // debouncing function from John Hann 12 | // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ 13 | debounce = function (func, threshold, execAsap) { 14 | var timeout; 15 | 16 | return function debounced () { 17 | var obj = this, args = arguments; 18 | function delayed () { 19 | if (!execAsap) { 20 | func.apply(obj, args); 21 | } 22 | timeout = null; 23 | } 24 | 25 | if (timeout) { 26 | clearTimeout(timeout); 27 | } else if (execAsap) { 28 | func.apply(obj, args); 29 | } 30 | 31 | timeout = setTimeout(delayed, threshold || 100); 32 | }; 33 | }; 34 | 35 | $document.ready(function () { 36 | 37 | var $postContent = $(".post-content"); 38 | $postContent.fitVids(); 39 | 40 | function updateImageWidth() { 41 | var $this = $(this), 42 | contentWidth = $postContent.outerWidth(), // Width of the content 43 | imageWidth = this.naturalWidth; // Original image resolution 44 | 45 | if (imageWidth >= contentWidth) { 46 | $this.addClass('full-img'); 47 | } else { 48 | $this.removeClass('full-img'); 49 | } 50 | } 51 | 52 | var $img = $("img").on('load', updateImageWidth); 53 | function casperFullImg() { 54 | $img.each(updateImageWidth); 55 | } 56 | 57 | casperFullImg(); 58 | $(window).smartresize(casperFullImg); 59 | 60 | $(".scroll-down").arctic_scroll(); 61 | 62 | }); 63 | 64 | // smartresize 65 | jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; 66 | 67 | // Arctic Scroll by Paul Adam Davis 68 | // https://github.com/PaulAdamDavis/Arctic-Scroll 69 | $.fn.arctic_scroll = function (options) { 70 | 71 | var defaults = { 72 | elem: $(this), 73 | speed: 500 74 | }, 75 | 76 | allOptions = $.extend(defaults, options); 77 | 78 | allOptions.elem.click(function (event) { 79 | event.preventDefault(); 80 | var $this = $(this), 81 | $htmlBody = $('html, body'), 82 | offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false, 83 | position = ($this.attr('data-position')) ? $this.attr('data-position') : false, 84 | toMove; 85 | 86 | if (offset) { 87 | toMove = parseInt(offset); 88 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed); 89 | } else if (position) { 90 | toMove = parseInt(position); 91 | $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed); 92 | } else { 93 | $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed); 94 | } 95 | }); 96 | 97 | }; 98 | })(jQuery, 'smartresize'); 99 | -------------------------------------------------------------------------------- /assets/fonts/casper-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+java+coffeescript+scss+bash+sql+ruby+gherkin+scala+haskell+swift+latex+git&plugins=line-highlight+line-numbers+autolinker+show-language */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important { 127 | font-weight: bold; 128 | } 129 | 130 | .token.entity { 131 | cursor: help; 132 | } 133 | 134 | pre[data-line] { 135 | position: relative; 136 | padding: 1em 0 1em 3em; 137 | } 138 | 139 | .line-highlight { 140 | position: absolute; 141 | left: 0; 142 | right: 0; 143 | padding: inherit 0; 144 | margin-top: 1em; /* Same as .prism’s padding-top */ 145 | 146 | background: hsla(24, 20%, 50%,.08); 147 | background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 148 | background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 149 | background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 150 | background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 151 | 152 | pointer-events: none; 153 | 154 | line-height: inherit; 155 | white-space: pre; 156 | } 157 | 158 | .line-highlight:before, 159 | .line-highlight[data-end]:after { 160 | content: attr(data-start); 161 | position: absolute; 162 | top: .4em; 163 | left: .6em; 164 | min-width: 1em; 165 | padding: 0 .5em; 166 | background-color: hsla(24, 20%, 50%,.4); 167 | color: hsl(24, 20%, 95%); 168 | font: bold 65%/1.5 sans-serif; 169 | text-align: center; 170 | vertical-align: .3em; 171 | border-radius: 999px; 172 | text-shadow: none; 173 | box-shadow: 0 1px white; 174 | } 175 | 176 | .line-highlight[data-end]:after { 177 | content: attr(data-end); 178 | top: auto; 179 | bottom: .4em; 180 | } 181 | pre.line-numbers { 182 | position: relative; 183 | padding-left: 3.8em; 184 | counter-reset: linenumber; 185 | } 186 | 187 | pre.line-numbers > code { 188 | position: relative; 189 | } 190 | 191 | .line-numbers .line-numbers-rows { 192 | position: absolute; 193 | pointer-events: none; 194 | top: 0; 195 | font-size: 100%; 196 | left: -3.8em; 197 | width: 3em; /* works for line-numbers below 1000 lines */ 198 | letter-spacing: -1px; 199 | border-right: 1px solid #999; 200 | 201 | -webkit-user-select: none; 202 | -moz-user-select: none; 203 | -ms-user-select: none; 204 | user-select: none; 205 | 206 | } 207 | 208 | .line-numbers-rows > span { 209 | pointer-events: none; 210 | display: block; 211 | counter-increment: linenumber; 212 | } 213 | 214 | .line-numbers-rows > span:before { 215 | content: counter(linenumber); 216 | color: #999; 217 | display: block; 218 | padding-right: 0.8em; 219 | text-align: right; 220 | } 221 | .token a { 222 | color: inherit; 223 | } 224 | pre[class*='language-'] { 225 | position: relative; 226 | } 227 | pre[class*='language-'] > code[data-language] { 228 | overflow: scroll; 229 | max-height: 28em; 230 | display: block; 231 | } 232 | pre[class*='language-'] > code[data-language]::before { 233 | content: attr(data-language); 234 | color: black; 235 | background-color: #CFCFCF; 236 | display: inline-block; 237 | position: absolute; 238 | top: 0; 239 | right: 0; 240 | font-size: 0.9em; 241 | border-radius: 0 0 0 5px; 242 | padding: 0 0.5em; 243 | text-shadow: none; 244 | } 245 | -------------------------------------------------------------------------------- /assets/js/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+java+coffeescript+scss+bash+sql+ruby+gherkin+scala+haskell+swift+latex+git&plugins=line-highlight+line-numbers+autolinker+show-language */ 2 | self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){c.lastIndex=0;var m=c.exec(d);if(m){u&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+""},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 5 | Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}},Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});; 6 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});; 8 | Prism.languages.java=Prism.languages.extend("clike",{keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,operator:{pattern:/(^|[^\.])(?:\+=|\+\+?|-=|--?|!=?|<{1,2}=?|>{1,3}=?|==?|&=|&&?|\|=|\|\|?|\?|\*=?|\/=?|%=?|\^=?|:|~)/gm,lookbehind:!0}});; 9 | Prism.languages.coffeescript=Prism.languages.extend("javascript",{comment:[/([#]{3}\s*\r?\n(.*\s*\r*\n*)\s*?\r?\n[#]{3})/g,/(\s|^)([#]{1}[^#^\r^\n]{2,}?(\r?\n|$))/g],keyword:/\b(this|window|delete|class|extends|namespace|extend|ar|let|if|else|while|do|for|each|of|return|in|instanceof|new|with|typeof|try|catch|finally|null|undefined|break|continue)\b/g}),Prism.languages.insertBefore("coffeescript","keyword",{"function":{pattern:/[a-z|A-z]+\s*[:|=]\s*(\([.|a-z\s|,|:|{|}|\"|\'|=]*\))?\s*->/gi,inside:{"function-name":/[_?a-z-|A-Z-]+(\s*[:|=])| @[_?$?a-z-|A-Z-]+(\s*)| /g,operator:/[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\//g}},"attr-name":/[_?a-z-|A-Z-]+(\s*:)| @[_?$?a-z-|A-Z-]+(\s*)| /g});; 10 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});; 11 | Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});; 12 | Prism.languages.sql={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|((--)|(\/\/)|#).*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/(^|[^@])("|')(\\?[\s\S])*?\2/g,lookbehind:!0},variable:/@[\w.$]+|@("|'|`)(\\?[\s\S])+?\1/g,"function":/\b(?:COUNT|SUM|AVG|MIN|MAX|FIRST|LAST|UCASE|LCASE|MID|LEN|ROUND|NOW|FORMAT)(?=\s*\()/ig,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALTER|ANALYZE|APPLY|AS|ASC|AUTHORIZATION|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADE|CASCADED|CASE|CHAIN|CHAR VARYING|CHARACTER VARYING|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLUMN|COLUMNS|COMMENT|COMMIT|COMMITTED|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATA|DATABASE|DATABASES|DATETIME|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE|DOUBLE PRECISION|DROP|DUMMY|DUMP|DUMPFILE|DUPLICATE KEY|ELSE|ENABLE|ENCLOSED BY|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPE|ESCAPED BY|EXCEPT|EXEC|EXECUTE|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR|FOR EACH ROW|FORCE|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GEOMETRY|GEOMETRYCOLLECTION|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|IDENTITY|IDENTITY_INSERT|IDENTITYCOL|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTO|INVOKER|ISOLATION LEVEL|JOIN|KEY|KEYS|KILL|LANGUAGE SQL|LAST|LEFT|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONGBLOB|LONGTEXT|MATCH|MATCHED|MEDIUMBLOB|MEDIUMINT|MEDIUMTEXT|MERGE|MIDDLEINT|MODIFIES SQL DATA|MODIFY|MULTILINESTRING|MULTIPOINT|MULTIPOLYGON|NATIONAL|NATIONAL CHAR VARYING|NATIONAL CHARACTER|NATIONAL CHARACTER VARYING|NATIONAL VARCHAR|NATURAL|NCHAR|NCHAR VARCHAR|NEXT|NO|NO SQL|NOCHECK|NOCYCLE|NONCLUSTERED|NULLIF|NUMERIC|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPTIMIZE|OPTION|OPTIONALLY|ORDER|OUT|OUTER|OUTFILE|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREV|PRIMARY|PRINT|PRIVILEGES|PROC|PROCEDURE|PUBLIC|PURGE|QUICK|RAISERROR|READ|READS SQL DATA|READTEXT|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEATABLE|REPLICATION|REQUIRE|RESTORE|RESTRICT|RETURN|RETURNS|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROWCOUNT|ROWGUIDCOL|ROWS?|RTREE|RULE|SAVE|SAVEPOINT|SCHEMA|SELECT|SERIAL|SERIALIZABLE|SESSION|SESSION_USER|SET|SETUSER|SHARE MODE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|START|STARTING BY|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLE|TABLES|TABLESPACE|TEMP(?:ORARY)?|TEMPTABLE|TERMINATED BY|TEXT|TEXTSIZE|THEN|TIMESTAMP|TINYBLOB|TINYINT|TINYTEXT|TO|TOP|TRAN|TRANSACTION|TRANSACTIONS|TRIGGER|TRUNCATE|TSEQUAL|TYPE|TYPES|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNPIVOT|UPDATE|UPDATETEXT|USAGE|USE|USER|USING|VALUE|VALUES|VARBINARY|VARCHAR|VARCHARACTER|VARYING|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH|WITH ROLLUP|WITHIN|WORK|WRITE|WRITETEXT)\b/gi,"boolean":/\b(?:TRUE|FALSE|NULL)\b/gi,number:/\b-?(0x)?\d*\.?[\da-f]+\b/g,operator:/\b(?:ALL|AND|ANY|BETWEEN|EXISTS|IN|LIKE|NOT|OR|IS|UNIQUE|CHARACTER SET|COLLATE|DIV|OFFSET|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b|[-+]{1}|!|[=<>]{1,2}|(&){1,2}|\|?\||\?|\*|\//gi,punctuation:/[;[\]()`,.]/g};; 13 | Prism.languages.ruby=Prism.languages.extend("clike",{comment:/#[^\r\n]*(\r?\n|$)/g,keyword:/\b(alias|and|BEGIN|begin|break|case|class|def|define_method|defined|do|each|else|elsif|END|end|ensure|false|for|if|in|module|new|next|nil|not|or|raise|redo|require|rescue|retry|return|self|super|then|throw|true|undef|unless|until|when|while|yield)\b/g,builtin:/\b(Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Stat|File|Fixnum|Fload|Hash|Integer|IO|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|String|Struct|TMS|Symbol|ThreadGroup|Thread|Time|TrueClass)\b/,constant:/\b[A-Z][a-zA-Z_0-9]*[?!]?\b/g}),Prism.languages.insertBefore("ruby","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0},variable:/[@$]+\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/g,symbol:/:\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/g});; 14 | Prism.languages.gherkin={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|((#)|(\/\/)).*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,atrule:/\b(And|Given|When|Then|In order to|As an|I want to|As a)\b/g,keyword:/\b(Scenario Outline|Scenario|Feature|Background|Story)\b/g};; 15 | Prism.languages.scala=Prism.languages.extend("java",{keyword:/(<-|=>)|\b(abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|null|object|override|package|private|protected|return|sealed|self|super|this|throw|trait|try|type|val|var|while|with|yield)\b/g,builtin:/\b(String|Int|Long|Short|Byte|Boolean|Double|Float|Char|Any|AnyRef|AnyVal|Unit|Nothing)\b/g,number:/\b0x[\da-f]*\.?[\da-f\-]+\b|\b\d*\.?\d+[e]?[\d]*[dfl]?\b/gi,symbol:/'([^\d\s]\w*)/g,string:/(""")[\W\w]*?\1|("|\/)[\W\w]*?\2|('.')/g}),delete Prism.languages.scala["function"];; 16 | Prism.languages.haskell={comment:{pattern:/(^|[^-!#$%*+=\?&@|~.:<>^\\])(--[^-!#$%*+=\?&@|~.:<>^\\].*(\r?\n|$)|{-[\w\W]*?-})/gm,lookbehind:!0},"char":/'([^\\"]|\\([abfnrtv\\"'&]|\^[A-Z@[\]\^_]|NUL|SOH|STX|ETX|EOT|ENQ|ACK|BEL|BS|HT|LF|VT|FF|CR|SO|SI|DLE|DC1|DC2|DC3|DC4|NAK|SYN|ETB|CAN|EM|SUB|ESC|FS|GS|RS|US|SP|DEL|\d+|o[0-7]+|x[0-9a-fA-F]+))'/g,string:/"([^\\"]|\\([abfnrtv\\"'&]|\^[A-Z@[\]\^_]|NUL|SOH|STX|ETX|EOT|ENQ|ACK|BEL|BS|HT|LF|VT|FF|CR|SO|SI|DLE|DC1|DC2|DC3|DC4|NAK|SYN|ETB|CAN|EM|SUB|ESC|FS|GS|RS|US|SP|DEL|\d+|o[0-7]+|x[0-9a-fA-F]+)|\\\s+\\)*"/g,keyword:/\b(case|class|data|deriving|do|else|if|in|infixl|infixr|instance|let|module|newtype|of|primitive|then|type|where)\b/g,import_statement:{pattern:/(\n|^)\s*(import)\s+(qualified\s+)?(([A-Z][_a-zA-Z0-9']*)(\.[A-Z][_a-zA-Z0-9']*)*)(\s+(as)\s+(([A-Z][_a-zA-Z0-9']*)(\.[A-Z][_a-zA-Z0-9']*)*))?(\s+hiding\b)?/gm,inside:{keyword:/\b(import|qualified|as|hiding)\b/g}},builtin:/\b(abs|acos|acosh|all|and|any|appendFile|approxRational|asTypeOf|asin|asinh|atan|atan2|atanh|basicIORun|break|catch|ceiling|chr|compare|concat|concatMap|const|cos|cosh|curry|cycle|decodeFloat|denominator|digitToInt|div|divMod|drop|dropWhile|either|elem|encodeFloat|enumFrom|enumFromThen|enumFromThenTo|enumFromTo|error|even|exp|exponent|fail|filter|flip|floatDigits|floatRadix|floatRange|floor|fmap|foldl|foldl1|foldr|foldr1|fromDouble|fromEnum|fromInt|fromInteger|fromIntegral|fromRational|fst|gcd|getChar|getContents|getLine|group|head|id|inRange|index|init|intToDigit|interact|ioError|isAlpha|isAlphaNum|isAscii|isControl|isDenormalized|isDigit|isHexDigit|isIEEE|isInfinite|isLower|isNaN|isNegativeZero|isOctDigit|isPrint|isSpace|isUpper|iterate|last|lcm|length|lex|lexDigits|lexLitChar|lines|log|logBase|lookup|map|mapM|mapM_|max|maxBound|maximum|maybe|min|minBound|minimum|mod|negate|not|notElem|null|numerator|odd|or|ord|otherwise|pack|pi|pred|primExitWith|print|product|properFraction|putChar|putStr|putStrLn|quot|quotRem|range|rangeSize|read|readDec|readFile|readFloat|readHex|readIO|readInt|readList|readLitChar|readLn|readOct|readParen|readSigned|reads|readsPrec|realToFrac|recip|rem|repeat|replicate|return|reverse|round|scaleFloat|scanl|scanl1|scanr|scanr1|seq|sequence|sequence_|show|showChar|showInt|showList|showLitChar|showParen|showSigned|showString|shows|showsPrec|significand|signum|sin|sinh|snd|sort|span|splitAt|sqrt|subtract|succ|sum|tail|take|takeWhile|tan|tanh|threadToIOResult|toEnum|toInt|toInteger|toLower|toRational|toUpper|truncate|uncurry|undefined|unlines|until|unwords|unzip|unzip3|userError|words|writeFile|zip|zip3|zipWith|zipWith3)\b/g,number:/\b(\d+(\.\d+)?([eE][+-]?\d+)?|0[Oo][0-7]+|0[Xx][0-9a-fA-F]+)\b/g,operator:/\s\.\s|([-!#$%*+=\?&@|~:<>^\\]*\.[-!#$%*+=\?&@|~:<>^\\]+)|([-!#$%*+=\?&@|~:<>^\\]+\.[-!#$%*+=\?&@|~:<>^\\]*)|[-!#$%*+=\?&@|~:<>^\\]+|(`([A-Z][_a-zA-Z0-9']*\.)*[_a-z][_a-zA-Z0-9']*`)/g,hvariable:/\b([A-Z][_a-zA-Z0-9']*\.)*[_a-z][_a-zA-Z0-9']*\b/g,constant:/\b([A-Z][_a-zA-Z0-9']*\.)*[A-Z][_a-zA-Z0-9']*\b/g,punctuation:/[{}[\];(),.:]/g};; 17 | Prism.languages.swift=Prism.languages.extend("clike",{keyword:/\b(as|associativity|break|case|class|continue|convenience|default|deinit|didSet|do|dynamicType|else|enum|extension|fallthrough|final|for|func|get|if|import|in|infix|init|inout|internal|is|lazy|left|let|mutating|new|none|nonmutating|operator|optional|override|postfix|precedence|prefix|private|protocol|public|required|return|right|safe|self|Self|set|static|struct|subscript|super|switch|Type|typealias|unowned|unowned|unsafe|var|weak|where|while|willSet|__COLUMN__|__FILE__|__FUNCTION__|__LINE__)\b/g,number:/\b([\d_]+(\.[\de_]+)?|0x[a-f0-9_]+(\.[a-f0-9p_]+)?|0b[01_]+|0o[0-7_]+)\b/gi,constant:/\b(nil|[A-Z_]{2,}|k[A-Z][A-Za-z_]+)\b/g,atrule:/\@\b(IBOutlet|IBDesignable|IBAction|IBInspectable|class_protocol|exported|noreturn|NSCopying|NSManaged|objc|UIApplicationMain|auto_closure)\b/g,builtin:/\b([A-Z]\S+|abs|advance|alignof|alignofValue|assert|contains|count|countElements|debugPrint|debugPrintln|distance|dropFirst|dropLast|dump|enumerate|equal|filter|find|first|getVaList|indices|isEmpty|join|last|lazy|lexicographicalCompare|map|max|maxElement|min|minElement|numericCast|overlaps|partition|prefix|print|println|reduce|reflect|reverse|sizeof|sizeofValue|sort|sorted|split|startsWith|stride|strideof|strideofValue|suffix|swap|toDebugString|toString|transcode|underestimateCount|unsafeBitCast|withExtendedLifetime|withUnsafeMutablePointer|withUnsafeMutablePointers|withUnsafePointer|withUnsafePointers|withVaList)\b/g});; 18 | Prism.languages.latex={comment:/%.*?(\r?\n|$)$/m,string:/(\$)(\\?.)*?\1/g,punctuation:/[{}]/g,selector:/\\[a-z;,:\.]*/i};; 19 | Prism.languages.git={comment:/^#.*$/m,string:/("|')(\\?.)*?\1/gm,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s(--|-)\w+/m}},coord:/^@@.*@@$/m,deleted:/^-(?!-).+$/m,inserted:/^\+(?!\+).+$/m,commit_sha1:/^commit \w{40}$/m} 20 | ; 21 | !function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function t(e,t){return t=" "+t+" ",(" "+e.className+" ").replace(/[\n\t]/g," ").indexOf(t)>-1}function n(e,n,r){for(var i,a=n.replace(/\s+/g,"").split(","),l=+e.getAttribute("data-line-offset")||0,o=parseFloat(getComputedStyle(e).lineHeight),d=0;i=a[d++];){i=i.split("-");var c=+i[0],h=+i[1]||c,s=document.createElement("div");s.textContent=Array(h-c+2).join(" \r\n"),s.className=(r||"")+" line-highlight",t(e,"line-numbers")||(s.setAttribute("data-start",c),h>c&&s.setAttribute("data-end",h)),s.style.top=(c-l-1)*o+"px",t(e,"line-numbers")?e.appendChild(s):(e.querySelector("code")||e).appendChild(s)}}function r(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var r=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(r&&!document.getElementById(t)){var i=t.slice(0,t.lastIndexOf(".")),a=document.getElementById(i);a&&(a.hasAttribute("data-line")||a.setAttribute("data-line",""),n(a,r,"temporary "),document.querySelector(".temporary.line-highlight").scrollIntoView())}}if(window.Prism){var i=(crlf=/\r?\n|\r/g,0);Prism.hooks.add("after-highlight",function(t){var a=t.element.parentNode,l=a&&a.getAttribute("data-line");a&&l&&/pre/i.test(a.nodeName)&&(clearTimeout(i),e(".line-highlight",a).forEach(function(e){e.parentNode.removeChild(e)}),n(a,l),i=setTimeout(r,1))}),addEventListener("hashchange",r)}}();; 22 | Prism.hooks.add("after-highlight",function(e){var n=e.element.parentNode;if(n&&/pre/i.test(n.nodeName)&&-1!==n.className.indexOf("line-numbers")){var t,a=1+e.code.split("\n").length;lines=new Array(a),lines=lines.join(""),t=document.createElement("span"),t.className="line-numbers-rows",t.innerHTML=lines,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(t)}});; 23 | !function(){if(self.Prism){var i=/\b([a-z]{3,7}:\/\/|tel:)[\w-+%~/.:#=?&]+/,n=/\b\S+@[\w.]+[a-z]{2}/,t=/\[([^\]]+)]\(([^)]+)\)/,e=["comment","url","attr-value","string"];for(var a in Prism.languages){var r=Prism.languages[a];Prism.languages.DFS(r,function(a,r,l){e.indexOf(l)>-1&&"Array"!==Prism.util.type(r)&&(r.pattern||(r=this[a]={pattern:r}),r.inside=r.inside||{},"comment"==l&&(r.inside["md-link"]=t),"attr-value"==l?Prism.languages.insertBefore("inside","punctuation",{"url-link":i},r):r.inside["url-link"]=i,r.inside["email-link"]=n)}),r["url-link"]=i,r["email-link"]=n}Prism.hooks.add("wrap",function(i){if(/-link$/.test(i.type)){i.tag="a";var n=i.content;if("email-link"==i.type&&0!=n.indexOf("mailto:"))n="mailto:"+n;else if("md-link"==i.type){var e=i.content.match(t);n=e[2],i.content=e[1]}i.attributes.href=n}})}}();; 24 | !function(){if(self.Prism){var a={csharp:"C#",cpp:"C++"};Prism.hooks.add("before-highlight",function(e){var t=a[e.language]||e.language;e.element.setAttribute("data-language",t)})}}();; 25 | -------------------------------------------------------------------------------- /assets/css/screen.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Table of Contents 3 | ========================================================================== */ 4 | 5 | /* 6 | 7 | 0. Normalize 8 | 1. Icons 9 | 2. General 10 | 3. Utilities 11 | 4. General 12 | 5. Single Post 13 | 6. Tag Archive 14 | 7. Third Party Elements 15 | 8. Pagination 16 | 9. Footer 17 | 10. Media Queries (Medium Desktop) 18 | 11. Media Queries (Tablet) 19 | 12. Media Queries (Mobile) 20 | 13. Animations 21 | 22 | */ 23 | 24 | /* ========================================================================== 25 | 0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified) 26 | ========================================================================== */ 27 | 28 | article, aside, details, 29 | figcaption, figure, 30 | footer, header, hgroup, 31 | main, nav, section, 32 | summary { display: block; } 33 | audio, canvas, video { display: inline-block; } 34 | audio:not([controls]) { display: none; height: 0; } 35 | [hidden], template { display: none; } 36 | html { 37 | font-family: sans-serif; 38 | -ms-text-size-adjust: 100%; 39 | -webkit-text-size-adjust: 100%; 40 | } 41 | body { margin: 0; } 42 | a { background: transparent; } 43 | a:focus { outline: thin dotted; } 44 | a:active, a:hover { outline: 0; } 45 | h1 { font-size: 2em; margin: 0.67em 0; } 46 | abbr[title] { border-bottom: 1px dotted; } 47 | b, strong { font-weight: 700; } 48 | dfn { font-style: italic; } 49 | hr { 50 | -moz-box-sizing: content-box; 51 | box-sizing: content-box; 52 | height: 0; 53 | } 54 | mark { background: #FF0; color: #000; } 55 | code, kbd, pre, 56 | samp { font-family: monospace, serif; font-size: 1em; } 57 | pre { white-space: pre-wrap; } 58 | q { quotes: "\201C" "\201D" "\2018" "\2019"; } 59 | small { font-size: 80%; } 60 | sub, sup { 61 | font-size: 75%; 62 | line-height: 0; 63 | position: relative; 64 | vertical-align: baseline; 65 | } 66 | sup { top: -0.5em; } 67 | sub { bottom: -0.25em; } 68 | img { border: 0; } 69 | svg:not(:root) { overflow: hidden; } 70 | figure { margin: 0; } 71 | fieldset { 72 | border: 1px solid #c0c0c0; 73 | margin: 0 2px; 74 | padding: 0.35em 0.625em 0.75em; 75 | } 76 | legend { border: 0; padding: 0; } 77 | button, input, select, 78 | textarea { font-family: inherit; font-size: 100%; margin: 0; } 79 | button, input { line-height: normal; } 80 | button, select { text-transform: none; } 81 | button, html input[type="button"], 82 | input[type="reset"], input[type="submit"] { 83 | -webkit-appearance: button; 84 | cursor: pointer; 85 | } 86 | button[disabled], html input[disabled] { cursor: default; } 87 | input[type="checkbox"], 88 | input[type="radio"] { box-sizing: border-box; padding: 0; } 89 | input[type="search"] { 90 | -webkit-appearance: textfield; 91 | -moz-box-sizing: content-box; 92 | -webkit-box-sizing: content-box; 93 | box-sizing: content-box; 94 | } 95 | input[type="search"]::-webkit-search-cancel-button, 96 | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 97 | button::-moz-focus-inner, 98 | input::-moz-focus-inner { border: 0; padding: 0; } 99 | textarea { overflow: auto; vertical-align: top; } 100 | table { border-collapse: collapse; border-spacing: 0; } 101 | 102 | 103 | /* ========================================================================== 104 | 1. Icons - Sets up the icon font and respective classes 105 | ========================================================================== */ 106 | 107 | /* Import the font file with the icons in it */ 108 | @font-face { 109 | font-family: "casper-icons"; 110 | src:url("../fonts/casper-icons.eot"); 111 | src:url("../fonts/casper-icons.eot?#iefix") format("embedded-opentype"), 112 | url("../fonts/casper-icons.woff") format("woff"), 113 | url("../fonts/casper-icons.ttf") format("truetype"), 114 | url("../fonts/casper-icons.svg#icons") format("svg"); 115 | font-weight: normal; 116 | font-style: normal; 117 | } 118 | 119 | /* Apply these base styles to all icons */ 120 | [class^="icon-"]:before, [class*=" icon-"]:before { 121 | font-family: "casper-icons", "Open Sans", sans-serif; 122 | speak: none; 123 | font-style: normal; 124 | font-weight: normal; 125 | font-variant: normal; 126 | text-transform: none; 127 | line-height: 1; 128 | text-decoration: none !important; 129 | -webkit-font-smoothing: antialiased; 130 | -moz-osx-font-smoothing: grayscale; 131 | } 132 | 133 | /* Each icon is created by inserting the correct character into the 134 | content of the :before pseudo element. Like a boss. */ 135 | .icon-ghost:before { 136 | content: "\f600"; 137 | } 138 | .icon-feed:before { 139 | content: "\f601"; 140 | } 141 | .icon-twitter:before { 142 | content: "\f602"; 143 | font-size: 1.1em; 144 | } 145 | .icon-google-plus:before { 146 | content: "\f603"; 147 | } 148 | .icon-facebook:before { 149 | content: "\f604"; 150 | } 151 | .icon-arrow-left:before { 152 | content: "\f605"; 153 | } 154 | .icon-stats:before { 155 | content: "\f606"; 156 | } 157 | .icon-location:before { 158 | content: "\f607"; 159 | margin-left: -3px; /* Tracking fix */ 160 | } 161 | .icon-link:before { 162 | content: "\f608"; 163 | } 164 | 165 | 166 | /* ========================================================================== 167 | 2. General - Setting up some base styles 168 | ========================================================================== */ 169 | 170 | html { 171 | height: 100%; 172 | max-height: 100%; 173 | font-size: 62.5%; 174 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 175 | } 176 | 177 | body { 178 | height: 100%; 179 | max-height: 100%; 180 | font-family: "Merriweather", serif; 181 | letter-spacing: 0.01rem; 182 | font-size: 1.8rem; 183 | line-height: 1.75em; 184 | color: #3A4145; 185 | -webkit-font-feature-settings: 'kern' 1; 186 | -moz-font-feature-settings: 'kern' 1; 187 | -o-font-feature-settings: 'kern' 1; 188 | } 189 | 190 | ::-moz-selection { 191 | background: #D6EDFF; 192 | } 193 | 194 | ::selection { 195 | background: #D6EDFF; 196 | } 197 | 198 | h1, h2, h3, 199 | h4, h5, h6 { 200 | -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 201 | -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 202 | -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; 203 | color: #2E2E2E; 204 | line-height: 1.15em; 205 | margin: 0 0 0.4em 0; 206 | font-family: "Open Sans", sans-serif; 207 | } 208 | 209 | h1 { 210 | font-size: 5rem; 211 | letter-spacing: -2px; 212 | text-indent: -3px; 213 | } 214 | 215 | h2 { 216 | font-size: 3.6rem; 217 | letter-spacing: -1px; 218 | } 219 | 220 | h3 { 221 | font-size: 3rem; 222 | } 223 | 224 | h4 { 225 | font-size: 2.5rem; 226 | } 227 | 228 | h5 { 229 | font-size: 2rem; 230 | } 231 | 232 | h6 { 233 | font-size: 2rem; 234 | } 235 | 236 | a { 237 | color: #4A4A4A; 238 | transition: color ease 0.3s; 239 | } 240 | 241 | a:hover { 242 | color: #111; 243 | } 244 | 245 | p, ul, ol, dl { 246 | -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 247 | -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 248 | -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1; 249 | margin: 0 0 1.75em 0; 250 | } 251 | 252 | ol, ul { 253 | padding-left: 3rem; 254 | } 255 | 256 | ol ol, ul ul, 257 | ul ol, ol ul { 258 | margin: 0 0 0.4em 0; 259 | padding-left: 2em; 260 | } 261 | 262 | dl dt { 263 | float: left; 264 | width: 180px; 265 | overflow: hidden; 266 | clear: left; 267 | text-align: right; 268 | text-overflow: ellipsis; 269 | white-space: nowrap; 270 | font-weight: 700; 271 | margin-bottom: 1em; 272 | } 273 | 274 | dl dd { 275 | margin-left: 200px; 276 | margin-bottom: 1em 277 | } 278 | 279 | li { 280 | margin: 0.4em 0; 281 | } 282 | 283 | li li { 284 | margin: 0; 285 | } 286 | 287 | hr { 288 | display: block; 289 | height: 1px; 290 | border: 0; 291 | border-top: #EFEFEF 1px solid; 292 | margin: 3.2em 0; 293 | padding: 0; 294 | } 295 | 296 | blockquote { 297 | -moz-box-sizing: border-box; 298 | box-sizing: border-box; 299 | margin: 1.75em 0 1.75em -2.2em; 300 | padding: 0 0 0 1.75em; 301 | border-left: #4A4A4A 0.4em solid; 302 | } 303 | 304 | blockquote p { 305 | margin: 0.8em 0; 306 | font-style: italic; 307 | } 308 | 309 | blockquote small { 310 | display: inline-block; 311 | margin: 0.8em 0 0.8em 1.5em; 312 | font-size: 0.9em; 313 | color: #CCC; 314 | } 315 | 316 | blockquote small:before { content: "\2014 \00A0"; } 317 | 318 | blockquote cite { 319 | font-weight: 700; 320 | } 321 | 322 | blockquote cite a { font-weight: normal; } 323 | 324 | mark { 325 | background-color: #FFC336; 326 | } 327 | 328 | code, tt { 329 | padding: 1px 3px; 330 | font-family: Inconsolata, monospace, sans-serif; 331 | font-size: 0.85em; 332 | white-space: pre-wrap; 333 | border: #E3EDF3 1px solid; 334 | background: #F7FAFB; 335 | border-radius: 2px; 336 | } 337 | 338 | pre { 339 | -moz-box-sizing: border-box; 340 | box-sizing: border-box; 341 | margin: 0 0 1.75em 0; 342 | border: #E3EDF3 1px solid; 343 | width: 100%; 344 | padding: 10px; 345 | font-family: Inconsolata, monospace, sans-serif; 346 | font-size: 0.9em; 347 | white-space: pre; 348 | overflow: auto; 349 | background: #F7FAFB; 350 | border-radius: 3px; 351 | } 352 | 353 | pre code, tt { 354 | font-size: inherit; 355 | white-space: -moz-pre-wrap; 356 | white-space: pre-wrap; 357 | background: transparent; 358 | border: none; 359 | padding: 0; 360 | } 361 | 362 | kbd { 363 | display: inline-block; 364 | margin-bottom: 0.4em; 365 | padding: 1px 8px; 366 | border: #CCC 1px solid; 367 | color: #666; 368 | text-shadow: #FFF 0 1px 0; 369 | font-size: 0.9em; 370 | font-weight: 700; 371 | background: #F4F4F4; 372 | border-radius: 4px; 373 | box-shadow: 374 | 0 1px 0 rgba(0, 0, 0, 0.2), 375 | 0 1px 0 0 #fff inset; 376 | } 377 | 378 | table { 379 | -moz-box-sizing: border-box; 380 | box-sizing: border-box; 381 | margin: 1.75em 0; 382 | width: 100%; 383 | max-width: 100%; 384 | background-color: transparent; 385 | } 386 | 387 | table th, 388 | table td { 389 | padding: 8px; 390 | line-height: 20px; 391 | text-align: left; 392 | vertical-align: top; 393 | border-top: #EFEFEF 1px solid; 394 | } 395 | 396 | table th { color: #000; } 397 | 398 | table caption + thead tr:first-child th, 399 | table caption + thead tr:first-child td, 400 | table colgroup + thead tr:first-child th, 401 | table colgroup + thead tr:first-child td, 402 | table thead:first-child tr:first-child th, 403 | table thead:first-child tr:first-child td { 404 | border-top: 0; 405 | } 406 | 407 | table tbody + tbody { border-top: #EFEFEF 2px solid; } 408 | 409 | table table table { background-color: #FFF; } 410 | 411 | table tbody > tr:nth-child(odd) > td, 412 | table tbody > tr:nth-child(odd) > th { 413 | background-color: #F6F6F6; 414 | } 415 | 416 | table.plain tbody > tr:nth-child(odd) > td, 417 | table.plain tbody > tr:nth-child(odd) > th { 418 | background: transparent; 419 | } 420 | 421 | iframe, .fluid-width-video-wrapper { 422 | display: block; 423 | margin: 1.75em 0; 424 | } 425 | 426 | /* When a video is inside the fitvids wrapper, drop the 427 | margin on the iframe, cause it breaks stuff. */ 428 | .fluid-width-video-wrapper iframe { 429 | margin: 0; 430 | } 431 | 432 | 433 | /* ========================================================================== 434 | 3. Utilities - These things get used a lot 435 | ========================================================================== */ 436 | 437 | /* Clears shit */ 438 | .clearfix:before, 439 | .clearfix:after { 440 | content: " "; 441 | display: table; 442 | } 443 | .clearfix:after { clear: both; } 444 | .clearfix { *zoom: 1; } 445 | 446 | /* Hides shit */ 447 | .hidden { 448 | text-indent: -9999px; 449 | visibility: hidden; 450 | display: none; 451 | } 452 | 453 | /* Creates a responsive wrapper that makes our content scale nicely */ 454 | .inner { 455 | position: relative; 456 | width: 80%; 457 | max-width: 710px; 458 | margin: 0 auto; 459 | } 460 | 461 | /* Centres vertically yo. (IE8+) */ 462 | .vertical { 463 | display: table-cell; 464 | vertical-align: middle; 465 | } 466 | 467 | 468 | /* ========================================================================== 469 | 4. General - The main styles for the the theme 470 | ========================================================================== */ 471 | 472 | /* Big cover image on the home page */ 473 | .main-header { 474 | position: relative; 475 | display: table; 476 | width: 100%; 477 | height: 100%; 478 | margin-bottom: 5rem; 479 | text-align: center; 480 | background: #222 no-repeat center center; 481 | background-size: cover; 482 | overflow: hidden; 483 | } 484 | 485 | .main-header .inner { 486 | width: 80%; 487 | } 488 | 489 | .main-nav { 490 | position: relative; 491 | padding: 35px 40px; 492 | margin: 0 0 30px 0; 493 | } 494 | 495 | .main-nav a { 496 | text-decoration: none; 497 | font-family: 'Open Sans', sans-serif; 498 | } 499 | 500 | /* Create a bouncing scroll-down arrow on homepage with cover image */ 501 | .scroll-down { 502 | display: block; 503 | position: absolute; 504 | z-index: 100; 505 | bottom: 45px; 506 | left: 50%; 507 | margin-left: -16px; 508 | width: 34px; 509 | height: 34px; 510 | font-size: 34px; 511 | text-align: center; 512 | text-decoration: none; 513 | color: rgba(255,255,255,0.7); 514 | -webkit-transform: rotate(-90deg); 515 | transform: rotate(-90deg); 516 | -webkit-animation: bounce 4s 2s infinite; 517 | animation: bounce 4s 2s infinite; 518 | } 519 | 520 | /* Stop it bouncing and increase contrast when hovered */ 521 | .scroll-down:hover { 522 | color: #fff; 523 | -webkit-animation: none; 524 | animation: none; 525 | } 526 | 527 | /* Put a semi-opaque radial gradient behind the icon to make it more visible 528 | on photos which happen to have a light background. */ 529 | .home-template .main-header:after { 530 | display: block; 531 | content: " "; 532 | width: 150px; 533 | height: 130px; 534 | border-radius: 100%; 535 | position: absolute; 536 | bottom: 0; 537 | left: 50%; 538 | margin-left: -75px; 539 | background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 100%); 540 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.15)), color-stop(70%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); 541 | background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); 542 | background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%); 543 | } 544 | 545 | /* Hide when there's no cover image or on page2+ */ 546 | .no-cover .scroll-down, 547 | .no-cover.main-header:after, 548 | .archive-template .scroll-down, 549 | .archive-template .main-header:after { 550 | display: none 551 | } 552 | 553 | /* Appears in the top right corner of your home page */ 554 | .blog-logo { 555 | display: block; 556 | float: left; 557 | background: none !important; 558 | border: none !important; 559 | } 560 | 561 | .blog-logo img { 562 | -webkit-box-sizing: border-box; 563 | -moz-box-sizing: border-box; 564 | box-sizing: border-box; 565 | display: block; 566 | height: 38px; 567 | padding: 1px 0 5px 0; 568 | width: auto; 569 | } 570 | 571 | .back-button { 572 | -webkit-box-sizing: border-box; 573 | -moz-box-sizing: border-box; 574 | box-sizing: border-box; 575 | display: inline-block; 576 | float: left; 577 | height: 38px; 578 | padding: 0 15px 0 10px; 579 | border: transparent 1px solid; 580 | color: #9EABB3; 581 | text-align: center; 582 | font-size: 12px; 583 | text-transform: uppercase; 584 | line-height: 35px; 585 | border-radius: 3px; 586 | background: rgba(0,0,0,0.1); 587 | transition: all ease 0.3s; 588 | } 589 | .back-button:before { 590 | position: relative; 591 | bottom: -2px; 592 | font-size: 13px; 593 | line-height: 0; 594 | margin-right: 8px; 595 | } 596 | 597 | .subscribe-button { 598 | -webkit-box-sizing: border-box; 599 | -moz-box-sizing: border-box; 600 | box-sizing: border-box; 601 | display: inline-block; 602 | float: right; 603 | height: 38px; 604 | padding: 0 20px; 605 | border: transparent 1px solid; 606 | color: #9EABB3; 607 | text-align: center; 608 | font-size: 12px; 609 | text-transform: uppercase; 610 | line-height: 35px; 611 | white-space: nowrap; 612 | border-radius: 3px; 613 | background: rgba(0,0,0,0.1); 614 | transition: all ease 0.3s; 615 | } 616 | .subscribe-button:before { 617 | font-size: 9px; 618 | margin-right: 6px; 619 | } 620 | 621 | /* Special styles when overlaid on an image*/ 622 | .main-nav.overlay { 623 | position: absolute; 624 | top: 0; 625 | left: 0; 626 | right: 0; 627 | height: 70px; 628 | border: none; 629 | background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); 630 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0))); 631 | background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); 632 | background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); 633 | } 634 | .no-cover .main-nav.overlay, 635 | .no-cover .back-button, 636 | .no-cover .subscribe-button { 637 | background: none; 638 | } 639 | 640 | .main-nav.overlay a { 641 | color: #fff; 642 | } 643 | 644 | .main-nav.overlay .back-button, 645 | .main-nav.overlay .subscribe-button { 646 | border-color: rgba(255,255,255,0.6); 647 | } 648 | 649 | .main-nav.overlay a:hover { 650 | color: #222; 651 | border-color: #fff; 652 | background: #fff; 653 | transition: all 0.1s ease; 654 | } 655 | 656 | /* Add a border to the buttons on hover */ 657 | .back-button:hover, 658 | .subscribe-button:hover { 659 | border-color: #bfc8cd; 660 | color: #9EABB3; 661 | } 662 | 663 | /* The details of your blog. Defined in ghost/settings/ */ 664 | .page-title { 665 | margin: 10px 0 10px 0; 666 | font-size: 5rem; 667 | letter-spacing: -1px; 668 | font-weight: 700; 669 | font-family: "Open Sans", sans-serif; 670 | color: #fff; 671 | } 672 | 673 | .page-description { 674 | margin: 0; 675 | font-size: 2rem; 676 | line-height: 1.5em; 677 | font-weight: 400; 678 | font-family: "Merriweather", serif; 679 | letter-spacing: 0.01rem; 680 | color: rgba(255,255,255,0.8); 681 | } 682 | 683 | .no-cover.main-header { 684 | min-height: 160px; 685 | max-height: 40%; 686 | background: #f5f8fa; 687 | } 688 | 689 | .no-cover .page-title { 690 | color: rgba(0,0,0,0.8); 691 | } 692 | 693 | .no-cover .page-description { 694 | color: rgba(0,0,0,0.5); 695 | } 696 | 697 | .no-cover .main-nav.overlay .back-button, 698 | .no-cover .main-nav.overlay .subscribe-button { 699 | color: rgba(0,0,0,0.4); 700 | border-color: rgba(0,0,0,0.3); 701 | } 702 | 703 | /* Add subtle load-in animation for content on the home page */ 704 | .home-template .page-title { 705 | -webkit-animation: fade-in-down 0.6s; 706 | animation: fade-in-down 0.6s; 707 | -webkit-animation-delay: 0.2s; 708 | animation-delay: 0.2s; 709 | } 710 | .home-template .page-description { 711 | -webkit-animation: fade-in-down 0.9s; 712 | animation: fade-in-down 0.9s; 713 | -webkit-animation-delay: 0.1s; 714 | animation-delay: 0.1s; 715 | } 716 | 717 | /* Every post, on every page, gets this style on its
tag */ 718 | .post { 719 | position: relative; 720 | width: 80%; 721 | max-width: 710px; 722 | margin: 4rem auto; 723 | padding-bottom: 4rem; 724 | border-bottom: #EBF2F6 1px solid; 725 | word-break: break-word; 726 | hyphens: auto; 727 | } 728 | 729 | /* Add a little circle in the middle of the border-bottom on our .post 730 | just for the lolz and stylepoints. */ 731 | .post:after { 732 | display: block; 733 | content: ""; 734 | width: 7px; 735 | height: 7px; 736 | border: #E7EEF2 1px solid; 737 | position: absolute; 738 | bottom: -5px; 739 | left: 50%; 740 | margin-left: -5px; 741 | background: #FFF; 742 | -webkit-border-radius: 100%; 743 | -moz-border-radius: 100%; 744 | border-radius: 100%; 745 | box-shadow: #FFF 0 0 0 5px; 746 | } 747 | 748 | body:not(.post-template) .post-title { 749 | font-size: 3.6rem; 750 | } 751 | 752 | .post-title a { 753 | text-decoration: none; 754 | } 755 | 756 | .post-excerpt p { 757 | margin: 0; 758 | font-size: 0.9em; 759 | line-height: 1.7em; 760 | } 761 | 762 | .read-more { 763 | text-decoration: none; 764 | } 765 | 766 | .post-meta { 767 | display: block; 768 | margin: 1.75rem 0 0 0; 769 | font-family: "Open Sans", sans-serif; 770 | font-size: 1.5rem; 771 | line-height: 2.2rem; 772 | color: #9EABB3; 773 | } 774 | 775 | .author-thumb { 776 | width: 24px; 777 | height: 24px; 778 | float: left; 779 | margin-right: 9px; 780 | border-radius: 100%; 781 | } 782 | 783 | .post-meta a { 784 | color: #9EABB3; 785 | text-decoration: none; 786 | } 787 | 788 | .post-meta a:hover { 789 | text-decoration: underline; 790 | } 791 | 792 | .user-meta { 793 | position: relative; 794 | padding: 0.3rem 40px 0 100px; 795 | min-height: 77px; 796 | } 797 | 798 | .post-date { 799 | display: inline-block; 800 | margin-left: 8px; 801 | padding-left: 12px; 802 | border-left: #d5dbde 1px solid; 803 | text-transform: uppercase; 804 | font-size: 1.3rem; 805 | white-space: nowrap; 806 | } 807 | 808 | .user-image { 809 | position: absolute; 810 | top: 0; 811 | left: 0; 812 | } 813 | 814 | .user-name { 815 | display: block; 816 | font-weight: 700; 817 | } 818 | 819 | .user-bio { 820 | display: block; 821 | max-width: 440px; 822 | font-size: 1.4rem; 823 | line-height: 1.5em; 824 | } 825 | 826 | .publish-meta { 827 | position: absolute; 828 | top: 0; 829 | right: 0; 830 | padding: 4.3rem 0 4rem 0; 831 | text-align: right; 832 | } 833 | 834 | .publish-heading { 835 | display: block; 836 | font-weight: 700; 837 | } 838 | 839 | .publish-date { 840 | display: block; 841 | font-size: 1.4rem; 842 | line-height: 1.5em; 843 | } 844 | 845 | 846 | /* ========================================================================== 847 | 5. Single Post - When you click on an individual post 848 | ========================================================================== */ 849 | 850 | .post-template .post-header { 851 | margin-bottom: 3.4rem; 852 | } 853 | 854 | .post-template .post-title { 855 | margin-bottom: 0; 856 | } 857 | 858 | .post-template .post-meta { 859 | margin: 0; 860 | } 861 | 862 | .post-template .post-date { 863 | padding: 0; 864 | margin: 0; 865 | border: none; 866 | } 867 | 868 | /* Stop .full-img from creating horizontal scroll - slight hack due to 869 | imperfections with browser width % calculations and rounding */ 870 | .post-template .content { 871 | overflow: hidden; 872 | } 873 | 874 | /* Tweak the .post wrapper style */ 875 | .post-template .post { 876 | margin-top: 0; 877 | border-bottom: none; 878 | padding-bottom: 0; 879 | } 880 | 881 | /* Kill that stylish little circle that was on the border, too */ 882 | .post-template .post:after { 883 | display: none; 884 | } 885 | 886 | /* Keep images centred and within the bounds of the post-width */ 887 | .post-content img { 888 | display: block; 889 | max-width: 100%; 890 | height: auto; 891 | margin: 0 auto; 892 | padding: 0.6em 0; 893 | } 894 | 895 | /* Break out larger images to be wider than the main text column 896 | the class is applied with jQuery */ 897 | .post-content .full-img { 898 | width: 126%; 899 | max-width: none; 900 | margin: 0 -13%; 901 | } 902 | 903 | /* The author credit area after the post */ 904 | .post-footer { 905 | position: relative; 906 | margin: 6rem 0 0 0; 907 | padding: 6rem 0 0 0; 908 | border-top: #EBF2F6 1px solid; 909 | } 910 | 911 | .post-footer h4 { 912 | font-size: 1.8rem; 913 | margin: 0; 914 | } 915 | 916 | .post-footer p { 917 | margin: 1rem 0; 918 | font-size: 1.4rem; 919 | line-height: 1.75em; 920 | } 921 | 922 | /* list of author links - location / url */ 923 | .author-meta { 924 | padding: 0; 925 | margin: 0; 926 | list-style: none; 927 | font-size: 1.4rem; 928 | line-height: 1; 929 | font-style: italic; 930 | color: #9EABB3; 931 | } 932 | 933 | .author-meta a { 934 | color: #9EABB3; 935 | } 936 | .author-meta a:hover { 937 | color: #111; 938 | } 939 | 940 | /* Create some space to the right for the share links */ 941 | .post-footer .author { 942 | margin-right: 180px; 943 | } 944 | 945 | .post-footer h4 a { 946 | color: #2e2e2e; 947 | text-decoration: none; 948 | } 949 | 950 | .post-footer h4 a:hover { 951 | text-decoration: underline; 952 | } 953 | 954 | /* Drop the share links in the space to the right. 955 | Doing it like this means it's easier for the author bio 956 | to be flexible at smaller screen sizes while the share 957 | links remain at a fixed width the whole time */ 958 | .post-footer .share { 959 | position: absolute; 960 | top: 6rem; 961 | right: 0; 962 | width: 140px; 963 | } 964 | 965 | .post-footer .share a { 966 | font-size: 1.8rem; 967 | display: inline-block; 968 | margin: 1rem 1.6rem 1.6rem 0; 969 | color: #BBC7CC; 970 | text-decoration: none; 971 | } 972 | 973 | .post-footer .share a:hover { 974 | color: #50585D; 975 | } 976 | 977 | /* The subscribe icon on the footer */ 978 | .subscribe { 979 | width: 28px; 980 | height: 28px; 981 | position: absolute; 982 | top: -14px; 983 | left: 50%; 984 | margin-left: -15px; 985 | border: #EBF2F6 1px solid; 986 | text-align: center; 987 | line-height: 2.4rem; 988 | border-radius: 50px; 989 | background: #FFF; 990 | transition: box-shadow 0.5s; 991 | } 992 | 993 | /* The RSS icon, inserted via icon font */ 994 | .subscribe:before { 995 | color: #D2DEE3; 996 | font-size: 10px; 997 | position: absolute; 998 | top: 2px; 999 | left: 9px; 1000 | font-weight: 700; 1001 | transition: color 0.5s ease; 1002 | } 1003 | 1004 | /* Add a box shadow to on hover */ 1005 | .subscribe:hover { 1006 | box-shadow: rgba(0,0,0,0.05) 0 0 0 3px; 1007 | transition: box-shadow 0.25s; 1008 | } 1009 | 1010 | .subscribe:hover:before { 1011 | color: #50585D; 1012 | } 1013 | 1014 | /* CSS tooltip saying "Subscribe!" - initially hidden */ 1015 | .tooltip { 1016 | opacity: 0; 1017 | display: block; 1018 | width: 53px; 1019 | padding: 4px 8px 5px 8px; 1020 | position:absolute; 1021 | top: -23px; 1022 | left: -21px; 1023 | color: rgba(255,255,255,0.9); 1024 | font-size: 1.1rem; 1025 | line-height: 1em; 1026 | text-align: center; 1027 | background: #50585D; 1028 | border-radius: 20px; 1029 | box-shadow: 0 1px 4px rgba(0,0,0,0.1); 1030 | transition: opacity 0.3s ease, top 0.3s ease; 1031 | } 1032 | 1033 | /* The little chiclet arrow under the tooltip, pointing down */ 1034 | .tooltip:after { 1035 | content: " "; 1036 | border-width: 5px 5px 0 5px; 1037 | border-style: solid; 1038 | border-color: #50585D transparent; 1039 | display: block; 1040 | position: absolute; 1041 | bottom: -4px; 1042 | left: 50%; 1043 | margin-left: -5px; 1044 | z-index: 220; 1045 | width: 0; 1046 | } 1047 | 1048 | /* On hover, show the tooltip! */ 1049 | .subscribe:hover .tooltip { 1050 | opacity: 1; 1051 | top: -33px; 1052 | } 1053 | 1054 | /* ========================================================================== 1055 | 6. Author profile 1056 | ========================================================================== */ 1057 | 1058 | .post-head.main-header { 1059 | height: 65%; 1060 | min-height: 180px; 1061 | } 1062 | 1063 | .no-cover.post-head.main-header { 1064 | height: 85px; 1065 | min-height: 0; 1066 | margin-bottom: 0; 1067 | background: transparent; 1068 | } 1069 | 1070 | .tag-head.main-header { 1071 | height: 40%; 1072 | min-height: 180px; 1073 | } 1074 | 1075 | .author-head.main-header { 1076 | height: 40%; 1077 | min-height: 180px; 1078 | } 1079 | 1080 | .no-cover.author-head.main-header { 1081 | height: 10%; 1082 | min-height: 100px; 1083 | background: transparent; 1084 | } 1085 | 1086 | .author-profile { 1087 | padding: 0 15px 5rem 15px; 1088 | border-bottom: #EBF2F6 1px solid; 1089 | text-align: center; 1090 | } 1091 | 1092 | /* Add a little circle in the middle of the border-bottom */ 1093 | .author-profile:after { 1094 | display: block; 1095 | content: ""; 1096 | width: 7px; 1097 | height: 7px; 1098 | border: #E7EEF2 1px solid; 1099 | position: absolute; 1100 | bottom: -5px; 1101 | left: 50%; 1102 | margin-left: -5px; 1103 | background: #FFF; 1104 | -webkit-border-radius: 100%; 1105 | -moz-border-radius: 100%; 1106 | border-radius: 100%; 1107 | box-shadow: #FFF 0 0 0 5px; 1108 | } 1109 | 1110 | .author-image { 1111 | -webkit-box-sizing: border-box; 1112 | -moz-box-sizing: border-box; 1113 | box-sizing: border-box; 1114 | display: block; 1115 | position: absolute; 1116 | top: -40px; 1117 | left: 50%; 1118 | margin-left: -40px; 1119 | width: 80px; 1120 | height: 80px; 1121 | border-radius: 100%; 1122 | overflow: hidden; 1123 | padding: 6px; 1124 | background: #fff; 1125 | z-index: 2; 1126 | box-shadow: #E7EEF2 0 0 0 1px; 1127 | } 1128 | 1129 | .author-image .img { 1130 | position: relative; 1131 | display: block; 1132 | width: 100%; 1133 | height: 100%; 1134 | background-size: cover; 1135 | background-position: center center; 1136 | border-radius: 100%; 1137 | } 1138 | 1139 | .author-profile .author-image { 1140 | position: relative; 1141 | left: auto; 1142 | top: auto; 1143 | width: 120px; 1144 | height: 120px; 1145 | padding: 3px; 1146 | margin: -100px auto 0 auto; 1147 | box-shadow: none; 1148 | } 1149 | 1150 | .author-title { 1151 | margin: 1.5rem 0 1rem; 1152 | } 1153 | 1154 | .author-bio { 1155 | font-size: 1.8rem; 1156 | line-height: 1.5em; 1157 | font-weight: 200; 1158 | color: #50585D; 1159 | letter-spacing: 0; 1160 | text-indent: 0; 1161 | } 1162 | 1163 | .author-meta { 1164 | margin: 1.6rem 0; 1165 | } 1166 | /* Location, website, and link */ 1167 | .author-profile .author-meta { 1168 | margin: 2rem 0; 1169 | font-family: "Merriweather", serif; 1170 | letter-spacing: 0.01rem; 1171 | font-size: 1.7rem; 1172 | } 1173 | .author-meta span { 1174 | display: inline-block; 1175 | margin: 0 2rem 1rem 0; 1176 | word-wrap: break-word; 1177 | } 1178 | .author-meta a { 1179 | text-decoration: none; 1180 | } 1181 | 1182 | /* Turn off meta for page2+ to make room for extra 1183 | pagination prev/next links */ 1184 | .archive-template .author-profile .author-meta { 1185 | display: none; 1186 | } 1187 | 1188 | /* ========================================================================== 1189 | 7. Third Party Elements - Embeds from other services 1190 | ========================================================================== */ 1191 | 1192 | /* Github */ 1193 | .gist table { 1194 | margin: 0; 1195 | font-size: 1.4rem; 1196 | } 1197 | .gist .line-number { 1198 | min-width: 25px; 1199 | font-size: 1.1rem; 1200 | } 1201 | 1202 | 1203 | /* ========================================================================== 1204 | 8. Pagination - Tools to let you flick between pages 1205 | ========================================================================== */ 1206 | 1207 | /* The main wrapper for our pagination links */ 1208 | .pagination { 1209 | position: relative; 1210 | width: 80%; 1211 | max-width: 710px; 1212 | margin: 4rem auto; 1213 | font-family: "Open Sans", sans-serif; 1214 | font-size: 1.3rem; 1215 | color: #9EABB3; 1216 | text-align: center; 1217 | } 1218 | 1219 | .pagination a { 1220 | color: #9EABB3; 1221 | transition: all 0.2s ease; 1222 | } 1223 | 1224 | /* Push the previous/next links out to the left/right */ 1225 | .older-posts, 1226 | .newer-posts { 1227 | position: absolute; 1228 | display: inline-block; 1229 | padding: 0 15px; 1230 | border: #bfc8cd 1px solid; 1231 | text-decoration: none; 1232 | border-radius: 4px; 1233 | transition: border ease 0.3s; 1234 | } 1235 | 1236 | .older-posts { 1237 | right: 0; 1238 | } 1239 | 1240 | .page-number { 1241 | display: inline-block; 1242 | padding: 2px 0; 1243 | min-width: 100px; 1244 | } 1245 | 1246 | .newer-posts { 1247 | left: 0; 1248 | } 1249 | 1250 | .older-posts:hover, 1251 | .newer-posts:hover { 1252 | color: #889093; 1253 | border-color: #98a0a4; 1254 | } 1255 | 1256 | .extra-pagination { 1257 | display: none; 1258 | border-bottom: #EBF2F6 1px solid; 1259 | } 1260 | .extra-pagination:after { 1261 | display: block; 1262 | content: ""; 1263 | width: 7px; 1264 | height: 7px; 1265 | border: #E7EEF2 1px solid; 1266 | position: absolute; 1267 | bottom: -5px; 1268 | left: 50%; 1269 | margin-left: -5px; 1270 | background: #FFF; 1271 | -webkit-border-radius: 100%; 1272 | -moz-border-radius: 100%; 1273 | border-radius: 100%; 1274 | box-shadow: #FFF 0 0 0 5px; 1275 | } 1276 | .extra-pagination .pagination { 1277 | width: auto; 1278 | } 1279 | 1280 | /* On page2+ make all the headers smaller */ 1281 | .archive-template .main-header { 1282 | max-height: 30%; 1283 | } 1284 | 1285 | /* On page2+ show extra pagination controls at the top of post list */ 1286 | .archive-template .extra-pagination { 1287 | display: block; 1288 | } 1289 | 1290 | 1291 | /* ========================================================================== 1292 | 9. Footer - The bottom of every page 1293 | ========================================================================== */ 1294 | 1295 | .site-footer { 1296 | position: relative; 1297 | margin: 8rem 0 0 0; 1298 | padding: 0.5rem 15px; 1299 | border-top: #EBF2F6 1px solid; 1300 | font-family: "Open Sans", sans-serif; 1301 | font-size: 1rem; 1302 | line-height: 1.75em; 1303 | color: #BBC7CC; 1304 | } 1305 | 1306 | .site-footer a { 1307 | color: #BBC7CC; 1308 | text-decoration: none; 1309 | font-weight: bold; 1310 | } 1311 | 1312 | .site-footer a:hover { 1313 | color: #50585D; 1314 | } 1315 | 1316 | .poweredby { 1317 | display: block; 1318 | width: 45%; 1319 | float: right; 1320 | text-align: right; 1321 | } 1322 | 1323 | .copyright { 1324 | display: block; 1325 | width: 45%; 1326 | float: left; 1327 | } 1328 | 1329 | 1330 | /* ========================================================================== 1331 | 10. Media Queries - Smaller than 900px 1332 | ========================================================================== */ 1333 | 1334 | @media only screen and (max-width: 900px) { 1335 | 1336 | .main-nav { 1337 | padding: 15px; 1338 | } 1339 | 1340 | blockquote { 1341 | margin-left: 0; 1342 | } 1343 | 1344 | .main-header { 1345 | -webkit-box-sizing: border-box; 1346 | -moz-box-sizing: border-box; 1347 | box-sizing: border-box; 1348 | height: auto; 1349 | min-height: 240px; 1350 | height: 60%; 1351 | padding: 15% 0; 1352 | } 1353 | 1354 | .scroll-down, 1355 | .home-template .main-header:after { display: none; } 1356 | 1357 | .archive-template .main-header { 1358 | min-height: 180px; 1359 | padding: 10% 0; 1360 | } 1361 | 1362 | .blog-logo img { 1363 | padding: 4px 0; 1364 | } 1365 | 1366 | .page-title { 1367 | font-size: 4rem; 1368 | letter-spacing: -1px; 1369 | } 1370 | 1371 | .page-description { 1372 | font-size: 1.8rem; 1373 | line-height: 1.5em; 1374 | } 1375 | 1376 | .post { 1377 | font-size: 0.95em 1378 | } 1379 | 1380 | body:not(.post-template) .post-title { 1381 | font-size: 3.2rem; 1382 | } 1383 | 1384 | hr { 1385 | margin: 2.4em 0; 1386 | } 1387 | 1388 | ol, ul { 1389 | padding-left: 2em; 1390 | } 1391 | 1392 | h1 { 1393 | font-size: 4.5rem; 1394 | text-indent: -2px; 1395 | } 1396 | 1397 | h2 { 1398 | font-size: 3.6rem; 1399 | } 1400 | 1401 | h3 { 1402 | font-size: 3.1rem; 1403 | } 1404 | 1405 | h4 { 1406 | font-size: 2.5rem; 1407 | } 1408 | 1409 | h5 { 1410 | font-size: 2.2rem; 1411 | } 1412 | 1413 | h6 { 1414 | font-size: 1.8rem; 1415 | } 1416 | 1417 | .author-profile { 1418 | padding-bottom: 4rem; 1419 | } 1420 | 1421 | .author-profile .author-bio { 1422 | font-size: 1.6rem; 1423 | } 1424 | 1425 | .author-meta span { 1426 | display: block; 1427 | margin: 1.5rem 0; 1428 | } 1429 | .author-profile .author-meta span { 1430 | font-size: 1.6rem; 1431 | } 1432 | 1433 | .post-head.main-header { 1434 | height:45%; 1435 | } 1436 | 1437 | .tag-head.main-header, 1438 | .author-head.main-header { 1439 | height: 30%; 1440 | } 1441 | 1442 | .no-cover.post-head.main-header { 1443 | height: 55px; 1444 | padding: 0; 1445 | } 1446 | 1447 | .no-cover.author-head.main-header { 1448 | padding: 0; 1449 | } 1450 | 1451 | } 1452 | 1453 | 1454 | /* ========================================================================== 1455 | 11. Media Queries - Smaller than 500px 1456 | ========================================================================== */ 1457 | 1458 | @media only screen and (max-width: 500px) { 1459 | 1460 | .main-header { 1461 | margin-bottom: 15px; 1462 | height: 40%; 1463 | } 1464 | 1465 | .no-cover.main-header { 1466 | height: 30%; 1467 | } 1468 | 1469 | .archive-template .main-header { 1470 | max-height: 20%; 1471 | min-height: 160px; 1472 | padding: 10% 0; 1473 | } 1474 | 1475 | .main-nav { 1476 | padding: 0; 1477 | margin-bottom: 2rem; 1478 | border-bottom: #e0e4e7 1px solid; 1479 | } 1480 | 1481 | .blog-logo { 1482 | padding: 10px 10px; 1483 | } 1484 | 1485 | .blog-logo img { 1486 | height: 26px; 1487 | } 1488 | 1489 | .back-button, 1490 | .subscribe-button { 1491 | height: 44px; 1492 | line-height: 41px; 1493 | border-radius: 0; 1494 | color: #2e2e2e; 1495 | background: transparent; 1496 | } 1497 | .back-button:hover, 1498 | .subscribe-button:hover { 1499 | border-color: #ebeef0; 1500 | color: #2e2e2e; 1501 | background: #ebeef0; 1502 | } 1503 | 1504 | .back-button { 1505 | padding: 0 15px 0 10px; 1506 | } 1507 | 1508 | .subscribe-button { 1509 | padding: 0 12px; 1510 | } 1511 | 1512 | .main-nav.overlay a:hover { 1513 | color: #fff; 1514 | border-color: transparent; 1515 | background: transparent; 1516 | } 1517 | 1518 | .no-cover .main-nav.overlay { 1519 | background: none; 1520 | } 1521 | .no-cover .main-nav.overlay .back-button, 1522 | .no-cover .main-nav.overlay .subscribe-button { 1523 | border: none; 1524 | } 1525 | 1526 | .main-nav.overlay .back-button, 1527 | .main-nav.overlay .subscribe-button { 1528 | border-color: transparent; 1529 | } 1530 | 1531 | .blog-logo img { 1532 | max-height: 80px; 1533 | } 1534 | 1535 | .inner, 1536 | .pagination { 1537 | width: auto; 1538 | margin: 2rem auto; 1539 | } 1540 | 1541 | .post { 1542 | width: auto; 1543 | margin-top: 2rem; 1544 | margin-bottom: 2rem; 1545 | margin-left: 16px; 1546 | margin-right: 16px; 1547 | padding-bottom: 2rem; 1548 | line-height: 1.65em; 1549 | } 1550 | 1551 | .post-date { 1552 | display: none; 1553 | } 1554 | 1555 | .post-template .post-header { 1556 | margin-bottom: 2rem; 1557 | } 1558 | 1559 | .post-template .post-date { 1560 | display: inline-block; 1561 | } 1562 | 1563 | hr { 1564 | margin: 1.75em 0; 1565 | } 1566 | 1567 | p, ul, ol, dl { 1568 | font-size: 0.95em; 1569 | margin: 0 0 2.5rem 0; 1570 | } 1571 | 1572 | .page-title { 1573 | font-size: 3rem; 1574 | } 1575 | 1576 | .post-excerpt p { 1577 | font-size: 0.85em; 1578 | } 1579 | 1580 | .page-description { 1581 | font-size: 1.6rem; 1582 | } 1583 | 1584 | h1, h2, h3, 1585 | h4, h5, h6 { 1586 | margin: 0 0 0.3em 0; 1587 | } 1588 | 1589 | h1 { 1590 | font-size: 2.8rem; 1591 | letter-spacing: -1px; 1592 | } 1593 | 1594 | h2 { 1595 | font-size: 2.4rem; 1596 | letter-spacing: 0; 1597 | } 1598 | 1599 | h3 { 1600 | font-size: 2.1rem; 1601 | } 1602 | 1603 | h4 { 1604 | font-size: 1.9rem; 1605 | } 1606 | 1607 | h5 { 1608 | font-size: 1.8rem; 1609 | } 1610 | 1611 | h6 { 1612 | font-size: 1.8rem; 1613 | } 1614 | 1615 | body:not(.post-template) .post-title { 1616 | font-size: 2.5rem; 1617 | } 1618 | 1619 | .post-template .post { 1620 | padding-bottom: 0; 1621 | margin-bottom: 0; 1622 | } 1623 | 1624 | .post-template .site-footer { 1625 | margin-top: 0; 1626 | } 1627 | 1628 | .post-content img { 1629 | padding: 0; 1630 | } 1631 | 1632 | .post-content .full-img { 1633 | width: auto; 1634 | width: calc(100% + 32px); /* expand with to image + margins */ 1635 | margin: 0 -16px; /* get rid of margins */ 1636 | min-width: 0; 1637 | max-width: 112%; /* fallback when calc doesn't work */ 1638 | } 1639 | 1640 | .post-meta { 1641 | font-size: 1.3rem; 1642 | margin-top: 1rem; 1643 | } 1644 | 1645 | .post-footer { 1646 | padding: 5rem 0 3rem 0; 1647 | text-align: center; 1648 | } 1649 | 1650 | .post-footer .author { 1651 | margin: 0 0 2rem 0; 1652 | padding: 0 0 1.6rem 0; 1653 | border-bottom: #EBF2F6 1px dashed; 1654 | } 1655 | 1656 | .post-footer .share { 1657 | position: static; 1658 | width: auto; 1659 | } 1660 | 1661 | .post-footer .share a { 1662 | margin: 1.4rem 0.8rem 0 0.8rem; 1663 | } 1664 | 1665 | .author-meta li { 1666 | float: none; 1667 | margin: 0; 1668 | line-height: 1.75em; 1669 | } 1670 | 1671 | .author-meta li:before { 1672 | display: none; 1673 | } 1674 | 1675 | .older-posts, 1676 | .newer-posts { 1677 | position: static; 1678 | margin: 10px 0; 1679 | } 1680 | 1681 | .page-number { 1682 | display: block; 1683 | } 1684 | 1685 | .site-footer { 1686 | margin-top: 3rem; 1687 | } 1688 | 1689 | .author-profile { 1690 | padding-bottom: 2rem; 1691 | } 1692 | 1693 | .post-head.main-header { 1694 | height: 30%; 1695 | } 1696 | 1697 | .tag-head.main-header, 1698 | .author-head.main-header { 1699 | height: 20%; 1700 | } 1701 | 1702 | .author-profile .author-image { 1703 | margin-top: -70px; 1704 | } 1705 | 1706 | .author-profile .author-meta span { 1707 | font-size: 1.4rem; 1708 | } 1709 | 1710 | .archive-template .main-header .page-description { 1711 | display: none; 1712 | } 1713 | 1714 | } 1715 | 1716 | 1717 | /* ========================================================================== 1718 | 12. Animations 1719 | ========================================================================== */ 1720 | 1721 | /* Used to fade in title/desc on the home page */ 1722 | @-webkit-keyframes fade-in-down { 1723 | 0% { 1724 | opacity: 0; 1725 | -webkit-transform: translateY(-10px); 1726 | transform: translateY(-10px); 1727 | } 1728 | 100% { 1729 | opacity: 1; 1730 | -webkit-transform: translateY(0); 1731 | transform: translateY(0); 1732 | } 1733 | } 1734 | @keyframes fade-in-down { 1735 | 0% { 1736 | opacity: 0; 1737 | -webkit-transform: translateY(-10px); 1738 | transform: translateY(-10px); 1739 | } 1740 | 100% { 1741 | opacity: 1; 1742 | -webkit-transform: translateY(0); 1743 | transform: translateY(0); 1744 | } 1745 | } 1746 | 1747 | /* Used to bounce .scroll-down on home page */ 1748 | @-webkit-keyframes bounce { 1749 | 0%, 10%, 25%, 40%, 50% { 1750 | -webkit-transform: translateY(0) rotate(-90deg); 1751 | transform: translateY(0) rotate(-90deg); 1752 | } 1753 | 20% { 1754 | -webkit-transform: translateY(-10px) rotate(-90deg); 1755 | transform: translateY(-10px) rotate(-90deg); 1756 | } 1757 | 30% { 1758 | -webkit-transform: translateY(-5px) rotate(-90deg); 1759 | transform: translateY(-5px) rotate(-90deg); 1760 | } 1761 | } 1762 | @keyframes bounce { 1763 | 0%, 20%, 50%, 80%, 100% { 1764 | -webkit-transform: translateY(0) rotate(-90deg); 1765 | transform: translateY(0) rotate(-90deg); 1766 | } 1767 | 40% { 1768 | -webkit-transform: translateY(-10px) rotate(-90deg); 1769 | transform: translateY(-10px) rotate(-90deg); 1770 | } 1771 | 60% { 1772 | -webkit-transform: translateY(-5px) rotate(-90deg); 1773 | transform: translateY(-5px) rotate(-90deg); 1774 | } 1775 | } 1776 | 1777 | 1778 | /* ========================================================================== 1779 | End of file. Animations should be the last thing here. Do not add stuff 1780 | below this point, or it will probably fuck everything up. 1781 | ========================================================================== */ 1782 | --------------------------------------------------------------------------------