diff --git a/.gitignore b/.gitignore index f452166..bf2f0a6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ _site .sass-cache .jekyll-metadata -.vscode \ No newline at end of file +.vscode +.idea +.DS_Store diff --git a/README-zh-cn.md b/README-zh-cn.md new file mode 100644 index 0000000..dc90a5b --- /dev/null +++ b/README-zh-cn.md @@ -0,0 +1,409 @@ +# 关于这个简洁明快的博客主题 🤘🤘🤘 + +[![GitHub stars](https://img.shields.io/github/stars/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/stargazers) +[![GitHub forks](https://img.shields.io/github/forks/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/network) +[![GitHub issues](https://img.shields.io/github/issues/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues) +[![GitHub release](https://img.shields.io/github/release/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/releases) +[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Gaohaoyang/gaohaoyang.github.io/master/LICENSE) + +随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 + +**博客访问地址：[http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**。若您喜欢这个新的博客主题，请给我个star以示鼓励吧，欢迎大家使用。 + +## 目录 + +* [预览图](#预览图) +* [各部分详情](#各部分详情) + * [主页 Home](#主页-home) + * [归档页 Archives](#归档页-archives) + * [分类页 Categories](#分类页-categories) + * [标签页 Tags](#标签页-tags) + * [收藏页 Collections](#收藏页-collections) + * [展示页 Demo](#展示页-demo) + * [关于页 About](#关于页-about) + * [评论](#评论) + * [目录 Contents](#目录-contents) + * [代码高亮](#代码高亮) + * [灯泡效果](#灯泡效果) + * [移动端适配](#移动端适配) + * [Footer](#footer) + * [统计](#统计) +* [博客主题使用方法](#博客主题使用方法) + * [1. 安装 ruby 和 jekyll 环境](#1-安装-ruby-和-jekyll-环境) + * [2. 复制博客主题代码](#2-复制博客主题代码) + * [3. 修改参数](#3-修改参数) + * [基本信息](#基本信息) + * [链接信息](#链接信息) + * [评论信息](#评论信息) + * [统计信息](#统计信息) + * [4. 写文章](#4-写文章) + * [5. 本地运行](#5-本地运行) + * [6. 发布到 GitHub](#6-发布到-github) +* [捐助 donate](#捐助-donate) +* [Update Log](#update-log) +* [License](#license) + +## 预览图 + +先上预览图： + +主页 +![index](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bdli86awj211k0oyqen.jpg) + +文章页 +![post](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bdmzb9v6j210p0j7gwn.jpg) + +## 各部分详情 + +### 主页 Home + +主页默认展示5篇文章的摘要部分，用户点击标题或阅读全文后进入文章页。右侧为近期文章、分类和标签3块区域，用户可以继续在这部分添加区域，只需修改`index.html`即可。 + +### 归档页 Archives + +按照年份归档文章。 + +### 分类页 Categories + +按照文章的分类，显示文章。 + +### 标签页 Tags + +按照文章的标签显示文章。 + +### 收藏页 Collections + +本页是用`markdown`写的，用户可以收藏自己喜欢的文章链接。 + +### 展示页 Demo + +使用 [Masonry](http://masonry.desandro.com/) 重写了瀑布流布局，响应式布局，更好的交互体验。 + +### 关于页 About + +对个人和对本站的介绍，使用`markdown`写的。 + +### 评论 + +支持 [多说评论](http://duoshuo.com/) 和 [disqus](https://disqus.com/) 评论。 + +只需要在 `_config.yml` 修改相应的配置`short_name`即可，如下： + +```yml +# comments +# two ways to comment, only choose one, and use your own short name +# 两种评论插件，选一个就好了，使用自己的 short_name +duoshuo_shortname: #xxx +disqus_shortname: xxx +``` + +### 目录 Contents + +页面滚动时目录固定在屏幕右侧，若目录高度超出屏幕高度，目录产生滚动条。 + +### 代码高亮 + +随着 jekyll 的升级，目前代码高亮使用风格与 github 上的 markdown 写法一致。 + +### 灯泡效果 + +![light](http://ww3.sinaimg.cn/large/7011d6cfjw1f3be6y4vp3j209i02rweg.jpg) + +可以看到导航按钮高亮时，下面的阴影效果，我把这个称为灯泡效果。 + +### 移动端适配 + +完美适配移动端。 + +![mobile](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bebnzxkpj20ah0fzgp4.jpg) + +### Footer + +**欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。** Theme designed by [HyG](https://github.com/gaohaoyang). +![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) + +### 统计 + +博客支持百度统计和 Google Analytics，只需在`_config.yml`中配置响应的id即可，代码如下。 + +```yml +# statistic analysis 统计代码 +# 百度统计 id，将统计代码替换为自己的百度统计id，即 +# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; +# xxxxx字符串 +baidu_tongji_id: xxxxxxxxxxxx +google_analytics_id: UA-xxxxxxxx # google 分析追踪id +``` + +## 博客主题使用方法 + +欢迎使用这个主题，以下简单说一下使用方法。 + +### 1. 安装 ruby 和 jekyll 环境 + +这一步和第5步主要是为了让博客系统在本地跑起来，如果不想在本地运行，可以无视这两步，但我还是强烈建议试着先在本地跑起来，没有什么问题后再推送的 GitHub 上。 + +Windows 用户可以直接使用 [RubyInstaller](http://rubyinstaller.org/) 安装 ruby 环境。后续的操作中可能还会提示安装 DevKit，根据提示操作即可。 + +建议使用 [RubyGems 镜像- Ruby China](https://gems.ruby-china.org/) 安装 jekyll。 + +安装 jekyll 命令如下 + +``` +gem install jekyll +``` + +详情可以查看 jekyll 官网。[https://jekyllrb.com/](https://jekyllrb.com/) 或 中文翻译版 jekyll 官网[http://jekyllcn.com/](http://jekyllcn.com/) （中文文档翻译落后于英文官网，有兴趣有时间的小伙伴可以参与翻译，为开源世界贡献一份力哦~） + +在 mac OS X El Capitan 系统下安装可能会出现问题，解决方案详情见 jekyll 官网: [ https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011]( https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011) + +对 jekyll 本身感兴趣的同学可以看看 jekyll 源码: [https://github.com/jekyll/jekyll](https://github.com/jekyll/jekyll) + +![jekyll logo](http://jekyllcn.com/img/logo-2x.png) + +### 2. 复制博客主题代码 + +可以直接 clone 、下载 或 fork 这个仓库的代码即可 + +### 3. 修改参数 + +主要修改 `_config.yml` 中的参数和自己的网站小图`favicon.ico` + +`_config.yml`文件中 + +#### 基本信息 + +主要用于网站头部header。 + +```yml +# Site settings +title: HyG +brief-intro: Front-end Dev Engineer +baseurl: "" # the subpath of your site, e.g. /blog +url: "http://gaohaoyang.github.io" # the base hostname & protocol for your site +``` + +#### 链接信息 + +主要用于网站底部footer。 + +```yml +# other links +twitter_username: gaohaoyang126 +facebook_username: gaohaoyang.water +github_username: Gaohaoyang +email: gaohaoyang126@126.com +weibo_username: 3115521wh +zhihu_username: gaohaoyang +linkedIn_username: gaohaoyang +dribbble_username: + +description_footer: 本站记录我前端之旅的沿途风景！ +``` + +#### 评论信息 + +获取`short_name`的方法： + +访问 https://disqus.com/ 或 http://duoshuo.com/ 根据提示操作即可。 + +```yml +# comments +# two ways to comment, only choose one, and use your own short name +# 两种评论插件，选一个就好了，使用自己的 short_name +duoshuo_shortname: #hygblog +disqus_shortname: gaohaoyang +``` + +运行成功后，可以在 disqus 或 多说 的后台管理页看到相关信息。 + +#### 统计信息 + +获取 百度统计id 或 Google Analytics id 的方法： + +访问 http://tongji.baidu.com/ 或 https://www.google.com/analytics/ 根据提示操作即可。当然，如果不想添加统计信息，这两个参数可以不填。 + +```yml +# statistic analysis 统计代码 +# 百度统计 id，将统计代码替换为自己的百度统计id，即 +# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; +# xxxxx字符串 +baidu_tongji_id: cf8506e0ef223e57ff6239944e5d46a4 +google_analytics_id: UA-72449510-4 # google 分析追踪id +``` + +成功后，进入自己的百度统计或 Google Analytics 后台管理，即可看到网站的访问量、访客等相关信息。 + +### 4. 写文章 + +`_posts`目录下存放文章信息，文章头部注明 layout(布局)、title、date、categories、tags、author(可选)、mathjax(可选，点击[这里](https://www.mathjax.org/)查看更多关于`Mathjax`)，如下： + +``` +--- +layout: post +title: "对这个 jekyll 博客主题的改版和重构" +date: 2016-03-12 11:40:18 +0800 +categories: jekyll +tags: jekyll 端口 markdown Foxit RubyGems HTML CSS +author: Haoyang Gao +mathjax: true +--- +``` + +下面这两行代码为产生目录时使用 +``` +* content +{:toc} +``` + +文章中存在的4次换行为摘要分割符，换行前的内容会以摘要的形式显示在主页Home上，进入文章页不影响。 + +换行符的设置见配置文件`_config.yml`的 excerpt，如下： + +```yml +# excerpt +excerpt_separator: "\n\n\n\n" +``` + +使用 markdown 语法写文章。 + +代码风格与 GitHub 上 README 或 issue 中的一致。使用3个\`\`\`的方式。 + +### 5. 本地运行 + +本地执行 + +``` +jekyll s +``` + +显示 + +``` +Configuration file: E:/GitWorkSpace/blog/_config.yml + Source: E:/GitWorkSpace/blog + Destination: E:/GitWorkSpace/blog/_site + Incremental build: disabled. Enable with --incremental + Generating... + done in 6.33 seconds. + Please add the following to your Gemfile to avoid polling for changes: + gem 'wdm', '>= 0.1.0' if Gem.win_platform? + Auto-regeneration: enabled for 'E:/GitWorkSpace/blog' +Configuration file: E:/GitWorkSpace/blog/_config.yml + Server address: http://127.0.0.1:4000/ + Server running... press ctrl-c to stop. +``` + +在本地访问 localhost:4000 即可看到博客主页。 + +若安装了 Foxit 福昕pdf阅读器可能会占用4000端口，关闭 Foxit服务 或切换 jekyll 端口即可解决。详情见文章：[对这个 jekyll 博客主题的改版和重构](http://gaohaoyang.github.io/2016/03/12/jekyll-theme-version-2.0/) + +若正在使用全局代理，可能会报错502，关闭全局代理即可。 + +### 6. 发布到 GitHub + +没什么问题，推送到自己的博客仓库即可。 + +## 捐助 donate + +您也可以捐助我喝杯咖啡！感谢！ + + + +| 支付宝 | 微信支付 | PayPal | +|:---------------------------------------------------------------------------:|:---------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------:| +| ![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) | ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png)
Donate via PayPal ](https://www.paypal.me/gaohaoyang) | + +感谢捐赠的小伙伴！！！ + +* 2017.07.02 收到 微信用户 ¥9.99 +* 2017.06.20 收到 微信用户 ¥2.22 +* 2017.06.19 收到 微信用户 ¥6.66 +* 2017.05.25 收到 微信用户 ¥1.00 +* 2017.05.19 收到 风之筝 ¥6.66 +* 2017.05.16 收到 张驰 ¥6.00 +* 2017.05.03 收到 希成 ¥6.66 +* 2017.04.24 收到 deezer ¥10.00 +* 2017.04.13 收到 Abraham Xiao ¥30.00 +* 2017.04.11 收到 微信用户 ¥4.00 +* 2017.04.01 收到 Elvin Zeng ¥6.66 +* 2017.03.13 收到 微信用户 ¥6.66 +* 2017.03.04 收到 史莱姆 ¥9.90 +* 2017.03.02 收到 梦想小熊 ¥6.66 +* 2017.02.27 收到 夏友杰 ¥6.66 +* 2017.02.26 收到 兰缘小妖 ¥10.00 +* 2017.02.25 收到 微信用户 ¥6.66 +* 2017.02.22 收到 微信用户 ¥6.66 +* 2017.02.15 收到 微信用户 ¥10.00 +* 2017.02.06 收到 Light ¥10.24 +* 2017.01.15 收到 微信用户 ¥6.66 +* 2016.12.17 收到 HitNoah ¥12.00 +* 2016.12.09 收到 情融 ¥6.60 +* 2016.11.16 收到 微信用户 ¥6.66 +* 2016.11.16 收到 微信用户 ¥1.00 +* 2016.10.24 收到 奇峰 ¥6.66 +* 2016.10.21 收到 旭廷 ¥10.00 +* 2016.09.24 收到 鑫 ¥6.66 +* 2016.08.25 收到 Erlend Aakre $2.50 +* 2016.08.10 收到 微信用户 ¥4.40 +* 2016.07.25 收到 邓炳初 ¥6.66 +* 2016.07.11 收到 彦风 ¥6.66 +* 2016.07.07 收到 Klci ¥2.50 +* 2016.05.08 收到 1057 ¥10.57 +* 2016.05.07 收到 吴林 ¥2 +* 2016.04.29 收到 北归 ¥10 +* 2016.04.28 收到 魏楚阳_Brian ¥2 +* 2016.04.28 收到 薛彬 ¥8.8 + +## Update Log + +### 2017.2.28 + +- `[^]` 修复目录滚动 bug [#22](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/22), [#48](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/48) + +### 2016.6.20 + +* `[+]` 在文章页中添加上一篇和下一篇文章链接。 +* `[^]` 修改 font-family 顺序，避免微软雅黑将单引号解析为全角。 +* `[^]` 修复标签云算法中被除数为零的 bug。[#26](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/26), [#28](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/28), [#30](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/30) + +### 2016.5.11 v2.0.1 + +* `[^]` 优化代码，将页面中的大段评论相关代码抽离出来，放入`comments.html` +* `[+]` 添加百度统计和Google分析代码，在`_config.yml`中配置相关参数即可 +* `[+]` 更新文档，添加博客主题使用方法，便于上手 +* `[+]` 添加了`favicon.ico` +* `[^]` 修复 bug，目录太长时，滚动到最底部时隐藏到footer下面。修复后长目录在滚动到底部时使用`position:absolute` +* `[^]` 修改目录区的滚动条样式（仅针对`webkit`内核浏览器） +* `[^]` 修改 demo 页中 disqus 评论区 a 标签的颜色 bug，修改 blockqoute 中 p 标签的 margin +* `[+]` 添加不蒜子计数功能，在footer上显示访问量 +* `[+]` 添加回到顶部功能 + +### 2016.4.27 v2.0.0 + +* `[^]` 基于 jekyll 3.1.2 重构了所有代码 +* `[+]` 主页添加了摘要，在正文中使用4个换行符来分割，可在`_config.yml`中修改 +* `[+]` 主页添加了近期文章、分类列表和标签云 +* `[+]` 主页导航区做了视觉优化，阴影效果 +* `[+]` 增加了归档、标签和分类页面 +* `[+]` 增加了收藏页面 +* `[+]` 评论插件可以选择 disqus 或 多说，直接在`_config.yml`中修改 +* `[+]` 适配移动端 +* `[+]` 页面滚动时，文章目录固定在右侧 +* `[+]` 页面内容较少时，固定 footer 在页面底部 +* `[^]` 使用 GitHub 风格的代码高亮写法，即\`\`\`的写法，去除`highlight.js`代码高亮插件的使用 +* `[^]` 使用 Masonry 重写了 Demo 页中的瀑布流布局，响应式交互体验更好 +* `[-]` 去除了 jQuery 和 BootStrap，使得加载速度更快 + +关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog)。 + +## License + +[MIT License](https://github.com/Gaohaoyang/gaohaoyang.github.io/blob/master/LICENSE.md) diff --git a/README.md b/README.md index 5b4d9bc..bf8fe50 100644 --- a/README.md +++ b/README.md @@ -1,126 +1,134 @@ -# 关于这个博客主题 - -随着 jekyll 的版本升级，同时我也想重构我的旧版博客主题，因此在这个月对博客进行了重构加改版，这个仓库存放我的新博客，并且我也会一直使用这个主题。目前基本改版完成，后续可能还会有些细节上的修补。 - -**博客访问地址：[http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**。若您喜欢这个新的博客主题，请给我个star以示鼓励吧，欢迎大家使用。 - -## 目录 - -* [预览图](#预览图) -* [各部分详情](#各部分详情) - * [主页 Home](#主页-home) - * [归档页 Archives](#归档页-archives) - * [分类页 Categories](#分类页-categories) - * [标签页 Tags](#标签页-tags) - * [收藏页 Collections](#收藏页-collections) - * [展示页 Demo](#展示页-demo) - * [关于页 About](#关于页-about) - * [评论](#评论) - * [目录 Contents](#目录-contents) - * [代码高亮](#代码高亮) - * [灯泡效果](#灯泡效果) - * [移动端适配](#移动端适配) +# About this Cool Concise Jekyll Blog Theme 🤘🤘🤘 + +[![GitHub stars](https://img.shields.io/github/stars/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/stargazers) +[![GitHub forks](https://img.shields.io/github/forks/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/network) +[![GitHub issues](https://img.shields.io/github/issues/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues) +[![GitHub release](https://img.shields.io/github/release/Gaohaoyang/gaohaoyang.github.io.svg)](https://github.com/Gaohaoyang/gaohaoyang.github.io/releases) +[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/Gaohaoyang/gaohaoyang.github.io/master/LICENSE) + +**[中文版 Chinese README 请点击这里 🇨🇳](https://github.com/Gaohaoyang/gaohaoyang.github.io/blob/master/README-zh-cn.md)** + +With the escalation of jekyll version, but I also want to reconstruct my older blog theme, so I did reconstruction and added some features recently. My new blog theme will still be stored in this repository. I will also use this theme in the future. Now I have done basically, then I will focus on issues that users opend to make theme better. + +**My Blog Url: [http://gaohaoyang.github.io/](http://gaohaoyang.github.io/)**. If you like this theme, you can give me a star to encourage me. Welcome everyone to use it. + +## Content + +* [Preview](#preview) +* [Page Details](#page-details) + * [Home](#home) + * [Archives](#archives) + * [Categories](#categories) + * [Tags](#tags) + * [Collections](#collections) + * [Demo](#demo) + * [About](#about) + * [Comments](#comments) + * [Post Contents](#post-contents) + * [Code Highlight](#code-highlight) + * [Light Shadow](#light-shadow) + * [Mobile Adaptation](#mobile-adaptation) * [Footer](#footer) - * [统计](#统计) -* [博客主题使用方法](#博客主题使用方法) - * [1. 安装 ruby 和 jekyll 环境](#1-安装-ruby-和-jekyll-环境) - * [2. 复制博客主题代码](#2-复制博客主题代码) - * [3. 修改参数](#3-修改参数) - * [基本信息](#基本信息) - * [链接信息](#链接信息) - * [评论信息](#评论信息) - * [统计信息](#统计信息) - * [4. 写文章](#4-写文章) - * [5. 本地运行](#5-本地运行) - * [6. 发布到 GitHub](#6-发布到-github) -* [捐助 donate](#捐助-donate) + * [Statistical Analysis](#statistical-analysis) +* [Usage](#usage) + * [1. Install ruby and jekyll environment](#1-install-ruby-and-jekyll-environment) + * [2. Copy theme code](#2-copy-theme-code) + * [3. Change parameter](#3-change-parameter) + * [Basic info](#basic-info) + * [Link info](#link-info) + * [Comments info](#comments-info) + * [Statistical analysis info](#statistical-analysis-info) + * [4. Write post](#4-write-post) + * [5. Local launch](#5-local-launch) + * [6. Push to GitHub](#6-push-to-github) +* [Donate](#donate) * [Update Log](#update-log) * [License](#license) -## 预览图 +## Preview -先上预览图： +First of all, let's see previews. -主页 +Index Page ![index](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bdli86awj211k0oyqen.jpg) -文章页 +Post Page ![post](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bdmzb9v6j210p0j7gwn.jpg) -## 各部分详情 +## Page Details -### 主页 Home +### Home -主页默认展示5篇文章的摘要部分，用户点击标题或阅读全文后进入文章页。右侧为近期文章、分类和标签3块区域，用户可以继续在这部分添加区域，只需修改`index.html`即可。 +Index page show 5 posts excerpt as a default. Readers can click article title or read more button to see full post. There are recent posts area, categories area and tags area at the right part of the index page. You can also add an area at this part, if you change the file `index.html`. -### 归档页 Archives +### Archives -按照年份归档文章。 +Archive post according to the year. -### 分类页 Categories +### Categories -按照文章的分类，显示文章。 +Show posts according to the category. -### 标签页 Tags +### Tags -按照文章的标签显示文章。 +Show posts according to the tags. -### 收藏页 Collections +### Collections -本页是用`markdown`写的，用户可以收藏自己喜欢的文章链接。 +The user can collect their favorite article links with `markdown` syntax. -### 展示页 Demo +### Demo -使用 [Masonry](http://masonry.desandro.com/) 重写了瀑布流布局，响应式布局，更好的交互体验。 +I use *[Masonry](http://masonry.desandro.com/)* to rewrite the waterfall responsive layout. Better interactive experience. -### 关于页 About +### About -对个人和对本站的介绍，使用`markdown`写的。 +The user can write some introduction about theirselves and their site with `markdown` syntax. -### 评论 +### Comments -支持 [多说评论](http://duoshuo.com/) 和 [disqus](https://disqus.com/) 评论。 +This theme supports both [disqus](https://disqus.com/) and [多说评论 duoshuo comments](http://duoshuo.com/). It's very easy to config your comments module. -只需要在 `_config.yml` 修改相应的配置`short_name`即可，如下： +The only thing you need do is to change the `short_name` in the file `_config.yml`. As follows. ```yml # comments # two ways to comment, only choose one, and use your own short name -# 两种评论插件，选一个就好了，使用自己的 short_name duoshuo_shortname: #xxx disqus_shortname: xxx ``` -### 目录 Contents +### Post Contents -页面滚动时目录固定在屏幕右侧，若目录高度超出屏幕高度，目录产生滚动条。 +The post contents is fixed at the right side while page is scrolling. There will be a scroll bar on contents while it is outside the window height. -### 代码高亮 +### Code Highlight -随着 jekyll 的升级，目前代码高亮使用风格与 github 上的 markdown 写法一致。 +While the jekyll is update to 3.x.x, you can use github flavored markdown to write code. -### 灯泡效果 +More info to see [syntax-highlighter-changed](https://jekyllrb.com/docs/upgrading/2-to-3/#syntax-highlighter-changed). + +### Light Shadow ![light](http://ww3.sinaimg.cn/large/7011d6cfjw1f3be6y4vp3j209i02rweg.jpg) -可以看到导航按钮高亮时，下面的阴影效果，我把这个称为灯泡效果。 +You can see the white shadow on the current item in the navbar. I call this light shadow. -### 移动端适配 +### Mobile Adaptation -完美适配移动端。 +Of course, I have done a very good mobile adaptation. ![mobile](http://ww4.sinaimg.cn/large/7011d6cfjw1f3bebnzxkpj20ah0fzgp4.jpg) ### Footer -**欢迎使用这个主题，使用时请保留 footer 上的模板主题来源。**Theme designed by [HyG](https://github.com/gaohaoyang). -![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) +**Welcome to use this blog theme, but please keep the theme author info at footer.** Theme designed by [HyG](https://github.com/gaohaoyang). -关于旧版博客，我不再维护，同时我把代码转移到了另一个仓库，见 [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog)。 +![footer](http://ww3.sinaimg.cn/large/7011d6cfjw1f3bepd8002j20hl02ct95.jpg) -### 统计 +### Statistical Analysis -博客支持百度统计和 Google Analytics，只需在`_config.yml`中配置响应的id即可，代码如下。 +This theme supports Google Analytics and Baidu Statistics， you can just config the id in the file `_config.yml`, as follows. ```yml # statistic analysis 统计代码 @@ -131,41 +139,41 @@ baidu_tongji_id: xxxxxxxxxxxx google_analytics_id: UA-xxxxxxxx # google 分析追踪id ``` -## 博客主题使用方法 +## Usage -欢迎使用这个主题，以下简单说一下使用方法。 +Welcome everyone to use this theme, this part shows introduction to use. -### 1. 安装 ruby 和 jekyll 环境 +### 1. Install ruby and jekyll environment -这一步和第5步主要是为了让博客系统在本地跑起来，如果不想在本地运行，可以无视这两步，但我还是强烈建议试着先在本地跑起来，没有什么问题后再推送的 GitHub 上。 +This step and Step 5 mainly talk to you how to launch blog at local. If you don't want to launch at local, you can ignore these 2 steps. But I still strongly suggest to do this. Ensure there is nothing wrong before pushing to the github. -Windows 用户可以直接使用 [RubyInstaller](http://rubyinstaller.org/) 安装 ruby 环境。后续的操作中可能还会提示安装 DevKit，根据提示操作即可。 +The Windows users can directly use [RubyInstaller](http://rubyinstaller.org/) to install ruby environment. Follow the prompts while installing. -建议使用 [RubyGems 镜像- Ruby China](https://gems.ruby-china.org/) 安装 jekyll。 - -安装 jekyll 命令如下 +Install jekyll commands: ``` gem install jekyll ``` -详情可以查看 jekyll 官网。[https://jekyllrb.com/](https://jekyllrb.com/) 或 中文翻译版 jekyll 官网[http://jekyllcn.com/](http://jekyllcn.com/) （中文文档翻译落后于英文官网，有兴趣有时间的小伙伴可以参与翻译，为开源世界贡献一份力哦~） +For more details, you can view the jekyll official website. [https://jekyllrb.com/](https://jekyllrb.com/) -![jekyll logo](http://jekyllcn.com/img/logo-2x.png) +There may be something wrong at mac OS X El Capitan, you can see the solution at [https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011]( https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011). -### 2. 复制博客主题代码 +If you are interesting in jekyll, you can see the jekyll source code at [https://github.com/jekyll/jekyll](https://github.com/jekyll/jekyll). -可以直接 clone 、下载 或 fork 这个仓库的代码即可 +![jekyll logo](http://jekyllcn.com/img/logo-2x.png) + +### 2. Copy theme code -### 3. 修改参数 +You can clone, download or fork this repo. -主要修改 `_config.yml` 中的参数和自己的网站小图`favicon.ico` +### 3. Change parameter -`_config.yml`文件中 +Mainly change the parameters at file `_config.yml` and use your own `favicon.ico`. -#### 基本信息 +#### Basic info -主要用于网站头部header。 +Shows at site header part. ```yml # Site settings @@ -175,9 +183,9 @@ baseurl: "" # the subpath of your site, e.g. /blog url: "http://gaohaoyang.github.io" # the base hostname & protocol for your site ``` -#### 链接信息 +#### Link info -主要用于网站底部footer。 +Mainly shows at the footer of the site. ```yml # other links @@ -187,46 +195,49 @@ github_username: Gaohaoyang email: gaohaoyang126@126.com weibo_username: 3115521wh zhihu_username: gaohaoyang +linkedIn_username: gaohaoyang +dribbble_username: description_footer: 本站记录我前端之旅的沿途风景！ ``` -#### 评论信息 +#### Comments info -获取`short_name`的方法： +Get your own `short_name`: -访问 https://disqus.com/ 或 http://duoshuo.com/ 根据提示操作即可。 +Visit https://disqus.com/ or http://duoshuo.com/. And follow the prompts at the site. ```yml # comments # two ways to comment, only choose one, and use your own short name -# 两种评论插件，选一个就好了，使用自己的 short_name duoshuo_shortname: #hygblog -disqus_shortname: gaohaoyang +disqus_shortname: xxxx ``` -运行成功后，可以在 disqus 或 多说 的后台管理页看到相关信息。 +When you done, you can also see the comments info at disqus or duoshuo admin console. + +#### Statistical analysis info -#### 统计信息 +Get Google Analytics id or Baidu Statistics id： -获取 百度统计id 或 Google Analytics id 的方法： +Visit https://www.google.com/analytics/ or http://tongji.baidu.com/. And follow the prompts at the site. -访问 http://tongji.baidu.com/ 或 https://www.google.com/analytics/ 根据提示操作即可。当然，如果不想添加统计信息，这两个参数可以不填。 +Of course, if you don't want any statistical and analysis info, you can type nothing at id position. ```yml # statistic analysis 统计代码 # 百度统计 id，将统计代码替换为自己的百度统计id，即 # hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx"; # xxxxx字符串 -baidu_tongji_id: cf8506e0ef223e57ff6239944e5d46a4 -google_analytics_id: UA-72449510-4 # google 分析追踪id +baidu_tongji_id: cf850xxxxxxxxxxxxxxxx +google_analytics_id: UA-7xxxxxx-4 # google 分析追踪id ``` -成功后，进入自己的百度统计或 Google Analytics 后台管理，即可看到网站的访问量、访客等相关信息。 +When you done, you can see UV, PV, location etc. info at your own Google Analytics or Baidu Statistic console. -### 4. 写文章 +### 4. Write post -`_posts`目录下存放文章信息，文章头部注明 layout(布局)、title、date、categories、tags、author(可选)，如下： +You can write posts at folder `_posts`. At the beginning of the post, you should declare layout、title、date、categories、tags、author(optional) info、mathjax(optional，click [here](https://www.mathjax.org/) for more detail about `Mathjax`). ``` --- @@ -236,37 +247,38 @@ date: 2016-03-12 11:40:18 +0800 categories: jekyll tags: jekyll 端口 markdown Foxit RubyGems HTML CSS author: Haoyang Gao +mathjax: true --- ``` -下面这两行代码为产生目录时使用 +These follow code is for making contents. ``` * content {:toc} ``` -文章中存在的4次换行为摘要分割符，换行前的内容会以摘要的形式显示在主页Home上，进入文章页不影响。 +You can use 4 wraps as a excerpt separator. The words before separator as excerpt show in the index page. When you enter the post page, you can read full article. -换行符的设置见配置文件`_config.yml`的 excerpt，如下： +The wraps config is in the file `_config.yml`, as follows: ```yml # excerpt excerpt_separator: "\n\n\n\n" ``` -使用 markdown 语法写文章。 +You should use markdown syntax to write article, just like write readme in github. -代码风格与 GitHub 上 README 或 issue 中的一致。使用3个```的方式。 +You can use 3 \`\`\` to write code block. -### 5. 本地运行 +### 5. Local launch -本地执行 +use command: ``` jekyll s ``` -显示 +Terminal shows: ``` Configuration file: E:/GitWorkSpace/blog/_config.yml @@ -283,72 +295,104 @@ Configuration file: E:/GitWorkSpace/blog/_config.yml Server running... press ctrl-c to stop. ``` -在本地访问 localhost:4000 即可看到博客主页。 - -若安装了 Foxit 福昕pdf阅读器可能会占用4000端口，关闭 Foxit服务 或切换 jekyll 端口即可解决。详情见文章：[对这个 jekyll 博客主题的改版和重构](http://gaohaoyang.github.io/2016/03/12/jekyll-theme-version-2.0/) - -若正在使用全局代理，可能会报错502，关闭全局代理即可。 +Visit localhost:4000 to see your blog!!! + +### 6. Push to GitHub + +If there is nothing wrong, push code to your github! + +## Donate + +You can also donate me for a coffee, and I'll do better. Thanks. + +| PayPal | Wechat Pay | Alipay | +|:----------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------:|:---------------------------------------------------------------------------:| +| [![PayPal](https://www.paypalobjects.com/webstatic/paypalme/images/pp_logo_small.png)
Donate via PayPal ](https://www.paypal.me/gaohaoyang) | ![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) | ![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) | + + +Thanks these friends!!! + +* 2017.07.02 received Wechat user ¥9.99 +* 2017.06.20 received Wechat user ¥2.22 +* 2017.06.19 received Wechat user ¥6.66 +* 2017.05.25 received Wechat user ¥1.00 +* 2017.05.19 received 风之筝 ¥6.66 +* 2017.05.16 received 张驰 ¥6.00 +* 2017.05.03 received 希成 ¥6.66 +* 2017.04.24 received deezer ¥10.00 +* 2017.04.13 received Abraham Xiao ¥30.00 +* 2017.04.11 received Wechat user ¥4.00 +* 2017.04.01 received Elvin Zeng ¥6.66 +* 2017.03.13 received Wechat user ¥6.66 +* 2017.03.04 received 史莱姆 ¥9.90 +* 2017.03.02 received 梦想小熊 ¥6.66 +* 2017.02.27 received 夏友杰 ¥6.66 +* 2017.02.26 received 兰缘小妖 ¥10.00 +* 2017.02.25 received Wechat user ¥6.66 +* 2017.02.22 received Wechat user ¥6.66 +* 2017.02.15 received Wechat user ¥10.00 +* 2017.02.06 received Light ¥10.24 +* 2017.01.15 received Wechat user ¥6.66 +* 2016.12.17 received HitNoah ¥12.00 +* 2016.12.09 received 情融 ¥6.60 +* 2016.11.25 received Wechat user ¥6.66 +* 2016.11.16 received Wechat user ¥1.00 +* 2016.10.24 received 奇峰 ¥6.66 +* 2016.10.21 received 旭廷 ¥10.00 +* 2016.09.25 received 鑫 ¥6.66 +* 2016.08.25 received Erlend Aakre $2.50 +* 2016.08.10 received Wechat user ¥4.40 +* 2016.07.25 received 邓炳初 ¥6.66 +* 2016.07.11 received 彦风 ¥6.66 +* 2016.07.07 received Klci ¥2.50 +* 2016.05.08 received 1057 ¥10.57 +* 2016.05.07 received 吴林 ¥2 +* 2016.04.29 received 北归 ¥10 +* 2016.04.28 received 魏楚阳_Brian ¥2 +* 2016.04.28 received 薛彬 ¥8.8 -### 6. 发布到 GitHub -没什么问题，推送到自己的博客仓库即可。 - -## 捐助 donate - -您也可以捐助我喝杯咖啡！感谢！ - -支付宝 - -![alipay](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bk8ikzoij20740743z5.jpg) - -微信 - -![wechat](http://ww2.sinaimg.cn/large/7011d6cfjw1f3bkdw3bslj206z06q3z6.jpg) - -感谢捐助的小伙伴！！！ - -* 2016.05.08 收到 1057 ¥10.57 捐赠 -* 2016.05.07 收到 吴林 ¥2 捐赠 -* 2016.04.29 收到 北归 ¥10 捐赠 -* 2016.04.28 收到 魏楚阳_Brian ¥2 捐赠 -* 2016.04.28 收到 薛彬 ¥8.8 捐赠 +## Update Log +### 2017.2.28 -## Update Log +- `[^]` fix smoothScroll bug in Tencent webview like wechat and qq. [#22](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/22), [#48](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/48) ### 2016.6.20 -* `[+]` 在文章页中添加上一篇和下一篇文章链接。 -* `[^]` 修改 font-family 顺序，避免微软雅黑将单引号解析为全角。 -* `[^]` 修复标签云算法中被除数为零的 bug。[#26](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/26), [#28](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/28), [#30](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/30) +* `[+]` Add next post and previous post link in post page. +* `[^]` Change the sort of font-family to avoid full-width half-width characters mistake. +* `[^]` Fix bug in tags cloud when division by zero. [#26](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/26), [#28](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/28), [#30](https://github.com/Gaohaoyang/gaohaoyang.github.io/issues/30) ### 2016.5.11 v2.0.1 -* `[^]` 优化代码，将页面中的大段评论相关代码抽离出来，放入`comments.html` -* `[+]` 添加百度统计和Google分析代码，在`_config.yml`中配置相关参数即可 -* `[+]` 更新文档，添加博客主题使用方法，便于上手 -* `[+]` 添加了`favicon.ico` -* `[^]` 修复 bug，目录太长时，滚动到最底部时隐藏到footer下面。修复后长目录在滚动到底部时使用`position:absolute` -* `[^]` 修改目录区的滚动条样式（仅针对`webkit`内核浏览器） -* `[^]` 修改 demo 页中 disqus 评论区 a 标签的颜色 bug，修改 blockqoute 中 p 标签的 margin -* `[+]` 添加不蒜子计数功能，在footer上显示访问量 -* `[+]` 添加回到顶部功能 +* `[^]` Optimized code, Extracting common code to `comments.html` +* `[+]` Add Google Analysis and Baidu Statistics +* `[+]` Update README, add usage +* `[+]` Add `favicon.ico` +* `[^]` Fix bug at contents +* `[^]` Change the content scroll bar CSS style（Only for `webkit` browser kernel） +* `[^]` Change tag a color at demo page +* `[+]` Add busuanzi counter, show the views count at footer +* `[+]` Add back to top button ### 2016.4.27 v2.0.0 -* `[^]` 基于 jekyll 3.1.2 重构了所有代码 -* `[+]` 主页添加了摘要，在正文中使用4个换行符来分割，可在`_config.yml`中修改 -* `[+]` 主页添加了近期文章、分类列表和标签云 -* `[+]` 主页导航区做了视觉优化，阴影效果 -* `[+]` 增加了归档、标签和分类页面 -* `[+]` 增加了收藏页面 -* `[+]` 评论插件可以选择 disqus 或 多说，直接在`_config.yml`中修改 -* `[+]` 适配移动端 -* `[+]` 页面滚动时，文章目录固定在右侧 -* `[+]` 页面内容较少时，固定 footer 在页面底部 -* `[^]` 使用 GitHub 风格的代码高亮写法，即\`\`\`的写法，去除`highlight.js`代码高亮插件的使用 -* `[^]` 使用 Masonry 重写了 Demo 页中的瀑布流布局，响应式交互体验更好 -* `[-]` 去除了 jQuery 和 BootStrap，使得加载速度更快 +* `[^]` Rewrite all codes based on jekyll 3.1.2 +* `[+]` Add excerpt at index page +* `[+]` Add recently post, categories and tags cloud at index page +* `[+]` Add light shadow at navbar +* `[+]` Add archives, categories, tags page +* `[+]` Add collections page +* `[+]` Add comments plugin with disqus or duoshuo +* `[+]` Mobile Adaptation +* `[+]` Fix post contents to the right side while scrolling page +* `[+]` Fix footer at the bottom when page height is smaller than window height +* `[^]` Use github flavored markdown to write code block(Fenced code blocks) +* `[^]` Rewrite the demo page with Masonry +* `[-]` Remove jQuery and BootStrap + +About my old blog theme, I won't maintain any more. And I put the code at [Gaohaoyang/old-blog](https://github.com/Gaohaoyang/old-blog). ## License diff --git a/_config.yml b/_config.yml index 568811a..f9ed8e0 100644 --- a/_config.yml +++ b/_config.yml @@ -9,7 +9,7 @@ title: HyG brief-intro: Front-end Dev Engineer baseurl: "" # the subpath of your site, e.g. /blog -url: "http://gaohaoyang.github.io" # the base hostname & protocol for your site +url: "https://gaohaoyang.github.io" # the base hostname & protocol for your site permalink: /:year/:month/:day/:title/ @@ -21,7 +21,7 @@ email: gaohaoyang126@126.com weibo_username: 3115521wh zhihu_username: gaohaoyang linkedIn_username: gaohaoyang -dribbble_username: +dribbble_username: description_footer: 本站记录我前端之旅的沿途风景！ @@ -57,4 +57,6 @@ excerpt_separator: "\n\n\n\n" # paginate gems: [jekyll-paginate] -paginate: 5 +paginate: 6 + +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/_drafts/ES2015-note.md b/_drafts/ES2015-note.md index ca72eef..0946b5a 100644 --- a/_drafts/ES2015-note.md +++ b/_drafts/ES2015-note.md @@ -255,6 +255,11 @@ baz // undefined var { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" +//转化为如下代码： +var _foo$bar2 = { foo: "aaa", bar: "bbb" }; +var baz = _foo$bar2.foo; + + let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' @@ -269,17 +274,56 @@ baz // "aaa" foo // error: foo is not defined ``` -对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。 +对于 let 和 const 来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。 和数组一样，解构也可以用于嵌套结构的对象。 +对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于`undefined`。 + +```js +var {x = 3} = {x: undefined}; +x // 3 + +var {x = 3} = {x: null}; +x // null +``` + +如果解构失败，变量的值等于`undefined`。 + +```js +var {foo} = {bar: 'baz'}; +foo // undefined +``` ### 字符串的解构赋值 +字符串也可以解构赋值。字符串被转换为一个类似数组的对象。 + +```js +const [a, b, c, d, e] = 'hello'; +a // "h" +b // "e" +c // "l" +d // "l" +e // "o" +``` + ### 数值和布尔值的解构赋值 +解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。 + ### 函数参数的解构赋值 +函数的参数也可以使用解构赋值。 + +```js +function add([x, y]){ + return x + y; +} + +add([1, 2]); // 3 +``` + ### 圆括号问题 ### 用途 diff --git a/_drafts/WebSocket.md b/_drafts/WebSocket.md new file mode 100644 index 0000000..6ef52f1 --- /dev/null +++ b/_drafts/WebSocket.md @@ -0,0 +1,15 @@ +--- +layout: post +title: "WebSocket探究与应用" +categories: JavaScript +tags: WebSocket 通信 协议 +--- + +* content +{:toc} + +## WebSocket 适用场景 + +## WebSocket 原理 + +## WebSocket 浏览器兼容性 diff --git a/_drafts/threeJS-light-shadow.md b/_drafts/threeJS-light-shadow.md new file mode 100644 index 0000000..bd1c58e --- /dev/null +++ b/_drafts/threeJS-light-shadow.md @@ -0,0 +1,125 @@ +--- +layout: post +title: "three.js 中的光与影" +categories: JavaScript +tags: threeJS webGL +--- + +* content +{:toc} + +在了解了 three.js 中渲染器、场景、相机、几何体等基本知识后，我们来研究一下 three.js 中的光与影。 + + +本文是根据百度前端学院的任务安排进行探索和研究的。算是 [WebGL No. 2 - 光与影](http://ife.baidu.com/course/detail/id/28) 的学习笔记吧。 + +- 任务描述 + - 学习《Three.js 入门指南》第 8 章光与影； + - 理解不同类型灯光的区别和适用场景； + - 学会为场景添加合适的灯光； + - 思考灯光的位置对哪些类型的灯光是无所谓的，以及为什么； + - 思考为什么有些灯光无法形成阴影； + - 在第 1 题场景的基础上，增加光照效果； + - 如果你没做第 1 题，也可以随便在场景中创建一些物体； + - 为物体设置合适的材质（预习第 4 章），使得物体的亮度根据光照有所区别 + - 创建一个地板平面，并将小车投影到地板上 + - 尝试并思考，一个物体（比如甜甜圈）如何将阴影投射到自身（Self-Shadow，自阴影）； + - 实现软阴影的效果（即阴影的边缘有明暗的渐变）。 + +## 光 + +构造函数： + +```js +Light(color, intensity) +``` + +- 颜色 color - (optional) hexadecimal color of the light. Default is 0xffffff (white). +- 强度 intensity - (optional) numeric value of the light's strength/intensity. Default is 1. + +光的基类，被其他光类所继承。 + +### 环境光 + +AmbientLight ['æmbɪənt] 平均照亮场景中的所有物体。 + +无方向，不产生影子。 + +```js +var light = new THREE.AmbientLight(0x404040); // soft white light +scene.add(light); +``` + +### 点光源 + +PointLight 从一个孤立的点向各个方向发射。没有遮盖的灯泡就是一个典型的例子。 + +可以产生影子。 + +```js +var light = new THREE.PointLight(0xff0000, 1, 100); +light.position.set(50, 50, 50); +scene.add(light); +``` + +### 平行光 + +DirectionalLight 有特定方向的光。光线平行，无限远。用于模拟日光。太阳足够远，可以认为是无限远的，并且发射的光线是平行的。 + +可以产生影子。[平行光的影子 DirectionalLightShadow](https://threejs.org/docs/index.html#Reference/Lights.Shadows/DirectionalLightShadow)。 + +```js +// White directional light at half intensity shining from the top. +var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); +scene.add(directionalLight); +``` + +- 属性 + + - `.position` + + This is set equal to Object3D.DefaultUp (0, 1, 0), so that the light shines from the top down. + + 光线从平面 (0, 1, 0) 的法向射出。 + + +### 聚光灯 + +SpotLight 光从孤立点射出，沿着一个椎体向远处延伸。 + +可以产生影子。 + +```js +// white spotlight shining from the side, casting a shadow + +var spotLight = new THREE.SpotLight(0xffffff); +spotLight.position.set(100, 1000, 100); + +spotLight.castShadow = true; + +spotLight.shadow.mapSize.width = 1024; +spotLight.shadow.mapSize.height = 1024; + +spotLight.shadow.camera.near = 500; +spotLight.shadow.camera.far = 4000; +spotLight.shadow.camera.fov = 30; + +scene.add(spotLight); +``` + +### 半球光 + +HemisphereLight 光源位于场景上方，光线颜色从天空过度到地面。 + +不能产生影子。 + +```js +var light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1); +scene.add(light); +``` + +### 矩形光 + +RectAreaLight 从一个矩形面均匀发射的光。常被用于明亮的窗户， + +## 影子 diff --git a/_includes/backToTop.html b/_includes/backToTop.html index e98e001..68d69d4 100644 --- a/_includes/backToTop.html +++ b/_includes/backToTop.html @@ -1,5 +1,5 @@
- +
diff --git a/_includes/footer.html b/_includes/footer.html index 166893d..3677ef0 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -11,7 +11,7 @@ {% endif %} {% if site.email %} {% endif %} {% if site.weibo_username %} {% endif %} {% if site.zhihu_username %} - {% endif %} {% if site.twitter_username %} + {% endif %} {% if site.twitter_username %} {% endif %} {% if site.facebook_username %} {% endif %} {% if site.linkedIn_username %} {% endif %} {% if site.dribbble_username %} diff --git a/_includes/head.html b/_includes/head.html index 0d90eaa..4bc58d5 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -8,10 +8,11 @@ - - + + + - + {% if site.baidu_tongji_id %} {% endif %} + +{% if page.mathjax %} + + +{% endif %} diff --git a/_includes/header.html b/_includes/header.html index 1b05740..72a04dc 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -16,7 +16,7 @@ {% for my_page in site.pages %} - {% if my_page.title %} + {% if my_page.type == 'page' %}
  • {% if my_page.url == page.url %} diff --git a/_includes/previousAndNext.html b/_includes/previousAndNext.html index f92350d..0847c96 100644 --- a/_includes/previousAndNext.html +++ b/_includes/previousAndNext.html @@ -1,7 +1,6 @@
    - {% if page.previous %}
    - + {% if page.previous %}

    上一篇 {{ page.previous.title }}

    {% endif %}
    diff --git a/_layouts/default.html b/_layouts/default.html index 6ea0ee9..35e318f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,7 +12,15 @@ {% include footer.html %} {% include backToTop.html %} - + + + diff --git a/_layouts/post.html b/_layouts/post.html index e633a80..a8ea8f6 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -46,7 +46,7 @@

    Similar Posts

    diff --git a/_posts/2015-02-10-welcome-to-jekyll.markdown b/_posts/2015-02-10-welcome-to-jekyll.markdown index 81a92aa..783692c 100644 --- a/_posts/2015-02-10-welcome-to-jekyll.markdown +++ b/_posts/2015-02-10-welcome-to-jekyll.markdown @@ -5,6 +5,7 @@ date: 2015-02-10 15:14:54 categories: jekyll tags: jekyll excerpt: 当年创建 jekyll 时默认的一篇文章，没什么意义，我也一直没删除，留个纪念吧。 +mathjax: true --- You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. @@ -26,3 +27,12 @@ Check out the [Jekyll docs][jekyll] for more info on how to get the most out of [jekyll]: http://jekyllrb.com [jekyll-gh]: https://github.com/jekyll/jekyll [jekyll-help]: https://github.com/jekyll/jekyll-help + +Block Mathjax + +$$ +f(x) = ax + b +$$ + +Inline Mathjax $a \neq b$ + diff --git a/_posts/2015-04-22-baidu-ife-2-javascript.md b/_posts/2015-04-22-baidu-ife-2-javascript.md index f8ff8a5..5f50a98 100644 --- a/_posts/2015-04-22-baidu-ife-2-javascript.md +++ b/_posts/2015-04-22-baidu-ife-2-javascript.md @@ -1257,12 +1257,12 @@ function ajax(url, options) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // 发送请求 - oXhr.open(options.type, url, true); + xhr.open(options.type, url, true); if (options.type == 'GET') { - oXhr.send(null); + xhr.send(null); } else { - oXhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - oXhr.send(dataResult); + xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xhr.send(dataResult); } // readyState diff --git a/_posts/2016-07-07-git-clone-not-master-branch.md b/_posts/2016-07-07-git-clone-not-master-branch.md new file mode 100644 index 0000000..e263ab0 --- /dev/null +++ b/_posts/2016-07-07-git-clone-not-master-branch.md @@ -0,0 +1,104 @@ +--- +layout: post +title: "Git 如何 clone 非 master 分支的代码" +categories: GitHub +tags: Git GitHub 分支 +--- + +* content +{:toc} + +## 问题描述 + +我们每次使用命令 + +``` +git clone git@gitlab.xxx.com:xxxxx.git +``` + +默认 clone 的是这个仓库的 master 分支。如果最新的代码不在 master 分支上，该如何拿到呢？如下图所示，最新的代码可能在`daily/1.4.1`分支上，我们希望拿到这个分支上的代码。 + + + + +![7f07c8f6deef169ef6be5103bbd3e932f8676bb1.png](https://ooo.0o0.ooo/2016/07/07/577e349ab42ed.png) + +## 解决方法 + +**刚刚开周会的时候，自己洋洋得意的分享我的解决方案，但是……经过与团队成员的的讨论，自己的方法弱爆了，现在把更优雅的方法写一下。原来写的方法并不太适合用在这个场景里。** 我之前写的方法在文章后面。 + +直接使用命令 + +``` +git branch -r #查看远程分支 +``` +或 + +``` +git branch -a #查看所有分支 +``` + +会显示 + +``` +origin/HEAD -> origin/master +origin/daily/1.2.2 +origin/daily/1.3.0 +origin/daily/1.4.1 +origin/develop +origin/feature/daily-1.0.0 +origin/master +``` + +然后直接 + +``` +git checkout origin/daily/1.4.1 +``` + +就好了。。。 + +## 原来的解决方案 + +**其实我原来写的这个方法更多的是：设置已有的本地分支跟踪一个刚刚拉取下来的远程分支，或者想要修改正在跟踪的上游分支。** + +我们在本地先建立一个分支，建议名称和远程的想要同步的分支名称一样。 + +``` +git branch daily/1.4.1 +``` + +在切换到这个本地分支 + +``` +git checkout daily/1.4.1 +# Switched to branch 'daily/1.4.1' +``` + +接下来就可以去建立上游分支的关联了，但是这个命令比较长，不好记，我们可以直接先`pull`一下，git 会提示我们相应的操作和命令。 + +``` +git pull +There is no tracking information for the current branch. +Please specify which branch you want to merge with. +See git-pull(1) for details. + + git pull + +If you wish to set tracking information for this branch you can do so with: + + git branch --set-upstream-to=origin/ daily/1.4.1 +``` + +我们看到最后一行，执行这个命令，即可完成与上游分支的关联。 + +``` +git branch --set-upstream-to=origin/daily/1.4.1 daily/1.4.1 +# Branch daily/1.4.1 set up to track remote branch daily/1.4.1 from origin. +``` + +然后再`pull`一下就好了！ + +``` +git pull +``` diff --git a/_posts/2016-10-16-shuffle-algorithm.md b/_posts/2016-10-16-shuffle-algorithm.md new file mode 100644 index 0000000..65eebfd --- /dev/null +++ b/_posts/2016-10-16-shuffle-algorithm.md @@ -0,0 +1,107 @@ +--- +layout: post +title: "Fisher–Yates shuffle 洗牌算法" +categories: JavaScript +tags: 算法 shuffle 乱序 洗牌 +author: HyG +--- + +* content +{:toc} + +简单来说 Fisher–Yates shuffle 算法是一个用来将一个有限集合生成一个随机排列的算法（数组随机排序）。这个算法生成的随机排列是等概率的。同时这个算法非常高效。 + +本文主要介绍这个算法的来源、演变、原理。并举出一个例子为大家清晰的描述每次迭代过程。最后使用 JavaScript 代码将算法实现。 + +![](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Riffle_shuffle.jpg/320px-Riffle_shuffle.jpg) + + + + +## Fisher and Yates 的原始版 + +![](https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Biologist_and_statistician_Ronald_Fisher.jpg/189px-Biologist_and_statistician_Ronald_Fisher.jpg) + +Fisher–Yates shuffle 的原始版本，最初描述在 1938 年的 Ronald Fisher（上图） 和 Frank Yates 写的书中，书名为《Statistical tables for biological, agricultural and medical research》。他们使用纸和笔去描述了这个算法，并使用了一个随机数表来提供随机数。它给出了 1 到 N 的数字的的随机排列，具体步骤如下： + +1. 写下从 1 到 N 的数字 +2. 取一个从 1 到剩下的数字（包括这个数字）的随机数 k +3. 从低位开始，得到第 k 个数字（这个数字还没有被取出），把它写在独立的一个列表的最后一位 +4. 重复第 2 步，直到所有的数字都被取出 +5. 第 3 步写出的这个序列，现在就是原始数字的随机排列 + +已经证明如果第 2 步取出的数字是真随机的，那么最后得到的排序一定也是。 + +## 现代方法 + +Fisher–Yates shuffle 算法的现代版本是为计算机设计的。由 Richard Durstenfeld 在1964年 描述。并且是被 Donald E. Knuth 在 《The Art of Computer Programming》 中推广。但是不管是 Durstenfeld 还是 Knuth，都没有在书的第一版中承认这个算法是 Fisher 和 Yates 的研究成果。也许他们并不知道。不过后来出版的 《The Art of Computer Programming》提到了 Fisher 和 Yates 贡献。 + +现代版本的描述与原始略有不同，因为如果按照原始方法，愚蠢的计算机会花很多无用的时间去计算上述第 3 步的剩余数字。**这里的方法是在每次迭代时交换这个被取出的数字到原始列表的最后**。这样就将时间复杂度从 O(n^2) 减小到了 **O(n)**。算法的伪代码如下： + +``` +-- To shuffle an array a of n elements (indices 0..n-1): +for i from n−1 downto 1 do + j ← random integer such that 0 ≤ j ≤ i + exchange a[j] and a[i] +``` + +## 例子 + +### 迭代步骤演示 + +根据每次迭代次数可以用下面的表格，描述这个算法的执行过程 + +| 随机数取值范围 | 随机数 | 原始数据 | 结果 | +|:---------------|:-------|----------------:|:--------------| +| | | 1 2 3 4 5 6 7 8 | | +| 1-8 | 6 | 1 2 3 4 5 7 8 | 6 | +| 1-7 | 2 | 1 7 3 4 5 8 | 2 6 | +| 1–6 | 6 | 1 7 3 4 5 | 8 2 6 | +| 1–5 | 1 | 5 7 3 4 | 1 8 2 6 | +| 1–4 | 3 | 5 7 4 | 3 1 8 2 6 | +| 1–3 | 3 | 5 7 | 4 3 1 8 2 6 | +| 1–2 | 1 | 7 | 5 4 3 1 8 2 6 | + +### 动画演示 + +下面这个动画就是整个数组 0-19 的随机排序过程 + + + +## JavaScript 代码实现 + +```js +/** + * Fisher–Yates shuffle + */ +Array.prototype.shuffle = function() { + var input = this; + + for (var i = input.length-1; i >=0; i--) { + + var randomIndex = Math.floor(Math.random()*(i+1)); + var itemAtIndex = input[randomIndex]; + + input[randomIndex] = input[i]; + input[i] = itemAtIndex; + } + return input; +} +``` + +使用方式也很简单，直接用数组调用这个方法即可 + +```js +[1,2,3,4,5,6,7,8].shuffle() + +//[4, 6, 3, 2, 5, 1, 7, 8] // 每次结果都是随机的 +``` + +## 总结 + +总之，Fisher–Yates shuffle 算法是一个非常高效又公平的随机排序算法，如果有随机排序数组的需求，用这个就对了！ + +## 参考 + +- [Fisher–Yates shuffle From Wikipedia](https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle) diff --git a/_posts/2016-11-22-js-create-file-and-download.md b/_posts/2016-11-22-js-create-file-and-download.md new file mode 100644 index 0000000..5fb9383 --- /dev/null +++ b/_posts/2016-11-22-js-create-file-and-download.md @@ -0,0 +1,87 @@ +--- +layout: post +title: "使用 JavaScript 创建并下载文件" +categories: JavaScript +tags: 文件 下载 JavaScript +author: HyG +--- + +* content +{:toc} + +本文将介绍如何使用 JavaScript 创建文件，并自动/手动将文件下载。这在导出原始数据时会比较方便。 + +## 先上代码 + +```js +/** + * 创建并下载文件 + * @param {String} fileName 文件名 + * @param {String} content 文件内容 + */ +function createAndDownloadFile(fileName, content) { + var aTag = document.createElement('a'); + var blob = new Blob([content]); + aTag.download = fileName; + aTag.href = URL.createObjectURL(blob); + aTag.click(); + URL.revokeObjectURL(blob); +} +``` + +很简单对吧，直接调用这个方法，传入文件名和文件内容，程序新建 a 标签，新建 Blob 对象，将文件名赋给 a 标签，同时将 Blob 对象作为 Url 也赋给 a 标签，模拟点击事件，自动下载成功，最后再回收内存。下面我们来看看具体是怎么操作的。 + + + + + +![](https://img.alicdn.com/tfs/TB16.GnOpXXXXXdapXXXXXXXXXX-307-134.png) + +## Blob 对象 + +Blob 对象是一个字节序列。拥有 `size` 和 `type` 等属性。 + +拥有 2 个只读状态 `OPEND` 和 `CLOSED。` + +Blob 对象属于 JavaScript Web APIs 中的 File API 规定的部分，可以参考 W3C 文档中的 [ The Blob Interface and Binary Data](https://www.w3.org/TR/2015/WD-FileAPI-20150421/#blob) + +再回来看看我们的代码里是这么写的，使用了 Blob 的构造函数： + +```js +var blob = new Blob([content]); +``` + +使用方括号的原因是，其构造函数的参数为以下4中： + +- ArrayBuffer [TypedArrays] elements. +- ArrayBufferView [TypedArrays] elements. +- Blob elements. +- DOMString [WebIDL] elements. + +所谓 `ArrayBuffer` 是一种用于呈现通用、固定长度的二进制数据的类型。详情可以参考 [ArrayBuffer -MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) 以及 [ECMAScript2015 标准中的 ArrayBuffer](http://www.ecma-international.org/ecma-262/6.0/#sec-arraybuffer-objects)。 + +## Blob URLs + +Blob URLs 被创建或注销是使用 `URL` 对象上的方法。这个 `URL` 对象被挂在 `Window` (HTML) 对象下，或者 `WorkerGlobalScope` (Web Workers)对象下。 + +拥有以下静态方法 `createObjectURL` 和 `revokeObjectURL`，用于创建一个 blob 对象的 url 和注销这个 blob url。 + +详情可查看 [关于创建和注销 Blob URL 的 W3C 标准文档]( https://www.w3.org/TR/2015/WD-FileAPI-20150421/#creating-revoking) + +## 模拟 click + +```js +element.click(); +``` + +在 W3C 中很早就有这个[规范](https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361)，不需要写繁琐的模拟事件触发的代码。 + +## 小结 + +目前我将这个技术使用在 天猫双十一技术和UED庆功会 的摇火箭大屏游戏中。最后的游戏结果排名，在请求了接口后，在前端直接生成并下载到了本地，作为记录保存。主要也是因为服务端暂时没有提供这个一张表去记录游戏结果，于是采用了前端记录的解决方案。 + +大家当时都玩的好开心啊，😁。你们的甘其食和全家卡的名单就是这样生成的！ + +## 参考 + +- [在浏览器端用JS创建和下载文件 -alloyteam](http://www.alloyteam.com/2014/01/use-js-file-download/) diff --git a/_posts/2016-11-25-how-to-write-a-count-down.md b/_posts/2016-11-25-how-to-write-a-count-down.md new file mode 100644 index 0000000..50dd63b --- /dev/null +++ b/_posts/2016-11-25-how-to-write-a-count-down.md @@ -0,0 +1,102 @@ +--- +layout: post +title: "前端如何写一个精确的倒计时" +categories: JavaScript +tags: countdown JavaScript +author: HyG +--- + +* content +{:toc} + +关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确。如果用户修改了他的设备时间，这样的倒计时就没有意义了。今天就说说写一个精确的倒计时的方法。 + +![](https://img.alicdn.com/tfs/TB18QnlOpXXXXcVXpXXXXXXXXXX-388-256.png) + + + + +## 原理 + +众所周知 setTimeout 或者 setInterval 调用的时候会有微小的误差。有人做了一个 [demo](https://bl.ocks.org/kenpenn/raw/92ebaa71696b4c4c3acd672b1bb3f49a/) 来观察这个现象并对其做了修正。短时间的误差倒也可以接受，但是作为一个长时间的倒计时，误差累计就会导致倒计时不准确。 + +因此我们可以在获取剩余时间的时候，每次 new 一个设备时间，因为设备时间的流逝相对是准确的，并且如果设备打开了网络时间同步，也会解决这个问题。 + +但是，如果用户修改了设备时间，那么整个倒计时就没有意义了，用户只要将设备时间修改为倒计时的 endTime 就可以轻易看到倒计时结束是页面的变化。因此一开始获取服务端时间就是很重要的。 + +简单的说，一个简单的精确倒计时原理如下： + +- 初始化时请求一次服务器时间 serverTime，再 new 一个设备时间 deviceTime +- deviceTime 与 serverTime 的差作为时间偏移修正 +- 每次递归时 new 一个系统时间，解决 setTimeout 不准确的问题 + +## 代码 + +获取剩余时间的代码如下： + +```js +/** + * 获取剩余时间 + * @param {Number} endTime 截止时间 + * @param {Number} deviceTime 设备时间 + * @param {Number} serverTime 服务端时间 + * @return {Object} 剩余时间对象 + */ +let getRemainTime = (endTime, deviceTime, serverTime) => { + let t = endTime - Date.parse(new Date()) - serverTime + deviceTime + let seconds = Math.floor((t / 1000) % 60) + let minutes = Math.floor((t / 1000 / 60) % 60) + let hours = Math.floor((t / (1000 * 60 * 60)) % 24) + let days = Math.floor(t / (1000 * 60 * 60 * 24)) + return { + 'total': t, + 'days': days, + 'hours': hours, + 'minutes': minutes, + 'seconds': seconds + } +} +``` + +获取服务器时间可以使用 mtop 接口 `mtop.common.getTimestamp` + +然后可以通过下面的方式来使用： + +```js +// 获取服务端时间（获取服务端时间代码略） +getServerTime((serverTime) => { + + //设置定时器 + let intervalTimer = setInterval(() => { + + // 得到剩余时间 + let remainTime = getRemainTime(endTime, deviceTime, serverTime) + + // 倒计时到两个小时内 + if (remainTime.total <= 7200000 && remainTime.total > 0) { + // do something + + //倒计时结束 + } else if (remainTime.total <= 0) { + clearInterval(intervalTimer); + // do something + } + }, 1000) +}) +``` + +这样的的写法也可以做到准确倒计时，同时也比较简洁。不需要隔段时间再去同步一次服务端时间。 + +## 补充 + +在写倒计时的时候遇到了一个坑这里记录一下。 + +**千万别在倒计时结束的时候请求接口**。会让服务端瞬间 QPS 峰值达到非常高。 + +![](https://img.alicdn.com/tfs/TB1LBzjOpXXXXcnXpXXXXXXXXXX-154-71.png) + +如果在倒计时结束的时候要使用新的数据渲染页面，正确的做法是： + +在倒计时结束前的一段时间里，先请求好数据，倒计时结束后，再渲染页面。 + +关于倒计时，如果你有什么更好的解决方案，欢迎评论交流。 diff --git a/_posts/2018-06-01-animation.md b/_posts/2018-06-01-animation.md new file mode 100644 index 0000000..c742e4f --- /dev/null +++ b/_posts/2018-06-01-animation.md @@ -0,0 +1,142 @@ +--- +layout: post +title: "提升用户体验的前端动画" +categories: JavaScript +tags: 动画 手势 +author: HyG +--- + +* content +{:toc} + +与其他开发人员不同的是，前端开发都是在端上游走舞者，直接与用户交流沟通，这就需要前端开发具有更敏锐的交互体验思考，或者能更精准地理解设计师们意图，将最佳的用户体验带给用户。优质的交互体验对于用户来说学习成本应该是极低的，都是非常自然的操作，却可以让用户感到畅快愉悦，甚至惊喜。本文将通过一个看似简单的 poplayer 来分析我在这其中通过思考做的体验优化，获得类似 native 的体验感。 + +![](https://ws1.sinaimg.cn/large/7011d6cfgy1frx9jv0kpfj208w0fracu.jpg) + + + + +> 关于 poplayer 是什么，详见 [POPLAYER起来HIGH~~](https://github.com/amfe/article/issues/18) + +简单的说下需求，这个弹层希望可以像 native 在商品详情页的弹层一样，从下向上滑出，点击遮罩或按钮时关闭。为了给用户带来更好的体验，我在这个基础上又增加了一些手势和过渡的动画效果，如下图。下面简单的拆分一下动画细节： + +- 页面载入，卡片向上滑入 +- 增加 pan 的手势，卡片跟随手指滑动 +- 随着手指滑动，增加遮罩透明度与卡片阴影变化 +- 增加向上和向下的边界条件的处理 + +## 动画与手势的运用 + +这些动画利用 CSS 3 的一些属性再加上手势操作即可完成，这里手势操作我选择了老牌的 [HammerJS](https://hammerjs.github.io/)。 + +点击超级会员专享，折上95折 banner，卡片向上滑入 + + + +这里直接使用 `transition` 控制过渡。发生样式变化的有 3 个地方： + +- 卡片位置，使用 `transform: translateY` 控制纵向位置 +- 遮罩透明度，随着卡片上滑，背景遮罩由透明变为半透明 +- 卡片的阴影，注意仔细观察，随着卡片的上滑，为了凸显出弹层是悬浮在底层的视觉效果，其阴影的 `blur`,`spread`,`color` 也跟随变重 + +下面再加入 pan 手势，即拖拽或平移，这里我们使用这个手势实现弹层的拖拽和相关动画。手指不离开屏幕进行滑动操作，如下图： + + + +我们把最外层容器节点作为参数，实例化 hammer 对象，默认 pan 手势只有横向操作，这里设置为所有方向。在监听 pandown panup 时，根据手指移动的差值控制卡片位置、背景遮罩透明度、卡片阴影的样式。代码如下： + +```js +const hammer = new Hammer(containerEl) +hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL }) +hammer.on('pandown panup', panDownUp) + +const panDownUp = (ev) => { + const opacity = 0.7 - ev.deltaY / 1024 + coverEle.style.opacity = opacity + + const boxShadowBlur = 12 - ev.deltaY / 46 + const boxShadowSpread = 3 - ev.deltaY / 180 + const boxShadowColorAlpha = '' + popWrapEle.style.boxShadow = `0 0 ${boxShadowBlur}px ${boxShadowSpread}px rgba(0,0,0,${opacity})` + + const scrollY = ev.deltaY * 1.2 + popWrapEle.style.transform = `translateY(${scrollY}px)` +} +``` + +对于各个样式属性的值，通过乘系数等方式得到需要的值。 + +这里要注意，pan 的操作中是不需要原有的 transition 过渡的，因为滑动操作时，希望让动画非常跟手，而 transition 是一个消耗时间的过渡，而且多次触发 transition 也会导致性能问题，我们要在 panstart 将其移除，panend 再加回来，添加如下代码： + +```js +hammer.on('panstart', () => { + popWrapEle.classList.remove('pop-wrap-transition') + coverEle.classList.remove('cover-transition') +}) +hammer.on('panend', (ev) => { + popWrapEle.classList.add('pop-wrap-transition') + coverEle.classList.add('cover-transition') +}) +``` + +## 向下滑出的处理 + +用户在向下滑动松手时的距离，如果大于某个值，让卡片滑出，关闭 poplayer，小于某个值，则回弹到原位。 + +这比较符合用户体验、防止误关闭，同时滑出的关闭方式也给了用户一种流畅感。经过本人多次测试，最终选择的下滑临界值为 180。效果如下图： + + + +在 panend 事件中加入这个逻辑判断 + +```js +hammer.on('panend', (ev) => { + if (ev.deltaY > 180) { + closePoplayer() + } else { + popWrapEle.style.transform = 'translateY(0)' + popWrapEle.style.boxShadow = '0 0 12px 3px rgba(0,0,0,.74)' + coverEle.style.opacity = '0.7' + } + // ... +}) +``` + +## 向上滑动的溢出感 + +这个卡片本身是无法再向上滑动的，但是如果用户想继续滑呢？为了让这个弹层增添一些活力，我在这个操作中让卡片微微膨胀，增添亲和力，仿佛用户想滑动它，但是它又存在着一股粘滞力无法大距离的移动，甚至满足了用户心中的小小控制欲。 + +效果如下： + + + +在向上滑动事件中加入如下代码： + +```js +const panDownUp = (ev) => { + if (ev.deltaY < 0) { + console.log(ev.deltaY) + const scrollUpY = ev.deltaY / 80 + const scaleX = -ev.deltaY / 20000 + 1 + popWrapEle.style.transform = `scale(${scaleX}) translateY(${scrollUpY}px)` + return + } + // ... +} +``` + +## 其他小坑 + +webkit 前缀。ios 8 下部分 CSS 3 属性需要添加 `-webkit-` 前缀。参考[flexbox布局的兼容性](http://www.ayqy.net/blog/flexbox%E5%B8%83%E5%B1%80%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7/)。 + +覆盖 status bar。iOS 11 起，需要在 meta 标签中添加 `viewport-fit=cover`，才能使得 webView 覆盖到顶部的 status bar，meta 标签最终可以写为： + +``` html + +``` + +## 总结 + +交互体验体现在各个细节之中，没有大而全的规则，但整体方向就是让用户在使用软件的时候感到更加的自然畅快。而动画只是交互体验中的一小部分。 + +我认为前端的本质，就是将最优质的用户体验带给用户，我也在为之不断努力，欢迎交流。 diff --git a/_sass/_demo.scss b/_sass/_demo.scss index 8eef39c..cfad8c2 100644 --- a/_sass/_demo.scss +++ b/_sass/_demo.scss @@ -34,6 +34,7 @@ -webkit-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13); -moz-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13); box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13); + } .a-img { color: #fff; @@ -56,4 +57,9 @@ } } } -} \ No newline at end of file +} +.deep{ + transition: .32s cubic-bezier(0.46, 0.03, 0.52, 0.96); + transform-style: preserve-3d; + transform: perspective(1600px) rotateX(14deg) translateZ(-200px); +} diff --git a/_sass/_page.scss b/_sass/_page.scss index 3e412c5..b1d8a88 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -110,7 +110,7 @@ -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ - word-break: break-word; + // word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; @@ -222,9 +222,16 @@ transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38); } .right-show { + z-index: 999; visibility: visible; opacity: 1; transform: scale(1); + .content-ul{ + margin-bottom: 0; + >li:last-of-type{ + margin-bottom: 16px; + } + } } } } diff --git a/_sass/_reset.scss b/_sass/_reset.scss index ef66fe6..933d173 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -21,7 +21,7 @@ h3, h4, h5, h6 { - font-weight: normal; + font-weight: 400; } html { height: 100%; @@ -29,7 +29,7 @@ html { body { font-family: 'Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif; color: #333; - background-image: url(https://ooo.0o0.ooo/2016/06/20/5768c606cf9cb.jpg); + background-image: url(https://gw.alicdn.com/tfs/TB1xzbUumBYBeNjy0FeXXbnmFXa-125-121.png); position: relative; min-height: 100%; padding-bottom: 190px; @@ -49,30 +49,28 @@ hr { /////////// h1 { - font-size: 36px; + font-size: 30px; } h2 { - font-size: 30px; + font-size: 26px; border-bottom: 1px solid #eee; + margin: 50px 0 25px; } h3 { - font-size: 26px; + font-size: 23px; + margin: 50px 0 20px; } h4 { - font-size: 22px; + font-size: 19px; + margin: 30px 0 10px; } h5 { - font-size: 20px; -} -h6 { - font-size: 18px; + font-size: 17px; + margin: 20px 0 10px; } -h2, -h3, -h4, -h5, h6 { - margin: 20px 0 10px; + font-size: 16px; + margin: 10px 0 5px; } blockquote { color: #444; @@ -114,7 +112,7 @@ table { } } p { - margin: 0 0 10px; + margin: 0 0 14px; } img { max-width: 100%; diff --git a/css/fontawesome/css/font-awesome.css b/css/fontawesome/css/font-awesome.css deleted file mode 100644 index b2a5fe2..0000000 --- a/css/fontawesome/css/font-awesome.css +++ /dev/null @@ -1,2086 +0,0 @@ -/*! - * Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome - * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) - */ -/* FONT PATH - * -------------------------- */ -@font-face { - font-family: 'FontAwesome'; - src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); - src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); - font-weight: normal; - font-style: normal; -} -.fa { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -/* makes the font 33% larger relative to the icon container */ -.fa-lg { - font-size: 1.33333333em; - line-height: 0.75em; - vertical-align: -15%; -} -.fa-2x { - font-size: 2em; -} -.fa-3x { - font-size: 3em; -} -.fa-4x { - font-size: 4em; -} -.fa-5x { - font-size: 5em; -} -.fa-fw { - width: 1.28571429em; - text-align: center; -} -.fa-ul { - padding-left: 0; - margin-left: 2.14285714em; - list-style-type: none; -} -.fa-ul > li { - position: relative; -} -.fa-li { - position: absolute; - left: -2.14285714em; - width: 2.14285714em; - top: 0.14285714em; - text-align: center; -} -.fa-li.fa-lg { - left: -1.85714286em; -} -.fa-border { - padding: .2em .25em .15em; - border: solid 0.08em #eeeeee; - border-radius: .1em; -} -.fa-pull-left { - float: left; -} -.fa-pull-right { - float: right; -} -.fa.fa-pull-left { - margin-right: .3em; -} -.fa.fa-pull-right { - margin-left: .3em; -} -/* Deprecated as of 4.4.0 */ -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.fa.pull-left { - margin-right: .3em; -} -.fa.pull-right { - margin-left: .3em; -} -.fa-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; -} -.fa-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); -} -@-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -@keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} -.fa-rotate-90 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); -} -.fa-rotate-180 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} -.fa-rotate-270 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); -} -.fa-flip-horizontal { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); - -webkit-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - transform: scale(-1, 1); -} -.fa-flip-vertical { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); - -webkit-transform: scale(1, -1); - -ms-transform: scale(1, -1); - transform: scale(1, -1); -} -:root .fa-rotate-90, -:root .fa-rotate-180, -:root .fa-rotate-270, -:root .fa-flip-horizontal, -:root .fa-flip-vertical { - filter: none; -} -.fa-stack { - position: relative; - display: inline-block; - width: 2em; - height: 2em; - line-height: 2em; - vertical-align: middle; -} -.fa-stack-1x, -.fa-stack-2x { - position: absolute; - left: 0; - width: 100%; - text-align: center; -} -.fa-stack-1x { - line-height: inherit; -} -.fa-stack-2x { - font-size: 2em; -} -.fa-inverse { - color: #ffffff; -} -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen - readers do not read off random characters that represent icons */ -.fa-glass:before { - content: "\f000"; -} -.fa-music:before { - content: "\f001"; -} -.fa-search:before { - content: "\f002"; -} -.fa-envelope-o:before { - content: "\f003"; -} -.fa-heart:before { - content: "\f004"; -} -.fa-star:before { - content: "\f005"; -} -.fa-star-o:before { - content: "\f006"; -} -.fa-user:before { - content: "\f007"; -} -.fa-film:before { - content: "\f008"; -} -.fa-th-large:before { - content: "\f009"; -} -.fa-th:before { - content: "\f00a"; -} -.fa-th-list:before { - content: "\f00b"; -} -.fa-check:before { - content: "\f00c"; -} -.fa-remove:before, -.fa-close:before, -.fa-times:before { - content: "\f00d"; -} -.fa-search-plus:before { - content: "\f00e"; -} -.fa-search-minus:before { - content: "\f010"; -} -.fa-power-off:before { - content: "\f011"; -} -.fa-signal:before { - content: "\f012"; -} -.fa-gear:before, -.fa-cog:before { - content: "\f013"; -} -.fa-trash-o:before { - content: "\f014"; -} -.fa-home:before { - content: "\f015"; -} -.fa-file-o:before { - content: "\f016"; -} -.fa-clock-o:before { - content: "\f017"; -} -.fa-road:before { - content: "\f018"; -} -.fa-download:before { - content: "\f019"; -} -.fa-arrow-circle-o-down:before { - content: "\f01a"; -} -.fa-arrow-circle-o-up:before { - content: "\f01b"; -} -.fa-inbox:before { - content: "\f01c"; -} -.fa-play-circle-o:before { - content: "\f01d"; -} -.fa-rotate-right:before, -.fa-repeat:before { - content: "\f01e"; -} -.fa-refresh:before { - content: "\f021"; -} -.fa-list-alt:before { - content: "\f022"; -} -.fa-lock:before { - content: "\f023"; -} -.fa-flag:before { - content: "\f024"; -} -.fa-headphones:before { - content: "\f025"; -} -.fa-volume-off:before { - content: "\f026"; -} -.fa-volume-down:before { - content: "\f027"; -} -.fa-volume-up:before { - content: "\f028"; -} -.fa-qrcode:before { - content: "\f029"; -} -.fa-barcode:before { - content: "\f02a"; -} -.fa-tag:before { - content: "\f02b"; -} -.fa-tags:before { - content: "\f02c"; -} -.fa-book:before { - content: "\f02d"; -} -.fa-bookmark:before { - content: "\f02e"; -} -.fa-print:before { - content: "\f02f"; -} -.fa-camera:before { - content: "\f030"; -} -.fa-font:before { - content: "\f031"; -} -.fa-bold:before { - content: "\f032"; -} -.fa-italic:before { - content: "\f033"; -} -.fa-text-height:before { - content: "\f034"; -} -.fa-text-width:before { - content: "\f035"; -} -.fa-align-left:before { - content: "\f036"; -} -.fa-align-center:before { - content: "\f037"; -} -.fa-align-right:before { - content: "\f038"; -} -.fa-align-justify:before { - content: "\f039"; -} -.fa-list:before { - content: "\f03a"; -} -.fa-dedent:before, -.fa-outdent:before { - content: "\f03b"; -} -.fa-indent:before { - content: "\f03c"; -} -.fa-video-camera:before { - content: "\f03d"; -} -.fa-photo:before, -.fa-image:before, -.fa-picture-o:before { - content: "\f03e"; -} -.fa-pencil:before { - content: "\f040"; -} -.fa-map-marker:before { - content: "\f041"; -} -.fa-adjust:before { - content: "\f042"; -} -.fa-tint:before { - content: "\f043"; -} -.fa-edit:before, -.fa-pencil-square-o:before { - content: "\f044"; -} -.fa-share-square-o:before { - content: "\f045"; -} -.fa-check-square-o:before { - content: "\f046"; -} -.fa-arrows:before { - content: "\f047"; -} -.fa-step-backward:before { - content: "\f048"; -} -.fa-fast-backward:before { - content: "\f049"; -} -.fa-backward:before { - content: "\f04a"; -} -.fa-play:before { - content: "\f04b"; -} -.fa-pause:before { - content: "\f04c"; -} -.fa-stop:before { - content: "\f04d"; -} -.fa-forward:before { - content: "\f04e"; -} -.fa-fast-forward:before { - content: "\f050"; -} -.fa-step-forward:before { - content: "\f051"; -} -.fa-eject:before { - content: "\f052"; -} -.fa-chevron-left:before { - content: "\f053"; -} -.fa-chevron-right:before { - content: "\f054"; -} -.fa-plus-circle:before { - content: "\f055"; -} -.fa-minus-circle:before { - content: "\f056"; -} -.fa-times-circle:before { - content: "\f057"; -} -.fa-check-circle:before { - content: "\f058"; -} -.fa-question-circle:before { - content: "\f059"; -} -.fa-info-circle:before { - content: "\f05a"; -} -.fa-crosshairs:before { - content: "\f05b"; -} -.fa-times-circle-o:before { - content: "\f05c"; -} -.fa-check-circle-o:before { - content: "\f05d"; -} -.fa-ban:before { - content: "\f05e"; -} -.fa-arrow-left:before { - content: "\f060"; -} -.fa-arrow-right:before { - content: "\f061"; -} -.fa-arrow-up:before { - content: "\f062"; -} -.fa-arrow-down:before { - content: "\f063"; -} -.fa-mail-forward:before, -.fa-share:before { - content: "\f064"; -} -.fa-expand:before { - content: "\f065"; -} -.fa-compress:before { - content: "\f066"; -} -.fa-plus:before { - content: "\f067"; -} -.fa-minus:before { - content: "\f068"; -} -.fa-asterisk:before { - content: "\f069"; -} -.fa-exclamation-circle:before { - content: "\f06a"; -} -.fa-gift:before { - content: "\f06b"; -} -.fa-leaf:before { - content: "\f06c"; -} -.fa-fire:before { - content: "\f06d"; -} -.fa-eye:before { - content: "\f06e"; -} -.fa-eye-slash:before { - content: "\f070"; -} -.fa-warning:before, -.fa-exclamation-triangle:before { - content: "\f071"; -} -.fa-plane:before { - content: "\f072"; -} -.fa-calendar:before { - content: "\f073"; -} -.fa-random:before { - content: "\f074"; -} -.fa-comment:before { - content: "\f075"; -} -.fa-magnet:before { - content: "\f076"; -} -.fa-chevron-up:before { - content: "\f077"; -} -.fa-chevron-down:before { - content: "\f078"; -} -.fa-retweet:before { - content: "\f079"; -} -.fa-shopping-cart:before { - content: "\f07a"; -} -.fa-folder:before { - content: "\f07b"; -} -.fa-folder-open:before { - content: "\f07c"; -} -.fa-arrows-v:before { - content: "\f07d"; -} -.fa-arrows-h:before { - content: "\f07e"; -} -.fa-bar-chart-o:before, -.fa-bar-chart:before { - content: "\f080"; -} -.fa-twitter-square:before { - content: "\f081"; -} -.fa-facebook-square:before { - content: "\f082"; -} -.fa-camera-retro:before { - content: "\f083"; -} -.fa-key:before { - content: "\f084"; -} -.fa-gears:before, -.fa-cogs:before { - content: "\f085"; -} -.fa-comments:before { - content: "\f086"; -} -.fa-thumbs-o-up:before { - content: "\f087"; -} -.fa-thumbs-o-down:before { - content: "\f088"; -} -.fa-star-half:before { - content: "\f089"; -} -.fa-heart-o:before { - content: "\f08a"; -} -.fa-sign-out:before { - content: "\f08b"; -} -.fa-linkedin-square:before { - content: "\f08c"; -} -.fa-thumb-tack:before { - content: "\f08d"; -} -.fa-external-link:before { - content: "\f08e"; -} -.fa-sign-in:before { - content: "\f090"; -} -.fa-trophy:before { - content: "\f091"; -} -.fa-github-square:before { - content: "\f092"; -} -.fa-upload:before { - content: "\f093"; -} -.fa-lemon-o:before { - content: "\f094"; -} -.fa-phone:before { - content: "\f095"; -} -.fa-square-o:before { - content: "\f096"; -} -.fa-bookmark-o:before { - content: "\f097"; -} -.fa-phone-square:before { - content: "\f098"; -} -.fa-twitter:before { - content: "\f099"; -} -.fa-facebook-f:before, -.fa-facebook:before { - content: "\f09a"; -} -.fa-github:before { - content: "\f09b"; -} -.fa-unlock:before { - content: "\f09c"; -} -.fa-credit-card:before { - content: "\f09d"; -} -.fa-feed:before, -.fa-rss:before { - content: "\f09e"; -} -.fa-hdd-o:before { - content: "\f0a0"; -} -.fa-bullhorn:before { - content: "\f0a1"; -} -.fa-bell:before { - content: "\f0f3"; -} -.fa-certificate:before { - content: "\f0a3"; -} -.fa-hand-o-right:before { - content: "\f0a4"; -} -.fa-hand-o-left:before { - content: "\f0a5"; -} -.fa-hand-o-up:before { - content: "\f0a6"; -} -.fa-hand-o-down:before { - content: "\f0a7"; -} -.fa-arrow-circle-left:before { - content: "\f0a8"; -} -.fa-arrow-circle-right:before { - content: "\f0a9"; -} -.fa-arrow-circle-up:before { - content: "\f0aa"; -} -.fa-arrow-circle-down:before { - content: "\f0ab"; -} -.fa-globe:before { - content: "\f0ac"; -} -.fa-wrench:before { - content: "\f0ad"; -} -.fa-tasks:before { - content: "\f0ae"; -} -.fa-filter:before { - content: "\f0b0"; -} -.fa-briefcase:before { - content: "\f0b1"; -} -.fa-arrows-alt:before { - content: "\f0b2"; -} -.fa-group:before, -.fa-users:before { - content: "\f0c0"; -} -.fa-chain:before, -.fa-link:before { - content: "\f0c1"; -} -.fa-cloud:before { - content: "\f0c2"; -} -.fa-flask:before { - content: "\f0c3"; -} -.fa-cut:before, -.fa-scissors:before { - content: "\f0c4"; -} -.fa-copy:before, -.fa-files-o:before { - content: "\f0c5"; -} -.fa-paperclip:before { - content: "\f0c6"; -} -.fa-save:before, -.fa-floppy-o:before { - content: "\f0c7"; -} -.fa-square:before { - content: "\f0c8"; -} -.fa-navicon:before, -.fa-reorder:before, -.fa-bars:before { - content: "\f0c9"; -} -.fa-list-ul:before { - content: "\f0ca"; -} -.fa-list-ol:before { - content: "\f0cb"; -} -.fa-strikethrough:before { - content: "\f0cc"; -} -.fa-underline:before { - content: "\f0cd"; -} -.fa-table:before { - content: "\f0ce"; -} -.fa-magic:before { - content: "\f0d0"; -} -.fa-truck:before { - content: "\f0d1"; -} -.fa-pinterest:before { - content: "\f0d2"; -} -.fa-pinterest-square:before { - content: "\f0d3"; -} -.fa-google-plus-square:before { - content: "\f0d4"; -} -.fa-google-plus:before { - content: "\f0d5"; -} -.fa-money:before { - content: "\f0d6"; -} -.fa-caret-down:before { - content: "\f0d7"; -} -.fa-caret-up:before { - content: "\f0d8"; -} -.fa-caret-left:before { - content: "\f0d9"; -} -.fa-caret-right:before { - content: "\f0da"; -} -.fa-columns:before { - content: "\f0db"; -} -.fa-unsorted:before, -.fa-sort:before { - content: "\f0dc"; -} -.fa-sort-down:before, -.fa-sort-desc:before { - content: "\f0dd"; -} -.fa-sort-up:before, -.fa-sort-asc:before { - content: "\f0de"; -} -.fa-envelope:before { - content: "\f0e0"; -} -.fa-linkedin:before { - content: "\f0e1"; -} -.fa-rotate-left:before, -.fa-undo:before { - content: "\f0e2"; -} -.fa-legal:before, -.fa-gavel:before { - content: "\f0e3"; -} -.fa-dashboard:before, -.fa-tachometer:before { - content: "\f0e4"; -} -.fa-comment-o:before { - content: "\f0e5"; -} -.fa-comments-o:before { - content: "\f0e6"; -} -.fa-flash:before, -.fa-bolt:before { - content: "\f0e7"; -} -.fa-sitemap:before { - content: "\f0e8"; -} -.fa-umbrella:before { - content: "\f0e9"; -} -.fa-paste:before, -.fa-clipboard:before { - content: "\f0ea"; -} -.fa-lightbulb-o:before { - content: "\f0eb"; -} -.fa-exchange:before { - content: "\f0ec"; -} -.fa-cloud-download:before { - content: "\f0ed"; -} -.fa-cloud-upload:before { - content: "\f0ee"; -} -.fa-user-md:before { - content: "\f0f0"; -} -.fa-stethoscope:before { - content: "\f0f1"; -} -.fa-suitcase:before { - content: "\f0f2"; -} -.fa-bell-o:before { - content: "\f0a2"; -} -.fa-coffee:before { - content: "\f0f4"; -} -.fa-cutlery:before { - content: "\f0f5"; -} -.fa-file-text-o:before { - content: "\f0f6"; -} -.fa-building-o:before { - content: "\f0f7"; -} -.fa-hospital-o:before { - content: "\f0f8"; -} -.fa-ambulance:before { - content: "\f0f9"; -} -.fa-medkit:before { - content: "\f0fa"; -} -.fa-fighter-jet:before { - content: "\f0fb"; -} -.fa-beer:before { - content: "\f0fc"; -} -.fa-h-square:before { - content: "\f0fd"; -} -.fa-plus-square:before { - content: "\f0fe"; -} -.fa-angle-double-left:before { - content: "\f100"; -} -.fa-angle-double-right:before { - content: "\f101"; -} -.fa-angle-double-up:before { - content: "\f102"; -} -.fa-angle-double-down:before { - content: "\f103"; -} -.fa-angle-left:before { - content: "\f104"; -} -.fa-angle-right:before { - content: "\f105"; -} -.fa-angle-up:before { - content: "\f106"; -} -.fa-angle-down:before { - content: "\f107"; -} -.fa-desktop:before { - content: "\f108"; -} -.fa-laptop:before { - content: "\f109"; -} -.fa-tablet:before { - content: "\f10a"; -} -.fa-mobile-phone:before, -.fa-mobile:before { - content: "\f10b"; -} -.fa-circle-o:before { - content: "\f10c"; -} -.fa-quote-left:before { - content: "\f10d"; -} -.fa-quote-right:before { - content: "\f10e"; -} -.fa-spinner:before { - content: "\f110"; -} -.fa-circle:before { - content: "\f111"; -} -.fa-mail-reply:before, -.fa-reply:before { - content: "\f112"; -} -.fa-github-alt:before { - content: "\f113"; -} -.fa-folder-o:before { - content: "\f114"; -} -.fa-folder-open-o:before { - content: "\f115"; -} -.fa-smile-o:before { - content: "\f118"; -} -.fa-frown-o:before { - content: "\f119"; -} -.fa-meh-o:before { - content: "\f11a"; -} -.fa-gamepad:before { - content: "\f11b"; -} -.fa-keyboard-o:before { - content: "\f11c"; -} -.fa-flag-o:before { - content: "\f11d"; -} -.fa-flag-checkered:before { - content: "\f11e"; -} -.fa-terminal:before { - content: "\f120"; -} -.fa-code:before { - content: "\f121"; -} -.fa-mail-reply-all:before, -.fa-reply-all:before { - content: "\f122"; -} -.fa-star-half-empty:before, -.fa-star-half-full:before, -.fa-star-half-o:before { - content: "\f123"; -} -.fa-location-arrow:before { - content: "\f124"; -} -.fa-crop:before { - content: "\f125"; -} -.fa-code-fork:before { - content: "\f126"; -} -.fa-unlink:before, -.fa-chain-broken:before { - content: "\f127"; -} -.fa-question:before { - content: "\f128"; -} -.fa-info:before { - content: "\f129"; -} -.fa-exclamation:before { - content: "\f12a"; -} -.fa-superscript:before { - content: "\f12b"; -} -.fa-subscript:before { - content: "\f12c"; -} -.fa-eraser:before { - content: "\f12d"; -} -.fa-puzzle-piece:before { - content: "\f12e"; -} -.fa-microphone:before { - content: "\f130"; -} -.fa-microphone-slash:before { - content: "\f131"; -} -.fa-shield:before { - content: "\f132"; -} -.fa-calendar-o:before { - content: "\f133"; -} -.fa-fire-extinguisher:before { - content: "\f134"; -} -.fa-rocket:before { - content: "\f135"; -} -.fa-maxcdn:before { - content: "\f136"; -} -.fa-chevron-circle-left:before { - content: "\f137"; -} -.fa-chevron-circle-right:before { - content: "\f138"; -} -.fa-chevron-circle-up:before { - content: "\f139"; -} -.fa-chevron-circle-down:before { - content: "\f13a"; -} -.fa-html5:before { - content: "\f13b"; -} -.fa-css3:before { - content: "\f13c"; -} -.fa-anchor:before { - content: "\f13d"; -} -.fa-unlock-alt:before { - content: "\f13e"; -} -.fa-bullseye:before { - content: "\f140"; -} -.fa-ellipsis-h:before { - content: "\f141"; -} -.fa-ellipsis-v:before { - content: "\f142"; -} -.fa-rss-square:before { - content: "\f143"; -} -.fa-play-circle:before { - content: "\f144"; -} -.fa-ticket:before { - content: "\f145"; -} -.fa-minus-square:before { - content: "\f146"; -} -.fa-minus-square-o:before { - content: "\f147"; -} -.fa-level-up:before { - content: "\f148"; -} -.fa-level-down:before { - content: "\f149"; -} -.fa-check-square:before { - content: "\f14a"; -} -.fa-pencil-square:before { - content: "\f14b"; -} -.fa-external-link-square:before { - content: "\f14c"; -} -.fa-share-square:before { - content: "\f14d"; -} -.fa-compass:before { - content: "\f14e"; -} -.fa-toggle-down:before, -.fa-caret-square-o-down:before { - content: "\f150"; -} -.fa-toggle-up:before, -.fa-caret-square-o-up:before { - content: "\f151"; -} -.fa-toggle-right:before, -.fa-caret-square-o-right:before { - content: "\f152"; -} -.fa-euro:before, -.fa-eur:before { - content: "\f153"; -} -.fa-gbp:before { - content: "\f154"; -} -.fa-dollar:before, -.fa-usd:before { - content: "\f155"; -} -.fa-rupee:before, -.fa-inr:before { - content: "\f156"; -} -.fa-cny:before, -.fa-rmb:before, -.fa-yen:before, -.fa-jpy:before { - content: "\f157"; -} -.fa-ruble:before, -.fa-rouble:before, -.fa-rub:before { - content: "\f158"; -} -.fa-won:before, -.fa-krw:before { - content: "\f159"; -} -.fa-bitcoin:before, -.fa-btc:before { - content: "\f15a"; -} -.fa-file:before { - content: "\f15b"; -} -.fa-file-text:before { - content: "\f15c"; -} -.fa-sort-alpha-asc:before { - content: "\f15d"; -} -.fa-sort-alpha-desc:before { - content: "\f15e"; -} -.fa-sort-amount-asc:before { - content: "\f160"; -} -.fa-sort-amount-desc:before { - content: "\f161"; -} -.fa-sort-numeric-asc:before { - content: "\f162"; -} -.fa-sort-numeric-desc:before { - content: "\f163"; -} -.fa-thumbs-up:before { - content: "\f164"; -} -.fa-thumbs-down:before { - content: "\f165"; -} -.fa-youtube-square:before { - content: "\f166"; -} -.fa-youtube:before { - content: "\f167"; -} -.fa-xing:before { - content: "\f168"; -} -.fa-xing-square:before { - content: "\f169"; -} -.fa-youtube-play:before { - content: "\f16a"; -} -.fa-dropbox:before { - content: "\f16b"; -} -.fa-stack-overflow:before { - content: "\f16c"; -} -.fa-instagram:before { - content: "\f16d"; -} -.fa-flickr:before { - content: "\f16e"; -} -.fa-adn:before { - content: "\f170"; -} -.fa-bitbucket:before { - content: "\f171"; -} -.fa-bitbucket-square:before { - content: "\f172"; -} -.fa-tumblr:before { - content: "\f173"; -} -.fa-tumblr-square:before { - content: "\f174"; -} -.fa-long-arrow-down:before { - content: "\f175"; -} -.fa-long-arrow-up:before { - content: "\f176"; -} -.fa-long-arrow-left:before { - content: "\f177"; -} -.fa-long-arrow-right:before { - content: "\f178"; -} -.fa-apple:before { - content: "\f179"; -} -.fa-windows:before { - content: "\f17a"; -} -.fa-android:before { - content: "\f17b"; -} -.fa-linux:before { - content: "\f17c"; -} -.fa-dribbble:before { - content: "\f17d"; -} -.fa-skype:before { - content: "\f17e"; -} -.fa-foursquare:before { - content: "\f180"; -} -.fa-trello:before { - content: "\f181"; -} -.fa-female:before { - content: "\f182"; -} -.fa-male:before { - content: "\f183"; -} -.fa-gittip:before, -.fa-gratipay:before { - content: "\f184"; -} -.fa-sun-o:before { - content: "\f185"; -} -.fa-moon-o:before { - content: "\f186"; -} -.fa-archive:before { - content: "\f187"; -} -.fa-bug:before { - content: "\f188"; -} -.fa-vk:before { - content: "\f189"; -} -.fa-weibo:before { - content: "\f18a"; -} -.fa-renren:before { - content: "\f18b"; -} -.fa-pagelines:before { - content: "\f18c"; -} -.fa-stack-exchange:before { - content: "\f18d"; -} -.fa-arrow-circle-o-right:before { - content: "\f18e"; -} -.fa-arrow-circle-o-left:before { - content: "\f190"; -} -.fa-toggle-left:before, -.fa-caret-square-o-left:before { - content: "\f191"; -} -.fa-dot-circle-o:before { - content: "\f192"; -} -.fa-wheelchair:before { - content: "\f193"; -} -.fa-vimeo-square:before { - content: "\f194"; -} -.fa-turkish-lira:before, -.fa-try:before { - content: "\f195"; -} -.fa-plus-square-o:before { - content: "\f196"; -} -.fa-space-shuttle:before { - content: "\f197"; -} -.fa-slack:before { - content: "\f198"; -} -.fa-envelope-square:before { - content: "\f199"; -} -.fa-wordpress:before { - content: "\f19a"; -} -.fa-openid:before { - content: "\f19b"; -} -.fa-institution:before, -.fa-bank:before, -.fa-university:before { - content: "\f19c"; -} -.fa-mortar-board:before, -.fa-graduation-cap:before { - content: "\f19d"; -} -.fa-yahoo:before { - content: "\f19e"; -} -.fa-google:before { - content: "\f1a0"; -} -.fa-reddit:before { - content: "\f1a1"; -} -.fa-reddit-square:before { - content: "\f1a2"; -} -.fa-stumbleupon-circle:before { - content: "\f1a3"; -} -.fa-stumbleupon:before { - content: "\f1a4"; -} -.fa-delicious:before { - content: "\f1a5"; -} -.fa-digg:before { - content: "\f1a6"; -} -.fa-pied-piper:before { - content: "\f1a7"; -} -.fa-pied-piper-alt:before { - content: "\f1a8"; -} -.fa-drupal:before { - content: "\f1a9"; -} -.fa-joomla:before { - content: "\f1aa"; -} -.fa-language:before { - content: "\f1ab"; -} -.fa-fax:before { - content: "\f1ac"; -} -.fa-building:before { - content: "\f1ad"; -} -.fa-child:before { - content: "\f1ae"; -} -.fa-paw:before { - content: "\f1b0"; -} -.fa-spoon:before { - content: "\f1b1"; -} -.fa-cube:before { - content: "\f1b2"; -} -.fa-cubes:before { - content: "\f1b3"; -} -.fa-behance:before { - content: "\f1b4"; -} -.fa-behance-square:before { - content: "\f1b5"; -} -.fa-steam:before { - content: "\f1b6"; -} -.fa-steam-square:before { - content: "\f1b7"; -} -.fa-recycle:before { - content: "\f1b8"; -} -.fa-automobile:before, -.fa-car:before { - content: "\f1b9"; -} -.fa-cab:before, -.fa-taxi:before { - content: "\f1ba"; -} -.fa-tree:before { - content: "\f1bb"; -} -.fa-spotify:before { - content: "\f1bc"; -} -.fa-deviantart:before { - content: "\f1bd"; -} -.fa-soundcloud:before { - content: "\f1be"; -} -.fa-database:before { - content: "\f1c0"; -} -.fa-file-pdf-o:before { - content: "\f1c1"; -} -.fa-file-word-o:before { - content: "\f1c2"; -} -.fa-file-excel-o:before { - content: "\f1c3"; -} -.fa-file-powerpoint-o:before { - content: "\f1c4"; -} -.fa-file-photo-o:before, -.fa-file-picture-o:before, -.fa-file-image-o:before { - content: "\f1c5"; -} -.fa-file-zip-o:before, -.fa-file-archive-o:before { - content: "\f1c6"; -} -.fa-file-sound-o:before, -.fa-file-audio-o:before { - content: "\f1c7"; -} -.fa-file-movie-o:before, -.fa-file-video-o:before { - content: "\f1c8"; -} -.fa-file-code-o:before { - content: "\f1c9"; -} -.fa-vine:before { - content: "\f1ca"; -} -.fa-codepen:before { - content: "\f1cb"; -} -.fa-jsfiddle:before { - content: "\f1cc"; -} -.fa-life-bouy:before, -.fa-life-buoy:before, -.fa-life-saver:before, -.fa-support:before, -.fa-life-ring:before { - content: "\f1cd"; -} -.fa-circle-o-notch:before { - content: "\f1ce"; -} -.fa-ra:before, -.fa-rebel:before { - content: "\f1d0"; -} -.fa-ge:before, -.fa-empire:before { - content: "\f1d1"; -} -.fa-git-square:before { - content: "\f1d2"; -} -.fa-git:before { - content: "\f1d3"; -} -.fa-y-combinator-square:before, -.fa-yc-square:before, -.fa-hacker-news:before { - content: "\f1d4"; -} -.fa-tencent-weibo:before { - content: "\f1d5"; -} -.fa-qq:before { - content: "\f1d6"; -} -.fa-wechat:before, -.fa-weixin:before { - content: "\f1d7"; -} -.fa-send:before, -.fa-paper-plane:before { - content: "\f1d8"; -} -.fa-send-o:before, -.fa-paper-plane-o:before { - content: "\f1d9"; -} -.fa-history:before { - content: "\f1da"; -} -.fa-circle-thin:before { - content: "\f1db"; -} -.fa-header:before { - content: "\f1dc"; -} -.fa-paragraph:before { - content: "\f1dd"; -} -.fa-sliders:before { - content: "\f1de"; -} -.fa-share-alt:before { - content: "\f1e0"; -} -.fa-share-alt-square:before { - content: "\f1e1"; -} -.fa-bomb:before { - content: "\f1e2"; -} -.fa-soccer-ball-o:before, -.fa-futbol-o:before { - content: "\f1e3"; -} -.fa-tty:before { - content: "\f1e4"; -} -.fa-binoculars:before { - content: "\f1e5"; -} -.fa-plug:before { - content: "\f1e6"; -} -.fa-slideshare:before { - content: "\f1e7"; -} -.fa-twitch:before { - content: "\f1e8"; -} -.fa-yelp:before { - content: "\f1e9"; -} -.fa-newspaper-o:before { - content: "\f1ea"; -} -.fa-wifi:before { - content: "\f1eb"; -} -.fa-calculator:before { - content: "\f1ec"; -} -.fa-paypal:before { - content: "\f1ed"; -} -.fa-google-wallet:before { - content: "\f1ee"; -} -.fa-cc-visa:before { - content: "\f1f0"; -} -.fa-cc-mastercard:before { - content: "\f1f1"; -} -.fa-cc-discover:before { - content: "\f1f2"; -} -.fa-cc-amex:before { - content: "\f1f3"; -} -.fa-cc-paypal:before { - content: "\f1f4"; -} -.fa-cc-stripe:before { - content: "\f1f5"; -} -.fa-bell-slash:before { - content: "\f1f6"; -} -.fa-bell-slash-o:before { - content: "\f1f7"; -} -.fa-trash:before { - content: "\f1f8"; -} -.fa-copyright:before { - content: "\f1f9"; -} -.fa-at:before { - content: "\f1fa"; -} -.fa-eyedropper:before { - content: "\f1fb"; -} -.fa-paint-brush:before { - content: "\f1fc"; -} -.fa-birthday-cake:before { - content: "\f1fd"; -} -.fa-area-chart:before { - content: "\f1fe"; -} -.fa-pie-chart:before { - content: "\f200"; -} -.fa-line-chart:before { - content: "\f201"; -} -.fa-lastfm:before { - content: "\f202"; -} -.fa-lastfm-square:before { - content: "\f203"; -} -.fa-toggle-off:before { - content: "\f204"; -} -.fa-toggle-on:before { - content: "\f205"; -} -.fa-bicycle:before { - content: "\f206"; -} -.fa-bus:before { - content: "\f207"; -} -.fa-ioxhost:before { - content: "\f208"; -} -.fa-angellist:before { - content: "\f209"; -} -.fa-cc:before { - content: "\f20a"; -} -.fa-shekel:before, -.fa-sheqel:before, -.fa-ils:before { - content: "\f20b"; -} -.fa-meanpath:before { - content: "\f20c"; -} -.fa-buysellads:before { - content: "\f20d"; -} -.fa-connectdevelop:before { - content: "\f20e"; -} -.fa-dashcube:before { - content: "\f210"; -} -.fa-forumbee:before { - content: "\f211"; -} -.fa-leanpub:before { - content: "\f212"; -} -.fa-sellsy:before { - content: "\f213"; -} -.fa-shirtsinbulk:before { - content: "\f214"; -} -.fa-simplybuilt:before { - content: "\f215"; -} -.fa-skyatlas:before { - content: "\f216"; -} -.fa-cart-plus:before { - content: "\f217"; -} -.fa-cart-arrow-down:before { - content: "\f218"; -} -.fa-diamond:before { - content: "\f219"; -} -.fa-ship:before { - content: "\f21a"; -} -.fa-user-secret:before { - content: "\f21b"; -} -.fa-motorcycle:before { - content: "\f21c"; -} -.fa-street-view:before { - content: "\f21d"; -} -.fa-heartbeat:before { - content: "\f21e"; -} -.fa-venus:before { - content: "\f221"; -} -.fa-mars:before { - content: "\f222"; -} -.fa-mercury:before { - content: "\f223"; -} -.fa-intersex:before, -.fa-transgender:before { - content: "\f224"; -} -.fa-transgender-alt:before { - content: "\f225"; -} -.fa-venus-double:before { - content: "\f226"; -} -.fa-mars-double:before { - content: "\f227"; -} -.fa-venus-mars:before { - content: "\f228"; -} -.fa-mars-stroke:before { - content: "\f229"; -} -.fa-mars-stroke-v:before { - content: "\f22a"; -} -.fa-mars-stroke-h:before { - content: "\f22b"; -} -.fa-neuter:before { - content: "\f22c"; -} -.fa-genderless:before { - content: "\f22d"; -} -.fa-facebook-official:before { - content: "\f230"; -} -.fa-pinterest-p:before { - content: "\f231"; -} -.fa-whatsapp:before { - content: "\f232"; -} -.fa-server:before { - content: "\f233"; -} -.fa-user-plus:before { - content: "\f234"; -} -.fa-user-times:before { - content: "\f235"; -} -.fa-hotel:before, -.fa-bed:before { - content: "\f236"; -} -.fa-viacoin:before { - content: "\f237"; -} -.fa-train:before { - content: "\f238"; -} -.fa-subway:before { - content: "\f239"; -} -.fa-medium:before { - content: "\f23a"; -} -.fa-yc:before, -.fa-y-combinator:before { - content: "\f23b"; -} -.fa-optin-monster:before { - content: "\f23c"; -} -.fa-opencart:before { - content: "\f23d"; -} -.fa-expeditedssl:before { - content: "\f23e"; -} -.fa-battery-4:before, -.fa-battery-full:before { - content: "\f240"; -} -.fa-battery-3:before, -.fa-battery-three-quarters:before { - content: "\f241"; -} -.fa-battery-2:before, -.fa-battery-half:before { - content: "\f242"; -} -.fa-battery-1:before, -.fa-battery-quarter:before { - content: "\f243"; -} -.fa-battery-0:before, -.fa-battery-empty:before { - content: "\f244"; -} -.fa-mouse-pointer:before { - content: "\f245"; -} -.fa-i-cursor:before { - content: "\f246"; -} -.fa-object-group:before { - content: "\f247"; -} -.fa-object-ungroup:before { - content: "\f248"; -} -.fa-sticky-note:before { - content: "\f249"; -} -.fa-sticky-note-o:before { - content: "\f24a"; -} -.fa-cc-jcb:before { - content: "\f24b"; -} -.fa-cc-diners-club:before { - content: "\f24c"; -} -.fa-clone:before { - content: "\f24d"; -} -.fa-balance-scale:before { - content: "\f24e"; -} -.fa-hourglass-o:before { - content: "\f250"; -} -.fa-hourglass-1:before, -.fa-hourglass-start:before { - content: "\f251"; -} -.fa-hourglass-2:before, -.fa-hourglass-half:before { - content: "\f252"; -} -.fa-hourglass-3:before, -.fa-hourglass-end:before { - content: "\f253"; -} -.fa-hourglass:before { - content: "\f254"; -} -.fa-hand-grab-o:before, -.fa-hand-rock-o:before { - content: "\f255"; -} -.fa-hand-stop-o:before, -.fa-hand-paper-o:before { - content: "\f256"; -} -.fa-hand-scissors-o:before { - content: "\f257"; -} -.fa-hand-lizard-o:before { - content: "\f258"; -} -.fa-hand-spock-o:before { - content: "\f259"; -} -.fa-hand-pointer-o:before { - content: "\f25a"; -} -.fa-hand-peace-o:before { - content: "\f25b"; -} -.fa-trademark:before { - content: "\f25c"; -} -.fa-registered:before { - content: "\f25d"; -} -.fa-creative-commons:before { - content: "\f25e"; -} -.fa-gg:before { - content: "\f260"; -} -.fa-gg-circle:before { - content: "\f261"; -} -.fa-tripadvisor:before { - content: "\f262"; -} -.fa-odnoklassniki:before { - content: "\f263"; -} -.fa-odnoklassniki-square:before { - content: "\f264"; -} -.fa-get-pocket:before { - content: "\f265"; -} -.fa-wikipedia-w:before { - content: "\f266"; -} -.fa-safari:before { - content: "\f267"; -} -.fa-chrome:before { - content: "\f268"; -} -.fa-firefox:before { - content: "\f269"; -} -.fa-opera:before { - content: "\f26a"; -} -.fa-internet-explorer:before { - content: "\f26b"; -} -.fa-tv:before, -.fa-television:before { - content: "\f26c"; -} -.fa-contao:before { - content: "\f26d"; -} -.fa-500px:before { - content: "\f26e"; -} -.fa-amazon:before { - content: "\f270"; -} -.fa-calendar-plus-o:before { - content: "\f271"; -} -.fa-calendar-minus-o:before { - content: "\f272"; -} -.fa-calendar-times-o:before { - content: "\f273"; -} -.fa-calendar-check-o:before { - content: "\f274"; -} -.fa-industry:before { - content: "\f275"; -} -.fa-map-pin:before { - content: "\f276"; -} -.fa-map-signs:before { - content: "\f277"; -} -.fa-map-o:before { - content: "\f278"; -} -.fa-map:before { - content: "\f279"; -} -.fa-commenting:before { - content: "\f27a"; -} -.fa-commenting-o:before { - content: "\f27b"; -} -.fa-houzz:before { - content: "\f27c"; -} -.fa-vimeo:before { - content: "\f27d"; -} -.fa-black-tie:before { - content: "\f27e"; -} -.fa-fonticons:before { - content: "\f280"; -} -.fa-reddit-alien:before { - content: "\f281"; -} -.fa-edge:before { - content: "\f282"; -} -.fa-credit-card-alt:before { - content: "\f283"; -} -.fa-codiepie:before { - content: "\f284"; -} -.fa-modx:before { - content: "\f285"; -} -.fa-fort-awesome:before { - content: "\f286"; -} -.fa-usb:before { - content: "\f287"; -} -.fa-product-hunt:before { - content: "\f288"; -} -.fa-mixcloud:before { - content: "\f289"; -} -.fa-scribd:before { - content: "\f28a"; -} -.fa-pause-circle:before { - content: "\f28b"; -} -.fa-pause-circle-o:before { - content: "\f28c"; -} -.fa-stop-circle:before { - content: "\f28d"; -} -.fa-stop-circle-o:before { - content: "\f28e"; -} -.fa-shopping-bag:before { - content: "\f290"; -} -.fa-shopping-basket:before { - content: "\f291"; -} -.fa-hashtag:before { - content: "\f292"; -} -.fa-bluetooth:before { - content: "\f293"; -} -.fa-bluetooth-b:before { - content: "\f294"; -} -.fa-percent:before { - content: "\f295"; -} diff --git a/css/fontawesome/css/font-awesome.min.css b/css/fontawesome/css/font-awesome.min.css deleted file mode 100644 index b87084b..0000000 --- a/css/fontawesome/css/font-awesome.min.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome - * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) - */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.5.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"} - - - @font-face {font-family: "iconfont"; - src: url('iconfont.eot?t=1461601848'); /* IE9*/ - src: url('iconfont.eot?t=1461601848#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('iconfont.woff?t=1461601848') format('woff'), /* chrome, firefox */ - url('iconfont.ttf?t=1461601848') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ - url('iconfont.svg?t=1461601848#iconfont') format('svg'); /* iOS 4.1- */ - } - - .iconfont { - font-family:"iconfont" !important; - font-size:16px; - font-style:normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.2px; - -moz-osx-font-smoothing: grayscale; - } - .icon-zhihu:before { content: "\e829"; } diff --git a/css/fontawesome/css/iconfont.css b/css/fontawesome/css/iconfont.css deleted file mode 100644 index cba1cab..0000000 --- a/css/fontawesome/css/iconfont.css +++ /dev/null @@ -1,18 +0,0 @@ - -@font-face {font-family: "iconfont"; - src: url('iconfont.eot?t=1461601848'); /* IE9*/ - src: url('iconfont.eot?t=1461601848#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('iconfont.woff?t=1461601848') format('woff'), /* chrome, firefox */ - url('iconfont.ttf?t=1461601848') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ - url('iconfont.svg?t=1461601848#iconfont') format('svg'); /* iOS 4.1- */ -} - -.iconfont { - font-family:"iconfont" !important; - font-size:16px; - font-style:normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.2px; - -moz-osx-font-smoothing: grayscale; -} -.icon-zhihu:before { content: "\e829"; } diff --git a/css/fontawesome/css/iconfont.eot b/css/fontawesome/css/iconfont.eot deleted file mode 100644 index 04834d2..0000000 Binary files a/css/fontawesome/css/iconfont.eot and /dev/null differ diff --git a/css/fontawesome/css/iconfont.svg b/css/fontawesome/css/iconfont.svg deleted file mode 100644 index d8052ba..0000000 --- a/css/fontawesome/css/iconfont.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - -Created by FontForge 20120731 at Tue Apr 26 00:30:47 2016 - By admin - - - - - - - - - - - - diff --git a/css/fontawesome/css/iconfont.ttf b/css/fontawesome/css/iconfont.ttf deleted file mode 100644 index 6338a77..0000000 Binary files a/css/fontawesome/css/iconfont.ttf and /dev/null differ diff --git a/css/fontawesome/css/iconfont.woff b/css/fontawesome/css/iconfont.woff deleted file mode 100644 index 9372eee..0000000 Binary files a/css/fontawesome/css/iconfont.woff and /dev/null differ diff --git a/css/fontawesome/fonts/FontAwesome.otf b/css/fontawesome/fonts/FontAwesome.otf deleted file mode 100644 index 3ed7f8b..0000000 Binary files a/css/fontawesome/fonts/FontAwesome.otf and /dev/null differ diff --git a/css/fontawesome/fonts/fontawesome-webfont.eot b/css/fontawesome/fonts/fontawesome-webfont.eot deleted file mode 100644 index 9b6afae..0000000 Binary files a/css/fontawesome/fonts/fontawesome-webfont.eot and /dev/null differ diff --git a/css/fontawesome/fonts/fontawesome-webfont.svg b/css/fontawesome/fonts/fontawesome-webfont.svg deleted file mode 100644 index d05688e..0000000 --- a/css/fontawesome/fonts/fontawesome-webfont.svg +++ /dev/null @@ -1,655 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/css/fontawesome/fonts/fontawesome-webfont.ttf b/css/fontawesome/fonts/fontawesome-webfont.ttf deleted file mode 100644 index 26dea79..0000000 Binary files a/css/fontawesome/fonts/fontawesome-webfont.ttf and /dev/null differ diff --git a/css/fontawesome/fonts/fontawesome-webfont.woff b/css/fontawesome/fonts/fontawesome-webfont.woff deleted file mode 100644 index dc35ce3..0000000 Binary files a/css/fontawesome/fonts/fontawesome-webfont.woff and /dev/null differ diff --git a/css/fontawesome/fonts/fontawesome-webfont.woff2 b/css/fontawesome/fonts/fontawesome-webfont.woff2 deleted file mode 100644 index 500e517..0000000 Binary files a/css/fontawesome/fonts/fontawesome-webfont.woff2 and /dev/null differ diff --git a/css/main.scss b/css/main.scss index 5eb53f1..52667d2 100644 --- a/css/main.scss +++ b/css/main.scss @@ -1,8 +1,7 @@ --- # Only the main Sass file needs front matter (the dashes are enough) --- -@charset "utf-8"; -// +@charset "utf-8"; // // // // // Our variables @@ -42,25 +41,11 @@ // @content; // } // } - /* * variables */ - // Import partials from `sass_dir` (defaults to `_sass`) -@import - "reset", - "header", - "post", - "page", - "syntax-highlighting", - "index", - "demo", - "footer", - "scrollbar", - "backToTop" -; - +@import "reset", "header", "post", "page", "syntax-highlighting", "index", "demo", "footer", "scrollbar", "backToTop"; // 两个人在列车上相遇 // 一段旅程充满了诗意 // 你突然说你要下车 diff --git a/feed.xml b/feed.xml index a6628bd..ac9dce3 100644 --- a/feed.xml +++ b/feed.xml @@ -14,7 +14,7 @@ layout: null {% for post in site.posts limit:10 %} {{ post.title | xml_escape }} - {{ post.content | xml_escape }} + {{ post.excerpt | remove: '

    ' | remove: '

    ' | xml_escape }}     {{ post.date | date_to_rfc822 }} {{ post.url | prepend: site.baseurl | prepend: site.url }} {{ post.url | prepend: site.baseurl | prepend: site.url }} diff --git a/index.html b/index.html index 57e6bfc..36267b2 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

    +
    @@ -75,7 +75,7 @@

    @@ -87,7 +87,7 @@

    Categories