├── .gitignore ├── LICENSE ├── README.md ├── _config.example.yml ├── languages ├── en.yml └── zh-CN.yml ├── layout ├── _addon │ ├── comments.ejs │ ├── license.ejs │ ├── notice.ejs │ └── totop.ejs ├── _footer │ ├── footer.ejs │ └── sns.ejs ├── _head │ └── head.ejs ├── _nav │ ├── dropdown.ejs │ ├── logo.ejs │ ├── nav.ejs │ └── search.ejs ├── _pages │ ├── 404.ejs │ └── search.ejs ├── _post │ ├── categories.ejs │ ├── meta.ejs │ ├── pager.ejs │ └── preview.ejs ├── _sidebar │ ├── links.ejs │ ├── recent-comments.ejs │ ├── recent-posts.ejs │ └── sidebar.ejs ├── archive.ejs ├── base.ejs ├── index.ejs ├── layout.ejs ├── page.ejs └── post.ejs ├── scripts ├── filter │ ├── mathjax.js │ └── remove_unneeded.js ├── generator │ ├── github_comment_db.js │ └── kunkka.js ├── helper │ ├── escapeHTML.js │ ├── is_cc.js │ ├── parse_license.js │ ├── printf.js │ └── quoted.js └── tag │ └── sns.js └── source ├── css ├── _addon │ ├── comment.styl │ ├── github-comment.styl │ ├── index.styl │ ├── notice.styl │ └── totop.styl ├── _base │ ├── base.styl │ ├── classes.styl │ ├── index.styl │ └── normalize.css ├── _deprecated.styl ├── _env │ ├── colors.styl │ └── fonts.styl ├── _footer │ ├── cc-icon.styl │ ├── footer.styl │ └── sns-icon.styl ├── _nav │ ├── dropdown.styl │ ├── logo.styl │ ├── nav.styl │ └── search.styl ├── _page │ ├── buttons.styl │ ├── page.styl │ ├── pagination.styl │ ├── sns.styl │ └── tooltip.styl ├── _pages │ ├── 404.styl │ └── archive.styl ├── _post │ ├── blockquote.styl │ ├── breadcrumb.styl │ ├── footnote.styl │ ├── highlight.styl │ ├── license.styl │ ├── pager.styl │ ├── post.styl │ ├── preview.styl │ ├── table.styl │ ├── tags.styl │ └── toc.styl ├── _responsive.styl ├── _sidebar │ ├── index.styl │ ├── recent-comments.styl │ └── sidebar.styl └── style.styl └── js ├── buttons.js ├── github-comment.js └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | _config.yml 2 | .directory 3 | source/css/_parts/deprecated.styl 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 黄文睿 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hexo-theme-kunkka 2 | 3 | A simple, responsive theme ported from Wordpress by [iMuFeng](https://github.com/iMuFeng). 4 | Repo of wordpress version: [Kunkka](https://github.com/iMuFeng/kunkka)(Already deleted). You can visit [his site](https://mufeng.me/) to see what this theme looks like. 5 | 6 | ## Installation 7 | In your hexo directory, execute: 8 | 9 | ```Bash 10 | git clone https://github.com/unnamed42/hexo-theme-kunkka themes/kunkka 11 | npm install hexo-renderer-ejs hexo-renderer-stylus --save 12 | ``` 13 | 14 | Then modify `theme` entry in the global `_config.yml`. 15 | ```yaml 16 | theme: kunkka 17 | ``` 18 | 19 | Then regenerate your blog: 20 | ```bash 21 | hexo clean && hexo g 22 | ``` 23 | ## Notice 24 | 25 | Currently all style designs are based on html generated by `hexo-renderer-markdown-it`. If you use the default `hexo-renderer-marked`, the styles may break. 26 | 27 | I strongly recommend you using [`hexo-all-minifier`](https://github.com/unhealthy/hexo-all-minifier) to minify all html and scripts, to reduce your site's loading time. 28 | 29 | ## Configuration 30 | 31 | ```yaml 32 | keywords: 33 | 34 | since: 35 | 36 | logo: 37 | 38 | favicon: false 39 | 40 | nav: 41 | - title: 归档 42 | url: archives/index.html 43 | icon: fa-archive 44 | description: 45 | - title: 关于 46 | url: about/index.html 47 | icon: fa-user 48 | description: 49 | 50 | notice: 51 | - "**Notice** one" 52 | - "~~Notice~~ two" 53 | 54 | # Register at https://disqus.com/api/applications to get disqus_api_key 55 | # Use the API Key, not the API Secret 56 | disqus_shortname: 57 | disqus_api_key: 58 | 59 | search: true 60 | 61 | busuanzi: true 62 | 63 | tag_number: 25 64 | full_content: false 65 | 66 | # Provided colors: red, green, blue, purple 67 | color_theme: blue 68 | 69 | mathjax: true 70 | 71 | # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero | copyright 72 | # Any other words are valid but do not have a special style 73 | license: by-sa 74 | 75 | toc: 76 | collapse: false 77 | 78 | sns: 79 | github: 80 | twitter: 81 | facebook: 82 | linkedin: 83 | googleplus_id: 84 | steam_id: 85 | weibo: 86 | zhihu: 87 | tieba: 88 | 89 | buttons: 90 | base: true 91 | border: false 92 | borderless: false 93 | raised: false 94 | 3d: false 95 | glowing: false 96 | dropdown: false 97 | group: false 98 | wrapper: false 99 | shadow: false 100 | 101 | links: 102 | - title: Friend1 103 | url: https://www.friend1.com 104 | description: My only friend 105 | ``` 106 | + **keywords** - Keywords to sum up your site, should be delimited by comma. It will help search engines better find your site. 107 | + **since** - Year when your site established. Used for footer license message generation. 108 | + **logo** - Logo image displayed at left-top corner, a 102x30 image is recommended. If not set, we shall use a styled text as a logo. 109 | + **favicon** - Icon of your site. Set to true to use it, but put an icon `favicon.ico` in `[path_to_blog]/source` folder first. 110 | + **nav** - Add extra entries to your navbar. `url` should be a relative link, and `icon` must exist in [FontAwesome](http://fontawesome.io/icons/). 111 | + **notice** - Add a global notice bar to your blog, one string per line, and you can use markdown syntax. If you don't want any notices, just leave it empty. 112 | + **disqus_shortname** - [Disqus](https://disqus.com/) shortname of yours. 113 | + **disqus_api_key** - Disqus API Key of yours, you need to [register](https://disqus.com/api/applications/register/) to get it. To use the recent posts widget for disqus, this entry must be set. 114 | + **search** - [A jQuery-based Local Search Engine for Hexo](http://hahack.com/codes/local-search-engine-for-hexo/). **Requires `hexo-generator-search` installed**. 115 | + **busuanzi** - Enable the [busuanzi](http://busuanzi.ibruce.info/) visit count when set to `true`. 116 | + **tag_number** - Set the maximum number of tags displayed in navigation area. 117 | + **full_content** - Display the whole post content in preview page when set to `true`. 118 | + **color_theme** - Determines the color of nearly all anchors. If empty, will use a default color instead. 119 | + **mathjax** - Enables [MathJax](https://www.mathjax.org/) support. 120 | + **creative_commons** - The Creative Commons icon. When disabled, the footer license will be copyright. 121 | + **toc** - **collapse** - Set to false if you don't want to hide toc of contents not displayed currently. 122 | + **sns** - SNS links. Fill in your personal informations and you will see the links inside the footer. Currently, you can not add extra entries. 123 | + **buttons** - Some beautiful [button styles](http://www.bootcss.com/p/buttons/). For each entry, set to `true` if you want the corresponding style, but `base` should be enabled to use them. For any problems about usage, please visit their site [this](http://www.bootcss.com/p/buttons/) or [this](https://github.com/alexwolfe/Buttons/). 124 | + **links** - Links to your friends. 125 | 126 | ## Features 127 | 128 | #### Post thumbnail 129 | 130 | To add a thumbnail picture to your post in index page, simply add an entry named `thumbnail` in the corresponding post's front-matter. For example: 131 | 132 | ```yaml 133 | thumbnail: "http://domaingang.com/wp-content/uploads/2012/02/example.png" 134 | ``` 135 | 136 | Or refer to an image inside your own server: 137 | 138 | ```yaml 139 | thumbnail: "/img/example.png" 140 | ``` 141 | 142 | The thumbnail picture will *NOT* be displayed in your post page. 143 | 144 | #### SNS Label 145 | 146 | Syntax: 147 | ```plain 148 | {% sns [icon] [text] [url] %} 149 | ``` 150 | `icon` must exist in [FontAwesome](http://fontawesome.io/icons/). The third argument `url` is optional, it will make the whole element clickable. 151 | 152 | You can use this in your posts and pages. 153 | 154 | #### Search page 155 | 156 | We have an isolated page used for showing search results. Our search engine is [A jQuery-based Local Search Engine for Hexo](http://hahack.com/codes/local-search-engine-for-hexo/). To use this, install dependency first: 157 | 158 | ```bash 159 | npm install hexo-generator-search --save 160 | ``` 161 | 162 | have it configured, then set `search` in theme config to true. 163 | 164 | #### Scripts on demand 165 | 166 | Only required scripts are generated. You no longer need to upload lots of scripts desinged for other situations, which you don't need. 167 | 168 | #### Footnote 169 | 170 | To use footnote, you have to switch your markdown renderer to `hexo-renderer-markdown-it`, and enable the `markdown-it-footnote` plugin first. 171 | 172 | We have made a special style for footnotes, just for you to enjoy. 173 | -------------------------------------------------------------------------------- /_config.example.yml: -------------------------------------------------------------------------------- 1 | keywords: 2 | 3 | since: 4 | 5 | logo: 6 | 7 | favicon: false 8 | 9 | nav: 10 | - title: Archive 11 | url: archives/index.html 12 | icon: fa-archive 13 | description: 14 | - title: About 15 | url: about/index.html 16 | icon: fa-user 17 | description: 18 | 19 | notice: 20 | - "**Notice** one" 21 | - "~~Notice~~ two" 22 | 23 | # Register at https://disqus.com/api/applications to get disqus_api_key 24 | # Use the API Key, not the API Secret 25 | disqus_shortname: 26 | disqus_api_key: 27 | 28 | search: true 29 | 30 | busuanzi: true 31 | 32 | tag_number: 25 33 | full_content: false 34 | 35 | # Provided colors: red, green, blue, purple 36 | color_theme: blue 37 | 38 | mathjax: true 39 | 40 | # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero | copyright 41 | # Any other words are valid but do not have a special style 42 | license: by-sa 43 | 44 | toc: 45 | collapse: false 46 | 47 | sns: 48 | github: 49 | twitter: 50 | facebook: 51 | linkedin: 52 | googleplus_id: 53 | steam_id: 54 | weibo: 55 | zhihu: 56 | tieba: 57 | 58 | buttons: 59 | base: true 60 | border: false 61 | borderless: false 62 | raised: false 63 | 3d: false 64 | glowing: false 65 | dropdown: false 66 | group: false 67 | wrapper: false 68 | shadow: false 69 | 70 | links: 71 | - title: Friend1 72 | url: https://www.friend1.com 73 | description: My only friend 74 | -------------------------------------------------------------------------------- /languages/en.yml: -------------------------------------------------------------------------------- 1 | home: Home 2 | categories: Categories 3 | uncategorized: Uncategorized 4 | untitled: Untitled 5 | updated: Updated at 6 | archive: Archives 7 | tags: Tags 8 | links: Friends 9 | recent_posts: Recent posts 10 | recent_comments: Recent comments 11 | days_ago: days ago 12 | search: Input keyword 13 | no_tags: No tags set 14 | prev_post: Previous post 15 | next_post: Next post 16 | navigation: Navigation 17 | to_top: Back to top 18 | no_match: No matched content 19 | page_non_exist: The content you request does not exist! 20 | jump_back_home: Will jump back %2$s in %1$s 21 | author: Author 22 | posted_at: Posted at 23 | updated_at: Updated at 24 | license: Licensed under 25 | comment_in: Comment in %s 26 | views: Views 27 | -------------------------------------------------------------------------------- /languages/zh-CN.yml: -------------------------------------------------------------------------------- 1 | home: 主页 2 | categories: 分类 3 | uncategorized: 未分类 4 | untitled: 未命名 5 | updated: 更新时间 6 | archive: 归档 7 | tags: 标签 8 | links: 友情链接 9 | recent_posts: 最近更新的文章 10 | recent_comments: 最近评论 11 | days_ago: 天前 12 | search: 输入关键词 13 | no_tags: 未设置标签 14 | prev_post: 上一篇文章 15 | next_post: 下一篇文章 16 | navigation: 导航 17 | to_top: 送你上天 18 | \,: ， 19 | \:: ： 20 | no_match: 搜索未能找到匹配结果 21 | page_non_exist: 您所要访问的页面不存在！ 22 | jump_back_home: 将在%s后跳回%s 23 | seconds: 秒 24 | author: 作者 25 | posted_at: 发布日期 26 | updated_at: 修改日期 27 | license: 发布协议 28 | comment_in: 于 %s 的评论 29 | views: 次点击 30 | -------------------------------------------------------------------------------- /layout/_addon/comments.ejs: -------------------------------------------------------------------------------- 1 | <% if(page.comments) { %> 2 |
3 | <% if(theme.disqus_shortname) { %> 4 | 5 |
6 | 7 | <% } %> 8 |
9 | <% } %> 10 | -------------------------------------------------------------------------------- /layout/_addon/license.ejs: -------------------------------------------------------------------------------- 1 | <% var license = parse_license(page.license || theme.license || "copyright") %> 2 | 3 |
4 | <%= __('author') %>: <%= config.author %>
5 | <%= __('posted_at') %>: <%= page.date.format(config.date_format) %>
6 | <%= __('updated_at') %>: <%= page.updated.format(config.date_format) %>
7 | <%= __('license') %>: 8 | <% if(license.url) { %> 9 | 10 | <% } %> 11 | <%= license.name %> 12 | <% if(license.url) { %> 13 | 14 | <% } %> 15 |
16 | -------------------------------------------------------------------------------- /layout/_addon/notice.ejs: -------------------------------------------------------------------------------- 1 | <% if(theme.notice) { %> 2 |
3 | <% theme.notice.forEach(function(string) { %> 4 | <%- markdown(string) %> 5 | <% }); %> 6 |
7 | <% } %> 8 | -------------------------------------------------------------------------------- /layout/_addon/totop.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | -------------------------------------------------------------------------------- /layout/_footer/footer.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | var year = ''; 3 | if(theme.since) { 4 | year = theme.since + '-'; 5 | } 6 | year += new Date().getFullYear() + ' ' + config.title + '.'; 7 | %> 8 | 9 | 28 | 29 | -------------------------------------------------------------------------------- /layout/_footer/sns.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | var sns_settings = { 3 | "github": {"url":"https://github.com/{0}", "icon":"fa-github"}, 4 | "twitter": {"url":"https://twitter.com/{0}", "icon":"fa-twitter"}, 5 | "facebook": {"url":"https://www.facebook.com/{0}", "icon":"fa-facebook"}, 6 | "linkedin": {"url":"https://www.linkedin.com/in/{0}", "icon":"fa-linkedin"}, 7 | "googleplus_id": {"url":"https://plus.google.com/u/0/{0}", "icon":"fa-google-plus"}, 8 | "steam_id": {"url":"https://steamcommunity.com/id/{0}", "icon":"fa-steam"}, 9 | "weibo": {"url":"http://weibo.com/{0}", "icon":"fa-weibo"}, 10 | "zhihu": {"url":"https://www.zhihu.com/people/{0}", "icon":"知"}, 11 | "tieba": {"url":"http://tieba.baidu.com/home/main/?un={0}", "icon":"贴"} 12 | }; 13 | %> 14 | 15 | <% if(theme.sns) { %> 16 |
17 | <% Object.keys(theme.sns).forEach(function(item) { %> 18 | <% var username = theme.sns[item]; %> 19 | <% if(username) { %> 20 | <% var url = sns_settings[item].url, icon = sns_settings[item].icon; %> 21 | 22 | 23 | 24 | <% if(icon.match(/fa-\w+/g)) { %> 25 | 26 | <% } else { %> 27 | <%= icon %> 28 | <% } %> 29 | 30 | 31 | <% } %> 32 | <% }); %> 33 |
34 | <% } %> 35 | -------------------------------------------------------------------------------- /layout/_head/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | <% //if(theme.old_browser) { 3 | // 4 | //} else {} %> 5 | 6 | 7 | 8 | 9 | 10 | 11 | <% if(page.archive) { %> 12 | <%= page.year || page.month || __('archive') %> - 13 | <% } else if (page.title || page.category || page.tag) { %> 14 | <%= page.title || page.category || page.tag %> - 15 | <% } %> 16 | <%= config.title || (config.author + "\'s Blog") %> 17 | 18 | 19 | 20 | 21 | 22 | 23 | <% if(config.feed) { %> 24 | 25 | <% } %> 26 | 27 | <% if(theme.favicon) { %> 28 | 29 | <% } %> 30 | 31 | 32 | 33 | <% if(theme.creative_commons) { %><% } %> 34 | 35 | 43 | 44 | 45 | <% if(theme.buttons.base && theme.buttons.dropdown) { %><% } %> 46 | 47 | 48 | 49 | 68 | 69 | <% if(theme.disqus_shortname) { %> 70 | <% if(page.comments) { %> 71 | 80 | 81 | <% } %> 82 | <% if(theme.github_comment && theme.github_comment.repo) { %> 83 | 84 | <% } %> 85 | <% } %> 86 | 87 | <% if(theme.math) { %> 88 | <% if(theme.math == "mathjax" && page.mathjax) { %> 89 | 106 | 107 | <% } else if(theme.math == "katex") { %> 108 | 109 | 110 | <% } %> 111 | <% } %> 112 | 113 | <% if(theme.busuanzi) { %> 114 | 115 | <% } %> 116 | 117 | 118 | -------------------------------------------------------------------------------- /layout/_nav/dropdown.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <% if (site.categories.length) { %> 4 | 5 | 6 | 11 | 12 | <% } %> 13 | 14 | 15 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /layout/_nav/logo.ejs: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /layout/_nav/nav.ejs: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /layout/_nav/search.ejs: -------------------------------------------------------------------------------- 1 | <% if(config.search || theme.search) { %> 2 |
3 | 4 | 7 |
8 | <% } %> 9 | 10 | -------------------------------------------------------------------------------- /layout/_pages/404.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | <% 5 | var home = "" + __('home') + ""; 6 | var seconds = "5" + __('seconds'); 7 | %> 8 |
9 |
10 |
11 |

<%= __('page_non_exist') %>

12 |

<%- __('jump_back_home',seconds,home) %>

13 |
14 | 15 |
16 |
17 | 18 | 30 | -------------------------------------------------------------------------------- /layout/_pages/search.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layout 3 | --- 4 | 9 | 10 | 20 | 21 |
22 |
23 |

<%= __('no_match') %>

24 |
25 | 26 | 103 | -------------------------------------------------------------------------------- /layout/_post/categories.ejs: -------------------------------------------------------------------------------- 1 | <%- 2 | page.categories.length ? 3 | page.categories.map(function(category) { 4 | return printf('{1}', url_for(category.path), escapeHTML(category.name)); 5 | }).join(',') : 6 | __('uncategorized'); 7 | %> 8 | -------------------------------------------------------------------------------- /layout/_post/meta.ejs: -------------------------------------------------------------------------------- 1 |
2 | 31 |
32 | -------------------------------------------------------------------------------- /layout/_post/pager.ejs: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /layout/_post/preview.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | var post_class = 'post'; 3 | if(!theme.full_content && post.thumbnail) {post_class += ' post-has-thumbnail';} 4 | if(theme.full_content) {post_class += 'full-content';} 5 | %> 6 |
7 |
8 |

9 | <% if(post.link) { %><%= post.link %> 10 | <% } else { %><%= post.title || __('untitled') %><% } %> 11 |

12 |
13 | <%- partial('_post/meta', {page: post, has_vcount: false}) %> 14 |
15 | <% if (theme.full_content) { %> 16 | <%- post.content %> 17 | <% } else { %> 18 | <% if (post.thumbnail) { %> 19 |
20 | 21 | <%= post.title %> 23 | 24 |
25 | <% } %> 26 |
27 | <% if(post.excerpt) { %> 28 | <%- post.excerpt %> 29 | <% } else { %> 30 | <% var br = post.content.indexOf('\n') %> 31 | <% if(br < 0) { %> 32 | <%- post.content %> 33 | <% } else { %> 34 |

<%- strip_html(post.content.substring(0, br)) %>

35 | <% } %> 36 | <% } %> 37 |
38 | <% } %> 39 |
40 |
41 | -------------------------------------------------------------------------------- /layout/_sidebar/links.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: none 3 | --- 4 | <% if(theme.links) { %> 5 | 13 | <% }%> 14 | -------------------------------------------------------------------------------- /layout/_sidebar/recent-comments.ejs: -------------------------------------------------------------------------------- 1 | <% if(theme.disqus_api_key || (theme.github_comment && theme.github_comment.repo)) { %> 2 |
3 |

<%= __('recent_comments') %>

4 | <% if(theme.disqus_api_key) { %> 5 | 6 | 15 | <% } else { %> 16 | 17 | <% } %> 18 |
19 | <% } %> 20 | -------------------------------------------------------------------------------- /layout/_sidebar/recent-posts.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: none 3 | --- 4 | <% if (site.posts.length){ %> 5 |
6 |

<%= __('recent_posts') %>

7 | 16 |
17 | <% } %> 18 | -------------------------------------------------------------------------------- /layout/_sidebar/sidebar.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: none 3 | --- 4 | <%- partial('_sidebar/recent-comments') %> 5 | <%- partial('_sidebar/recent-posts') %> 6 | <%- partial('_sidebar/links') %> 7 | -------------------------------------------------------------------------------- /layout/archive.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layout 3 | --- 4 |
5 |
6 |
7 | <% var year = 0, month = 0, nav = ""; %> 8 | <% page.posts.sort("date", "desc").forEach(function(post) { %> 9 | <% var pyear = post.date.year(), pmonth = post.date.month() + 1; %> 10 | <% if(month != pmonth || year != pyear) { %> 11 | <% if(year) { %> 12 |
13 |
14 | <% } %> 15 | <% 16 | if(year != pyear) { 17 | if(year) { 18 | nav += ''; // enclosing tag for ul.months 19 | nav += ''; // enclosing tag for li.year 20 | } 21 | nav += '
  • '; 22 | nav += '' + pyear + ''; 23 | nav += ' 56 | <% } %> 57 |
    • 58 | -------------------------------------------------------------------------------- /layout/base.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 5 | 6 | 7 | <% 8 | var body_class = page.class || ' '; 9 | 10 | if(is_home()) {body_class += "home";} 11 | else if(is_post()) {body_class += " post";} 12 | else if(is_archive()) {body_class += " archive post-archive";} 13 | else if(is_category()) {body_class += " archive category-archive";} 14 | else if(is_tag()) {body_class += " archive tag-archive";} 15 | else {body_class += " page";} 16 | %> 17 | 18 | 19 | <%- partial('_head/head',{cache: !config.relative_link}) %> 20 | 21 | 22 | <%- partial('_nav/nav') %> 23 | <%- body || page.content %> 24 | 25 | <%- partial('_footer/footer',{cache: !config.relative_link}) %> 26 | <%- partial('_addon/totop') %> 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /layout/index.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layout 3 | --- 4 |
    5 | <%- partial('_addon/notice') %> 6 |
    7 | <% page.posts.each(function(post) { %> 8 | <%- partial('_post/preview', {post: post}) %> 9 | <% }); %> 10 |
    11 |
    12 | 20 | -------------------------------------------------------------------------------- /layout/layout.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 |
    5 |
    6 | 7 | <%- body || page.content %> 8 | 9 |
    10 |
    11 | -------------------------------------------------------------------------------- /layout/page.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layout 3 | --- 4 |
    5 |
    6 |

    7 | <%= page.title %> 8 |

    9 |
    10 |
    11 |
    12 | <%- page.content || body %> 13 |
    14 |
    15 | <%- partial('_addon/comments') %> 16 |
    17 | -------------------------------------------------------------------------------- /layout/post.ejs: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | <% var toc_str = page.toc ? toc(page.content, {list_number: false}) : ""; %> 5 |
    6 |
    7 |
    class="has-toc"<% } %>> 8 | 15 |
    16 |
    17 |

    18 | <%= page.title %> 19 |

    20 |
    21 | <%- partial('_post/meta', {page: page, has_vcount: true}) %> 22 |
    23 |
    24 | <% page.photos.forEach(function(link){ %> 25 | 26 | <% }); %> 27 | <%- page.content || body %> 28 |
    29 |
    30 | <%- partial('_addon/license', {page: page}) %> 31 | 40 |
    41 |
    42 | <%- partial('_post/pager') %> 43 | <%- partial('_addon/comments') %> 44 | <% if(toc_str) { %> 45 | 48 | <% } %> 49 |
    50 |
    51 | -------------------------------------------------------------------------------- /scripts/filter/mathjax.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | hexo.extend.filter.register("before_post_render", (data) => { 4 | data.mathjax = data.content.indexOf("$") != -1; 5 | return data; 6 | }); 7 | -------------------------------------------------------------------------------- /scripts/filter/remove_unneeded.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | hexo.extend.filter.register("after_generate", () => { 4 | const route = hexo.route, theme = hexo.theme.config; 5 | 6 | const buttons = theme.buttons, githubComment = theme.github_comment, 7 | disqus = theme.disqus_shortname, disqusAPI = theme.disqus_api_key; 8 | 9 | if (!disqus || !disqusAPI) 10 | route.remove("js/disqus.js"); 11 | 12 | if (!githubComment || !githubComment.repo) 13 | route.remove("js/github-comment.js"); 14 | 15 | if (!buttons.base || !buttons.dropdown) 16 | route.remove("js/buttons.js"); 17 | }); 18 | -------------------------------------------------------------------------------- /scripts/generator/github_comment_db.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var PassThrough = require("stream").PassThrough; 4 | 5 | hexo.extend.generator.register("github_comment_db", (locals) => { 6 | const githubComment = hexo.theme.config.github_comment; 7 | if (!githubComment || !githubComment.repo) 8 | return {}; 9 | 10 | let json = []; 11 | let addItem = (item) => { 12 | if (item.hasOwnProperty("issue")) 13 | json.push(`"${item.issue}":{"path":"${item.permalink}","title":"${item.title}"}`); 14 | }; 15 | 16 | locals.posts.forEach(addItem); 17 | locals.pages.forEach(addItem); 18 | 19 | return { 20 | path: "/github_comment_db.json", 21 | data: () => { 22 | let ss = new PassThrough(); 23 | ss.write(`{${json.join(",")}}`); 24 | ss.end(); 25 | return ss; 26 | } 27 | }; 28 | }); 29 | -------------------------------------------------------------------------------- /scripts/generator/kunkka.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | hexo.extend.generator.register("kunkka", (locals) => { 4 | const theme = hexo.theme.config, config = hexo.config; 5 | 6 | let custom = [ 7 | { path: "/404.html", data: {}, layout: ["_pages/404", "base"] }, 8 | { path: "parts/sidebar.html", data: {}, layout: ["_sidebar/sidebar"] } 9 | ]; 10 | 11 | if (theme.search || config.search) 12 | custom.push({ path: "/search.html", data: {}, layout: ["_pages/search", "layout"] }); 13 | 14 | return custom; 15 | }); 16 | -------------------------------------------------------------------------------- /scripts/helper/escapeHTML.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var escapeHTML = require("hexo-util").escapeHTML; 4 | 5 | hexo.extend.helper.register("escapeHTML", (str) => escapeHTML(str)); 6 | -------------------------------------------------------------------------------- /scripts/helper/is_cc.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // check if license is common creatives 4 | hexo.extend.helper.register("is_cc", (license) => license.startsWith("by") || license === "zero"); 5 | -------------------------------------------------------------------------------- /scripts/helper/parse_license.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | hexo.extend.helper.register("parse_license", (license) => { 4 | if(license.startsWith("by") || license == "zero") { 5 | return { 6 | url: "https://creativecommons.org/licenses/" + license + "/4.0", 7 | name: license.toUpperCase() 8 | }; 9 | } else 10 | return { 11 | url: "", 12 | name: license 13 | }; 14 | }); 15 | -------------------------------------------------------------------------------- /scripts/helper/printf.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Code from http://stackoverflow.com/a/4673436 4 | // Example: printf('{0} is dead, but {1} is alive! {0} {2}', 'ASP', 'ASP.NET'); 5 | // Result: "ASP is dead, but ASP.NET is alive! ASP {2}" 6 | 7 | hexo.extend.helper.register("printf", function(format) { 8 | let args = Array.prototype.slice.call(arguments, 1); 9 | return format.replace(/{(\d+)}/g, function(match, number) { 10 | return typeof args[number] != "undefined" 11 | ? args[number] 12 | : match 13 | ; 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /scripts/helper/quoted.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | hexo.extend.helper.register("quoted", (str) => { 4 | str = str.toString(); 5 | if (str.charAt(0) == '"' && str.charAt(str.length - 1) == '"') 6 | return str; 7 | else 8 | return `"${str}"`; 9 | }); 10 | -------------------------------------------------------------------------------- /scripts/tag/sns.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var escapeHTML = require("hexo-util").escapeHTML; 4 | 5 | hexo.extend.tag.register("sns", (args) => { 6 | const [iconName, content] = args; 7 | 8 | let result = ""; 9 | 10 | if (args.length > 2) 11 | result = `${escapeHTML(content)}`; 12 | else { 13 | const isMailAddr = (content.indexOf("@") != -1); 14 | 15 | if (isMailAddr) 16 | result = `${content}`; 17 | else 18 | result = `${content}`; 19 | } 20 | 21 | return `

    ${result}

    `; 22 | }); 23 | -------------------------------------------------------------------------------- /source/css/_addon/comment.styl: -------------------------------------------------------------------------------- 1 | #comments {margin-top: 6em;} 2 | -------------------------------------------------------------------------------- /source/css/_addon/github-comment.styl: -------------------------------------------------------------------------------- 1 | if(hexo-config('github_comment.repo')) { 2 | 3 | .comment-container { 4 | position: relative; 5 | padding-left: 60px; 6 | margin-top: 15px; 7 | margin-bottom: 15px; 8 | border-top: 2px solid #fff; 9 | border-bottom: 2px solid #fff; 10 | } 11 | 12 | .comment-post { 13 | border-color: #bfccd1; 14 | position: relative; 15 | background-color: #fff; 16 | border: 1px solid #ddd; 17 | border-radius: 3px; 18 | &:before { 19 | border-width: 8px; 20 | border-color: transparent #bfccd1 transparent transparent; 21 | } 22 | &:after { 23 | margin-top: 1px; 24 | margin-left: 2px; 25 | border-width: 7px; 26 | border-color: transparent #f7f7f7 transparent transparent; 27 | } 28 | &:before, &:after { 29 | position: absolute; 30 | top: 11px; 31 | right: 100%; 32 | // left: -16px; 33 | display: block; 34 | width: 0; 35 | height: 0; 36 | pointer-events: none; 37 | content: " "; 38 | border-style: solid solid outset; 39 | } 40 | .comment-header { 41 | border-bottom-color: #bfccd1; 42 | padding-right: 15px; 43 | padding-left: 15px; 44 | color: #767676; 45 | background-color: #f7f7f7; 46 | border-bottom: 1px solid #ddd; 47 | border-top-left-radius: 3px; 48 | border-top-right-radius: 3px; 49 | .comment-time { 50 | max-width: 78%; 51 | padding-top: 10px; 52 | padding-bottom: 10px; 53 | .timestamp { 54 | color: inherit; 55 | white-space: nowrap; 56 | } 57 | } 58 | } 59 | .comment-body { 60 | width: 100%; 61 | padding: 15px; 62 | overflow: visible; 63 | display: block !important; 64 | .contains-task-list { 65 | padding: 0; 66 | } 67 | .task-list-item { 68 | padding-right: 15px; 69 | padding-left: 42px; 70 | margin-right: -15px; 71 | margin-left: -15px; 72 | border: 1px solid transparent; 73 | list-style-type: none; 74 | } 75 | ol, ul { 76 | padding-left: 2em; 77 | margin-top: 0; 78 | margin-bottom: 16px; 79 | &:not(.contains-task-list) li { 80 | margin-left: 0; 81 | } 82 | } 83 | li{ 84 | &:not(.task-list-item) { 85 | margin-left: 26px; 86 | } 87 | &+li { 88 | margin-top: 0.25em; 89 | } 90 | } 91 | } 92 | .comment-reactions { 93 | border-top: 1px solid #e5e5e5; 94 | &:before { 95 | display: table; 96 | content: ""; 97 | } 98 | &:after { 99 | display: table; 100 | clear: both; 101 | content: ""; 102 | } 103 | .comment-reaction { 104 | float: left; 105 | padding: 9px 15px 7px; 106 | line-height: 18px; 107 | background-color: #f2f8fa; 108 | border-right: 1px solid #e5e5e5; 109 | &:first-child { 110 | border-bottom-left-radius: 2px; 111 | } 112 | .comment-emoji { 113 | margin-right: 4px !important; 114 | font-size: 18px; 115 | font-weight: normal; 116 | line-height: 20px; 117 | vertical-align: middle; 118 | } 119 | } 120 | } 121 | } 122 | 123 | .comment-user-avatar { 124 | float: left; 125 | margin-left: -60px; 126 | border-radius: 3px; 127 | border-style: none; 128 | } 129 | 130 | .comment-button { 131 | display: inline-block; 132 | color: #4078c0; 133 | display: inline-block; 134 | text-decoration: none; 135 | white-space: nowrap; 136 | border: 0; 137 | cursor: pointer; 138 | } 139 | 140 | } 141 | -------------------------------------------------------------------------------- /source/css/_addon/index.styl: -------------------------------------------------------------------------------- 1 | @import 'totop' 2 | @import 'comment' 3 | @import 'github-comment' 4 | @import 'notice' 5 | -------------------------------------------------------------------------------- /source/css/_addon/notice.styl: -------------------------------------------------------------------------------- 1 | #notice { 2 | margin-bottom: 40px; 3 | padding: 5px 20px; 4 | border: 1px solid #e7e7e7; 5 | box-shadow: 1px 1px 1px 0 rgba(0,0,0,.07); 6 | } 7 | -------------------------------------------------------------------------------- /source/css/_addon/totop.styl: -------------------------------------------------------------------------------- 1 | #totop { 2 | background-color: #eee; 3 | border-radius: 100%; 4 | bottom: 5%; 5 | height: 48px; 6 | width: 48px; 7 | position: fixed; 8 | right: -100px; 9 | z-index: 99; 10 | -webkit-transition: 0.5s; 11 | -moz-transition: 0.5s; 12 | transition: 0.5s; 13 | &.display {right: 10px;} 14 | } 15 | 16 | #totop-percent { 17 | font-size: 16px; 18 | height: 48px; 19 | line-height: 48px; 20 | position: absolute; 21 | text-align: center; 22 | top: 0; 23 | width: 48px; 24 | color: #555; 25 | cursor: pointer; 26 | &:before {content:attr(data-percent);} 27 | &:hover:before { 28 | display: inline-block; 29 | font: 14px/1em FontAwesome; 30 | font-size: inherit; 31 | text-rendering: auto; 32 | -webkit-font-smoothing: antialiased; 33 | -moz-osx-font-smoothing: grayscale; 34 | content: "\f176"; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /source/css/_base/base.styl: -------------------------------------------------------------------------------- 1 | *, :after, :before { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, html, iframe, img, input, p, select, table, td, textarea, th, ul { 8 | margin: 0; 9 | padding: 0; 10 | -webkit-text-size-adjust: 100%; 11 | } 12 | 13 | img {border: 0 none;} 14 | 15 | body { 16 | background: #fff; 17 | color: #444; 18 | font: 400 15px/1.8em $MainFont; 19 | -webkit-font-smoothing: antialiased; 20 | text-rendering: optimizeLegibility; 21 | } 22 | 23 | table { 24 | width: 100%; 25 | border-collapse: collapse; 26 | border-spacing: 0; 27 | } 28 | 29 | caption, td, th { 30 | vertical-align: top; 31 | text-align: left; 32 | font-weight: 400; 33 | } 34 | 35 | dl { 36 | display: block; 37 | margin: 1em 0; 38 | text-decoration: underline; 39 | font-weight: bold; 40 | dd {margin-left: 2em;} 41 | } 42 | 43 | input, textarea { 44 | margin: 0; 45 | padding: 3px; 46 | border: 1px solid #bdc7d8; 47 | } 48 | 49 | cite:before { 50 | content: "—"; 51 | padding: 0.3 em; 52 | } 53 | 54 | hr { 55 | margin: 2.4em auto; 56 | border: none; 57 | border-top: 1px solid #d9d9d9; 58 | position: relative; 59 | } 60 | 61 | a { 62 | outline: 0; 63 | text-decoration: none; 64 | color: $color-theme; 65 | &:hover { 66 | color: $color-theme; 67 | text-decoration: underline; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /source/css/_base/classes.styl: -------------------------------------------------------------------------------- 1 | 2 | .left {float: left;} 3 | 4 | .right {float: right;} 5 | 6 | .clearfix { 7 | zoom: 1; 8 | &:after, &:before { 9 | display: table; 10 | content: ' '; 11 | } 12 | &:after { 13 | clear: both; 14 | overflow: hidden; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /source/css/_base/index.styl: -------------------------------------------------------------------------------- 1 | @require 'normalize.css' 2 | @require 'base' 3 | @require 'classes' 4 | -------------------------------------------------------------------------------- /source/css/_base/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Change the default font family in all browsers (opinionated). 8 | * 2. Correct the line height in all browsers. 9 | * 3. Prevent adjustments of font size after orientation changes in 10 | * IE on Windows Phone and in iOS. 11 | */ 12 | 13 | html { 14 | font-family: sans-serif; /* 1 */ 15 | line-height: 1.15; /* 2 */ 16 | -ms-text-size-adjust: 100%; /* 3 */ 17 | -webkit-text-size-adjust: 100%; /* 3 */ 18 | } 19 | 20 | /* Sections 21 | ========================================================================== */ 22 | 23 | /** 24 | * Remove the margin in all browsers (opinionated). 25 | */ 26 | 27 | body { 28 | margin: 0; 29 | } 30 | 31 | /** 32 | * Add the correct display in IE 9-. 33 | */ 34 | 35 | article, 36 | aside, 37 | footer, 38 | header, 39 | nav, 40 | section { 41 | display: block; 42 | } 43 | 44 | /** 45 | * Correct the font size and margin on `h1` elements within `section` and 46 | * `article` contexts in Chrome, Firefox, and Safari. 47 | */ 48 | 49 | h1 { 50 | font-size: 2em; 51 | margin: 0.67em 0; 52 | } 53 | 54 | /* Grouping content 55 | ========================================================================== */ 56 | 57 | /** 58 | * Add the correct display in IE 9-. 59 | * 1. Add the correct display in IE. 60 | */ 61 | 62 | figcaption, 63 | figure, 64 | main { /* 1 */ 65 | display: block; 66 | } 67 | 68 | /** 69 | * Add the correct margin in IE 8. 70 | */ 71 | 72 | figure { 73 | margin: 1em 40px; 74 | } 75 | 76 | /** 77 | * 1. Add the correct box sizing in Firefox. 78 | * 2. Show the overflow in Edge and IE. 79 | */ 80 | 81 | hr { 82 | box-sizing: content-box; /* 1 */ 83 | height: 0; /* 1 */ 84 | overflow: visible; /* 2 */ 85 | } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | 92 | pre { 93 | font-family: monospace, monospace; /* 1 */ 94 | font-size: 1em; /* 2 */ 95 | } 96 | 97 | /* Text-level semantics 98 | ========================================================================== */ 99 | 100 | /** 101 | * 1. Remove the gray background on active links in IE 10. 102 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 103 | */ 104 | 105 | a { 106 | background-color: transparent; /* 1 */ 107 | -webkit-text-decoration-skip: objects; /* 2 */ 108 | } 109 | 110 | /** 111 | * Remove the outline on focused links when they are also active or hovered 112 | * in all browsers (opinionated). 113 | */ 114 | 115 | a:active, 116 | a:hover { 117 | outline-width: 0; 118 | } 119 | 120 | /** 121 | * 1. Remove the bottom border in Firefox 39-. 122 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 123 | */ 124 | 125 | abbr[title] { 126 | border-bottom: none; /* 1 */ 127 | text-decoration: underline; /* 2 */ 128 | text-decoration: underline dotted; /* 2 */ 129 | } 130 | 131 | /** 132 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: inherit; 138 | } 139 | 140 | /** 141 | * Add the correct font weight in Chrome, Edge, and Safari. 142 | */ 143 | 144 | b, 145 | strong { 146 | font-weight: bolder; 147 | } 148 | 149 | /** 150 | * 1. Correct the inheritance and scaling of font size in all browsers. 151 | * 2. Correct the odd `em` font sizing in all browsers. 152 | */ 153 | 154 | code, 155 | kbd, 156 | samp { 157 | font-family: monospace, monospace; /* 1 */ 158 | font-size: 1em; /* 2 */ 159 | } 160 | 161 | /** 162 | * Add the correct font style in Android 4.3-. 163 | */ 164 | 165 | dfn { 166 | font-style: italic; 167 | } 168 | 169 | /** 170 | * Add the correct background and color in IE 9-. 171 | */ 172 | 173 | mark { 174 | background-color: #ff0; 175 | color: #000; 176 | } 177 | 178 | /** 179 | * Add the correct font size in all browsers. 180 | */ 181 | 182 | small { 183 | font-size: 80%; 184 | } 185 | 186 | /** 187 | * Prevent `sub` and `sup` elements from affecting the line height in 188 | * all browsers. 189 | */ 190 | 191 | sub, 192 | sup { 193 | font-size: 75%; 194 | line-height: 0; 195 | position: relative; 196 | vertical-align: baseline; 197 | } 198 | 199 | sub { 200 | bottom: -0.25em; 201 | } 202 | 203 | sup { 204 | top: -0.5em; 205 | } 206 | 207 | /* Embedded content 208 | ========================================================================== */ 209 | 210 | /** 211 | * Add the correct display in IE 9-. 212 | */ 213 | 214 | audio, 215 | video { 216 | display: inline-block; 217 | } 218 | 219 | /** 220 | * Add the correct display in iOS 4-7. 221 | */ 222 | 223 | audio:not([controls]) { 224 | display: none; 225 | height: 0; 226 | } 227 | 228 | /** 229 | * Remove the border on images inside links in IE 10-. 230 | */ 231 | 232 | img { 233 | border-style: none; 234 | } 235 | 236 | /** 237 | * Hide the overflow in IE. 238 | */ 239 | 240 | svg:not(:root) { 241 | overflow: hidden; 242 | } 243 | 244 | /* Forms 245 | ========================================================================== */ 246 | 247 | /** 248 | * 1. Change the font styles in all browsers (opinionated). 249 | * 2. Remove the margin in Firefox and Safari. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | font-family: sans-serif; /* 1 */ 258 | font-size: 100%; /* 1 */ 259 | line-height: 1.15; /* 1 */ 260 | margin: 0; /* 2 */ 261 | } 262 | 263 | /** 264 | * Show the overflow in IE. 265 | * 1. Show the overflow in Edge. 266 | */ 267 | 268 | button, 269 | input { /* 1 */ 270 | overflow: visible; 271 | } 272 | 273 | /** 274 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 275 | * 1. Remove the inheritance of text transform in Firefox. 276 | */ 277 | 278 | button, 279 | select { /* 1 */ 280 | text-transform: none; 281 | } 282 | 283 | /** 284 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 285 | * controls in Android 4. 286 | * 2. Correct the inability to style clickable types in iOS and Safari. 287 | */ 288 | 289 | button, 290 | html [type="button"], /* 1 */ 291 | [type="reset"], 292 | [type="submit"] { 293 | -webkit-appearance: button; /* 2 */ 294 | } 295 | 296 | /** 297 | * Remove the inner border and padding in Firefox. 298 | */ 299 | 300 | button::-moz-focus-inner, 301 | [type="button"]::-moz-focus-inner, 302 | [type="reset"]::-moz-focus-inner, 303 | [type="submit"]::-moz-focus-inner { 304 | border-style: none; 305 | padding: 0; 306 | } 307 | 308 | /** 309 | * Restore the focus styles unset by the previous rule. 310 | */ 311 | 312 | button:-moz-focusring, 313 | [type="button"]:-moz-focusring, 314 | [type="reset"]:-moz-focusring, 315 | [type="submit"]:-moz-focusring { 316 | outline: 1px dotted ButtonText; 317 | } 318 | 319 | /** 320 | * Change the border, margin, and padding in all browsers (opinionated). 321 | */ 322 | 323 | fieldset { 324 | border: 1px solid #c0c0c0; 325 | margin: 0 2px; 326 | padding: 0.35em 0.625em 0.75em; 327 | } 328 | 329 | /** 330 | * 1. Correct the text wrapping in Edge and IE. 331 | * 2. Correct the color inheritance from `fieldset` elements in IE. 332 | * 3. Remove the padding so developers are not caught out when they zero out 333 | * `fieldset` elements in all browsers. 334 | */ 335 | 336 | legend { 337 | box-sizing: border-box; /* 1 */ 338 | color: inherit; /* 2 */ 339 | display: table; /* 1 */ 340 | max-width: 100%; /* 1 */ 341 | padding: 0; /* 3 */ 342 | white-space: normal; /* 1 */ 343 | } 344 | 345 | /** 346 | * 1. Add the correct display in IE 9-. 347 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 348 | */ 349 | 350 | progress { 351 | display: inline-block; /* 1 */ 352 | vertical-align: baseline; /* 2 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * 1. Correct the inability to style clickable types in iOS and Safari. 404 | * 2. Change font properties to `inherit` in Safari. 405 | */ 406 | 407 | ::-webkit-file-upload-button { 408 | -webkit-appearance: button; /* 1 */ 409 | font: inherit; /* 2 */ 410 | } 411 | 412 | /* Interactive 413 | ========================================================================== */ 414 | 415 | /* 416 | * Add the correct display in IE 9-. 417 | * 1. Add the correct display in Edge, IE, and Firefox. 418 | */ 419 | 420 | details, /* 1 */ 421 | menu { 422 | display: block; 423 | } 424 | 425 | /* 426 | * Add the correct display in all browsers. 427 | */ 428 | 429 | summary { 430 | display: list-item; 431 | } 432 | 433 | /* Scripting 434 | ========================================================================== */ 435 | 436 | /** 437 | * Add the correct display in IE 9-. 438 | */ 439 | 440 | canvas { 441 | display: inline-block; 442 | } 443 | 444 | /** 445 | * Add the correct display in IE. 446 | */ 447 | 448 | template { 449 | display: none; 450 | } 451 | 452 | /* Hidden 453 | ========================================================================== */ 454 | 455 | /** 456 | * Add the correct display in IE 10-. 457 | */ 458 | 459 | [hidden] { 460 | display: none; 461 | } -------------------------------------------------------------------------------- /source/css/_deprecated.styl: -------------------------------------------------------------------------------- 1 | /* These parts of styles are found nowhere or I decide to no longer use them */ 2 | 3 | @font-face { 4 | font-family: 'mutheme-kunkka'; 5 | src: url('/fonts/icomoon.eot?5z92sk'); 6 | src: url('/fonts/icomoon.eot?5z92sk#iefix') format('embedded-opentype'), 7 | url('/fonts/icomoon.ttf?5z92sk') format('truetype'), 8 | url('/fonts/icomoon.woff?5z92sk') format('woff'), 9 | url('/fonts/icomoon.svg?5z92sk#icomoon') format('svg'); 10 | font-weight: normal; 11 | font-style: normal; 12 | } 13 | 14 | .mutheme-search, 15 | .breadcrumb-arrow, 16 | .dropdown > a:before, 17 | .mobile-menu-button, 18 | [class^="mutheme-"] > a:before { 19 | /* use !important to prevent issues with browser extensions that change fonts */ 20 | font-family: 'mutheme-kunkka'; 21 | speak: none; 22 | font-style: normal; 23 | font-weight: normal; 24 | font-variant: normal; 25 | text-transform: none; 26 | line-height: 1; 27 | 28 | /* Better Font Rendering =========== */ 29 | -webkit-font-smoothing: antialiased; 30 | -moz-osx-font-smoothing: grayscale; 31 | } 32 | 33 | .mutheme-download > a:before {content: "\e609";} 34 | 35 | .mutheme-email > a:before {content: "\e60b";} 36 | 37 | .mutheme-tag > a:before {content: "\e602";} 38 | 39 | .mutheme-comment > a:before {content: "\e60c";} 40 | 41 | .mutheme-layers > a:before {content: "\e900";} 42 | 43 | .mutheme-air > a:before {content: "\e901";} 44 | 45 | .mutheme-aircraft > a:before {content: "\e902";} 46 | 47 | .mutheme-drive > a:before {content: "\e905";} 48 | 49 | .mutheme-colours > a:before {content: "\e903";} 50 | 51 | .mutheme-compass > a:before {content: "\e904";} 52 | 53 | .mutheme-game > a:before {content: "\e906";} 54 | 55 | .mutheme-home > a:before {content: "\e907";} 56 | 57 | .mutheme-image > a:before {content: "\e908";} 58 | 59 | .mutheme-medal > a:before {content: "\e909";} 60 | 61 | .mutheme-mic > a:before {content: "\e90a";} 62 | 63 | .mutheme-rocket > a:before {content: "\e90b";} 64 | 65 | .mutheme-shop > a:before {content: "\e90c";} 66 | 67 | .mutheme-user > a:before {content: "\e90d";} 68 | 69 | .mutheme-instagram > a:before {content: "\e90e";} 70 | 71 | .mutheme-shop > a:before {content: "\e90c";} 72 | 73 | .mutheme-music > a:before {content: "\f001";} 74 | 75 | .mutheme-video > a:before {content: "\f16a";} 76 | 77 | .mutheme-apple > a:before {content: "\f179";} 78 | 79 | .mutheme-windows > a:before {content: "\f17a";} 80 | 81 | .mutheme-android > a:before {content: "\f17b";} 82 | 83 | .mutheme-twitter > a:before {content: "\f099";} 84 | 85 | .mutheme-github > a:before {content: "\f09b";} 86 | 87 | .mutheme-feed > a:before {content: "\f09e";} 88 | 89 | .mutheme-tablet > a:before {content: "\f10a";} 90 | 91 | .mutheme-mobile > a:before {content: "\f10b";} 92 | 93 | .mutheme-linux > a:before {content: "\f17c";} 94 | 95 | .mutheme-dribbble > a:before {content: "\f17d";} 96 | 97 | .mutheme-weibo > a:before {content: "\f18a";} 98 | 99 | .mutheme-wordpress > a:before {content: "\f19a";} 100 | 101 | .mutheme-qq > a:before {content: "\f1d6";} 102 | 103 | .mutheme-wechat > a:before {content: "\f1d7";} 104 | 105 | .mutheme-facebook > a:before {content: "\f230";} 106 | 107 | .mutheme-safari > a:before {content: "\f267";} 108 | 109 | .mutheme-chrome > a:before {content: "\f268";} 110 | 111 | .mutheme-firefox > a:before {content: "\f269";} 112 | 113 | .mutheme-opera > a:before {content: "\f26a";} 114 | 115 | .mutheme-ie > a:before {content: "\f26b";} 116 | 117 | .mutheme-edge > a:before {content: "\f282";} 118 | 119 | .dropdown > a:before, 120 | .mobile-menu-button:before {content: "\f0c9";} 121 | 122 | .mutheme-search:before {content: "\f002";} 123 | 124 | .breadcrumb-arrow:before {content: "\e607";} 125 | 126 | .mutheme-icon-list li { 127 | display: inline-block; 128 | width: 19.1%; 129 | margin-bottom: 10px; 130 | } 131 | 132 | .about-wrap .feature-section {padding-bottom: 20px;} 133 | 134 | .avatar { 135 | border-radius: 50%; 136 | position: relative; 137 | &:after { 138 | position: absolute; 139 | content: ''; 140 | top: 0; 141 | right: 0; 142 | bottom: 0; 143 | left: 0; 144 | border: 1px solid rgba(0, 0, 0, .05); 145 | } 146 | } 147 | 148 | .widget-popular { 149 | min-height: 30px; 150 | span {padding-left: 10px;} 151 | } 152 | 153 | .widget-comment { 154 | .avatar { 155 | width: 16px; 156 | height: 16px; 157 | } 158 | li { 159 | padding-bottom: 10px; 160 | margin-bottom: 10px; 161 | border-bottom: 1px solid #f0f0f0; 162 | } 163 | } 164 | 165 | 166 | #comments { 167 | width: 100%; 168 | padding: 4px 5px; 169 | min-height: 70px; 170 | outline: none; 171 | border: 1px solid #ccc; 172 | vertical-align: middle; 173 | font-weight: 400; 174 | font-size: 15px; 175 | font-family: $MainFont; 176 | line-height: 1.8em; 177 | padding-bottom: 50px; 178 | .live {margin-left: 70px;} 179 | .children { 180 | position: relative; 181 | z-index: 5; 182 | margin-left: 70px; 183 | .children, .live {margin-left: 0;} 184 | .children { 185 | padding: 0; 186 | border: 0; 187 | background: 0; 188 | } 189 | &:after, &:before { 190 | position: absolute; 191 | top: -15px; 192 | left: 5px; 193 | z-index: 99; 194 | width: 0; 195 | border: solid transparent; 196 | content: ""; 197 | display: none; 198 | } 199 | &:before { 200 | z-index: 100; 201 | border-color: hsla(0, 0%, 100%, 0); 202 | border-width: 8px; 203 | border-bottom-color: #fff; 204 | } 205 | &:after { 206 | top: -17px; 207 | left: 4px; 208 | border-color: hsla(0, 0%, 100%, 0); 209 | border-width: 9px; 210 | border-bottom-color: #e5e5e5; 211 | } 212 | } 213 | @media screen and (max-width: 769px) {padding-bottom: 0;} 214 | } 215 | 216 | #commentss-title { 217 | font-weight: 400; 218 | font-size: 1pc; 219 | font-size: 1.142857143rem; 220 | a { 221 | color: #444; 222 | text-decoration: none; 223 | } 224 | } 225 | 226 | #comments-body { 227 | position: relative; 228 | padding-right: 30px; 229 | padding-left: 70px; 230 | min-height: 55px; 231 | #comments-text { 232 | padding-bottom: 10px; 233 | line-height: 24px; 234 | word-break: break-all; 235 | img {vertical-align: middle;} 236 | } 237 | } 238 | 239 | #comments-children-body { 240 | padding-top: 10px; 241 | padding-bottom: 10px; 242 | padding-left: 50px; 243 | border-top: 1px solid #ededed; 244 | #comments-avatar {top: 15px;} 245 | #comments-data a { 246 | color: #444; 247 | &:hover {color: #5895be;} 248 | } 249 | 250 | } 251 | 252 | #comments-floor { 253 | position: absolute; 254 | top: 0; 255 | top: 10px; 256 | right: 0; 257 | display: block; 258 | color: #666; 259 | a { 260 | color: #999; 261 | &:hover {color: #5895be;} 262 | } 263 | } 264 | 265 | #comments-avatar { 266 | position: absolute; 267 | left: 0; 268 | top: 0; 269 | } 270 | 271 | #comments-date { 272 | color: #999; 273 | padding-left: 15px; 274 | } 275 | 276 | #comments-reply-link{ 277 | color: #999; 278 | &:hover { 279 | color: #5895be; 280 | } 281 | } 282 | 283 | #comments-to {color: #999} 284 | 285 | #comments.depth-1 { 286 | margin-bottom: 24px; 287 | padding-bottom: 24px; 288 | border-bottom: 1px solid #ededed; 289 | } 290 | 291 | #comments-reply {padding-bottom: 10px;} 292 | 293 | #comments-topnav {margin-bottom: 30px;} 294 | 295 | #commentss-data { 296 | padding-top: 20px; 297 | padding-bottom: 15px; 298 | } 299 | 300 | #comments-content { 301 | &, p { 302 | margin: 0 0 9pt; 303 | line-height: 1.8; 304 | word-break: break-all; 305 | } 306 | } 307 | 308 | #submit-button {float: right;} 309 | 310 | #comments-icon {display: none;} 311 | 312 | .bypostauthor #comments-author, .bypostauthor #comments-author a {color: #ff7f3e;} 313 | 314 | .new-comment { 315 | margin-top: -24px; 316 | padding-top: 24px; 317 | background: #fafafa; 318 | } 319 | 320 | .children.new-comment { 321 | margin-top: 0; 322 | padding-top: 0 323 | } 324 | 325 | #respond { 326 | margin-bottom: 30px; 327 | h3 { 328 | color: #666; 329 | font-size: 9pt 330 | } 331 | p {margin-bottom: 8px;} 332 | 333 | } 334 | 335 | #cancel-comment-reply { 336 | position: absolute; 337 | right: 0; 338 | a { 339 | text-decoration: none; 340 | font-size: 13px; 341 | } 342 | } 343 | 344 | #author_info { 345 | input { 346 | margin-right: 10px; 347 | padding: 6px; 348 | width: 140px; 349 | border: 1px solid #ddd; 350 | font: 9pt; 351 | -webkit-appearance: none; 352 | } 353 | label small { 354 | position: relative; 355 | color: #777; 356 | font-size: 14px; 357 | width: 38px; 358 | display: inline-block; 359 | } 360 | } 361 | 362 | #author_error { 363 | float: left; 364 | padding-left: 20px; 365 | font-size: 9pt; 366 | line-height: 24px; 367 | } 368 | 369 | #submit { 370 | margin-top: 10px; 371 | font-size: 14px; 372 | padding: 6px 10px; 373 | border: 1px solid #ddd; 374 | background: #fff; 375 | color: #59493f; 376 | cursor: pointer; 377 | -webkit-appearance: none; 378 | &:hover { 379 | background-color: #f0f0f0; 380 | color: #59493f; 381 | } 382 | @media screen and (max-width: 769px) {width: 100%;} 383 | } 384 | 385 | #author_footer { 386 | z-index: 99; 387 | margin-top: 8px; 388 | height: 28px; 389 | font-size: 14px; 390 | } 391 | 392 | .author_hide {display: none;} 393 | 394 | #comment_form {position: relative;} 395 | 396 | #edit_author {cursor: pointer;} 397 | 398 | .btn { 399 | font-family: $MainFont; 400 | line-height: 1.7; 401 | text-transform: uppercase; 402 | font-size: 14px; 403 | font-weight: 800; 404 | letter-spacing: 1px; 405 | border-radius: 0; 406 | padding: 15px 25px; 407 | } 408 | 409 | .btn-lg { 410 | font-size: 16px; 411 | padding: 25px 35px; 412 | } 413 | 414 | .btn-default:hover, 415 | .btn-default:focus { 416 | background-color: #0085a1; 417 | border: 1px solid #0085a1; 418 | color: white; 419 | } 420 | 421 | .top-menu ul li { 422 | display: inline-block; 423 | margin-right: 25px; 424 | margin-right: 15px; 425 | zoom: 1; 426 | a { 427 | display: block; 428 | height: 30px; 429 | outline: 0; 430 | color: #666; 431 | text-decoration: none; 432 | font-size: 14px; 433 | &:hover {color: #5895be;} 434 | } 435 | &.archive a, &.about a { 436 | padding-left: 18px; 437 | position: relative; 438 | &:before { 439 | position: absolute; 440 | left: 0; 441 | line-height: 30px; 442 | } 443 | } 444 | &.archive a:before {content: "\e904";} 445 | &.about a:before { 446 | content: "\e7fd"; 447 | font-size: 18px; 448 | } 449 | } 450 | 451 | 452 | .global-custom-nav { 453 | ul li { 454 | display: inline-block; 455 | &.current-menu-item a {color: #5895be;} 456 | } 457 | @media screen and (max-width: 769px) { 458 | float: none; 459 | margin-top: 10px; 460 | width: 100%; 461 | padding: 5px 15px; 462 | border-top: 1px solid #eee; 463 | } 464 | } 465 | 466 | .pager > a { 467 | color: #fff; 468 | border: 2px solid #404040; 469 | border-radius: 3px; 470 | background-color: #404040; 471 | -webkit-transition: all 0.2s ease; 472 | -moz-transition: all 0.2s ease; 473 | transition: all 0.2s ease; 474 | &:hover, &:focus { 475 | text-decoration: none; 476 | color: #404040; 477 | background-color: #fff; 478 | } 479 | } 480 | 481 | .pagenavi { 482 | display: block; 483 | list-style: none; 484 | margin-top: 25px; 485 | padding: 25px 0 0; 486 | font-size: 14px; 487 | text-align: center; 488 | .page-number { 489 | display: inline-block; 490 | margin: 0 5px 5px 0; 491 | } 492 | a, span { 493 | display: inline-block; 494 | line-height: 25px; 495 | padding: 5px 9px; 496 | border: 1px solid #DDD; 497 | text-align: center; 498 | color: #555; 499 | &:hover { 500 | background: #F8F8F8; 501 | border-bottom-color: $color-theme; 502 | } 503 | &.prev { 504 | float: left; 505 | &:before { 506 | font-family: "FontAwesome"; 507 | content: "\f100"; 508 | padding-right: 0.3em; 509 | } 510 | } 511 | &.next { 512 | float: right; 513 | &:after { 514 | font-family: "FontAwesome"; 515 | content: "\f101"; 516 | padding-left: 0.3em; 517 | } 518 | } 519 | &.extend:hover {text-decoration: none;} 520 | } 521 | .current { 522 | background: #F8F8F8; 523 | border-bottom-color: $color-theme; 524 | } 525 | .space { 526 | border: none; 527 | padding: 5px 5px; 528 | } 529 | } 530 | 531 | #toc { 532 | line-height: 1em; 533 | float: right; 534 | border: 1px solid #bbb; 535 | border-radius: 7px; 536 | margin: 1.1em 0 0 2em; 537 | padding: 0.7em 0.7em 0 0.7em; 538 | a {color: #999;} 539 | .toc { 540 | padding: 0; 541 | margin: 0.5em; 542 | line-height: 1.8em; 543 | li {list-style-type: none;} 544 | } 545 | .toc-child { 546 | margin-left: 1em; 547 | padding-left: 0; 548 | } 549 | .toc-title {font-size: 120%;} 550 | } 551 | 552 | .post-content { 553 | h1, h2, h3, h4 { 554 | position: relative; 555 | padding-left: 20px; 556 | margin: 1em 0 0.6em 0; 557 | } 558 | h2, h3, h4 { 559 | &:after { 560 | position: absolute; 561 | content: ""; 562 | left: 0; 563 | top: 0; 564 | bottom: 0; 565 | width: 5px; 566 | border-radius: 2px; 567 | background: #ddd; 568 | -webkit-box-sizing: border-box; 569 | -moz-box-sizing: border-box; 570 | box-sizing: border-box; 571 | padding: 0; 572 | margin: 0; 573 | } 574 | } 575 | } 576 | 577 | .post-content > table { 578 | tr { 579 | border-top: 1px solid #cccccc; 580 | background-color: white; 581 | margin: 0; 582 | padding: 0; 583 | &:nth-child(2n) {background-color: #f8f8f8;} 584 | th { 585 | font-weight: bold; 586 | border: 1px solid #cccccc; 587 | text-align: left; 588 | margin: 0; 589 | padding: 6px 13px; 590 | } 591 | td { 592 | border: 1px solid #cccccc; 593 | text-align: left; 594 | margin: 0; 595 | padding: 6px 13px; 596 | } 597 | th, td { 598 | &:first-child {margin-top: 0;} 599 | &:last-child {margin-bottom: 0;} 600 | } 601 | } 602 | } 603 | ::-webkit-scrollbar-track-piece { 604 | width: 13px; 605 | border-right: 1px solid #eee; 606 | border-left: 1px solid #e4e4e4; 607 | background-color: #f0f0f0; 608 | background-image: -webkit-linear-gradient(left, #f0f0f0, #fff); 609 | } 610 | 611 | ::-webkit-scrollbar { 612 | width: 13px; 613 | height: 13px; 614 | } 615 | 616 | ::-webkit-scrollbar-thumb { 617 | position: relative; 618 | min-height: 25px; 619 | border-radius: 9999px; 620 | background-color: #c2c2c2; 621 | background-clip: padding-box; 622 | &:vertical { 623 | border-top: 0 solid transparent; 624 | border-right: 2px solid transparent; 625 | border-bottom: 0 solid transparent; 626 | border-left: 3px solid transparent; 627 | } 628 | &:horizontal { 629 | border-top: 3px solid transparent; 630 | border-right: 0 solid transparent; 631 | border-bottom: 2px solid transparent; 632 | border-left: 0 solid transparent; 633 | } 634 | &:active {background-color: #7d7d7d;} 635 | } 636 | 637 | .dropdown-link { 638 | display: block; 639 | .icon { 640 | padding-left: 10px; 641 | vertical-align: middle; 642 | font-size: 15px; 643 | } 644 | &:before { 645 | position: absolute; 646 | left: 0; 647 | top: 0; 648 | /*line-height: 30px;*/ 649 | vertical-align: middle; 650 | } 651 | } 652 | 653 | .tab-formats { 654 | li { 655 | float: left; 656 | display: block; 657 | padding-right: 45px; 658 | width: 36px; 659 | text-align: center; 660 | &.tab-part {padding-right: 0;} 661 | a { 662 | color: #999; 663 | &:hover { 664 | text-decoration: none; 665 | .icon-home {background-position: 0 -4pc;} 666 | .icon-twitter {background-position: -62px -4pc;} 667 | .icon-film {background-position: -122px -4pc;} 668 | .icon-inbox {background-position: -182px -4pc;} 669 | } 670 | &.news:hover {color: #fa7c7c;} 671 | &.twitter:hover {color: #00acee;} 672 | &.films:hover {color: #facc7c;} 673 | &.archive:hover {color: #5bcb57;} 674 | } 675 | } 676 | span { 677 | display: block; 678 | width: 36px; 679 | height: 2pc; 680 | font-size: 28px; 681 | } 682 | } 683 | 684 | .section-title { 685 | color: #666; 686 | font-weight: 400; 687 | font-size: 20px; 688 | line-height: 30px; 689 | } 690 | 691 | .tab-more { 692 | margin-top: 25px; 693 | width: 280px; 694 | height: 40px; 695 | border-top: 1px dotted #ccc; 696 | text-align: center; 697 | line-height: 40px; 698 | } 699 | 700 | 701 | @media screen and (max-width: 768px) { 702 | #search-input, #search-submit {background: transparent;} 703 | 704 | #search-form { 705 | width: 100%; 706 | height: 42px; 707 | border-width: 1px 0 0 0; 708 | background: transparent; 709 | padding-right: 0; 710 | } 711 | 712 | #search-input { 713 | width: 100%; 714 | padding-left: 35px; 715 | padding-right: 15px; 716 | height: 40px; 717 | border-top-color: #eee; 718 | } 719 | 720 | #search-submit { 721 | width: 40px; 722 | height: 40px; 723 | position: absolute; 724 | line-height: 40px; 725 | top: 0; 726 | left: 0; 727 | color: #aaa; 728 | } 729 | } 730 | 731 | .page { 732 | .post-header {padding-bottom: 30px;} 733 | #comments {padding-top: 30px;} 734 | } 735 | -------------------------------------------------------------------------------- /source/css/_env/colors.styl: -------------------------------------------------------------------------------- 1 | $highlight-background = #2d2d2d 2 | $highlight-current-line = #393939 3 | $highlight-selection = #515151 4 | $highlight-foreground = #cccccc 5 | $highlight-comment = #999999 6 | $highlight-red = #f2777a 7 | $highlight-orange = #f99157 8 | $highlight-yellow = #ffcc66 9 | $highlight-green = #99cc99 10 | $highlight-aqua = #66cccc 11 | $highlight-blue = #6699cc 12 | $highlight-purple = #cc99cc 13 | 14 | colors = { 15 | green: #37c936, 16 | red: #dd4b39, 17 | purple: #858, /* candidate #563d7c */ 18 | blue: #177ee6 19 | } 20 | 21 | $color-theme = colors[hexo-config("color_theme")] || #5895be 22 | -------------------------------------------------------------------------------- /source/css/_env/fonts.styl: -------------------------------------------------------------------------------- 1 | $MainFont = "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, sans-serif 2 | 3 | $NavigationFont = Arial, sans-serif 4 | 5 | $TooltipFont = Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" 6 | 7 | $CodeFont = "Ubuntu Mono", Consolas, "WenQuanYi MicroHei Mono", monospace 8 | 9 | $SerifFont = Lora, "FF Tisa", "Freight Text", "Times New Roman", sans-serif 10 | 11 | $LogoFont = "Titillium Web", Helvetica, sans-serif 12 | -------------------------------------------------------------------------------- /source/css/_footer/cc-icon.styl: -------------------------------------------------------------------------------- 1 | .cc {line-height: 35px;} 2 | 3 | .cc-license { 4 | display: inline-block; 5 | vertical-align: middle; 6 | a:hover { 7 | text-decoration: none; 8 | color: #000; 9 | } 10 | } -------------------------------------------------------------------------------- /source/css/_footer/footer.styl: -------------------------------------------------------------------------------- 1 | #footer { 2 | border-top: 1px solid #ececec; 3 | font-size: 14px; 4 | & , a {color: #999;} 5 | .container { 6 | padding: 15px 0; 7 | height: 65px; 8 | text-align: center; 9 | line-height: 35px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /source/css/_footer/sns-icon.styl: -------------------------------------------------------------------------------- 1 | .sns-icons { 2 | margin-bottom: 2em; 3 | a { 4 | color: #555; 5 | &:hover {color: #000;} 6 | } 7 | } 8 | 9 | .sns-icon { 10 | padding: 4px 8px; 11 | margin-left: 10px; 12 | } -------------------------------------------------------------------------------- /source/css/_nav/dropdown.styl: -------------------------------------------------------------------------------- 1 | #global-nav { 2 | display: block; 3 | float: left; 4 | .fa:before {margin-right: 0.25em;} // For FontAwesome icons 5 | } 6 | 7 | .gnli { 8 | display: inline-block; 9 | margin-right: 25px; 10 | zoom: 1; 11 | } 12 | 13 | .gna { 14 | display: block; 15 | height: 30px; 16 | outline: 0; 17 | color: #666; 18 | text-decoration: none; 19 | font-size: 14px; 20 | &:hover { text-decoration: none; } 21 | .current & { color: $color-theme; } 22 | } 23 | 24 | .gn-item { 25 | min-width: 14px; 26 | margin-right: 5px; 27 | } 28 | 29 | #dropdown { position: relative; } 30 | 31 | #dropdown-menu { 32 | display: none; 33 | position: absolute; 34 | top: 35px; 35 | left: 0; 36 | padding: 25px; 37 | width: 35pc; 38 | border: 1px solid #ccc; 39 | /* border-color: rgba(0, 0, 0, .2); */ 40 | border-radius: 4px; 41 | background: #fff; 42 | box-shadow: 0 2px 10px #ccc; 43 | .active & { display: block; } 44 | // triangle hacking 45 | &:before, &:after { 46 | position: absolute; 47 | left: 7px; 48 | z-index: 1; 49 | width: 0; 50 | height: 0; 51 | border-color: transparent; 52 | border-style: dashed dashed solid; 53 | border-width: 0 8px 8px; 54 | content: " "; 55 | } 56 | &:before { 57 | top: -9px; 58 | border-bottom-color: #ccc; 59 | /* border-bottom-color: rgba(0, 0, 0, .2); */ 60 | } 61 | &:after { 62 | top: -7px; 63 | border-bottom-color: #fff; 64 | } 65 | } 66 | 67 | .tdleft { 68 | width: 45px; 69 | white-space: nowrap; 70 | padding-right: 20px; 71 | border-right: 1px solid #eee; 72 | } 73 | 74 | .tdright {padding-left: 20px;} 75 | 76 | .trline td {padding-bottom: 15px;} 77 | 78 | .tab-ul a { 79 | display: inline-block; 80 | cursor: pointer; 81 | margin: 0 10px 10px 0; 82 | padding: 2px 10px; 83 | background: #f5f5f5; 84 | color: #333; 85 | font: 13px/1.65em $NavigationFont; 86 | line-height: 180%; 87 | &:hover { 88 | background-color: $color-theme; 89 | color: #fff; 90 | text-decoration: none; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /source/css/_nav/logo.styl: -------------------------------------------------------------------------------- 1 | .logo { 2 | float: left; 3 | margin-right: 40px; 4 | display: block; 5 | width: 102px; 6 | height: 30px; 7 | .brand-logo { 8 | color: #666; 9 | padding: 1px 5px 3px 5px; 10 | font-family: $LogoFont; 11 | font-size: 20px; 12 | margin-right: 5px; 13 | } 14 | } -------------------------------------------------------------------------------- /source/css/_nav/nav.styl: -------------------------------------------------------------------------------- 1 | #nav { 2 | padding: 40px 0 30px; 3 | border-bottom: 1px solid #ededed; 4 | background-color: #fafafa; 5 | } 6 | 7 | #header { 8 | position: relative; 9 | z-index: 90; 10 | width: 100%; 11 | height: 55px; 12 | padding: 10px 0; 13 | background-color: #fff; 14 | border-bottom: 1px solid #ededed; 15 | box-shadow: 0 1px 0 0 hsla(0, 0%, 62%, .2) inset; 16 | -ms-box-shadow: 0 1px 0 0 hsla(0, 0%, 62%, .2) inset; 17 | .container { 18 | height: 30px; 19 | line-height: 30px; 20 | /*margin-left: 80px;*/ 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /source/css/_nav/search.styl: -------------------------------------------------------------------------------- 1 | #search-form { 2 | position: relative; 3 | max-width: 35%; 4 | float: right; 5 | padding-right: 35px; 6 | border: 1px solid #e5e5e5; 7 | border-radius: 2px; 8 | background: transparent; 9 | } 10 | 11 | #search-input { 12 | padding: 3px 6px 4px 5px; 13 | height: 24px; 14 | font-size: 13px; 15 | outline: 0; 16 | border: 0; 17 | background: transparent; 18 | } 19 | 20 | #search-submit { 21 | position: absolute; 22 | top: 0; 23 | right: 0; 24 | width: 35px; 25 | height: 30px; 26 | border: 0; 27 | background: transparent; 28 | cursor: pointer; 29 | font-size: 14px; 30 | &:hover {color: $color-theme;} 31 | } 32 | -------------------------------------------------------------------------------- /source/css/_page/buttons.styl: -------------------------------------------------------------------------------- 1 | if(hexo-config('buttons.base')){ 2 | /* http://www.bootcss.com/p/buttons */ 3 | .button { 4 | color: #666; 5 | background-color: #EEE; 6 | border-color: #EEE; 7 | font-weight: 300; 8 | font-size: 16px; 9 | font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 10 | text-decoration: none; 11 | text-align: center; 12 | line-height: 40px; 13 | height: 40px; 14 | padding: 0 40px; 15 | margin: 0; 16 | display: inline-block; 17 | appearance: none; 18 | cursor: pointer; 19 | border: none; 20 | -webkit-box-sizing: border-box; 21 | -moz-box-sizing: border-box; 22 | box-sizing: border-box; 23 | -webkit-transition-property: all; 24 | transition-property: all; 25 | -webkit-transition-duration: .3s; 26 | transition-duration: .3s; 27 | /* 28 | * Disabled State 29 | * 30 | * The disabled state uses the class .disabled, is-disabled, 31 | * and the form attribute disabled="disabled". 32 | * The use of !important is only added because this is a state 33 | * that must be applied to all buttons when in a disabled state. 34 | */ 35 | &:visited {color: #666;} 36 | &:hover, &:focus { 37 | background-color: #f6f6f6; 38 | text-decoration: none; 39 | outline: none; 40 | } 41 | &:active, &.active, &.is-active { 42 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); 43 | text-decoration: none; 44 | background-color: #eeeeee; 45 | border-color: #cfcfcf; 46 | color: #d4d4d4; 47 | -webkit-transition-duration: 0s; 48 | transition-duration: 0s; 49 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); 50 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); 51 | } 52 | &.disabled, &.is-disabled, &:disabled { 53 | top: 0 !important; 54 | background: #EEE !important; 55 | border: 1px solid #DDD !important; 56 | text-shadow: 0 1px 1px white !important; 57 | color: #CCC !important; 58 | cursor: default !important; 59 | appearance: none !important; 60 | -webkit-box-shadow: none !important; 61 | box-shadow: none !important; 62 | opacity: .8 !important; 63 | } 64 | } 65 | 66 | /* Base Button Tyography */ 67 | .button-uppercase {text-transform: uppercase;} 68 | 69 | .button-lowercase {text-transform: lowercase;} 70 | 71 | .button-capitalize {text-transform: capitalize;} 72 | 73 | .button-small-caps {font-variant: small-caps;} 74 | 75 | .button-icon-txt-large {font-size: 36px !important;} 76 | 77 | /* Base padding */ 78 | .button-width-small {padding: 0 10px !important;} 79 | 80 | /* 81 | * Base Colors 82 | * 83 | * Create colors for buttons 84 | * (.button-primary, .button-secondary, etc.) 85 | */ 86 | .button-primary, .button-primary-flat { 87 | background-color: #1B9AF7; 88 | border-color: #1B9AF7; 89 | color: #FFF; 90 | &:visited {color: #FFF;} 91 | &:hover, &:focus { 92 | background-color: #4cb0f9; 93 | border-color: #4cb0f9; 94 | color: #FFF; 95 | } 96 | &:active, &.active, &.is-active { 97 | background-color: #2798eb; 98 | border-color: #2798eb; 99 | color: #0880d7; 100 | } 101 | } 102 | 103 | .button-plain, .button-plain-flat { 104 | background-color: #FFF; 105 | border-color: #FFF; 106 | color: #1B9AF7; 107 | &:visited {color: #1B9AF7;} 108 | &:hover, &:focus { 109 | background-color: white; 110 | border-color: white; 111 | color: #1B9AF7; 112 | } 113 | &:active, &.active, &.is-active { 114 | background-color: white; 115 | border-color: white; 116 | color: #e6e6e6; 117 | } 118 | } 119 | 120 | .button-inverse, .button-inverse-flat { 121 | background-color: #222; 122 | border-color: #222; 123 | color: #EEE; 124 | &:visited {color: #EEE;} 125 | &:focus, &:hover { 126 | background-color: #3c3c3c; 127 | border-color: #3c3c3c; 128 | color: #EEE; 129 | } 130 | &:active, &.active, &.is-active { 131 | background-color: #222222; 132 | border-color: #222222; 133 | color: #090909; 134 | } 135 | } 136 | 137 | .button-action, .button-action-flat { 138 | background-color: #A5DE37; 139 | border-color: #A5DE37; 140 | color: #FFF; 141 | &:visited {color: #FFF;} 142 | &:focus,&:hover { 143 | background-color: #b9e563; 144 | border-color: #b9e563; 145 | color: #FFF; 146 | } 147 | &:active, &.active, &.is-active { 148 | background-color: #a1d243; 149 | border-color: #a1d243; 150 | color: #8bc220; 151 | } 152 | } 153 | 154 | .button-highlight, .button-highlight-flat { 155 | background-color: #FEAE1B; 156 | border-color: #FEAE1B; 157 | color: #FFF; 158 | &:visited {color: #FFF;} 159 | &:focus,&:hover { 160 | background-color: #fec04e; 161 | border-color: #fec04e; 162 | color: #FFF; 163 | } 164 | &:active, &.active, &.is-active { 165 | background-color: #f3ab26; 166 | border-color: #f3ab26; 167 | color: #e59501; 168 | } 169 | } 170 | 171 | .button-caution, .button-caution-flat { 172 | background-color: #FF4351; 173 | border-color: #FF4351; 174 | color: #FFF; 175 | &:visited {color: #FFF;} 176 | &:focus,&:hover { 177 | background-color: #ff7680; 178 | border-color: #ff7680; 179 | color: #FFF; 180 | } 181 | &:active, &.active, &.is-active { 182 | background-color: #f64c59; 183 | border-color: #f64c59; 184 | color: #ff1022; 185 | } 186 | } 187 | 188 | .button-royal, .button-royal-flat { 189 | background-color: #7B72E9; 190 | border-color: #7B72E9; 191 | color: #FFF; 192 | &:visited {color: #FFF;} 193 | &:focus,&:hover { 194 | background-color: #a49ef0; 195 | border-color: #a49ef0; 196 | color: #FFF; 197 | } 198 | &:active, &.active, &.is-active { 199 | background-color: #827ae1; 200 | border-color: #827ae1; 201 | color: #5246e2; 202 | } 203 | } 204 | 205 | /* 206 | * Base Layout Styles 207 | * 208 | * Very Miminal Layout Styles 209 | */ 210 | .button-block, .button-stacked {display: block;} 211 | 212 | /* 213 | * Button Types (optional) 214 | * 215 | * All of the files below represent the various button 216 | * types (including shapes & sizes). None of these files 217 | * are required. Simple remove the uneeded type below and 218 | * the button type will be excluded from the final build 219 | */ 220 | /* 221 | * Button Shapes 222 | * 223 | * This file creates the various button shapes 224 | * (ex. Circle, Rounded, Pill) 225 | */ 226 | .button-square {border-radius: 0;} 227 | 228 | .button-box {border-radius: 10px;} 229 | 230 | .button-rounded {border-radius: 4px;} 231 | 232 | .button-pill {border-radius: 200px;} 233 | 234 | .button-circle {border-radius: 100%;} 235 | 236 | /* 237 | * Size Adjustment for equal height & widht buttons 238 | * 239 | * Remove padding and set a fixed width. 240 | */ 241 | .button-circle, .button-box, .button-square { 242 | padding: 0 !important; 243 | width: 40px; 244 | &.button-giant {width: 70px;} 245 | &.button-large {width: 50px;} 246 | &.button-normal {width: 40px;} 247 | &.button-small {width: 30px;} 248 | &.button-tiny {width: 24px;} 249 | } 250 | 251 | /* 252 | * Button Sizes 253 | * 254 | * This file creates the various button sizes 255 | * (ex. .button-large, .button-small, etc.) 256 | */ 257 | .button-giant { 258 | font-size: 28px; 259 | height: 70px; 260 | line-height: 70px; 261 | padding: 0 70px; 262 | } 263 | 264 | .button-jumbo { 265 | font-size: 24px; 266 | height: 60px; 267 | line-height: 60px; 268 | padding: 0 60px; 269 | } 270 | 271 | .button-large { 272 | font-size: 20px; 273 | height: 50px; 274 | line-height: 50px; 275 | padding: 0 50px; 276 | } 277 | 278 | .button-normal { 279 | font-size: 16px; 280 | height: 40px; 281 | line-height: 40px; 282 | padding: 0 40px; 283 | } 284 | 285 | .button-small { 286 | font-size: 12px; 287 | height: 30px; 288 | line-height: 30px; 289 | padding: 0 30px; 290 | } 291 | 292 | .button-tiny { 293 | font-size: 9.6px; 294 | height: 24px; 295 | line-height: 24px; 296 | padding: 0 24px; 297 | } 298 | if(hexo-config('buttons.border')){ 299 | /* 300 | * Border Buttons 301 | * 302 | * These buttons have no fill they only have a 303 | * border to define their hit target. 304 | */ 305 | .button-border, .button-border-thin, .button-border-thick { 306 | background: none; 307 | border-width: 2px; 308 | border-style: solid; 309 | line-height: 36px; 310 | &:hover {background-color: rgba(255, 255, 255, 0.9);} 311 | &:active, &.active, &.is-active { 312 | -webkit-box-shadow: none; 313 | box-shadow: none; 314 | text-shadow: none; 315 | -webkit-transition-property: all; 316 | transition-property: all; 317 | -webkit-transition-duration: .3s; 318 | transition-duration: .3s; 319 | } 320 | /* 321 | * Border Button Colors 322 | * 323 | * Create colors for buttons 324 | * (.button-primary, .button-secondary, etc.) 325 | */ 326 | &.button-primary { 327 | color: #1B9AF7; 328 | &:focus, &:hover { 329 | background-color: rgba(76, 176, 249, 0.9); 330 | color: rgba(255, 255, 255, 0.9); 331 | } 332 | &:active, &.active, &.is-active { 333 | background-color: rgba(39, 152, 235, 0.7); 334 | color: rgba(255, 255, 255, 0.5); 335 | opacity: .3; 336 | } 337 | } 338 | &.button-plain { 339 | color: #FFF;; 340 | &:focus, &:hover { 341 | background-color: rgba(255, 255, 255, 0.9); 342 | color: rgba(27, 154, 247, 0.9); 343 | } 344 | &:active, &.active, &.is-active { 345 | background-color: rgba(255, 255, 255, 0.7); 346 | color: rgba(27, 154, 247, 0.5); 347 | opacity: .3; 348 | } 349 | } 350 | &.button-inverse { 351 | color: #222; 352 | &:focus, &:hover { 353 | background-color: rgba(60, 60, 60, 0.9); 354 | color: rgba(238, 238, 238, 0.9); 355 | } 356 | &:active, &.active, &.is-active { 357 | background-color: rgba(34, 34, 34, 0.7); 358 | color: rgba(238, 238, 238, 0.5); 359 | opacity: .3; 360 | } 361 | } 362 | &.button-action { 363 | color: #A5DE37; 364 | &:focus, &:hover { 365 | background-color: rgba(185, 229, 99, 0.9); 366 | color: rgba(255, 255, 255, 0.9); 367 | } 368 | &:active, &.active, &.is-active { 369 | background-color: rgba(161, 210, 67, 0.7); 370 | color: rgba(255, 255, 255, 0.5); 371 | opacity: .3; 372 | } 373 | } 374 | &.button-highlight { 375 | color: #FEAE1B; 376 | &:focus, &:hover { 377 | background-color: rgba(254, 192, 78, 0.9); 378 | color: rgba(255, 255, 255, 0.9); 379 | } 380 | &:active, &.active, &.is-active { 381 | background-color: rgba(243, 171, 38, 0.7); 382 | color: rgba(255, 255, 255, 0.5); 383 | opacity: .3; 384 | } 385 | } 386 | &.button-caution { 387 | color: #FF4351; 388 | &:focus, &:hover { 389 | background-color: rgba(255, 118, 128, 0.9); 390 | color: rgba(255, 255, 255, 0.9); 391 | } 392 | &:active, &.active, &.is-active { 393 | background-color: rgba(246, 76, 89, 0.7); 394 | color: rgba(255, 255, 255, 0.5); 395 | opacity: .3; 396 | } 397 | } 398 | &.button-royal { 399 | color: #7B72E9; 400 | &:focus, &:hover { 401 | background-color: rgba(164, 158, 240, 0.9); 402 | color: rgba(255, 255, 255, 0.9); 403 | } 404 | &:active, &.active, &.is-active { 405 | background-color: rgba(130, 122, 225, 0.7); 406 | color: rgba(255, 255, 255, 0.5); 407 | opacity: .3; 408 | } 409 | } 410 | /* 411 | * Border Button Size Adjustment 412 | * 413 | * The line-height must be adjusted to compinsate for 414 | * the width of the border. 415 | */ 416 | &.button-giant {line-height: 66px;} 417 | &.button-jumbo {line-height: 56px;} 418 | &.button-large {line-height: 46px;} 419 | &.button-normal {line-height: 36px;} 420 | &.button-small {line-height: 26px;} 421 | &.button-tiny {line-height: 20px;} 422 | } 423 | 424 | /* 425 | * Border Optional Sizes 426 | * 427 | * A slight variation in border thickness 428 | */ 429 | .button-border-thin {border-width: 1px;} 430 | 431 | .button-border-thick {border-width: 3px;} 432 | } 433 | if(hexo-config('buttons.borderless')){ 434 | /* 435 | * Borderless Buttons 436 | * 437 | * These buttons have no fill they only have a 438 | * border to define their hit target. 439 | */ 440 | .button-borderless { 441 | background: none; 442 | border: none; 443 | padding: 0 8px !important; 444 | color: #EEE; 445 | font-size: 20.8px; 446 | font-weight: 200; 447 | &:hover, &:focus {background: none;} 448 | &:active, &.active, &.is-active { 449 | -webkit-box-shadow: none; 450 | box-shadow: none; 451 | text-shadow: none; 452 | -webkit-transition-property: all; 453 | transition-property: all; 454 | -webkit-transition-duration: .3s; 455 | transition-duration: .3s; 456 | opacity: .3; 457 | } 458 | /* 459 | * Borderless Button Colors 460 | * 461 | * Create colors for buttons 462 | * (.button-primary, .button-secondary, etc.) 463 | */ 464 | &.button-primary {color: #1B9AF7;} 465 | &.button-plain {color: #FFF;} 466 | &.button-inverse {color: #222;} 467 | &.button-action {color: #A5DE37;} 468 | &.button-highlight {color: #FEAE1B;} 469 | &.button-caution {color: #FF4351;} 470 | &.button-royal {color: #7B72E9;} 471 | /* 472 | * Borderles Size Adjustment 473 | * 474 | * The font-size must be large to compinsate for 475 | * the lack of a hit target. 476 | */ 477 | &.button-giant { 478 | font-size: 36.4px; 479 | height: 52.4px; 480 | line-height: 52.4px; 481 | } 482 | &.button-jumbo { 483 | font-size: 31.2px; 484 | height: 47.2px; 485 | line-height: 47.2px; 486 | } 487 | &.button-large { 488 | font-size: 26px; 489 | height: 42px; 490 | line-height: 42px; 491 | } 492 | &.button-normal { 493 | font-size: 20.8px; 494 | height: 36.8px; 495 | line-height: 36.8px; 496 | } 497 | &.button-small { 498 | font-size: 15.6px; 499 | height: 31.6px; 500 | line-height: 31.6px; 501 | } 502 | &.button-tiny { 503 | font-size: 12.48px; 504 | height: 28.48px; 505 | line-height: 28.48px; 506 | } 507 | } 508 | } 509 | if(hexo-config('buttons.raised')){ 510 | /* 511 | * Raised Buttons 512 | * 513 | * A classic looking button that offers 514 | * great depth and affordance. 515 | */ 516 | .button-raised { 517 | border-color: #e1e1e1; 518 | border-style: solid; 519 | border-width: 1px; 520 | line-height: 38px; 521 | background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); 522 | background: linear-gradient(#f6f6f6, #e1e1e1); 523 | -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); 524 | box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); 525 | &:hover, &:focus { 526 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro)); 527 | background: linear-gradient(top, white, gainsboro); 528 | } 529 | &:active, &.active, &.is-active { 530 | background: #eeeeee; 531 | -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; 532 | box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; 533 | } 534 | /* 535 | * Raised Button Colors 536 | * 537 | * Create colors for raised buttons 538 | */ 539 | &.button-primary { 540 | border-color: #088ef0; 541 | background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0)); 542 | background: linear-gradient(#34a5f8, #088ef0); 543 | &:hover, &:focus { 544 | background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6)); 545 | background: linear-gradient(top, #42abf8, #0888e6); 546 | } 547 | &:active, &.active, &.is-active { 548 | border-color: #0880d7; 549 | background: #2798eb; 550 | } 551 | } 552 | &.button-plain { 553 | border-color: #f2f2f2; 554 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2)); 555 | background: linear-gradient(white, #f2f2f2); 556 | &:hover, &:focus { 557 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed)); 558 | background: linear-gradient(top, white, #ededed); 559 | } 560 | &:active, &.active, &.is-active { 561 | border-color: #e6e6e6; 562 | background: white; 563 | } 564 | } 565 | &.button-inverse { 566 | border-color: #151515; 567 | background: -webkit-gradient(linear, left top, left bottom, from(#2f2f2f), to(#151515)); 568 | background: linear-gradient(#2f2f2f, #151515); 569 | &:hover, &:focus { 570 | background: -webkit-gradient(linear, left top, left bottom, from(#363636), to(#101010)); 571 | background: linear-gradient(top, #363636, #101010); 572 | } 573 | &:active, &.active, &.is-active { 574 | border-color: #090909; 575 | background: #222222; 576 | } 577 | } 578 | &.button-action { 579 | border-color: #9ad824; 580 | background: -webkit-gradient(linear, left top, left bottom, from(#afe24d), to(#9ad824)); 581 | background: linear-gradient(#afe24d, #9ad824); 582 | &:hover, &:focus { 583 | background: -webkit-gradient(linear, left top, left bottom, from(#b5e45a), to(#94cf22)); 584 | background: linear-gradient(top, #b5e45a, #94cf22); 585 | } 586 | &:active, &.active, &.is-active { 587 | border-color: #8bc220; 588 | background: #a1d243; 589 | } 590 | } 591 | &.button-highlight { 592 | border-color: #fea502; 593 | background: -webkit-gradient(linear, left top, left bottom, from(#feb734), to(#fea502)); 594 | background: linear-gradient(#feb734, #fea502); 595 | &:hover, &:focus { 596 | background: -webkit-gradient(linear, left top, left bottom, from(#febc44), to(#f49f01)); 597 | background: linear-gradient(top, #febc44, #f49f01); 598 | } 599 | &:active, &.active, &.is-active { 600 | border-color: #e59501; 601 | background: #f3ab26; 602 | } 603 | } 604 | &.button-caution { 605 | border-color: #ff2939; 606 | background: -webkit-gradient(linear, left top, left bottom, from(#ff5c69), to(#ff2939)); 607 | background: linear-gradient(#ff5c69, #ff2939); 608 | &:hover, &:focus { 609 | background: -webkit-gradient(linear, left top, left bottom, from(#ff6c77), to(#ff1f30)); 610 | background: linear-gradient(top, #ff6c77, #ff1f30); 611 | } 612 | &:active, &.active, &.is-active { 613 | border-color: #ff1022; 614 | background: #f64c59; 615 | } 616 | } 617 | &.button-royal { 618 | border-color: #665ce6; 619 | background: -webkit-gradient(linear, left top, left bottom, from(#9088ec), to(#665ce6)); 620 | background: linear-gradient(#9088ec, #665ce6); 621 | &:hover, &:focus { 622 | background: -webkit-gradient(linear, left top, left bottom, from(#9c95ef), to(#5e53e4)); 623 | background: linear-gradient(top, #9c95ef, #5e53e4); 624 | } 625 | &:active, &.active, &.is-active { 626 | border-color: #5246e2; 627 | background: #827ae1; 628 | } 629 | } 630 | } 631 | } 632 | if(hexo-config('buttons.3d')){ 633 | /* 634 | * 3D Buttons 635 | * 636 | * These buttons have a heavy three dimensional 637 | * style that mimics the visual appearance of a 638 | * real life button. 639 | */ 640 | .button-3d { 641 | position: relative; 642 | top: 0; 643 | -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 644 | box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 645 | &:hover, &:focus { 646 | -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 647 | box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 648 | } 649 | &:active, &.active, &.is-active { 650 | top: 5px; 651 | -webkit-transition-property: all; 652 | transition-property: all; 653 | -webkit-transition-duration: .15s; 654 | transition-duration: .15s; 655 | -webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); 656 | box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); 657 | } 658 | /* 659 | * 3D Button Colors 660 | * 661 | * Create colors for buttons 662 | * (.button-primary, .button-secondary, etc.) 663 | */ 664 | &.button-primary { 665 | -webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); 666 | box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); 667 | &:hover, &:focus { 668 | -webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); 669 | box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); 670 | } 671 | &:active, &.active, &.is-active { 672 | -webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); 673 | box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); 674 | } 675 | } 676 | &.button-plain { 677 | -webkit-box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); 678 | box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); 679 | &:hover, &:focus { 680 | -webkit-box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); 681 | box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); 682 | } 683 | &:active, &.active, &.is-active { 684 | -webkit-box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); 685 | box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); 686 | } 687 | } 688 | &.button-inverse { 689 | -webkit-box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); 690 | box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); 691 | &:hover, &:focus { 692 | -webkit-box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); 693 | box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); 694 | } 695 | &:active, &.active, &.is-active { 696 | -webkit-box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); 697 | box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); 698 | } 699 | } 700 | &.button-action { 701 | -webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); 702 | box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); 703 | &:hover, &:focus { 704 | -webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); 705 | box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); 706 | } 707 | &:active, &.active, &.is-active { 708 | -webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); 709 | box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); 710 | } 711 | } 712 | &.button-highlight { 713 | -webkit-box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); 714 | box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); 715 | &:hover, &:focus { 716 | -webkit-box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); 717 | box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); 718 | } 719 | &:active, &.active, &.is-active { 720 | -webkit-box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); 721 | box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); 722 | } 723 | } 724 | &.button-caution { 725 | -webkit-box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); 726 | box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); 727 | &:hover, &:focus { 728 | -webkit-box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); 729 | box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); 730 | } 731 | &:active, &.active, &.is-active { 732 | -webkit-box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); 733 | box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); 734 | } 735 | } 736 | &.button-royal { 737 | -webkit-box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); 738 | box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); 739 | &:hover, &:focus { 740 | -webkit-box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); 741 | box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); 742 | } 743 | &:active, &.active, &.is-active { 744 | -webkit-box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); 745 | box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); 746 | } 747 | } 748 | } 749 | } 750 | if(hexo-config('buttons.glowing')){ 751 | /* 752 | * Glowing Buttons 753 | * 754 | * A pulse like glow that appears 755 | * rythmically around the edges of 756 | * a button. 757 | */ 758 | /* 759 | * Glow animation mixin for Compass users 760 | * 761 | */ 762 | /* 763 | * Glowing Keyframes 764 | * 765 | */ 766 | @keyframes { 767 | glowing { 768 | from { 769 | -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 770 | box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 771 | } 50% { 772 | -webkit-box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); 773 | box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); 774 | } to { 775 | -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 776 | box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 777 | } 778 | } 779 | /* 780 | * Glowing Keyframes for various colors 781 | * 782 | */ 783 | glowing-primary { 784 | from { 785 | -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 786 | box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 787 | } 50% { 788 | -webkit-box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); 789 | box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); 790 | } to { 791 | -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 792 | box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 793 | } 794 | } 795 | glowing-plain { 796 | from { 797 | -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 798 | box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 799 | } 50% { 800 | -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 801 | box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 802 | } to { 803 | -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 804 | box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 805 | } 806 | } 807 | glowing-inverse { 808 | from { 809 | -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 810 | box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 811 | } 50% { 812 | -webkit-box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); 813 | box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); 814 | } to { 815 | -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 816 | box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 817 | } 818 | } 819 | glowing-action { 820 | from { 821 | -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 822 | box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 823 | } 50% { 824 | -webkit-box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); 825 | box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); 826 | } to { 827 | -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 828 | box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 829 | } 830 | } 831 | glowing-highlight { 832 | from { 833 | -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 834 | box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 835 | } 50% { 836 | -webkit-box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); 837 | box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); 838 | } to { 839 | -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 840 | box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 841 | } 842 | } 843 | glowing-caution { 844 | from { 845 | -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 846 | box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 847 | } 50% { 848 | -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); 849 | box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); 850 | } to { 851 | -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 852 | box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 853 | } 854 | } 855 | glowing-royal { 856 | from { 857 | -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 858 | box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 859 | } 50% { 860 | -webkit-box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); 861 | box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); 862 | } to { 863 | -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 864 | box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 865 | } 866 | } 867 | } 868 | 869 | /* 870 | * Glowing Buttons Base Styes 871 | * 872 | * A pulse like glow that appears 873 | * rythmically around the edges of 874 | * a button. 875 | */ 876 | .button-glow { 877 | -webkit-animation-duration: 3s; 878 | animation-duration: 3s; 879 | -webkit-animation-iteration-count: infinite; 880 | animation-iteration-count: infinite; 881 | -webkit-animation-name: glowing; 882 | animation-name: glowing; 883 | &:active, &.active, &.is-active { 884 | -webkit-animation-name: none; 885 | animation-name: none; 886 | } 887 | /* 888 | * Glowing Button Colors 889 | * 890 | * Create colors for glowing buttons 891 | */ 892 | &.button-primary { 893 | -webkit-animation-name: glowing-primary; 894 | animation-name: glowing-primary; 895 | } 896 | &.button-plain { 897 | -webkit-animation-name: glowing-plain; 898 | animation-name: glowing-plain; 899 | } 900 | &.button-inverse { 901 | -webkit-animation-name: glowing-inverse; 902 | animation-name: glowing-inverse; 903 | } 904 | &.button-action { 905 | -webkit-animation-name: glowing-action; 906 | animation-name: glowing-action; 907 | } 908 | &.button-highlight { 909 | -webkit-animation-name: glowing-highlight; 910 | animation-name: glowing-highlight; 911 | } 912 | &.button-caution { 913 | -webkit-animation-name: glowing-caution; 914 | animation-name: glowing-caution; 915 | } 916 | &.button-royal { 917 | -webkit-animation-name: glowing-royal; 918 | animation-name: glowing-royal; 919 | } 920 | } 921 | } 922 | if(hexo-config('buttons.dropdown')){ 923 | /* 924 | * Dropdown menu buttons 925 | * 926 | * A dropdown menu appears 927 | * when a button is pressed 928 | */ 929 | /* 930 | * Dropdown Container 931 | * 932 | */ 933 | .button-dropdown { 934 | position: relative; 935 | overflow: visible; 936 | display: inline-block; 937 | /* 938 | * Dropdown Colors 939 | * 940 | * Create colors for buttons 941 | * (.button-primary, .button-secondary, etc.) 942 | */ 943 | &.button-dropdown-primary .button-dropdown-list { 944 | background: rgba(27, 154, 247, 0.95); 945 | border-color: #0880d7; 946 | .button-dropdown-divider {border-color: #0888e6;} 947 | > li > a { 948 | color: #FFF; 949 | &:hover { 950 | color: #f2f2f2; 951 | background: #088ef0; 952 | } 953 | } 954 | } 955 | &.button-dropdown-plain .button-dropdown-list { 956 | background: rgba(255, 255, 255, 0.95); 957 | border-color: #e6e6e6; 958 | .button-dropdown-divider {border-color: #ededed;} 959 | > li > a { 960 | color: #1B9AF7; 961 | &:hover { 962 | color: #088ef0; 963 | background: #f2f2f2; 964 | } 965 | } 966 | } 967 | &.button-dropdown-inverse .button-dropdown-list { 968 | background: rgba(34, 34, 34, 0.95); 969 | border-color: #090909; 970 | .button-dropdown-divider {border-color: #101010;} 971 | > li > a { 972 | color: #EEE; 973 | &:hover { 974 | color: #e1e1e1; 975 | background: #151515; 976 | } 977 | } 978 | } 979 | &.button-dropdown-action .button-dropdown-list { 980 | background: rgba(165, 222, 55, 0.95); 981 | border-color: #8bc220; 982 | .button-dropdown-divider {border-color: #94cf22;} 983 | > li > a { 984 | color: #FFF; 985 | &:hover { 986 | color: #f2f2f2; 987 | background: #9ad824; 988 | } 989 | } 990 | } 991 | &.button-dropdown-highlight .button-dropdown-list { 992 | background: rgba(254, 174, 27, 0.95); 993 | border-color: #e59501; 994 | .button-dropdown-divider {border-color: #f49f01;} 995 | > li > a { 996 | color: #FFF; 997 | &:hover { 998 | color: #f2f2f2; 999 | background: #fea502; 1000 | } 1001 | } 1002 | } 1003 | &.button-dropdown-caution .button-dropdown-list { 1004 | background: rgba(255, 67, 81, 0.95); 1005 | border-color: #ff1022; 1006 | .button-dropdown-divider {border-color: #ff1f30;} 1007 | > li > a { 1008 | color: #FFF; 1009 | &:hover { 1010 | color: #f2f2f2; 1011 | background: #ff2939; 1012 | } 1013 | } 1014 | } 1015 | &.button-dropdown-royal .button-dropdown-list { 1016 | background: rgba(123, 114, 233, 0.95); 1017 | border-color: #5246e2; 1018 | .button-dropdown-divider {border-color: #5e53e4;} 1019 | > li > a { 1020 | color: #FFF; 1021 | &:hover { 1022 | color: #f2f2f2; 1023 | background: #665ce6; 1024 | } 1025 | } 1026 | } 1027 | } 1028 | 1029 | /* 1030 | * Dropdown List Style 1031 | * 1032 | */ 1033 | .button-dropdown-list { 1034 | display: none; 1035 | position: absolute; 1036 | padding: 0; 1037 | margin: 0; 1038 | top: 0; 1039 | left: 0; 1040 | z-index: 1000; 1041 | min-width: 100%; 1042 | list-style-type: none; 1043 | background: rgba(255, 255, 255, 0.95); 1044 | border-style: solid; 1045 | border-width: 1px; 1046 | border-color: #d4d4d4; 1047 | font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 1048 | -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); 1049 | box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); 1050 | border-radius: 3px; 1051 | -webkit-box-sizing: border-box; 1052 | -moz-box-sizing: border-box; 1053 | box-sizing: border-box; 1054 | /* 1055 | * Dropdown Below 1056 | * 1057 | */ 1058 | &.is-below { 1059 | top: 100%; 1060 | border-top: none; 1061 | border-radius: 0 0 3px 3px; 1062 | } 1063 | /* 1064 | * Dropdown Above 1065 | * 1066 | */ 1067 | &.is-above { 1068 | bottom: 100%; 1069 | top: auto; 1070 | border-bottom: none; 1071 | border-radius: 3px 3px 0 0; 1072 | -webkit-box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); 1073 | box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); 1074 | } 1075 | /* 1076 | * Dropdown Buttons 1077 | * 1078 | */ 1079 | > li { 1080 | padding: 0; 1081 | margin: 0; 1082 | display: block; 1083 | > a { 1084 | display: block; 1085 | line-height: 40px; 1086 | font-size: 12.8px; 1087 | padding: 5px 10px; 1088 | float: none; 1089 | color: #666; 1090 | text-decoration: none; 1091 | &:hover { 1092 | color: #5e5e5e; 1093 | background: #f6f6f6; 1094 | text-decoration: none; 1095 | } 1096 | } 1097 | } 1098 | } 1099 | 1100 | .button-dropdown-divider {border-top: 1px solid #e6e6e6;} 1101 | } 1102 | if(hexo-config('buttons.group')){ 1103 | /* 1104 | * Buton Groups 1105 | * 1106 | * A group of related buttons 1107 | * displayed edge to edge 1108 | */ 1109 | .button-group { 1110 | position: relative; 1111 | display: inline-block; 1112 | &:after { 1113 | content: " "; 1114 | display: block; 1115 | clear: both; 1116 | } 1117 | .button, .button-dropdown { 1118 | float: left; 1119 | &:not(:first-child):not(:last-child) { 1120 | border-radius: 0; 1121 | border-right: none; 1122 | } 1123 | &:first-child { 1124 | border-top-right-radius: 0; 1125 | border-bottom-right-radius: 0; 1126 | border-right: none; 1127 | } 1128 | &:last-child { 1129 | border-top-left-radius: 0; 1130 | border-bottom-left-radius: 0; 1131 | } 1132 | } 1133 | } 1134 | } 1135 | if(hexo-config('buttons.wrapper')){ 1136 | /* 1137 | * Button Wrapper 1138 | * 1139 | * A wrap around effect to highlight 1140 | * the shape of the button and offer 1141 | * a subtle visual effect. 1142 | */ 1143 | .button-wrap { 1144 | border: 1px solid #e3e3e3; 1145 | display: inline-block; 1146 | padding: 9px; 1147 | background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#FFF)); 1148 | background: linear-gradient(#f2f2f2, #FFF); 1149 | border-radius: 200px; 1150 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); 1151 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); 1152 | } 1153 | } 1154 | if(hexo-config('buttons.shadow')){ 1155 | /* 1156 | * Long Shadow Buttons 1157 | * 1158 | * A visual effect adding a flat shadow to the text of a button 1159 | */ 1160 | /* 1161 | * Long Shadow Function 1162 | * 1163 | * Loops $length times building a long shadow. Defaults downward right 1164 | */ 1165 | /* 1166 | * LONG SHADOW MIXIN 1167 | * 1168 | */ 1169 | /* 1170 | * Shadow Right 1171 | * 1172 | */ 1173 | shadow_generator($nums, $color, $direct){ 1174 | $res = ''; 1175 | for i,index in $nums{ 1176 | $temp = s('%spx %spx %s',$direct * i,i,$color); 1177 | $res += index ? ', ' + $temp: $temp; 1178 | } 1179 | return unquote($res); 1180 | } 1181 | 1182 | .button-longshadow, .button-longshadow-right { 1183 | overflow: hidden; 1184 | &.button-primary { 1185 | text-shadow: shadow_generator(0..85,#0880d7,1); 1186 | &:active, &.active, &.is-active { 1187 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1188 | } 1189 | } 1190 | &.button-plain { 1191 | text-shadow: shadow_generator(0..85,#e6e6e6,1); 1192 | &:active, &.active, &.is-active { 1193 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1194 | } 1195 | } 1196 | &.button-inverse { 1197 | text-shadow: shadow_generator(0..85,#090909,1); 1198 | &:active, &.active, &.is-active { 1199 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1200 | } 1201 | } 1202 | &.button-action { 1203 | text-shadow: shadow_generator(0..85,#8bc220,1); 1204 | &:active, &.active, &.is-active { 1205 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1206 | } 1207 | } 1208 | &.button-highlight { 1209 | text-shadow: shadow_generator(0..85,#e59501,1); 1210 | &:active, &.active, &.is-active { 1211 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1212 | } 1213 | } 1214 | &.button-caution { 1215 | text-shadow: shadow_generator(0..85,#ff1022,1); 1216 | &:active, &.active, &.is-active { 1217 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1218 | } 1219 | } 1220 | &.button-royal { 1221 | text-shadow: shadow_generator(0..85,#5246e2,1); 1222 | &:active, &.active, &.is-active { 1223 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1224 | } 1225 | } 1226 | } 1227 | 1228 | /* 1229 | * Shadow Left 1230 | * 1231 | */ 1232 | .button-longshadow-left { 1233 | overflow: hidden; 1234 | &.button-primary { 1235 | text-shadow: shadow_generator(0..85,#0880d7,-1); 1236 | &:active, &.active, &.is-active { 1237 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1238 | } 1239 | } 1240 | &.button-plain { 1241 | text-shadow: shadow_generator(0..85,#e6e6e6,-1); 1242 | &:active, &.active, &.is-active { 1243 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1244 | } 1245 | } 1246 | &.button-inverse { 1247 | text-shadow: shadow_generator(0..85,#090909,-1); 1248 | &:active, &.active, &.is-active { 1249 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1250 | } 1251 | } 1252 | &.button-action { 1253 | text-shadow: shadow_generator(0..85,#8bc220,-1); 1254 | &:active, &.active, &.is-active { 1255 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1256 | } 1257 | } 1258 | &.button-highlight { 1259 | text-shadow: shadow_generator(0..85,#e59501,-1); 1260 | &:active, &.active, &.is-active { 1261 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1262 | } 1263 | } 1264 | &.button-caution { 1265 | text-shadow: shadow_generator(0..85,#ff1022,-1); 1266 | &:active, &.active, &.is-active { 1267 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1268 | } 1269 | } 1270 | &.button-royal { 1271 | text-shadow: shadow_generator(0..85,#5246e2,-1); 1272 | &:active, &.active, &.is-active { 1273 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1274 | } 1275 | } 1276 | } 1277 | } 1278 | } 1279 | -------------------------------------------------------------------------------- /source/css/_page/page.styl: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: 0 auto; 3 | width: 80%; 4 | position: relative; 5 | #content & { padding: 40px 0; } 6 | } 7 | 8 | #primary { 9 | float: left; 10 | width: 70%; 11 | min-height: 25pc; 12 | } 13 | 14 | body.post #primary { 15 | float: none; 16 | width: auto; 17 | &.has-toc { 18 | float: left; 19 | width: 75%; 20 | } 21 | } 22 | 23 | .post-content { 24 | margin: 0 0 12px; 25 | line-height: 1.8em; 26 | word-break: normal; 27 | small { 28 | padding-top: 20px; 29 | font-weight: 700; 30 | font-size: 13px; 31 | line-height: 1.2em; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /source/css/_page/pagination.styl: -------------------------------------------------------------------------------- 1 | /* Style from http://codepen.io/eksch/full/jPPPPp/ */ 2 | 3 | #pagenavi { 4 | font-size: 14px; 5 | text-align: center; 6 | position: absolute; 7 | bottom: 1.5%; 8 | width: 100%; 9 | margin: 0 auto; 10 | a { 11 | color: #555; 12 | &:hover {text-decoration: none;} 13 | } 14 | .page-number, .space { 15 | display: inline-block; 16 | line-height: 25px; 17 | height: 40px; 18 | width: 40px; 19 | padding: 0; 20 | margin: 0; 21 | box-shadow: inset 0px -2px 0px 0px #bbb; 22 | &:hover {box-shadow: inset 0px -4px 0px 0px #bbb;} 23 | &:focus { 24 | border: 1.5px solid #bbb; 25 | border-radius: 3px; 26 | } 27 | } 28 | .current { 29 | box-shadow: inset 0px -4px 0px 0px $color-theme; 30 | color: $color-theme; 31 | font-weight: bold; 32 | &:hover { 33 | box-shadow: inset 0px -4px 0px 0px $color-theme; 34 | cursor: default; 35 | } 36 | } 37 | .space { 38 | box-shadow: inset 0px -2px 0px 0px #e6e6e6; 39 | &:hover { 40 | box-shadow: inset 0px -2px 0px 0px #e6e6e6; 41 | cursor: default; 42 | } 43 | } 44 | .extend { 45 | margin: 15px; 46 | &.next:after { 47 | font-family: "FontAwesome"; 48 | content: "\f101"; // fa-angle-double-right 49 | padding-left: 0.3em; 50 | } 51 | &.prev:before { 52 | font-family: "FontAwesome"; 53 | content: "\f100"; // fa-angle-double-left 54 | padding-right: 0.3em; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /source/css/_page/sns.styl: -------------------------------------------------------------------------------- 1 | .sns { 2 | padding: 6px 1pc 6px 10px; 3 | background: #f5f5f5; 4 | color: #666; 5 | &:hover { 6 | background-color: #5895be; 7 | color: #fff; 8 | text-decoration: none; 9 | } 10 | &:before {margin-right: 0.5 em;} 11 | span {padding-right: 5px;} 12 | } 13 | -------------------------------------------------------------------------------- /source/css/_page/tooltip.styl: -------------------------------------------------------------------------------- 1 | .tooltipped { 2 | position: relative; 3 | &:after { 4 | position: absolute; 5 | z-index: 1000000; 6 | display: none; 7 | max-width: 280px; 8 | padding: 5px 10px; 9 | font: normal normal 13px/1.5 $TooltipFont; 10 | color: #fff; 11 | text-align: center; 12 | text-decoration: none; 13 | text-shadow: none; 14 | text-transform: none; 15 | letter-spacing: normal; 16 | word-wrap: break-word; 17 | white-space: pre; 18 | pointer-events: none; 19 | content: attr(aria-label); 20 | background: rgba(0, 0, 0, 0.8); 21 | border-radius: 3px; 22 | opacity: 0; 23 | } 24 | &:before { 25 | position: absolute; 26 | z-index: 1000001; 27 | display: none; 28 | width: 0; 29 | height: 0; 30 | color: rgba(0, 0, 0, 0.8); 31 | pointer-events: none; 32 | content: ""; 33 | border: 5px solid transparent; 34 | opacity: 0; 35 | } 36 | &:hover, &:active, &:focus { 37 | &:before, &:after { 38 | display: inline-block; 39 | text-decoration: none; 40 | opacity: 1; 41 | } 42 | } 43 | } 44 | 45 | .tooltipped-multiline { 46 | &:hover, &:active, &:focus { 47 | &:after {display: table-cell;} 48 | } 49 | &:after { 50 | width: -webkit-max-content; 51 | width: -moz-max-content; 52 | width: max-content; 53 | max-width: 250px; 54 | word-break: break-word; 55 | word-wrap: normal; 56 | white-space: pre-line; 57 | border-collapse: separate; 58 | } 59 | &.tooltipped-s:after, &.tooltipped-n:after { 60 | right: auto; 61 | left: 50%; 62 | -webkit-transform: translateX(-50%); 63 | -ms-transform: translateX(-50%); 64 | transform: translateX(-50%); 65 | } 66 | &.tooltipped-w:after, &.tooltipped-e:after {right: 100%;} 67 | } 68 | 69 | .tooltipped-s, .tooltipped-se, .tooltipped-sw { 70 | &:after { 71 | top: 100%; 72 | right: 50%; 73 | margin-top: 5px; 74 | } 75 | &:before { 76 | top: auto; 77 | right: 50%; 78 | bottom: -5px; 79 | margin-right: -5px; 80 | border-bottom-color: rgba(0, 0, 0, 0.8); 81 | } 82 | } 83 | 84 | .tooltipped-n, .tooltipped-ne, .tooltipped-nw { 85 | &:after { 86 | right: 50%; 87 | bottom: 100%; 88 | margin-bottom: 5px; 89 | } 90 | &:before { 91 | top: -5px; 92 | right: 50%; 93 | bottom: auto; 94 | margin-right: -5px; 95 | border-top-color: rgba(0, 0, 0, 0.8); 96 | } 97 | } 98 | 99 | .tooltipped-se, .tooltipped-ne { 100 | &:after { 101 | right: auto; 102 | left: 50%; 103 | margin-left: -15px; 104 | } 105 | } 106 | 107 | .tooltipped-sw:after, .tooltipped-nw:after {margin-right: -15px;} 108 | 109 | .tooltipped-s:after, .tooltipped-n:after { 110 | -webkit-transform: translateX(50%); 111 | -ms-transform: translateX(50%); 112 | transform: translateX(50%); 113 | } 114 | 115 | .tooltipped-w { 116 | &:after { 117 | right: 100%; 118 | bottom: 50%; 119 | margin-right: 5px; 120 | -webkit-transform: translateY(50%); 121 | -ms-transform: translateY(50%); 122 | transform: translateY(50%); 123 | } 124 | &:before { 125 | top: 50%; 126 | bottom: 50%; 127 | left: -5px; 128 | margin-top: -5px; 129 | border-left-color: rgba(0, 0, 0, 0.8); 130 | } 131 | } 132 | 133 | .tooltipped-e { 134 | &:after { 135 | left: 100%; 136 | bottom: 50%; 137 | margin-left: 5px; 138 | -webkit-transform: translateY(50%); 139 | -ms-transform: translateY(50%); 140 | transform: translateY(50%); 141 | } 142 | &:before { 143 | top: 50%; 144 | bottom: 50%; 145 | right: -5px; 146 | margin-top: -5px; 147 | border-right-color: rgba(0, 0, 0, 0.8); 148 | } 149 | } 150 | 151 | .tooltipped-sticky { 152 | &:before, &:after {display: inline-block;} 153 | &.tooltipped-multiline:after {display: table-cell;} 154 | } 155 | -------------------------------------------------------------------------------- /source/css/_pages/404.styl: -------------------------------------------------------------------------------- 1 | .not-found { 2 | text-align: center; 3 | #wrapper { 4 | padding-bottom: 32px; 5 | margin-bottom: 32px; 6 | } 7 | #count-down { 8 | margin-top: 1em; 9 | font-weight: 400; 10 | font-size: 1.5em; 11 | margin-left: auto; 12 | margin-right: auto; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /source/css/_pages/archive.styl: -------------------------------------------------------------------------------- 1 | body.archive .post-content { 2 | float: right; 3 | width: 90%; // origin: 550px 4 | .archive-time { 5 | display: block; 6 | margin: 20px 0; 7 | padding: 5px 0; 8 | border-bottom: 1px solid #ededed; 9 | color: #666; 10 | font-size: 14px; 11 | padding-bottom: 10px; 12 | &:after {content: none;} 13 | } 14 | } 15 | 16 | #archives h3 {padding-bottom: 10px;} 17 | 18 | .brick { 19 | margin-bottom: 10px; 20 | position: relative; 21 | display: block; 22 | padding: 10px; 23 | background-color: #f9f9f9; 24 | font-style: normal; 25 | line-height: 18px; 26 | .time { 27 | color: #888; 28 | padding-right: 10px; 29 | } 30 | a { 31 | color: #333; 32 | &:hover {text-decoration: underline;} 33 | } 34 | em { 35 | color: #aaa; 36 | padding-left: 10px; 37 | } 38 | } 39 | 40 | #archive-nav { 41 | float: left; 42 | left: 7%; 43 | width: 45px; 44 | display: block; 45 | position: fixed; 46 | background: #f9f9f9; 47 | text-align: center; 48 | top: 115px; // 60px + #header.height 49 | list-style: none; 50 | ol, li, ul {list-style: none;} 51 | a:hover {text-decoration: none;} 52 | } 53 | 54 | .archive-title { 55 | padding-bottom: 10px; // original: 40px; 56 | } 57 | 58 | .months {display: none;} 59 | 60 | .year { 61 | border-top: 1px solid #ddd; 62 | &.active .months {display: block;} 63 | } 64 | 65 | .month { 66 | padding: 5px; 67 | background-color: #f9f9f9; 68 | &.active, &:hover {background: #f2f2f2;} 69 | } 70 | 71 | .year-anchor { 72 | display: block; 73 | padding: 5px; 74 | text-decoration: none; 75 | background-color: #eee; 76 | color: #333; 77 | font-weight: bold; 78 | } 79 | 80 | .month-anchor { 81 | color: #777; 82 | } 83 | -------------------------------------------------------------------------------- /source/css/_post/blockquote.styl: -------------------------------------------------------------------------------- 1 | blockquote { 2 | display: block; 3 | background: #fff; 4 | padding: 15px 20px 15px 45px; 5 | margin: 0 0 20px; 6 | position: relative; 7 | overflow: hidden; 8 | font: 16px/1.2em $SerifFont; 9 | color: #666; 10 | border-left: 15px solid $color-theme; 11 | border-right: 2px solid $color-theme; 12 | -webkit-text-size-adjust: 100%; 13 | -webkit-box-shadow: 2px 2px 15px #ccc; 14 | -moz-box-shadow: 2px 2px 15px #ccc; 15 | box-shadow: 2px 2px 15px #ccc; 16 | &:before { 17 | content: "\201c"; /*Unicode for Left Double Quote*/ 18 | font: bold 60px $SerifFont; 19 | color: #999; 20 | position: absolute; 21 | left: 10px; 22 | top:5px; 23 | } 24 | &:after { 25 | /*Reset to make sure*/ 26 | content: ""; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /source/css/_post/breadcrumb.styl: -------------------------------------------------------------------------------- 1 | .breadcrumb-navigation { 2 | margin-bottom: 20px; 3 | font-size: 12px; 4 | color: #999; 5 | a { 6 | color: #777; 7 | text-decoration: underline; 8 | } 9 | .breadcrumb-arrow { 10 | color: #aaa; 11 | margin: 0 2px; 12 | } 13 | .text {padding-left: 10px;} 14 | } 15 | -------------------------------------------------------------------------------- /source/css/_post/footnote.styl: -------------------------------------------------------------------------------- 1 | .footnotes-sep, .footnotes {display: none;} 2 | 3 | /* Style from https://github.com/codrops/TooltipStylesInspiration */ 4 | .footnote-ref { 5 | vertical-align: super; 6 | font-size: smaller; 7 | display: inline; 8 | position: relative; 9 | &.active { 10 | a:after { pointer-events: auto;} 11 | .fn-content { 12 | pointer-events: auto; 13 | opacity: 1; 14 | -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0); 15 | transform: translate3d(0,0,0) rotate3d(0,0,0,0); 16 | } 17 | } 18 | > a { 19 | cursor: pointer; 20 | display: inline-block; 21 | font-weight: 700; 22 | &:after { 23 | content: ''; 24 | position: absolute; 25 | width: 360px; 26 | height: 20px; 27 | bottom: 100%; 28 | left: 50%; 29 | pointer-events: none; 30 | -webkit-transform: translateX(-50%); 31 | transform: translateX(-50%); 32 | } 33 | } 34 | } 35 | 36 | .fn-content { 37 | position: absolute; 38 | display: inline-block; 39 | z-index: 14; 40 | left: 50%; 41 | margin: 0 0 20px; 42 | bottom: 100%; 43 | line-height: 1.4; 44 | box-shadow: -5px -5px 15px rgba(48,54,61,0.2); 45 | border-radius: 0.5em; 46 | background: #2a3035; 47 | opacity: 0; 48 | pointer-events: none; 49 | -webkit-transform: translate3d(0,-10px,0); 50 | transform: translate3d(0,-10px,0); 51 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 52 | transition: opacity 0.3s, transform 0.3s; 53 | /* Arrow */ 54 | &:after { 55 | content: ''; 56 | top: 100%; 57 | left: 50%; 58 | border: solid transparent; 59 | height: 0; 60 | width: 0; 61 | position: absolute; 62 | pointer-events: none; 63 | border-color: transparent; 64 | border-top-color: #2a3035; 65 | border-width: 10px; 66 | margin-left: -10px; 67 | } 68 | .fn-text { 69 | line-height: 1.35; 70 | display: inline-block; 71 | padding: 1.31em 1.21em 0; 72 | font-size: 14.5px; 73 | color: #fff; 74 | z-index: 8; 75 | a {font-weight: bold;}/* 76 | p {margin-bottom: 0;}*/ 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /source/css/_post/highlight.styl: -------------------------------------------------------------------------------- 1 | pre, .highlight { 2 | background-color: $highlight-background; 3 | margin: 20px 0; 4 | padding: 15px; 5 | overflow-x: auto; 6 | font-size: 16px; 7 | color: $highlight-foreground; 8 | line-height: 1.6em; 9 | } 10 | 11 | pre, code {font-family: $CodeFont;} 12 | 13 | code { 14 | display: inline; 15 | margin: 0 5px; 16 | padding: 1px 5px; 17 | border: 1px solid #ccc; 18 | word-break: keep-all; 19 | background-color: #eee; 20 | /* text-shadow: 0 1px #fff; */ 21 | } 22 | 23 | pre code { 24 | border: none; 25 | background: none; 26 | text-shadow: none; 27 | padding: 0 0.3em; 28 | } 29 | 30 | .highlight { 31 | border-radius: 10px; 32 | border: 3px solid #eee; 33 | pre { 34 | border: none; 35 | margin: 0; 36 | padding: 1px; 37 | } 38 | table { 39 | margin: 0; 40 | width: auto; 41 | border: none; 42 | } 43 | td { 44 | border: none; 45 | padding: 0; 46 | } 47 | figcaption{ 48 | &:before, &:after { 49 | content: " "; 50 | display: table; 51 | } 52 | &:after { clear: both; } 53 | font-size: 0.85em; 54 | color: $highlight-comment; 55 | line-height: 1em; 56 | margin-bottom: 1em; 57 | a {float: right;} 58 | } 59 | .gutter pre { 60 | color: #666; 61 | text-align: right; 62 | padding-right: 20px; 63 | } 64 | .line { 65 | height: 16px * 1.6em; 66 | &.marked {color: $highlight-blue;} 67 | } 68 | .comment {color: $highlight-comment;} 69 | .variable, .template-variable, .tag, .name, .regexp, .deletion, .selector-id, .selector-class {color: $highlight-red;} 70 | .number, .preprocessor, .built_in, .builtin-name, .literal, .params, .constant, .command, .meta, .link, .type, .selector-pseudo, .doctype, .meta-keyword, .meta-string {color: $highlight-orange;} 71 | .string, .symbol, .special, .number, .formula, .bullet, .addition {color: $highlight-green;} 72 | .attribute, .attr, .quote {color: $highlight-yellow;} 73 | .title, .function {color: $highlight-aqua;} 74 | .section, .selector-attr, .template-tag {color: $highlight-blue;} 75 | .keyword, .selector-tag {color: $highlight-purple;} 76 | .emphasis {font-style: italic;} 77 | .strong {font-weight: bold;} 78 | .subst {color: black;} 79 | } 80 | -------------------------------------------------------------------------------- /source/css/_post/license.styl: -------------------------------------------------------------------------------- 1 | .license-notice { 2 | margin-top: 1.5em; 3 | } 4 | -------------------------------------------------------------------------------- /source/css/_post/pager.styl: -------------------------------------------------------------------------------- 1 | #pager { 2 | padding: 0 !important; 3 | margin: 20px 0; 4 | text-align: center; 5 | list-style: none; 6 | clear: both; 7 | .previous {float: left;} 8 | .next {float: right;} 9 | .previous, .next { 10 | display: inline; 11 | a { 12 | text-transform: uppercase; 13 | letter-spacing: 1px; 14 | font: 800 13px/1.7em; 15 | padding: 10px; 16 | color: #fff; 17 | border: 2px solid #404040; 18 | border-radius: 3px; 19 | background-color: #404040; 20 | -webkit-transition: all 0.2s ease; 21 | -moz-transition: all 0.2s ease; 22 | transition: all 0.2s ease; 23 | &:hover, &:focus { 24 | text-decoration: none; 25 | color: #404040; 26 | background-color: #fff; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /source/css/_post/post.styl: -------------------------------------------------------------------------------- 1 | $headbase { 2 | position: relative; 3 | margin: 1em 0 0.75em; 4 | padding: 0 0 5px 0; 5 | color: #6B5344; 6 | text-shadow: 0 2px 0 rgba(255,255,255,0.5); 7 | font-weight: normal; 8 | } 9 | 10 | .post-content { 11 | h1, h2, h3, h4 { 12 | i { 13 | padding-right: 10px; 14 | color: #A8D13B; 15 | font-size: 0.8em; 16 | } 17 | } 18 | for n in 2..4 { 19 | h{n}: after { 20 | position: absolute; 21 | content: ""; 22 | height: 1px; 23 | border-radius: 2px; 24 | left: 0; 25 | bottom: 0; 26 | box-shadow: 27 | 0 -1px 0 rgba(0,0,0,0.1), 28 | 0 1px 0 rgba(255,255,255,0.6); 29 | width: 25% * (6 - n); 30 | } 31 | } 32 | h1 { 33 | @extend $headbase; 34 | line-height: 40px; 35 | font-size: 36px; 36 | font-family: 'Carrois Gothic', sans-serif; 37 | } 38 | h2 { 39 | @extend $headbase; 40 | line-height: 40px; 41 | font-size: 30px; 42 | font-family: 'Scada', sans-serif; 43 | } 44 | h3 { 45 | @extend $headbase; 46 | line-height: 40px; 47 | font-size: 24px; 48 | font-family: 'Scada', sans-serif; 49 | } 50 | h4 { 51 | @extend $headbase; 52 | line-height: 20px; 53 | font-size: 18px; 54 | font-family: 'Scada', sans-serif; 55 | } 56 | li {line-height: 1.8em;} 57 | img { 58 | max-width: 100%; 59 | /* centering image */ 60 | display: block; 61 | margin-left: auto; 62 | margin-right: auto; 63 | } 64 | ul { 65 | margin: 0 0 24px 30px; 66 | li { 67 | margin-bottom: 5px; 68 | list-style: square outside none; 69 | line-height: 24px; 70 | ul li {list-style: circle outside none;} 71 | } 72 | } 73 | p { 74 | margin-bottom: 20px; 75 | line-height: 1.8em 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /source/css/_post/preview.styl: -------------------------------------------------------------------------------- 1 | .bookmark {padding-right: 5px;} 2 | 3 | .inline-ul { 4 | font-size: 0; 5 | .inline-li { 6 | vertical-align: top; 7 | word-spacing: normal; 8 | letter-spacing: normal; 9 | font-size: 9pt; 10 | } 11 | } 12 | 13 | .inline-li {display: inline-block;} 14 | 15 | .post { 16 | position: relative; 17 | margin-bottom: 30px; 18 | padding-bottom: 30px; 19 | border-bottom: 1px solid #eee; 20 | &:last-child {border-bottom: none;} 21 | .post-preview hr {display: none;} 22 | } 23 | 24 | .post-has-thumbnail .post-body { 25 | position: relative; 26 | overflow: hidden; 27 | padding-left: 150px; 28 | height: 130px; 29 | p {margin-top: -4px;} 30 | } 31 | 32 | .post-thumbnail { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 130px; 37 | height: 130px; 38 | background: #fafafa; 39 | a { 40 | position: relative; 41 | width: 130px; 42 | height: 130px; 43 | display: block; 44 | &:after { 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | width: 130px; 49 | height: 130px; 50 | content: ''; 51 | border: 1px solid rgba(0, 0, 0, .05); 52 | } 53 | } 54 | } 55 | 56 | .post-title { 57 | min-height: 24px; 58 | font-size: 18px; 59 | line-height: 1.33333; 60 | a {color: #444;} 61 | } 62 | 63 | .post-sticky { 64 | border: 1px solid #5895be; 65 | color: #5895be; 66 | font-size: 10px; 67 | padding: 2px 4px; 68 | margin-left: 5px; 69 | } 70 | 71 | .post-span { 72 | padding: 0 5px; 73 | color: #bbb; 74 | } 75 | 76 | .post-meta { 77 | padding-bottom: 20px; 78 | .inline-ul {display: block;} 79 | .inline-li {font-size: 9pt;} 80 | & , a {color: #777;} 81 | } 82 | 83 | #more { 84 | margin: 2.4em auto; 85 | background: #d9d9d9; 86 | width: 100%; 87 | height: 1px; 88 | display: inline-block; 89 | } 90 | -------------------------------------------------------------------------------- /source/css/_post/table.styl: -------------------------------------------------------------------------------- 1 | .post-content > table { 2 | padding: 0; 3 | margin-top: 15px; 4 | margin-bottom: 15px; 5 | box-shadow: 0 1px 3px rgba(0,0,0,0.2); 6 | overflow-x: auto; 7 | tr { 8 | background-color: #f6f6f6; 9 | &:nth-of-type(odd) { 10 | background-color: #e9e9e9; 11 | } 12 | th { 13 | font-weight: bold; 14 | color: #fff; 15 | background-color: $color-theme; 16 | border-left: 1px solid #fff; 17 | &:first-child { 18 | border-left: none; 19 | } 20 | } 21 | td { 22 | border-left: 1px solid #cccccc; 23 | &:first-child { 24 | border-left: none; 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /source/css/_post/tags.styl: -------------------------------------------------------------------------------- 1 | .post-tags { 2 | margin-top: 10px; 3 | padding: 15px 0; 4 | border-top: 1px solid #eee; 5 | a { 6 | margin: 0 10px 10px 0; 7 | padding: 5px 10px; 8 | font-size: 13px; 9 | background: #fafafa; 10 | display: inline-block; 11 | color: #333; 12 | &:before { 13 | display: inline-block; 14 | font-family: FontAwesome; 15 | content: "\f02b"; 16 | margin-right: 0.25em; 17 | text-rendering: auto; 18 | -webkit-font-smoothing: antialiased; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /source/css/_post/toc.styl: -------------------------------------------------------------------------------- 1 | #toc { 2 | position: fixed; 3 | right: 5%; 4 | width: 20%; 5 | height: 90%; 6 | top: 90px; 7 | } 8 | 9 | for i in (1..6) { 10 | .toc-level-{i} .toc-text {margin-left: i em;} 11 | } 12 | 13 | .toc-text {white-space: nowrap;} 14 | 15 | .toc-link { 16 | color: #999; 17 | display: inline-block; // stretch to parent height 18 | border-left: 1px solid transparent; // avoid "jumping" on hover 19 | &:hover {text-decoration: none;} 20 | } 21 | 22 | .toc { 23 | padding: 0; 24 | margin: 0; 25 | line-height: 1.8em; 26 | overflow-y: auto; 27 | overflow-x: hidden; 28 | width: 100%; 29 | height: 100%; 30 | } 31 | 32 | .toc-child { 33 | margin-left: 0; 34 | padding-left: 0; 35 | if(hexo-config('toc.collapse')) {display: none;} 36 | } 37 | 38 | .toc-item { 39 | list-style-type: none; 40 | &:hover > .toc-link {border-left: 1px solid $color-theme;} 41 | &.active { 42 | > .toc-link { 43 | color: $color-theme; 44 | border-left: 2px solid $color-theme; 45 | } 46 | if(hexo-config('toc.collapse')) { .toc-child {display: block;} } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /source/css/_responsive.styl: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 768px) { 2 | 3 | body {font-size: 1pc;} 4 | 5 | .container { 6 | padding-right: 15px; 7 | padding-left: 15px; 8 | width: auto; 9 | #header & { 10 | position: relative; 11 | height: auto; 12 | padding: 10px 0; 13 | margin-left: 0px; 14 | } 15 | #footer & { 16 | padding: 10px 15px; 17 | font-size: 13px; 18 | line-height: 1.6em; 19 | } 20 | } 21 | 22 | #primary, body.post #primary { 23 | &, &.has-toc { 24 | float: none; 25 | width: auto; 26 | } 27 | } 28 | 29 | #header { 30 | padding: 0; 31 | /*position: fixed; 32 | width: 100%; 33 | left: 0; 34 | top: 0; 35 | background: #fff;*/ 36 | } 37 | 38 | .logo { 39 | float: none; 40 | margin-left: 15px; 41 | } 42 | 43 | #global-nav { 44 | float: right; 45 | overflow: hidden; 46 | height: 0; 47 | &:before { 48 | position: absolute; 49 | text-align: center; 50 | width: 50px; 51 | height: 50px; 52 | top: 0; 53 | right: 0; 54 | display: inline-block; 55 | font: 20px/50px FontAwesome; 56 | text-rendering: auto; 57 | -webkit-font-smoothing: antialiased; 58 | -moz-osx-font-smoothing: grayscale; 59 | content: "\f0c9"; /* fa-bars */ 60 | } 61 | &.collapse { 62 | border: none; 63 | background: white; 64 | box-shadow: rgba(0, 0, 0, 0.2) 0 1px 4px; 65 | border-radius: 2px; 66 | width: 130px; 67 | height: auto; 68 | margin-right: 15px; 69 | } 70 | } 71 | 72 | #dropdown {display: none;} 73 | 74 | .gna {line-height: 28px;} 75 | 76 | .gnli { 77 | display: block; 78 | width: 100%; 79 | margin-right: 15px; 80 | margin-left: 15px; 81 | } 82 | 83 | .post {border-bottom-color: #f5f5f5;} 84 | 85 | .post-content img { 86 | width: 100%; 87 | height: auto; 88 | } 89 | 90 | .post-has-thumbnail .post-body { 91 | padding-left: 105px; 92 | height: 85px; 93 | } 94 | 95 | .post-thumbnail { 96 | &, & a, & a:after, & img { 97 | width: 85px; 98 | height: 85px; 99 | } 100 | } 101 | 102 | .pager li { 103 | > a, > span {font-size: 14px;} 104 | } 105 | 106 | #pagenavi { 107 | padding-bottom: 30px; 108 | position: relative; 109 | .page-number, .space {font-size: 18px;} 110 | } 111 | 112 | .breadcrumb-navigation {margin-bottom: 10px;} 113 | 114 | #archive-nav, #sidebar, #toc, #search-form {display: none;} 115 | 116 | #notice { 117 | box-shadow: none; 118 | margin: 15px 0; 119 | font-size: 15px; 120 | padding-left: 10px; 121 | padding-right: 10px; 122 | } 123 | 124 | body.archive .post-content {width: 100%;} 125 | } 126 | 127 | @media screen and (min-width: 0/0) { 128 | .tooltipped-multiline:after {width: 250px;} 129 | } 130 | 131 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 132 | .inline-ul { 133 | letter-spacing: -5px; 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /source/css/_sidebar/index.styl: -------------------------------------------------------------------------------- 1 | @import 'sidebar' 2 | @import 'recent-comments' 3 | -------------------------------------------------------------------------------- /source/css/_sidebar/recent-comments.styl: -------------------------------------------------------------------------------- 1 | #recent-comments .comment-meta > a {color: #999;} 2 | -------------------------------------------------------------------------------- /source/css/_sidebar/sidebar.styl: -------------------------------------------------------------------------------- 1 | #sidebar { 2 | float: right; 3 | padding-left: 40px; 4 | width: 30%; 5 | &.fixed { 6 | position: fixed; 7 | top: 20px; 8 | } 9 | } 10 | 11 | .widget { 12 | margin-bottom: 20px; 13 | word-wrap: break-word; 14 | -webkit-hyphens: auto; 15 | -moz-hyphens: auto; 16 | hyphens: auto; 17 | .avatar { 18 | border-radius: 50%; 19 | vertical-align: middle; 20 | } 21 | span {color: #aaa;} 22 | ul { 23 | padding: 10px 0; 24 | &.list { 25 | padding: 10px 0 10px 15px; 26 | li {list-style: square;} 27 | } 28 | } 29 | a {color: #666;} 30 | li, p {font: 13px/1.8em;} 31 | p {color: #999;} 32 | } 33 | 34 | .widget-title { 35 | color: #636363; 36 | text-transform: uppercase; 37 | font-size: 15px; 38 | } 39 | 40 | #friend-links ul li { 41 | display: inline-block; 42 | margin-right: 10px; 43 | margin-bottom: 5px; 44 | zoom: 1; 45 | } 46 | -------------------------------------------------------------------------------- /source/css/style.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Kunkka 3 | Version: 1.0.6 4 | Author: MuFeng 5 | Author URI: http://mufeng.me 6 | Description: 主题问题或建议可以联系, QQ群: 205883766, 邮箱: mufeng.me@gmail.com 7 | */ 8 | /* 以上是原作者说的，和我没关系 */ 9 | 10 | @require '_env/*' 11 | @require '_base' 12 | 13 | @require '_nav/*' 14 | @require '_footer/*' 15 | @require '_sidebar/*' 16 | @require '_addon/*' 17 | 18 | @require '_post/*' 19 | @require '_page/*' 20 | @require '_pages/*' 21 | 22 | @require '_responsive' 23 | -------------------------------------------------------------------------------- /source/js/buttons.js: -------------------------------------------------------------------------------- 1 | /*! @license 2 | * Project: Buttons 3 | * Description: A highly customizable CSS button library built with Sass and Compass 4 | * Author: Alex Wolfe and Rob Levin 5 | * License: Apache License v2.0 6 | */ 7 | 8 | 9 | // the semi-colon before function invocation is a safety net against concatenated 10 | // scripts and/or other plugins which may not be closed properly. 11 | ;(function ( $, window, document, undefined ) { 12 | 'use strict'; 13 | 14 | // undefined is used here as the undefined global variable in ECMAScript 3 is 15 | // mutable (ie. it can be changed by someone else). undefined isn't really being 16 | // passed in so we can ensure the value of it is truly undefined. In ES5, undefined 17 | // can no longer be modified. 18 | 19 | // window and document are passed through as local variable rather than global 20 | // as this (slightly) quickens the resolution process and can be more efficiently 21 | // minified (especially when both are regularly referenced in your plugin). 22 | 23 | // Create the defaults once 24 | var pluginName = "menuButton"; 25 | var menuClass = ".button-dropdown"; 26 | var defaults = { 27 | propertyName: "value" 28 | }; 29 | 30 | // The actual plugin constructor 31 | function Plugin( element, options ) { 32 | 33 | //SET OPTIONS 34 | this.options = $.extend( {}, defaults, options ); 35 | this._defaults = defaults; 36 | this._name = pluginName; 37 | 38 | //REGISTER ELEMENT 39 | this.$element = $(element); 40 | 41 | //INITIALIZE 42 | this.init(); 43 | } 44 | 45 | Plugin.prototype = { 46 | constructor: Plugin, 47 | 48 | init: function() { 49 | // WE DON'T STOP PROPGATION SO CLICKS WILL AUTOMATICALLY 50 | // TOGGLE AND REMOVE THE DROPDOWN 51 | this.toggle(); 52 | }, 53 | 54 | toggle: function(el, options) { 55 | if(this.$element.data('dropdown') === 'show') { 56 | this.hideMenu(); 57 | } 58 | else { 59 | this.showMenu(); 60 | } 61 | }, 62 | 63 | showMenu: function() { 64 | this.$element.data('dropdown', 'show'); 65 | this.$element.find('ul').show(); 66 | this.$element.find('.button:first').addClass('is-active'); 67 | }, 68 | 69 | hideMenu: function() { 70 | this.$element.data('dropdown', 'hide'); 71 | this.$element.find('ul').hide(); 72 | this.$element.find('.button:first').removeClass('is-active'); 73 | } 74 | }; 75 | 76 | // A really lightweight plugin wrapper around the constructor, 77 | // preventing against multiple instantiations 78 | $.fn[pluginName] = function ( options ) { 79 | return this.each(function () { 80 | 81 | // TOGGLE BUTTON IF IT EXISTS 82 | if ($.data(this, "plugin_" + pluginName)) { 83 | $.data(this, "plugin_" + pluginName).toggle(); 84 | } 85 | // OTHERWISE CREATE A NEW INSTANCE 86 | else { 87 | $.data(this, "plugin_" + pluginName, new Plugin( this, options )); 88 | } 89 | }); 90 | }; 91 | 92 | //CLOSE OPEN DROPDOWN MENUS IF CLICKED SOMEWHERE ELSE 93 | $(document).on('click', function(e) { 94 | $.each($('[data-buttons=dropdown]'), function(i, value) { 95 | if ($(e.target.offsetParent)[0] != $(this)[0]) { 96 | if ($.data(this, "plugin_" + pluginName)) { 97 | $.data(this, "plugin_" + pluginName).hideMenu(); 98 | $(this).find('ul').hide(); 99 | } 100 | } 101 | }); 102 | }); 103 | 104 | //DELEGATE CLICK EVENT FOR DROPDOWN MENUS 105 | $(document).on('click', '[data-buttons=dropdown]', function(e) { 106 | var $dropdown = $(e.currentTarget); 107 | $dropdown.menuButton(); 108 | }); 109 | 110 | //IGNORE CLICK EVENTS FROM DISPLAY BUTTON IN DROPDOWN 111 | $(document).on('click', '[data-buttons=dropdown] > a', function(e) { 112 | e.preventDefault(); 113 | }); 114 | 115 | })( jQuery, window, document); 116 | -------------------------------------------------------------------------------- /source/js/github-comment.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * JavaScript Cookie v2.1.3 3 | * https://github.com/js-cookie/js-cookie 4 | * 5 | * Copyright 2006, 2015 Klaus Hartl & Fagner Brack 6 | * Released under the MIT license 7 | */ 8 | ;(function (factory) { 9 | var registeredInModuleLoader = false; 10 | if (typeof define === 'function' && define.amd) { 11 | define(factory); 12 | registeredInModuleLoader = true; 13 | } 14 | if (typeof exports === 'object') { 15 | module.exports = factory(); 16 | registeredInModuleLoader = true; 17 | } 18 | if (!registeredInModuleLoader) { 19 | var OldCookies = window.Cookies; 20 | var api = window.Cookies = factory(); 21 | api.noConflict = function () { 22 | window.Cookies = OldCookies; 23 | return api; 24 | }; 25 | } 26 | }(function () { 27 | function extend () { 28 | var i = 0; 29 | var result = {}; 30 | for (; i < arguments.length; i++) { 31 | var attributes = arguments[ i ]; 32 | for (var key in attributes) { 33 | result[key] = attributes[key]; 34 | } 35 | } 36 | return result; 37 | } 38 | 39 | function init (converter) { 40 | function api (key, value, attributes) { 41 | var result; 42 | if (typeof document === 'undefined') { 43 | return; 44 | } 45 | 46 | // Write 47 | 48 | if (arguments.length > 1) { 49 | attributes = extend({ 50 | path: '/' 51 | }, api.defaults, attributes); 52 | 53 | if (typeof attributes.expires === 'number') { 54 | var expires = new Date(); 55 | expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5); 56 | attributes.expires = expires; 57 | } 58 | 59 | try { 60 | result = JSON.stringify(value); 61 | if (/^[\{\[]/.test(result)) { 62 | value = result; 63 | } 64 | } catch (e) {} 65 | 66 | if (!converter.write) { 67 | value = encodeURIComponent(String(value)) 68 | .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent); 69 | } else { 70 | value = converter.write(value, key); 71 | } 72 | 73 | key = encodeURIComponent(String(key)); 74 | key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent); 75 | key = key.replace(/[\(\)]/g, escape); 76 | 77 | return (document.cookie = [ 78 | key, '=', value, 79 | attributes.expires ? '; expires=' + attributes.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 80 | attributes.path ? '; path=' + attributes.path : '', 81 | attributes.domain ? '; domain=' + attributes.domain : '', 82 | attributes.secure ? '; secure' : '' 83 | ].join('')); 84 | } 85 | 86 | // Read 87 | 88 | if (!key) { 89 | result = {}; 90 | } 91 | 92 | // To prevent the for loop in the first place assign an empty array 93 | // in case there are no cookies at all. Also prevents odd result when 94 | // calling "get()" 95 | var cookies = document.cookie ? document.cookie.split('; ') : []; 96 | var rdecode = /(%[0-9A-Z]{2})+/g; 97 | var i = 0; 98 | 99 | for (; i < cookies.length; i++) { 100 | var parts = cookies[i].split('='); 101 | var cookie = parts.slice(1).join('='); 102 | 103 | if (cookie.charAt(0) === '"') { 104 | cookie = cookie.slice(1, -1); 105 | } 106 | 107 | try { 108 | var name = parts[0].replace(rdecode, decodeURIComponent); 109 | cookie = converter.read ? 110 | converter.read(cookie, name) : converter(cookie, name) || 111 | cookie.replace(rdecode, decodeURIComponent); 112 | 113 | if (this.json) { 114 | try { 115 | cookie = JSON.parse(cookie); 116 | } catch (e) {} 117 | } 118 | 119 | if (key === name) { 120 | result = cookie; 121 | break; 122 | } 123 | 124 | if (!key) { 125 | result[name] = cookie; 126 | } 127 | } catch (e) {} 128 | } 129 | 130 | return result; 131 | } 132 | 133 | api.set = api; 134 | api.get = function (key) { 135 | return api.call(api, key); 136 | }; 137 | api.getJSON = function () { 138 | return api.apply({ 139 | json: true 140 | }, [].slice.call(arguments)); 141 | }; 142 | api.defaults = {}; 143 | 144 | api.remove = function (key, attributes) { 145 | api(key, '', extend(attributes, { 146 | expires: -1 147 | })); 148 | }; 149 | 150 | api.withConverter = init; 151 | 152 | return api; 153 | } 154 | 155 | return init(function () {}); 156 | })); 157 | 158 | /* 159 | * Date Format 1.2.3 160 | * (c) 2007-2009 Steven Levithan 161 | * MIT license 162 | * 163 | * Includes enhancements by Scott Trenda 164 | * and Kris Kowal 165 | * 166 | * Accepts a date, a mask, or a date and a mask. 167 | * Returns a formatted version of the given date. 168 | * The date defaults to the current date/time. 169 | * The mask defaults to dateFormat.masks.default. 170 | */ 171 | 172 | (function(global) { 173 | 'use strict'; 174 | 175 | var dateFormat = (function() { 176 | var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZWN]|'[^']*'|'[^']*'/g; 177 | var timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g; 178 | var timezoneClip = /[^-+\dA-Z]/g; 179 | 180 | // Regexes and supporting functions are cached through closure 181 | return function (date, mask, utc, gmt) { 182 | 183 | // You can't provide utc if you skip other args (use the 'UTC:' mask prefix) 184 | if (arguments.length === 1 && kindOf(date) === 'string' && !/\d/.test(date)) { 185 | mask = date; 186 | date = undefined; 187 | } 188 | 189 | date = date || new Date; 190 | 191 | if(!(date instanceof Date)) { 192 | date = new Date(date); 193 | } 194 | 195 | if (isNaN(date)) { 196 | throw TypeError('Invalid date'); 197 | } 198 | 199 | mask = String(dateFormat.masks[mask] || mask || dateFormat.masks['default']); 200 | 201 | // Allow setting the utc/gmt argument via the mask 202 | var maskSlice = mask.slice(0, 4); 203 | if (maskSlice === 'UTC:' || maskSlice === 'GMT:') { 204 | mask = mask.slice(4); 205 | utc = true; 206 | if (maskSlice === 'GMT:') { 207 | gmt = true; 208 | } 209 | } 210 | 211 | var _ = utc ? 'getUTC' : 'get'; 212 | var d = date[_ + 'Date'](); 213 | var D = date[_ + 'Day'](); 214 | var m = date[_ + 'Month'](); 215 | var y = date[_ + 'FullYear'](); 216 | var H = date[_ + 'Hours'](); 217 | var M = date[_ + 'Minutes'](); 218 | var s = date[_ + 'Seconds'](); 219 | var L = date[_ + 'Milliseconds'](); 220 | var o = utc ? 0 : date.getTimezoneOffset(); 221 | var W = getWeek(date); 222 | var N = getDayOfWeek(date); 223 | var flags = { 224 | d: d, 225 | dd: pad(d), 226 | ddd: dateFormat.i18n.dayNames[D], 227 | dddd: dateFormat.i18n.dayNames[D + 7], 228 | m: m + 1, 229 | mm: pad(m + 1), 230 | mmm: dateFormat.i18n.monthNames[m], 231 | mmmm: dateFormat.i18n.monthNames[m + 12], 232 | yy: String(y).slice(2), 233 | yyyy: y, 234 | h: H % 12 || 12, 235 | hh: pad(H % 12 || 12), 236 | H: H, 237 | HH: pad(H), 238 | M: M, 239 | MM: pad(M), 240 | s: s, 241 | ss: pad(s), 242 | l: pad(L, 3), 243 | L: pad(Math.round(L / 10)), 244 | t: H < 12 ? 'a' : 'p', 245 | tt: H < 12 ? 'am' : 'pm', 246 | T: H < 12 ? 'A' : 'P', 247 | TT: H < 12 ? 'AM' : 'PM', 248 | Z: gmt ? 'GMT' : utc ? 'UTC' : (String(date).match(timezone) || ['']).pop().replace(timezoneClip, ''), 249 | o: (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4), 250 | S: ['th', 'st', 'nd', 'rd'][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10], 251 | W: W, 252 | N: N 253 | }; 254 | 255 | return mask.replace(token, function (match) { 256 | if (match in flags) { 257 | return flags[match]; 258 | } 259 | return match.slice(1, match.length - 1); 260 | }); 261 | }; 262 | })(); 263 | 264 | dateFormat.masks = { 265 | 'default': 'ddd mmm dd yyyy HH:MM:ss', 266 | 'shortDate': 'm/d/yy', 267 | 'mediumDate': 'mmm d, yyyy', 268 | 'longDate': 'mmmm d, yyyy', 269 | 'fullDate': 'dddd, mmmm d, yyyy', 270 | 'shortTime': 'h:MM TT', 271 | 'mediumTime': 'h:MM:ss TT', 272 | 'longTime': 'h:MM:ss TT Z', 273 | 'isoDate': 'yyyy-mm-dd', 274 | 'isoTime': 'HH:MM:ss', 275 | 'isoDateTime': 'yyyy-mm-dd\'T\'HH:MM:sso', 276 | 'isoUtcDateTime': 'UTC:yyyy-mm-dd\'T\'HH:MM:ss\'Z\'', 277 | 'expiresHeaderFormat': 'ddd, dd mmm yyyy HH:MM:ss Z' 278 | }; 279 | 280 | // Internationalization strings 281 | dateFormat.i18n = { 282 | dayNames: [ 283 | 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 284 | 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' 285 | ], 286 | monthNames: [ 287 | 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 288 | 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' 289 | ] 290 | }; 291 | 292 | function pad(val, len) { 293 | val = String(val); 294 | len = len || 2; 295 | while (val.length < len) { 296 | val = '0' + val; 297 | } 298 | return val; 299 | } 300 | 301 | /** 302 | * Get the ISO 8601 week number 303 | * Based on comments from 304 | * http://techblog.procurios.nl/k/n618/news/view/33796/14863/Calculate-ISO-8601-week-and-year-in-javascript.html 305 | * 306 | * @param {Object} `date` 307 | * @return {Number} 308 | */ 309 | function getWeek(date) { 310 | // Remove time components of date 311 | var targetThursday = new Date(date.getFullYear(), date.getMonth(), date.getDate()); 312 | 313 | // Change date to Thursday same week 314 | targetThursday.setDate(targetThursday.getDate() - ((targetThursday.getDay() + 6) % 7) + 3); 315 | 316 | // Take January 4th as it is always in week 1 (see ISO 8601) 317 | var firstThursday = new Date(targetThursday.getFullYear(), 0, 4); 318 | 319 | // Change date to Thursday same week 320 | firstThursday.setDate(firstThursday.getDate() - ((firstThursday.getDay() + 6) % 7) + 3); 321 | 322 | // Check if daylight-saving-time-switch occured and correct for it 323 | var ds = targetThursday.getTimezoneOffset() - firstThursday.getTimezoneOffset(); 324 | targetThursday.setHours(targetThursday.getHours() - ds); 325 | 326 | // Number of weeks between target Thursday and first Thursday 327 | var weekDiff = (targetThursday - firstThursday) / (86400000*7); 328 | return 1 + Math.floor(weekDiff); 329 | } 330 | 331 | /** 332 | * Get ISO-8601 numeric representation of the day of the week 333 | * 1 (for Monday) through 7 (for Sunday) 334 | * 335 | * @param {Object} `date` 336 | * @return {Number} 337 | */ 338 | function getDayOfWeek(date) { 339 | var dow = date.getDay(); 340 | if(dow === 0) { 341 | dow = 7; 342 | } 343 | return dow; 344 | } 345 | 346 | /** 347 | * kind-of shortcut 348 | * @param {*} val 349 | * @return {String} 350 | */ 351 | function kindOf(val) { 352 | if (val === null) { 353 | return 'null'; 354 | } 355 | 356 | if (val === undefined) { 357 | return 'undefined'; 358 | } 359 | 360 | if (typeof val !== 'object') { 361 | return typeof val; 362 | } 363 | 364 | if (Array.isArray(val)) { 365 | return 'array'; 366 | } 367 | 368 | return {}.toString.call(val) 369 | .slice(8, -1).toLowerCase(); 370 | }; 371 | 372 | 373 | 374 | if (typeof define === 'function' && define.amd) { 375 | define(function () { 376 | return dateFormat; 377 | }); 378 | } else if (typeof exports === 'object') { 379 | module.exports = dateFormat; 380 | } else { 381 | global.dateFormat = dateFormat; 382 | } 383 | })(this); 384 | 385 | $(function() { 386 | var em_map = { 387 | "+1": "👍", 388 | "-1": "👎", 389 | "laugh": "😄", 390 | "confused": "😕", 391 | "hooray": "🎉", 392 | "heart": "❤️" 393 | }; 394 | var comment_list = $(".gh-recent-comments"), 395 | comments = $("#comments"); 396 | if(comment_list.length) { 397 | $.ajax({ 398 | url: "https://api.github.com/repos/" + github_comment.owner + "/" + github_comment.repo + "/issues/comments", 399 | dataType: "json", 400 | data: $.param({"sort": "updated", "direction": "desc"}), 401 | headers: {"Accept": "application/vnd.github.v3.html+json"}, 402 | success: function(data) { 403 | $.ajax({ 404 | url: "/github_comment_db.json", 405 | dataType: "json", 406 | success: function(db) { 407 | var count = parseInt(comment_list.data("numItems")), 408 | html = ""; 409 | for(var i = 0; i < data.length; ++i) { 410 | if(count-- <= 0) break; 411 | var d = data[i], 412 | body = $(d.body_html).text(), 413 | msg = body.length > 20 ? body.substring(0, 18) + "..." : body, 414 | issue = d.issue_url.match(/\d+$/)[0], 415 | id = "#issuecomment-" + d.id; 416 | post = db[issue]; 417 | html += '
  • '; 418 | html += '

    ' + msg + "

    "; 419 | html += '

    ' + d.user.login + " "; 420 | html += '' + new Date(d.updated_at).toLocaleString() + ""; 421 | html += "

    • "; 422 | } 423 | comment_list.append(html); 424 | } 425 | }) 426 | } 427 | }); 428 | /* 429 |
  • 430 |

    class="tooltipped tooltipped-n">{{msg}}

    431 |

    432 | {{user_login}} 433 | {{local_updated_at}} 434 |

    435 |
    • 436 | */ 437 | } 438 | if(comments.length) { 439 | $.ajax({ 440 | url: "https://api.github.com/repos/" + github_comment.owner + "/" + github_comment.repo + "/issues/" + github_comment.issue + "/comments?per_page=100", 441 | dataType: "json", 442 | headers: {"Accept": "application/vnd.github.v3.html+json, application/vnd.github.squirrel-girl-preview"}, 443 | success: function(data) { 444 | for(var i = 0; i < data.length; ++i) { 445 | var d = data[i], 446 | r = d.reactions, 447 | u = d.user; 448 | username = u.login, 449 | userlink = u.html_url, 450 | postdate = new Date(d.created_at).toLocaleString(); 451 | var html = "", reactions = ""; 452 | Object.keys(em_map).forEach(function(emoji, index) { 453 | if(r[emoji]) { 454 | reactions += ''; 458 | } 459 | }); 460 | html += '
    '; 461 | html += ''; 462 | html += '@' + username + ''; 463 | html += ''; 464 | html += '
    '; 465 | html += '
    '; 466 | html += '
    '; 467 | html += '' + username + ''; 468 | html += ' commented at '; 469 | html += '' + postdate + ''; 470 | if(d.created_at != d.updated_at) { 471 | html += ' • edited'; 472 | } 473 | html += '
    '; 474 | html += '
    '; 475 | html += '
    ' + d.body_html + '
    '; 476 | if(reactions) { 477 | html += '
    ' + reactions + '
    '; 478 | } 479 | html += '
    '; 480 | html += '
    '; 481 | html += ''; 482 | /* 483 |
    484 | 485 | @{{username}} 486 | 487 |
    488 |
    489 |
    490 | {{username}} commented at {{postdate}} 491 | {{ if(created_at != updated_at) }} 492 |  • edited 493 | {{ endif }} 494 |
    495 |
    496 |
    {{body_html}}
    497 | {{ if(reactions) }} 498 |
    {{reactions}}
    499 | {{ endif }} 500 |
    501 |
    502 | */ 503 | comments.append(html); 504 | } 505 | } 506 | }); 507 | } 508 | }); 509 | -------------------------------------------------------------------------------- /source/js/script.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | function visible(jqueryElem) { 4 | return jqueryElem.length && !jqueryElem.is(":hidden"); 5 | } 6 | 7 | /** 8 | * Calculate difference between two Javascript Date Object in days 9 | * copied from https://stackoverflow.com/a/15289883 10 | */ 11 | function dateDiffInDays(a, b) { 12 | var ua = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate()), 13 | ub = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate()); 14 | return Math.floor((ub - ua) / 86400000); 15 | } 16 | 17 | /** 18 | * Initialize on page fully loaded and update on window resize 19 | */ 20 | function initAndUpdate(initializers) { 21 | $(window).on("load", initializers) 22 | .resize(initializers); 23 | } 24 | 25 | // inspired by https://jsfiddle.net/mekwall/up4nu/ 26 | function scrollSpy(menuSelector, options) { 27 | var menu = $(menuSelector); 28 | if(!visible(menu)) 29 | return; 30 | options = options || {}; 31 | var offset = options.offset || 0; 32 | var activeClassName = options.activeClassName || "active"; 33 | 34 | var scollTarget = menu.find("a").map(function() { 35 | var item = $($(this).attr("href")); 36 | if (item.length) 37 | return item[0]; // avoid becoming 2-dim jquery array 38 | }), lastId = null, active = $(); 39 | 40 | $(window).scroll(function() { 41 | // Get container scroll position 42 | var fromTop = $(this).scrollTop() + offset; 43 | 44 | // Get id of current scroll item 45 | var id = scollTarget.filter(function() { 46 | return $(this).offset().top < fromTop; 47 | }).last().attr("id") || ""; 48 | 49 | if (lastId !== id) { 50 | active.removeClass(activeClassName); 51 | var newActive = []; 52 | 53 | for(var target = menu.find("[href='#" + id + "']"); 54 | target.length && !target.is(menu); 55 | target = target.parent()) { 56 | if(target.is("li")) 57 | newActive.push(target[0]); 58 | } 59 | active = $(newActive).addClass(activeClassName).trigger("scrollspy"); 60 | lastId = id; 61 | } 62 | }); 63 | } 64 | 65 | function makeSticky(stickySelector, options) { 66 | var sticky = $(stickySelector); 67 | if(!visible(sticky)) 68 | return; 69 | options = options || {}; 70 | var belowHeight = $(options.below || "#header").height(), 71 | within = $(options.within || "#primary"), 72 | originTop = sticky.position().top, posMax = 0; 73 | initAndUpdate(function() { 74 | var withinHeight = within.position().top + within.outerHeight(); 75 | posMax = withinHeight - sticky.height(); 76 | }); 77 | $(window).scroll(function() { 78 | var scrollTop = $(window).scrollTop(), top; 79 | if(scrollTop < belowHeight) 80 | top = originTop - scrollTop; 81 | else if(posMax > scrollTop) 82 | top = originTop - belowHeight; 83 | else 84 | top = posMax - scrollTop; 85 | sticky.css("top", top); 86 | }); 87 | } 88 | 89 | /** 90 | * Create HTML Elements according to template and data 91 | * @param {tmplSelector} selector of template string, type: string/jQuery 92 | * @param {dataSource} data, type: Array (or classes have map method) of plain object 93 | * @return array of resulting HTML elements, type: Array of String 94 | */ 95 | function template(tmplSelector, dataSource) { 96 | var tmpl = $(tmplSelector).html().split(/\{\{([^\}]+)\}\}/g); 97 | return dataSource.map(function(item) { 98 | return tmpl.map(function(tok, i) { 99 | return (i % 2) ? item[tok] : tok; 100 | }).join(''); 101 | }); 102 | } 103 | 104 | // sidebar loader 105 | $(function() { 106 | $("#sidebar").load("/parts/sidebar.html", function() { 107 | var suffix = $(this).find("#recent-posts .list").attr("data-suffix"); 108 | $(this).find(".update-time").each(function() { 109 | var time = new Date($(this).attr("data-date")), 110 | diff = dateDiffInDays(time, new Date()); 111 | if(100 >= diff) 112 | $(this).html(diff.toString() + suffix); 113 | }); 114 | 115 | // disqus recent comments in sidebar 116 | var comments = $(".dq-recent-comments"); 117 | if(!visible(comments)) 118 | return; 119 | $.get({ 120 | url: "https://disqus.com/api/3.0/forums/listPosts.jsonp", 121 | data: $.param({api_key: CONFIG.disqus.api_key, forum: CONFIG.disqus.forum, 122 | limit: comments.attr("data-num-items"), related: "thread"}), 123 | dataType: "jsonp", 124 | contentType: "text/javascript; charset=utf-8", 125 | }).then(function(data) { 126 | comments.append(template("#dq-recent-comments-template", $.map(data.response, function(comment) { 127 | var msg = comment.message.length > 20 ? comment.message.substring(0, 18) + "..." : comment.message; 128 | return { 129 | comment: msg.replace(/<\/?p>/gi, ""), 130 | link: comment.thread.link, 131 | title: comment.thread.title, 132 | profileUrl: comment.author.profileUrl, 133 | name: comment.author.name, 134 | createdAt: comment.createdAt 135 | }; 136 | }))); 137 | }); 138 | }); 139 | }); 140 | 141 | // dropdown navigation menu 142 | $(function() { 143 | var timer, active = false; 144 | $("#dropdown").hover(function() { 145 | var dropdown = $(this); 146 | if(timer) { 147 | clearTimeout(timer); 148 | timer = null; 149 | } 150 | if(!dropdown.hasClass("active")) { 151 | dropdown.addClass("active"); 152 | active = true; 153 | } 154 | }, function() { 155 | var dropdown = $(this); 156 | if(dropdown.hasClass("active") && active) { 157 | timer = setTimeout(function() { 158 | dropdown.removeClass("active"); 159 | active = false; 160 | clearTimeout(timer); 161 | timer = null; 162 | }, 100); 163 | } 164 | }); 165 | 166 | $("#global-nav").click(function() { 167 | // to make this still effective on window resize, 168 | // don't put the if-condition below out of click listener 169 | if ($(window).width() < 768) { 170 | $(this).toggleClass("collapse"); 171 | } 172 | }); 173 | }); 174 | 175 | // totop widget 176 | $(function() { 177 | var totop = $("#totop"), 178 | canvas = $("#totop-canvas"), 179 | percent = $("#totop-percent"), 180 | width = canvas.width(), 181 | height = canvas.height(), 182 | center = width / 2, 183 | radius = parseInt((width - 3) / 2), 184 | ctx = canvas[0].getContext("2d"); 185 | function drawCircle(color, percent) { 186 | ctx.beginPath(); 187 | ctx.arc(center, center, radius, - Math.PI / 2, Math.PI * 1.5 * percent, false); 188 | ctx.strokeStyle = color; 189 | ctx.lineCap = "round"; // butt, round or square 190 | ctx.lineWidth = 3; 191 | ctx.stroke(); 192 | } 193 | 194 | totop.click(function() { 195 | $("body, html").animate({ 196 | scrollTop: 0 197 | }, 800); 198 | }); 199 | 200 | $(window).scroll(function() { 201 | var docHeight = $(document).height() - $(window).height(), 202 | scrollTop = $(window).scrollTop(), 203 | per = parseInt(scrollTop / docHeight * 100); 204 | if (scrollTop >= 200) { 205 | totop.addClass("display"); 206 | ctx.clearRect(0, 0, width, height); 207 | drawCircle("#efefef", 1); 208 | drawCircle("#555555", per/100); 209 | } else 210 | totop.removeClass("display"); 211 | percent.attr("data-percent", per); 212 | }); 213 | }); 214 | 215 | // toc 216 | $(function() { 217 | var tocContainer = $("#toc"); 218 | if(!visible(tocContainer)) 219 | return; 220 | var toc = tocContainer.children(), tocHeight = 0; 221 | initAndUpdate(function() { 222 | tocHeight = toc.height(); 223 | }); 224 | scrollSpy(tocContainer, {offset: 200}); 225 | makeSticky(tocContainer, {within: ".post-body"}); 226 | 227 | $(".toc-item").on("scrollspy", function() { 228 | var tocTop = toc.scrollTop(), 229 | link = $(this).children(".toc-link"), 230 | thisTop = link.position().top; 231 | // make sure the highlighted element contains no child 232 | if($(this).height() != link.height()) 233 | return; 234 | // if the highlighted element is above current view of toc 235 | if(thisTop <= 0) 236 | toc.scrollTop(tocTop + thisTop); 237 | // else if below current view of toc 238 | else if(tocHeight <= thisTop) 239 | toc.scrollTop(tocTop + thisTop + link.outerHeight() - tocHeight); 240 | }); 241 | }); 242 | 243 | // footnotes 244 | $(function() { 245 | if(!$(".footnotes").length) 246 | return; 247 | 248 | $(".footnote-ref").each(function() { 249 | var footnote = $($(this).children("a").attr("href")), 250 | outer_wrapper = $("", {"class" :"fn-content"}), 251 | inner_wrapper = $("", {"class" :"fn-text"}); 252 | footnote.find(".footnote-backref").remove(); 253 | $(this).append(outer_wrapper.append(inner_wrapper.html(footnote.html()))); 254 | }); 255 | 256 | initAndUpdate(function() { 257 | var content = $(".fn-content").removeAttr("style"); 258 | if($(window).width() < 640) 259 | content.css("width",$(window).width()/2); 260 | else 261 | content.css("width",340); // default value 262 | content.each(function() { 263 | var width = $(this).children(".fn-text").outerWidth(); 264 | $(this).css({ 265 | "width": width, 266 | "margin-left": width/-2 267 | }); 268 | }); 269 | }); 270 | 271 | var active = $(); // current visible footnote 272 | $("#primary").click(function(e) { 273 | var clicked = $(e.target), 274 | fn = clicked.closest(".footnote-ref"); 275 | if(!active.is(fn)) { // if clicked on another footnote 276 | active.removeClass("active"); 277 | fn.addClass("active"); 278 | active = fn; 279 | } else if(clicked.is("a")) // if clicked on self 280 | active.toggleClass("active"); 281 | }); 282 | }); 283 | 284 | // archive navigator 285 | $(function() { 286 | var nav = $("#archive-nav"); 287 | if(!visible(nav)) 288 | return; 289 | scrollSpy(nav, {offset: 150}); 290 | makeSticky(nav); 291 | }); 292 | --------------------------------------------------------------------------------