├── .gitignore
├── screenshot.png
├── mobilescreenshot.png
├── page.php
├── LICENSE
├── page-search.php
├── page-archive.php
├── README.md
├── footer.php
├── functions.php
├── index.php
├── archive.php
├── sidebar.php
├── header.php
├── comments.php
├── post.php
└── css
    ├── customui.min.css
    └── customui.css


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | css/highlight.css
3 | css/highlight.min.css
4 | .idea/


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spiritree/typecho-theme-amaze/HEAD/screenshot.png


--------------------------------------------------------------------------------
/mobilescreenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spiritree/typecho-theme-amaze/HEAD/mobilescreenshot.png


--------------------------------------------------------------------------------
/page.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 2 | <?php $this->need('header.php'); ?>
 3 | <!-- content start -->
 4 | <div class="am-g am-g-fixed blog-fixed">
 5 |     <div class="am-u-sm-12">
 6 |         <article class="am-article blog-article-p">
 7 |             <div class="am-article-hd">
 8 |                 <h1 class="am-article-title blog-text-center"><?php $this->title() ?></h1>
 9 |             </div>
10 |             <div class="am-article-bd">
11 |                 <?php $this->content(); ?>
12 |             </div>
13 |         </article>
14 | 
15 |         <?php $this->need('comments.php'); ?>
16 | 
17 |         <hr>
18 |     </div>
19 | </div>
20 | <!-- content end -->
21 | 
22 | <?php $this->need('footer.php'); ?>
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017-present, spiritree
 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
13 | all 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
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/page-search.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 | * Search
 4 | *
 5 | * @package custom
 6 | */
 7 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 8 | $this->need('header.php');
 9 | ?>
10 | <div class="container">
11 |   <div class="row">
12 |     <div class="am-u-lg-8 am-u-lg-offset-2 am-u-md-10 am-u-md-offset-1">
13 |         <div class="search-page">
14 |             <form id="search" class="search-form" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
15 |                 <span class="search-box clearfix">
16 |                     <input type="text" id="input" class="input" name="s" required="true" placeholder="输入关键字搜索" maxlength="30" autocomplete="off">
17 |                     <button type="submit" class="spsubmit"><i class="am-icon-search"></i></button>
18 |                 </span>
19 |             </form>
20 |             <?php $this->widget('Widget_Metas_Tag_Cloud', 'sort=count&ignoreZeroCount=1&desc=1&limit=50')->to($tags); ?>
21 |             <div class="search-tags">
22 |             <?php if($tags->have()): ?>
23 |                 <?php while ($tags->next()): ?>
24 |                 <a href="<?php $tags->permalink(); ?>"><?php $tags->name(); ?>(<?php $tags->count(); ?>)</a>
25 |                 <?php endwhile; ?>
26 |             <?php else: ?>
27 |                 <p> Nothing here ! </p>
28 |             <?php endif; ?>
29 |             <div class="search-tags-hr"></div>
30 |             </div>
31 |         </div>
32 |     </div>
33 |   </div>
34 | </div>
35 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/page-archive.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 | * Archives
 4 | *
 5 | * @package custom
 6 | */
 7 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 8 | $this->need('header.php');
 9 | ?>
10 | 
11 | <div class="container-fluid archive-page clearfix">
12 | 	<?php
13 |     $stat = Typecho_Widget::widget('Widget_Stat');
14 |     $this->widget('Widget_Contents_Post_Recent', 'pageSize='.$stat->publishedPostsNum)->to($archives);
15 |     $year=0; $mon=0; $i=0; $j=0;
16 |     $output = '<div class="categorys-item">';
17 |     while($archives->next()){
18 |         $year_tmp = date('Y',$archives->created);
19 |         $mon_tmp = date('m',$archives->created);
20 |         $y=$year; $m=$mon;
21 |         if ($year > $year_tmp || $mon > $mon_tmp) {
22 |             $output .= '</div></div>';
23 |         }
24 |         if ($year != $year_tmp || $mon != $mon_tmp) {
25 | 			 $year = $year_tmp;
26 | 			 $mon = $mon_tmp;
27 | 			 $output .= '<div class="categorys-title">'.date('M Y',$archives->created).'</div><div class="post-lists"><div class="post-lists-body">';
28 |         }
29 |         $output .= '<div class="post-list-item"><div class="post-list-item-container"><div class="item-label"><div class="item-title"><a href="'.$archives->permalink .'">'. $archives->title .'</a></div><div class="item-meta clearfix"><div class="item-meta-date"> '.date('M j, Y',$archives->created).' </div></div></div></div></div>';
30 |     }
31 |     $output .= '</div></div></div>';
32 |     echo $output;
33 |     ?>
34 | </div>
35 | 
36 | <?php $this->need('footer.php'); ?>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | [![Typecho](https://img.shields.io/badge/typecho-1.1-red.svg?style=flat-square)](http://typecho.org/)
 3 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/spiritree/typecho-theme-amaze/master/LICENSE)
 4 | ## Amaze Theme
 5 | > 这是一个简洁风格的主题，参考了AmazeUI和[Typecho-Theme-Meizi](https://github.com/tlerbao/Typecho-Theme-Meizi)还有Jekyll的主题Project-pages和[小专栏](https://xiaozhuanlan.com/)，可以说是AmazeUI、Project-pages、小专栏混搭风格。
 6 | 
 7 | 主题讨论地址：https://spiritree.me/archives/typecho-theme-amaze.html
 8 | 
 9 | ## 概述
10 | 
11 | - 作者：spiritree
12 | - 版本：2.0.0
13 | 
14 | ## 主题预览
15 | ![typecho-theme-amaze.png](https://raw.githubusercontent.com/spiritree/typecho-theme-amaze/master/screenshot.png)
16 | 
17 | ![typecho-theme-amaze.png](https://raw.githubusercontent.com/spiritree/typecho-theme-amaze/master/mobilescreenshot.png)
18 | 
19 | 预览地址：**[spiritree.me](https://spiritree.me)**
20 | 
21 | ## 主题亮点
22 | - 基于AmazeUI v3.0.0 alpha.beta框架
23 | - 支持设置顶栏背景图片自定义
24 | - 支持个人社交按钮自定义
25 | - 响应式设计
26 | - 简洁
27 | 
28 | ## 主题框架
29 | - JQuery
30 | - AmazeUI
31 | - Highlight.js
32 | 
33 | ## 安装
34 | Github本页面下载，点击"Download ZIP"下载，将主题文件夹改名为amaze，放到Typecho的`usr/themes/`目录下，并后台开启主题。
35 | 
36 | ## 主题自定义
37 | 登陆到管理后台，控制台=>外观=>设置外观
38 | 
39 | ## 设置独立页面
40 | 开启归档和搜索页面
41 | 
42 | 控制台=>管理=>独立页面=>新增=>选择模板=>自定义模板
43 | 
44 | **搜索页面要设置隐藏并且在设置外观中输入搜索页面的网址**
45 | ## TODO
46 | - [x] 美化navbar在移动端的表现效果
47 | - [x] 修改文章详情界面样式
48 | - [x] 美化评论组件
49 | - [x] 首页侧边栏重构
50 | - [x] 首页文章详情重构
51 | - [x] 增加搜索功能
52 | - [x] 文章自动生成目录
53 | 
54 | ## LICENSE
55 | 
56 | MIT
57 | 
58 | Copyright (c) 2017-present, spiritree


--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 2 | 
 3 | <footer class="blog-footer">
 4 |     <ul class="list-inline text-center">
 5 | 	    <li>
 6 |             <a href="https://github.com/spiritree/typecho-theme-amaze" target="_blank">
 7 |             <span class="am-icon-btn am-icon-md am-icon-github footer-icon"></span>
 8 |         </li>
 9 |     </ul>
10 |     <div class="blog-text-center">© <?php echo date('Y'); ?> <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a> 由 <a href="http://www.typecho.org" target="_blank">Typecho</a> 强力驱动 Theme is <a href="https://spiritree.me" target="_blank">Amaze made by Spiritree</a>
11 |     </div>
12 | </footer>
13 | <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.slim.min.js"></script>
14 | <script src="https://lib.baomitu.com/highlight.js/9.12.0/highlight.min.js"></script>
15 | <script>
16 |     var $body=document.body;var $toggle=document.querySelector(".navbar-toggle");var $navbar=document.querySelector("#huxblog_navbar");var $collapse=document.querySelector(".navbar-collapse");var __HuxNav__={close:function(){$navbar.className=" ";setTimeout(function(){if($navbar.className.indexOf("in")<0){$collapse.style.height="0px"}},400)},open:function(){$collapse.style.height="auto";$navbar.className+=" in"}};$toggle.addEventListener("click",function(a){if($navbar.className.indexOf("in")>0){__HuxNav__.close()}else{__HuxNav__.open()}});document.addEventListener("click",function(a){if(a.target==$toggle){return}if(a.target.className=="icon-bar"){return}__HuxNav__.close()});jQuery(document).ready(function(c){var d=1170;if(c(window).width()>d){var b=c(".navbar-custom").height(),a=c(".intro-header .container").height();c(window).on("scroll",{previousTop:0},function(){var e=c(window).scrollTop(),f=c(".side-catalog");if(e<this.previousTop){if(e>0&&c(".navbar-custom").hasClass("is-fixed")){c(".navbar-custom").addClass("is-visible")}else{c(".navbar-custom").removeClass("is-visible is-fixed")}}else{c(".navbar-custom").removeClass("is-visible");if(e>b&&!c(".navbar-custom").hasClass("is-fixed")){c(".navbar-custom").addClass("is-fixed")}}this.previousTop=e;f.show();if(e>(a+41)){f.addClass("fixed")}else{f.removeClass("fixed")}})}});
17 | </script>
18 | <script>
19 |     $(document).ready(function() {
20 |         $('pre code').each(function(i, block) {
21 |             hljs.highlightBlock(block)
22 |         })
23 |         $('table').addClass('am-table')
24 |     })
25 | </script>
26 | <?php $this->footer(); ?>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 3 | 
 4 | function themeConfig($form) {
 5 |     $faviconUrl = new Typecho_Widget_Helper_Form_Element_Text('faviconUrl', NULL, NULL, _t('站点favicon.ico地址'), _t('站点favicon.ico地址'));
 6 |     $form->addInput($faviconUrl);
 7 | 
 8 |     $backgroundImage = new Typecho_Widget_Helper_Form_Element_Text('backgroundImage', NULL, NULL, _t('背景图片地址'), _t('请输入背景图片地址'));
 9 |     $form->addInput($backgroundImage);
10 | 
11 |     $backgroundText = new Typecho_Widget_Helper_Form_Element_Text('backgroundText', NULL, NULL, _t('背景图片大标题'), _t('请输入背景图片大标题内容'));
12 |     $form->addInput($backgroundText);
13 | 
14 |     $searchPage = new Typecho_Widget_Helper_Form_Element_Text('searchPage', NULL, NULL, _t('搜索页地址'), _t('输入你的 Seach 的独立页面地址,记得带上 http:// 或 https://'));
15 |     $form->addInput($searchPage);
16 | 
17 |     $avatarUrl = new Typecho_Widget_Helper_Form_Element_Text('avatarUrl', NULL, NULL, _t('头像地址'), _t('输入头像地址'));
18 |     $form->addInput($avatarUrl);
19 | 
20 |     $socialQQ = new Typecho_Widget_Helper_Form_Element_Text('socialQQ', NULL, NULL, _t('QQ'), _t('请输入QQ号码'));
21 |     $form->addInput($socialQQ);
22 | 
23 |     $socialWechat = new Typecho_Widget_Helper_Form_Element_Text('socialWechat', NULL, NULL, _t('微信'), _t('请输入微信二维码图片地址'));
24 |     $form->addInput($socialWechat);
25 | 
26 |     $socialGithub = new Typecho_Widget_Helper_Form_Element_Text('socialGithub', NULL, NULL, _t('Github'), _t('请输入 Github 地址'));
27 |     $form->addInput($socialGithub);
28 | 
29 |     $socialTwitter = new Typecho_Widget_Helper_Form_Element_Text('socialTwitter', NULL, NULL, _t('Twitter'), _t('请输入 Twitter 地址'));
30 |     $form->addInput($socialTwitter);
31 | 
32 |     $socialWeibo = new Typecho_Widget_Helper_Form_Element_Text('socialWeibo', NULL, NULL, _t('Weibo'), _t('请输入微博地址'));
33 |     $form->addInput($socialWeibo);
34 | }
35 | 
36 | function getCommentAt($coid){
37 |     $db   = Typecho_Db::get();
38 |     $prow = $db->fetchRow($db->select('parent')
39 |         ->from('table.comments')
40 |         ->where('coid = ? AND status = ?', $coid, 'approved'));
41 |     $parent = $prow['parent'];
42 |     if ($parent != "0") {
43 |         $arow = $db->fetchRow($db->select('author')
44 |             ->from('table.comments')
45 |             ->where('coid = ? AND status = ?', $parent, 'approved'));
46 |         $author = $arow['author'];
47 |         $href   = '<a href="#comment-'.$parent.'">@'.$author.'</a>';
48 |         echo $href;
49 |     } else {
50 |         echo '';
51 |     }
52 | }


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * 这是基于AmazeUI&Jeklly theme的主题
 4 |  * 
 5 |  * @package Amaze Theme
 6 |  * @author Spiritree
 7 |  * @version 2.0.0
 8 |  * @link spiritree.me
 9 |  */
10 | 
11 | 
12 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
13 | $this->need('header.php');
14 | ?>
15 | 
16 | <!-- header end -->
17 | 
18 | <!-- content start -->
19 | <div class="am-g am-g-fixed blog-fixed">
20 |     <div class="am-u-lg-8 am-u-sm-12">
21 |         <?php while($this->next()): ?>
22 |         <article class="am-g blog-entry-article">
23 |             <div class="am-u-lg-6 am-u-lg-12 am-u-sm-12 blog-entry-text post-preview">
24 |                 <div class="topic-header">
25 |                     <div class="pull-left">
26 |                         <div class="blog-flex-center">
27 |                             <div class="blog-flex0">
28 |                                 <img src="<?php $this->options->avatarUrl(); ?>" alt="" class="link avatar avatar-image">
29 |                             </div>
30 |                             <div class="author-lockup blog-flex1">
31 |                                 <a class="link" href="<?php $this->author->permalink(); ?>"><?php $this->author(); ?></a>
32 |                                 <span class="in">in</span>
33 |                                 <span class="category-name">
34 |                                     <?php $this->category('  '); ?>
35 |                                 </span>
36 |                             </div>
37 |                         </div>
38 |                     </div>
39 |                 <span class="pull-right time pc_time"><?php $this->date('F j, Y'); ?></span>
40 |                 </div>
41 |             <h1 class="post-index-title"><a target="_blank" itemtype="url" href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
42 |             <div class="post-content-preview">
43 |                 <?php $this->excerpt(200, '...'); ?>
44 |             </div>
45 |             <div class="clearfix topic-footer">
46 |                 <span class="pull-left time mobile_time"><?php $this->date('F j, Y'); ?></span>
47 |             </div>
48 |         </article>
49 |         <?php endwhile; ?>
50 |         <ul class="am-pagination">
51 |             <li class="am-pagination-prev">
52 |                 <?php $this->pageLink('&laquo; Prev','prev');?>
53 |             </li>
54 |             <li class="am-pagination-next">
55 |                 <?php $this->pageLink('Next &raquo;','next');?>
56 |             </li>
57 |         </ul>
58 |     </div>
59 |     <?php $this->need('sidebar.php'); ?>
60 | </div>
61 | <!-- content end -->
62 | 
63 | <!-- footer start -->
64 | <?php $this->need('footer.php'); ?>
65 | <!-- footer end -->


--------------------------------------------------------------------------------
/archive.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if (!defined('__TYPECHO_ROOT_DIR__')) exit;
 3 | $this->need('header.php');
 4 | ?>
 5 | 
 6 | 
 7 | <!-- content srart -->
 8 | <div class="am-g am-g-fixed blog-fixed">
 9 |     <div class="am-u-md-12 am-u-sm-12">
10 |         <h2 class="am-margin-top-lg"><?php $this->archiveTitle(array(
11 |                 'category'  =>  _t('分类 %s 下的文章'),
12 |                 'search'    =>  _t('包含关键字 %s 的文章'),
13 |                 'tag'       =>  _t('标签 %s 下的文章'),
14 |                 'author'    =>  _t('%s 发布的文章')
15 |             ), '', ''); ?></h2>
16 |         <?php if ($this->have()): ?>
17 |         <?php while($this->next()): ?>
18 |         <article class="am-g blog-entry-article">
19 |             <div class="am-u-lg-6 am-u-lg-12 am-u-sm-12 blog-entry-text post-preview">
20 |                 <div class="topic-header">
21 |                     <div class="pull-left">
22 |                         <div class="blog-flex-center">
23 |                             <div class="blog-flex0">
24 |                                 <img src="<?php $this->options->avatarUrl(); ?>" alt="" class="link avatar avatar-image">
25 |                             </div>
26 |                             <div class="author-lockup blog-flex1">
27 |                                 <a class="link" href="<?php $this->author->permalink(); ?>"><?php $this->author(); ?></a>
28 |                                 <span class="in">in</span>
29 |                                 <span class="category-name">
30 |                                     <?php $this->category('  '); ?>
31 |                                 </span>
32 |                             </div>
33 |                         </div>
34 |                     </div>
35 |                 <span class="pull-right time pc_time"><?php $this->date('F j, Y'); ?></span>
36 |                 </div>
37 |             <h1 class="post-index-title"><a target="_blank" itemtype="url" href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
38 |             <div class="post-content-preview">
39 |                 <?php $this->excerpt(200, '...'); ?>
40 |             </div>
41 |             <div class="clearfix topic-footer">
42 |                 <span class="pull-left time mobile_time"><?php $this->date('F j, Y'); ?></span>
43 |             </div>
44 |         </article>
45 |         <?php endwhile; ?>
46 |         <?php else: ?>
47 |             <article class="am-g blog-entry-article am-text-center">
48 |                 <?php _e('没有找到内容'); ?>
49 |             </article>
50 |         <?php endif; ?>
51 |         <ul class="am-pagination">
52 |             <?php $this->pageLink('&laquo; Prev','prev');?>
53 |             <?php $this->pageLink('Next &raquo;','next');?>
54 |         </ul>
55 |     </div>
56 | </div>
57 | <!-- content end -->
58 | 
59 | <?php $this->need('footer.php'); ?>
60 | 


--------------------------------------------------------------------------------
/sidebar.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 2 | <div class="am-u-lg-4 am-u-sm-10 am-u-lg-offset-0 am-u-sm-offset-0 sidebar-container">
 3 |     <section>
 4 |         <div class="sidebar-header">
 5 |             <span class="sidebar-header-title">
 6 |                 关于博主
 7 |             </span>
 8 |         </div>
 9 |         <ul class="list-inline">
10 |             <?php if ($this->options->socialQQ): ?>
11 |             <li>
12 |                 <a class="am-icon-btn am-icon-qq" target="_blank" itemtype="url" href="tencent://message/?uin=<?php $this->options->socialQQ(); ?>&Site=junichi&Menu=yes"></a>
13 |             </li>
14 |             <?php endif; ?>
15 |             <?php if ($this->options->socialWechat): ?>
16 |             <li>
17 |                 <a class="am-icon-btn am-icon-wechat" target="_blank" itemtype="url" href="<?php $this->options->socialWechat(); ?>"></a>
18 |             </li>
19 |             <?php endif; ?>
20 |             <?php if ($this->options->socialGithub): ?>
21 |             <li>
22 |                 <a class="am-icon-btn am-icon-github" target="_blank" itemtype="url" href="<?php $this->options->socialGithub(); ?>"></a>
23 |             </li>
24 |             <?php endif; ?>
25 |             <?php if ($this->options->socialWeibo): ?>
26 |             <li>
27 |                 <a class="am-icon-btn am-icon-weibo" target="_blank" itemtype="url" href="<?php $this->options->socialWeibo(); ?>"></a>
28 |             </li>
29 |             <?php endif; ?>
30 |             <?php if ($this->options->socialTwitter): ?>
31 |             <li>
32 |                 <a class="am-icon-btn am-icon-twitter" target="_blank" itemtype="url" href="<?php $this->options->socialTwitter(); ?>"></a>
33 |             </li>
34 |             <?php endif; ?>
35 |         </ul>
36 |     </section>
37 |     <section>
38 |         <div class="sidebar-header">
39 |             <span class="sidebar-header-title">
40 |                 分类列表
41 |             </span>
42 |         </div>
43 |         <div class="sidebar-list">
44 |         <ul class="sidebar-list-body sidebar-list-items">
45 |         <?php $this->widget('Widget_Metas_Category_List')
46 |         ->parse('<li class="sidebar-list-item"><a href="{permalink}" title="{description}">{name}  ({count})</a></li>'); ?>
47 |         </ul>
48 |         </div>
49 |     </section>
50 |     <section>
51 |         <div class="sidebar-header">
52 |             <span class="sidebar-header-title">
53 |                 标签列表
54 |             </span>
55 |         </div>
56 |         <div class="tags">
57 |             <?php $this->widget('Widget_Metas_Tag_Cloud', array('sort' => 'count', 'ignoreZeroCount' => true, 'desc' => true, 'limit' => 50))->to($tags); ?>
58 |             <?php while($tags->next()): ?>
59 |                 <a href="<?php $tags->permalink(); ?>"><?php $tags->name(); ?></a>
60 |             <?php endwhile; ?>
61 |         </div>
62 |     </section>
63 |     <section>
64 |         <div class="sidebar-header">
65 |             <span class="sidebar-header-title">
66 |                 归档列表
67 |             </span>
68 |         </div>
69 |         <div class="sidebar-list">
70 |         <ul class="sidebar-list-body sidebar-list-items">
71 |         <?php $this->widget('Widget_Contents_Post_Date', 'type=month&format=F Y')
72 |             ->parse('<li class="sidebar-list-item"><a href="{permalink}">{date}  ({count})</a></li>'); ?>
73 |         </ul>
74 |         </div>
75 |     </section>
76 | </div>
77 | 


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 |     <meta charset="<?php $this->options->charset(); ?>">
 6 |     <meta http-equiv="x-dns-prefetch-control" content="on" />
 7 |     <link rel="dns-prefetch" href="https://lib.baomitu.com"/>
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
10 |     <title><?php $this->archiveTitle(array(
11 |             'category'  =>  _t('分类 %s 下的文章'),
12 |             'search'    =>  _t('包含关键字 %s 的文章'),
13 |             'tag'       =>  _t('标签 %s 下的文章'),
14 |             'author'    =>  _t('%s 发布的文章')
15 |         ), '', ' - '); ?><?php $this->options->title(); ?></title>
16 |     <!-- Favicon -->
17 |     <link rel="shortcut icon" href="<?php $this->options->faviconUrl(); ?>">
18 |     <meta name="renderer" content="webkit">
19 |     <meta http-equiv="Cache-Control" content="no-siteapp"/>
20 |     <!-- AmazeUI 3.0 -->
21 |     <link rel="stylesheet" href="<?php $this->options->themeUrl('css/amazeui.min.css'); ?>">
22 |     <!-- Custom CSS -->
23 |     <link rel="stylesheet" href="<?php $this->options->themeUrl('css/customui.min.css'); ?>">
24 |     <!-- CodeHighlight -->
25 |     <style>
26 |     .hljs{display:block;overflow-x:auto;padding:0.5em;color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#a626a4}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#50a14f}.hljs-built_in,.hljs-class .hljs-title{color:#c18401}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#986801}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#4078f2}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}
27 |     </style>
28 |     <!-- FontAwesome -->
29 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
30 |     <!-- 通过自有函数输出HTML头部信息 -->
31 |     <?php $this->header(); ?>
32 | </head>
33 | 
34 | <body id="blog">
35 | <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
36 |     <div class="container-fluid">
37 |         <!-- Brand and toggle get grouped for better mobile display -->
38 |         <div class="navbar-header page-scroll">
39 |             <button type="button" class="navbar-toggle">
40 |                 <span class="sr-only"></span>
41 |                 <span class="icon-bar"></span>
42 |                 <span class="icon-bar"></span>
43 |                 <span class="icon-bar"></span>
44 |             </button>
45 |             <a class="navbar-brand" href="/"><?php $this->options->title(); ?></a>
46 |             <?php if($this->options->searchPage): ?>
47 |                 <a class="navbar-mobile-search" href="<?php $this->options->searchPage(); ?>">
48 |                     <span class="am-icon-search"></span>
49 |                 </a>
50 |             <?php endif;?>
51 |         </div>
52 | 
53 |         <!-- Collect the nav links, forms, and other content for toggling -->
54 |         <div id="huxblog_navbar">
55 |             <div class="navbar-collapse">
56 |                 <ul class="nav navbar-nav navbar-right">
57 |                     <li>
58 |                         <a href="<?php $this->options->siteUrl(); ?>"><?php _e('Home'); ?></a>
59 |                     </li>
60 |                     <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
61 |                     <?php while($pages->next()): ?>
62 |                     <li>
63 |                         <a href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
64 |                     </li>
65 |                     <?php endwhile; ?>
66 |                     <?php if($this->options->searchPage): ?>
67 |                     <li>
68 |                         <a class="am-icon-search navbar-search" href="<?php $this->options->searchPage(); ?>"></a>
69 |                     </li>
70 |                     <?php endif;?>
71 |                 </ul>
72 |             </div>
73 |         </div>
74 |         <!-- /.navbar-collapse -->
75 |     </div>
76 |     <!-- /.container -->
77 | </nav>
78 | <header class="intro-header" style="background-image: url('<?php $this->options->backgroundImage(); ?>')">
79 |     <div class="container">
80 |         <div class="row">
81 |             <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
82 |                 <div class="site-heading">
83 |                     <h1><?php $this->options->backgroundText(); ?></h1>
84 |                     <!-- <hr class="small"> -->
85 |                     <span class="subheading"><?php $this->options->description() ?></span>
86 |                 </div>
87 |             </div>
88 |         </div>
89 |     </div>
90 | </header>


--------------------------------------------------------------------------------
/comments.php:
--------------------------------------------------------------------------------
  1 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
  2 | 
  3 | <?php
  4 | function threadedComments($comments, $options) {
  5 |     $commentClass = '';
  6 |     if ($comments->authorId) {
  7 |         if ($comments->authorId == $comments->ownerId) {
  8 |             $commentClass .= ' comment-by-author';
  9 |         } else {
 10 |             $commentClass .= ' comment-by-user';
 11 |         }
 12 |     }
 13 |     $commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
 14 |     $depth = $comments->levels +1;
 15 |     if ($comments->url) {
 16 |         $author = '<a href="' . $comments->url . '"target="_blank"' . ' rel="external nofollow">' . $comments->author . '</a>';
 17 |     } else {
 18 |         $author = $comments->author;
 19 |     }
 20 | ?>
 21 | 
 22 | <li id="li-<?php $comments->theId(); ?>" class="comment-body<?php
 23 | if ($depth > 1 && $depth < 3) {
 24 |     echo ' comment-child ';
 25 |     $comments->levelsAlt('comment-level-odd', ' comment-level-even');
 26 | }
 27 | else if( $depth > 2){
 28 |     echo ' comment-child2';
 29 |     $comments->levelsAlt(' comment-level-odd', ' comment-level-even');
 30 | }
 31 | else {
 32 |     echo ' comment-parent';
 33 | }
 34 | $comments->alt(' comment-odd', ' comment-even');
 35 | ?>">
 36 |     <div id="<?php $comments->theId(); ?>">
 37 |         <?php
 38 |             $host = 'https://secure.gravatar.com';
 39 |             $url = '/avatar/';
 40 |             $size = '80';
 41 |             $default = 'mm';
 42 |             $rating = Helper::options()->commentsAvatarRating;
 43 |             $hash = md5(strtolower($comments->mail));
 44 |             $avatar = $host . $url . $hash . '?s=' . $size . '&r=' . $rating . '&d=' . $default;
 45 |         ?>
 46 |         <div class="comment-view" onclick="">
 47 |             <div class="comment-header">
 48 |                 <img class="avatar" src="<?php echo $avatar ?>" width="<?php echo $size ?>" height="<?php echo $size ?>" />
 49 |                 <span class="comment-author<?php echo $commentClass; ?>"><?php echo $author; ?></span>
 50 |             </div>
 51 |             <div class="comment-content">
 52 |                 <span class="comment-author-at"><?php getCommentAt($comments->coid); ?></span> <?php $comments->content(); ?></p>
 53 |             </div>
 54 |             <div class="comment-meta">
 55 |                 <time class="comment-time"><?php $comments->date('M j, Y'); ?></time>
 56 |                 <span class="comment-reply"><?php $comments->reply('Reply'); ?></span>
 57 |             </div>
 58 |         </div>
 59 |     </div>
 60 |     <?php if ($comments->children) { ?>
 61 |         <div class="comment-children">
 62 |             <?php $comments->threadedComments($options); ?>
 63 |         </div>
 64 |     <?php } ?>
 65 | </li>
 66 | <?php } ?>
 67 | 
 68 | <div id="<?php $this->respondId(); ?>" class="comment-container">
 69 |     <div id="comments" class="clearfix">
 70 |         <?php $this->comments()->to($comments); ?>
 71 |         <?php if($this->allow('comment')): ?>
 72 |         <div id="<?php $this->respondId(); ?>" class="respond">
 73 |             <div class="cancel-comment-reply">
 74 |             <?php $comments->cancelReply(); ?>
 75 |             </div>
 76 |         
 77 |             <h3 id="response"><?php _e('添加新评论'); ?></h3>
 78 |             <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
 79 |                 <?php if($this->user->hasLogin()): ?>
 80 |                 <p><?php _e('登录身份: '); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a></p>
 81 |                 <?php else: ?>
 82 |                 <div class="am-g">
 83 |                     <span class="am-u-lg-4 comment-input">
 84 |                         <label for="author" class="required"><?php _e('称呼'); ?></label>
 85 |                         <input type="text" name="author" id="author" class="text" value="<?php $this->remember('author'); ?>" required />
 86 |                     </span>
 87 |                     <span class="am-u-lg-4">
 88 |                         <label for="mail"<?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?>><?php _e('Email'); ?></label>
 89 |                         <input type="email" name="mail" id="mail" class="text" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
 90 |                     </span>
 91 |                     <span class="am-u-lg-4 comment-input">
 92 |                         <label for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>><?php _e('网站'); ?></label>
 93 |                         <input type="url" name="url" id="url" class="text" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
 94 |                     </span>
 95 |                 </div>
 96 |                 <?php endif; ?>
 97 |                 <p>
 98 |                     <label for="textarea" class="required"><?php _e('内容'); ?></label>
 99 |                     <textarea rows="8" cols="32" name="text" id="textarea" class="textarea" required ><?php $this->remember('text'); ?></textarea>
100 |                 </p>
101 |                 <p>
102 |                     <button type="submit" class="submit am-btn am-btn-primary"><?php _e('提交评论'); ?></button>
103 |                 </p>
104 |             </form>
105 |         </div>
106 |         <?php else: ?>
107 |         <h3><?php _e('评论已关闭'); ?></h3>
108 |         <?php endif; ?>
109 | 
110 |         <?php if ($comments->have()): ?>
111 | 
112 |         <?php $comments->listComments(); ?>
113 | 
114 |         <div class="lists-navigator clearfix">
115 |             <?php $comments->pageNav('←','→','2','...'); ?>
116 |         </div>
117 | 
118 |         <?php endif; ?>
119 |     </div>
120 | </div>


--------------------------------------------------------------------------------
/post.php:
--------------------------------------------------------------------------------
  1 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
  2 | <!DOCTYPE HTML>
  3 | <html>
  4 | <head>
  5 |     <meta charset="<?php $this->options->charset(); ?>">
  6 |     <meta http-equiv="x-dns-prefetch-control" content="on" />
  7 |     <link rel="dns-prefetch" href="https://lib.baomitu.com"/>
  8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 10 |     <title><?php $this->archiveTitle(array(
 11 |             'category'  =>  _t('分类 %s 下的文章'),
 12 |             'search'    =>  _t('包含关键字 %s 的文章'),
 13 |             'tag'       =>  _t('标签 %s 下的文章'),
 14 |             'author'    =>  _t('%s 发布的文章')
 15 |         ), '', ' - '); ?><?php $this->options->title(); ?></title>
 16 |     <!-- Favicon -->
 17 |     <link rel="shortcut icon" href="<?php $this->options->faviconUrl(); ?>">
 18 |     <meta name="renderer" content="webkit">
 19 |     <meta http-equiv="Cache-Control" content="no-siteapp"/>
 20 |     <!-- AmazeUI 3.0 -->
 21 |     <link rel="stylesheet" href="<?php $this->options->themeUrl('css/amazeui.min.css'); ?>">
 22 |     <!-- Custom CSS -->
 23 |     <link rel="stylesheet" href="<?php $this->options->themeUrl('css/customui.min.css'); ?>">
 24 |     <!-- CodeHighlight -->
 25 |     <style>
 26 |     .hljs{display:block;overflow-x:auto;padding:0.5em;color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#a626a4}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta-string{color:#50a14f}.hljs-built_in,.hljs-class .hljs-title{color:#c18401}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#986801}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#4078f2}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}
 27 |     </style>
 28 |     <!-- FontAwesome -->
 29 |     <link href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 30 |     <!-- 通过自有函数输出HTML头部信息 -->
 31 |     <?php $this->header(); ?>
 32 | </head>
 33 | 
 34 | <body id="blog">
 35 | <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
 36 |     <div class="container-fluid">
 37 |         <!-- Brand and toggle get grouped for better mobile display -->
 38 |         <div class="navbar-header page-scroll">
 39 |             <button type="button" class="navbar-toggle">
 40 |                 <span class="sr-only"></span>
 41 |                 <span class="icon-bar"></span>
 42 |                 <span class="icon-bar"></span>
 43 |                 <span class="icon-bar"></span>
 44 |             </button>
 45 |             <a class="navbar-brand" href="/"><?php $this->options->title(); ?></a>
 46 |         </div>
 47 | 
 48 |         <!-- Collect the nav links, forms, and other content for toggling -->
 49 |         <div id="huxblog_navbar">
 50 |             <div class="navbar-collapse">
 51 |                 <ul class="nav navbar-nav navbar-right">
 52 |                     <li>
 53 |                         <a href="<?php $this->options->siteUrl(); ?>"><?php _e('Home'); ?></a>
 54 |                     </li>
 55 |                     <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
 56 |                     <?php while($pages->next()): ?>
 57 |                     <li>
 58 |                         <a href="<?php $pages->permalink(); ?>"><?php $pages->title(); ?></a>
 59 |                     </li>
 60 |                     <?php endwhile; ?>
 61 |                     <?php if($this->options->searchPage): ?>
 62 |                     <li>
 63 |                         <a class="am-icon-search navbar-search" href="<?php $this->options->searchPage(); ?>"></a>
 64 |                     </li>
 65 |                     <?php endif;?>
 66 |                 </ul>
 67 |             </div>
 68 |         </div>
 69 |         <!-- /.navbar-collapse -->
 70 |     </div>
 71 |     <!-- /.container -->
 72 | </nav>
 73 | 
 74 |     <header class="intro-header" style="background-image: url('<?php $this->options->backgroundImage();?>')">
 75 |     <div class="container">
 76 |         <div class="row">
 77 |                 <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
 78 |                     <div class="post-heading">
 79 |                         <h1><?php $this->title() ?></h1>
 80 |                         <span class="meta">@<?php $this->author(); ?> &nbsp;<?php $this->date('F j, Y'); ?></span>
 81 |                         <div class="tags post-tags"><?php $this->category('  '); ?>&nbsp;</div>
 82 |                     </div>
 83 |                 </div>
 84 |         </div>
 85 |     </div>
 86 |     </header>
 87 | 
 88 |     <!-- content start -->
 89 |     <div class="container">
 90 |     <div class="am-g am-g-fixed blog-fixed">
 91 |         <div class="am-u-lg-12 am-u-sm-12">
 92 |             <article class="am-article blog-article-p article-trigger">
 93 |                 <div id="post-content" class="am-article-bd">
 94 |                     <?php $this->content(); ?>
 95 |                 </div>
 96 |             </article>
 97 |             <!-- <hr>
 98 |             <ul class="pager">
 99 |                 <li class="previous"><?php $this->thePrev('%s',''); ?></li>
100 |                 <li class="next"><?php $this->theNext('%s',''); ?></li>
101 |             </ul> -->
102 |             <hr>
103 |         </div>
104 | 
105 |     </div>
106 |     </div>
107 |     <?php $this->need('comments.php'); ?>
108 |     <div id="directory-content" class="directory-content">
109 |         <div id="directory"></div>
110 |     </div>
111 |     <!-- content end -->
112 | <?php $this->need('footer.php'); ?>
113 | <script src="https://lib.baomitu.com/headroom/0.9.4/headroom.min.js"></script>
114 | <script>
115 | var postDirectoryBuild=function(){var b=function a(l,h){var k=[],e=typeof h==="object",g=typeof h==="string",j,f,d;for(f=0,d=l.length;f<d;f++){j=l[f];if((j.nodeType===1||j.nodeType===9)&&(!h||e&&h.test(j.tagName.toLowerCase())||g&&j.tagName.toLowerCase()===h)){k.push(j)}}return k},c=function(e,f,r){var n=[],m=[],h,p,d,j,l,s,o,g,k,q;h=(function(i,C,A){var w=b(i.childNodes,/^h\d$/),x=[],v=1,B=1,z=0,D=1,t="directory"+(Math.random()+"").replace(/\D/,""),B,y,u;while(w.length){u=w.shift();C.push(u.innerHTML);y=+u.tagName.match(/\d/)[0];if(y>v){x.push(1);B+=1}else{if(y===B||y>B&&y<=v){x.push(0);B=B}else{if(y<B){x.push(y-B);B=y}}}z+=x[x.length-1];v=y;u.id=u.id||(t+D++);A.push(u.id)}if(z!==0&&x[0]===1){x[0]=0}return x})(e,n,m);j=p=document.createElement("ul");q=document.createElement("span");q.style="color:#F38181;font-weight:600;";q.innerHTML="目录";p.appendChild(q);dirNum=[];for(g=0,k=h.length;g<k;g++){d=h[g];if(d===1){l=document.createElement("ul");if(!j.lastElementChild){j.appendChild(document.createElement("li"))}j.lastElementChild.appendChild(l);j=l;dirNum.push(0)}else{if(d<0){d*=2;while(d++){if(d%2){dirNum.pop()}j=j.parentNode}}}dirNum[dirNum.length-1]++;s=document.createElement("li");o=document.createElement("a");o.href="#"+m[g];o.innerHTML=!r?n[g]:dirNum.join(".")+" "+n[g];s.appendChild(o);j.appendChild(s)}f.appendChild(p)};c(document.getElementById("post-content"),document.getElementById("directory"),false)};postDirectoryBuild();
116 | </script>
117 | <script>
118 |     var postDirectory = new Headroom(document.getElementById("directory-content"), {
119 |     tolerance: 5,
120 |     offset: 240,
121 |     classes: {
122 |         initial: "initial",
123 |         pinned: "pinned",
124 |         unpinned: "unpinned"
125 |     }
126 | });
127 | postDirectory.init();
128 | </script>


--------------------------------------------------------------------------------
/css/customui.min.css:
--------------------------------------------------------------------------------
1 | a{color:#404040}a:hover,a:focus{color:#42b983}#blog{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif !important}#blog hr{margin:.6rem 0}.blog-text-center{text-align:center;font-size:14px}@media only screen and (min-width: 1200px){.blog-fixed{max-width:1200px}}.blog-entry-article{margin:3rem 0;padding-bottom:3rem;border-bottom:1px solid #e5e5e5}.blog-entry-text{padding:0 1rem}.blog-entry-text h1{margin-top:0;color:#2D2D2F}.blog-footer{padding:2rem 0 2rem 0;margin-top:5rem;background-color:#273547;color:#fff !important}.blog-footer a{color:#fff}.blog-footer span{color:#fff}.blog-article-p{margin:3rem 0}@media only screen and (max-width: 767px){.navbar-default .navbar-collapse{display:block;position:absolute;right:0;border:none;background:white;box-shadow:0 5px 10px 2px rgba(0, 0, 0, .2);box-shadow:rgba(0, 0, 0, .117647) 0 1px 6px, rgba(0, 0, 0, .239216) 0 1px 4px;border-radius:2px;width:120px}}.intro-header{background:no-repeat center center;background-color:#808080;background-attachment:scroll;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;margin-bottom:30px}.intro-header .site-heading,.intro-header .post-heading{padding:100px 0 50px;color:white}@media only screen and (min-width: 768px){.intro-header .site-heading,.intro-header .post-heading{padding:80px 0 120px 0}}.intro-header .site-heading{text-align:center}.intro-header .site-heading h1{margin-top:0;font-size:50px}.intro-header .site-heading .subheading{font-size:24px;line-height:1.1;display:block;font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:300;margin:10px 0 0}@media only screen and (min-width: 768px){.intro-header .site-heading h1{font-size:80px}}.intro-header .post-heading h1{font-size:35px}.intro-header .post-heading .meta{line-height:1.1;display:block}.intro-header .post-heading .meta{font-family:'Lora', 'Times New Roman', serif;font-style:italic;font-weight:300;font-size:20px}@media only screen and (min-width: 768px){.intro-header{margin-bottom:20px}.intro-header .post-heading h1{font-size:45px}}input{outline:none;border:1px solid #bdc3c7;border-radius:2px;box-shadow:none;width:100%}input::-webkit-search-decoration,input::-webkit-search-cancel-button{display:none}input:-moz-placeholder{color:#999}input::-webkit-input-placeholder{color:#999}#comments{padding-top:15px}@media only screen and (min-width: 750px){.comment-input{padding:0 !important}}.comment-list,.comment-list ol{list-style:none;margin:0;padding:0}.comment-list li{padding:14px;margin-top:10px;border:1px solid #EEE}.comment-list li.comment-level-odd{background:#F9FBFC}.comment-list li.comment-level-even{background:#FFF}.comment-list li.comment-by-author{background:#FFF9E8}.comment-list li .comment-reply{text-align:right;font-size:.92857em}.comment-meta a{color:#999;font-size:.92857em}.comment-author{display:block;margin-bottom:3px;color:#444}.comment-author cite{font-weight:bold;font-style:normal}.respond .cancel-comment-reply{float:right;margin-top:15px;font-size:.92857em}#comment-form label{display:block;margin-bottom:.5em;margin-top:.5em;font-weight:bold}#comment-form .required:after{content:" *";color:#C00}.tags{margin-top:20px;margin-bottom:-5px}.tags a{display:inline-block;border:1px solid rgba(255, 255, 255, .8);border-radius:999em;padding:0 10px;color:#fff;line-height:24px;text-decoration:none;margin:0 1px;margin-bottom:6px}.tags a:hover,.tags a:active{color:white;border-color:white;background-color:rgba(255, 255, 255, .4);text-decoration:none}@media only screen and (min-width: 768px){.tags a{margin-right:5px}}@media only screen and (max-width: 767px){.navbar-default .navbar-collapse{position:absolute;right:0;border:none;background:white;box-shadow:0 5px 10px 2px rgba(0, 0, 0, .2);box-shadow:rgba(0, 0, 0, .117647) 0 1px 6px, rgba(0, 0, 0, .239216) 0 1px 4px;border-radius:2px;width:170px}#huxblog_navbar a{font-size:13px;line-height:28px}#huxblog_navbar .navbar-collapse{height:0;transform:scaleY(0);transform-origin:top right;transition:transform 400ms cubic-bezier(0.32, 1, .23, 1) 0ms;-webkit-transform:scaleY(0);-webkit-transform-origin:top right;-webkit-transition:-webkit-transform 400ms cubic-bezier(0.32, 1, .23, 1) 0ms}#huxblog_navbar li{opacity:0;transition:opacity 100ms cubic-bezier(0.23, 1, .32, 1) 0ms;-webkit-transition:opacity 100ms cubic-bezier(0.23, 1, .32, 1) 0ms}}.navbar-custom{background:none;border:none;position:absolute;top:0;left:0;width:100%;z-index:3;font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;line-height:1.7}.navbar-custom .navbar-brand{font-weight:800;color:white;height:56px;line-height:25px}.navbar-custom .navbar-brand:hover{color:rgba(255, 255, 255, .8)}.navbar-custom .nav li a{text-transform:uppercase;font-size:16px;line-height:20px;font-weight:800;letter-spacing:1px}.navbar-custom .nav li a:active{background:rgba(0, 0, 0, .12)}@media only screen and (min-width: 768px){.navbar-custom{background:transparent;border-bottom:1px solid transparent}.navbar-custom .navbar-brand{color:white;padding:20px;line-height:20px}.navbar-custom .navbar-brand:hover,.navbar-custom .navbar-brand:focus{color:rgba(255, 255, 255, .8)}.navbar-custom .nav li a{color:white;padding:20px}.navbar-custom .nav li a:hover,.navbar-custom .nav li a:focus{color:rgba(255, 255, 255, .8)}.navbar-custom .nav li a:active{background:none}}@media only screen and (min-width: 1170px){.navbar-custom{-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden}}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:inherit}.navbar-default .navbar-toggle:active{background-color:rgba(255, 255, 255, .25)}.navbar-default .navbar-toggle{border-color:transparent;padding:19px 16px;margin-top:2px;margin-right:2px;margin-bottom:2px;border-radius:50%}.navbar-default .navbar-toggle .icon-bar{width:18px;border-radius:0;background-color:white}.navbar-default .navbar-toggle .icon-bar + .icon-bar{margin-top:3px}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width: 768px){.navbar{border-radius:4px}}@media (min-width: 768px){.navbar-header{float:left}}@media only screen and (min-width: 1170px){.navbar-custom{-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.navbar-custom.is-fixed{position:fixed;top:-61px;background-color:rgba(255, 255, 255, .9);border-bottom:1px solid #f2f2f2;-webkit-transition:-webkit-transform .3s;-moz-transition:-moz-transform .3s;transition:transform .3s}.navbar-custom.is-fixed .navbar-brand{color:#404040}.navbar-custom.is-fixed .navbar-brand:hover,.navbar-custom.is-fixed .navbar-brand:focus{color:#0085a1}.navbar-custom.is-fixed .nav li a{color:#404040}.navbar-custom.is-fixed .nav li a:hover,.navbar-custom.is-fixed .nav li a:focus{color:#0085a1}.navbar-custom.is-visible{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}
2 | }@media only screen and (min-width: 1170px){.navbar-custom{-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.navbar-custom.is-fixed{position:fixed;top:-61px;background-color:rgba(255, 255, 255, .9);border-bottom:1px solid #f2f2f2;-webkit-transition:-webkit-transform .3s;-moz-transition:-moz-transform .3s;transition:transform .3s}.navbar-custom.is-fixed .navbar-brand{color:#404040}.navbar-custom.is-fixed .navbar-brand:hover,.navbar-custom.is-fixed .navbar-brand:focus{color:#0085a1}.navbar-custom.is-fixed .nav li a{color:#404040}.navbar-custom.is-fixed .nav li a:hover,.navbar-custom.is-fixed .nav li a:focus{color:#0085a1}.navbar-custom.is-visible{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .1);box-shadow:inset 0 1px 0 rgba(255, 255, 255, .1)}@media (min-width: 768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-fixed-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width: 480px) and (orientation: landscape){.navbar-fixed-top .navbar-collapse{max-height:200px}}.container-fluid > .navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width: 768px){.container-fluid > .navbar-header{margin-right:0;margin-left:0}}.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width: 768px){.navbar-fixed-top{border-radius:0}}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}@media (min-width: 768px){.navbar > .container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar + .icon-bar{margin-top:4px}@media (min-width: 768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav > li > a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (min-width: 768px){.navbar-nav{float:left;margin:0}.navbar-nav > li{float:left}.navbar-nav > li > a{padding-top:15px;padding-bottom:15px}}@media (min-width: 768px){.navbar-right{float:right !important;margin-right:-15px}}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:hover,.navbar-default .navbar-brand:focus{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-nav > li > a{color:#777}.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:focus{color:#333;background-color:transparent}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse{border-color:#e7e7e7}.container-fluid:before,.container-fluid:after,.container:before,.container:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after{display:table;content:" "}.navbar:after,.navbar-header:after,.container-fluid:after,.container:after,.navbar-collapse:after{clear:both}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.container-fluid > .navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width: 768px){.container-fluid > .navbar-header{margin-right:0;margin-left:0}}@media (min-width: 1200px){.sidebar-container{padding-right:5%}}.sidebar-container .sidebar-header{position:relative;padding-bottom:13px;padding-top:40px;margin-left:0}.sidebar-header{margin:0 30px 0 20px;padding-top:8px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.0785)}.sidebar-header .sidebar-header-title{font-size:1.25em;font-weight:bold;color:rgba(0,0,0,0.8);height:22px;vertical-align:top}.sidebar-container{color:#bfbfbf;font-size:14px;padding-left:5%}.sidebar-container .tags a:hover{color:#0085a1 !important}.sidebar-container .tags a{border-color:#f5f5f5}.sidebar-container .tags a:hover,.sidebar-container .tags a:active{border-color:#0085a1}.sidebar-container .list-inline > li{padding-left:0}.list-inline > li{display:inline-block;padding-right:5px;padding-left:5px}.sidebar-list ul{list-style:none;padding:0}.sidebar-list-body li.sidebar-list-item:first-child{margin-top:15px}.sidebar-list-body li.sidebar-list-item{margin-top:25px;margin-bottom:0;margin-left:0}.sidebar-list .sidebar-list-item{margin:20px 0 20px 20px}.sidebar-header .sidebar-header-title:after{position:absolute;bottom:-1px;left:0;right:0;height:1px;width:70px;background:#2f2f2d;content:''}.pager li{width:40%}.pager li.next{float:right}.pager li.previous{float:left}.pager li > a{width:100%}.post-index-title{font-size:24px;font-weight:500;line-height:33px;margin-top:25px !important}@media only screen and (max-width: 767px){.navbar-default .navbar-collapse{position:absolute;right:0;border:none;background:white;box-shadow:0 5px 10px 2px rgba(0, 0, 0, .2);box-shadow:rgba(0, 0, 0, .117647) 0 1px 6px, rgba(0, 0, 0, .239216) 0 1px 4px;border-radius:2px;width:170px}#huxblog_navbar{opacity:0;transform:scaleX(0);transform-origin:top right;transition:all 200ms cubic-bezier(0.47, 0, .4, .99) 0ms;-webkit-transform:scaleX(0);-webkit-transform-origin:top right;-webkit-transition:all 200ms cubic-bezier(0.47, 0, .4, .99) 0ms}#huxblog_navbar a{font-size:13px;line-height:28px}#huxblog_navbar .navbar-collapse{height:0;transform:scaleY(0);transform-origin:top right;transition:transform 400ms cubic-bezier(0.32, 1, .23, 1) 0ms;-webkit-transform:scaleY(0);-webkit-transform-origin:top right;-webkit-transition:-webkit-transform 400ms cubic-bezier(0.32, 1, .23, 1) 0ms}#huxblog_navbar li{opacity:0;transition:opacity 100ms cubic-bezier(0.23, 1, .32, 1) 0ms;-webkit-transition:opacity 100ms cubic-bezier(0.23, 1, .32, 1) 0ms}#huxblog_navbar.in{transform:scaleX(1);-webkit-transform:scaleX(1);opacity:1;transition:all 250ms cubic-bezier(0.23, 1, .32, 1) 0ms;-webkit-transition:all 250ms cubic-bezier(0.23, 1, .32, 1) 0ms}#huxblog_navbar.in .navbar-collapse{transform:scaleY(1);-webkit-transform:scaleY(1);transition:transform 500ms cubic-bezier(0.23, 1, .32, 1);-webkit-transition:-webkit-transform 500ms cubic-bezier(0.23, 1, .32, 1)}#huxblog_navbar.in li{opacity:1;transition:opacity 450ms cubic-bezier(0.23, 1, .32, 1) 205ms;-webkit-transition:opacity 450ms cubic-bezier(0.23, 1, .32, 1) 205ms}}.navbar-custom{background:none;border:none;position:absolute;top:0;left:0;width:100%;z-index:3;font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;line-height:1.7}.navbar-custom .navbar-brand{font-weight:800;color:white;height:56px;line-height:25px}.navbar-custom .navbar-brand:hover{color:rgba(255, 255, 255, .8)}.navbar-custom .nav li a{text-transform:uppercase;font-size:16px;line-height:20px;font-weight:800;letter-spacing:1px}
3 | .navbar-custom .nav li a:active{background:rgba(0, 0, 0, .12)}@media only screen and (min-width: 768px){.navbar-custom{background:transparent;border-bottom:1px solid transparent}.navbar-custom .navbar-brand{color:white;padding:20px;line-height:20px}.navbar-custom .navbar-brand:hover,.navbar-custom .navbar-brand:focus{color:rgba(255, 255, 255, .8)}.navbar-custom .nav li a{color:white;padding:20px}.navbar-custom .nav li a:hover,.navbar-custom .nav li a:focus{color:rgba(255, 255, 255, .8)}.navbar-custom .nav li a:active{background:none}}@media only screen and (min-width: 1170px){.navbar-custom{-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden}}.intro-header{background:no-repeat center center;background-color:#ccc;background-attachment:scroll;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;margin-bottom:0}@media only screen and (min-width: 768px){.intro-header{margin-bottom:20px}}.intro-header .site-heading,.intro-header .post-heading{padding:85px 0 55px;color:white}@media only screen and (min-width: 768px){.intro-header .site-heading,.intro-header .post-heading{padding:125px 0}}.intro-header .site-heading{padding:95px 0 70px}@media only screen and (min-width: 768px){.intro-header .site-heading{padding:125px 0}}.intro-header .site-heading{text-align:center}.intro-header .site-heading h1{margin-top:0;font-size:50px}.intro-header .site-heading .subheading{font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;line-height:1.7;font-size:24px;line-height:1.1;display:block;font-weight:300;margin:10px 0 0}@media only screen and (min-width: 768px){.intro-header .site-heading h1{font-size:80px}}.intro-header .post-heading h1{font-size:30px;margin-bottom:24px}.intro-header .post-heading .meta{line-height:1.1;display:block}.intro-header .post-heading .meta{font-family:'Lora', 'Times New Roman', serif;font-style:italic;font-weight:300;font-size:18px}@media only screen and (min-width: 768px){.intro-header .post-heading h1{font-size:45px}.intro-header .post-heading .meta{font-size:20px}}.post-content-preview{color:#818181;line-height:1.8;font-size:16px !important;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;font-weight:500}.post-content-preview:hover{color:#0085a1}@media only screen and (min-width: 768px){.post-content-preview{font-size:14px}}.list-inline{padding-left:0;margin-left:-5px;list-style:none}footer{font-size:20px;padding:50px 0 65px}footer .list-inline{margin:0;padding:0;margin-bottom:16px}.floating-label-form-group::not(:first-child){padding-left:14px;border-left:1px solid #eee}.pager{margin:20px 0 0 !important;padding:0 !important;text-align:center;list-style:none;height:86px}.pager li > a{font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;line-height:1.7;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:1px;padding:10px;background-color:white;border-radius:0;display:inline-block;border:1px solid}@media only screen and (min-width: 768px){.pager li > a{font-size:14px;padding:15px 25px}}.pager li > a{color:#404040}.pager li > a:hover,.pager li > a:focus{color:white;background-color:#0085a1;border:1px solid #0085a1}::-moz-selection{color:white;text-shadow:none;background:#0085a1}::selection{color:white;text-shadow:none;background:#0085a1}img::selection{color:white;background:transparent}img::-moz-selection{color:white;background:transparent}.tags{margin-bottom:-5px}.tags a{display:inline-block;border:1px solid #f5f5f5;border-radius:2px;padding:5px 10px;color:rgba(0, 0, 0, .6);line-height:22px;font-size:14px;text-decoration:none;margin:0 1px;margin-bottom:6px}.tags a:hover,.tags a:active{color:white;border-color:white;background-color:rgba(255, 255, 255, .4);text-decoration:none}@media only screen and (min-width: 768px){.tags a{margin-right:5px}}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:inherit}.navbar-default .navbar-toggle:active{background-color:rgba(255, 255, 255, .25)}.navbar-default .navbar-toggle{border-color:transparent;padding:19px 16px;margin-top:2px;margin-right:2px;margin-bottom:2px;border-radius:50%}.navbar-default .navbar-toggle .icon-bar{width:18px;border-radius:0;background-color:white}.navbar-default .navbar-toggle .icon-bar + .icon-bar{margin-top:3px}.nav>li{position:relative;display:block}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li>a{position:relative;display:block;padding:10px 15px}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 768px){.container{width:750px}}@media (min-width: 992px){.container{width:970px}}@media (min-width: 1200px){.container{width:1170px}}.col-lg-8,.col-md-10{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.row{margin-right:15px;margin-left:15px}code{white-space:inherit}textarea{width:100%;border-radius:2px;border:1px solid #bdc3c7}@media only screen and (max-width: 1023px){.am-u-sm-10{display:none}}@media only screen and (min-width: 1025px){.am-u-lg-4{display:block}}.text-center{text-align:center}img{max-width:100%}code{font-size:90%}.article-trigger h2::before{font-weight:600;position:absolute;content:'#';left:-5px;color:#337ab7}.article-trigger h3::before{font-weight:500;position:absolute;content:'#';left:0;color:#337ab7}.topic-header{padding-bottom:0;display:flex;display:-webkit-flex;display:-ms-flexbox;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:0}.pull-left{float:left !important}.blog-flex-center{display:-ms-flexbox !important;display:-webkit-box !important;display:flex !important;-ms-flex-align:center !important;-webkit-box-align:center !important;align-items:center !important}.blog-flex0{-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;display:flex;display:-webkit-box;display:-ms-flexbox}.link{color:inherit;text-decoration:none;cursor:pointer}.avatar{display:block;white-space:nowrap;overflow:visible;text-overflow:ellipsis;line-height:normal;position:relative}.avatar-image{display:inline-block;vertical-align:middle;border-radius:50%;width:36px;height:36px}.blog-flex1{-ms-flex:1 1 auto;-webkit-box-flex:1;flex:1 1 auto}.author-lockup{font-size:16px;line-height:1.4;padding-left:10px;text-rendering:auto}.topic-header .author-lockup{height:20px;display:inline-table;line-height:20px}.pull-right{float:right !important}.topic-header .time{font-size:16px;color:#C7C7C7;line-height:36px}.time{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.topic-header .author-lockup a{font-size:16px;color:#46466E;display:inline;cursor:pointer;text-decoration:none}.topic-header .author-lockup .in{font-size:16px;color:#C7C7C7;line-height:20px;margin-left:8px}.category-name a{font-size:16px;color:#46466E;display:inline;cursor:pointer;text-decoration:none;margin-left:4px}
4 | .footer-icon{background-color:transparent !important}.am-icon-btn{background-color:transparent;color:#666}.clearfix:after,.clearfix:before{display:table;content:" "}@media only screen and (max-width: 750px){span.time.pc_time{display:none !important}span.time.mobile_time{display:inline-block !important}.author-lockup{margin-right:20px}.topic-footer{margin-top:27px;line-height:20px}}@media only screen and (min-width: 750px){span.time.pc_time{display:inline-block !important;font-size:16px;color:#C7C7C7;line-height:36px}span.time.mobile_time{display:none !important}}.post-tags  a{color:#fff !important}.archive-page{padding:20px 15% 0}.archive-page .categorys-title{font-size:16px;position:relative;margin:10px auto;padding:0 30px;color:#46466E}.archive-page .categorys-title::before{position:absolute;font-weight:600;top:0;left:-15px;padding:0 30px;content:'#';color:#337ab7}.archive-page .post-list-item-container{border:1px solid rgba(184,197,214,.2);border-radius:3px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04)}.archive-page .post-list-item-container .item-label{height:95px;background:#fff}.archive-page .post-list-item-container .item-label .item-title a{font-size:14px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#404040}.archive-page .post-list-item-container .item-label .item-meta .item-meta-date{padding-bottom:5px;padding-left:5px;color:#46466E}.clearfix:after,.clearfix:before{display:table;content:''}.clearfix:after{clear:both}.clearfix{zoom:1}.post-lists{position:relative;display:block;overflow:hidden}.post-lists-body{display:block}.post-list-item{float:left;width:33.3333%;height:auto;padding:15px;align-items:center}.post-list-item-container{position:relative;overflow:hidden;width:100%;padding:0;border-radius:3px;background-color:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04)}.post-list-item-container:hover{-webkit-box-shadow:2px 2px 4px rgba(0,0,0,.1);box-shadow:2px 2px 4px rgba(0,0,0,.1)}.post-list-item-container .item-label{position:relative;height:130px;padding:25px 20px 40px;background-color:#fff}.post-list-item-container .item-label .item-title a{font-size:17px;line-height:17px;word-break:break-all;color:#404040}.post-list-item-container .item-label .item-meta{position:absolute;right:0;bottom:0;width:100%;padding:0 15px 15px;text-align:right}.post-list-item-container .item-label .item-meta .item-meta-date{font-size:12px;position:relative;float:left;padding-top:9px;padding-left:9px;text-align:right;text-transform:none;color:#f1f1f1}@media(max-width: 580px){.post-list-item{width:100%;padding:10px 20px}.post-list-item:first-child{padding-top:20px}.archive-page .post-list-item:first-child{padding-top:0}.archive-page .post-list-item:last-child{padding-bottom:0}}@media(max-width: 880px){.archive-page{padding:20px 0 0 0}.post-list-item{width:50%;padding:0 7.5px 10px 7.5px}.post-list-item:nth-child(odd){padding-left:15px}.post-list-item:nth-child(even){padding-right:15px}}.navbar-search{line-height:60px;height:60px;display:inline-block;padding:0 40px 0 15px;cursor:pointer;color:#fff}.navbar-mobile-search{line-height:56px;float:right;color:#fff}@media (min-width: 768px){.navbar-mobile-search{display:none}}@media (min-width: 768px){.navbar-search{display:none}}.search-page .search-box{margin-top:3rem;line-height:40px;position:relative;top:-1px;display:inline-block;width:100%;height:40px;padding:0;border:none;border-radius:3px}.search-page .search-box .input{font-size:14px;line-height:40px;position:absolute;top:0;left:0;width:100%;height:40px;padding:0 40px 0 18px;color:#313131;border:1px solid rgba(184,197,214,.2);border-radius:2px;outline:0;background-color:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04);-webkit-appearance:none}.search-page .search-box .spsubmit{line-height:35px;float:right;margin-right:15px;outline:0;background-color:transparent}.search-page .search-tags{margin:0;padding:15px 0;text-align:center}.search-page .search-tags a{font-size:14px;display:inline-block;border:1px solid #f5f5f5;color:rgba(0, 0, 0, .6);line-height:22px;text-decoration:none;margin:10px 8px 0 0;padding:2px 15px;-webkit-transition-duration:.4s;transition-duration:.4s;letter-spacing:0;border-radius:2px;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04)}.search-page .search-tags-hr{display:block;width:55px;height:2px;margin:20px auto 10px}#comments .lists-navigator{margin:20px 0}#comments .lists-navigator ol{margin:20px 0;padding:0 10px;list-style:none;text-align:center}#comments .lists-navigator ol li.current a{color:#46466E}.comment-container{position:relative;z-index:1;color:#5f5f5f;max-width:1170px;padding:0 15px 0 15px;margin:0 auto}#comments{max-width:1170px;margin:0 auto;padding:0 20px}#comments .page-navigator{margin:0}#comments a{color:#5f5f5f}#comments .response{font-size:14px;font-weight:400;display:block;padding:30px 0 30px 20px;color:#5f5f5f}#comments .response a{color:#46466E}.comment-list{margin:0;padding-left:0;list-style-type:none}.comment-parent{margin:20px 0;border:1px solid rgba(184,197,214,.2);border-radius:3px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04)}.comment-parent:last-child{margin:20px 0 0}.comment-parent:first-child{margin:0}.comment-child,.comment-child2{border-top:1px solid rgba(184,197,214,.2)}.comment-view{padding:20px;cursor:pointer}.comment-header{display:inline-block;width:100%}.comment-header .avatar{display:inline-block;float:left;width:40px;height:40px;border:1px solid #eaeaea;border-radius:50%}.comment-header .comment-author{font-size:13px;line-height:45px;display:inline-block;float:left;margin:0 20px}.comment-header .comment-by-author a{color:#46466E!important}.comment-content{margin-bottom:10px;color:#313131}.comment-meta{font-size:12px}.comment-meta .comment-reply{display:none;float:right}.comment-meta .comment-reply a{color:#46466E!important}.comment-view:hover .comment-meta .comment-reply{display:block}.comment-parent>.comment-children .avatar{width:34px;height:34px;margin:3px 0 0 3px}.comment-parent>.comment-children .comment-author-at{float:left;margin-right:5px}.comment-parent>.comment-children .comment-content{margin:-3px 3px 10px}.comment-parent>.comment-children .comment-meta{margin:0 3px}.comment-form{position:relative;margin:0 0 40px;padding:10px 20px;border-radius:3px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04)}.comment-form .form-control{font-size:13px;display:block;width:100%;height:34px;color:#313131;outline:0}.comment-form .form-control:focus{border-color:#46466E;outline:0}.comment-form textarea.form-control{overflow:hidden;height:150px;padding:10px 0;resize:none;border-radius:0}.comment-form .input-control{float:left;width:100%;max-width:206px;border-bottom:1px dashed #ddd;border-radius:0}.comment-form .submit{font-size:13px;position:absolute;right:20px;bottom:20px;display:block;height:32px;margin:0 auto;padding:0 20px;-webkit-transition-duration:.4s;transition-duration:.4s;text-align:center;color:#313131;border:1px solid #f7f7f7;border-radius:30px;background-color:#f7f7f7}.comment-form .submit:hover,.submit:active,.submit:active:focus,.submit:focus{color:#46466E;border:1px solid #46466E;outline-style:none;background-color:#fff}#directory{all:initial}#directory *{all:unset}#directory{display:flex;flex-direction:column;align-items:stretch;position:fixed;right:0;top:25%;max-width:3em;max-height:7em;z-index:0;box-sizing:border-box;background-color:#fff;color:gray;font-size:calc(12px + .1vw);font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;font-weight:normal;border:1px solid rgba(158, 158, 158, .22);-webkit-font-smoothing:subpixel-antialiased;font-smoothing:subpixel-antialiased;overflow:hidden;will-change:transform, max-width;transition:max-width .3s;contain:content}
5 | #directory:hover{max-width:33vw;max-height:calc(100vh - 100px)}#directory.hidden{display:none}#directory .handle{-webkit-user-select:none;user-select:none;border-bottom:1px solid rgba(158, 158, 158, .22);padding:.1em .7em;font-variant-caps:inherit;font-variant:small-caps;font-size:.9em;color:#bbb;cursor:pointer;text-align:center;opacity:0;will-change:opacity;transition:opacity .3s}#directory:hover .handle{max-width:33vw;opacity:1}#directory .handle:hover,#directory .handle:active{cursor:move}#directory .handle:active{background:#f9f9f9}#directory > ul{flex-grow:1;padding:1.3em 1.3em 1.3em 1em;overflow-y:auto}#directory ul,#directory li{list-style:none;display:block}#directory a{text-decoration:none;color:gray;display:block;line-height:1.3;padding-top:.2em;padding-bottom:.2em;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}#directory a:hover,#directory a:active{border-left-color:rgba(86, 61, 124, .5);color:#563d7c}#directory li.active > a{border-left-color:#563d7c;color:#563d7c}#directory ul{line-height:2;overflow:hidden}#directory ul a{font-size:1em;padding-left:1.3em}#directory ul a:hover,#directory ul a:active,#directory ul li.active > a{border-left-width:3px;border-left-style:solid;padding-left:calc(1.3em - 3px)}#directory ul li.active > a{font-weight:700}#directory ul ul{line-height:1.8}#directory.lengthy ul ul{display:none}#directory.lengthy ul li.active > ul{display:block}#directory ul ul a{font-size:1em;padding-left:2.7em}#directory ul ul a:hover,#directory ul ul a:active,#directory ul ul li.active > a{border-left-width:2px;border-left-style:solid;padding-left:calc(2.7em - 2px);font-weight:normal}#directory ul ul ul{line-height:1.7;display:none}#directory ul ul li.active > ul{display:block}#directory ul ul ul a{font-size:1em;padding-left:4em}#directory ul ul ul a:hover,#directory ul ul ul a:active,#directory ul ul ul li.active > a{border-left-width:1px;border-left-style:solid;padding-left:calc(4em - 1px);font-weight:normal}.directory-content{position:relative;z-index:0;max-width:720px;margin-right:auto!important;margin-left:auto!important;text-align:right;opacity:0}.directory-content.initial{opacity:0}.directory-content.pinned{opacity:1}.directory-content.unpinned{opacity:1}.directory-content.headroom--top{opacity:0}.directory-content.headroom--not-top{-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;opacity:1}@media only screen and (min-width: 750px){pre{max-width:80%}}@media(max-width: 1000px){.directory-content{display:none}}


--------------------------------------------------------------------------------
/css/customui.css:
--------------------------------------------------------------------------------
   1 | a {
   2 |   color:#404040
   3 | }
   4 | a:hover,
   5 | a:focus {
   6 |   color:#42b983
   7 | }
   8 | #blog {
   9 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif !important;
  10 | }
  11 | #blog hr {
  12 |   margin:.6rem 0
  13 | }
  14 | .blog-text-center {
  15 |   text-align:center;
  16 |   font-size: 14px;
  17 | }
  18 | @media only screen and (min-width: 1200px) {
  19 |   .blog-fixed {
  20 |       max-width:1200px
  21 |   }
  22 | }
  23 | .blog-entry-article {
  24 |   margin:3rem 0;
  25 |   padding-bottom:3rem;
  26 |   border-bottom:1px solid #e5e5e5
  27 | }
  28 | .blog-entry-text {
  29 |   padding:0 1rem
  30 | }
  31 | .blog-entry-text h1 {
  32 |   margin-top:0;
  33 |   color:#2D2D2F;
  34 | }
  35 | .blog-footer {
  36 |   padding:2rem 0 2rem 0;
  37 |   margin-top:5rem;
  38 |   background-color:#273547;
  39 |   color:#fff !important
  40 | }
  41 | .blog-footer a {
  42 |   color:#fff
  43 | }
  44 | .blog-footer span {
  45 |   color:#fff
  46 | }
  47 | .blog-article-p {
  48 |   margin:3rem 0
  49 | }
  50 | @media only screen and (max-width: 767px) {
  51 |   .navbar-default .navbar-collapse {
  52 |       display:block;
  53 |       position:absolute;
  54 |       right:0;
  55 |       border:none;
  56 |       background:white;
  57 |       box-shadow:0 5px 10px 2px rgba(0, 0, 0, .2);
  58 |       box-shadow:rgba(0, 0, 0, .117647) 0 1px 6px, rgba(0, 0, 0, .239216) 0 1px 4px;
  59 |       border-radius:2px;
  60 |       width:120px
  61 |   }
  62 | }
  63 | .intro-header {
  64 |   background:no-repeat center center;
  65 |   background-color:#808080;
  66 |   background-attachment:scroll;
  67 |   -webkit-background-size:cover;
  68 |   -moz-background-size:cover;
  69 |   background-size:cover;
  70 |   -o-background-size:cover;
  71 |   margin-bottom:30px;
  72 | }
  73 | .intro-header .site-heading, .intro-header .post-heading {
  74 |   padding:100px 0 50px;
  75 |   color:white
  76 | }
  77 | @media only screen and (min-width: 768px) {
  78 |   .intro-header .site-heading, .intro-header .post-heading {
  79 |       padding:80px 0 120px 0
  80 |   }
  81 | }
  82 | .intro-header .site-heading {
  83 |   text-align:center
  84 | }
  85 | .intro-header .site-heading h1 {
  86 |   margin-top:0;
  87 |   font-size:50px
  88 | }
  89 | .intro-header .site-heading .subheading {
  90 |   font-size:24px;
  91 |   line-height:1.1;
  92 |   display:block;
  93 |   font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  94 |   font-weight:300;
  95 |   margin:10px 0 0
  96 | }
  97 | @media only screen and (min-width: 768px) {
  98 |   .intro-header .site-heading h1 {
  99 |       font-size:80px
 100 |   }
 101 | }
 102 | .intro-header .post-heading h1 {
 103 |   font-size:35px
 104 | }
 105 | .intro-header .post-heading .meta {
 106 |   line-height:1.1;
 107 |   display:block
 108 | }
 109 | .intro-header .post-heading .meta {
 110 |   font-family:'Lora', 'Times New Roman', serif;
 111 |   font-style:italic;
 112 |   font-weight:300;
 113 |   font-size:20px
 114 | }
 115 | @media only screen and (min-width: 768px) {
 116 |   .intro-header {
 117 |       margin-bottom:20px
 118 |   }
 119 |   .intro-header .post-heading h1 {
 120 |       font-size:45px
 121 |   }
 122 | }
 123 | input {
 124 |   outline:none;
 125 |   border: 1px solid #bdc3c7;
 126 |   border-radius: 2px;
 127 |   box-shadow: none;
 128 |   width: 100%;
 129 | }
 130 | input::-webkit-search-decoration, input::-webkit-search-cancel-button {
 131 |   display:none
 132 | }
 133 | input:-moz-placeholder {
 134 |   color:#999
 135 | }
 136 | input::-webkit-input-placeholder {
 137 |   color:#999
 138 | }
 139 | #comments {
 140 |   padding-top:15px
 141 | }
 142 | @media only screen and (min-width: 750px) {
 143 |   .comment-input {
 144 |     padding: 0 !important;
 145 |   }
 146 | }
 147 | .comment-list, .comment-list ol {
 148 |   list-style:none;
 149 |   margin:0;
 150 |   padding:0
 151 | }
 152 | .comment-list li {
 153 |   padding:14px;
 154 |   margin-top:10px;
 155 |   border:1px solid #EEE
 156 | }
 157 | .comment-list li.comment-level-odd {
 158 |   background:#F9FBFC
 159 | }
 160 | .comment-list li.comment-level-even {
 161 |   background:#FFF
 162 | }
 163 | .comment-list li.comment-by-author {
 164 |   background:#FFF9E8
 165 | }
 166 | .comment-list li .comment-reply {
 167 |   text-align:right;
 168 |   font-size:.92857em
 169 | }
 170 | .comment-meta a {
 171 |   color:#999;
 172 |   font-size:.92857em
 173 | }
 174 | .comment-author {
 175 |   display:block;
 176 |   margin-bottom:3px;
 177 |   color:#444
 178 | }
 179 | .comment-author cite {
 180 |   font-weight:bold;
 181 |   font-style:normal
 182 | }
 183 | .respond .cancel-comment-reply {
 184 |   float:right;
 185 |   margin-top:15px;
 186 |   font-size:.92857em
 187 | }
 188 | #comment-form label {
 189 |   display:block;
 190 |   margin-bottom:.5em;
 191 |   margin-top:.5em;
 192 |   font-weight:bold
 193 | }
 194 | #comment-form .required:after {
 195 |   content:" *";
 196 |   color:#C00
 197 | }
 198 | .tags {
 199 | margin-top: 20px;
 200 | margin-bottom: -5px;
 201 | }
 202 | .tags a {
 203 | display: inline-block;
 204 | border: 1px solid rgba(255, 255, 255, 0.8);
 205 | border-radius: 999em;
 206 | padding: 0 10px;
 207 | color: #ffffff;
 208 | line-height: 24px;
 209 | text-decoration: none;
 210 | margin: 0 1px;
 211 | margin-bottom: 6px;
 212 | }
 213 | .tags a:hover,
 214 | .tags a:active {
 215 | color: white;
 216 | border-color: white;
 217 | background-color: rgba(255, 255, 255, 0.4);
 218 | text-decoration: none;
 219 | }
 220 | @media only screen and (min-width: 768px) {
 221 | .tags a {
 222 |   margin-right: 5px;
 223 | }
 224 | }
 225 | @media only screen and (max-width: 767px) {
 226 | /**
 227 |  * Layout
 228 |  * Since V1.6 we use absolute positioning to prevent to expand container-fluid
 229 |  * which would cover tags. A absolute positioning make a new layer.
 230 |  */
 231 | .navbar-default .navbar-collapse {
 232 |   position: absolute;
 233 |   right: 0;
 234 |   border: none;
 235 |   background: white;
 236 |   box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
 237 |   box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
 238 |   border-radius: 2px;
 239 |   width: 170px;
 240 | }
 241 | #huxblog_navbar a {
 242 |   font-size: 13px;
 243 |   line-height: 28px;
 244 | }
 245 | #huxblog_navbar .navbar-collapse {
 246 |   height: 0px;
 247 |   transform: scaleY(0);
 248 |   transform-origin: top right;
 249 |   transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
 250 |   -webkit-transform: scaleY(0);
 251 |   -webkit-transform-origin: top right;
 252 |   -webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
 253 | }
 254 | #huxblog_navbar li {
 255 |   opacity: 0;
 256 |   transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 257 |   -webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 258 | }
 259 | }
 260 | .navbar-custom {
 261 | background: none;
 262 | border: none;
 263 | position: absolute;
 264 | top: 0;
 265 | left: 0;
 266 | width: 100%;
 267 | z-index: 3;
 268 | /* Hux learn from
 269 |    *     TypeIsBeautiful,
 270 |    *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
 271 |    */
 272 | font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
 273 | line-height: 1.7;
 274 | }
 275 | .navbar-custom .navbar-brand {
 276 | font-weight: 800;
 277 | color: white;
 278 | height: 56px;
 279 | line-height: 25px;
 280 | }
 281 | .navbar-custom .navbar-brand:hover {
 282 | color: rgba(255, 255, 255, 0.8);
 283 | }
 284 | .navbar-custom .nav li a {
 285 | text-transform: uppercase;
 286 | font-size: 16px;
 287 | line-height: 20px;
 288 | font-weight: 800;
 289 | letter-spacing: 1px;
 290 | }
 291 | .navbar-custom .nav li a:active {
 292 | background: rgba(0, 0, 0, 0.12);
 293 | }
 294 | @media only screen and (min-width: 768px) {
 295 | .navbar-custom {
 296 |   background: transparent;
 297 |   border-bottom: 1px solid transparent;
 298 | }
 299 | .navbar-custom .navbar-brand {
 300 |   color: white;
 301 |   padding: 20px;
 302 |   line-height: 20px;
 303 | }
 304 | .navbar-custom .navbar-brand:hover,
 305 | .navbar-custom .navbar-brand:focus {
 306 |   color: rgba(255, 255, 255, 0.8);
 307 | }
 308 | .navbar-custom .nav li a {
 309 |   color: white;
 310 |   padding: 20px;
 311 | }
 312 | .navbar-custom .nav li a:hover,
 313 | .navbar-custom .nav li a:focus {
 314 |   color: rgba(255, 255, 255, 0.8);
 315 | }
 316 | .navbar-custom .nav li a:active {
 317 |   background: none;
 318 | }
 319 | }
 320 | @media only screen and (min-width: 1170px) {
 321 | .navbar-custom {
 322 |   -webkit-transition: background-color 0.3s;
 323 |   -moz-transition: background-color 0.3s;
 324 |   transition: background-color 0.3s;
 325 |   /* Force Hardware Acceleration in WebKit */
 326 |   -webkit-transform: translate3d(0, 0, 0);
 327 |   -moz-transform: translate3d(0, 0, 0);
 328 |   -ms-transform: translate3d(0, 0, 0);
 329 |   -o-transform: translate3d(0, 0, 0);
 330 |   transform: translate3d(0, 0, 0);
 331 |   -webkit-backface-visibility: hidden;
 332 |   backface-visibility: hidden;
 333 | }
 334 | }
 335 | /* Hux Optimize UserExperience */
 336 | .navbar-default .navbar-toggle:focus,
 337 | .navbar-default .navbar-toggle:hover {
 338 | background-color: inherit;
 339 | }
 340 | .navbar-default .navbar-toggle:active {
 341 | background-color: rgba(255, 255, 255, 0.25);
 342 | }
 343 | /* Hux customize Style for navBar button */
 344 | .navbar-default .navbar-toggle {
 345 | border-color: transparent;
 346 | padding: 19px 16px;
 347 | margin-top: 2px;
 348 | margin-right: 2px;
 349 | margin-bottom: 2px;
 350 | border-radius: 50%;
 351 | }
 352 | .navbar-default .navbar-toggle .icon-bar {
 353 | width: 18px;
 354 | border-radius: 0px;
 355 | background-color: white;
 356 | }
 357 | .navbar-default .navbar-toggle .icon-bar + .icon-bar {
 358 | margin-top: 3px;
 359 | }
 360 | .navbar {
 361 | position: relative;
 362 | min-height: 50px;
 363 | margin-bottom: 20px;
 364 | border: 1px solid transparent;
 365 | }
 366 | @media (min-width: 768px) {
 367 | .navbar {
 368 |   border-radius: 4px;
 369 | }
 370 | }
 371 | @media (min-width: 768px) {
 372 | .navbar-header {
 373 |   float: left;
 374 | }
 375 | }
 376 | @media only screen and (min-width: 1170px) {
 377 |   .navbar-custom {
 378 |     -webkit-transition: background-color 0.3s;
 379 |     -moz-transition: background-color 0.3s;
 380 |     transition: background-color 0.3s;
 381 |     /* Force Hardware Acceleration in WebKit */
 382 |     -webkit-transform: translate3d(0, 0, 0);
 383 |     -moz-transform: translate3d(0, 0, 0);
 384 |     -ms-transform: translate3d(0, 0, 0);
 385 |     -o-transform: translate3d(0, 0, 0);
 386 |     transform: translate3d(0, 0, 0);
 387 |     -webkit-backface-visibility: hidden;
 388 |     backface-visibility: hidden;
 389 |   }
 390 |   .navbar-custom.is-fixed {
 391 |     /* when the user scrolls down, we hide the header right above the viewport */
 392 |     position: fixed;
 393 |     top: -61px;
 394 |     background-color: rgba(255, 255, 255, 0.9);
 395 |     border-bottom: 1px solid #f2f2f2;
 396 |     -webkit-transition: -webkit-transform 0.3s;
 397 |     -moz-transition: -moz-transform 0.3s;
 398 |     transition: transform 0.3s;
 399 |   }
 400 |   .navbar-custom.is-fixed .navbar-brand {
 401 |     color: #404040;
 402 |   }
 403 |   .navbar-custom.is-fixed .navbar-brand:hover,
 404 |   .navbar-custom.is-fixed .navbar-brand:focus {
 405 |     color: #0085a1;
 406 |   }
 407 |   .navbar-custom.is-fixed .nav li a {
 408 |     color: #404040;
 409 |   }
 410 |   .navbar-custom.is-fixed .nav li a:hover,
 411 |   .navbar-custom.is-fixed .nav li a:focus {
 412 |     color: #0085a1;
 413 |   }
 414 |   .navbar-custom.is-visible {
 415 |     /* if the user changes the scrolling direction, we show the header */
 416 |     -webkit-transform: translate3d(0, 100%, 0);
 417 |     -moz-transform: translate3d(0, 100%, 0);
 418 |     -ms-transform: translate3d(0, 100%, 0);
 419 |     -o-transform: translate3d(0, 100%, 0);
 420 |     transform: translate3d(0, 100%, 0);
 421 |   }
 422 | }
 423 | @media only screen and (min-width: 1170px) {
 424 |   .navbar-custom {
 425 |     -webkit-transition: background-color 0.3s;
 426 |     -moz-transition: background-color 0.3s;
 427 |     transition: background-color 0.3s;
 428 |     /* Force Hardware Acceleration in WebKit */
 429 |     -webkit-transform: translate3d(0, 0, 0);
 430 |     -moz-transform: translate3d(0, 0, 0);
 431 |     -ms-transform: translate3d(0, 0, 0);
 432 |     -o-transform: translate3d(0, 0, 0);
 433 |     transform: translate3d(0, 0, 0);
 434 |     -webkit-backface-visibility: hidden;
 435 |     backface-visibility: hidden;
 436 |   }
 437 |   .navbar-custom.is-fixed {
 438 |     /* when the user scrolls down, we hide the header right above the viewport */
 439 |     position: fixed;
 440 |     top: -61px;
 441 |     background-color: rgba(255, 255, 255, 0.9);
 442 |     border-bottom: 1px solid #f2f2f2;
 443 |     -webkit-transition: -webkit-transform 0.3s;
 444 |     -moz-transition: -moz-transform 0.3s;
 445 |     transition: transform 0.3s;
 446 |   }
 447 |   .navbar-custom.is-fixed .navbar-brand {
 448 |     color: #404040;
 449 |   }
 450 |   .navbar-custom.is-fixed .navbar-brand:hover,
 451 |   .navbar-custom.is-fixed .navbar-brand:focus {
 452 |     color: #0085a1;
 453 |   }
 454 |   .navbar-custom.is-fixed .nav li a {
 455 |     color: #404040;
 456 |   }
 457 |   .navbar-custom.is-fixed .nav li a:hover,
 458 |   .navbar-custom.is-fixed .nav li a:focus {
 459 |     color: #0085a1;
 460 |   }
 461 |   .navbar-custom.is-visible {
 462 |     /* if the user changes the scrolling direction, we show the header */
 463 |     -webkit-transform: translate3d(0, 100%, 0);
 464 |     -moz-transform: translate3d(0, 100%, 0);
 465 |     -ms-transform: translate3d(0, 100%, 0);
 466 |     -o-transform: translate3d(0, 100%, 0);
 467 |     transform: translate3d(0, 100%, 0);
 468 |   }
 469 | }
 470 | .navbar-collapse {
 471 | padding-right: 15px;
 472 | padding-left: 15px;
 473 | overflow-x: visible;
 474 | -webkit-overflow-scrolling: touch;
 475 | border-top: 1px solid transparent;
 476 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
 477 |         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
 478 | }
 479 | @media (min-width: 768px) {
 480 | .navbar-collapse {
 481 |   width: auto;
 482 |   border-top: 0;
 483 |   -webkit-box-shadow: none;
 484 |           box-shadow: none;
 485 | }
 486 | .navbar-fixed-top .navbar-collapse {
 487 |   padding-right: 0;
 488 |   padding-left: 0;
 489 | }
 490 | }
 491 | .navbar-fixed-top .navbar-collapse {
 492 | max-height: 340px;
 493 | }
 494 | @media (max-device-width: 480px) and (orientation: landscape) {
 495 | .navbar-fixed-top .navbar-collapse {
 496 |   max-height: 200px;
 497 | }
 498 | }
 499 | .container-fluid > .navbar-header {
 500 | margin-right: -15px;
 501 | margin-left: -15px;
 502 | }
 503 | @media (min-width: 768px) {
 504 | .container-fluid > .navbar-header {
 505 |   margin-right: 0;
 506 |   margin-left: 0;
 507 | }
 508 | }
 509 | .navbar-fixed-top {
 510 | position: fixed;
 511 | right: 0;
 512 | left: 0;
 513 | z-index: 1030;
 514 | }
 515 | @media (min-width: 768px) {
 516 | .navbar-fixed-top {
 517 |   border-radius: 0;
 518 | }
 519 | }
 520 | .navbar-brand {
 521 | float: left;
 522 | height: 50px;
 523 | padding: 15px 15px;
 524 | font-size: 18px;
 525 | line-height: 20px;
 526 | }
 527 | .navbar-brand:hover,
 528 | .navbar-brand:focus {
 529 | text-decoration: none;
 530 | }
 531 | @media (min-width: 768px) {
 532 | .navbar > .container-fluid .navbar-brand {
 533 |   margin-left: -15px;
 534 | }
 535 | }
 536 | .navbar-toggle {
 537 | position: relative;
 538 | float: right;
 539 | padding: 9px 10px;
 540 | margin-top: 8px;
 541 | margin-right: 15px;
 542 | margin-bottom: 8px;
 543 | background-color: transparent;
 544 | background-image: none;
 545 | border: 1px solid transparent;
 546 | border-radius: 4px;
 547 | }
 548 | .navbar-toggle:focus {
 549 | outline: 0;
 550 | }
 551 | .navbar-toggle .icon-bar {
 552 | display: block;
 553 | width: 22px;
 554 | height: 2px;
 555 | border-radius: 1px;
 556 | }
 557 | .navbar-toggle .icon-bar + .icon-bar {
 558 | margin-top: 4px;
 559 | }
 560 | @media (min-width: 768px) {
 561 | .navbar-toggle {
 562 |   display: none;
 563 | }
 564 | }
 565 | .navbar-nav {
 566 | margin: 7.5px -15px;
 567 | }
 568 | .navbar-nav > li > a {
 569 | padding-top: 10px;
 570 | padding-bottom: 10px;
 571 | line-height: 20px;
 572 | }
 573 | @media (min-width: 768px) {
 574 | .navbar-nav {
 575 |   float: left;
 576 |   margin: 0;
 577 | }
 578 | .navbar-nav > li {
 579 |   float: left;
 580 | }
 581 | .navbar-nav > li > a {
 582 |   padding-top: 15px;
 583 |   padding-bottom: 15px;
 584 | }
 585 | }
 586 | @media (min-width: 768px) {
 587 | .navbar-right {
 588 |   float: right !important;
 589 |   margin-right: -15px;
 590 | }
 591 | }
 592 | .navbar-default .navbar-brand {
 593 | color: #777;
 594 | }
 595 | .navbar-default .navbar-brand:hover,
 596 | .navbar-default .navbar-brand:focus {
 597 | color: #5e5e5e;
 598 | background-color: transparent;
 599 | }
 600 | .navbar-default .navbar-nav > li > a {
 601 | color: #777;
 602 | }
 603 | .navbar-default .navbar-nav > li > a:hover,
 604 | .navbar-default .navbar-nav > li > a:focus {
 605 | color: #333;
 606 | background-color: transparent;
 607 | }
 608 | .navbar-default .navbar-toggle:hover,
 609 | .navbar-default .navbar-toggle:focus {
 610 | background-color: #ddd;
 611 | }
 612 | .navbar-default .navbar-toggle .icon-bar {
 613 | background-color: #888;
 614 | }
 615 | .navbar-default .navbar-collapse {
 616 | border-color: #e7e7e7;
 617 | }
 618 | .container-fluid:before,
 619 | .container-fluid:after,
 620 | .container:before,
 621 | .container:after,
 622 | .navbar:before,
 623 | .navbar:after,
 624 | .navbar-header:before,
 625 | .navbar-header:after,
 626 | .navbar-collapse:before,
 627 | .navbar-collapse:after {
 628 |   display: table;
 629 |   content: " ";
 630 | }
 631 | .navbar:after,
 632 | .navbar-header:after,
 633 | .container-fluid:after,
 634 | .container:after,
 635 | .navbar-collapse:after {
 636 |   clear: both;
 637 | }
 638 | .sr-only {
 639 | position: absolute;
 640 | width: 1px;
 641 | height: 1px;
 642 | padding: 0;
 643 | margin: -1px;
 644 | overflow: hidden;
 645 | clip: rect(0, 0, 0, 0);
 646 | border: 0;
 647 | }
 648 | .container-fluid {
 649 | padding-right: 15px;
 650 | padding-left: 15px;
 651 | margin-right: auto;
 652 | margin-left: auto;
 653 | }
 654 | .container-fluid > .navbar-header {
 655 | margin-right: -15px;
 656 | margin-left: -15px;
 657 | }
 658 | @media (min-width: 768px) {
 659 | .container-fluid > .navbar-header {
 660 |   margin-right: 0;
 661 |   margin-left: 0;
 662 | }
 663 | }
 664 | @media (min-width: 1200px) {
 665 | .sidebar-container {
 666 |   padding-right: 5%;
 667 | }
 668 | }
 669 | .sidebar-container .sidebar-header {
 670 | position: relative;
 671 | padding-bottom: 13px;
 672 | padding-top: 40px;
 673 | margin-left: 0px;
 674 | }
 675 | .sidebar-header {
 676 | margin: 0 30px 0 20px;
 677 | padding-top: 8px;
 678 | padding-bottom: 8px;
 679 | border-bottom: 1px solid rgba(0,0,0,0.0785);
 680 | }
 681 | .sidebar-header .sidebar-header-title {
 682 | font-size: 1.25em;
 683 | font-weight: bold;
 684 | color: rgba(0,0,0,0.8);
 685 | height: 22px;
 686 | vertical-align: top;
 687 | }
 688 | .sidebar-container {
 689 | color: #bfbfbf;
 690 | font-size: 14px;
 691 | padding-left: 5%;
 692 | }
 693 | .sidebar-container .tags a:hover {
 694 | color: #0085a1 !important;
 695 | }
 696 | .sidebar-container .tags a {
 697 | border-color: #f5f5f5;
 698 | }
 699 | .sidebar-container .tags a:hover,
 700 | .sidebar-container .tags a:active {
 701 | border-color: #0085a1;
 702 | }
 703 | .sidebar-container .list-inline > li {
 704 | padding-left: 0px;
 705 | }
 706 | .list-inline > li {
 707 | display: inline-block;
 708 | padding-right: 5px;
 709 | padding-left: 5px;
 710 | }
 711 | .sidebar-list ul {
 712 | list-style: none;
 713 | padding: 0;
 714 | }
 715 | .sidebar-list-body li.sidebar-list-item:first-child {
 716 | margin-top: 15px;
 717 | }
 718 | .sidebar-list-body li.sidebar-list-item {
 719 | margin-top: 25px;
 720 | margin-bottom: 0px;
 721 | margin-left: 0px;
 722 | }
 723 | .sidebar-list .sidebar-list-item {
 724 | margin: 20px 0px 20px 20px;
 725 | }
 726 | .sidebar-header .sidebar-header-title:after {
 727 | position: absolute;
 728 | bottom: -1px;
 729 | left: 0;
 730 | right: 0;
 731 | height: 1px;
 732 | width: 70px;
 733 | background: #2f2f2d;
 734 | content: '';
 735 | }
 736 | /*
 737 | Please note this CSS is currently in   prototype form. We'll implement a cleaned up version in Web Starter Kit.
 738 | */
 739 | /* Everything from here down is actually just for the demo - the material buttons and card, and various other pieces of styling */
 740 | /* Variables */
 741 | /* Buttons */
 742 | /** Shadows **/
 743 | .pager li {
 744 | width: 40%;
 745 | }
 746 | .pager li.next {
 747 | float: right;
 748 | }
 749 | .pager li.previous {
 750 | float: left;
 751 | }
 752 | .pager li > a {
 753 | width: 100%;
 754 | }
 755 | .post-index-title {
 756 | font-size: 24px;
 757 | font-weight: 500;
 758 | line-height: 33px;
 759 | margin-top: 25px !important;
 760 | }
 761 | @media only screen and (max-width: 767px) {
 762 | /**
 763 |  * Layout
 764 |  * Since V1.6 we use absolute positioning to prevent to expand container-fluid
 765 |  * which would cover tags. A absolute positioning make a new layer.
 766 |  */
 767 | .navbar-default .navbar-collapse {
 768 |   position: absolute;
 769 |   right: 0;
 770 |   border: none;
 771 |   background: white;
 772 |   box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
 773 |   box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
 774 |   border-radius: 2px;
 775 |   width: 170px;
 776 | }
 777 | #huxblog_navbar {
 778 |   /**
 779 |    * Sharable code and 'out' function
 780 |    */
 781 |   opacity: 0;
 782 |   transform: scaleX(0);
 783 |   transform-origin: top right;
 784 |   transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
 785 |   -webkit-transform: scaleX(0);
 786 |   -webkit-transform-origin: top right;
 787 |   -webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
 788 |   /**
 789 |    *'In' Animation
 790 |    */
 791 | }
 792 | #huxblog_navbar a {
 793 |   font-size: 13px;
 794 |   line-height: 28px;
 795 | }
 796 | #huxblog_navbar .navbar-collapse {
 797 |   height: 0px;
 798 |   transform: scaleY(0);
 799 |   transform-origin: top right;
 800 |   transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
 801 |   -webkit-transform: scaleY(0);
 802 |   -webkit-transform-origin: top right;
 803 |   -webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
 804 | }
 805 | #huxblog_navbar li {
 806 |   opacity: 0;
 807 |   transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 808 |   -webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 809 | }
 810 | #huxblog_navbar.in {
 811 |   transform: scaleX(1);
 812 |   -webkit-transform: scaleX(1);
 813 |   opacity: 1;
 814 |   transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 815 |   -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 816 | }
 817 | #huxblog_navbar.in .navbar-collapse {
 818 |   transform: scaleY(1);
 819 |   -webkit-transform: scaleY(1);
 820 |   transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
 821 |   -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
 822 | }
 823 | #huxblog_navbar.in li {
 824 |   opacity: 1;
 825 |   transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
 826 |   -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
 827 | }
 828 | }
 829 | .navbar-custom {
 830 | background: none;
 831 | border: none;
 832 | position: absolute;
 833 | top: 0;
 834 | left: 0;
 835 | width: 100%;
 836 | z-index: 3;
 837 | /* Hux learn from
 838 |    *     TypeIsBeautiful,
 839 |    *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
 840 |    */
 841 | font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
 842 | line-height: 1.7;
 843 | }
 844 | .navbar-custom .navbar-brand {
 845 | font-weight: 800;
 846 | color: white;
 847 | height: 56px;
 848 | line-height: 25px;
 849 | }
 850 | .navbar-custom .navbar-brand:hover {
 851 | color: rgba(255, 255, 255, 0.8);
 852 | }
 853 | .navbar-custom .nav li a {
 854 | text-transform: uppercase;
 855 | font-size: 16px;
 856 | line-height: 20px;
 857 | font-weight: 800;
 858 | letter-spacing: 1px;
 859 | }
 860 | .navbar-custom .nav li a:active {
 861 | background: rgba(0, 0, 0, 0.12);
 862 | }
 863 | @media only screen and (min-width: 768px) {
 864 | .navbar-custom {
 865 |   background: transparent;
 866 |   border-bottom: 1px solid transparent;
 867 | }
 868 | .navbar-custom .navbar-brand {
 869 |   color: white;
 870 |   padding: 20px;
 871 |   line-height: 20px;
 872 | }
 873 | .navbar-custom .navbar-brand:hover,
 874 | .navbar-custom .navbar-brand:focus {
 875 |   color: rgba(255, 255, 255, 0.8);
 876 | }
 877 | .navbar-custom .nav li a {
 878 |   color: white;
 879 |   padding: 20px;
 880 | }
 881 | .navbar-custom .nav li a:hover,
 882 | .navbar-custom .nav li a:focus {
 883 |   color: rgba(255, 255, 255, 0.8);
 884 | }
 885 | .navbar-custom .nav li a:active {
 886 |   background: none;
 887 | }
 888 | }
 889 | @media only screen and (min-width: 1170px) {
 890 | .navbar-custom {
 891 |   -webkit-transition: background-color 0.3s;
 892 |   -moz-transition: background-color 0.3s;
 893 |   transition: background-color 0.3s;
 894 |   /* Force Hardware Acceleration in WebKit */
 895 |   -webkit-transform: translate3d(0, 0, 0);
 896 |   -moz-transform: translate3d(0, 0, 0);
 897 |   -ms-transform: translate3d(0, 0, 0);
 898 |   -o-transform: translate3d(0, 0, 0);
 899 |   transform: translate3d(0, 0, 0);
 900 |   -webkit-backface-visibility: hidden;
 901 |   backface-visibility: hidden;
 902 | }
 903 | }
 904 | .intro-header {
 905 | background: no-repeat center center;
 906 | background-color: #cccccc;
 907 | background-attachment: scroll;
 908 | -webkit-background-size: cover;
 909 | -moz-background-size: cover;
 910 | background-size: cover;
 911 | -o-background-size: cover;
 912 | margin-bottom: 0px;
 913 | /* 0 on mobile, modify by Hux */
 914 | }
 915 | @media only screen and (min-width: 768px) {
 916 | .intro-header {
 917 |   margin-bottom: 20px;
 918 |   /* response on desktop */
 919 | }
 920 | }
 921 | .intro-header .site-heading,
 922 | .intro-header .post-heading {
 923 | padding: 85px 0 55px;
 924 | color: white;
 925 | }
 926 | @media only screen and (min-width: 768px) {
 927 | .intro-header .site-heading,
 928 | .intro-header .post-heading {
 929 |   padding: 125px 0;
 930 | }
 931 | }
 932 | .intro-header .site-heading {
 933 | padding: 95px 0 70px;
 934 | }
 935 | @media only screen and (min-width: 768px) {
 936 | .intro-header .site-heading {
 937 |   padding: 125px 0;
 938 | }
 939 | }
 940 | .intro-header .site-heading {
 941 | text-align: center;
 942 | }
 943 | .intro-header .site-heading h1 {
 944 | margin-top: 0;
 945 | font-size: 50px;
 946 | }
 947 | .intro-header .site-heading .subheading {
 948 | /* Hux learn from
 949 |    *     TypeIsBeautiful,
 950 |    *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
 951 |    */
 952 | font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
 953 | line-height: 1.7;
 954 | font-size: 24px;
 955 | line-height: 1.1;
 956 | display: block;
 957 | font-weight: 300;
 958 | margin: 10px 0 0;
 959 | }
 960 | @media only screen and (min-width: 768px) {
 961 | .intro-header .site-heading h1 {
 962 |   font-size: 80px;
 963 | }
 964 | }
 965 | .intro-header .post-heading h1 {
 966 | font-size: 30px;
 967 | margin-bottom: 24px;
 968 | }
 969 | .intro-header .post-heading .meta {
 970 | line-height: 1.1;
 971 | display: block;
 972 | }
 973 | .intro-header .post-heading .meta {
 974 | font-family: 'Lora', 'Times New Roman', serif;
 975 | font-style: italic;
 976 | font-weight: 300;
 977 | font-size: 18px;
 978 | }
 979 | @media only screen and (min-width: 768px) {
 980 | .intro-header .post-heading h1 {
 981 |   font-size: 45px;
 982 | }
 983 | .intro-header .post-heading .meta {
 984 |   font-size: 20px;
 985 | }
 986 | }
 987 | .post-content-preview {
 988 | color: #818181;
 989 | line-height: 1.8;
 990 | font-size: 16px !important;
 991 | font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC","Noto Sans CJK SC","Source Han Sans CN","Noto Sans SC","Source Han Sans TC","Noto Sans CJK TC","WenQuanYi Micro Hei",SimSun,sans-serif;
 992 | font-weight: 500;
 993 | }
 994 | .post-content-preview:hover {
 995 | color: #0085a1;
 996 | }
 997 | @media only screen and (min-width: 768px) {
 998 | .post-content-preview {
 999 |   font-size: 14px;
1000 | }
1001 | }
1002 | .list-inline {
1003 | padding-left: 0;
1004 | margin-left: -5px;
1005 | list-style: none;
1006 | }
1007 | footer {
1008 | font-size: 20px;
1009 | padding: 50px 0 65px;
1010 | }
1011 | footer .list-inline {
1012 | margin: 0;
1013 | padding: 0;
1014 | margin-bottom: 16px;
1015 | }
1016 | .floating-label-form-group::not(:first-child) {
1017 | padding-left: 14px;
1018 | border-left: 1px solid #eeeeee;
1019 | }
1020 | .pager {
1021 | margin: 20px 0 0 !important;
1022 | padding: 0px !important;
1023 | text-align: center;
1024 | list-style: none;
1025 | height: 86px;
1026 | }
1027 | .pager li > a {
1028 | /* Hux learn from
1029 |    *     TypeIsBeautiful,
1030 |    *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
1031 |    */
1032 | font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
1033 | line-height: 1.7;
1034 | text-transform: uppercase;
1035 | font-size: 13px;
1036 | font-weight: 800;
1037 | letter-spacing: 1px;
1038 | padding: 10px;
1039 | background-color: white;
1040 | border-radius: 0;
1041 | display: inline-block;
1042 | border: 1px solid;
1043 | }
1044 | @media only screen and (min-width: 768px) {
1045 | .pager li > a {
1046 |   font-size: 14px;
1047 |   padding: 15px 25px;
1048 | }
1049 | }
1050 | .pager li > a {
1051 | color: #404040;
1052 | }
1053 | .pager li > a:hover,
1054 | .pager li > a:focus {
1055 | color: white;
1056 | background-color: #0085a1;
1057 | border: 1px solid #0085a1;
1058 | }
1059 | ::-moz-selection {
1060 | color: white;
1061 | text-shadow: none;
1062 | background: #0085a1;
1063 | }
1064 | ::selection {
1065 | color: white;
1066 | text-shadow: none;
1067 | background: #0085a1;
1068 | }
1069 | img::selection {
1070 | color: white;
1071 | background: transparent;
1072 | }
1073 | img::-moz-selection {
1074 | color: white;
1075 | background: transparent;
1076 | }
1077 | /* Hux add tags support */
1078 | .tags {
1079 | margin-bottom: -5px;
1080 | }
1081 | .tags a {
1082 | display: inline-block;
1083 | border: 1px solid #f5f5f5;
1084 | border-radius: 2px;
1085 | padding: 5px 10px;
1086 | color: rgba(0, 0, 0, .6);
1087 | line-height: 22px;
1088 | font-size: 14px;
1089 | text-decoration: none;
1090 | margin: 0 1px;
1091 | margin-bottom: 6px;
1092 | }
1093 | .tags a:hover,
1094 | .tags a:active {
1095 | color: white;
1096 | border-color: white;
1097 | background-color: rgba(255, 255, 255, 0.4);
1098 | text-decoration: none;
1099 | }
1100 | @media only screen and (min-width: 768px) {
1101 | .tags a {
1102 |   margin-right: 5px;
1103 | }
1104 | }
1105 | /* Tags support End*/
1106 | /* Hux make all img responsible in post-container */
1107 | /* Hux Optimize UserExperience */
1108 | .navbar-default .navbar-toggle:focus,
1109 | .navbar-default .navbar-toggle:hover {
1110 | background-color: inherit;
1111 | }
1112 | .navbar-default .navbar-toggle:active {
1113 | background-color: rgba(255, 255, 255, 0.25);
1114 | }
1115 | /* Hux customize Style for navBar button */
1116 | .navbar-default .navbar-toggle {
1117 | border-color: transparent;
1118 | padding: 19px 16px;
1119 | margin-top: 2px;
1120 | margin-right: 2px;
1121 | margin-bottom: 2px;
1122 | border-radius: 50%;
1123 | }
1124 | .navbar-default .navbar-toggle .icon-bar {
1125 | width: 18px;
1126 | border-radius: 0px;
1127 | background-color: white;
1128 | }
1129 | .navbar-default .navbar-toggle .icon-bar + .icon-bar {
1130 | margin-top: 3px;
1131 | }
1132 | /* Hux customize Style for Duoshuo */
1133 | .nav>li {
1134 |   position: relative;
1135 |   display: block;
1136 | }
1137 | .nav {
1138 |   padding-left: 0;
1139 |   margin-bottom: 0;
1140 |   list-style: none;
1141 | }
1142 | .nav>li>a {
1143 |   position: relative;
1144 |   display: block;
1145 |   padding: 10px 15px;
1146 | }
1147 | .container {
1148 | padding-right: 15px;
1149 | padding-left: 15px;
1150 | margin-right: auto;
1151 | margin-left: auto;
1152 | }
1153 | @media (min-width: 768px) {
1154 | .container {
1155 |   width: 750px;
1156 | }
1157 | }
1158 | @media (min-width: 992px) {
1159 | .container {
1160 |   width: 970px;
1161 | }
1162 | }
1163 | @media (min-width: 1200px) {
1164 | .container {
1165 |   width: 1170px;
1166 | }
1167 | }
1168 | .col-lg-8, .col-md-10 {
1169 |   position: relative;
1170 |   min-height: 1px;
1171 |   padding-right: 15px;
1172 |   padding-left: 15px;
1173 | }
1174 | .row {
1175 |   margin-right: 15px;
1176 |   margin-left: 15px;
1177 | }
1178 | code {
1179 | white-space: inherit;
1180 | }
1181 | textarea {
1182 | width: 100%;
1183 | border-radius: 2px;
1184 | border: 1px solid #bdc3c7
1185 | }
1186 | @media only screen and (max-width: 1023px) {
1187 | .am-u-sm-10 {
1188 |   display: none;
1189 | }
1190 | }
1191 | @media only screen and (min-width: 1025px) {
1192 | .am-u-lg-4 {
1193 |   display: block;
1194 | }
1195 | }
1196 | .text-center {
1197 | text-align: center;
1198 | }
1199 | img {
1200 | max-width: 100%;
1201 | }
1202 | code {
1203 | font-size: 90%;
1204 | }
1205 | .article-trigger h2::before {
1206 | font-weight: 600;
1207 | position: absolute;
1208 | content: '#';
1209 | left: -5px;
1210 | color: #337ab7;
1211 | }
1212 | .article-trigger h3::before {
1213 |   font-weight: 500;
1214 |   position: absolute;
1215 |   content: '#';
1216 |   left: 0px;
1217 |   color: #337ab7;
1218 |   }
1219 | .topic-header {
1220 | padding-bottom: 0px;
1221 | display: flex;
1222 | display: -webkit-flex;
1223 | display: -ms-flexbox;
1224 | -webkit-box-pack: justify;
1225 | -ms-flex-pack: justify;
1226 | justify-content: space-between;
1227 | margin-top: 0px;
1228 | }
1229 | .pull-left {
1230 | float: left !important;
1231 | }
1232 | .blog-flex-center {
1233 | display: -ms-flexbox !important;
1234 | display: -webkit-box !important;
1235 | display: flex !important;
1236 | -ms-flex-align: center !important;
1237 | -webkit-box-align: center !important;
1238 | align-items: center !important;
1239 | }
1240 | .blog-flex0 {
1241 | -ms-flex: 0 0 auto;
1242 | -webkit-box-flex: 0;
1243 | flex: 0 0 auto;
1244 | display: flex;
1245 | display: -webkit-box;
1246 | display: -ms-flexbox;
1247 | }
1248 | .link {
1249 | color: inherit;
1250 | text-decoration: none;
1251 | cursor: pointer;
1252 | }
1253 | .avatar {
1254 | display: block;
1255 | white-space: nowrap;
1256 | overflow: visible;
1257 | text-overflow: ellipsis;
1258 | line-height: normal;
1259 | position: relative;
1260 | }
1261 | .avatar-image {
1262 | display: inline-block;
1263 | vertical-align: middle;
1264 | border-radius: 50%;
1265 | width: 36px;
1266 | height: 36px;
1267 | }
1268 | .blog-flex1 {
1269 | -ms-flex: 1 1 auto;
1270 | -webkit-box-flex: 1;
1271 | flex: 1 1 auto;
1272 | }
1273 | .author-lockup {
1274 | font-size: 16px;
1275 | line-height: 1.4;
1276 | padding-left: 10px;
1277 | text-rendering: auto
1278 | }
1279 | .topic-header .author-lockup {
1280 | height: 20px;
1281 | display: inline-table;
1282 | line-height: 20px;
1283 | }
1284 | .pull-right {
1285 | float: right !important;
1286 | }
1287 | .topic-header .time {
1288 | font-size: 16px;
1289 | color: #C7C7C7;
1290 | line-height: 36px;
1291 | }
1292 | .time {
1293 | display: -webkit-box;
1294 | display: -ms-flexbox;
1295 | display: flex;
1296 | -webkit-box-align: center;
1297 | -ms-flex-align: center;
1298 | align-items: center
1299 | }
1300 | .topic-header .author-lockup a {
1301 | font-size: 16px;
1302 | color: #46466E;
1303 | display: inline;
1304 | cursor: pointer;
1305 | text-decoration: none;
1306 | }
1307 | .topic-header .author-lockup .in {
1308 | font-size: 16px;
1309 | color: #C7C7C7;
1310 | line-height: 20px;
1311 | margin-left: 8px;
1312 | }
1313 | .category-name a {
1314 | font-size: 16px;
1315 | color: #46466E;
1316 | display: inline;
1317 | cursor: pointer;
1318 | text-decoration: none;
1319 | margin-left: 4px;
1320 | }
1321 | .footer-icon {
1322 | background-color: transparent !important;
1323 | }
1324 | .am-icon-btn {
1325 | background-color: transparent;
1326 | color: #666;
1327 | }
1328 | .clearfix:after, .clearfix:before {
1329 | display: table;
1330 | content: " ";
1331 | }
1332 | @media only screen and (max-width: 750px) {
1333 | span.time.pc_time {
1334 |   display:none !important;
1335 | }
1336 | 
1337 | span.time.mobile_time {
1338 |   display: inline-block !important;
1339 | }
1340 | .author-lockup {
1341 |   margin-right: 20px;
1342 | }
1343 | .topic-footer {
1344 |   margin-top: 27px;
1345 |   line-height: 20px;
1346 | }
1347 | }
1348 | @media only screen and (min-width: 750px) {
1349 | span.time.pc_time {
1350 |   display:inline-block !important;
1351 |   font-size: 16px;
1352 |   color: #C7C7C7;
1353 |   line-height: 36px;
1354 | }
1355 | span.time.mobile_time {
1356 |   display: none !important;
1357 | }
1358 | }
1359 | .post-tags  a {
1360 | color: #fff !important;
1361 | }
1362 | 
1363 | /* Archives */
1364 | .archive-page {
1365 | padding: 20px 15% 0;
1366 | }
1367 | 
1368 | .archive-page .categorys-title {
1369 | font-size: 16px;
1370 | position: relative;
1371 | margin: 10px auto;
1372 | padding: 0 30px;
1373 | color: #46466E
1374 | }
1375 | 
1376 | .archive-page .categorys-title::before {
1377 | position: absolute;
1378 | font-weight: 600;
1379 | top: 0;
1380 | left: -15px;
1381 | padding: 0 30px;
1382 | content: '#';
1383 | color: #337ab7;
1384 | }
1385 | 
1386 | .archive-page .post-list-item-container {
1387 | border: 1px solid rgba(184,197,214,.2);
1388 | border-radius: 3px;
1389 | background: #fff;
1390 | -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
1391 | box-shadow: 0 1px 4px rgba(0,0,0,.04)
1392 | }
1393 | 
1394 | .archive-page .post-list-item-container .item-label {
1395 | height: 95px;
1396 | background: #fff
1397 | }
1398 | 
1399 | .archive-page .post-list-item-container .item-label .item-title a {
1400 | font-size: 14px;
1401 | display: block;
1402 | overflow: hidden;
1403 | white-space: nowrap;
1404 | text-overflow: ellipsis;
1405 | color: #404040;
1406 | }
1407 | 
1408 | .archive-page .post-list-item-container .item-label .item-meta .item-meta-date {
1409 | padding-bottom: 5px;
1410 | padding-left: 5px;
1411 | color: #46466E
1412 | }
1413 | 
1414 | .clearfix:after,.clearfix:before {
1415 | display: table;
1416 | content: ''
1417 | }
1418 | 
1419 | .clearfix:after {
1420 | clear: both
1421 | }
1422 | 
1423 | .clearfix {
1424 | zoom:1
1425 | }
1426 | 
1427 | .post-lists {
1428 | position: relative;
1429 | display: block;
1430 | overflow: hidden
1431 | }
1432 | 
1433 | .post-lists-body {
1434 | display: block
1435 | }
1436 | 
1437 | .post-list-item {
1438 | float: left;
1439 | width: 33.3333%;
1440 | height: auto;
1441 | padding: 15px;
1442 | align-items: center
1443 | }
1444 | 
1445 | .post-list-item-container {
1446 | position: relative;
1447 | overflow: hidden;
1448 | width: 100%;
1449 | padding: 0;
1450 | border-radius: 3px;
1451 | background-color: #fff;
1452 | -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
1453 | box-shadow: 0 1px 4px rgba(0,0,0,.04)
1454 | }
1455 | 
1456 | .post-list-item-container:hover {
1457 | -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.1);
1458 | box-shadow: 2px 2px 4px rgba(0,0,0,.1)
1459 | }
1460 | 
1461 | .post-list-item-container .item-label {
1462 | position: relative;
1463 | height: 130px;
1464 | padding: 25px 20px 40px;
1465 | background-color: #fff
1466 | }
1467 | 
1468 | .post-list-item-container .item-label .item-title a {
1469 | font-size: 17px;
1470 | line-height: 17px;
1471 | word-break: break-all;
1472 | color: #404040;
1473 | }
1474 | 
1475 | .post-list-item-container .item-label .item-meta {
1476 | position: absolute;
1477 | right: 0;
1478 | bottom: 0;
1479 | width: 100%;
1480 | padding: 0 15px 15px;
1481 | text-align: right
1482 | }
1483 | 
1484 | .post-list-item-container .item-label .item-meta .item-meta-date {
1485 | font-size: 12px;
1486 | position: relative;
1487 | float: left;
1488 | padding-top: 9px;
1489 | padding-left: 9px;
1490 | text-align: right;
1491 | text-transform: none;
1492 | color: #f1f1f1
1493 | }
1494 | 
1495 | @media(max-width: 580px) {
1496 | .post-list-item {
1497 |   width: 100%;
1498 |   padding: 10px 20px
1499 | }
1500 | 
1501 | .post-list-item:first-child {
1502 |   padding-top: 20px
1503 | }
1504 | 
1505 | .archive-page .post-list-item:first-child {
1506 |   padding-top: 0
1507 | }
1508 | 
1509 | .archive-page .post-list-item:last-child {
1510 |   padding-bottom: 0
1511 | }
1512 | }
1513 | 
1514 | @media(max-width: 880px) {
1515 | .archive-page {
1516 |   padding: 20px 0 0 0;
1517 | }
1518 | 
1519 | .post-list-item {
1520 |   width: 50%;
1521 |   padding: 0 7.5px 10px 7.5px
1522 | }
1523 | 
1524 | .post-list-item:nth-child(odd) {
1525 |   padding-left: 15px
1526 | }
1527 | 
1528 | .post-list-item:nth-child(even) {
1529 |   padding-right: 15px
1530 | }
1531 | }
1532 | 
1533 | .navbar-search {
1534 | line-height: 60px;
1535 | height: 60px;
1536 | display: inline-block;
1537 | padding: 0 40px 0 15px;
1538 | cursor: pointer;
1539 | color: #fff;
1540 | }
1541 | .navbar-mobile-search {
1542 | line-height: 56px;
1543 | float: right;
1544 | color: #fff;
1545 | }
1546 | @media (min-width: 768px) {
1547 | .navbar-mobile-search {
1548 |   display: none;
1549 | }
1550 | }
1551 | @media (min-width: 768px) {
1552 | .navbar-search {
1553 |   display: none;
1554 | }
1555 | }
1556 | .search-page .search-box {
1557 | margin-top: 3rem;
1558 | line-height: 40px;
1559 | position: relative;
1560 | top: -1px;
1561 | display: inline-block;
1562 | width: 100%;
1563 | height: 40px;
1564 | padding: 0;
1565 | border: none;
1566 | border-radius: 3px;
1567 | }
1568 | .search-page .search-box .input {
1569 | font-size: 14px;
1570 | line-height: 40px;
1571 | position: absolute;
1572 | top: 0;
1573 | left: 0;
1574 | width: 100%;
1575 | height: 40px;
1576 | padding: 0 40px 0 18px;
1577 | color: #313131;
1578 | border: 1px solid rgba(184,197,214,.2);
1579 | border-radius: 2px;
1580 | outline: 0;
1581 | background-color: #fff;
1582 | -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
1583 | box-shadow: 0 1px 4px rgba(0,0,0,.04);
1584 | -webkit-appearance: none;
1585 | }
1586 | .search-page .search-box .spsubmit {
1587 | line-height: 35px;
1588 | float: right;
1589 | margin-right: 15px;
1590 | outline: 0;
1591 | background-color: transparent
1592 | }
1593 | .search-page .search-tags {
1594 | margin: 0;
1595 | padding: 15px 0;
1596 | text-align: center
1597 | }
1598 | .search-page .search-tags a {
1599 | font-size: 14px;
1600 | display: inline-block;
1601 | border: 1px solid #f5f5f5;
1602 | color: rgba(0, 0, 0, .6);
1603 | line-height: 22px;
1604 | text-decoration: none;
1605 | margin: 10px 8px 0 0;
1606 | padding: 2px 15px;
1607 | -webkit-transition-duration: .4s;
1608 | transition-duration: .4s;
1609 | letter-spacing: 0;
1610 | border-radius: 2px;
1611 | -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
1612 | box-shadow: 0 1px 4px rgba(0,0,0,.04)
1613 | }
1614 | .search-page .search-tags-hr {
1615 | display: block;
1616 | width: 55px;
1617 | height: 2px;
1618 | margin: 20px auto 10px
1619 | }
1620 | 
1621 | /* comment */
1622 | 
1623 | #comments .lists-navigator {
1624 |   margin: 20px 0
1625 | }
1626 | 
1627 | #comments .lists-navigator ol {
1628 |   margin: 20px 0;
1629 |   padding: 0 10px;
1630 |   list-style: none;
1631 |   text-align: center
1632 | }
1633 | 
1634 | #comments .lists-navigator ol li.current a {
1635 |   color: #46466E
1636 | }
1637 | 
1638 | .comment-container {
1639 |   position: relative;
1640 |   z-index: 1;
1641 |   color: #5f5f5f;
1642 |   max-width: 1170px;
1643 |   padding: 0 15px 0 15px;
1644 |   margin: 0 auto;
1645 | }
1646 | 
1647 | #comments {
1648 |   max-width: 1170px;
1649 |   margin: 0 auto;
1650 |   padding: 0 20px
1651 | }
1652 | 
1653 | #comments .page-navigator {
1654 |   margin: 0
1655 | }
1656 | 
1657 | #comments a {
1658 |   color: #5f5f5f
1659 | }
1660 | 
1661 | #comments .response {
1662 |   font-size: 14px;
1663 |   font-weight: 400;
1664 |   display: block;
1665 |   padding: 30px 0 30px 20px;
1666 |   color: #5f5f5f
1667 | }
1668 | 
1669 | #comments .response a {
1670 |   color: #46466E
1671 | }
1672 | 
1673 | .comment-list {
1674 |   margin: 0;
1675 |   padding-left: 0;
1676 |   list-style-type: none
1677 | }
1678 | 
1679 | .comment-parent {
1680 |   margin: 20px 0;
1681 |   border: 1px solid rgba(184,197,214,.2);
1682 |   border-radius: 3px;
1683 |   background: #fff;
1684 |   -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
1685 |   box-shadow: 0 1px 4px rgba(0,0,0,.04)
1686 | }
1687 | 
1688 | .comment-parent:last-child {
1689 |   margin: 20px 0 0
1690 | }
1691 | 
1692 | .comment-parent:first-child {
1693 |   margin: 0
1694 | }
1695 | 
1696 | .comment-child,.comment-child2 {
1697 |   border-top: 1px solid rgba(184,197,214,.2)
1698 | }
1699 | 
1700 | .comment-view {
1701 |   padding: 20px;
1702 |   cursor: pointer
1703 | }
1704 | 
1705 | .comment-header {
1706 |   display: inline-block;
1707 |   width: 100%
1708 | }
1709 | 
1710 | .comment-header .avatar {
1711 |   display: inline-block;
1712 |   float: left;
1713 |   width: 40px;
1714 |   height: 40px;
1715 |   border: 1px solid #eaeaea;
1716 |   border-radius: 50%
1717 | }
1718 | 
1719 | .comment-header .comment-author {
1720 |   font-size: 13px;
1721 |   line-height: 45px;
1722 |   display: inline-block;
1723 |   float: left;
1724 |   margin: 0 20px
1725 | }
1726 | 
1727 | .comment-header .comment-by-author a {
1728 |   color: #46466E!important
1729 | }
1730 | 
1731 | .comment-content {
1732 |   margin-bottom: 10px;
1733 |   color: #313131
1734 | }
1735 | 
1736 | .comment-meta {
1737 |   font-size: 12px
1738 | }
1739 | 
1740 | .comment-meta .comment-reply {
1741 |   display: none;
1742 |   float: right
1743 | }
1744 | 
1745 | .comment-meta .comment-reply a {
1746 |   color: #46466E!important
1747 | }
1748 | 
1749 | .comment-view:hover .comment-meta .comment-reply {
1750 |   display: block
1751 | }
1752 | 
1753 | .comment-parent>.comment-children .avatar {
1754 |   width: 34px;
1755 |   height: 34px;
1756 |   margin: 3px 0 0 3px
1757 | }
1758 | 
1759 | .comment-parent>.comment-children .comment-author-at {
1760 |   float: left;
1761 |   margin-right: 5px
1762 | }
1763 | 
1764 | .comment-parent>.comment-children .comment-content {
1765 |   margin: -3px 3px 10px
1766 | }
1767 | 
1768 | .comment-parent>.comment-children .comment-meta {
1769 |   margin: 0 3px
1770 | }
1771 | 
1772 | .comment-form {
1773 |   position: relative;
1774 |   margin: 0 0 40px;
1775 |   padding: 10px 20px;
1776 |   border-radius: 3px;
1777 |   background: #fff;
1778 |   -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
1779 |   box-shadow: 0 1px 4px rgba(0,0,0,.04)
1780 | }
1781 | 
1782 | .comment-form .form-control {
1783 |   font-size: 13px;
1784 |   display: block;
1785 |   width: 100%;
1786 |   height: 34px;
1787 |   color: #313131;
1788 |   outline: 0
1789 | }
1790 | 
1791 | .comment-form .form-control:focus {
1792 |   border-color: #46466E;
1793 |   outline: 0
1794 | }
1795 | 
1796 | .comment-form textarea.form-control {
1797 |   overflow: hidden;
1798 |   height: 150px;
1799 |   padding: 10px 0;
1800 |   resize: none;
1801 |   border-radius: 0
1802 | }
1803 | 
1804 | .comment-form .input-control {
1805 |   float: left;
1806 |   width: 100%;
1807 |   max-width: 206px;
1808 |   border-bottom: 1px dashed #ddd;
1809 |   border-radius: 0
1810 | }
1811 | 
1812 | .comment-form .submit {
1813 |   font-size: 13px;
1814 |   position: absolute;
1815 |   right: 20px;
1816 |   bottom: 20px;
1817 |   display: block;
1818 |   height: 32px;
1819 |   margin: 0 auto;
1820 |   padding: 0 20px;
1821 |   -webkit-transition-duration: .4s;
1822 |   transition-duration: .4s;
1823 |   text-align: center;
1824 |   color: #313131;
1825 |   border: 1px solid #f7f7f7;
1826 |   border-radius: 30px;
1827 |   background-color: #f7f7f7
1828 | }
1829 | 
1830 | .comment-form .submit:hover,.submit:active,.submit:active:focus,.submit:focus {
1831 |   color: #46466E;
1832 |   border: 1px solid #46466E;
1833 |   outline-style: none;
1834 |   background-color: #fff
1835 | }
1836 | /* TOC */
1837 | #directory {
1838 |   all: initial;
1839 | }
1840 | 
1841 | #directory * {
1842 |   all: unset;
1843 | }
1844 | 
1845 | /* container */
1846 | 
1847 | #directory {
1848 |   display: flex;
1849 |   flex-direction: column;
1850 |   align-items: stretch;
1851 |   position: fixed;
1852 |   right: 0px;
1853 |   top: 25%;
1854 |   max-width: 3em;
1855 |   max-height: 7em;
1856 |   z-index: 0;
1857 |   box-sizing: border-box;
1858 |   background-color: #fff;
1859 |   color: gray;
1860 |   font-size: calc(12px + 0.1vw);
1861 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1862 |   line-height: 1.5;
1863 |   font-weight: normal;
1864 |   border: 1px solid rgba(158, 158, 158, 0.22);
1865 |   -webkit-font-smoothing: subpixel-antialiased;
1866 |   font-smoothing: subpixel-antialiased;
1867 |   overflow: hidden;
1868 |   will-change: transform, max-width;
1869 |   transition: max-width 0.3s;
1870 |   contain: content;
1871 | }
1872 | 
1873 | #directory:hover {
1874 |   max-width: 33vw;
1875 |   max-height: calc(100vh - 100px);
1876 | }
1877 | 
1878 | #directory.hidden {
1879 |   display: none;
1880 | }
1881 | 
1882 | #directory .handle {
1883 |   -webkit-user-select: none;
1884 |   user-select: none;
1885 | 
1886 |   border-bottom: 1px solid rgba(158, 158, 158, 0.22);
1887 |   padding: 0.1em 0.7em;
1888 |   font-variant-caps: inherit;
1889 |   font-variant: small-caps;
1890 |   font-size: 0.9em;
1891 |   color: #bbb;
1892 |   cursor: pointer;
1893 |   text-align: center;
1894 |   opacity: 0;
1895 |   will-change: opacity;
1896 |   transition: opacity 0.3s;
1897 | }
1898 | 
1899 | #directory:hover .handle {
1900 |   max-width: 33vw;
1901 |   opacity: 1;
1902 | }
1903 | 
1904 | #directory .handle:hover,
1905 | #directory .handle:active {
1906 |   cursor: move;
1907 | }
1908 | 
1909 | #directory .handle:active {
1910 |   background: #f9f9f9;
1911 | }
1912 | 
1913 | #directory > ul {
1914 |   flex-grow: 1;
1915 |   padding: 1.3em 1.3em 1.3em 1em;
1916 |   overflow-y: auto;
1917 | }
1918 | 
1919 | /* all headings  */
1920 | 
1921 | #directory ul,
1922 | #directory li {
1923 |   list-style: none;
1924 |   display: block;
1925 | }
1926 | 
1927 | #directory a {
1928 |   text-decoration: none;
1929 |   color: gray;
1930 |   display: block;
1931 |   line-height: 1.3;
1932 |   padding-top: 0.2em;
1933 |   padding-bottom: 0.2em;
1934 |   text-overflow: ellipsis;
1935 |   overflow-x: hidden;
1936 |   white-space: nowrap;
1937 | }
1938 | 
1939 | #directory a:hover,
1940 | #directory a:active {
1941 |   border-left-color: rgba(86, 61, 124, 0.5);
1942 |   color: #563d7c;
1943 | }
1944 | 
1945 | #directory li.active > a {
1946 |   border-left-color: #563d7c;
1947 |   color: #563d7c;
1948 | }
1949 | 
1950 | /* heading level: 1 */
1951 | 
1952 | #directory ul {
1953 |   line-height: 2;
1954 |   overflow: hidden;
1955 | }
1956 | 
1957 | #directory ul a {
1958 |   font-size: 1em;
1959 |   padding-left: 1.3em;
1960 | }
1961 | 
1962 | #directory ul a:hover,
1963 | #directory ul a:active,
1964 | #directory ul li.active > a {
1965 |   border-left-width: 3px;
1966 |   border-left-style: solid;
1967 |   padding-left: calc(1.3em - 3px);
1968 | }
1969 | 
1970 | #directory ul li.active > a {
1971 |   font-weight: 700;
1972 | }
1973 | 
1974 | /* heading level: 2 (hidden only when there are too many headings)  */
1975 | 
1976 | #directory ul ul {
1977 |   line-height: 1.8;
1978 | }
1979 | 
1980 | #directory.lengthy ul ul {
1981 |   display: none;
1982 | }
1983 | 
1984 | #directory.lengthy ul li.active > ul {
1985 |   display: block;
1986 | }
1987 | 
1988 | #directory ul ul a {
1989 |   font-size: 1em;
1990 |   padding-left: 2.7em;
1991 | }
1992 | 
1993 | #directory ul ul a:hover,
1994 | #directory ul ul a:active,
1995 | #directory ul ul li.active > a {
1996 |   border-left-width: 2px;
1997 |   border-left-style: solid;
1998 |   padding-left: calc(2.7em - 2px);
1999 |   font-weight: normal;
2000 | }
2001 | 
2002 | /* heading level: 3 (hidden unless parent is active) */
2003 | 
2004 | #directory ul ul ul {
2005 |   line-height: 1.7;
2006 |   display: none;
2007 | }
2008 | 
2009 | #directory ul ul li.active > ul {
2010 |   display: block;
2011 | }
2012 | 
2013 | #directory ul ul ul a {
2014 |   font-size: 1em;
2015 |   padding-left: 4em;
2016 | }
2017 | 
2018 | #directory ul ul ul a:hover,
2019 | #directory ul ul ul a:active,
2020 | #directory ul ul ul li.active > a {
2021 |   border-left-width: 1px;
2022 |   border-left-style: solid;
2023 |   padding-left: calc(4em - 1px);
2024 |   font-weight: normal;
2025 | }
2026 | .directory-content {
2027 |   position: relative;
2028 |   z-index: 0;
2029 |   max-width: 720px;
2030 |   margin-right: auto!important;
2031 |   margin-left: auto!important;
2032 |   text-align: right;
2033 |   opacity: 0
2034 | }
2035 | 
2036 | .directory-content.initial {
2037 |   opacity: 0
2038 | }
2039 | 
2040 | .directory-content.pinned {
2041 |   opacity: 1
2042 | }
2043 | 
2044 | .directory-content.unpinned {
2045 |   opacity: 1
2046 | }
2047 | 
2048 | .directory-content.headroom--top {
2049 |   opacity: 0
2050 | }
2051 | 
2052 | .directory-content.headroom--not-top {
2053 |   -webkit-transition: opacity .5s ease-in-out;
2054 |   transition: opacity .5s ease-in-out;
2055 |   opacity: 1
2056 | }
2057 | 
2058 | /* fix pre width */
2059 | @media only screen and (min-width: 750px) {
2060 |   pre {
2061 |     max-width: 80%;
2062 |   }
2063 | }
2064 | 
2065 | @media(max-width: 1000px) {
2066 |   .directory-content {
2067 |     display: none;
2068 |   }
2069 | }


--------------------------------------------------------------------------------