├── 404.jade ├── README.md ├── archive.jade ├── base.jade ├── index+tags.jade ├── index.jade ├── interface.json ├── mixins.jade ├── post+markdown+pages.jade └── style ├── css ├── 404.scss └── style.scss ├── images ├── 404.svg ├── mar.svg ├── star.svg └── star2.svg └── js ├── autoscroll.js ├── font.js ├── jquery-migrate-1.2.1.min.js ├── jquery.appear.js └── menu.js /404.jade: -------------------------------------------------------------------------------- 1 | html 2 | head 3 | title Not Found 4 | +load('/template/style/css/404.scss') 5 | .page_404 6 | .page_404_part1 7 | img.animated.fadeInDown(src="/template/style/images/star2.svg") 8 | .page_404_part2 9 | img.animated.fadeInDown(src="/template/style/images/404.svg") 10 | .page_404_part3 11 | img.animated.fadeInDown(src="/template/style/images/mar.svg") 12 | +load('jquery') 13 | +load('/template/style/js/autoscroll.js') 14 | script 15 | $(function(){ 16 | window.autoscroll.interval = 10; 17 | window.autoscroll.threshold = 50; 18 | window.autoscroll.velocity = 5; 19 | window.autoscroll.acceleration = 1; 20 | window.autoscroll.start(); 21 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # farbox-theme-cais 2 | This theme is desiged for FarBox,You can use it directly or modified it on FarBox 3 | 这是一款为Farbox设计的主题 4 | 5 | ![](https://hicaicai.b0.upaiyun.com/work/2asdjh.png) 6 | 7 | ![](https://hicaicai.b0.upaiyun.com/work/hjasg3jgasjkd.png) 8 | ### 快速使用 9 | 10 | 拷贝仓库最新的代码到你的Farbox博客template文件内 11 | 在后台设置相关参数，比如社交账号，博客主题等 12 | 13 | ### 说明 14 | 15 | - 主题默认使用了谷歌字体，如果加载速度不满意，请自行切换 16 | - About页面，是一个简单的demo，可以自由发挥 17 | - 默认分页加载文章，如果需要全部加载，请到后台系统设置文章数为一个比较大的数字，比如“9999”，这样分页按钮消失 18 | - 没有做IE一些老的浏览器的适配～ 19 | - 第三方留言为disqus，如果需要请到disqus申请注册，不需要则注销 20 | 21 | ### 反馈 22 | 23 | 如果遇到问题，欢迎@我，或者提Issues给我～ 24 | 25 | ### License 26 | 27 | cais is released under the MIT license. 28 | -------------------------------------------------------------------------------- /archive.jade: -------------------------------------------------------------------------------- 1 | from mixins import make_pager 2 | extends base.jade 3 | block content 4 | .autopagerize_page_element:.content 5 | ul.list-with-title 6 | entries = get_data(type='post',limit=300, sort='desc').group('-date:year') 7 | for year, posts in entries 8 | div.listing-title= year 9 | ul.listing 10 | for post in posts 11 | .listing-item 12 | .listing-post 13 | a(href=post.url, title=post.title)= post.title 14 | div.post-time 15 | span.date= post.date.format("%m-%d") 16 | +make_pager('Prev', 'Next') 17 | -------------------------------------------------------------------------------- /base.jade: -------------------------------------------------------------------------------- 1 | html 2 | +i18n('Home', '首页', 'zh_cn') 3 | +i18n('Albums', '相册', 'zh_cn') 4 | +i18n('Categories', '分类', 'zh_cn') 5 | +i18n('Archive', '归档', 'zh_cn') 6 | +i18n('Tags', '标签', 'zh_cn') 7 | +i18n('About', '关于', 'zh_cn') 8 | +i18n('Links', '友链', 'zh_cn') 9 | head 10 | meta(http-equiv="Content-Type", content="text/html; charset=UTF-8") 11 | block title 12 | title= post.title or site.title 13 | +mobile_meta() 14 | meta(name="author", content="CaiCai,hi@cai-cai.me") 15 | meta(name="keywords", content=site.configs.keywords.escaped) 16 | meta(name="description", content=site.raw_content.escaped) 17 | link(rel="stylesheet", type="text/css", href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,latin-ext") 18 | +load('font') 19 | +get_resource("blog_basic.css") 20 | +load('/template/style/css/style.scss') 21 | body 22 | 23 | // header starts 24 | if context_doc and context_doc.type=='post' 25 | .back-button 26 | button.btn(type=button,role="back",onclick="window.history.go(-1)") Back 27 | else 28 | .menu 29 | ul.btn-down 30 | li.animated.fadeInDown 31 | a(href="#", onmouseover="mopen('m1')", onmouseout="mclosetime()") Menu 32 | #m1(onmouseover="mcancelclosetime()", onmouseout="mclosetime()") 33 | a(href="/")= _('Home') 34 | if has('images') 35 | a(href='/album')= _('Albums') 36 | if not has('posts') 37 | +redirect('/album') 38 | a(href="/archive")= _('Archive') 39 | pages = get_data(status='pages', type='post', limit=5, with_page=False, sort='position') 40 | for page_p in pages 41 | a(href="/{{page_p.path}}")= _(page_p.filename.split('.')[0].title()) 42 | .header 43 | .logo-title 44 | .title.animated.fadeInDown 45 | h1(title="") 46 | a(href="/") {{ site.title }} 47 | if site.raw_content 48 | .description.animated.fadeInDown 49 | p= '♥ %s ♥' % site.raw_content[:100] 50 | 51 | ul.social-links.animated.fadeInDown 52 | if site.configs.twitter 53 | li 54 | a(href="https://twitter.com/{{site.configs.twitter}}") 55 | i.fa.fa-twitter 56 | span Twitter 57 | if site.configs.instagram 58 | li 59 | a(href="http://instagram.com/{{site.configs.instagram}}") 60 | i.fa.fa-instagram 61 | span Instagram 62 | if site.configs.dribbble 63 | li 64 | a(href="https://dribbbble.com/{{site.configs.dribbble}}") 65 | i.fa.fa-dribbble 66 | span Dribbble 67 | if site.configs.weibo 68 | li 69 | a(href="http://weibo.com/{{site.configs.weibo}}") 70 | i.fa.fa-weibo 71 | span Weibo 72 | 73 | 74 | block content 75 | 76 | 77 | .footer 78 | a(target="_blank", href="http://{{request.domain}}") 79 | span All content copyright {{site.title}} © 2015 • All rights reserved. 80 | span Designed by 81 | a(href="https://www.caicai.me") CaiCai 82 | .by_farbox 83 | a(href="http://www.farbox.com", target="_blank") Proudly published with Farbox！ 84 | 85 | 86 | 87 | +load('jquery') 88 | +load("/template/style/js/jquery-migrate-1.2.1.min.js") 89 | +load("/template/style/js/jquery.appear.js") 90 | +load("/template/style/js/menu.js") -------------------------------------------------------------------------------- /index+tags.jade: -------------------------------------------------------------------------------- 1 | from mixins import make_post, make_pager 2 | 3 | extends base.jade 4 | block content 5 | .autopagerize_page_element:.content 6 | for post in posts 7 | +make_post(post, is_detail=False) 8 | +make_pager('Older Posts', 'Newer Posts') 9 | -------------------------------------------------------------------------------- /index.jade: -------------------------------------------------------------------------------- 1 | from mixins import make_post, make_pager 2 | 3 | extends base.jade 4 | block content 5 | .autopagerize_page_element:.content 6 | for post in posts 7 | +make_post(post, is_detail=False) 8 | +make_pager('Older Posts', 'Newer Posts') 9 | -------------------------------------------------------------------------------- /interface.json: -------------------------------------------------------------------------------- 1 | [ 2 | {}, 3 | {}, 4 | {}, 5 | {}, 6 | { 7 | "title": "Extra", 8 | "title_zh_cn": "更多", 9 | "icon": "align-justify", 10 | "groups":[ 11 | { 12 | "title": "My Social", 13 | "title_zh_cn": "我的社交", 14 | "cells":[ 15 | { 16 | "parts_per_line": 4, 17 | "parts":[ 18 | { 19 | "key": "weibo", 20 | "title": "Weibo", 21 | "title_zh_cn": "微博", 22 | "placeholder": "WeiBo ID", 23 | "model": "text" 24 | }, 25 | { 26 | "key": "twitter", 27 | "title": "Twitter", 28 | "placeholder": "Twitter ID", 29 | "model": "text" 30 | } 31 | , 32 | { 33 | "key": "instagram", 34 | "title": "Instagram", 35 | "placeholder": "Instagram ID", 36 | "model": "text" 37 | } 38 | , 39 | { 40 | "key": "dribbble", 41 | "title": "Dribbble", 42 | "placeholder": "Dribbble ID", 43 | "model": "text" 44 | } 45 | ] 46 | } 47 | ] 48 | 49 | 50 | 51 | } 52 | ] 53 | } 54 | ] -------------------------------------------------------------------------------- /mixins.jade: -------------------------------------------------------------------------------- 1 | mixin make_post(post, is_detail=False) 2 | .post 3 | .post-title 4 | h3 5 | if is_detail 6 | a= post.title 7 | else 8 | a(href="{{post.url}}")= post.title 9 | if is_detail 10 | .post-content= post.content 11 | else 12 | .post-content= post.content.limit(200).no_pic 13 | .post-footer:.meta 14 | .info 15 | i.fa.fa-clock-o 16 | span.date= post.date.format("%Y-%m-%d") 17 | if site.configs.disqus 18 | i.fa.fa-comment-o 19 | a(href="{{post.url}}#disqus_thread") Comments 20 | .like-reblog-buttons 21 | .reblog-button 22 | a(href="javascript:void((function(s,d,e){try{}catch(e){}var f='http://service.weibo.com/share/share.php?',u=d.location.href,p=['url=',e(u),'&title=',e(d.title),'&appkey=2924220432'].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));") 23 | i.fa.fa-plus 24 | 25 | mixin make_pager(pre_text, next_text) 26 | .pagination 27 | ul.clearfix 28 | if paginator.has_next 29 | li.next.pagbuttons 30 | a.btn(role="navigation",href="{{ paginator.next_page_url}}")= next_text 31 | 32 | if paginator.has_previous 33 | li.pre.pagbuttons 34 | a.btn(role="navigation",href="{{ paginator.previous_page_url }}")= pre_text -------------------------------------------------------------------------------- /post+markdown+pages.jade: -------------------------------------------------------------------------------- 1 | from mixins import make_post 2 | 3 | extends base.jade 4 | block content 5 | .autopagerize_page_element:.content:.post-page 6 | +make_post(post, is_detail=True) 7 | include include/comments 8 | -------------------------------------------------------------------------------- /style/css/404.scss: -------------------------------------------------------------------------------- 1 | 2 | .page_404 { 3 | width: 100%; 4 | height: 200000px; 5 | background-image: url(/template/style/images/star.svg); 6 | 7 | .page_404_part1 { 8 | margin: 0 auto; 9 | width: 100%; 10 | text-align: center; 11 | padding-top: 100px; 12 | 13 | img { 14 | width: 3%; 15 | 16 | } 17 | } 18 | 19 | .page_404_part2 { 20 | margin: 0 auto; 21 | width: 100%; 22 | text-align: center; 23 | padding-top: 100px; 24 | img { 25 | 26 | width: 20%; 27 | 28 | } 29 | } 30 | 31 | .page_404_part3 { 32 | margin: 0 auto; 33 | width: 100%; 34 | text-align: center; 35 | bottom: 0; 36 | padding-top: 198696px; 37 | 38 | img { 39 | width: 30%; 40 | } 41 | } 42 | 43 | } -------------------------------------------------------------------------------- /style/css/style.scss: -------------------------------------------------------------------------------- 1 | /*basic styles starts*/ 2 | html { 3 | background-color: #fff; 4 | -webkit-font-smoothing: antialiased; 5 | } 6 | 7 | body { 8 | color: rgba(0, 0, 0, 0.6); 9 | font-family: 'Open Sans', sans-serif; 10 | font-size: 15px; 11 | width: 100%; 12 | margin: 0 auto 30px auto; 13 | background-color: #fff; 14 | 15 | } 16 | p { 17 | line-height: 1.9em; 18 | font-weight: 400; 19 | } 20 | 21 | a { 22 | text-decoration: none; 23 | } 24 | 25 | a:link, a:visited { 26 | opacity: 1; 27 | -webkit-transition: all .15s linear; 28 | -moz-transition: all .15s linear; 29 | -o-transition: all .15s linear; 30 | -ms-transition: all .15s linear; 31 | transition: all .15s linear; 32 | color: #424242; 33 | 34 | } 35 | 36 | a:hover, a:active { 37 | color: #555; 38 | 39 | } 40 | 41 | /*basic styles ends*/ 42 | 43 | 44 | 45 | /*animation starts*/ 46 | 47 | .animated { 48 | -webkit-animation-fill-mode: both; 49 | -moz-animation-fill-mode: both; 50 | -ms-animation-fill-mode: both; 51 | -o-animation-fill-mode: both; 52 | animation-fill-mode: both; 53 | -webkit-animation-duration: 1s; 54 | -moz-animation-duration: 1s; 55 | -ms-animation-duration: 1s; 56 | -o-animation-duration: 1s; 57 | animation-duration: 1s; 58 | } 59 | 60 | .animated.hinge { 61 | -webkit-animation-duration: 1s; 62 | -moz-animation-duration: 1s; 63 | -ms-animation-duration: 1s; 64 | -o-animation-duration: 1s; 65 | animation-duration: 1s; 66 | } 67 | 68 | @-webkit-keyframes fadeInDown { 69 | 0% { 70 | opacity: 0; 71 | -webkit-transform: translateY(-20px); 72 | } 73 | 74 | 100% { 75 | opacity: 1; 76 | -webkit-transform: translateY(0); 77 | } 78 | } 79 | 80 | @-moz-keyframes fadeInDown { 81 | 0% { 82 | opacity: 0; 83 | -moz-transform: translateY(-20px); 84 | } 85 | 86 | 100% { 87 | opacity: 1; 88 | -moz-transform: translateY(0); 89 | } 90 | } 91 | 92 | @-o-keyframes fadeInDown { 93 | 0% { 94 | opacity: 0; 95 | -o-transform: translateY(-20px); 96 | } 97 | 98 | 100% { 99 | opacity: 1; 100 | -o-transform: translateY(0); 101 | } 102 | } 103 | 104 | @keyframes fadeInDown { 105 | 0% { 106 | opacity: 0; 107 | transform: translateY(-20px); 108 | } 109 | 110 | 100% { 111 | opacity: 1; 112 | transform: translateY(0); 113 | } 114 | } 115 | 116 | .fadeInDown { 117 | -webkit-animation-name: fadeInDown; 118 | -moz-animation-name: fadeInDown; 119 | -o-animation-name: fadeInDown; 120 | animation-name: fadeInDown; 121 | } 122 | 123 | /*animation ends*/ 124 | 125 | 126 | 127 | 128 | .content { 129 | max-width: 700px; 130 | padding: 0px 20px; 131 | height: auto; 132 | margin: 0 auto; 133 | } 134 | 135 | .list_with_title .container{ 136 | width: 720px; 137 | margin: 0 auto; 138 | } 139 | .header { 140 | width: 720px; 141 | padding: 100px 0; 142 | margin: 0 auto; 143 | -webkit-background-size: cover; 144 | background-size: cover; 145 | 146 | .logo-title{ 147 | text-align: center; 148 | padding: 0 20px; 149 | 150 | 151 | .description { 152 | padding: 20px 5px 0px 5px; 153 | font-size: 14px; 154 | color: #565654; 155 | } 156 | 157 | 158 | .logo { 159 | margin: 0 auto; 160 | } 161 | 162 | .title{ 163 | h1 { 164 | text-transform: uppercase; 165 | font-size: 4rem; 166 | font-weight: bold; 167 | letter-spacing: 5px; 168 | line-height: 1; 169 | margin:0; 170 | } 171 | 172 | a { 173 | text-decoration: none; 174 | color: #000; 175 | font-size: 4rem; 176 | font-weight: bold; 177 | } 178 | } 179 | 180 | } 181 | 182 | .social-links { 183 | list-style: none; 184 | padding: 0; 185 | font-size: 14px; 186 | text-align: center; 187 | 188 | i{ 189 | margin-right: 3px; 190 | } 191 | 192 | li { 193 | display: inline; 194 | padding: 0 4px; 195 | line-height: 0; 196 | } 197 | 198 | a { 199 | color: #565654; 200 | } 201 | } 202 | } 203 | 204 | 205 | 206 | .post-page { 207 | padding-top: 100px; 208 | } 209 | 210 | 211 | .post { 212 | background-color: #FFF; 213 | margin-top: 30px; 214 | 215 | .post-title{ 216 | h1 { 217 | text-transform: uppercase; 218 | font-size: 20px; 219 | letter-spacing: 5px; 220 | line-height: 1; 221 | } 222 | 223 | h2 { 224 | text-transform: uppercase; 225 | letter-spacing: 1px; 226 | font-size: 2.5rem; 227 | line-height: 1; 228 | font-weight: 600; 229 | color: #5f5f5f; 230 | padding-bottom: 10px; 231 | 232 | } 233 | 234 | h3 { 235 | text-transform: uppercase; 236 | letter-spacing: 1px; 237 | line-height: 1; 238 | font-weight: 600; 239 | color: #5f5f5f; 240 | padding-bottom: 10px; 241 | 242 | } 243 | 244 | a { 245 | text-decoration: none; 246 | letter-spacing: 1px; 247 | color: #5f5f5f; 248 | 249 | } 250 | } 251 | 252 | .post-content{ 253 | a { 254 | text-decoration: none; 255 | letter-spacing: 1px; 256 | color: #3CBD10; 257 | } 258 | } 259 | 260 | .post-footer { 261 | padding: 0 0 60px 0; 262 | border-bottom: 1px solid #f2f2f2; 263 | 264 | 265 | .meta { 266 | max-width: 100%; 267 | height: 25px; 268 | color: #bbbbbb; 269 | 270 | .info { 271 | float: left; 272 | font-size: 12px; 273 | .date{ 274 | margin-right: 5px; 275 | } 276 | } 277 | 278 | a { 279 | text-decoration: none; 280 | color: #bbbbbb; 281 | } 282 | i{ 283 | margin-right: 3px; 284 | } 285 | } 286 | 287 | 288 | 289 | .tags{ 290 | padding-bottom: 15px; 291 | font-size: 13px; 292 | 293 | ul { 294 | list-style-type: none; 295 | display: inline; 296 | margin: 0; 297 | padding: 0; 298 | 299 | li { 300 | list-style-type: none; 301 | margin: 0; 302 | padding-right: 5px; 303 | display: inline; 304 | } 305 | } 306 | 307 | a{ 308 | text-decoration: none; 309 | color: rgba(0, 0, 0, 0.44); 310 | font-weight: 400; 311 | 312 | &:hover{ 313 | text-decoration: none; 314 | } 315 | } 316 | } 317 | } 318 | 319 | 320 | } 321 | 322 | 323 | 324 | 325 | .pagination { 326 | padding: 15px 0 40px 0; 327 | border-bottom: 1px solid #f2f2f2; 328 | 329 | ul { 330 | list-style: none; 331 | margin: 0; 332 | padding: 0; 333 | height: 13px; 334 | 335 | li { 336 | margin: 0 2px 0 2px; 337 | display: inline; 338 | line-height: 1; 339 | 340 | a { 341 | text-decoration: none; 342 | } 343 | } 344 | } 345 | 346 | .pre { 347 | float: left; 348 | } 349 | 350 | .next { 351 | float: right; 352 | } 353 | } 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | .like-reblog-buttons { 363 | float: right; 364 | } 365 | 366 | .like-button { 367 | float: right; 368 | padding: 0 0 0 10px; 369 | } 370 | 371 | .reblog-button { 372 | float: right; 373 | padding: 0; 374 | } 375 | 376 | #install-btn { 377 | position: fixed; 378 | bottom: 0px; 379 | right: 6px 380 | } 381 | 382 | #disqus_thread { 383 | padding: 30px 0; 384 | border-bottom: 1px solid #f2f2f2; 385 | } 386 | 387 | .footer { 388 | clear: both; 389 | max-width: 700px; 390 | text-align: center; 391 | font-size: 10px; 392 | padding-top: 60px; 393 | margin: 0 auto; 394 | 395 | a { 396 | color: #A6A6A6; 397 | margin-left: 3px; 398 | } 399 | span{ 400 | margin-right: 3px; 401 | } 402 | .by_farbox{ 403 | margin-top: 30px; 404 | } 405 | } 406 | 407 | 408 | 409 | 410 | /*for archive*/ 411 | .list-with-title{ 412 | font-size: 14px; 413 | margin: 0; 414 | padding: 0; 415 | 416 | li { 417 | list-style-type: none; 418 | padding: 0; 419 | } 420 | 421 | .listing-title { 422 | font-size: 24px; 423 | color: #666666; 424 | font-weight: bold; 425 | padding-top: 10px; 426 | line-height: 2.2em; 427 | } 428 | .listing{ 429 | margin: 0 0 50px 0; 430 | padding: 0; 431 | 432 | 433 | .listing-post { 434 | padding-bottom: 5px; 435 | 436 | .post-time { 437 | float: right; 438 | color: #C5C5C5; 439 | } 440 | 441 | a { 442 | color: #8F8F8F; 443 | 444 | &:hover{ 445 | color: #3CBD10; 446 | } 447 | } 448 | 449 | } 450 | } 451 | } 452 | 453 | 454 | /* 评论样式 */ 455 | 456 | .comment-count { 457 | color: #666; 458 | } 459 | 460 | .tab-community { 461 | color: #666; 462 | } 463 | 464 | .read_more { 465 | font-size: 14px; 466 | } 467 | 468 | .back-button { 469 | padding-top: 30px; 470 | max-width: 100px; 471 | padding-left: 40px; 472 | float: left; 473 | } 474 | 475 | /* 按钮样式 */ 476 | a.btn { 477 | color: #868686; 478 | font-weight: 400; 479 | 480 | } 481 | 482 | .btn { 483 | display: inline-block; 484 | position: relative; 485 | outline: 0; 486 | color: rgba(0, 0, 0, 0.44); 487 | background: rgba(0, 0, 0, 0); 488 | font-size: 14px; 489 | text-align: center; 490 | text-decoration: none; 491 | cursor: pointer; 492 | border: 1px solid rgba(0, 0, 0, 0.15); 493 | white-space: nowrap; 494 | font-weight: 400; 495 | font-style: normal; 496 | border-radius: 999em; 497 | } 498 | 499 | .btn:hover { 500 | display: inline-block; 501 | position: relative; 502 | outline: 0px; 503 | color: #3CBD10; 504 | background: rgba(0, 0, 0, 0); 505 | font-size: 14px; 506 | text-align: center; 507 | text-decoration: none; 508 | cursor: pointer; 509 | border: 1px solid #3CBD10; 510 | white-space: nowrap; 511 | font-weight: 400; 512 | font-style: normal; 513 | border-radius: 999em; 514 | } 515 | 516 | [role="back"] { 517 | padding: 0.5em 1.25em; 518 | line-height: 1.666em; 519 | } 520 | 521 | [role="home"] { 522 | padding: 0.5em 1.25em; 523 | line-height: 1.666em; 524 | } 525 | 526 | [role="navigation"] { 527 | padding: 0.5em 1.25em; 528 | line-height: 1.666em; 529 | } 530 | 531 | [role="tags"] { 532 | padding: 6px 12px; 533 | } 534 | 535 | /* Menu样式 */ 536 | .menu { 537 | float: right; 538 | padding-top: 30px; 539 | 540 | .btn-down{ 541 | margin: 0px; 542 | li { 543 | list-style: none; 544 | width: 100px; 545 | 546 | a { 547 | display: inline-block; 548 | position: relative; 549 | padding: 0.5em 1.25em; 550 | outline: 0; 551 | color: rgba(0, 0, 0, 0.44); 552 | background: rgba(0, 0, 0, 0); 553 | font-size: 14px; 554 | text-align: center; 555 | text-decoration: none; 556 | cursor: pointer; 557 | border: 1px solid rgba(0, 0, 0, 0.15); 558 | white-space: nowrap; 559 | font-weight: 400; 560 | font-style: normal; 561 | border-radius: 999em; 562 | margin-top: 5px; 563 | 564 | &:hover{ 565 | position: relative; 566 | padding: 0.5em 1.25em; 567 | outline: 0; 568 | color: #fff; 569 | background: #3CBD10; 570 | font-size: 14px; 571 | text-align: center; 572 | text-decoration: none; 573 | cursor: pointer; 574 | border: 1px solid rgba(0, 0, 0, 0.15); 575 | white-space: nowrap; 576 | font-weight: 400; 577 | font-style: normal; 578 | border-radius: 999em; 579 | margin-top: 5px; 580 | } 581 | } 582 | 583 | } 584 | } 585 | 586 | .btn-down div { 587 | position: absolute; 588 | visibility: hidden; 589 | width: 100px; 590 | float: right; 591 | 592 | } 593 | 594 | } 595 | 596 | 597 | @media screen and (max-width: 900px) { 598 | .header { 599 | } 600 | 601 | .content{ 602 | margin-top: 100px; 603 | } 604 | 605 | .menu{ 606 | position: absolute; 607 | top: 0; 608 | right: 0; 609 | padding-top: 15px; 610 | 611 | .btn-down li a{ 612 | background: #fff; 613 | } 614 | } 615 | 616 | .post { 617 | margin-top: 40px; 618 | } 619 | 620 | .post-footer { 621 | padding-bottom: 30px; 622 | } 623 | 624 | } 625 | 626 | 627 | -------------------------------------------------------------------------------- /style/images/404.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 404 5 | Created with Sketch Beta. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /style/images/mar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Oops！ + 火星上也没有！ + Oval 2 + Oval 2 Copy + Oval 2 Copy 2 + Oval 2 Copy 3 + Oval 2 Copy 4 + Oval 2 Copy 5 + Oval 2 Copy 6 Mask Copy 5 | Created with Sketch Beta. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Oops 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 | -------------------------------------------------------------------------------- /style/images/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | star 5 | Created with Sketch Beta. 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 | -------------------------------------------------------------------------------- /style/images/star2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | star2 5 | Created with Sketch Beta. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /style/js/autoscroll.js: -------------------------------------------------------------------------------- 1 | /* 2 | * # AutoScroll 1.1.1 3 | * 4 | * http://github.com/withassociates/autoscroll.js 5 | * 6 | * Simplest possible autoscrolling library. 7 | * Creates a top-level instance to start/stop the behaviour. 8 | * 9 | * ## Usage 10 | * 11 | * window.autoscroll.start(); 12 | * window.autoscroll.stop(); 13 | * 14 | * ## Settings & Defaults 15 | * 16 | * window.autoscroll.interval = 1000 / 60 17 | * window.autoscroll.threshold = 50 18 | * window.autoscroll.velocity = 2 19 | * window.autoscroll.acceleration = 0.01 20 | * 21 | * ## Dependencies 22 | * 23 | * * jQuery ~> 1.5.2 24 | * 25 | * ## Contributors 26 | * 27 | * * jamie@withassociates.com 28 | * 29 | * Licensed under the terms of the MIT license. 30 | */ 31 | 32 | (function($) { 33 | 34 | // class AutoScroll 35 | var AutoScroll = function() { 36 | var self = this; 37 | self.version = '1.1.1'; 38 | 39 | // starts autoscroll listening for events and performing scrolling 40 | self.start = function() { 41 | if (self.running) return; 42 | reset(); 43 | listen(); 44 | update(); 45 | self.running = true; 46 | } 47 | 48 | // shuts down autoscroll 49 | self.stop = function() { 50 | if (!self.running) return; 51 | clearTimeout(timeout); 52 | stopListening(); 53 | self.running = false; 54 | } 55 | 56 | // defaults 57 | self.interval = 1000 / 60; 58 | self.threshold = 50; 59 | self.velocity = 2; 60 | self.acceleration = 0.01; 61 | 62 | // private properties 63 | var mouseNow, 64 | reset, 65 | scrollingUp, 66 | scrollingDown, 67 | timeout, 68 | viewportNow, 69 | pageNow, 70 | whenScrollingStarted, 71 | $window = $(window), 72 | $document = $(document); 73 | 74 | // private methods 75 | var checkTop, 76 | checkBottom, 77 | listen, 78 | stopListening, 79 | onMouseMove, 80 | onResize, 81 | update, 82 | velocity, 83 | triggerMouseMove; 84 | 85 | onMouseMove = function(event) { 86 | mouseNow = { 87 | pageX: event.pageX, 88 | pageY: event.pageY, 89 | x: event.pageX - $window.scrollLeft(), 90 | y: event.pageY - $window.scrollTop() 91 | }; 92 | } 93 | 94 | onResize = function() { 95 | viewportNow = { 96 | width: $window.width(), 97 | height: $window.height() 98 | }; 99 | pageNow = { 100 | width: $('body').outerWidth(), 101 | height: $('body').outerHeight() 102 | } 103 | $('body > *').each(function() { 104 | pageNow.height = Math.max(pageNow.height, $(this).outerHeight()); 105 | }); 106 | } 107 | 108 | checkTop = function() { 109 | var isPastThreshold = mouseNow.y < self.threshold, 110 | isAtMin = $window.scrollTop() <= 0; 111 | 112 | if (isPastThreshold && !isAtMin) { 113 | if (!scrollingUp) { 114 | scrollingUp = true; 115 | whenScrollingStarted = new Date(); 116 | } 117 | var v = velocity(); 118 | $window.scrollTop($window.scrollTop() - v); 119 | triggerMouseMove(0, -v); 120 | } else { 121 | scrollingUp = false; 122 | } 123 | } 124 | 125 | checkBottom = function() { 126 | var isPastThreshold = mouseNow.y > viewportNow.height - self.threshold, 127 | isAtMax = $window.scrollTop() >= pageNow.height - $window.height(); 128 | 129 | if (isPastThreshold && !isAtMax) { 130 | if (!scrollingDown) { 131 | scrollingDown = true; 132 | whenScrollingStarted = new Date(); 133 | } 134 | var v = velocity(); 135 | $window.scrollTop($window.scrollTop() + v); 136 | triggerMouseMove(0, v); 137 | } else { 138 | scrollingDown = false; 139 | } 140 | } 141 | 142 | velocity = function() { 143 | var now = new Date(), 144 | time = now - whenScrollingStarted; 145 | 146 | return Math.round(self.velocity + (self.acceleration * time)); 147 | } 148 | 149 | triggerMouseMove = function(dx, dy) { 150 | $document.trigger($.Event('mousemove', { 151 | pageX: mouseNow.pageX + dx, 152 | pageY: mouseNow.pageY + dy 153 | })); 154 | } 155 | 156 | update = function() { 157 | if (mouseNow) { 158 | checkTop(); 159 | checkBottom(); 160 | } 161 | timeout = setTimeout(update, self.interval); 162 | } 163 | 164 | reset = function() { 165 | delete mouseNow; 166 | delete scrollingUp; 167 | delete scrollingDown; 168 | delete whenScrollingStarted; 169 | } 170 | 171 | listen = function() { 172 | $document.bind('mousemove', onMouseMove); 173 | $document.bind('resize', onResize); 174 | onResize(); 175 | } 176 | 177 | stopListening = function() { 178 | $document.unbind('mousemove', onMouseMove); 179 | $document.unbind('resize', onResize); 180 | } 181 | 182 | } 183 | 184 | // Create top-level instance 185 | // We don't want more than one, so we can lose the constructor after this. 186 | window.autoscroll = new AutoScroll(); 187 | 188 | })(jQuery); 189 | -------------------------------------------------------------------------------- /style/js/font.js: -------------------------------------------------------------------------------- 1 | WebFontConfig = { 2 | google: { families: [ 'Open+Sans:700italic,400,300,800,700,600:cyrillic-ext,latin,latin-ext' ] } 3 | }; 4 | (function() { 5 | var wf = document.createElement('script'); 6 | wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 7 | '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 8 | wf.type = 'text/javascript'; 9 | wf.async = 'true'; 10 | var s = document.getElementsByTagName('script')[0]; 11 | s.parentNode.insertBefore(wf, s); 12 | })(); -------------------------------------------------------------------------------- /style/js/jquery-migrate-1.2.1.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery Migrate v1.2.1 | (c) 2005, 2013 jQuery Foundation, Inc. and other contributors | jquery.org/license */ 2 | jQuery.migrateMute===void 0&&(jQuery.migrateMute=!0),function(e,t,n){function r(n){var r=t.console;i[n]||(i[n]=!0,e.migrateWarnings.push(n),r&&r.warn&&!e.migrateMute&&(r.warn("JQMIGRATE: "+n),e.migrateTrace&&r.trace&&r.trace()))}function a(t,a,i,o){if(Object.defineProperty)try{return Object.defineProperty(t,a,{configurable:!0,enumerable:!0,get:function(){return r(o),i},set:function(e){r(o),i=e}}),n}catch(s){}e._definePropertyBroken=!0,t[a]=i}var i={};e.migrateWarnings=[],!e.migrateMute&&t.console&&t.console.log&&t.console.log("JQMIGRATE: Logging is active"),e.migrateTrace===n&&(e.migrateTrace=!0),e.migrateReset=function(){i={},e.migrateWarnings.length=0},"BackCompat"===document.compatMode&&r("jQuery is not compatible with Quirks Mode");var o=e("",{size:1}).attr("size")&&e.attrFn,s=e.attr,u=e.attrHooks.value&&e.attrHooks.value.get||function(){return null},c=e.attrHooks.value&&e.attrHooks.value.set||function(){return n},l=/^(?:input|button)$/i,d=/^[238]$/,p=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,f=/^(?:checked|selected)$/i;a(e,"attrFn",o||{},"jQuery.attrFn is deprecated"),e.attr=function(t,a,i,u){var c=a.toLowerCase(),g=t&&t.nodeType;return u&&(4>s.length&&r("jQuery.fn.attr( props, pass ) is deprecated"),t&&!d.test(g)&&(o?a in o:e.isFunction(e.fn[a])))?e(t)[a](i):("type"===a&&i!==n&&l.test(t.nodeName)&&t.parentNode&&r("Can't change the 'type' of an input or button in IE 6/7/8"),!e.attrHooks[c]&&p.test(c)&&(e.attrHooks[c]={get:function(t,r){var a,i=e.prop(t,r);return i===!0||"boolean"!=typeof i&&(a=t.getAttributeNode(r))&&a.nodeValue!==!1?r.toLowerCase():n},set:function(t,n,r){var a;return n===!1?e.removeAttr(t,r):(a=e.propFix[r]||r,a in t&&(t[a]=!0),t.setAttribute(r,r.toLowerCase())),r}},f.test(c)&&r("jQuery.fn.attr('"+c+"') may use property instead of attribute")),s.call(e,t,a,i))},e.attrHooks.value={get:function(e,t){var n=(e.nodeName||"").toLowerCase();return"button"===n?u.apply(this,arguments):("input"!==n&&"option"!==n&&r("jQuery.fn.attr('value') no longer gets properties"),t in e?e.value:null)},set:function(e,t){var a=(e.nodeName||"").toLowerCase();return"button"===a?c.apply(this,arguments):("input"!==a&&"option"!==a&&r("jQuery.fn.attr('value', val) no longer sets properties"),e.value=t,n)}};var g,h,v=e.fn.init,m=e.parseJSON,y=/^([^<]*)(<[\w\W]+>)([^>]*)$/;e.fn.init=function(t,n,a){var i;return t&&"string"==typeof t&&!e.isPlainObject(n)&&(i=y.exec(e.trim(t)))&&i[0]&&("<"!==t.charAt(0)&&r("$(html) HTML strings must start with '<' character"),i[3]&&r("$(html) HTML text after last tag is ignored"),"#"===i[0].charAt(0)&&(r("HTML string cannot start with a '#' character"),e.error("JQMIGRATE: Invalid selector string (XSS)")),n&&n.context&&(n=n.context),e.parseHTML)?v.call(this,e.parseHTML(i[2],n,!0),n,a):v.apply(this,arguments)},e.fn.init.prototype=e.fn,e.parseJSON=function(e){return e||null===e?m.apply(this,arguments):(r("jQuery.parseJSON requires a valid JSON string"),null)},e.uaMatch=function(e){e=e.toLowerCase();var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||0>e.indexOf("compatible")&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}},e.browser||(g=e.uaMatch(navigator.userAgent),h={},g.browser&&(h[g.browser]=!0,h.version=g.version),h.chrome?h.webkit=!0:h.webkit&&(h.safari=!0),e.browser=h),a(e,"browser",e.browser,"jQuery.browser is deprecated"),e.sub=function(){function t(e,n){return new t.fn.init(e,n)}e.extend(!0,t,this),t.superclass=this,t.fn=t.prototype=this(),t.fn.constructor=t,t.sub=this.sub,t.fn.init=function(r,a){return a&&a instanceof e&&!(a instanceof t)&&(a=t(a)),e.fn.init.call(this,r,a,n)},t.fn.init.prototype=t.fn;var n=t(document);return r("jQuery.sub() is deprecated"),t},e.ajaxSetup({converters:{"text json":e.parseJSON}});var b=e.fn.data;e.fn.data=function(t){var a,i,o=this[0];return!o||"events"!==t||1!==arguments.length||(a=e.data(o,t),i=e._data(o,t),a!==n&&a!==i||i===n)?b.apply(this,arguments):(r("Use of jQuery.fn.data('events') is deprecated"),i)};var j=/\/(java|ecma)script/i,w=e.fn.andSelf||e.fn.addBack;e.fn.andSelf=function(){return r("jQuery.fn.andSelf() replaced by jQuery.fn.addBack()"),w.apply(this,arguments)},e.clean||(e.clean=function(t,a,i,o){a=a||document,a=!a.nodeType&&a[0]||a,a=a.ownerDocument||a,r("jQuery.clean() is deprecated");var s,u,c,l,d=[];if(e.merge(d,e.buildFragment(t,a).childNodes),i)for(c=function(e){return!e.type||j.test(e.type)?o?o.push(e.parentNode?e.parentNode.removeChild(e):e):i.appendChild(e):n},s=0;null!=(u=d[s]);s++)e.nodeName(u,"script")&&c(u)||(i.appendChild(u),u.getElementsByTagName!==n&&(l=e.grep(e.merge([],u.getElementsByTagName("script")),c),d.splice.apply(d,[s+1,0].concat(l)),s+=l.length));return d});var Q=e.event.add,x=e.event.remove,k=e.event.trigger,N=e.fn.toggle,T=e.fn.live,M=e.fn.die,S="ajaxStart|ajaxStop|ajaxSend|ajaxComplete|ajaxError|ajaxSuccess",C=RegExp("\\b(?:"+S+")\\b"),H=/(?:^|\s)hover(\.\S+|)\b/,A=function(t){return"string"!=typeof t||e.event.special.hover?t:(H.test(t)&&r("'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'"),t&&t.replace(H,"mouseenter$1 mouseleave$1"))};e.event.props&&"attrChange"!==e.event.props[0]&&e.event.props.unshift("attrChange","attrName","relatedNode","srcElement"),e.event.dispatch&&a(e.event,"handle",e.event.dispatch,"jQuery.event.handle is undocumented and deprecated"),e.event.add=function(e,t,n,a,i){e!==document&&C.test(t)&&r("AJAX events should be attached to document: "+t),Q.call(this,e,A(t||""),n,a,i)},e.event.remove=function(e,t,n,r,a){x.call(this,e,A(t)||"",n,r,a)},e.fn.error=function(){var e=Array.prototype.slice.call(arguments,0);return r("jQuery.fn.error() is deprecated"),e.splice(0,0,"error"),arguments.length?this.bind.apply(this,e):(this.triggerHandler.apply(this,e),this)},e.fn.toggle=function(t,n){if(!e.isFunction(t)||!e.isFunction(n))return N.apply(this,arguments);r("jQuery.fn.toggle(handler, handler...) is deprecated");var a=arguments,i=t.guid||e.guid++,o=0,s=function(n){var r=(e._data(this,"lastToggle"+t.guid)||0)%o;return e._data(this,"lastToggle"+t.guid,r+1),n.preventDefault(),a[r].apply(this,arguments)||!1};for(s.guid=i;a.length>o;)a[o++].guid=i;return this.click(s)},e.fn.live=function(t,n,a){return r("jQuery.fn.live() is deprecated"),T?T.apply(this,arguments):(e(this.context).on(t,this.selector,n,a),this)},e.fn.die=function(t,n){return r("jQuery.fn.die() is deprecated"),M?M.apply(this,arguments):(e(this.context).off(t,this.selector||"**",n),this)},e.event.trigger=function(e,t,n,a){return n||C.test(e)||r("Global events are undocumented and deprecated"),k.call(this,e,t,n||document,a)},e.each(S.split("|"),function(t,n){e.event.special[n]={setup:function(){var t=this;return t!==document&&(e.event.add(document,n+"."+e.guid,function(){e.event.trigger(n,null,t,!0)}),e._data(this,n,e.guid++)),!1},teardown:function(){return this!==document&&e.event.remove(document,n+"."+e._data(this,n)),!1}}})}(jQuery,window); -------------------------------------------------------------------------------- /style/js/jquery.appear.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery appear plugin 3 | * 4 | * Copyright (c) 2012 Andrey Sidorov 5 | * licensed under MIT license. 6 | * 7 | * https://github.com/morr/jquery.appear/ 8 | * 9 | * Version: 0.3.3 10 | */ 11 | (function($) { 12 | var selectors = []; 13 | 14 | var check_binded = false; 15 | var check_lock = false; 16 | var defaults = { 17 | interval: 250, 18 | force_process: false 19 | } 20 | var $window = $(window); 21 | 22 | var $prior_appeared; 23 | 24 | function process() { 25 | check_lock = false; 26 | for (var index = 0; index < selectors.length; index++) { 27 | var $appeared = $(selectors[index]).filter(function() { 28 | return $(this).is(':appeared'); 29 | }); 30 | 31 | $appeared.trigger('appear', [$appeared]); 32 | 33 | if ($prior_appeared) { 34 | var $disappeared = $prior_appeared.not($appeared); 35 | $disappeared.trigger('disappear', [$disappeared]); 36 | } 37 | $prior_appeared = $appeared; 38 | } 39 | } 40 | 41 | // "appeared" custom filter 42 | $.expr[':']['appeared'] = function(element) { 43 | var $element = $(element); 44 | if (!$element.is(':visible')) { 45 | return false; 46 | } 47 | 48 | var window_left = $window.scrollLeft(); 49 | var window_top = $window.scrollTop(); 50 | var offset = $element.offset(); 51 | var left = offset.left; 52 | var top = offset.top; 53 | 54 | if (top + $element.height() >= window_top && 55 | top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() && 56 | left + $element.width() >= window_left && 57 | left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) { 58 | return true; 59 | } else { 60 | return false; 61 | } 62 | } 63 | 64 | $.fn.extend({ 65 | // watching for element's appearance in browser viewport 66 | appear: function(options) { 67 | var opts = $.extend({}, defaults, options || {}); 68 | var selector = this.selector || this; 69 | if (!check_binded) { 70 | var on_check = function() { 71 | if (check_lock) { 72 | return; 73 | } 74 | check_lock = true; 75 | 76 | setTimeout(process, opts.interval); 77 | }; 78 | 79 | $(window).scroll(on_check).resize(on_check); 80 | check_binded = true; 81 | } 82 | 83 | if (opts.force_process) { 84 | setTimeout(process, opts.interval); 85 | } 86 | selectors.push(selector); 87 | return $(selector); 88 | } 89 | }); 90 | 91 | $.extend({ 92 | // force elements's appearance check 93 | force_appear: function() { 94 | if (check_binded) { 95 | process(); 96 | return true; 97 | }; 98 | return false; 99 | } 100 | }); 101 | })(jQuery); -------------------------------------------------------------------------------- /style/js/menu.js: -------------------------------------------------------------------------------- 1 | // Copyright 2006-2007 javascript-array.com 2 | 3 | var timeout = 800; 4 | var closetimer = 0; 5 | var ddmenuitem = 0; 6 | 7 | // open hidden layer 8 | function mopen(id) 9 | { 10 | // cancel close timer 11 | mcancelclosetime(); 12 | 13 | // close old layer 14 | if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 15 | 16 | // get new layer and show it 17 | ddmenuitem = document.getElementById(id); 18 | ddmenuitem.style.visibility = 'visible'; 19 | 20 | } 21 | // close showed layer 22 | function mclose() 23 | { 24 | if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; 25 | } 26 | 27 | // go close timer 28 | function mclosetime() 29 | { 30 | closetimer = window.setTimeout(mclose, timeout); 31 | } 32 | 33 | // cancel close timer 34 | function mcancelclosetime() 35 | { 36 | if(closetimer) 37 | { 38 | window.clearTimeout(closetimer); 39 | closetimer = null; 40 | } 41 | } 42 | 43 | // close layer when click-out 44 | document.onclick = mclose; --------------------------------------------------------------------------------