support catalog sidebar

https://github.com/zhaohuabing/hugo-theme-cleanwhite/issues/108

Signed-off-by: zhaohuabing <zhaohuabing@gmail.com>

7 files changed, 419 insertions, 9 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e25ed99..e1ca443 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -65,16 +65,18 @@
 
             <!-- Post Container -->
             <div class="
-                col-lg-11 col-lg-offset-1
+                col-lg-8 col-lg-offset-2
                 col-md-10 col-md-offset-1
                 post-container">
 
+                <!--
                 {{ if not (eq (.Param "showtoc") false) }}
                 <header>
                     <h2>TOC</h2>
                 </header>
                 {{.TableOfContents}}
                 {{ end }}
+                -->
                 {{ .Content }}
 
                 {{ if .Site.Params.reward }}
@@ -96,10 +98,26 @@
                     </li>
                     {{ end }}
                 </ul>
-
                 {{ partial "comments.html" . }}
+            </div>
 
+            <!-- Side Catalog Container -->
+            {{ if not (eq (.Param "showtoc") false) }}
+            <div class="
+                col-lg-2 col-lg-offset-0
+                visible-lg-block
+                sidebar-container
+                catalog-container">
+                <div class="side-catalog">
+                    <hr class="hidden-sm hidden-xs">
+                    <h5>
+                        <a class="catalog-toggle" href="#">CATALOG</a>
+                    </h5>
+                    <ul class="catalog-body"></ul>
+                </div>
             </div>
+            {{ end }}
+
             <!-- Sidebar Container -->
             <div class="
                 col-lg-11 col-lg-offset-1
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 4a0cfb8..537e7fe 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -306,3 +306,66 @@
 {{ if .Site.GoogleAnalytics }}
 {{ template "_internal/google_analytics_async.html" . }}
 {{ end }}
+
+
+<!-- Side Catalog -->
+{{ if not (eq (.Param "showtoc") false) }}
+<script type="text/javascript">
+    function generateCatalog(selector) {
+
+        // interop with multilangual
+        //if ('page.multilingual' == 'true') {
+        //    _containerSelector = 'div.post-container.active'
+        //} else {
+            _containerSelector = 'div.post-container'
+        //}
+
+        // init
+        var P = $(_containerSelector), a, n, t, l, i, c;
+        a = P.find('h1,h2,h3,h4,h5,h6');
+
+        // clean
+        $(selector).html('')
+
+        // appending
+        a.each(function () {
+            n = $(this).prop('tagName').toLowerCase();
+            i = "#" + $(this).prop('id');
+            t = $(this).text();
+            c = $('<a href="' + i + '" rel="nofollow">' + t + '</a>');
+            l = $('<li class="' + n + '_nav"></li>').append(c);
+            $(selector).append(l);
+        });
+        return true;
+    }
+
+    generateCatalog(".catalog-body");
+
+    // toggle side catalog
+    $(".catalog-toggle").click((function (e) {
+        e.preventDefault();
+        $('.side-catalog').toggleClass("fold")
+    }))
+
+    /*
+     * Doc: https://github.com/davist11/jQuery-One-Page-Nav
+     * Fork by Hux to support padding
+     */
+
+    loadAsync("{{ "js/jquery.nav.js" | relURL }}", function () {
+        $('.catalog-body').onePageNav({
+            currentClass: "active",
+            changeHash: !1,
+            easing: "swing",
+            filter: "",
+            scrollSpeed: 700,
+            scrollOffset: 0,
+            scrollThreshold: .2,
+            begin: null,
+            end: null,
+            scrollChange: null,
+            padding: 80
+        });
+    });
+</script>
+{{ end }}
diff --git a/static/css/hugo-theme-cleanwhite.css b/static/css/hugo-theme-cleanwhite.css
index 76c7d05..b463747 100644
--- a/static/css/hugo-theme-cleanwhite.css
+++ b/static/css/hugo-theme-cleanwhite.css
@@ -1,3 +1,9 @@
+@media (min-width:1700px){
+    .container {
+        width: 1650px;
+    }
+}
+
 (min-width:1200px){
     .post-container,.sidebar-container{
         padding-right:5%
@@ -883,3 +889,92 @@ body{
 .page-fullscreen footer .copyright a:hover{
     color:#ddd
 }
+
+.catalog-container {
+    padding: 0px;
+  }
+  .side-catalog {
+    display: block;
+    overflow: auto;
+    height: 100%;
+    padding-bottom: 40px;
+    width: 195px;
+  }
+  .side-catalog.fixed {
+    position: fixed;
+    top: -21px;
+  }
+  .side-catalog.fold .catalog-toggle::before {
+    content: "+";
+  }
+  .side-catalog.fold .catalog-body {
+    display: none;
+  }
+  .side-catalog .catalog-toggle::before {
+    content: "−";
+    position: relative;
+    margin-right: 5px;
+    bottom: 1px;
+  }
+  .side-catalog .catalog-body {
+    position: relative;
+    list-style: none;
+    height: auto;
+    overflow: hidden;
+    padding-left: 0px;
+    padding-right: 5px;
+    text-indent: 0;
+  }
+  .side-catalog .catalog-body li {
+    position: relative;
+    list-style: none;
+  }
+  .side-catalog .catalog-body li a {
+    padding-left: 10px;
+    max-width: 180px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 30px;
+    line-height: 30px;
+    overflow: hidden;
+    text-decoration: none;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .side-catalog .catalog-body .h1_nav,
+  .side-catalog .catalog-body .h2_nav {
+    margin-left: 0;
+    font-size: 13px;
+    font-weight: bold;
+  }
+  .side-catalog .catalog-body .h3_nav {
+    margin-left: 6px;
+    font-size: 13px;
+    font-weight: bold;
+  }
+  .side-catalog .catalog-body .h4_nav {
+    margin-left: 12px;
+    font-size: 12px;
+  }
+  .side-catalog .catalog-body .h4_nav a {
+    max-width: 170px;
+  }
+  .side-catalog .catalog-body .h5_nav .h6_nav {
+    margin-left: 18px;
+    font-size: 12px;
+  }
+  .side-catalog .catalog-body .h5_nav .h6_nav a {
+    max-width: 170px;
+  }
+  .side-catalog .catalog-body .active {
+    border-radius: 4px;
+    background-color: #f5f5f5;
+  }
+  .side-catalog .catalog-body .active a {
+    color: #0085a1 !important;
+  }
+  @media (max-width: 1200px) {
+    .side-catalog {
+      display: none;
+    }
+  }
diff --git a/static/css/hugo-theme-cleanwhite.min.css b/static/css/hugo-theme-cleanwhite.min.css
index 870e43e..90c9889 100644
--- a/static/css/hugo-theme-cleanwhite.min.css
+++ b/static/css/hugo-theme-cleanwhite.min.css
@@ -1 +1 @@
-(min-width:1200px){.post-containersidebar-containerpadding-right:5%}@media (min-width:768px){.post-container{padding-right:5%}}.sidebar-container{color:#bfbfbf;font-size:14px}.sidebar-container h5{color:gray;padding-bottom:1em}.sidebar-container h5 a{color:gray!important;text-decoration:none}.sidebar-container a{color:#bfbfbf!important}.sidebar-container a:hover,.sidebar-container a:active{color:#0085a1!important}.sidebar-container .tags a{border-color:#bfbfbf}.sidebar-container .tags a:hover,.sidebar-container .tags a:active{border-color:#0085a1}.sidebar-container .short-about img{width:80%;display:block;border-radius:5px;margin-bottom:20px}.sidebar-container .short-about p{margin-top:0;margin-bottom:20px}.sidebar-container .short-about .list-inline>li{padding-left:0}body{font-family:-apple-system,"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:16px;color:#404040;overflow-x:hidden}p{margin:30px 0}h1,h2,h3,h4,h5,h6{font-family:-apple-system,"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;line-height:1.1;font-weight:700}h4{font-size:21px}a{color:#404040}a:hover,a:focus{color:#0085a1}a img:hover,a img:focus{cursor:zoom-in}article{overflow:hidden}blockquote{color:gray;font-style:italic;font-size:.95em;margin:20px 0}blockquote p{margin:0}small.img-hint{display:block;margin-top:-20px;text-align:center}br+small.img-hint{margin-top:-40px}img.shadow{box-shadow:rgba(0,0,0,.258824) 0 2px 5px 0}@media screen and (max-width:768px){select{-webkit-appearance:none;margin-top:15px;color:#337ab7;border-color:#337ab7;padding:0 .4em;background:#fff}}.table th,.table td{border:1px solid #eee!important}hr.small{max-width:100px;margin:15px auto;border-width:4px;border-color:#fff}pre,.table-responsive{-webkit-overflow-scrolling:touch}pre code{display:block;width:auto;white-space:pre;word-wrap:normal}.post-container a{color:#337ab7}.post-container a:hover,.post-container a:focus{color:#0085a1}.post-container h1,.post-container h2,.post-container h3,.post-container h4,.post-container h5,.post-container h6{margin:30px 0 10px}.post-container h5{font-size:19px;font-weight:600;color:gray}.post-container h5+p{margin-top:5px}.post-container h6{font-size:16px;font-weight:600;color:gray}.post-container h6+p{margin-top:5px}.post-container ul,.post-container ol{margin-bottom:40px}@media screen and (max-width:768px){.post-container ul,.post-container ol{padding-left:30px}}@media screen and (max-width:500px){.post-container ul,.post-container ol{padding-left:20px}}.post-container ol ol,.post-container ol ul,.post-container ul ol,.post-container ul ul{margin-bottom:5px}.post-container li p{margin:0;margin-bottom:5px}.post-container li h1,.post-container li h2,.post-container li h3,.post-container li h4,.post-container li h5,.post-container li h6{line-height:2;margin-top:20px}@media only screen and (max-width:767px){.navbar-default .navbar-collapse{max-height:600px;border:none;background:#fff;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;float:right;margin:0}#huxblog_navbar{opacity:0;transform:scaleX(0);transform-origin:top right;transition:all .25s cubic-bezier(0.23,1,.32,1);-webkit-transform:scaleX(0);-webkit-transform-origin:top right;-webkit-transition:all .25s cubic-bezier(0.23,1,.32,1)}#huxblog_navbar a{font-size:13px;line-height:28px}#huxblog_navbar .navbar-collapse{height:0;transform:scaleY(0);transform-origin:top right;transition:transform 500ms cubic-bezier(0.23,1,.32,1);-webkit-transform:scaleY(0);-webkit-transform-origin:top right;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.23,1,.32,1)}#huxblog_navbar li{opacity:0;transition:opacity 450ms cubic-bezier(0.23,1,.32,1) 205ms;-webkit-transition:opacity 450ms cubic-bezier(0.23,1,.32,1) 205ms}#huxblog_navbar.in{transform:scaleX(1);-webkit-transform:scaleX(1);opacity:1}#huxblog_navbar.in .navbar-collapse{transform:scaleY(1);-webkit-transform:scaleY(1)}#huxblog_navbar.in li{opacity:1}}.navbar-custom{background:0 0;border:none;position:absolute;top:0;left:0;width:100%;z-index:3;font-family:-apple-system,"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:#fff;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:12px;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:0 0;border-bottom:1px solid transparent}.navbar-custom body{font-size:20px}.navbar-custom .navbar-brand{color:#fff;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:#fff;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:0 0}}.navbar-custom.invert .navbar-toggle:active{background-color:rgba(0,0,0,.05)}.navbar-custom.invert .navbar-toggle .icon-bar{background-color:#404040}.navbar-custom.invert .navbar-brand{color:#404040}.navbar-custom.invert .navbar-brand:hover,.navbar-custom.invert .navbar-brand:focus{color:#0085a1}.navbar-custom.invert .nav li a{color:#404040}.navbar-custom.invert .nav li a:hover,.navbar-custom.invert .nav li a:focus{color:#0085a1}@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)}}.intro-header{background:no-repeat center center;background-color:#a3a3a3;background-attachment:scroll;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;margin-bottom:0}.intro-header.style-text{background:0 0}.intro-header.style-text .site-heading,.intro-header.style-text .post-heading,.intro-header.style-text .page-heading{padding:85px 0 20px;color:#404040}.intro-header.style-text .site-heading .subheading,.intro-header.style-text .post-heading .subheading,.intro-header.style-text .page-heading .subheading{margin-bottom:15px}.intro-header.style-text .post-heading .meta a,.intro-header.style-text .tags a,.intro-header.style-text .tags .tag{border-color:#404040;color:#404040}.intro-header.style-text .tags a:hover,.intro-header.style-text .tags .tag:hover,.intro-header.style-text .tags a:active,.intro-header.style-text .tags .tag:active{background-color:rgba(0,0,0,.05)}@media only screen and (min-width:768px){.intro-header{margin-bottom:20px}}.intro-header .site-heading,.intro-header .post-heading,.intro-header .page-heading{padding:85px 0 55px;color:#fff}@media only screen and (min-width:768px){.intro-header .site-heading,.intro-header .post-heading,.intro-header .page-heading{padding:150px 0}}.intro-header .site-heading{padding:95px 0 70px}@media only screen and (min-width:768px){.intro-header .site-heading{padding:150px 0}}.intro-header .site-heading,.intro-header .page-heading{text-align:center}.intro-header .site-heading h1,.intro-header .page-heading h1{margin-top:0;font-size:50px}.intro-header .site-heading .subheading,.intro-header .page-heading .subheading{font-family:-apple-system,"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:18px;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,.intro-header .page-heading h1{font-size:80px}}.intro-header .post-heading h1{font-size:30px;margin-bottom:24px}.intro-header .post-heading .subheading,.intro-header .post-heading .meta{line-height:1.1;display:block}.intro-header .post-heading .meta .a{color:#404040}.intro-header .post-heading .subheading{font-family:-apple-system,"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:17px;line-height:1.4;font-weight:400;margin:10px 0 30px;margin-top:-5px}.intro-header .post-heading .meta{font-family:Lora,'Times New Roman',serif;font-style:italic;font-weight:300;font-size:18px}.intro-header .post-heading .meta a{color:#fff}@media only screen and (min-width:768px){.intro-header .post-heading h1{font-size:55px}.intro-header .post-heading .subheading{font-size:30px}.intro-header .post-heading .meta{font-size:20px}}.post-preview>a{color:#404040}.post-preview>a:hover,.post-preview>a:focus{text-decoration:none;color:#0085a1}.post-preview>a>.post-title{font-size:21px;line-height:1.3;margin-top:30px;margin-bottom:8px}.post-preview>a>.post-subtitle{font-size:15px;line-height:1.3;margin:0;font-weight:300;margin-bottom:10px}.post-preview>.post-meta>a,.post-preview>.post-meta{font-family:Lora,'Times New Roman',serif;color:gray;font-size:16px;font-style:italic;margin-top:0}.post-preview>.post-meta>a:hover,.post-preview>.post-meta>a:focus{color:#0085a1;text-decoration:none}@media only screen and (min-width:768px){.post-preview>a>.post-title{font-size:26px;line-height:1.3;margin-bottom:10px}.post-preview>a>.post-subtitle{font-size:16px}.post-preview .post-meta{font-size:18px}}.post-content-preview{font-size:13px;font-style:italic;color:#a3a3a3}.post-content-preview:hover{color:#0085a1}@media only screen and (min-width:768px){.post-content-preview{font-size:14px}}.section-heading{font-size:36px;margin-top:60px;font-weight:700}.caption{text-align:center;font-size:14px;padding:10px;font-style:italic;margin:0;display:block;border-bottom-right-radius:5px;border-bottom-left-radius:5px}footer{font-size:20px;padding:50px 0 65px}footer .list-inline{margin:0;padding:0}footer .copyright{font-size:14px;text-align:center;margin-bottom:0}footer .copyright a{color:#337ab7}footer .copyright a:hover,footer .copyright a:focus{color:#0085a1}.floating-label-form-group{font-size:14px;position:relative;margin-bottom:0;padding-bottom:.5em;border-bottom:1px solid #eee}.floating-label-form-group input,.floating-label-form-group textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:none;border-radius:0;font-size:1.5em;background:0 0;box-shadow:none!important;resize:none}.floating-label-form-group label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:.85em;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease}.floating-label-form-group::not(:first-child){padding-left:14px;border-left:1px solid #eee}.floating-label-form-group-with-value label{top:0;opacity:1}.floating-label-form-group-with-focus label{color:#0085a1}form .row:first-child .floating-label-form-group{border-top:1px solid #eee}.btn{font-family:-apple-system,"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:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:15px 25px}.btn-lg{font-size:16px;padding:25px 35px}.btn-default:hover,.btn-default:focus{background-color:#0085a1;border:1px solid #0085a1;color:#fff}.pager{margin:20px 0 0!important;padding:0 0 20px}.pager li>a,.pager li>span{font-family:-apple-system,"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:#fff;border-radius:0}@media only screen and (min-width:768px){.pager li>a,.pager li>span{font-size:14px;padding:15px 25px}}.pager li>a{color:#404040}.pager li>a:hover,.pager li>a:focus{color:#fff;background-color:#0085a1;border:1px solid #0085a1}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:gray;background-color:#404040;cursor:not-allowed}::-moz-selection{color:#fff;text-shadow:none;background:#0085a1}::selection{color:#fff;text-shadow:none;background:#0085a1}img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}body{webkit-tap-highlight-color:#0085a1}.tags{margin-bottom:-5px}.tags a,.tags .tag{display:inline-block;border:1px solid rgba(255,255,255,.8);border-radius:999em;padding:0 10px;color:#fff;line-height:24px;font-size:12px;text-decoration:none;margin:0 1px;margin-bottom:6px}.tags a:hover,.tags .tag:hover,.tags a:active,.tags .tag:active{color:#fff;border-color:#fff;background-color:rgba(255,255,255,.4);text-decoration:none}@media only screen and (min-width:768px){.tags a,.tags .tag{margin-right:5px}}#tag-heading{padding:70px 0 60px}@media only screen and (min-width:768px){#tag-heading{padding:55px 0}}#tag_cloud{margin:20px 0 15px}#tag_cloud a,#tag_cloud .tag{font-size:14px;border:none;line-height:28px;margin:0 2px;margin-bottom:8px;background:#D6D6D6}#tag_cloud a:hover,#tag_cloud .tag:hover,#tag_cloud a:active,#tag_cloud .tag:active{background-color:#0085a1!important}@media only screen and (min-width:768px){#tag_cloud{margin-bottom:25px}}.tag-comments{font-size:12px}@media only screen and (min-width:768px){.tag-comments{font-size:14px}}.t:first-child{margin-top:0}.listing-seperator{color:#0085a1;font-size:21px!important}.listing-seperator::before{margin-right:5px}@media only screen and (min-width:768px){.listing-seperator{font-size:20px!important;line-height:2!important}}.one-tag-list .tag-text{font-weight:200;font-family:-apple-system,"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}.one-tag-list .post-preview{position:relative}.one-tag-list .post-preview>a .post-title{font-size:16px;font-weight:500;margin-top:20px}.one-tag-list .post-preview>a .post-subtitle{font-size:12px}.one-tag-list .post-preview>.post-meta{position:absolute;right:5px;bottom:0;margin:0;font-size:12px;line-height:12px}@media only screen and (min-width:768px){.one-tag-list .post-preview{margin-left:20px}.one-tag-list .post-preview>a>.post-title{font-size:18px;line-height:1.3}.one-tag-list .post-preview>a>.post-subtitle{font-size:14px}.one-tag-list .post-preview .post-meta{font-size:18px}}.post-container img{display:block;max-width:100%;height:auto;margin:1.5em auto 1.6em}.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:#fff}.navbar-default .navbar-toggle .icon-bar+.icon-bar{margin-top:3px}.comment{margin-top:20px}.comment #ds-thread #ds-reset a.ds-like-thread-button{border:1px solid #ddd;border-radius:0;background:#fff;box-shadow:none;text-shadow:none}.comment #ds-thread #ds-reset li.ds-tab a.ds-current{border:1px solid #ddd;border-radius:0;background:#fff;box-shadow:none;text-shadow:none}.comment #ds-thread #ds-reset .ds-textarea-wrapper{background:0 0}.comment #ds-thread #ds-reset .ds-gradient-bg{background:0 0}#ds-smilies-tooltip ul.ds-smilies-tabs li a{background:#fff!important}.page-fullscreen .intro-header{position:fixed;left:0;top:0;width:100%;height:100%}.page-fullscreen #tag-heading{position:fixed;left:0;top:0;padding-bottom:150px;width:100%;height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;-webkit-flex-direction:column;display:flex;align-items:center;justify-content:center;flex-direction:column}.page-fullscreen footer{position:absolute;width:100%;bottom:0;padding-bottom:20px;opacity:.6;color:#fff}.page-fullscreen footer .copyright{color:#fff}.page-fullscreen footer .copyright a{color:#fff}.page-fullscreen footer .copyright a:hover{color:#ddd}
\ No newline at end of file
+@media (min-width:1700px){.container{width:1650px}}(min-width:1200px){.post-containersidebar-containerpadding-right:5%}@media (min-width:768px){.post-container{padding-right:5%}}.sidebar-container{color:#bfbfbf;font-size:14px}.sidebar-container h5{color:gray;padding-bottom:1em}.sidebar-container h5 a{color:gray!important;text-decoration:none}.sidebar-container a{color:#bfbfbf!important}.sidebar-container a:hover,.sidebar-container a:active{color:#0085a1!important}.sidebar-container .tags a{border-color:#bfbfbf}.sidebar-container .tags a:hover,.sidebar-container .tags a:active{border-color:#0085a1}.sidebar-container .short-about img{width:80%;display:block;border-radius:5px;margin-bottom:20px}.sidebar-container .short-about p{margin-top:0;margin-bottom:20px}.sidebar-container .short-about .list-inline>li{padding-left:0}body{font-family:-apple-system,"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:16px;color:#404040;overflow-x:hidden}p{margin:30px 0}h1,h2,h3,h4,h5,h6{font-family:-apple-system,"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;line-height:1.1;font-weight:700}h4{font-size:21px}a{color:#404040}a:hover,a:focus{color:#0085a1}a img:hover,a img:focus{cursor:zoom-in}article{overflow:hidden}blockquote{color:gray;font-style:italic;font-size:.95em;margin:20px 0}blockquote p{margin:0}small.img-hint{display:block;margin-top:-20px;text-align:center}br+small.img-hint{margin-top:-40px}img.shadow{box-shadow:rgba(0,0,0,.258824) 0 2px 5px 0}@media screen and (max-width:768px){select{-webkit-appearance:none;margin-top:15px;color:#337ab7;border-color:#337ab7;padding:0 .4em;background:#fff}}.table th,.table td{border:1px solid #eee!important}hr.small{max-width:100px;margin:15px auto;border-width:4px;border-color:#fff}pre,.table-responsive{-webkit-overflow-scrolling:touch}pre code{display:block;width:auto;white-space:pre;word-wrap:normal}.post-container a{color:#337ab7}.post-container a:hover,.post-container a:focus{color:#0085a1}.post-container h1,.post-container h2,.post-container h3,.post-container h4,.post-container h5,.post-container h6{margin:30px 0 10px}.post-container h5{font-size:19px;font-weight:600;color:gray}.post-container h5+p{margin-top:5px}.post-container h6{font-size:16px;font-weight:600;color:gray}.post-container h6+p{margin-top:5px}.post-container ul,.post-container ol{margin-bottom:40px}@media screen and (max-width:768px){.post-container ul,.post-container ol{padding-left:30px}}@media screen and (max-width:500px){.post-container ul,.post-container ol{padding-left:20px}}.post-container ol ol,.post-container ol ul,.post-container ul ol,.post-container ul ul{margin-bottom:5px}.post-container li p{margin:0;margin-bottom:5px}.post-container li h1,.post-container li h2,.post-container li h3,.post-container li h4,.post-container li h5,.post-container li h6{line-height:2;margin-top:20px}@media only screen and (max-width:767px){.navbar-default .navbar-collapse{max-height:600px;border:none;background:#fff;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;float:right;margin:0}#huxblog_navbar{opacity:0;transform:scaleX(0);transform-origin:top right;transition:all .25s cubic-bezier(0.23,1,.32,1);-webkit-transform:scaleX(0);-webkit-transform-origin:top right;-webkit-transition:all .25s cubic-bezier(0.23,1,.32,1)}#huxblog_navbar a{font-size:13px;line-height:28px}#huxblog_navbar .navbar-collapse{height:0;transform:scaleY(0);transform-origin:top right;transition:transform 500ms cubic-bezier(0.23,1,.32,1);-webkit-transform:scaleY(0);-webkit-transform-origin:top right;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.23,1,.32,1)}#huxblog_navbar li{opacity:0;transition:opacity 450ms cubic-bezier(0.23,1,.32,1) 205ms;-webkit-transition:opacity 450ms cubic-bezier(0.23,1,.32,1) 205ms}#huxblog_navbar.in{transform:scaleX(1);-webkit-transform:scaleX(1);opacity:1}#huxblog_navbar.in .navbar-collapse{transform:scaleY(1);-webkit-transform:scaleY(1)}#huxblog_navbar.in li{opacity:1}}.navbar-custom{background:0 0;border:none;position:absolute;top:0;left:0;width:100%;z-index:3;font-family:-apple-system,"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:#fff;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:12px;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:0 0;border-bottom:1px solid transparent}.navbar-custom body{font-size:20px}.navbar-custom .navbar-brand{color:#fff;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:#fff;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:0 0}}.navbar-custom.invert .navbar-toggle:active{background-color:rgba(0,0,0,.05)}.navbar-custom.invert .navbar-toggle .icon-bar{background-color:#404040}.navbar-custom.invert .navbar-brand{color:#404040}.navbar-custom.invert .navbar-brand:hover,.navbar-custom.invert .navbar-brand:focus{color:#0085a1}.navbar-custom.invert .nav li a{color:#404040}.navbar-custom.invert .nav li a:hover,.navbar-custom.invert .nav li a:focus{color:#0085a1}@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)}}.intro-header{background:no-repeat center center;background-color:#a3a3a3;background-attachment:scroll;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;-o-background-size:cover;margin-bottom:0}.intro-header.style-text{background:0 0}.intro-header.style-text .site-heading,.intro-header.style-text .post-heading,.intro-header.style-text .page-heading{padding:85px 0 20px;color:#404040}.intro-header.style-text .site-heading .subheading,.intro-header.style-text .post-heading .subheading,.intro-header.style-text .page-heading .subheading{margin-bottom:15px}.intro-header.style-text .post-heading .meta a,.intro-header.style-text .tags a,.intro-header.style-text .tags .tag{border-color:#404040;color:#404040}.intro-header.style-text .tags a:hover,.intro-header.style-text .tags .tag:hover,.intro-header.style-text .tags a:active,.intro-header.style-text .tags .tag:active{background-color:rgba(0,0,0,.05)}@media only screen and (min-width:768px){.intro-header{margin-bottom:20px}}.intro-header .site-heading,.intro-header .post-heading,.intro-header .page-heading{padding:85px 0 55px;color:#fff}@media only screen and (min-width:768px){.intro-header .site-heading,.intro-header .post-heading,.intro-header .page-heading{padding:150px 0}}.intro-header .site-heading{padding:95px 0 70px}@media only screen and (min-width:768px){.intro-header .site-heading{padding:150px 0}}.intro-header .site-heading,.intro-header .page-heading{text-align:center}.intro-header .site-heading h1,.intro-header .page-heading h1{margin-top:0;font-size:50px}.intro-header .site-heading .subheading,.intro-header .page-heading .subheading{font-family:-apple-system,"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:18px;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,.intro-header .page-heading h1{font-size:80px}}.intro-header .post-heading h1{font-size:30px;margin-bottom:24px}.intro-header .post-heading .subheading,.intro-header .post-heading .meta{line-height:1.1;display:block}.intro-header .post-heading .meta .a{color:#404040}.intro-header .post-heading .subheading{font-family:-apple-system,"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:17px;line-height:1.4;font-weight:400;margin:10px 0 30px;margin-top:-5px}.intro-header .post-heading .meta{font-family:Lora,'Times New Roman',serif;font-style:italic;font-weight:300;font-size:18px}.intro-header .post-heading .meta a{color:#fff}@media only screen and (min-width:768px){.intro-header .post-heading h1{font-size:55px}.intro-header .post-heading .subheading{font-size:30px}.intro-header .post-heading .meta{font-size:20px}}.post-preview>a{color:#404040}.post-preview>a:hover,.post-preview>a:focus{text-decoration:none;color:#0085a1}.post-preview>a>.post-title{font-size:21px;line-height:1.3;margin-top:30px;margin-bottom:8px}.post-preview>a>.post-subtitle{font-size:15px;line-height:1.3;margin:0;font-weight:300;margin-bottom:10px}.post-preview>.post-meta>a,.post-preview>.post-meta{font-family:Lora,'Times New Roman',serif;color:gray;font-size:16px;font-style:italic;margin-top:0}.post-preview>.post-meta>a:hover,.post-preview>.post-meta>a:focus{color:#0085a1;text-decoration:none}@media only screen and (min-width:768px){.post-preview>a>.post-title{font-size:26px;line-height:1.3;margin-bottom:10px}.post-preview>a>.post-subtitle{font-size:16px}.post-preview .post-meta{font-size:18px}}.post-content-preview{font-size:13px;font-style:italic;color:#a3a3a3}.post-content-preview:hover{color:#0085a1}@media only screen and (min-width:768px){.post-content-preview{font-size:14px}}.section-heading{font-size:36px;margin-top:60px;font-weight:700}.caption{text-align:center;font-size:14px;padding:10px;font-style:italic;margin:0;display:block;border-bottom-right-radius:5px;border-bottom-left-radius:5px}footer{font-size:20px;padding:50px 0 65px}footer .list-inline{margin:0;padding:0}footer .copyright{font-size:14px;text-align:center;margin-bottom:0}footer .copyright a{color:#337ab7}footer .copyright a:hover,footer .copyright a:focus{color:#0085a1}.floating-label-form-group{font-size:14px;position:relative;margin-bottom:0;padding-bottom:.5em;border-bottom:1px solid #eee}.floating-label-form-group input,.floating-label-form-group textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:none;border-radius:0;font-size:1.5em;background:0 0;box-shadow:none!important;resize:none}.floating-label-form-group label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:.85em;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease}.floating-label-form-group::not(:first-child){padding-left:14px;border-left:1px solid #eee}.floating-label-form-group-with-value label{top:0;opacity:1}.floating-label-form-group-with-focus label{color:#0085a1}form .row:first-child .floating-label-form-group{border-top:1px solid #eee}.btn{font-family:-apple-system,"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:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:15px 25px}.btn-lg{font-size:16px;padding:25px 35px}.btn-default:hover,.btn-default:focus{background-color:#0085a1;border:1px solid #0085a1;color:#fff}.pager{margin:20px 0 0!important;padding:0 0 20px}.pager li>a,.pager li>span{font-family:-apple-system,"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:#fff;border-radius:0}@media only screen and (min-width:768px){.pager li>a,.pager li>span{font-size:14px;padding:15px 25px}}.pager li>a{color:#404040}.pager li>a:hover,.pager li>a:focus{color:#fff;background-color:#0085a1;border:1px solid #0085a1}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:gray;background-color:#404040;cursor:not-allowed}::-moz-selection{color:#fff;text-shadow:none;background:#0085a1}::selection{color:#fff;text-shadow:none;background:#0085a1}img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}body{webkit-tap-highlight-color:#0085a1}.tags{margin-bottom:-5px}.tags a,.tags .tag{display:inline-block;border:1px solid rgba(255,255,255,.8);border-radius:999em;padding:0 10px;color:#fff;line-height:24px;font-size:12px;text-decoration:none;margin:0 1px;margin-bottom:6px}.tags a:hover,.tags .tag:hover,.tags a:active,.tags .tag:active{color:#fff;border-color:#fff;background-color:rgba(255,255,255,.4);text-decoration:none}@media only screen and (min-width:768px){.tags a,.tags .tag{margin-right:5px}}#tag-heading{padding:70px 0 60px}@media only screen and (min-width:768px){#tag-heading{padding:55px 0}}#tag_cloud{margin:20px 0 15px}#tag_cloud a,#tag_cloud .tag{font-size:14px;border:none;line-height:28px;margin:0 2px;margin-bottom:8px;background:#D6D6D6}#tag_cloud a:hover,#tag_cloud .tag:hover,#tag_cloud a:active,#tag_cloud .tag:active{background-color:#0085a1!important}@media only screen and (min-width:768px){#tag_cloud{margin-bottom:25px}}.tag-comments{font-size:12px}@media only screen and (min-width:768px){.tag-comments{font-size:14px}}.t:first-child{margin-top:0}.listing-seperator{color:#0085a1;font-size:21px!important}.listing-seperator::before{margin-right:5px}@media only screen and (min-width:768px){.listing-seperator{font-size:20px!important;line-height:2!important}}.one-tag-list .tag-text{font-weight:200;font-family:-apple-system,"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}.one-tag-list .post-preview{position:relative}.one-tag-list .post-preview>a .post-title{font-size:16px;font-weight:500;margin-top:20px}.one-tag-list .post-preview>a .post-subtitle{font-size:12px}.one-tag-list .post-preview>.post-meta{position:absolute;right:5px;bottom:0;margin:0;font-size:12px;line-height:12px}@media only screen and (min-width:768px){.one-tag-list .post-preview{margin-left:20px}.one-tag-list .post-preview>a>.post-title{font-size:18px;line-height:1.3}.one-tag-list .post-preview>a>.post-subtitle{font-size:14px}.one-tag-list .post-preview .post-meta{font-size:18px}}.post-container img{display:block;max-width:100%;height:auto;margin:1.5em auto 1.6em}.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:#fff}.navbar-default .navbar-toggle .icon-bar+.icon-bar{margin-top:3px}.comment{margin-top:20px}.comment #ds-thread #ds-reset a.ds-like-thread-button{border:1px solid #ddd;border-radius:0;background:#fff;box-shadow:none;text-shadow:none}.comment #ds-thread #ds-reset li.ds-tab a.ds-current{border:1px solid #ddd;border-radius:0;background:#fff;box-shadow:none;text-shadow:none}.comment #ds-thread #ds-reset .ds-textarea-wrapper{background:0 0}.comment #ds-thread #ds-reset .ds-gradient-bg{background:0 0}#ds-smilies-tooltip ul.ds-smilies-tabs li a{background:#fff!important}.page-fullscreen .intro-header{position:fixed;left:0;top:0;width:100%;height:100%}.page-fullscreen #tag-heading{position:fixed;left:0;top:0;padding-bottom:150px;width:100%;height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;-webkit-flex-direction:column;display:flex;align-items:center;justify-content:center;flex-direction:column}.page-fullscreen footer{position:absolute;width:100%;bottom:0;padding-bottom:20px;opacity:.6;color:#fff}.page-fullscreen footer .copyright{color:#fff}.page-fullscreen footer .copyright a{color:#fff}.page-fullscreen footer .copyright a:hover{color:#ddd}.catalog-container{padding:0}.side-catalog{display:block;overflow:auto;height:100%;padding-bottom:40px;width:195px}.side-catalog.fixed{position:fixed;top:-21px}.side-catalog.fold .catalog-toggle::before{content:"+"}.side-catalog.fold .catalog-body{display:none}.side-catalog .catalog-toggle::before{content:"−";position:relative;margin-right:5px;bottom:1px}.side-catalog .catalog-body{position:relative;list-style:none;height:auto;overflow:hidden;padding-left:0;padding-right:5px;text-indent:0}.side-catalog .catalog-body li{position:relative;list-style:none}.side-catalog .catalog-body li a{padding-left:10px;max-width:180px;display:inline-block;vertical-align:middle;height:30px;line-height:30px;overflow:hidden;text-decoration:none;white-space:nowrap;text-overflow:ellipsis}.side-catalog .catalog-body .h1_nav,.side-catalog .catalog-body .h2_nav{margin-left:0;font-size:13px;font-weight:700}.side-catalog .catalog-body .h3_nav{margin-left:6px;font-size:13px;font-weight:700}.side-catalog .catalog-body .h4_nav{margin-left:12px;font-size:12px}.side-catalog .catalog-body .h4_nav a{max-width:170px}.side-catalog .catalog-body .h5_nav .h6_nav{margin-left:18px;font-size:12px}.side-catalog .catalog-body .h5_nav .h6_nav a{max-width:170px}.side-catalog .catalog-body .active{border-radius:4px;background-color:#f5f5f5}.side-catalog .catalog-body .active a{color:#0085a1!important}@media (max-width: 1200px){.side-catalog{display:none}}
\ No newline at end of file
diff --git a/static/js/hux-blog.js b/static/js/hux-blog.js
index 33b401a..f1b5088 100644
--- a/static/js/hux-blog.js
+++ b/static/js/hux-blog.js
@@ -40,12 +40,14 @@ jQuery(document).ready(function($) {
 
     //primary navigation slide-in effect
     if ($(window).width() > MQL) {
-        var headerHeight = $('.navbar-custom').height();
+            var headerHeight = $('.navbar-custom').height(),
+        bannerHeight = $('.intro-header .container').height();
         $(window).on('scroll', {
                 previousTop: 0
             },
             function() {
-                var currentTop = $(window).scrollTop();
+                var currentTop = $(window).scrollTop(),
+                    $catalog = $('.side-catalog');
                 //check if user is scrolling up
                 if (currentTop < this.previousTop) {
                     //if scrolling up...
@@ -60,6 +62,14 @@ jQuery(document).ready(function($) {
                     if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
                 }
                 this.previousTop = currentTop;
+
+                //adjust the appearance of side-catalog
+                $catalog.show()
+                if (currentTop > (bannerHeight + 41)) {
+                    $catalog.addClass('fixed')
+                } else {
+                    $catalog.removeClass('fixed')
+                }
             });
     }
 });
diff --git a/static/js/hux-blog.min.js b/static/js/hux-blog.min.js
index d52be4b..12cab95 100644
--- a/static/js/hux-blog.min.js
+++ b/static/js/hux-blog.min.js
@@ -1,6 +1,6 @@
 /*!
- * Hux Blog v1.0.0 (http://huxpro.github.io)
- * Copyright 2015 Hux
+ * Clean Blog v1.0.0 (http://startbootstrap.com)
+ * Copyright 2015 Start Bootstrap
+ * Licensed under Apache 2.0 (https://github.com/IronSummitMedia/startbootstrap/blob/gh-pages/LICENSE)
  */
-
-$(function(){$("[data-toggle='tooltip']").tooltip()}),$(document).ready(function(){$("table").wrap("<div class='table-responsive'></div>"),$("table").addClass("table")}),$(document).ready(function(){$('iframe[src*="youtube.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>'),$('iframe[src*="youtube.com"]').addClass("embed-responsive-item"),$('iframe[src*="vimeo.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>'),$('iframe[src*="vimeo.com"]').addClass("embed-responsive-item")}),jQuery(document).ready(function(a){var b=1170;if(a(window).width()>b){var c=a(".navbar-custom").height();a(window).on("scroll",{previousTop:0},function(){var b=a(window).scrollTop();b<this.previousTop?b>0&&a(".navbar-custom").hasClass("is-fixed")?a(".navbar-custom").addClass("is-visible"):a(".navbar-custom").removeClass("is-visible is-fixed"):(a(".navbar-custom").removeClass("is-visible"),b>c&&!a(".navbar-custom").hasClass("is-fixed")&&a(".navbar-custom").addClass("is-fixed")),this.previousTop=b})}});
\ No newline at end of file
+$(function(){$("[data-toggle='tooltip']").tooltip()}),$(document).ready(function(){$("table").wrap("<div class='table-responsive'></div>"),$("table").addClass("table")}),$(document).ready(function(){$('iframe[src*="youtube.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>'),$('iframe[src*="youtube.com"]').addClass("embed-responsive-item"),$('iframe[src*="vimeo.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"></div>'),$('iframe[src*="vimeo.com"]').addClass("embed-responsive-item")}),jQuery(document).ready(function(s){if(s(window).width()>1170){var e=s(".navbar-custom").height(),i=s(".intro-header .container").height();s(window).on("scroll",{previousTop:0},function(){var a=s(window).scrollTop(),o=s(".side-catalog");a<this.previousTop?a>0&&s(".navbar-custom").hasClass("is-fixed")?s(".navbar-custom").addClass("is-visible"):s(".navbar-custom").removeClass("is-visible is-fixed"):(s(".navbar-custom").removeClass("is-visible"),a>e&&!s(".navbar-custom").hasClass("is-fixed")&&s(".navbar-custom").addClass("is-fixed")),this.previousTop=a,o.show(),a>i+41?o.addClass("fixed"):o.removeClass("fixed")})}});
\ No newline at end of file
diff --git a/static/js/jquery.nav.js b/static/js/jquery.nav.js
new file mode 100644
index 0000000..a4ad012
--- /dev/null
+++ b/static/js/jquery.nav.js
@@ -0,0 +1,224 @@
+/*
+ * jQuery One Page Nav Plugin
+ * http://github.com/davist11/jQuery-One-Page-Nav
+ *
+ * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
+ * Dual licensed under the MIT and GPL licenses.
+ * Uses the same license as jQuery, see:
+ * http://jquery.org/license
+ *
+ * @version 3.0.0
+ *
+ * Example usage:
+ * $('#nav').onePageNav({
+ *   currentClass: 'current',
+ *   changeHash: false,
+ *   scrollSpeed: 750
+ * });
+ */
+
+;(function($, window, document, undefined){
+
+	// our plugin constructor
+	var OnePageNav = function(elem, options){
+		this.elem = elem;
+		this.$elem = $(elem);
+		this.options = options;
+		this.metadata = this.$elem.data('plugin-options');
+		this.$win = $(window);
+		this.sections = {};
+		this.didScroll = false;
+		this.$doc = $(document);
+		this.docHeight = this.$doc.height();
+	};
+
+	// the plugin prototype
+	OnePageNav.prototype = {
+		defaults: {
+			navItems: 'a',
+			currentClass: 'current',
+			changeHash: false,
+			easing: 'swing',
+			filter: '',
+			scrollSpeed: 750,
+			scrollThreshold: 0.5,
+			begin: false,
+			end: false,
+			scrollChange: false,
+			padding: 0
+		},
+
+		init: function() {
+			// Introduce defaults that can be extended either
+			// globally or using an object literal.
+			this.config = $.extend({}, this.defaults, this.options, this.metadata);
+
+			this.$nav = this.$elem.find(this.config.navItems);
+
+			//Filter any links out of the nav
+			if(this.config.filter !== '') {
+				this.$nav = this.$nav.filter(this.config.filter);
+			}
+
+			//Handle clicks on the nav
+			this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
+
+			//Get the section positions
+			this.getPositions();
+
+			//Handle scroll changes
+			this.bindInterval();
+
+			//Update the positions on resize too
+			this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
+
+			return this;
+		},
+
+		adjustNav: function(self, $parent) {
+			self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
+			$parent.addClass(self.config.currentClass);
+		},
+
+		bindInterval: function() {
+			var self = this;
+			var docHeight;
+
+			self.$win.on('scroll.onePageNav', function() {
+				self.didScroll = true;
+			});
+
+			self.t = setInterval(function() {
+				docHeight = self.$doc.height();
+
+				//If it was scrolled
+				if(self.didScroll) {
+					self.didScroll = false;
+					self.scrollChange();
+				}
+
+				//If the document height changes
+				if(docHeight !== self.docHeight) {
+					self.docHeight = docHeight;
+					self.getPositions();
+				}
+			}, 250);
+		},
+
+		getHash: function($link) {
+			return $link.attr('href').split('#')[1];
+		},
+
+		getPositions: function() {
+			var self = this;
+			var linkHref;
+			var topPos;
+			var $target;
+
+			self.$nav.each(function() {
+				linkHref = self.getHash($(this));
+				$target = $('#' + linkHref);
+
+				if($target.length) {
+					topPos = $target.offset().top;
+					self.sections[linkHref] = Math.round(topPos);
+				}
+			});
+		},
+
+		getSection: function(windowPos) {
+			var returnValue = null;
+			var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
+
+			for(var section in this.sections) {
+				if((this.sections[section] - windowHeight) < windowPos) {
+					returnValue = section;
+				}
+			}
+
+			return returnValue;
+		},
+
+		handleClick: function(e) {
+			var self = this;
+			var $link = $(e.currentTarget);
+			var $parent = $link.parent();
+			var newLoc = '#' + self.getHash($link);
+
+			if(!$parent.hasClass(self.config.currentClass)) {
+				//Start callback
+				if(self.config.begin) {
+					self.config.begin();
+				}
+
+				//Change the highlighted nav item
+				self.adjustNav(self, $parent);
+
+				//Removing the auto-adjust on scroll
+				self.unbindInterval();
+
+				//Scroll to the correct position
+				self.scrollTo(newLoc, function() {
+					//Do we need to change the hash?
+					if(self.config.changeHash) {
+						window.location.hash = newLoc;
+					}
+
+					//Add the auto-adjust on scroll back in
+					self.bindInterval();
+
+					//End callback
+					if(self.config.end) {
+						self.config.end();
+					}
+				});
+			}
+
+			e.preventDefault();
+		},
+
+		scrollChange: function() {
+			var windowTop = this.$win.scrollTop();
+			var position = this.getSection(windowTop);
+			var $parent;
+
+			//If the position is set
+			if(position !== null) {
+				$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
+
+				//If it's not already the current section
+				if(!$parent.hasClass(this.config.currentClass)) {
+					//Change the highlighted nav item
+					this.adjustNav(this, $parent);
+
+					//If there is a scrollChange callback
+					if(this.config.scrollChange) {
+						this.config.scrollChange($parent);
+					}
+				}
+			}
+		},
+
+		scrollTo: function(target, callback) {
+			var offset = $(target).offset().top - this.config.padding;
+
+			$('html, body').animate({
+				scrollTop: offset
+			}, this.config.scrollSpeed, this.config.easing, callback);
+		},
+
+		unbindInterval: function() {
+			clearInterval(this.t);
+			this.$win.unbind('scroll.onePageNav');
+		}
+	};
+
+	OnePageNav.defaults = OnePageNav.prototype.defaults;
+
+	$.fn.onePageNav = function(options) {
+		return this.each(function() {
+			new OnePageNav(this, options).init();
+		});
+	};
+
+})( jQuery, window , document );
\ No newline at end of file