├── LICENSE ├── README.md ├── _config.yml ├── layout ├── _widget │ ├── archive.ejs │ ├── category.ejs │ ├── recent_posts.ejs │ ├── tag.ejs │ └── tagcloud.ejs ├── archive.ejs ├── casper │ ├── after_all.ejs │ ├── footer.ejs │ ├── head.ejs │ ├── header.ejs │ ├── index.ejs │ ├── post.ejs │ ├── post │ │ ├── author.ejs │ │ ├── comments.ejs │ │ ├── meta.ejs │ │ ├── navigation.ejs │ │ └── share.ejs │ └── sidebar.ejs ├── category.ejs ├── index.ejs ├── layout.ejs ├── page.ejs ├── post.ejs └── tag.ejs ├── source ├── css │ ├── normalize.css │ ├── screen.css │ └── style.css ├── fonts │ ├── icons.eot │ ├── icons.svg │ ├── icons.ttf │ └── icons.woff ├── img │ ├── icons-demo-nav.png │ ├── icons-demo-nav.svg │ ├── img-bg.jpg │ └── logo.svg └── js │ ├── index.js │ ├── jquery.fitvids.js │ └── menu.js ├── theme-p1.png └── theme.gif /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Moretwo mabao 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # mabao-theme for hexo 2 | ![](https://raw.githubusercontent.com/moretwo/hexo-theme/master/theme.gif) 3 | 4 | [Ghost moretwo] hexo port, a really minimalist theme. 5 | Preview: [live demo](http://moretwo.github.io) 6 | 7 | ## Installation 8 | > 基于hexo 静态模版发布系统，fork hexo-theme-casper 9 | 10 | ### update 11 | - 添加导航Nav 12 | - 添加字体图标 13 | - 修改样式style 14 | - 改进theme 15 | 16 | ### Install 17 | 18 | ``` bash 19 | $ git clone https://github.com/moretwo/hexo-theme.git 20 | ``` 21 | 22 | ### Enable 23 | ``` 24 | myblog/themes/mabao-theme 25 | ``` 26 | Modify `theme` setting in `_config.yml` to `casper`. 27 | 28 | 29 | ## Configuration 30 | 31 | ``` 32 | # config 33 | cover: /img/img-bg.jpg 34 | logo: /img/logo.svg 35 | bio: 作为挨踢业的伪设计狮伪技术牛 搬过砖也种过地：爱看、爱听、爱玩儿、爱折腾、机械水电、泥瓦木匠啥都来 36 | 37 | # Content 38 | excerpt_link: Read More 39 | 40 | # Header nav 41 | menu: 42 | Home: / 43 | Archive: /archive 44 | Images: /images 45 | Wiki: /wiki 46 | Favorites: /favorites 47 | Contact: /contact 48 | 49 | ##Private: /private 50 | ##nav.fonticon.css 51 | navclass: 52 | Home: icon-home 53 | Archive: icon-news 54 | Images: icon-image 55 | Wiki: icon-wiki 56 | Favorites: icon-Favorites 57 | Contact: icon-mail 58 | 59 | ##Private: icon-lock 60 | rss: /atom.xml 61 | # Miscellaneous 62 | google_analytics: 63 | favicon: /favicon.png 64 | twitter: 65 | google_plus: 66 | fb_admins: 67 | fb_app_id: 68 | ``` 69 | 70 | 71 | 72 | # From https://github.com/hexojs/hexo/ 73 | ## More Information 74 | 75 | - Read the [documentation](http://hexo.io/) 76 | - Find solutions in [troubleshooting](http://hexo.io/docs/troubleshooting.html) 77 | - Join discussion on [Google Group](https://groups.google.com/group/hexo) 78 | - See the [plugin list](https://github.com/hexojs/hexo/wiki/Plugins) and the [theme list](https://github.com/hexojs/hexo/wiki/Themes) on wiki 79 | - Follow [@hexojs](https://twitter.com/hexojs) for latest news 80 | 81 | ## License 82 | MIT 83 | 84 | [Ghost]: http://github.com/tryghost/ghost/ 85 | [Ghost Casper]: https://github.com/moretwo/hexo-theme 86 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # config 2 | cover: /img/img-bg.jpg 3 | logo: /img/logo.svg 4 | bio: 作为挨踢业的伪设计狮伪技术牛 搬过砖也种过地：爱看、爱听、爱玩儿、爱折腾、机械水电、泥瓦木匠啥都来 5 | 6 | # Content 7 | excerpt_link: Read More 8 | 9 | # Header nav 10 | menu: 11 | Home: / 12 | Archive: /archive 13 | Images: /images 14 | Wiki: /wiki/2014-10-28-wiki/ 15 | Favorites: /favorites 16 | Contact: /about/2014-09-11-mabao/ 17 | 18 | ##Private: /private 19 | 20 | # nav.fonticon.css 21 | navclass: 22 | Home: icon-home 23 | Archive: icon-news 24 | Images: icon-image 25 | Wiki: icon-wiki 26 | Favorites: icon-Favorites 27 | Contact: icon-mail 28 | 29 | ##Private: icon-lock 30 | rss: /atom.xml 31 | 32 | # Miscellaneous 33 | google_analytics: 34 | favicon: /favicon.png 35 | twitter: 36 | google_plus: 37 | fb_admins: 38 | fb_app_id: 39 | -------------------------------------------------------------------------------- /layout/_widget/archive.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.posts.length){ %> 2 |
3 |

Archives

4 |
5 | <%- list_archives() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /layout/_widget/category.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.categories.length){ %> 2 |
3 |

Categories

4 |
5 | <%- list_categories() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /layout/_widget/recent_posts.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.posts.length){ %> 2 |
3 |

Recents

4 |
5 | 12 |
13 |
14 | <% } %> -------------------------------------------------------------------------------- /layout/_widget/tag.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.tags.length){ %> 2 |
3 |

Tags

4 |
5 | <%- list_tags() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /layout/_widget/tagcloud.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.tags.length){ %> 2 |
3 |

Tag Cloud

4 |
5 | <%- tagcloud() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /layout/archive.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('casper/index') %> 2 | -------------------------------------------------------------------------------- /layout/casper/after_all.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <% if (theme.google_analytics) { %> 7 | 18 | <% } %> 19 | <% if (config.disqus_shortname){ %> 20 | 31 | <% } %> 32 | <% if (theme.fancybox){ %> 33 | 34 | 35 | 51 | <% } %> 52 | -------------------------------------------------------------------------------- /layout/casper/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /layout/casper/head.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | var title = page.title; 3 | 4 | if (is_archive()){ 5 | title = 'Archives'; 6 | 7 | if (is_month()){ 8 | title += ': ' + page.year + '/' + page.month; 9 | } else if (is_year()){ 10 | title += ': ' + page.year; 11 | } 12 | } else if (is_category()){ 13 | title = 'Category: ' + page.category; 14 | } else if (is_tag()){ 15 | title = 'Tag: ' + page.tag; 16 | } 17 | %> 18 | 19 | 20 | 21 | <% if (title){ %><%= title %> | <% } %><%= config.title %> 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | <% if (config.rss) { %> 31 | 32 | <% } %> 33 | <% if (config.feed && config.feed.type == 'atom') { %> 34 | 35 | <% } %> 36 | <% if (config.feed && config.feed.type == 'rss') { %> 37 | 38 | <% } %> 39 | 40 | <% if (config.cloudfrontanalytics) { %> 41 | 45 | <% } %> 46 | 47 | -------------------------------------------------------------------------------- /layout/casper/header.ejs: -------------------------------------------------------------------------------- 1 |
style="background: #24282b url(<%- theme.cover %>) 0 -20%" <% } %>> 2 |
3 |
4 | <% if (theme.logo) { %> <% } %> 5 |

<%- config.title %>

6 |

<%- config.subtitle %>

7 |
8 |
9 |
10 | -------------------------------------------------------------------------------- /layout/casper/index.ejs: -------------------------------------------------------------------------------- 1 | 2 |
3 | <% page.posts.each(function(post) { %> 4 |
5 |
6 | <%- partial('post/meta', {post: post}) %> 7 |

<%- post.title %>

8 |
9 |
10 |

11 | <% if (post.excerpt){ %> 12 | <%- post.excerpt %> 13 | <% } else { %> 14 | <%- post.content.replace(/<(?:.|\n)*?>/gm, '').substr(0, 220) %> 15 | <% } %> 16 |

17 | <% if (theme.excerpt_link) { %> 18 |

19 | <%= theme.excerpt_link %>... 20 |

21 | <% } %> 22 |
23 |
24 | <% }); %> 25 | 30 |
31 | -------------------------------------------------------------------------------- /layout/casper/post.ejs: -------------------------------------------------------------------------------- 1 | 2 | <% permalink = config.url + config.root + post.path %> 3 |
4 |
5 | <%- partial('post/meta') %> 6 |

<%- post.title %>

7 |
8 | <%- post.content %> 9 |
10 | 14 |
15 | <%- partial('post/navigation') %> 16 | <%- partial('post/comments') %> 17 |
18 | -------------------------------------------------------------------------------- /layout/casper/post/author.ejs: -------------------------------------------------------------------------------- 1 |
2 |

<%- config.author %>

3 |

<%- theme.bio %>

4 |
-------------------------------------------------------------------------------- /layout/casper/post/comments.ejs: -------------------------------------------------------------------------------- 1 |
2 |

Comments

3 | <% if(config.disqus_shortname) { %> 4 |
5 | 6 |
7 | <% } %> 8 |
9 | -------------------------------------------------------------------------------- /layout/casper/post/meta.ejs: -------------------------------------------------------------------------------- 1 | 2 | 5 | <% if (post.tags && post.tags.length){ %> 6 | <% count = post.tags.length %> 7 | | <% post.tags.forEach(function(tag, index) { %> 8 | <%= tag.name %><% if (count !== index+1) { %>,<% } %> 9 | <% }); %> 10 | <% } %> 11 | -------------------------------------------------------------------------------- /layout/casper/post/navigation.ejs: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /layout/casper/post/share.ejs: -------------------------------------------------------------------------------- 1 |
2 |

Share this post

3 | 4 | 5 | 6 | 8 | 9 | 10 | 12 | 13 | 14 | 16 | 17 | 18 |
19 | -------------------------------------------------------------------------------- /layout/casper/sidebar.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layout/category.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('casper/index') %> 2 | -------------------------------------------------------------------------------- /layout/index.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('casper/index') %> 2 | -------------------------------------------------------------------------------- /layout/layout.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- partial('casper/head') %> 4 | 9 | 10 |
11 |
12 | 13 |
14 | 15 | <%- partial('casper/header') %> 16 | <%- body %> 17 | <%- partial('casper/footer') %> 18 | <%- partial('casper/after_all') %> 19 | 20 |
21 |
22 | 23 | 28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /layout/page.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('casper/post', {post: page}) %> 2 | -------------------------------------------------------------------------------- /layout/post.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('casper/post', {post: page}) %> 2 | -------------------------------------------------------------------------------- /layout/tag.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('casper/index') %> 2 | -------------------------------------------------------------------------------- /source/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 { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address `[hidden]` styling not present in IE 8/9. 48 | * Hide the `template` element in IE, Safari, and Firefox < 22. 49 | */ 50 | 51 | [hidden], 52 | template { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /** 61 | * 1. Set default font family to sans-serif. 62 | * 2. Prevent iOS text size adjust after orientation change, without disabling 63 | * user zoom. 64 | */ 65 | 66 | html { 67 | font-family: sans-serif; /* 1 */ 68 | -ms-text-size-adjust: 100%; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | } 71 | 72 | /** 73 | * Remove default margin. 74 | */ 75 | 76 | body { 77 | margin: 0; 78 | } 79 | 80 | /* ========================================================================== 81 | Links 82 | ========================================================================== */ 83 | 84 | /** 85 | * Remove the gray background color from active links in IE 10. 86 | */ 87 | 88 | a { 89 | background: transparent; 90 | } 91 | 92 | /** 93 | * Address `outline` inconsistency between Chrome and other browsers. 94 | */ 95 | 96 | a:focus { 97 | outline: thin dotted; 98 | } 99 | 100 | /** 101 | * Improve readability when focused and also mouse hovered in all browsers. 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline: 0; 107 | } 108 | 109 | /* ========================================================================== 110 | Typography 111 | ========================================================================== */ 112 | 113 | /** 114 | * Address variable `h1` font-size and margin within `section` and `article` 115 | * contexts in Firefox 4+, Safari 5, and Chrome. 116 | */ 117 | 118 | h1 { 119 | font-size: 2em; 120 | margin: 0.67em 0; 121 | } 122 | 123 | /** 124 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 125 | */ 126 | 127 | abbr[title] { 128 | border-bottom: 1px dotted; 129 | } 130 | 131 | /** 132 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: bold; 138 | } 139 | 140 | /** 141 | * Address styling not present in Safari 5 and Chrome. 142 | */ 143 | 144 | dfn { 145 | font-style: italic; 146 | } 147 | 148 | /** 149 | * Address differences between Firefox and other browsers. 150 | */ 151 | 152 | hr { 153 | -moz-box-sizing: content-box; 154 | box-sizing: content-box; 155 | height: 0; 156 | } 157 | 158 | /** 159 | * Address styling not present in IE 8/9. 160 | */ 161 | 162 | mark { 163 | background: #ff0; 164 | color: #000; 165 | } 166 | 167 | /** 168 | * Correct font family set oddly in Safari 5 and Chrome. 169 | */ 170 | 171 | code, 172 | kbd, 173 | pre, 174 | samp { 175 | font-family: monospace, serif; 176 | font-size: 1em; 177 | } 178 | 179 | /** 180 | * Improve readability of pre-formatted text in all browsers. 181 | */ 182 | 183 | pre { 184 | white-space: pre-wrap; 185 | } 186 | 187 | /** 188 | * Set consistent quote types. 189 | */ 190 | 191 | q { 192 | quotes: "\201C" "\201D" "\2018" "\2019"; 193 | } 194 | 195 | /** 196 | * Address inconsistent and variable font size in all browsers. 197 | */ 198 | 199 | small { 200 | font-size: 80%; 201 | } 202 | 203 | /** 204 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 205 | */ 206 | 207 | sub, 208 | sup { 209 | font-size: 75%; 210 | line-height: 0; 211 | position: relative; 212 | vertical-align: baseline; 213 | } 214 | 215 | sup { 216 | top: -0.5em; 217 | } 218 | 219 | sub { 220 | bottom: -0.25em; 221 | } 222 | 223 | /* ========================================================================== 224 | Embedded content 225 | ========================================================================== */ 226 | 227 | /** 228 | * Remove border when inside `a` element in IE 8/9. 229 | */ 230 | 231 | img { 232 | border: 0; 233 | } 234 | 235 | /** 236 | * Correct overflow displayed oddly in IE 9. 237 | */ 238 | 239 | svg:not(:root) { 240 | overflow: hidden; 241 | } 242 | 243 | /* ========================================================================== 244 | Figures 245 | ========================================================================== */ 246 | 247 | /** 248 | * Address margin not present in IE 8/9 and Safari 5. 249 | */ 250 | 251 | figure { 252 | margin: 0; 253 | } 254 | 255 | /* ========================================================================== 256 | Forms 257 | ========================================================================== */ 258 | 259 | /** 260 | * Define consistent border, margin, and padding. 261 | */ 262 | 263 | fieldset { 264 | border: 1px solid #c0c0c0; 265 | margin: 0 2px; 266 | padding: 0.35em 0.625em 0.75em; 267 | } 268 | 269 | /** 270 | * 1. Correct `color` not being inherited in IE 8/9. 271 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 272 | */ 273 | 274 | legend { 275 | border: 0; /* 1 */ 276 | padding: 0; /* 2 */ 277 | } 278 | 279 | /** 280 | * 1. Correct font family not being inherited in all browsers. 281 | * 2. Correct font size not being inherited in all browsers. 282 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 283 | */ 284 | 285 | button, 286 | input, 287 | select, 288 | textarea { 289 | font-family: inherit; /* 1 */ 290 | font-size: 100%; /* 2 */ 291 | margin: 0; /* 3 */ 292 | } 293 | 294 | /** 295 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 296 | * the UA stylesheet. 297 | */ 298 | 299 | button, 300 | input { 301 | line-height: normal; 302 | } 303 | 304 | /** 305 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 306 | * All other form control elements do not inherit `text-transform` values. 307 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 308 | * Correct `select` style inheritance in Firefox 4+ and Opera. 309 | */ 310 | 311 | button, 312 | select { 313 | text-transform: none; 314 | } 315 | 316 | /** 317 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 318 | * and `video` controls. 319 | * 2. Correct inability to style clickable `input` types in iOS. 320 | * 3. Improve usability and consistency of cursor style between image-type 321 | * `input` and others. 322 | */ 323 | 324 | button, 325 | html input[type="button"], /* 1 */ 326 | input[type="reset"], 327 | input[type="submit"] { 328 | -webkit-appearance: button; /* 2 */ 329 | cursor: pointer; /* 3 */ 330 | } 331 | 332 | /** 333 | * Re-set default cursor for disabled elements. 334 | */ 335 | 336 | button[disabled], 337 | html input[disabled] { 338 | cursor: default; 339 | } 340 | 341 | /** 342 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 343 | * 2. Remove excess padding in IE 8/9/10. 344 | */ 345 | 346 | input[type="checkbox"], 347 | input[type="radio"] { 348 | box-sizing: border-box; /* 1 */ 349 | padding: 0; /* 2 */ 350 | } 351 | 352 | /** 353 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 354 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 355 | * (include `-moz` to future-proof). 356 | */ 357 | 358 | input[type="search"] { 359 | -webkit-appearance: textfield; /* 1 */ 360 | -moz-box-sizing: content-box; 361 | -webkit-box-sizing: content-box; /* 2 */ 362 | box-sizing: content-box; 363 | } 364 | 365 | /** 366 | * Remove inner padding and search cancel button in Safari 5 and Chrome 367 | * on OS X. 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Remove inner padding and border in Firefox 4+. 377 | */ 378 | 379 | button::-moz-focus-inner, 380 | input::-moz-focus-inner { 381 | border: 0; 382 | padding: 0; 383 | } 384 | 385 | /** 386 | * 1. Remove default vertical scrollbar in IE 8/9. 387 | * 2. Improve readability and alignment in all browsers. 388 | */ 389 | 390 | textarea { 391 | overflow: auto; /* 1 */ 392 | vertical-align: top; /* 2 */ 393 | } 394 | 395 | /* ========================================================================== 396 | Tables 397 | ========================================================================== */ 398 | 399 | /** 400 | * Remove most spacing between table cells. 401 | */ 402 | 403 | table { 404 | border-collapse: collapse; 405 | border-spacing: 0; 406 | } 407 | -------------------------------------------------------------------------------- /source/css/screen.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | Table of Contents 3 | ========================================================================== */ 4 | 5 | /* 6 | 7 | 0. Includes 8 | 1. Icons 9 | 2. General 10 | 3. Utilities 11 | 4. General 12 | 5. Single Post 13 | 6. Third Party Elements 14 | 7. Pagination 15 | 8. Footer 16 | 9. Media Queries (Tablet) 17 | 10. Media Queries (Mobile) 18 | 19 | */ 20 | 21 | /* ========================================================================== 22 | 0. Includes - Ground zero 23 | ========================================================================== */ 24 | @import url(normalize.css); 25 | /* ========================================================================== 26 | 1. Icons - Sets up the icon font and respective classes 27 | ========================================================================== */ 28 | 29 | /* Import the font file with the icons in it */ 30 | @font-face { font-family: 'icons'; src: url('../fonts/icons.eot'); src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'), url('../fonts/icons.woff') format('woff'), url('../fonts/icons.ttf') format('truetype'), url('../fonts/icons.svg#icons') format('svg'); font-weight: normal; font-style: normal; } 31 | /* Apply these base styles to all icons */ 32 | .icon-ghost:before, .icon-feed:before, .icon-twitter:before, .icon-google-plus:before, .icon-facebook:before, .icon-sina-weibo{ font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; text-decoration: none; } 33 | /* Each icon is created by inserting the corret character into the 34 | content of the :before pseudo element. Like a boss. */ 35 | .icon-ghost:before { content: "\e000"; } 36 | .icon-feed:before { content: "\e631"; } 37 | .icon-twitter:before { content: "\e630"; font-size: 1.1em; } 38 | .icon-google-plus:before { content: "\e62d"; } 39 | .icon-facebook:before { content: "\e62f"; } 40 | .icon-sina-weibo:before { content: "\e666";font-size: 1.1em; } 41 | /* ========================================================================== 42 | 2. General - Setting up some base styles 43 | ========================================================================== */ 44 | 45 | html { height: 100%; max-height: 100%; font-size: 64%; } 46 | body { height: 100%; max-height: 100%; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'SimSun', 'Droid Sans Fallback', sans-serif; font-size: 1.7rem; line-height: 1.6em; color: #3A4145; background: white; } 47 | 48 | ::-moz-selection { 49 | color: #222; 50 | background: #D6EDFF; 51 | text-shadow: none; 52 | } 53 | ::selection { color: #fff; background: #FF4F93; text-shadow: none; } 54 | h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; line-height: 1; margin-top: 0; } 55 | h1 { font-size: 4.8rem; line-height: 1.2em; letter-spacing: -2px; text-indent: -3px; } 56 | h2 { font-size: 4.2rem; line-height: 1.2em; letter-spacing: -1px; text-indent: -2px; } 57 | h3 { font-size: 3.2rem; } 58 | h4 { font-size: 2.4rem; } 59 | h5 { font-size: 1.8rem; } 60 | h6 { font-size: 1.4rem; } 61 | a { color: #1F85C8; text-decoration: none; transition: color ease 0.3s; outline: none; } 62 | a:hover, a:focus { color: #3498DB; outline: none; } 63 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #50585D; } 64 | p, ul, ol, dl { margin: 1.6em 0; } 65 | ol ol, ul ul, ul ol, ol ul { margin: 0.4em 0; } 66 | dl dt { float: left; width: 180px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; margin-bottom: 1em } 67 | dl dd { margin-left: 200px; margin-bottom: 1em } 68 | hr { display: block; height: 1px; border: 0; border-top: 1px solid #efefef; margin: 3.2em 0; padding: 0; } 69 | blockquote { -moz-box-sizing: border-box; box-sizing: border-box; margin: 1.6em 0 1.6em -2.2em; padding: 0 0 0 1.6em; border-left: #ddd 0.4em solid; color: #777; } 70 | blockquote p { margin: 0.8em 0; } 71 | blockquote small { display: inline-block; margin: 0.8em 0 0.8em 1.5em; font-size: 0.9em; color: #ccc; } 72 | blockquote small:before { content: '\2014 \00A0'; } 73 | blockquote cite { font-weight: bold; } 74 | blockquote cite a { font-weight: normal; } 75 | mark { background-color: #ffc336; } 76 | code, tt { padding: 1px 3px; font-family: Inconsolata, monospace, sans-serif; font-size: 0.85em; white-space: pre-wrap; border-bottom: 1px solid #e0e0e0; background: #f8f8f8; border-radius: 2px; } 77 | pre { -moz-box-sizing: border-box; box-sizing: border-box; margin: 1.2em 0; border-bottom: 1px solid #e4e4e4; width: 100%; padding: 1.62em; font-family: Monaco, Menlo, Consolas, monospace, "Courier New", sans-serif; font-size: 0.85em; line-height: 1.6em; white-space: pre; overflow: auto; background: #f8f8f8; border-radius: 2px; } 78 | pre code, tt { font-size: inherit; white-space: -moz-pre-wrap; white-space: pre-wrap; background: transparent; border: none; padding: 0; } 79 | kbd { display: inline-block; margin-bottom: 0.4em; padding: 1px 8px; border: #ccc 1px solid; color: #666; text-shadow: #fff 0 1px 0; font-size: 0.9em; font-weight: bold; background: #f4f4f4; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset; } 80 | table { -moz-box-sizing: border-box; box-sizing: border-box; margin: 1.6em 0; width: 100%; max-width: 100%; background-color: transparent; } 81 | table th, table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: top;/* border-top: 1px solid #efefef; */ 82 | } 83 | table th { color: #000; } 84 | table caption + thead tr:first-child th, table caption + thead tr:first-child td, table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; } 85 | table tbody + tbody { border-top: 2px solid #efefef; } 86 | table table table { background-color: #fff; } 87 | table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: #f6f6f6; } 88 | table.plain tbody > tr:nth-child(odd) > td, table.plain tbody > tr:nth-child(odd) > th { background: transparent; } 89 | iframe, .fluid-width-video-wrapper { display: block; margin: 1.6em 0; } 90 | /* When a video is inside the fitvids wrapper, drop the 91 | margin on the iframe, cause it breaks stuff. */ 92 | .fluid-width-video-wrapper iframe { margin: 0; } 93 | /* ========================================================================== 94 | 3. Utilities - These things get used a lot 95 | ========================================================================== */ 96 | 97 | /* Hides shit */ 98 | .hidden { text-indent: -9999px; visibility: hidden; display: none; } 99 | /* Creates a responsive wrapper that makes our content scale nicely */ 100 | .inner { position: relative; width: 80%; max-width: 700px; margin: 0 auto; } 101 | /* Centres vertically yo. (IE8+) */ 102 | .vertical { display: table-cell; vertical-align: middle; } 103 | /* ========================================================================== 104 | 4. General - The main styles for the the theme 105 | ========================================================================== */ 106 | 107 | /* Big cover image on the home page */ 108 | .site-head { position: relative; display: table; width: 100%; height: 60%; margin-bottom: 5rem; text-align: center; color: #fff; background: #303538 no-repeat center center; background-size: cover; } 109 | .blog-logo { text-decoration: none; } 110 | /* Yo-logo. Yolo-go. Upload one in ghost/settings/ */ 111 | .blog-logo img { display: block; max-height: 100px; width: auto; margin: 0 auto; line-height: 0; } 112 | /* The details of your blog. Defined in ghost/settings/ */ 113 | .blog-title { margin: 10px 0 10px 0; font-size: 5rem; letter-spacing: -1px; font-weight: bold; font-family: 'Open Sans', sans-serif; text-shadow: 0 1px 6px rgba(0,0,0,0.1); } 114 | .blog-description { margin: 0; font-size: 1.8rem; line-height: 1.5em; font-weight: 300; font-family: 'Noto Serif', serif; letter-spacing: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.15); } 115 | /* Every post, on every page, gets this style on its
tag */ 116 | .post { position: relative; width: 80%; max-width: 700px; margin: 4rem auto; padding-bottom: 4rem; border-bottom: #EBF2F6 1px solid; word-break: break-word; hyphens: auto; } 117 | /* Add a little circle in the middle of the border-bottom on our .post 118 | just for the lolz and stylepoints. 119 | .post:after { 120 | display: block; 121 | content: ""; 122 | width: 7px; 123 | height: 7px; 124 | border: #E7EEF2 1px solid; 125 | position: absolute; 126 | bottom: -5px; 127 | left: 50%; 128 | margin-left: -5px; 129 | background: #fff; 130 | -webkit-border-radius: 100%; 131 | -moz-border-radius: 100%; 132 | border-radius: 100%; 133 | box-shadow: #fff 0 0 0 5px; 134 | } */ 135 | 136 | .post-title { margin: 0; } 137 | .post-title a { text-decoration: none; } 138 | .post-excerpt p { margin: 1.6rem 0 0 0; font-size: 0.9em; line-height: 1.6em; } 139 | .post-meta { display: inline-block; margin: 0 0 5px 0; font-family: 'Open Sans', sans-serif; font-size: 1.5rem; color: #9EABB3; } 140 | .post-meta a { color: #9EABB3; text-decoration: none; } 141 | .post-meta a:hover { color: #2980B9;text-decoration: underline; } 142 | .user-meta { position: relative; padding: 0.3rem 40px 0 100px; min-height: 77px; } 143 | .user-image { position: absolute; top: 0; left: 0; } 144 | .user-name { display: block; font-weight: bold; } 145 | .user-bio { display: block; max-width: 440px; font-size: 1.4rem; line-height: 1.5em; } 146 | .publish-meta { position: absolute; top: 0; right: 0; padding: 4.3rem 0 4rem 0; text-align: right; } 147 | .publish-heading { display: block; font-weight: bold; } 148 | .publish-date { display: block; font-size: 1.4rem; line-height: 1.5em; } 149 | .comments-area { width: 80%; max-width: 700px; margin: 4rem auto; } 150 | #comment h1 a { text-decoration: none; } 151 | /* ========================================================================== 152 | 5. Single Post - When you click on an individual post 153 | ========================================================================== */ 154 | 155 | /* Insert some mad padding up in the header for better spacing */ 156 | .post-template .post-header { padding: 60px 0; text-align: center; } 157 | .post-template .site-head { color: #303538; border-bottom: #ebf2f6 1px solid; background: none !important; } 158 | .post-template .site-head:after { position: absolute; bottom: -5px; left: 50%; display: block; width: 7px; height: 7px; margin-left: -5px; content: ''; border: #e7eef2 1px solid; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background: #fff; box-shadow: #fff 0 0 0 5px; } 159 | /* Keep large images within the bounds of the post-width */ 160 | .post-content img { display: block; max-width: 100%; margin: 0 auto; height: auto; } 161 | /* The author credit area after the post */ 162 | .post-footer { position: relative; margin: 4rem 0 0 0; padding: 4rem 0 0 0; border-top: #EBF2F6 1px solid; } 163 | .post-footer h4 { font-size: 1.8rem; margin: 0; } 164 | .post-footer p { margin: 1rem 0; font-size: 1.4rem; line-height: 1.6em; } 165 | /* Create some space to the right for the share links */ 166 | .post-footer .author { margin-right: 240px; } 167 | /* Drop the share links in the space to the right. 168 | Doing it like this means it's easier for the author bio 169 | to be flexible at smaller screen sizes while the share 170 | links remain at a fixed width the whole time */ 171 | .post-footer .share { position: absolute; top: 4rem; right: 0; width: 160px; } 172 | .post-footer .share a { font-size: 1.8rem; display: inline-block; margin: 1.4rem 1.6rem 1.6rem 0; color: #BBC7CC; text-decoration: none; } 173 | .post-footer .share a:hover { color: #50585D; } 174 | /* ========================================================================== 175 | 6. Third Party Elements - Embeds from other services 176 | ========================================================================== */ 177 | 178 | /* Hexo: Youtube, other video container */ 179 | 180 | .video-container { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; } 181 | .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-top: 0; } 182 | /* Hexo: Syntax Highlighter */ 183 | 184 | figure.highlight { background: #fff; border-radius: 2px; border-bottom: 1px solid #e1e1e1; line-height: 1.45em; font-size: .8em; margin-bottom: 1em; overflow: auto; white-space: pre; word-wrap: normal; } 185 | figure.highlight figcaption { padding: 8px 10px; font-size: .8em; } 186 | figure.highlight table { margin: 0; } 187 | figure.highlight table > tbody > tr > td { padding: 0; background: #fff !important; } 188 | figure.highlight table > tbody > tr > td.gutter { max-width: 30px; width: 30px; text-align: left; color: #999; } 189 | figure.highlight pre { border: none; margin: 0; } 190 | /* Theme: Solarized - Github 191 | * More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html 192 | */ 193 | pre .comment, pre .template_comment, .diff pre .header, pre .javadoc { color: #999; font-style: italic } 194 | pre .keyword, .css .rule pre .keyword, pre .winutils, .javascript pre .title, .nginx pre .title, pre .subst, pre .request, pre .status { color: #4a4a4a; font-weight: bold } 195 | pre .number, pre .hexcolor, .ruby pre .constant { color: #099; } 196 | pre .string, pre .tag pre .value, pre .phpdoc, .tex pre .formula { color: #dd3c2b } 197 | pre .title, pre .id, .coffeescript pre .params, .scss pre .preprocessor { color: #900; font-weight: bold } 198 | .javascript pre .title, .lisp pre .title, .clojure pre .title, pre .subst { font-weight: normal } 199 | pre .class pre .title, .haskell pre .type, .vhdl pre .literal, .tex pre .command { color: #458; font-weight: bold } 200 | pre .tag, pre .tag pre .title, pre .rules pre .property, .django pre .tag pre .keyword { color: #000080; font-weight: normal } 201 | pre .attribute, pre .variable, .lisp pre .body { color: #008080 } 202 | pre .regexp { color: #009926 } 203 | pre .symbol, .ruby pre .symbol pre .string, .lisp pre .keyword, .tex pre .special, pre .prompt { color: #990073 } 204 | pre .built_in, .lisp pre .title, .clojure pre .built_in { color: #0086b3 } 205 | pre .preprocessor, pre .pragma, pre .pi, pre .doctype, pre .shebang, pre .cdata { color: #999; font-weight: bold } 206 | pre .deletion { background: #fdd } 207 | pre .addition { background: #dfd } 208 | .diff pre .change { background: #0086b3 } 209 | pre .chunk { color: #aaa } 210 | /* Github */ 211 | 212 | .gist table { margin: 0; font-size: 1.4rem; } 213 | .gist .line-number { min-width: 25px; font-size: 1.1rem; } 214 | /* ========================================================================== 215 | 7. Pagination - Tools to let you flick between pages 216 | ========================================================================== */ 217 | 218 | /* The main wrapper for our pagination links */ 219 | .pagination { position: relative; width: 80%; max-width: 700px; margin: 4rem auto; font-family: 'Open Sans', sans-serif; font-size: 1.3rem; color: #9EABB3; text-align: center; } 220 | .pagination a { color: #9EABB3; } 221 | /* Push the previous/next links out to the left/right */ 222 | .older-posts, .newer-posts { position: absolute; display: inline-block; padding: 0 15px; border: #EBF2F6 2px solid; text-decoration: none; border-radius: 30px; transition: border ease 0.3s; } 223 | .older-posts { right: 0; } 224 | .page-number { display: inline-block; padding: 2px 0; } 225 | .newer-posts { left: 0; } 226 | .older-posts:hover, .newer-posts:hover { border-color: #9EABB3; color: #ff8d66; } 227 | /* ========================================================================== 228 | 8. Footer - The bottom of every page 229 | ========================================================================== */ 230 | 231 | .site-footer { position: relative; margin: 8rem 0 0 0; padding: 4rem 0; border-top: #EBF2F6 1px solid; font-family: 'Open Sans', sans-serif; font-size: 1.3rem; line-height: 1.7em; color: #BBC7CC; text-align: center; background: #f8f8f8; } 232 | .site-footer a { color: #BBC7CC; text-decoration: underline; } 233 | .site-footer a:hover { color: #50585D; } 234 | .poweredby .icon-ghost { font-weight: 700; text-decoration: none; } 235 | .poweredby .icon-ghost:hover { text-decoration: none; } 236 | .poweredby .icon-ghost:before { font-size: 1rem; margin-right: 0.2em; } 237 | /* The subscribe icon on the footer */ 238 | .subscribe { width: 28px; height: 28px; position: absolute; top: -14px; left: 50%; margin-left: -15px; border: #EBF2F6 1px solid; text-align: center; line-height: 2.4rem; border-radius: 50px; background: #fff; transition: box-shadow 0.5s; } 239 | /* The RSS icon, inserted via icon font */ 240 | .subscribe:before { color: #D2DEE3; font-size: 10px; position: absolute; top: 9px; left: 9px; font-weight: bold; transition: color 0.5s ease; } 241 | /* Add a box shadow to on hover */ 242 | .subscribe:hover { box-shadow: rgba(0,0,0,0.05) 0 0 0 3px; transition: box-shadow 0.25s; } 243 | .subscribe:hover:before { color: #50585D; } 244 | /* CSS tooltip saying "Subscribe!" - initially hidden */ 245 | .tooltip { opacity: 0; display: inline-block; padding: 4px 8px 5px 8px; position: absolute; top: -23px; left: -21px; color: rgba(255,255,255,0.9); font-size: 1.1rem; line-height: 1em; text-align: center; background: #50585D; border-radius: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition: opacity 0.3s ease, top 0.3s ease; } 246 | /* The little chiclet arrow under the tooltip, pointing down */ 247 | .tooltip:after { content: ""; border-width: 5px 5px 0 5px; border-style: solid; border-color: #50585D transparent; display: block; position: absolute; bottom: -4px; left: 50%; margin-left: -5px; z-index: 220; width: 0; } 248 | /* On hover, show the tooltip! */ 249 | .subscribe:hover .tooltip { opacity: 1; top: -33px; } 250 | 251 | /* ========================================================================== 252 | 9. Media Queries - Smaller than 900px 253 | ========================================================================== */ 254 | 255 | @media only screen and (max-width: 900px) { 256 | blockquote { margin-left: 0; } 257 | .site-head { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: auto; min-height: 240px; padding: 15% 0; } 258 | .blog-title { font-size: 4rem; letter-spacing: -1px; } 259 | .blog-description { font-size: 1.7rem; line-height: 1.5em; } 260 | .post { font-size: 0.9em; line-height: 1.6em; } 261 | .post-template .post { padding-bottom: 1rem; } 262 | .post-template .post-header { padding: 40px 0; } 263 | h1 { font-size: 4.8rem; text-indent: -2px; } 264 | h2 { font-size: 4rem; } 265 | h3 { font-size: 3.2rem; } 266 | h4 { font-size: 2.4rem; } 267 | } 268 | 269 | /* ========================================================================== 270 | 10. Media Queries - Smaller than 500px 271 | ========================================================================== */ 272 | 273 | 274 | @media only screen and (max-width: 500px) { 275 | .blog-logo img { max-height: 80px; } 276 | .inner, .pagination { width: auto; margin-left: 16px; margin-right: 16px; } 277 | .post { width: auto; margin-left: 16px; margin-right: 16px; font-size: 0.8em; line-height: 1.6em; } 278 | .site-head { padding: 10% 0; } 279 | .blog-title { font-size: 3rem; } 280 | .blog-description { font-size: 1.5rem; } 281 | h1, h2 { font-size: 3rem; line-height: 1.1em; letter-spacing: -1px; } 282 | h3 { font-size: 2.8rem; } 283 | h4 { font-size: 2.3rem; } 284 | .post-template .post-header { padding: 30px 0; } 285 | .post-meta { font-size: 1.3rem; } 286 | .post-footer { padding: 4rem 0; text-align: center; } 287 | .post-footer .author { margin: 0 2rem 2rem 0; padding: 0 0 1.6rem 0; border-bottom: #EBF2F6 1px dashed; } 288 | .post-footer .share { position: static; width: auto; } 289 | .post-footer .share a { margin: 1.4rem 0.8rem 0 0.8rem; } 290 | .older-posts, .newer-posts { position: static; margin: 10px 0; } 291 | .page-number { display: block; } 292 | .site-footer { margin-top: 6rem; font-size: 1.1rem; } 293 | } 294 | 295 | /* ========================================================================== 296 | End of file. Media queries should be the last thing here. Do not add stuff 297 | below this point, or it will probably fuck everything up. 298 | ========================================================================== */ 299 | -------------------------------------------------------------------------------- /source/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* CSS Document */ 3 | .site-head { min-height: 420px; } 4 | button { border: none; padding: 0.6em 1.2em; background: #a9a9a9; color: #fff; font-family: Arial, sans-serif; font-size: 1em; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; display: inline-block; margin: 10px; border-radius: 2px; font-weight: 400; outline: none; } 5 | button { font-size: 75%; background: none; border: 1px #fff solid; } 6 | button:hover, button:active { background: rgba(0,0,0,0.2); } 7 | /*add p2*/ 8 | .perspective { width: 100%; height: 100%; } 9 | .perspective { background: #aaa; position: relative; } 10 | .container { background: #fff; min-height: 100%; position: relative; outline: 1px solid rgba(0, 0, 0, 0); z-index: 10; -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); /* reset transforms (Chrome bug) */ transform: translateZ(0) translateX(0) rotateY(0deg); } 11 | .container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0px; opacity: 0; background: rgba(0, 0, 0, 0.2); /* the transition delay of the height needs to be synced with the container transition time */ -webkit-transition: opacity 0.4s, height 0s 0.4s; transition: opacity 0.4s, height 0s 0.4s; } 12 | .wrapper { position: relative; } 13 | .component { margin: 0 auto; width: 60%; text-align: justify; font-size: 1.5em; } 14 | /* Modal view */ 15 | .perspective.modalview { position: fixed; -webkit-perspective: 1000px; perspective: 1000px; } 16 | .modalview .container { position: absolute; overflow: hidden; width: 100%; height: 100%; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; } 17 | .modalview .wrapper { -webkit-transform: translateZ(-1px); /* solves a rendering bug in Chrome on Windows */ } 18 | .animate .container::after { opacity: 1; height: 101%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } 19 | /* Outer Nav */ 20 | .outer-nav { position: absolute; height: auto; font-size: 2em; } 21 | .outer-nav.vertical { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } 22 | .outer-nav.horizontal { left: 50%; width: 75%; max-width: 900px; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); } 23 | .outer-nav.left { left: 25%; } 24 | .outer-nav.right { right: 25%; } 25 | .outer-nav.top { top: 25%; } 26 | .outer-nav.bottom { bottom: 25%; } 27 | .outer-nav a { display: inline-block; white-space: nowrap; font-weight: 300; margin: 0 0 30px 0; color: #fff; 28 | -webkit-transition: color 0.3s; transition: color 0.3s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } 29 | .outer-nav a:hover { color: #ffdccd; } 30 | .outer-nav.vertical a { display: block; } 31 | .outer-nav.horizontal a { margin: 15px 20px; } 32 | .outer-nav a::before { 33 | display: inline-block; 34 | font-family: 'icons'; speak: none; 35 | font-style: normal; 36 | font-weight: normal; 37 | font-variant: normal; 38 | text-transform: none; 39 | line-height: 1; 40 | margin-right: 10px; 41 | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; } 42 | .outer-nav a span{ font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'Droid Sans Fallback', sans-serif; font-weight: 300; } 43 | 44 | .icon-news::before { content: "\e606" } 45 | .icon-home::before { content: "\e601" } 46 | .icon-image::before { content: "\e602" } 47 | .icon-wiki::before { content: "\e607" } 48 | .icon-mail::before { content: "\e605" } 49 | .icon-lock::before { content: "\e60e" } 50 | .icon-chart-pie::before { content: "\e612" } 51 | /* Effect Move Down */ 52 | .effect-movedown { background: #34495e; } 53 | .effect-movedown .container { -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 54 | .effect-movedown .container::after { background: rgba(52, 73, 94, 0.5); } 55 | .effect-movedown.animate .container { -webkit-transform: translateY(100%) translateZ(-1500px); transform: translateY(100%) translateZ(-1500px); } 56 | .no-csstransforms3d .effect-movedown.animate .container { top: 75%; } 57 | .effect-movedown .outer-nav a { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } 58 | .effect-movedown .outer-nav a:hover { color: #fbb44f; } 59 | .effect-movedown.animate .outer-nav a { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 60 | .effect-movedown.animate .outer-nav a:nth-child(2) { -webkit-transition-delay: 0.04s; transition-delay: 0.04s; } 61 | .effect-movedown.animate .outer-nav a:nth-child(3) { -webkit-transition-delay: 0.08s; transition-delay: 0.08s; } 62 | .effect-movedown.animate .outer-nav a:nth-child(4) { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; } 63 | .effect-movedown.animate .outer-nav a:nth-child(5) { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; } 64 | .effect-movedown.animate .outer-nav a:nth-child(6) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } 65 | .effect-movedown.animate .outer-nav a:nth-child(7) { -webkit-transition-delay: 0.24s; transition-delay: 0.24s; } 66 | 67 | /* Media Queries */ 68 | @media screen and (max-width: 77em) { 69 | .outer-nav.top { top: 15%; } 70 | .outer-nav.bottom { bottom: 15%; } 71 | } 72 | 73 | @media screen and (max-width: 36.625em), screen and (max-height: 41.75em) { 74 | .outer-nav.top { top: 5%; } 75 | .outer-nav.bottom { bottom: 5%; } 76 | .outer-nav.horizontal { font-size: 1.7em; width: 6.2em; } 77 | .outer-nav.horizontal a { display: block; text-align: left; }/* Special Case */ 78 | .effect-rotatetop .outer-nav.horizontal { width: 95%; bottom: auto; top: 50%; } 79 | .effect-rotatetop .outer-nav.horizontal a { display: inline-block; } 80 | } 81 | 82 | @media screen and (max-width: 31em), screen and (max-height: 36.2em) { 83 | .outer-nav.horizontal, .outer-nav.vertical { font-size: 1.2em; width: 6.8em; } 84 | .outer-nav.right { right: auto; left: 50%; } 85 | } 86 | 87 | @media screen and (max-height: 31.6em) { 88 | .outer-nav a { margin-bottom: 20px; } 89 | } 90 | /*fonticons*/ 91 | [class^="icon-"], [class*=" icon-"] { font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ 92 | -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 93 | .icon-Favorites:before { content: "\e600"; }.icon-logo:before { content: "\e608"; } 94 | .icon-newspaper:before { content: "\e609"; }.icon-dice:before { content: "\e60a"; } 95 | .icon-pacman:before { content: "\e60b"; }.icon-book:before { content: "\e60c"; } 96 | .icon-paste:before { content: "\e60d"; }.icon-qrcode:before { content: "\e603"; }.icon-calculate:before { content: "\e60e"; } 97 | .icon-address-book:before { content: "\e604"; }.icon-notebook:before { content: "\e60f"; }.icon-users:before { content: "\e610"; }.icon-binoculars:before { content: "\e611"; }.icon-pie:before { content: "\e612"; } 98 | .icon-food:before { content: "\e613"; }.icon-earth:before { content: "\e614"; }.icon-link:before { content: "\e615"; }.icon-flag:before { content: "\e616"; }.icon-attachment:before { content: "\e617"; } 99 | .icon-eye:before { content: "\e618"; }.icon-eye-blocked:before { content: "\e619"; } 100 | .icon-eye2:before { content: "\e61a"; } 101 | .icon-bookmarks:before { content: "\e61b"; } 102 | .icon-star:before { content: "\e61c"; } 103 | .icon-heart:before { content: "\e61d"; } 104 | .icon-heart-broken:before { content: "\e61e"; } 105 | .icon-happy:before { content: "\e61f"; } 106 | .icon-smiley:before { content: "\e620"; } 107 | .icon-tongue:before { content: "\e621"; } 108 | .icon-sad:before { content: "\e622"; } 109 | .icon-wink:before { content: "\e623"; } 110 | .icon-grin:before { content: "\e624"; } 111 | .icon-cool:before { content: "\e625"; } 112 | .icon-angry:before { content: "\e626"; } 113 | .icon-evil:before { content: "\e627"; } 114 | .icon-shocked:before { content: "\e628"; } 115 | .icon-crop:before { content: "\e629"; } 116 | .icon-scissors:before { content: "\e62a"; } 117 | .icon-console:before { content: "\e62b"; } 118 | .icon-googleplus:before { content: "\e62c"; } 119 | .icon-googleplus2:before { content: "\e62d"; } 120 | .icon-google-drive:before { content: "\e62e"; } 121 | .icon-facebook:before { content: "\e62f"; } 122 | .icon-twitter:before { content: "\e630"; } 123 | .icon-feed:before { content: "\e631"; } 124 | .icon-vimeo2:before { content: "\e632"; } 125 | .icon-flickr:before { content: "\e633"; } 126 | .icon-picassa:before { content: "\e634"; } 127 | .icon-dribbble:before { content: "\e635"; } 128 | .icon-github:before { content: "\e636"; } 129 | .icon-apple:before { content: "\e637"; } 130 | .icon-android:before { content: "\e638"; } 131 | .icon-file-pdf:before { content: "\e639"; } 132 | .icon-file-openoffice:before { content: "\e63a"; } 133 | .icon-file-word:before { content: "\e63b"; } 134 | .icon-file-excel:before { content: "\e63c"; } 135 | .icon-file-zip:before { content: "\e63d"; } 136 | .icon-file-powerpoint:before { content: "\e63e"; } 137 | .icon-file-xml:before { content: "\e63f"; } 138 | .icon-file-css:before { content: "\e640"; } 139 | .icon-html5:before { content: "\e641"; } 140 | .icon-html52:before { content: "\e642"; } 141 | .icon-css3:before { content: "\e643"; } 142 | .icon-chrome:before { content: "\e644"; } 143 | .icon-firefox:before { content: "\e645"; } 144 | .icon-IE:before { content: "\e646"; } 145 | .icon-opera:before { content: "\e647"; } 146 | .icon-safari:before { content: "\e648"; } 147 | .icon-IcoMoon:before { content: "\e649"; } 148 | .icon-new:before { content: "\e64a"; } 149 | .icon-language:before { content: "\e64b"; } 150 | .icon-cc:before { content: "\e64c"; } 151 | .icon-cc-by:before { content: "\e64d"; } 152 | .icon-cc-nc:before { content: "\e64e"; } 153 | .icon-cc-nc-eu:before { content: "\e64f"; } 154 | .icon-cc-nc-jp:before { content: "\e650"; } 155 | .icon-cc-sa:before { content: "\e651"; } 156 | .icon-cc-nd:before { content: "\e652"; } 157 | .icon-cc-pd:before { content: "\e653"; } 158 | .icon-flickr2:before { content: "\e654"; } 159 | .icon-vimeo:before { content: "\e655"; } 160 | .icon-twitter2:before { content: "\e656"; } 161 | .icon-facebook2:before { content: "\e657"; } 162 | .icon-googleplus3:before { content: "\e658"; } 163 | .icon-tumblr:before { content: "\e659"; } 164 | .icon-dribbble2:before { content: "\e65a"; } 165 | .icon-stumbleupon:before { content: "\e65b"; } 166 | .icon-rdio:before { content: "\e65c"; } 167 | .icon-spotify:before { content: "\e65d"; } 168 | .icon-qq:before { content: "\e65e"; } 169 | .icon-instagram:before { content: "\e65f"; } 170 | .icon-dropbox:before { content: "\e660"; } 171 | .icon-evernote:before { content: "\e661"; } 172 | .icon-flattr:before { content: "\e662"; } 173 | .icon-skype:before { content: "\e663"; } 174 | .icon-skype2:before { content: "\e664"; } 175 | .icon-renren:before { content: "\e665"; } 176 | .icon-sina-weibo:before { content: "\e666"; } 177 | .icon-picasa:before { content: "\e667"; } 178 | .icon-behance:before { content: "\e668"; } 179 | .icon-circles:before { content: "\e669"; } 180 | .icon-vk:before { content: "\e66a"; } 181 | .icon-smashing:before { content: "\e66b"; } 182 | 183 | .fs0 { 184 | font-size: 16px; 185 | } 186 | .fs1 { 187 | font-size: 32px; 188 | } 189 | .fs2 { 190 | font-size: 32px; 191 | } 192 | .fs3 { 193 | font-size: 20px; 194 | } 195 | -------------------------------------------------------------------------------- /source/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moretwo/hexo-theme/a169b85e06c95512891bd8ce2f1a6da6de61f320/source/fonts/icons.eot -------------------------------------------------------------------------------- /source/fonts/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /source/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moretwo/hexo-theme/a169b85e06c95512891bd8ce2f1a6da6de61f320/source/fonts/icons.ttf -------------------------------------------------------------------------------- /source/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moretwo/hexo-theme/a169b85e06c95512891bd8ce2f1a6da6de61f320/source/fonts/icons.woff -------------------------------------------------------------------------------- /source/img/icons-demo-nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moretwo/hexo-theme/a169b85e06c95512891bd8ce2f1a6da6de61f320/source/img/icons-demo-nav.png -------------------------------------------------------------------------------- /source/img/img-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moretwo/hexo-theme/a169b85e06c95512891bd8ce2f1a6da6de61f320/source/img/img-bg.jpg -------------------------------------------------------------------------------- /source/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /source/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 | 11 | $(".post-content").fitVids(); 12 | 13 | }); 14 | 15 | }(jQuery)); -------------------------------------------------------------------------------- /source/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 | -------------------------------------------------------------------------------- /source/js/menu.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.7.1 (Custom Build) | MIT & BSD * Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load */ ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true */ /*global define: false */ ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else { // browser global window.classie = classie; } })( window ); /** * menu.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrops * http://www.codrops.com */ (function() { function scrollY() { return window.pageYOffset || docElem.scrollTop; } // from http://stackoverflow.com/a/11381730/989439 function mobilecheck() { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } var docElem = window.document.documentElement, // support transitions support = Modernizr.csstransitions, // transition end event name transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], docscroll = 0, // click event (if mobile use touchstart) clickevent = mobilecheck() ? 'touchstart' : 'click'; function init() { var showMenu = document.getElementById( 'showMenu' ), perspectiveWrapper = document.getElementById( 'perspective' ), container = perspectiveWrapper.querySelector( '.container' ), contentWrapper = container.querySelector( '.wrapper' ); showMenu.addEventListener( clickevent, function( ev ) { ev.stopPropagation(); ev.preventDefault(); docscroll = scrollY(); // change top of contentWrapper contentWrapper.style.top = docscroll * -1 + 'px'; // mac chrome issue: document.body.scrollTop = document.documentElement.scrollTop = 0; // add modalview class classie.add( perspectiveWrapper, 'modalview' ); // animate.. setTimeout( function() { classie.add( perspectiveWrapper, 'animate' ); }, 25 ); }); container.addEventListener( clickevent, function( ev ) { if( classie.has( perspectiveWrapper, 'animate') ) { var onEndTransFn = function( ev ) { if( support && ( ev.target.className !== 'container' || ev.propertyName.indexOf( 'transform' ) == -1 ) ) return; this.removeEventListener( transEndEventName, onEndTransFn ); classie.remove( perspectiveWrapper, 'modalview' ); // mac chrome issue: document.body.scrollTop = document.documentElement.scrollTop = docscroll; // change top of contentWrapper contentWrapper.style.top = '0px'; }; if( support ) { perspectiveWrapper.addEventListener( transEndEventName, onEndTransFn ); } else { onEndTransFn.call(); } classie.remove( perspectiveWrapper, 'animate' ); } }); perspectiveWrapper.addEventListener( clickevent, function( ev ) { return false; } ); } init(); })(); -------------------------------------------------------------------------------- /theme-p1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moretwo/hexo-theme/a169b85e06c95512891bd8ce2f1a6da6de61f320/theme-p1.png -------------------------------------------------------------------------------- /theme.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moretwo/hexo-theme/a169b85e06c95512891bd8ce2f1a6da6de61f320/theme.gif --------------------------------------------------------------------------------