diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..ebe51d3
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0781a4b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.gradle
+build
+dist
diff --git a/archives.ftl b/archives.ftl
deleted file mode 100644
index 95ca317..0000000
--- a/archives.ftl
+++ /dev/null
@@ -1,83 +0,0 @@
-<#include "default.ftl">
-<@default title="文章归档 | ${blog_title!}" canonical="${archives_url!}" body_class="page-template">
-
-<#-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template -->
-
-<#-- The big featured header, it uses blog cover image as a BG if available -->
-<header class="site-header outer">
-    <div class="inner">
-        <#include "partials/site-nav.ftl">
-    </div>
-</header>
-
-<#-- Everything inside the #post tags pulls data from the post -->
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-
-        <article class="post-full post page <#if !settings.archives_cover??>no-image</#if>">
-
-            <header class="post-full-header">
-                <h1 class="post-full-title">文章归档</h1>
-            </header>
-
-            <#if settings.archives_cover??>
-            <figure class="post-full-image" style="background-image: url(${settings.archives_cover})">
-            </figure>
-            </#if>
-
-            <section class="post-full-content">
-                <div class="post-content">
-                    <h1>分类</h1>
-                    <ul>
-                        <@categoryTag method="list">
-                            <#list categories as category>
-                                <li>
-                                    <a href=${category.fullPath!}>${category.name}(${category.postCount!0})</a>
-                                </li>
-                            </#list>
-                        </@categoryTag>
-                    </ul>
-
-                    <h1>标签</h1>
-                    <ul>
-                        <@tagTag method="list">
-                            <#list tags as tag>
-                                <li>
-                                    <a href="${tag.fullPath!}">${tag.name}(${tag.postCount!0})</a>
-                                </li>
-                            </#list>
-                        </@tagTag>
-                    </ul>
-
-                    <h1>归档</h1>
-                    <@postTag method="archiveMonth">
-                        <#list archives as archive>
-                            <h2>${archive.year?c}年${archive.month}月</h2>
-                            <ul class="listing">
-                                <#list archive.posts?sort_by("createTime")?reverse as post>
-                                    <li>
-                                        ${post.createTime?string('MM月dd日')}：<a href="${post.fullPath!}">${post.title!}</a>
-                                    </li>
-                                </#list>
-                            </ul>
-                        </#list>
-                    </@postTag>
-                </div>
-            </section>
-
-        </article>
-
-    </div>
-</main>
-
-<#-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs -->
-</@default>
-<@scripts>
-    <script>
-        $(function() {
-            var $postContent = $(".post-full-content");
-            $postContent.fitVids();
-        });
-    </script>
-</@scripts>
diff --git a/assets/built/infinitescroll.js b/assets/built/infinitescroll.js
deleted file mode 100644
index 4961279..0000000
--- a/assets/built/infinitescroll.js
+++ /dev/null
@@ -1 +0,0 @@
-$(function($){var currentPage=1;var pathname=window.location.pathname;var $document=$(document);var $result=$(".post-feed");var buffer=300;var ticking=false;var isLoading=false;var lastScrollY=window.scrollY;var lastWindowHeight=window.innerHeight;var lastDocumentHeight=$document.height();function onScroll(){lastScrollY=window.scrollY;requestTick();}function onResize(){lastWindowHeight=window.innerHeight;lastDocumentHeight=$document.height();requestTick();}function requestTick(){if(!ticking){requestAnimationFrame(infiniteScroll);}ticking=true;}function sanitizePathname(path){var paginationRegex=/(?:page\/)(\d)(?:\/)$/i;path=path.replace(/#(.*)$/g,"").replace("////g","/");if(path.match(paginationRegex)){currentPage=parseInt(path.match(paginationRegex)[1]);path=path.replace(paginationRegex,"");}return path;}function infiniteScroll(){pathname=sanitizePathname(pathname);if(isLoading){return;}if(lastScrollY+lastWindowHeight<=lastDocumentHeight-buffer){ticking=false;return;}if(currentPage>=maxPages){window.removeEventListener("scroll",onScroll,{passive:true});window.removeEventListener("resize",onResize);return;}isLoading=true;currentPage+=1;if(pathname.charAt(pathname.length-1)!="/"){pathname=pathname+"/";}var nextPage=pathname+"page/"+currentPage+"/";console.log(pathname);console.log(nextPage);$.get(nextPage,function(content){var parse=document.createRange().createContextualFragment(content);var posts=parse.querySelectorAll(".post");if(posts.length){[].forEach.call(posts,function(post){$result[0].appendChild(post);});}}).fail(function(xhr){if(xhr.status===404){window.removeEventListener("scroll",onScroll,{passive:true});window.removeEventListener("resize",onResize);}}).always(function(){lastDocumentHeight=$document.height();isLoading=false;ticking=false;});}window.addEventListener("scroll",onScroll,{passive:true});window.addEventListener("resize",onResize);infiniteScroll();});
\ No newline at end of file
diff --git a/assets/built/screen.css b/assets/built/screen.css
deleted file mode 100644
index 73a3594..0000000
--- a/assets/built/screen.css
+++ /dev/null
@@ -1,2 +0,0 @@
-a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}body{background:#f4f8fb}.img{display:block;width:100%;height:100%;background-position:50%;background-size:cover;border-radius:100%}.hidden{visibility:hidden;position:absolute;text-indent:-9999px}.site-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:100vh}.site-main{z-index:100;-ms-flex-positive:1;flex-grow:1}.outer{position:relative;padding:0 4vw}.inner{margin:0 auto;max-width:1040px;width:100%}@media (min-width:900px){.author-template .post-feed,.home-template .post-feed,.tag-template .post-feed{margin-top:-70px;padding-top:0}.home-template .site-nav{position:relative;top:-70px}}.site-header{position:relative;padding-top:12px;padding-bottom:12px;color:#fff;background:#090a0b no-repeat 50%;background-size:cover}.site-header:before{bottom:0;background:rgba(0,0,0,.18)}.site-header:after,.site-header:before{content:"";position:absolute;top:0;right:0;left:0;z-index:10;display:block}.site-header:after{bottom:auto;height:80px;background:linear-gradient(rgba(0,0,0,.1),transparent)}.site-header.no-cover:after,.site-header.no-cover:before{display:none}.site-header-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:10vw 4vw;min-height:200px;max-height:450px;text-align:center}.site-title{z-index:10;margin:0;padding:0;font-size:3.8rem;font-weight:700}.site-logo{max-height:45px}.site-description{z-index:10;margin:0;padding:5px 0;font-size:2.2rem;font-weight:300;letter-spacing:.5px;opacity:.8}@media (max-width:500px){.site-title{font-size:3rem}.site-description{font-size:1.8rem}}.site-nav{position:relative;z-index:300;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start;height:40px;font-size:1.2rem}.site-nav,.site-nav-left{display:-ms-flexbox;display:flex;overflow-y:hidden}.site-nav-left{-ms-flex-align:center;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-right:10px;padding-bottom:80px;letter-spacing:.4px;white-space:nowrap;-ms-overflow-scrolling:touch}.site-nav-logo{-ms-flex-negative:0;flex-shrink:0;display:block;margin-right:24px;padding:11px 0;color:#fff;font-size:1.7rem;line-height:1em;font-weight:700;letter-spacing:-.5px}.site-nav-logo:hover{text-decoration:none}.site-nav-logo img{display:block;width:auto;height:21px}.nav{display:-ms-flexbox;display:flex;margin:0 0 0 -12px;padding:0;list-style:none}.nav li{padding:0;text-transform:uppercase}.nav li,.nav li a{display:block;margin:0}.nav li a{padding:10px 12px;color:#fff;opacity:.8}.nav li a:hover{text-decoration:none;opacity:1}.site-nav-right{height:40px}.site-nav-right,.social-links{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.social-links a:last-of-type{padding-right:20px}.social-link{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0;padding:10px;color:#fff;opacity:.8}.social-link:hover{opacity:1}.social-link svg{height:1.8rem;fill:#fff}.social-link-fb svg{height:1.5rem}.social-link-wb svg{height:1.6rem}.social-link-wb svg path{stroke:#fff}.social-link-rss svg{height:1.9rem}.subscribe-button{display:block;padding:4px 10px;border:1px solid #fff;color:#fff;font-size:1.2rem;line-height:1em;border-radius:10px;opacity:.8}.subscribe-button:hover{text-decoration:none;opacity:1}.rss-button{opacity:.8}.rss-button:hover{opacity:1}.rss-button svg{margin-bottom:1px;height:2.1rem;fill:#fff}@media (max-width:700px){.site-header{padding-right:0;padding-left:0}.site-nav-left{margin-right:0;padding-left:4vw}.site-nav-right{display:none}}.post-feed{position:relative;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -20px;padding:40px 0 0}.post-card,.post-feed{display:-ms-flexbox;display:flex}.post-card{-ms-flex:1 1 300px;flex:1 1 300px;-ms-flex-direction:column;flex-direction:column;overflow:hidden;margin:0 20px 40px;min-height:300px;background:#fff 50%;background-size:cover;border-radius:5px;box-shadow:8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);transition:all .5s ease}.post-card:hover{box-shadow:8px 28px 50px rgba(39,44,49,.07),1px 6px 12px rgba(39,44,49,.04);transition:all .4s ease;transform:translate3D(0,-1px,0) scale(1.02)}.post-card-image-link{position:relative;display:block;overflow:hidden;border-radius:5px 5px 0 0}.post-card-image{width:auto;height:200px;background:#c5d2d9 no-repeat 50%;background-size:cover}.post-card-content-link{position:relative;-ms-flex-positive:1;flex-grow:1;display:block;padding:25px 25px 0;color:#15171a}.post-card-content-link:hover{text-decoration:none}.post-card-tags{display:block;margin-bottom:4px;color:#738a94;font-size:1.2rem;line-height:1.15em;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.post-card-title{margin-top:0}.post-card-content{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}.post-card-excerpt{font-family:Georgia,serif}.post-card-meta{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end;padding:0 25px 25px}.author-profile-image,.avatar-wrapper{display:block;width:100%;height:100%;background:#e3e9ed;border-radius:100%;object-fit:cover}.post-card-meta .avatar-wrapper,.post-card-meta .profile-image-wrapper{position:relative}.author-list{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;margin:0;padding:0;list-style:none}.author-list-item{position:relative;-ms-flex-negative:0;flex-shrink:0;margin:0;padding:0}.author-list-item:first-child{z-index:10}.author-list-item:nth-child(2){z-index:9}.author-list-item:nth-child(3){z-index:8}.author-list-item:nth-child(4){z-index:7}.author-list-item:nth-child(5){z-index:6}.author-list-item:nth-child(6){z-index:5}.author-list-item:nth-child(7){z-index:4}.author-list-item:nth-child(8){z-index:3}.author-list-item:nth-child(9){z-index:2}.author-list-item:nth-child(10){z-index:1}.static-avatar{margin:0 -5px;width:34px;height:34px}.moving-avatar,.static-avatar{display:block;overflow:hidden;border:2px solid #fff;border-radius:100%}.moving-avatar{margin:0 -6px;width:56px;height:56px;transition:all .5s cubic-bezier(.4,.01,.165,.99) .7s}@media (min-width:800px){.author-list:hover .moving-avatar{margin:0;transition:all .3s cubic-bezier(.4,.01,.165,.99)}}.author-name-tooltip{position:absolute;bottom:105%;z-index:999;display:block;padding:2px 8px;color:#fff;font-size:1.2rem;letter-spacing:.2px;white-space:nowrap;background:#15171a;border-radius:3px;box-shadow:0 12px 26px rgba(39,44,49,.08),1px 3px 8px rgba(39,44,49,.03);opacity:0;transition:all .3s cubic-bezier(.4,.01,.165,.99);transform:translateY(6px);pointer-events:none}.author-list-item:hover .author-name-tooltip{opacity:1;transform:translateY(0)}@media (max-width:650px){.author-name-tooltip{display:none}}.reading-time{-ms-flex-negative:0;flex-shrink:0;margin-left:20px;color:#738a94;font-size:1.2rem;line-height:33px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}@media (min-width:795px){.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image){-ms-flex:1 1 100%;flex:1 1 100%;-ms-flex-direction:row;flex-direction:row}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;border-radius:5px 0 0 5px}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image{position:absolute;width:100%;height:100%}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content{-ms-flex:0 1 357px;flex:0 1 357px}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2{font-size:2.6rem}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p{font-size:1.8rem;line-height:1.55em}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link{padding:30px 40px 0}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta{padding:0 40px 30px}}.home-template .site-header:after{display:none}@media (max-width:650px){.post-feed{padding-top:5vw}.post-card{margin:0 20px 5vw}}.page-template .site-main,.post-template .site-main{padding-bottom:4vw;background:#fff}.post-full{position:relative;z-index:50}.post-full-header{margin:0 auto;padding:6vw 3vw 3vw;max-width:1040px;text-align:center}@media (max-width:500px){.post-full-header{padding:14vw 3vw 10vw}}.post-full-meta{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:#738a94;font-size:1.4rem;font-weight:600;text-transform:uppercase}.post-full-meta-date{color:#3eb0ef}.post-full-title{margin:0;color:#090a0b}.date-divider{display:inline-block;margin:0 6px 1px}.post-full-image{margin:0 -10vw -165px;height:800px;background:#c5d2d9 50%;background-size:cover;border-radius:5px}@media (max-width:1170px){.post-full-image{margin:0 -4vw -100px;height:600px;border-radius:0}}@media (max-width:800px){.post-full-image{height:400px}}.post-full-content{position:relative;margin:0 auto;padding:70px 100px 0;min-height:230px;font-family:Georgia,serif;font-size:2.2rem;line-height:1.6em;background:#fff}@media (max-width:1170px){.post-full-content{padding:5vw 7vw 0}}@media (max-width:800px){.post-full-content{font-size:1.9rem}}.post-full-content:before{left:-5px;transform:rotate(-5deg)}.post-full-content:after,.post-full-content:before{content:"";position:absolute;top:15px;z-index:-1;display:block;width:20px;height:200px;background:rgba(39,44,49,.15);filter:blur(5px)}.post-full-content:after{right:-5px;transform:rotate(5deg)}.no-image .post-full-content{padding-top:0}.no-image .post-full-content:after,.no-image .post-full-content:before{display:none}.footnotes,.post-full-comments,.post-full-content blockquote,.post-full-content dl,.post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h5,.post-full-content h6,.post-full-content ol,.post-full-content p,.post-full-content pre,.post-full-content ul{min-width:100%}.post-full-content li{word-break:break-word}.post-full-content li p{margin:0}.post-full-content a{color:#000;word-break:break-word;box-shadow:inset 0 -1px 0 #3eb0ef}.post-full-content a:hover{color:#3eb0ef;text-decoration:none}.post-full-content em,.post-full-content strong{color:#090a0b}.post-full-content small{display:inline-block;line-height:1.6em}.post-full-content li:first-child{margin-top:0}.post-full-content img,.post-full-content video{display:block;margin:1.5em auto;max-width:1040px;height:auto}@media (max-width:1040px){.post-full-content img,.post-full-content video{width:100%}}.post-full-content img[src$="#full"]{max-width:none;width:100vw}.post-full-content img+br+small{display:block;margin-top:-3em;margin-bottom:1.5em;text-align:center}.post-full-content iframe{margin:0 auto!important}.post-full-content blockquote{margin:0 0 1.5em;padding:0 1.5em;border-left:3px solid #3eb0ef}.post-full-content blockquote p{margin:0 0 1em;color:inherit;font-size:inherit;line-height:inherit;font-style:italic}.post-full-content blockquote p:last-child{margin-bottom:0}.post-full-content code{padding:0 5px 2px;font-size:.8em;line-height:1em;font-weight:400!important;background:#e5eff5;border-radius:3px}.post-full-content p code{word-break:break-all}.post-full-content pre{overflow-x:auto;margin:1.5em 0 3em;padding:20px;max-width:100%;border:1px solid #000;color:#e5eff5;font-size:1.4rem;line-height:1.5em;background:#0e0f11;border-radius:5px}.post-full-content pre code{padding:0;font-size:inherit;line-height:inherit;background:transparent}.post-full-content pre code :not(span){color:inherit}.post-full-content .fluid-width-video-wrapper{margin:1.5em 0 3em}.post-full-content hr{margin:4vw 0}.post-full-content hr:after{content:"";position:absolute;top:-15px;left:50%;display:block;margin-left:-10px;width:1px;height:30px;background:#e3e9ed;box-shadow:0 0 0 5px #fff;transform:rotate(45deg)}.post-full-content h1,.post-full-content h2,.post-full-content h3,.post-full-content h4,.post-full-content h5,.post-full-content h6{color:#090a0b;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.post-full-content h1{margin:.5em 0 .2em;font-size:4.6rem;font-weight:700}@media (max-width:500px){.post-full-content h1{font-size:2.8rem}}.post-full-content h2{margin:.5em 0 .2em;font-size:3.6rem;font-weight:700}@media (max-width:500px){.post-full-content h2{font-size:2.6rem}}.post-full-content h3{margin:.5em 0 .2em;font-size:2.8rem;font-weight:700}@media (max-width:500px){.post-full-content h3{font-size:2.2rem}}.post-full-content h4{margin:.5em 0 .2em;font-size:2.8rem;font-weight:700}@media (max-width:500px){.post-full-content h4{font-size:2.2rem}}.post-full-content h5{display:block;margin:.5em 0;padding:1em 0 1.5em;border:0;color:#3eb0ef;font-family:Georgia,serif;font-size:3.2rem;line-height:1.35em;text-align:center}@media (min-width:1180px){.post-full-content h5{max-width:1060px;width:100vw}}@media (max-width:500px){.post-full-content h5{padding:0 0 .5em;font-size:2.2rem}}.post-full-content h6{margin:.5em 0 .2em;font-size:2.3rem;font-weight:700}@media (max-width:500px){.post-full-content h6{font-size:2rem}}.footnotes-sep{margin-bottom:30px}.footnotes{font-size:1.5rem}.footnotes p{margin:0}.footnote-backref{color:#3eb0ef!important;font-size:1.2rem;font-weight:700;text-decoration:none!important;box-shadow:none!important}@media (max-width:500px){.post-full-meta{font-size:1.2rem;line-height:1.3em}.post-full-title{font-size:2.9rem}.post-full-image{margin-bottom:4vw;height:350px}.post-full-content{padding:0}.post-full-content:after,.post-full-content:before{display:none}}.post-full-content table{display:inline-block;overflow-x:auto;margin:.5em 0 2.5em;max-width:100%;width:auto;border-spacing:0;border-collapse:collapse;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;white-space:nowrap;vertical-align:top;-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left,rgba(0,0,0,.2) 0,transparent 75%) 0,radial-gradient(ellipse at right,rgba(0,0,0,.2) 0,transparent 75%) 100%;background-attachment:scroll,scroll;background-size:10px 100%,10px 100%;background-repeat:no-repeat}.post-full-content table td:first-child{background-image:linear-gradient(90deg,#fff 50%,hsla(0,0%,100%,0));background-size:20px 100%;background-repeat:no-repeat}.post-full-content table td:last-child{background-image:linear-gradient(270deg,#fff 50%,hsla(0,0%,100%,0));background-position:100% 0;background-size:20px 100%;background-repeat:no-repeat}.post-full-content table th{color:#15171a;font-size:1.2rem;font-weight:700;letter-spacing:.2px;text-align:left;text-transform:uppercase;background-color:#f4f8fb}.post-full-content table td,.post-full-content table th{padding:6px 12px;border:1px solid #e3ecf3}.subscribe-form{margin:1.5em 0;padding:6.5vw 7vw 7vw;border:1px solid #edf4f8;text-align:center;background:#f4f8fb;border-radius:7px}.subscribe-form-title{margin:0 0 3px;padding:0;color:#15171a;font-size:3.5rem;line-height:1;font-weight:700}.subscribe-form p{margin-bottom:1em;color:#738a94;font-size:2.2rem;line-height:1.55em;letter-spacing:.2px}.subscribe-form form{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0 auto;max-width:420px}.subscribe-form .form-group{-ms-flex-positive:1;flex-grow:1}.subscribe-email{display:block;padding:10px;width:100%;border:1px solid #dae2e7;color:#738a94;font-size:1.8rem;line-height:1em;font-weight:400;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;border-radius:5px;transition:border-color .15s linear;-webkit-appearance:none}.subscribe-form button{display:inline-block;margin:0 0 0 10px;padding:0 20px;height:41px;outline:none;color:#fff;font-size:1.5rem;line-height:37px;font-weight:400;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,.1);background:linear-gradient(#4fb7f0,#29a0e0 60%,#29a0e0 90%,#36a6e2);border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);-webkit-font-smoothing:subpixel-antialiased}.subscribe-form button:active,.subscribe-form button:focus{background:#209cdf}@media (max-width:650px){.subscribe-form-title{font-size:2.4rem}.subscribe-form p{font-size:1.6rem}}@media (max-width:500px){.subscribe-form form{-ms-flex-direction:column;flex-direction:column}.subscribe-form .form-group{width:100%}.subscribe-form button{margin:10px 0 0;width:100%}}.post-full-footer{-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin:0 auto;padding:3vw 0 6vw;max-width:840px}.author-card,.post-full-footer{display:-ms-flexbox;display:flex}.author-card .author-profile-image,.author-card .avatar-wrapper{width:60px;height:60px}.author-card-name{margin:8px 0 2px;padding:0;font-size:2rem}.author-card-name a{color:#15171a;font-weight:700}.author-card-name a:hover{text-decoration:none}.author-card-content p{margin:0;color:#738a94;line-height:1.3em}.post-full-footer-right{-ms-flex-negative:0;flex-shrink:0;margin-left:20px}.author-card-button{display:block;padding:9px 16px;border:1px solid #aebbc1;color:#738a94;font-size:1.2rem;line-height:1;font-weight:500;border-radius:20px;transition:all .2s ease}.author-card-button:hover{border-color:#3eb0ef;color:#3eb0ef;text-decoration:none}.post-full-authors{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin-top:20px;padding-top:40px;border-top:1px solid #e3e9ed}.post-full-authors-content{margin-bottom:20px}.post-full-authors-content p{margin-bottom:0;color:#738a94;font-size:1.4rem;letter-spacing:.2px;text-align:center;text-transform:uppercase}.post-full-authors-content a{display:inline-block;color:#424852;font-size:1.4rem;font-weight:600;text-transform:uppercase}.post-full-footer .author-list{-ms-flex-pack:center;justify-content:center;padding:10px 20px}.author-card .author-profile-image,.author-card .avatar-wrapper{position:relative;margin-right:15px}.author-list-item .author-card{position:absolute;bottom:130%;left:50%;z-index:300;display:block;margin-left:-160px;width:320px;font-size:1.4rem;letter-spacing:.2px;background:#fff;border-radius:6px;box-shadow:0 12px 26px rgba(39,44,49,.08),1px 3px 8px rgba(39,44,49,.03);opacity:0;transition:all .3s cubic-bezier(.4,.01,.165,.99);transform:scale(.98) translateY(15px);pointer-events:none}.author-list-item .author-card:before{content:"";position:absolute;top:100%;left:50%;display:block;margin-left:-12px;width:0;height:0;border-top:12px solid #fff;border-right:12px solid transparent;border-left:12px solid transparent}.author-list-item .author-card.hovered{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}.author-card .basic-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:30px 20px 20px;color:#fff;background:#15171a;border-radius:6px 6px 0 0}.author-card .basic-info h2{margin:1em 0 .5em}.author-card .bio{padding:20px 20px 0}@media (max-width:650px){.author-list-item .author-card{display:none}}.basic-info .author-profile-image,.basic-info .avatar-wrapper{margin:0;width:88px;height:88px;border:none}.basic-info .avatar-wrapper{position:relative;background:rgba(229,239,245,.1)}.basic-info .avatar-wrapper svg{margin:0;width:88px;height:88px;opacity:.15}.post-full-comments{margin:0 auto;max-width:840px}.read-next-feed{-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -20px;padding:40px 0 0}.read-next-card,.read-next-feed{display:-ms-flexbox;display:flex}.read-next-card{position:relative;-ms-flex:1 1 300px;flex:1 1 300px;-ms-flex-direction:column;flex-direction:column;overflow:hidden;margin:0 20px 40px;padding:25px;color:#fff;background:#15171a 50%;background-size:cover;border-radius:5px;box-shadow:8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03)}.read-next-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;display:block;background:linear-gradient(135deg,rgba(0,40,60,.8),rgba(0,20,40,.7));border-radius:5px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.read-next-card-header{position:relative;z-index:50;padding-top:20px;text-align:center}.read-next-card-header-sitetitle{display:block;font-size:1.3rem;line-height:1.3em;opacity:.8}.read-next-card-header-title{margin:0;padding:0 20px;color:#fff;font-size:3rem;line-height:1.2em;letter-spacing:1px}.read-next-card-header-title a{color:#fff;font-weight:300;text-decoration:none}.read-next-card-header-title a:hover{text-decoration:none}.read-next-divider{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:80px}.read-next-divider svg{width:40px;fill:transparent;stroke:#fff;stroke-width:.5px;stroke-opacity:.65}.read-next-card-content{position:relative;z-index:50;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;font-size:1.7rem}.read-next-card-content ul{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto;padding:0;text-align:center;list-style:none}.read-next-card-content li{margin:0;padding:0;font-size:1.6rem;line-height:1.25em;font-weight:200;letter-spacing:-.5px}.read-next-card-content li a{display:block;padding:20px 0;border-bottom:1px solid hsla(0,0%,100%,.3);color:#fff;font-weight:500;vertical-align:top;transition:opacity .3s ease}.read-next-card-content li:first-of-type a{padding-top:10px}.read-next-card-content li a:hover{opacity:1}.read-next-card-footer{position:relative;margin:15px 0 3px;text-align:center}.read-next-card-footer a{color:#fff}.floating-header{visibility:hidden;position:fixed;top:0;right:0;left:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:60px;border-bottom:1px solid rgba(0,0,0,.06);background:hsla(0,0%,100%,.95);transition:all .5s cubic-bezier(.19,1,.22,1);transform:translate3d(0,-120%,0)}.floating-active{visibility:visible;transition:all .5s cubic-bezier(.22,1,.27,1);transform:translateZ(0)}.floating-header-logo{overflow:hidden;margin:0 0 0 20px;font-size:1.6rem;line-height:1em;letter-spacing:-1px;text-overflow:ellipsis;white-space:nowrap}.floating-header-logo a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:#15171a;line-height:1.1em;font-weight:700}.floating-header-logo a:hover{text-decoration:none}.floating-header-logo img{margin:0 10px 0 0;max-height:20px}.floating-header-divider{margin:0 5px;line-height:1em}.floating-header-title{-ms-flex:1;flex:1;overflow:hidden;margin:0;color:#2e2e2e;font-size:1.6rem;line-height:1.3em;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.floating-header-share{-ms-flex-pack:end;justify-content:flex-end;padding-left:2%;font-size:1.3rem;line-height:1}.floating-header-share,.floating-header-share a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.floating-header-share a{-ms-flex-pack:center;justify-content:center}.floating-header-share svg{width:auto;height:16px;fill:#fff}.floating-header-share-label{-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:10px;color:rgba(0,0,0,.7);font-weight:500}.floating-header-share-label svg{margin:0 5px 0 10px;width:18px;height:18px;stroke:rgba(0,0,0,.7);transform:rotate(90deg)}.floating-header-share-fb,.floating-header-share-tw{display:block;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;width:60px;height:60px;color:#fff;line-height:48px;text-align:center;transition:all .5s cubic-bezier(.19,1,.22,1)}.floating-header-share-tw{background:#33b1ff}.floating-header-share-fb{background:#005e99}.progress{position:absolute;right:0;bottom:-1px;left:0;width:100%;height:2px;border:none;color:#3eb0ef;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar{background-color:transparent}.progress::-webkit-progress-value{background-color:#3eb0ef}.progress::-moz-progress-bar{background-color:#3eb0ef}.progress-container{position:absolute;top:0;left:0;display:block;width:100%;height:2px;background-color:transparent}.progress-bar{display:block;width:50%;height:inherit;background-color:#3eb0ef}@media (max-width:900px){.floating-header{height:40px}.floating-header-logo,.floating-header-title{font-size:1.5rem}.floating-header-share-fb,.floating-header-share-tw{width:40px;height:40px;line-height:38px}}@media (max-width:800px){.floating-header-logo{margin-left:10px}.floating-header-logo a{color:#2e2e2e}.floating-header-divider,.floating-header-title{visibility:hidden}}@media (max-width:450px){.floating-header-share-label{display:none}}.post-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;max-width:920px}.post-template .post-content>p:first-child{font-size:1.25em;line-height:1.5em}.post-full-content .kg-image{max-width:100%}.post-full-image+.post-full-content .kg-content :first-child .kg-image{width:100%}.post-full-content .kg-width-wide .kg-image{max-width:1040px}.post-full-content .kg-width-full .kg-image{max-width:100vw}.post-full-content figure{margin:1.5em 0 3em}.post-full-content figure img{margin:0}.post-full-content figcaption{margin:1em 0 0;font-size:80%;line-height:1.6em;text-align:center}.kg-width-full figcaption{padding:0 1.5em}.kg-embed-card{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;min-width:100%}.kg-embed-card .fluid-width-video-wrapper{margin:0}@media (max-width:1040px){.post-full-content .kg-width-full .kg-image{width:100vw}}.kg-gallery-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:1040px;width:100vw}.kg-gallery-row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}.kg-gallery-image img{display:block;margin:0;width:100%;height:100%}.kg-gallery-row:not(:first-of-type){margin:.75em 0 0}.kg-gallery-image:not(:first-of-type){margin:0 0 0 .75em}.kg-gallery-card+.kg-gallery-card,.kg-gallery-card+.kg-image-card.kg-width-wide,.kg-image-card.kg-width-wide+.kg-gallery-card,.kg-image-card.kg-width-wide+.kg-image-card.kg-width-wide{margin:-2.25em 0 3em}.site-header-content .author-profile-image{z-index:10;-ms-flex-negative:0;flex-shrink:0;margin:0 0 20px;width:100px;height:100px;box-shadow:0 0 0 6px hsla(0,0%,100%,.1)}.site-header-content .author-bio{z-index:10;-ms-flex-negative:0;flex-shrink:0;margin:5px 0 10px;max-width:600px;font-size:2rem;line-height:1.3em;font-weight:300;letter-spacing:.5px;opacity:.8}.site-header-content .author-meta{z-index:10;-ms-flex-negative:0;flex-shrink:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0 0 10px;font-family:Georgia,serif;font-style:italic}.site-header-content .author-location svg{height:1.9rem;stroke:#fff}.site-header-content .bull{display:inline-block;margin:0 12px;opacity:.5}.site-header-content .social-link:first-of-type{padding-left:4px}@media (max-width:500px){.site-header-content .author-bio{font-size:1.8rem;line-height:1.15em;letter-spacing:0}.author-location,.author-stats{display:none}}.error-template .site-main{padding:7vw 4vw}.site-nav-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}.site-nav-center .site-nav-logo{margin-right:0}.error-message{text-align:center}.error-code{margin:0;font-size:12vw;line-height:1em;letter-spacing:-5px;opacity:.3}.error-description{margin:0;color:#738a94;font-size:3rem;line-height:1.3em;font-weight:400}@media (max-width:800px){.error-description{margin:5px 0 0;font-size:1.8rem}}.error-link{display:inline-block;margin-top:5px}.error-template .post-feed{padding-top:0}.subscribe-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9000;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,25,40,.97);opacity:0;transition:opacity .2s ease-in;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.subscribe-overlay:target{opacity:1;pointer-events:auto}.subscribe-overlay-content{position:relative;z-index:9999;margin:0 0 5vw;padding:4vw;color:#fff;text-align:center}.subscribe-overlay-logo{position:fixed;top:23px;left:30px;height:30px}.subscribe-overlay-title{display:inline-block;margin:0 0 10px;font-size:6rem;line-height:1.15em}.subscribe-overlay-description{margin:0 auto 50px;max-width:650px;font-family:Georgia,serif;font-size:3rem;line-height:1.3em;font-weight:300;opacity:.8}.subscribe-overlay form{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0 auto;max-width:500px}.subscribe-overlay .form-group{-ms-flex-positive:1;flex-grow:1}.subscribe-overlay .subscribe-email{display:block;padding:14px 20px;width:100%;border:none;color:#738a94;font-size:2rem;line-height:1em;font-weight:400;letter-spacing:.5px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;border-radius:8px;transition:border-color .15s linear;-webkit-appearance:none}.subscribe-email:focus{outline:0;border-color:#becdd5}.subscribe-overlay button{display:inline-block;margin:0 0 0 15px;padding:0 25px;height:52px;outline:none;color:#fff;font-size:1.7rem;line-height:37px;font-weight:400;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,.1);background:linear-gradient(#4fb7f0,#29a0e0 60%,#29a0e0 90%,#36a6e2);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);-webkit-font-smoothing:subpixel-antialiased}.subscribe-overlay button:active,.subscribe-overlay button:focus{background:#209cdf}.subscribe-overlay-close{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.subscribe-overlay-close:before{transform:rotate(45deg)}.subscribe-overlay-close:after,.subscribe-overlay-close:before{content:"";position:absolute;top:40px;right:25px;display:block;width:30px;height:2px;background:#fff;opacity:.8}.subscribe-overlay-close:after{transform:rotate(-45deg)}.subscribe-overlay-close:hover{cursor:default}.site-footer{position:relative;padding-top:20px;padding-bottom:60px;color:#fff;background:#000}.site-footer-content{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;font-size:1.3rem}.site-footer-content,.site-footer-content a{color:hsla(0,0%,100%,.7)}.site-footer-content a:hover{color:#fff;text-decoration:none}.site-footer-nav{display:-ms-flexbox;display:flex}.site-footer-nav a{position:relative;margin-left:20px}.site-footer-nav a:before{content:"";position:absolute;top:11px;left:-11px;display:block;width:2px;height:2px;background:#fff;border-radius:100%}.site-footer-nav a:first-of-type:before{display:none}@media (max-width:650px){.site-footer-content{-ms-flex-direction:column;flex-direction:column}.site-footer-nav a:first-child{margin-left:0}}
-/*# sourceMappingURL=screen.css.map */
diff --git a/assets/css/screen.css b/assets/css/screen.css
deleted file mode 100644
index e407063..0000000
--- a/assets/css/screen.css
+++ /dev/null
@@ -1,2271 +0,0 @@
-/* Table of Contents
-/* ------------------------------------------------------------
-
-This is a development CSS file which is built to a minified
-production stylesheet in assets/built/screen.css
-
-1.  Global Styles
-2.  Layout
-3.  Special Templates
-4.  Site Header
-5.  Site Navigation
-6.  Post Feed
-7.  Single Post
-  7.1. Subscribe Form
-  7.2. Post Footer
-     7.2.1 Single Author Byline
-     7.2.2 Multiple Author Byline
-  7.3. Comments
-  7.4. Related Posts
-  7.5. Floating Header
-  7.6. Koenig Styles
-8.  Author Template
-9.  Error Template
-10. Subscribe Overlay
-11. Site Footer
-
-*/
-
-
-/* 1. Global - Set up the things
-/* ---------------------------------------------------------- */
-@import "global.css";
-
-body {
-    background: #f4f8fb;
-}
-
-.img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background-position: center center;
-    background-size: cover;
-    border-radius: 100%;
-}
-
-.hidden {
-    visibility: hidden;
-    position: absolute;
-    text-indent: -9999px;
-}
-
-
-/* 2. Layout - Page building blocks
-/* ---------------------------------------------------------- */
-
-.site-wrapper {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-.site-main {
-    z-index: 100;
-    flex-grow: 1;
-}
-
-/* Full width page blocks */
-.outer {
-    position: relative;
-    padding: 0 4vw;
-}
-
-/* Centered content container blocks */
-.inner {
-    margin: 0 auto;
-    max-width: 1040px;
-    width: 100%;
-}
-
-/* Usage:
-
-<div class="outer">
-    <div class="inner">
-        Centered content
-    </div>
-</div>
-
-*/
-
-/* 3. Special Template Styles
-/* ---------------------------------------------------------- */
-
-@media (min-width: 900px) {
-    .home-template .post-feed,
-    .tag-template .post-feed,
-    .author-template .post-feed {
-        margin-top: -70px;
-        padding-top: 0;
-    }
-    .home-template .site-nav {
-        position: relative;
-        top: -70px;
-    }
-}
-
-
-/* 4. Site Header
-/* ---------------------------------------------------------- */
-
-.site-header {
-    position: relative;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    color: #fff;
-    background: color(var(--darkgrey) l(-5%)) no-repeat center center;
-    background-size: cover;
-}
-
-.site-header:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
-    display: block;
-    background: rgba(0,0,0,0.18);
-}
-
-.site-header:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: auto;
-    left: 0;
-    z-index: 10;
-    display: block;
-    height: 80px;
-    background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
-}
-
-.site-header.no-cover:before,
-.site-header.no-cover:after {
-    display: none;
-}
-
-.site-header-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 10vw 4vw;
-    min-height: 200px;
-    max-height: 450px;
-    text-align: center;
-}
-
-.site-title {
-    z-index: 10;
-    margin: 0;
-    padding: 0;
-    font-size: 3.8rem;
-    font-weight: 700;
-}
-
-.site-logo {
-    max-height: 45px;
-}
-
-.site-description {
-    z-index: 10;
-    margin: 0;
-    padding: 5px 0;
-    font-size: 2.2rem;
-    font-weight: 300;
-    letter-spacing: 0.5px;
-    opacity: 0.8;
-}
-
-@media (max-width: 500px) {
-    .site-title {
-        font-size: 3rem;
-    }
-    .site-description {
-        font-size: 1.8rem;
-    }
-}
-
-
-/* 5. Site Navigation
-/* ---------------------------------------------------------- */
-
-.site-nav {
-    position: relative;
-    z-index: 300;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    overflow-y: hidden;
-    height: 40px;
-    font-size: 1.2rem;
-}
-
-.site-nav-left {
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    margin-right: 10px;
-    padding-bottom: 80px;
-    letter-spacing: 0.4px;
-    white-space: nowrap;
-
-    -ms-overflow-scrolling: touch;
-}
-
-/* Site Nav Hack Explanation (above):
-
-What's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them.
-
-The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result.
-
-*/
-
-.site-nav-logo {
-    flex-shrink: 0;
-    display: block;
-    margin-right: 24px;
-    padding: 11px 0;
-    color: #fff;
-    font-size: 1.7rem;
-    line-height: 1em;
-    font-weight: bold;
-    letter-spacing: -0.5px;
-}
-
-.site-nav-logo:hover {
-    text-decoration: none;
-}
-
-.site-nav-logo img {
-    display: block;
-    width: auto;
-    height: 21px;
-}
-
-.nav {
-    display: flex;
-    margin: 0 0 0 -12px;
-    padding: 0;
-    list-style: none;
-}
-
-.nav li {
-    display: block;
-    margin: 0;
-    padding: 0;
-    text-transform: uppercase;
-}
-
-.nav li a {
-    display: block;
-    margin: 0;
-    padding: 10px 12px;
-    color: #fff;
-    opacity: 0.8;
-}
-
-.nav li a:hover {
-    text-decoration: none;
-    opacity: 1;
-}
-
-.site-nav-right {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    height: 40px;
-}
-
-.social-links {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-}
-
-.social-links a:last-of-type {
-    padding-right: 20px;
-}
-
-.social-link {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 10px;
-    color: #fff;
-    opacity: 0.8;
-}
-
-.social-link:hover {
-    opacity: 1;
-}
-
-.social-link svg {
-    height: 1.8rem;
-    fill: #fff;
-}
-
-.social-link-fb svg {
-    height: 1.5rem;
-}
-
-.social-link-wb svg {
-    height: 1.6rem;
-}
-
-.social-link-wb svg path {
-    stroke: #fff;
-}
-
-.social-link-rss svg {
-    height: 1.9rem;
-}
-
-.subscribe-button {
-    display: block;
-    padding: 4px 10px;
-    border: #fff 1px solid;
-    color: #fff;
-    font-size: 1.2rem;
-    line-height: 1em;
-    border-radius: 10px;
-    opacity: 0.8;
-}
-
-.subscribe-button:hover {
-    text-decoration: none;
-    opacity: 1;
-}
-
-.rss-button {
-    opacity: 0.8;
-}
-
-.rss-button:hover {
-    opacity: 1;
-}
-
-.rss-button svg {
-    margin-bottom: 1px;
-    height: 2.1rem;
-    fill: #fff;
-}
-
-@media (max-width: 700px) {
-    .site-header {
-        padding-right: 0;
-        padding-left: 0;
-    }
-    .site-nav-left {
-        margin-right: 0;
-        padding-left: 4vw;
-    }
-    .site-nav-right {
-        display: none;
-    }
-}
-
-
-/* 6. Post Feed
-/* ---------------------------------------------------------- */
-
-.post-feed {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -20px;
-    padding: 40px 0 0 0;
-}
-
-.post-card {
-    flex: 1 1 300px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    margin: 0 20px 40px;
-    min-height: 300px;
-    background: #fff center center;
-    background-size: cover;
-    border-radius: 5px;
-    box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
-    transition: all 0.5s ease;
-}
-
-.post-card:hover {
-    box-shadow: rgba(39,44,49,0.07) 8px 28px 50px, rgba(39, 44, 49, 0.04) 1px 6px 12px;
-    transition: all 0.4s ease;
-    transform: translate3D(0, -1px, 0) scale(1.02);
-}
-
-.post-card-image-link {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    border-radius: 5px 5px 0 0;
-}
-
-.post-card-image {
-    width: auto;
-    height: 200px;
-    background: var(--lightgrey) no-repeat center center;
-    background-size: cover;
-}
-
-.post-card-content-link {
-    position: relative;
-    flex-grow: 1;
-    display: block;
-    padding: 25px 25px 0;
-    color: var(--darkgrey);
-}
-
-.post-card-content-link:hover {
-    text-decoration: none;
-}
-
-.post-card-tags {
-    display: block;
-    margin-bottom: 4px;
-    color: var(--midgrey);
-    font-size: 1.2rem;
-    line-height: 1.15em;
-    font-weight: 500;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-}
-
-.post-card-title {
-    margin-top: 0;
-}
-
-.post-card-content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.post-card-excerpt {
-    font-family: Georgia, serif;
-}
-
-.post-card-meta {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    padding: 0 25px 25px;
-}
-
-.author-profile-image,
-.avatar-wrapper {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: color(var(--lightgrey) l(+10%));
-    border-radius: 100%;
-
-    object-fit: cover;
-}
-
-.post-card-meta .profile-image-wrapper,
-.post-card-meta .avatar-wrapper {
-    position: relative;
-}
-
-.author-list {
-    display: flex;
-    flex-wrap: wrap-reverse;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.author-list-item {
-    position: relative;
-    flex-shrink: 0;
-    margin: 0;
-    padding: 0;
-}
-
-.author-list-item:nth-child(1) {
-    z-index: 10;
-}
-.author-list-item:nth-child(2) {
-    z-index: 9;
-}
-.author-list-item:nth-child(3) {
-    z-index: 8;
-}
-.author-list-item:nth-child(4) {
-    z-index: 7;
-}
-.author-list-item:nth-child(5) {
-    z-index: 6;
-}
-.author-list-item:nth-child(6) {
-    z-index: 5;
-}
-.author-list-item:nth-child(7) {
-    z-index: 4;
-}
-.author-list-item:nth-child(8) {
-    z-index: 3;
-}
-.author-list-item:nth-child(9) {
-    z-index: 2;
-}
-.author-list-item:nth-child(10) {
-    z-index: 1;
-}
-
-.static-avatar {
-    display: block;
-    overflow: hidden;
-    margin: 0 -5px;
-    width: 34px;
-    height: 34px;
-    border: #fff 2px solid;
-    border-radius: 100%;
-}
-
-.moving-avatar {
-    display: block;
-    overflow: hidden;
-    margin: 0 -6px;
-    width: 56px;
-    height: 56px;
-    border: #fff 2px solid;
-    border-radius: 100%;
-    transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
-}
-
-@media (min-width: 800px) {
-    .author-list:hover .moving-avatar {
-        margin: 0;
-        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-    }
-}
-
-.author-name-tooltip {
-    position: absolute;
-    bottom: 105%;
-    z-index: 999;
-    display: block;
-    padding: 2px 8px;
-    color: white;
-    font-size: 1.2rem;
-    letter-spacing: 0.2px;
-    white-space: nowrap;
-    background: var(--darkgrey);
-    border-radius: 3px;
-    box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
-    opacity: 0;
-    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-    transform: translateY(6px);
-    pointer-events: none;
-}
-
-.author-list-item:hover .author-name-tooltip {
-    opacity: 1.0;
-    transform: translateY(0px);
-}
-
-@media (max-width: 650px) {
-    .author-name-tooltip {
-        display: none;
-    }
-}
-
-.reading-time {
-    flex-shrink: 0;
-    margin-left: 20px;
-    color: var(--midgrey);
-    font-size: 1.2rem;
-    line-height: 33px;
-    font-weight: 500;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-}
-
-/* Special Styling for home page grid (below):
-
-The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
-
- */
-
-@media (min-width: 795px) {
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) {
-        flex: 1 1 100%;
-        flex-direction: row;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link {
-        position: relative;
-        flex: 1 1 auto;
-        border-radius: 5px 0 0 5px;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content {
-        flex: 0 1 357px;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2 {
-        font-size: 2.6rem;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p {
-        font-size: 1.8rem;
-        line-height: 1.55em;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link {
-        padding: 30px 40px 0;
-    }
-
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta {
-        padding: 0 40px 30px;
-    }
-}
-
-.home-template .site-header:after {
-    display: none;
-}
-
-
-/* Adjust some margins for smaller screens */
-@media (max-width: 650px) {
-    .post-feed {
-        padding-top: 5vw;
-    }
-    .post-card {
-        margin: 0 20px 5vw;
-    }
-}
-
-
-
-/* 7. Single Post
-/* ---------------------------------------------------------- */
-
-.post-template .site-main,
-.page-template .site-main {
-    padding-bottom: 4vw;
-    background: #fff;
-}
-
-.post-full {
-    position: relative;
-    z-index: 50;
-}
-/* ^ Required to make .post-full-content:before/after z-index stacking work */
-
-.post-full-header {
-    margin: 0 auto;
-    padding: 6vw 3vw 3vw;
-    max-width: 1040px;
-    text-align: center;
-}
-@media (max-width: 500px) {
-    .post-full-header {
-        padding: 14vw 3vw 10vw;
-    }
-}
-
-.post-full-meta {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--midgrey);
-    font-size: 1.4rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.post-full-meta-date {
-    color: var(--blue);
-}
-
-.post-full-title {
-    margin: 0;
-    color: color(var(--darkgrey) l(-5%));
-}
-
-.date-divider {
-    display: inline-block;
-    margin: 0 6px 1px;
-}
-
-.post-full-image {
-    margin: 0 -10vw -165px;
-    height: 800px;
-    background: var(--lightgrey) center center;
-    background-size: cover;
-    border-radius: 5px;
-}
-
-@media (max-width: 1170px) {
-    .post-full-image {
-        margin: 0 -4vw -100px;
-        height: 600px;
-        border-radius: 0;
-    }
-}
-
-@media (max-width: 800px) {
-    .post-full-image {
-        height: 400px;
-    }
-}
-
-.post-full-content {
-    position: relative;
-    margin: 0 auto;
-    padding: 70px 100px 0;
-    min-height: 230px;
-    font-family: Georgia, serif;
-    font-size: 2.2rem;
-    line-height: 1.6em;
-    background: #fff;
-}
-
-@media (max-width: 1170px) {
-    .post-full-content {
-        padding: 5vw 7vw 0;
-    }
-}
-@media (max-width: 800px) {
-    .post-full-content {
-        font-size: 1.9rem;
-    }
-}
-
-.post-full-content:before {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: -5px;
-    z-index: -1;
-    display: block;
-    width: 20px;
-    height: 200px;
-    background: rgba(39,44,49,0.15);
-    filter: blur(5px);
-    transform: rotate(-5deg);
-}
-
-.post-full-content:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    right: -5px;
-    z-index: -1;
-    display: block;
-    width: 20px;
-    height: 200px;
-    background: rgba(39,44,49,0.15);
-    filter: blur(5px);
-    transform: rotate(5deg);
-}
-
-.no-image .post-full-content {
-    padding-top: 0;
-}
-
-.no-image .post-full-content:before,
-.no-image .post-full-content:after {
-    display: none;
-}
-
-.post-full-content h1,
-.post-full-content h2,
-.post-full-content h3,
-.post-full-content h4,
-.post-full-content h5,
-.post-full-content h6,
-.post-full-content p,
-.post-full-content ul,
-.post-full-content ol,
-.post-full-content dl,
-.post-full-content pre,
-.post-full-content blockquote,
-.post-full-comments,
-.footnotes {
-    min-width: 100%;
-}
-
-.post-full-content li {
-    word-break: break-word;
-}
-
-.post-full-content li p {
-    margin: 0;
-}
-
-.post-full-content a {
-    color: #000;
-    word-break: break-word;
-    box-shadow: var(--blue) 0 -1px 0 inset;
-}
-
-.post-full-content a:hover {
-    color: var(--blue);
-    text-decoration: none;
-}
-
-.post-full-content strong,
-.post-full-content em {
-    color: color(var(--darkgrey) l(-5%));
-}
-
-.post-full-content small {
-    display: inline-block;
-    line-height: 1.6em;
-}
-
-.post-full-content li:first-child {
-    margin-top: 0;
-}
-
-.post-full-content img,
-.post-full-content video {
-    display: block;
-    margin: 1.5em auto;
-    max-width: 1040px;
-    height: auto;
-}
-@media (max-width: 1040px) {
-    .post-full-content img,
-    .post-full-content video {
-        width: 100%;
-    }
-}
-
-
-/* Full bleed images (#full)
-Super neat trick courtesy of @JoelDrapper
-
-Usage (In Ghost edtior):
-
-![img](/some/image.jpg#full)
-
-*/
-.post-full-content img[src$="#full"] {
-    max-width: none;
-    width: 100vw;
-}
-
-
-/* Image captions
-
-Usage (In Ghost editor):
-
-![img](/some/image.jpg)
-<small>Your image caption</small>
-
-*/
-.post-full-content img + br + small {
-    display: block;
-    margin-top: -3em;
-    margin-bottom: 1.5em;
-    text-align: center;
-}
-
-
-/* Override third party iframe styles */
-.post-full-content iframe {
-    margin: 0 auto !important;
-}
-
-.post-full-content blockquote {
-    margin: 0 0 1.5em;
-    padding: 0 1.5em;
-    border-left: #3eb0ef 3px solid;
-}
-
-.post-full-content blockquote p {
-    margin: 0 0 1em 0;
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    font-style: italic;
-}
-
-.post-full-content blockquote p:last-child {
-    margin-bottom: 0;
-}
-
-.post-full-content code {
-    padding: 0 5px 2px;
-    font-size: 0.8em;
-    line-height: 1em;
-    font-weight: 400!important;
-    background: var(--whitegrey);
-    border-radius: 3px;
-}
-
-.post-full-content p code {
-    word-break: break-all;
-}
-
-.post-full-content pre {
-    overflow-x: auto;
-    margin: 1.5em 0 3em;
-    padding: 20px;
-    max-width: 100%;
-    border: color(var(--darkgrey) l(-10%)) 1px solid;
-    color: var(--whitegrey);
-    font-size: 1.4rem;
-    line-height: 1.5em;
-    background: color(var(--darkgrey) l(-3%));
-    border-radius: 5px;
-}
-
-.post-full-content pre code {
-    padding: 0;
-    font-size: inherit;
-    line-height: inherit;
-    background: transparent;
-}
-
-.post-full-content pre code :not(span) {
-    color: inherit;
-}
-
-.post-full-content .fluid-width-video-wrapper {
-    margin: 1.5em 0 3em;
-}
-
-.post-full-content hr {
-    margin: 4vw 0;
-}
-
-.post-full-content hr:after {
-    content: "";
-    position: absolute;
-    top: -15px;
-    left: 50%;
-    display: block;
-    margin-left: -10px;
-    width: 1px;
-    height: 30px;
-    background: color(var(--lightgrey) l(+10%));
-    box-shadow: #fff 0 0 0 5px;
-    transform: rotate(45deg);
-}
-
-.post-full-content h1,
-.post-full-content h2,
-.post-full-content h3,
-.post-full-content h4,
-.post-full-content h5,
-.post-full-content h6 {
-    color: color(var(--darkgrey) l(-5%));
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
-.post-full-content h1 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 4.6rem;
-    font-weight: 700;
-}
-@media (max-width: 500px) {
-    .post-full-content h1 {
-        font-size: 2.8rem;
-    }
-}
-
-.post-full-content h2 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 3.6rem;
-    font-weight: 700;
-}
-@media (max-width: 500px) {
-    .post-full-content h2 {
-        font-size: 2.6rem;
-    }
-}
-
-.post-full-content h3 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 2.8rem;
-    font-weight: 700;
-}
-@media (max-width: 500px) {
-    .post-full-content h3 {
-        font-size: 2.2rem;
-    }
-}
-
-.post-full-content h4 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 2.8rem;
-    font-weight: 700;
-}
-@media (max-width: 500px) {
-    .post-full-content h4 {
-        font-size: 2.2rem;
-    }
-}
-
-.post-full-content h5 {
-    display: block;
-    margin: 0.5em 0;
-    padding: 1em 0 1.5em;
-    border: 0;
-    color: var(--blue);
-    font-family: Georgia,serif;
-    font-size: 3.2rem;
-    line-height: 1.35em;
-    text-align: center;
-}
-@media (min-width: 1180px) {
-    .post-full-content h5 {
-        max-width: 1060px;
-        width: 100vw;
-    }
-}
-@media (max-width: 500px) {
-    .post-full-content h5 {
-        padding: 0 0 0.5em;
-        font-size: 2.2rem;
-    }
-}
-
-.post-full-content h6 {
-    margin: 0.5em 0 0.2em 0;
-    font-size: 2.3rem;
-    font-weight: 700;
-}
-@media (max-width: 500px) {
-    .post-full-content h6 {
-        font-size: 2rem;
-    }
-}
-
-.footnotes-sep {
-    margin-bottom: 30px;
-}
-
-.footnotes {
-    font-size: 1.5rem;
-}
-
-.footnotes p {
-    margin: 0;
-}
-
-.footnote-backref {
-    color: var(--blue) !important;
-    font-size: 1.2rem;
-    font-weight: bold;
-    text-decoration: none !important;
-    box-shadow: none !important;
-}
-
-/* Some grouped styles for smaller viewports */
-@media (max-width: 500px) {
-    .post-full-meta {
-        font-size: 1.2rem;
-        line-height: 1.3em;
-    }
-    .post-full-title {
-        font-size: 2.9rem;
-    }
-    .post-full-image {
-        margin-bottom: 4vw;
-        height: 350px;
-    }
-    .post-full-content {
-        padding: 0;
-    }
-    .post-full-content:before,
-    .post-full-content:after {
-        display: none;
-    }
-}
-
-/* Tables */
-.post-full-content table {
-    display: inline-block;
-    overflow-x: auto;
-    margin: 0.5em 0 2.5em;
-    max-width: 100%;
-    width: auto;
-    border-spacing: 0;
-    border-collapse: collapse;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-    font-size: 1.6rem;
-    white-space: nowrap;
-    vertical-align: top;
-}
-
-.post-full-content table {
-    -webkit-overflow-scrolling: touch;
-    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
-    background-attachment: scroll, scroll;
-    background-size: 10px 100%, 10px 100%;
-    background-repeat: no-repeat;
-}
-
-.post-full-content table td:first-child {
-    background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
-    background-size: 20px 100%;
-    background-repeat: no-repeat;
-}
-
-.post-full-content table td:last-child {
-    background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
-    background-position: 100% 0;
-    background-size: 20px 100%;
-    background-repeat: no-repeat;
-}
-
-.post-full-content table th {
-    color: var(--darkgrey);
-    font-size: 1.2rem;
-    font-weight: 700;
-    letter-spacing: 0.2px;
-    text-align: left;
-    text-transform: uppercase;
-    background-color: color(var(--whitegrey) l(+4%));
-}
-
-.post-full-content table th,
-.post-full-content table td {
-    padding: 6px 12px;
-    border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
-}
-
-
-/* 7.1. Subscribe Form
-/* ---------------------------------------------------------- */
-
-.subscribe-form {
-    margin: 1.5em 0;
-    padding: 6.5vw 7vw 7vw;
-    border: color(var(--whitegrey) l(+2%)) 1px solid;
-    text-align: center;
-    background: color(var(--whitegrey) l(+4%));
-    border-radius: 7px;
-}
-
-.subscribe-form-title {
-    margin: 0 0 3px 0;
-    padding: 0;
-    color: var(--darkgrey);
-    font-size: 3.5rem;
-    line-height: 1;
-    font-weight: 700;
-}
-
-.subscribe-form p {
-    margin-bottom: 1em;
-    color: var(--midgrey);
-    font-size: 2.2rem;
-    line-height: 1.55em;
-    letter-spacing: 0.2px;
-}
-
-.subscribe-form form {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 auto;
-    max-width: 420px;
-}
-
-.subscribe-form .form-group {
-    flex-grow: 1;
-}
-
-.subscribe-email {
-    display: block;
-    padding: 10px;
-    width: 100%;
-    border: color(var(--lightgrey) l(+7%)) 1px solid;
-    color: var(--midgrey);
-    font-size: 1.8rem;
-    line-height: 1em;
-    font-weight: normal;
-    user-select: text;
-    border-radius: 5px;
-    transition: border-color 0.15s linear;
-
-    -webkit-appearance: none;
-}
-
-.subscribe-email:focus {
-    outline: 0;
-    border-color: color(var(--lightgrey) l(-2%));
-}
-
-.subscribe-form button {
-    display: inline-block;
-    margin: 0 0 0 10px;
-    padding: 0 20px;
-    height: 41px;
-    outline: none;
-    color: #fff;
-    font-size: 1.5rem;
-    line-height: 37px;
-    font-weight: 400;
-    text-align: center;
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
-    background: linear-gradient(
-    color(var(--blue) whiteness(+7%)),
-    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
-    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
-    color(var(--blue) lightness(-4%) saturation(-10%))
-    );
-    border-radius: 5px;
-    box-shadow: 0 0 0 1px inset rgba(0,0,0,0.14);
-
-    -webkit-font-smoothing: subpixel-antialiased;
-}
-
-.subscribe-form button:active,
-.subscribe-form button:focus {
-    background: color(var(--blue) lightness(-9%) saturation(-10%));
-}
-
-@media (max-width: 650px) {
-    .subscribe-form-title {
-        font-size: 2.4rem;
-    }
-    .subscribe-form p {
-        font-size: 1.6rem;
-    }
-}
-
-@media (max-width: 500px) {
-    .subscribe-form form {
-        flex-direction: column;
-    }
-    .subscribe-form .form-group {
-        width: 100%;
-    }
-    .subscribe-form button {
-        margin: 10px 0 0 0;
-        width: 100%;
-    }
-}
-
-
-/* 7.2. Post Footer
-/* ---------------------------------------------------------- */
-
-.post-full-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 auto;
-    padding: 3vw 0 6vw 0;
-    max-width: 840px;
-}
-
-/* 7.2.1 Single Author Byline
-/* ---------------------------------------------------------- */
-
-.author-card {
-    display: flex;
-}
-
-.author-card .author-profile-image,
-.author-card .avatar-wrapper {
-    margin-right: 15px;
-    width: 60px;
-    height: 60px;
-}
-
-.author-card-name {
-    margin: 8px 0 2px 0;
-    padding: 0;
-    font-size: 2rem;
-}
-
-.author-card-name a {
-    color: var(--darkgrey);
-    font-weight: 700;
-}
-
-.author-card-name a:hover {
-    text-decoration: none;
-}
-
-.author-card-content p {
-    margin: 0;
-    color: var(--midgrey);
-    line-height: 1.3em;
-}
-
-.post-full-footer-right {
-    flex-shrink: 0;
-    margin-left: 20px;
-}
-
-.author-card-button {
-    display: block;
-    padding: 9px 16px;
-    border: color(var(--midgrey) l(+20%)) 1px solid;
-    color: var(--midgrey);
-    font-size: 1.2rem;
-    line-height: 1;
-    font-weight: 500;
-    border-radius: 20px;
-    transition: all ease 0.2s;
-}
-
-.author-card-button:hover {
-    border-color: var(--blue);
-    color: var(--blue);
-    text-decoration: none;
-}
-
-/* 7.2.2 Multiple Author Byline
-/* ---------------------------------------------------------- */
-
-.post-full-authors {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 20px;
-    padding-top: 40px;
-    border-top: color(var(--lightgrey) l(+10%)) 1px solid;
-}
-
-.post-full-authors-content {
-    margin-bottom: 20px;
-}
-
-.post-full-authors-content p {
-    margin-bottom: 0;
-    color: var(--midgrey);
-    font-size: 1.4rem;
-    letter-spacing: 0.2px;
-    text-align: center;
-    text-transform: uppercase;
-}
-
-.post-full-authors-content a {
-    display: inline-block;
-    color: color(var(--darkgrey) l(+20%));
-    font-size: 1.4rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
-
-.post-full-footer .author-list {
-    justify-content: center;
-    padding: 10px 20px;
-}
-
-.author-card .author-profile-image,
-.author-card .avatar-wrapper {
-    position: relative;
-    margin-right: 15px;
-}
-
-.author-list-item .author-card {
-    position: absolute;
-    bottom: 130%;
-    left: 50%;
-    z-index: 300;
-    display: block;
-    margin-left: -160px;
-    width: 320px;
-    font-size: 1.4rem;
-    letter-spacing: 0.2px;
-    background: white;
-    border-radius: 6px;
-    box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
-    opacity: 0;
-    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-    transform: scale(0.98) translateY(15px);
-    pointer-events: none;
-}
-
-.author-list-item .author-card:before {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    display: block;
-    margin-left: -12px;
-    width: 0;
-    height: 0;
-    border-top: 12px solid #fff;
-    border-right: 12px solid transparent;
-    border-left: 12px solid transparent;
-}
-
-.author-list-item .author-card.hovered {
-    opacity: 1.0;
-    transform: scale(1) translateY(0px);
-    pointer-events: auto;
-}
-
-.author-card .basic-info {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 30px 20px 20px 20px;
-    color: #fff;
-    background: var(--darkgrey);
-    border-radius: 6px 6px 0 0;
-}
-
-.author-card .basic-info h2 {
-    margin: 1em 0 0.5em;
-}
-
-.author-card .bio {
-    padding: 20px 20px 0;
-}
-
-@media (max-width: 650px) {
-    .author-list-item .author-card {
-        display: none;
-    }
-}
-
-.basic-info .author-profile-image {
-    margin: 0;
-    width: 88px;
-    height: 88px;
-    border: none;
-}
-
-.basic-info .avatar-wrapper {
-    position: relative;
-    margin: 0;
-    width: 88px;
-    height: 88px;
-    border: none;
-    background: rgba(229, 239, 245, 0.1);
-}
-
-.basic-info .avatar-wrapper svg {
-    margin: 0;
-    width: 88px;
-    height: 88px;
-    opacity: 0.15;
-}
-
-
-/* 7.3. Comments
-/* ---------------------------------------------------------- */
-
-.post-full-comments {
-    margin: 0 auto;
-    max-width: 840px;
-}
-
-
-/* 7.4. Related posts
-/* ---------------------------------------------------------- */
-
-.read-next-feed {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -20px;
-    padding: 40px 0 0 0;
-}
-
-.read-next-card {
-    position: relative;
-    flex: 1 1 300px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    margin: 0 20px 40px;
-    padding: 25px;
-    color: #fff;
-    background: var(--darkgrey) center center;
-    background-size: cover;
-    border-radius: 5px;
-    box-shadow: rgba(39,44,49,0.06) 8px 14px 38px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
-}
-
-.read-next-card:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    background: linear-gradient(135deg, rgba(0,40,60,0.8) 0%,rgba(0,20,40,0.7) 100%);
-    border-radius: 5px;
-
-    backdrop-filter: blur(2px);
-}
-
-.read-next-card-header {
-    position: relative;
-    z-index: 50;
-    padding-top: 20px;
-    text-align: center;
-}
-
-.read-next-card-header-sitetitle {
-    display: block;
-    font-size: 1.3rem;
-    line-height: 1.3em;
-    opacity: 0.8;
-}
-
-.read-next-card-header-title {
-    margin: 0;
-    padding: 0 20px;
-    color: #fff;
-    font-size: 3rem;
-    line-height: 1.2em;
-    letter-spacing: 1px;
-}
-
-.read-next-card-header-title a {
-    color: #fff;
-    font-weight: 300;
-    text-decoration: none;
-}
-
-.read-next-card-header-title a:hover {
-    text-decoration: none;
-}
-
-.read-next-divider {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    height: 80px;
-}
-
-.read-next-divider svg {
-    width: 40px;
-    fill: transparent;
-    stroke: #fff;
-
-    stroke-width: 0.5px;
-    stroke-opacity: 0.65;
-}
-
-.read-next-card-content {
-    position: relative;
-    z-index: 50;
-    flex-grow: 1;
-    display: flex;
-    font-size: 1.7rem;
-}
-
-.read-next-card-content ul {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    padding: 0;
-    text-align: center;
-    list-style: none;
-}
-
-.read-next-card-content li {
-    margin: 0;
-    padding: 0;
-    font-size: 1.6rem;
-    line-height: 1.25em;
-    font-weight: 200;
-    letter-spacing: -0.5px;
-}
-
-.read-next-card-content li a {
-    display: block;
-    padding: 20px 0;
-    border-bottom: rgba(255,255,255,0.3) 1px solid;
-    color: #fff;
-    font-weight: 500;
-    vertical-align: top;
-    transition: opacity 0.3s ease;
-}
-
-.read-next-card-content li:first-of-type a {
-    padding-top: 10px;
-}
-
-.read-next-card-content li a:hover {
-    opacity: 1;
-}
-
-.read-next-card-footer {
-    position: relative;
-    margin: 15px 0 3px 0;
-    text-align: center;
-}
-
-.read-next-card-footer a {
-    color: #fff;
-}
-
-
-/* 7.5. Floating Header
-/* ---------------------------------------------------------- */
-
-.floating-header {
-    visibility: hidden;
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    height: 60px;
-    border-bottom: rgba(0,0,0,0.06) 1px solid;
-    background: rgba(255,255,255,0.95);
-    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
-    transform: translate3d(0, -120%, 0);
-}
-
-.floating-active {
-    visibility: visible;
-    transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1);
-    transform: translate3d(0, 0, 0);
-}
-
-.floating-header-logo {
-    overflow: hidden;
-    margin: 0 0 0 20px;
-    font-size: 1.6rem;
-    line-height: 1em;
-    letter-spacing: -1px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.floating-header-logo a {
-    display: flex;
-    align-items: center;
-    color: var(--darkgrey);
-    line-height: 1.1em;
-    font-weight: 700;
-}
-
-.floating-header-logo a:hover {
-    text-decoration: none;
-}
-
-.floating-header-logo img {
-    margin: 0 10px 0 0;
-    max-height: 20px;
-}
-
-.floating-header-divider {
-    margin: 0 5px;
-    line-height: 1em;
-}
-
-.floating-header-title {
-    flex: 1;
-    overflow: hidden;
-    margin: 0;
-    color: #2e2e2e;
-    font-size: 1.6rem;
-    line-height: 1.3em;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.floating-header-share {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding-left: 2%;
-    font-size: 1.3rem;
-    line-height: 1;
-}
-
-.floating-header-share a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.floating-header-share svg {
-    width: auto;
-    height: 16px;
-    fill: #fff;
-}
-
-.floating-header-share-label {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    margin-right: 10px;
-    color: rgba(0,0,0,0.7);
-    font-weight: 500;
-}
-
-.floating-header-share-label svg {
-    margin: 0 5px 0 10px;
-    width: 18px;
-    height: 18px;
-    stroke: rgba(0,0,0,0.7);
-    transform: rotate(90deg);
-}
-
-.floating-header-share-tw,
-.floating-header-share-fb {
-    display: block;
-    align-items: center;
-    width: 60px;
-    height: 60px;
-    color: #fff;
-    line-height: 48px;
-    text-align: center;
-    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
-}
-
-.floating-header-share-tw {
-    background: #33b1ff;
-}
-
-.floating-header-share-fb {
-    background: #005e99;
-}
-
-.progress {
-    position: absolute;
-    right: 0;
-    bottom: -1px;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    border: none;
-    color: var(--blue);
-    background: transparent;
-
-    appearance: none;
-}
-
-.progress::-webkit-progress-bar {
-    background-color: transparent;
-}
-
-.progress::-webkit-progress-value {
-    background-color: var(--blue);
-}
-
-.progress::-moz-progress-bar {
-    background-color: var(--blue);
-}
-
-.progress-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 2px;
-    background-color: transparent;
-}
-
-.progress-bar {
-    display: block;
-    width: 50%;
-    height: inherit;
-    background-color: var(--blue);
-}
-
-@media (max-width: 900px) {
-    .floating-header {
-        height: 40px;
-    }
-    .floating-header-title,
-    .floating-header-logo {
-        font-size: 1.5rem;
-    }
-    .floating-header-share-tw,
-    .floating-header-share-fb {
-        width: 40px;
-        height: 40px;
-        line-height: 38px;
-    }
-}
-
-@media (max-width: 800px) {
-    .floating-header-logo {
-        margin-left: 10px;
-    }
-    .floating-header-logo a {
-        color: #2e2e2e;
-    }
-    .floating-header-title,
-    .floating-header-divider {
-        visibility: hidden;
-    }
-}
-
-@media (max-width: 450px) {
-    .floating-header-share-label {
-        display: none;
-    }
-}
-
-
-/* 7.6. Koenig Styles
-/* ---------------------------------------------------------- */
-
-.post-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 920px;
-}
-
-.post-template .post-content > p:first-child {
-    font-size: 1.25em;
-    line-height: 1.5em;
-}
-
-.post-full-content .kg-image {
-    max-width: 100%;
-}
-
-/* Preventing full-width image overlap with post image.  */
-.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
-    width: 100%;
-}
-
-.post-full-content .kg-width-wide .kg-image {
-    max-width: 1040px;
-}
-
-.post-full-content .kg-width-full .kg-image {
-    max-width: 100vw;
-}
-
-.post-full-content figure {
-    margin: 1.5em 0 3em;
-}
-
-.post-full-content figure img {
-    margin: 0;
-}
-
-.post-full-content figcaption {
-    margin: 1.0em 0 0;
-    font-size: 80%;
-    line-height: 1.6em;
-    text-align: center;
-}
-
-.kg-width-full figcaption {
-    padding: 0 1.5em;
-}
-
-.kg-embed-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-width: 100%;
-}
-
-.kg-embed-card .fluid-width-video-wrapper {
-    margin: 0;
-}
-
-
-@media (max-width: 1040px) {
-    .post-full-content .kg-width-full .kg-image {
-        width: 100vw;
-    }
-}
-
-.kg-gallery-container {
-    display: flex;
-    flex-direction: column;
-    max-width: 1040px;
-    width: 100vw;
-}
-
-.kg-gallery-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-.kg-gallery-image img {
-    display: block;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.kg-gallery-row:not(:first-of-type) {
-    margin: 0.75em 0 0 0;
-}
-
-.kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 0.75em;
-}
-
-.kg-gallery-card + .kg-image-card.kg-width-wide,
-.kg-gallery-card + .kg-gallery-card,
-.kg-image-card.kg-width-wide + .kg-gallery-card,
-.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
-    margin: -2.25em 0 3em;
-}
-
-/* 8. Author Template
-/* ---------------------------------------------------------- */
-
-.site-header-content .author-profile-image {
-    z-index: 10;
-    flex-shrink: 0;
-    margin: 0 0 20px 0;
-    width: 100px;
-    height: 100px;
-    box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
-}
-
-.site-header-content .author-bio {
-    z-index: 10;
-    flex-shrink: 0;
-    margin: 5px 0 10px 0;
-    max-width: 600px;
-    font-size: 2rem;
-    line-height: 1.3em;
-    font-weight: 300;
-    letter-spacing: 0.5px;
-    opacity: 0.8;
-}
-
-.site-header-content .author-meta {
-    z-index: 10;
-    flex-shrink: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 0 10px 0;
-    font-family: Georgia, serif;
-    font-style: italic;
-}
-
-.site-header-content .author-location svg {
-    height: 1.9rem;
-    stroke: #fff;
-}
-
-.site-header-content .bull {
-    display: inline-block;
-    margin: 0 12px;
-    opacity: 0.5;
-}
-
-.site-header-content .social-link:first-of-type {
-    padding-left: 4px;
-}
-
-@media (max-width: 500px) {
-    .site-header-content .author-bio {
-        font-size: 1.8rem;
-        line-height: 1.15em;
-        letter-spacing: 0;
-    }
-    .author-location,
-    .author-stats {
-        display: none;
-    }
-}
-
-
-/* 9. Error Template
-/* ---------------------------------------------------------- */
-
-.error-template .site-main {
-    padding: 7vw 4vw;
-}
-
-.site-nav-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-
-.site-nav-center .site-nav-logo {
-    margin-right: 0;
-}
-
-.error-message {
-    text-align: center;
-}
-
-.error-code {
-    margin: 0;
-    font-size: 12vw;
-    line-height: 1em;
-    letter-spacing: -5px;
-    opacity: 0.3;
-}
-
-.error-description {
-    margin: 0;
-    color: var(--midgrey);
-    font-size: 3rem;
-    line-height: 1.3em;
-    font-weight: 400;
-}
-
-@media (max-width: 800px) {
-    .error-description {
-        margin: 5px 0 0 0;
-        font-size: 1.8rem;
-    }
-}
-
-.error-link {
-    display: inline-block;
-    margin-top: 5px;
-}
-
-.error-template .post-feed {
-    padding-top: 0;
-}
-
-
-/* 10. Subscribe Overlay
-/* ---------------------------------------------------------- */
-
-.subscribe-overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(0,25,40,0.97);
-    opacity: 0;
-    transition: opacity 200ms ease-in;
-    pointer-events: none;
-
-    backdrop-filter: blur(3px);
-}
-
-.subscribe-overlay:target {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.subscribe-overlay-content {
-    position: relative;
-    z-index: 9999;
-    margin: 0 0 5vw 0;
-    padding: 4vw;
-    color: #fff;
-    text-align: center;
-}
-
-.subscribe-overlay-logo {
-    position: fixed;
-    top: 23px;
-    left: 30px;
-    height: 30px;
-}
-
-.subscribe-overlay-title {
-    display: inline-block;
-    margin: 0 0 10px 0;
-    font-size: 6rem;
-    line-height: 1.15em;
-}
-
-.subscribe-overlay-description {
-    margin: 0 auto 50px;
-    max-width: 650px;
-    font-family: Georgia, serif;
-    font-size: 3rem;
-    line-height: 1.3em;
-    font-weight: 300;
-    opacity: 0.8;
-}
-
-.subscribe-overlay form {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 auto;
-    max-width: 500px;
-}
-
-.subscribe-overlay .form-group {
-    flex-grow: 1;
-}
-
-.subscribe-overlay .subscribe-email {
-    display: block;
-    padding: 14px 20px;
-    width: 100%;
-    border: none;
-    color: var(--midgrey);
-    font-size: 2rem;
-    line-height: 1em;
-    font-weight: normal;
-    letter-spacing: 0.5px;
-    user-select: text;
-    border-radius: 8px;
-    transition: border-color 0.15s linear;
-
-    -webkit-appearance: none;
-}
-
-.subscribe-email:focus {
-    outline: 0;
-    border-color: color(var(--lightgrey) l(-2%));
-}
-
-.subscribe-overlay button {
-    display: inline-block;
-    margin: 0 0 0 15px;
-    padding: 0 25px;
-    height: 52px;
-    outline: none;
-    color: #fff;
-    font-size: 1.7rem;
-    line-height: 37px;
-    font-weight: 400;
-    text-align: center;
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
-    background: linear-gradient(
-    color(var(--blue) whiteness(+7%)),
-    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
-    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
-    color(var(--blue) lightness(-4%) saturation(-10%))
-    );
-    border-radius: 8px;
-    box-shadow: 0 0 0 1px inset rgba(0,0,0,0.14);
-
-    -webkit-font-smoothing: subpixel-antialiased;
-}
-
-.subscribe-overlay button:active,
-.subscribe-overlay button:focus {
-    background: color(var(--blue) lightness(-9%) saturation(-10%));
-}
-
-.subscribe-overlay-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-}
-
-.subscribe-overlay-close:before {
-    content: "";
-    position: absolute;
-    top: 40px;
-    right: 25px;
-    display: block;
-    width: 30px;
-    height: 2px;
-    background: #fff;
-    opacity: 0.8;
-    transform: rotate(45deg);
-}
-
-.subscribe-overlay-close:after {
-    content: "";
-    position: absolute;
-    top: 40px;
-    right: 25px;
-    display: block;
-    width: 30px;
-    height: 2px;
-    background: #fff;
-    opacity: 0.8;
-    transform: rotate(-45deg);
-}
-
-.subscribe-overlay-close:hover {
-    cursor: default;
-}
-
-
-/* 11. Site Footer
-/* ---------------------------------------------------------- */
-
-.site-footer {
-    position: relative;
-    padding-top: 20px;
-    padding-bottom: 60px;
-    color: #fff;
-    background: color(var(--darkgrey) l(-15%));
-}
-
-.site-footer-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    color: rgba(255,255,255,0.7);
-    font-size: 1.3rem;
-}
-
-.site-footer-content a {
-    color: rgba(255,255,255,0.7);
-}
-
-.site-footer-content a:hover {
-    color: rgba(255,255,255,1);
-    text-decoration: none;
-}
-
-.site-footer-nav {
-    display: flex;
-}
-
-.site-footer-nav a {
-    position: relative;
-    margin-left: 20px;
-}
-
-.site-footer-nav a:before {
-    content: "";
-    position: absolute;
-    top: 11px;
-    left: -11px;
-    display: block;
-    width: 2px;
-    height: 2px;
-    background: #fff;
-    border-radius: 100%;
-}
-
-.site-footer-nav a:first-of-type:before {
-    display: none;
-}
-
-@media (max-width: 650px) {
-    .site-footer-content {
-        flex-direction: column;
-    }
-    .site-footer-nav a:first-child {
-        margin-left: 0;
-    }
-}
diff --git a/assets/js/infinitescroll.js b/assets/js/infinitescroll.js
deleted file mode 100644
index 8e054cb..0000000
--- a/assets/js/infinitescroll.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/* global maxPages */
-
-// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
-$(function ($) {
-    var currentPage = 1;
-    var pathname = window.location.pathname;
-    var $document = $(document);
-    var $result = $('.post-feed');
-    var buffer = 300;
-
-    var ticking = false;
-    var isLoading = false;
-
-    var lastScrollY = window.scrollY;
-    var lastWindowHeight = window.innerHeight;
-    var lastDocumentHeight = $document.height();
-
-    function onScroll() {
-        lastScrollY = window.scrollY;
-        requestTick();
-    }
-
-    function onResize() {
-        lastWindowHeight = window.innerHeight;
-        lastDocumentHeight = $document.height();
-        requestTick();
-    }
-
-    function requestTick() {
-        if (!ticking) {
-            requestAnimationFrame(infiniteScroll);
-        }
-        ticking = true;
-    }
-
-    function sanitizePathname(path) {
-        var paginationRegex = /(?:page\/)(\d)(?:\/)$/i;
-
-        // remove hash params from path
-        path = path.replace(/#(.*)$/g, '').replace('////g', '/');
-
-        // remove pagination from the path and replace the current pages
-        // with the actual requested page. E. g. `/page/3/` indicates that
-        // the user actually requested page 3, so we should request page 4
-        // next, unless it's the last page already.
-        if (path.match(paginationRegex)) {
-            currentPage = parseInt(path.match(paginationRegex)[1]);
-
-            path = path.replace(paginationRegex, '');
-        }
-
-        return path;
-    }
-
-    function infiniteScroll() {
-        // sanitize the pathname from possible pagination or hash params
-        pathname = sanitizePathname(pathname);
-
-        // return if already loading
-        if (isLoading) {
-            return;
-        }
-
-        // return if not scroll to the bottom
-        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
-            ticking = false;
-            return;
-        }
-
-        /**
-        * maxPages is defined in default.hbs and is the value
-        * of the amount of pagination pages.
-        * If we reached the last page or are past it,
-        * we return and disable the listeners.
-        */
-        if (currentPage >= maxPages) {
-            window.removeEventListener('scroll', onScroll, {passive: true});
-            window.removeEventListener('resize', onResize);
-            return;
-        }
-
-        isLoading = true;
-
-        // next page
-        currentPage += 1;
-
-        if(pathname.charAt(pathname.length-1) != '/'){
-            pathname = pathname+'/';
-        }
-
-        // Load more
-        var nextPage = pathname + 'page/' + currentPage + '/';
-        console.log(pathname);
-        console.log(nextPage);
-
-        $.get(nextPage, function (content) {
-            var parse = document.createRange().createContextualFragment(content);
-            var posts = parse.querySelectorAll('.post');
-            if (posts.length) {
-                [].forEach.call(posts, function (post) {
-                    $result[0].appendChild(post);
-                });
-            }
-        }).fail(function (xhr) {
-            // 404 indicates we've run out of pages
-            if (xhr.status === 404) {
-                window.removeEventListener('scroll', onScroll, {passive: true});
-                window.removeEventListener('resize', onResize);
-            }
-        }).always(function () {
-            lastDocumentHeight = $document.height();
-            isLoading = false;
-            ticking = false;
-        });
-    }
-
-    window.addEventListener('scroll', onScroll, {passive: true});
-    window.addEventListener('resize', onResize);
-
-    infiniteScroll();
-});
diff --git a/category.ftl b/category.ftl
deleted file mode 100644
index 4cc7dd9..0000000
--- a/category.ftl
+++ /dev/null
@@ -1,44 +0,0 @@
-<#include "default.ftl">
-<#include "partials/post-card.ftl">
-<@default title="分类：${category.name!} | ${blog_title!}" canonical="${category.fullPath!}" body_class="tag-template">
-<#-- The tag above means - insert everything in this file into the {body} of the default.hbs template -->
-<#-- The big featured header, it uses blog cover image as a BG if available -->
-<header class="site-header outer <#if settings.cover?default('${theme_base!}/assets/images/blog-cover.jpg') != ''>" style="background-image: url(${settings.cover?default('${theme_base!}/assets/images/blog-cover.jpg')})<#else>no-cover</#if>">
-    <div class="inner">
-        <#include "partials/site-nav.ftl">
-        <div class="site-header-content">
-            <h1 class="site-title">分类：${category.name}</h1>
-            <h2 class="site-description">
-                <#if category.description?? && category.description!=''>
-                    ${category.description}
-                <#else>
-                     ${posts.totalElements!0}篇文章
-                </#if>
-            </h2>
-        </div>
-    </div>
-</header>
-
-<#-- The main content area -->
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-        <div class="post-feed">
-            <#list posts.content as post>
-                <#-- The tag below includes the markup for each post - partials/post-card.hbs -->
-                <@post_card post></@post_card>
-            </#list>
-        </div>
-    </div>
-</main>
-</@default>
-<@scripts>
-    <#if posts.totalPages gt 1>
-    <script>
-        // maxPages is a global variable that is needed to determine
-        // if we need to load more pages for the infinitescroll, or if
-        // we reached the last page already.
-        var maxPages = parseInt('${posts.totalPages}');
-    </script>
-    <script src="${theme_base!}/assets/built/infinitescroll.js"></script>
-    </#if>
-</@scripts>
diff --git a/default.ftl b/default.ftl
deleted file mode 100644
index 09c08e5..0000000
--- a/default.ftl
+++ /dev/null
@@ -1,97 +0,0 @@
-<#macro default title,canonical,body_class>
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-
-    <#-- Document Settings -->
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-    <#-- Base Meta -->
-    <title>${title}</title>
-    <meta name="HandheldFriendly" content="True" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <#-- Styles'n'Scripts -->
-    <link rel="stylesheet" type="text/css" href="${theme_base!}/assets/built/screen.css" />
-
-    <#-- This tag outputs SEO meta+structured data and other important settings -->
-    <meta name="keywords" content="${meta_keywords!}" />
-    <meta name="description" content="${meta_description!}" />
-    <@global.head />
-    <link rel="canonical" href="${canonical}" />
-    <meta name="referrer" content="no-referrer-when-downgrade" />
-
-    <meta property="og:site_name" content="${title}" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="${title}" />
-    <meta property="og:description" content="${meta_description!}" />
-    <meta property="og:url" content="${canonical}" />
-    <meta property="og:image" content="${settings.cover!'${theme_base!}/assets/images/blog-cover.jpg'}" />
-    <meta property="article:publisher" content="https://www.facebook.com/ghost" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="${title}" />
-    <meta name="twitter:description" content="${meta_description!}" />
-    <meta name="twitter:url" content="${canonical}" />
-    <meta name="twitter:image" content="${settings.cover!'${theme_base!}/assets/images/blog-cover.jpg'}" />
-    <meta name="twitter:site" content="@tryghost" />
-    <meta property="og:image:width" content="2000" />
-    <meta property="og:image:height" content="666" />
-    <link rel="alternate" type="application/rss+xml" title="${blog_title!}" href="${rss_url!}" />
-
-    <#if post??>
-    <link rel="stylesheet" type="text/css" href="${theme_base!}/assets/prism/css/prism-${settings.code_pretty!'Default'}.css" />
-    <script type="text/javascript" src="${theme_base!}/assets/prism/js/prism.js"></script>
-    </#if>
-
-</head>
-<body class="${body_class}">
-
-    <div class="site-wrapper">
-
-        <#-- All the main content gets inserted here, index.hbs, post.hbs, etc -->
-        <#nested >
-        <#-- The footer at the very bottom of the screen -->
-        <footer class="site-footer outer">
-            <div class="site-footer-content inner">
-                <section class="copyright">
-                    <a href="${blog_url!}">${blog_title!}</a> &copy; ${.now?string('yyyy')}
-                    <@global.footer_info />
-                </section>
-                <nav class="site-footer-nav">
-                    <a href="${blog_url!}">Latest Posts</a>
-                    <a href="https://www.facebook.com/ghost" target="_blank" rel="noopener">Facebook</a>
-                    <a href="https://twitter.com/tryghost" target="_blank" rel="noopener">Twitter</a>
-                    <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
-                    <a href="https://halo.run" target="_blank" rel="noopener">Halo</a>
-                </nav>
-            </div>
-        </footer>
-
-    </div>
-
-    <#-- The big email subscribe modal content -->
-
-    <script>
-        var images = document.querySelectorAll('.kg-gallery-image img');
-        images.forEach(function (image) {
-            var container = image.closest('.kg-gallery-image');
-            var width = image.attributes.width.value;
-            var height = image.attributes.height.value;
-            var ratio = width / height;
-            container.style.flex = ratio + ' 1 0%';
-        })
-    </script>
-
-
-    <#-- jQuery + Fitvids, which makes all video embeds responsive -->
-    <script src="${theme_base!}/assets/built/jquery.min.js"></script>
-    <script type="text/javascript" src="${theme_base!}/assets/built/jquery.fitvids.js"></script>
-</#macro>
-
-<#macro scripts>
-    <#nested >
-    <@global.statistics />
-</body>
-</html>
-</#macro>
diff --git a/index.ftl b/index.ftl
deleted file mode 100644
index 8086417..0000000
--- a/index.ftl
+++ /dev/null
@@ -1,50 +0,0 @@
-<#include "default.ftl">
-<#include "partials/post-card.ftl">
-<@default title="${blog_title!}" canonical="${blog_url!}" body_class="home-template">
-<#-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template -->
-
-<#-- The big featured header, it uses blog cover image as a BG if available -->
-<header class="site-header outer <#if (settings.cover!'${theme_base!}/assets/images/blog-cover.jpg') != ''>" style="background-image: url(${settings.cover!'${theme_base!}/assets/images/blog-cover.jpg'})<#else>no-cover</#if>">
-    <div class="inner">
-        <div class="site-header-content">
-            <h1 class="site-title">
-                <#if blog_logo?? && blog_logo!=''>
-                    <img class="site-logo" src="${blog_logo!}" alt="${blog_title!}" />
-                <#else>
-                    ${blog_title!}
-                </#if>
-            </h1>
-            <h2 class="site-description">${user.description!}</h2>
-        </div>
-        <#include "partials/site-nav.ftl">
-    </div>
-</header>
-
-<#-- The main content area -->
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-
-        <div class="post-feed">
-            <#list posts.content as post>
-                <#-- The tag below includes the markup for each post - partials/post-card.hbs -->
-                <@post_card post></@post_card>
-            </#list>
-        </div>
-
-    </div>
-</main>
-</@default>
-<@scripts>
-    <#if posts.totalPages gt 1>
-    <script>
-        // maxPages is a global variable that is needed to determine
-        // if we need to load more pages for the infinitescroll, or if
-        // we reached the last page already.
-        var maxPages = parseInt('${posts.totalPages}');
-    </script>
-    <script src="${theme_base!}/assets/built/infinitescroll.js"></script>
-    </#if>
-    <#-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag -->
-    <#-- {{ghost_foot}} -->
-</@scripts>
diff --git a/links.ftl b/links.ftl
deleted file mode 100644
index 467ac5d..0000000
--- a/links.ftl
+++ /dev/null
@@ -1,57 +0,0 @@
-<#include "default.ftl">
-<@default title="友情链接 | ${blog_title!}" canonical="${links_url!}" body_class="page-template">
-
-<#-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template -->
-
-<#-- The big featured header, it uses blog cover image as a BG if available -->
-<header class="site-header outer">
-    <div class="inner">
-        <#include "partials/site-nav.ftl">
-    </div>
-</header>
-
-<#-- Everything inside the #post tags pulls data from the post -->
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-
-        <article class="post-full post page <#if !settings.links_cover??>no-image</#if>">
-
-            <header class="post-full-header">
-                <h1 class="post-full-title">友情链接</h1>
-            </header>
-
-            <#if settings.links_cover??>
-            <figure class="post-full-image" style="background-image: url(${settings.links_cover})">
-            </figure>
-            </#if>
-
-            <section class="post-full-content">
-                <div class="post-content">
-                    <ul>
-                        <@linkTag method="list">
-                            <#list links as link>
-                                <li>
-                                    <a href="${link.url}" target="_blank">${link.name}</a><#if link.description != ''> - ${link.description!}</#if>
-                                </li>
-                            </#list>
-                        </@linkTag>
-                    </ul>
-                </div>
-            </section>
-
-        </article>
-
-    </div>
-</main>
-
-<#-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs -->
-</@default>
-<@scripts>
-    <script>
-        $(function() {
-            var $postContent = $(".post-full-content");
-            $postContent.fitVids();
-        });
-    </script>
-</@scripts>
diff --git a/module/comment.ftl b/module/comment.ftl
deleted file mode 100644
index 834ed2c..0000000
--- a/module/comment.ftl
+++ /dev/null
@@ -1,7 +0,0 @@
-<#macro comment post,type>
-    <#if !post.disallowComment!false>
-        <script src="${theme_base!}/assets/js/vue.min.js"></script>
-        <script src="${options.comment_internal_plugin_js!'https://unpkg.com/halo-comment@latest/dist/halo-comment.min.js'}"></script>
-        <halo-comment id="${post.id?c}" type="${type}"/>
-    </#if>
-</#macro>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..42f2a93
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "prettier": "prettier --write './templates/**/*.html'"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "prettier": "^3.0.3"
+  }
+}
diff --git a/partials/byline-multiple.ftl b/partials/byline-multiple.ftl
deleted file mode 100644
index e1c9d15..0000000
--- a/partials/byline-multiple.ftl
+++ /dev/null
@@ -1,72 +0,0 @@
-<section class="post-full-authors">
-
-    <div class="post-full-authors-content">
-        <p>This post was a collaboration between</p>
-        <p>{{authors}}</p>
-    </div>
-
-    <ul class="author-list">
-    {{#foreach authors}}
-        <li class="author-list-item">
-
-            <div class="author-card">
-                <div class="basic-info">
-                    {{#if profile_image}}
-                        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
-                    {{else}}
-                        <div class="author-profile-image">{{> "icons/avatar"}}</div>
-                    {{/if}}
-                    <h2>{{name}}</h2>
-                </div>
-                <div class="bio">
-                    {{#if bio}}
-                        <p>{{bio}}</p>
-                        <p><a href="{{url}}">More posts</a> by {{name}}.</p>
-                    {{else}}
-                        <p>Read <a href="{{url}}">more posts</a> by this author.</p>
-                    {{/if}}
-                </div>
-            </div>
-
-            {{#if profile_image}}
-                <a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a>
-            {{else}}
-                <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
-            {{/if}}
-
-        </li>
-    {{/foreach}}
-
-    </ul>
-
-</section>
-
-{{#contentFor "scripts"}}
-<script>
-// Adds delay to author card dropups to disappear. This gives enough
-// time for the user to interact with the author card while they move
-// the mouse from the avatar to the card. Also makes space for the
-// interacted avatar.
-$(document).ready(function () {
-
-    var hoverTimeout;
-
-    $('.author-list-item').hover(function(){
-        var $this = $(this);
-
-        clearTimeout(hoverTimeout);
-
-        $('.author-card').removeClass('hovered');
-        $(this).children('.author-card').addClass('hovered');
-
-    }, function() {
-        var $this = $(this);
-
-        hoverTimeout = setTimeout(function() {
-            $this.children('.author-card').removeClass('hovered');
-        }, 800);
-    });
-
-});
-</script>
-{{/contentFor}}
diff --git a/partials/byline-single.ftl b/partials/byline-single.ftl
deleted file mode 100644
index d3fadde..0000000
--- a/partials/byline-single.ftl
+++ /dev/null
@@ -1,23 +0,0 @@
-<#-- Everything inside the #author tags pulls data from the author -->
-
-<section class="author-card">
-    <#if user.avatar??>
-        <img class="author-profile-image" src="${user.avatar!}" alt="${user.nickname!}" />
-    <#else >
-        <span class="avatar-wrapper">
-            <#include "icons/avatar.ftl">
-        </span>
-    </#if>
-    <section class="author-card-content">
-        <h4 class="author-card-name"><a href="${blog_url!}">${user.nickname!}</a></h4>
-        <#if user.description??>
-            <p>${user.description}</p>
-        <#else>
-            <p>Read <a href="${blog_url!}">more posts</a> by this author.</p>
-        </#if>
-    </section>
-</section>
-<div class="post-full-footer-right">
-    <a class="author-card-button" href="${blog_url!}">Read More</a>
-</div>
-
diff --git a/partials/floating-header.ftl b/partials/floating-header.ftl
deleted file mode 100644
index 326b012..0000000
--- a/partials/floating-header.ftl
+++ /dev/null
@@ -1,30 +0,0 @@
-<#macro floating_header title>
-<div class="floating-header">
-    <div class="floating-header-logo">
-        <a href="${blog_url!}">
-            <#if blog_logo?? && blog_logo!=''>
-                <img src="${blog_logo!}" alt="${blog_title!} icon" />
-            </#if>
-            <span>${blog_title!}</span>
-        </a>
-    </div>
-    <span class="floating-header-divider">&mdash;</span>
-    <div class="floating-header-title">${title}</div>
-    <div class="floating-header-share">
-        <div class="floating-header-share-label">Share this <#include "icons/point.ftl"></div>
-        <a class="floating-header-share-tw" href="https://twitter.com/share?text=${title}&amp;url=${blog_url!}"
-            onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
-            <#include "icons/twitter.ftl">
-        </a>
-        <a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u=${blog_url!}"
-           onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
-            <#include "icons/facebook.ftl">
-        </a>
-    </div>
-    <progress id="reading-progress" class="progress" value="0">
-        <div class="progress-container">
-            <span class="progress-bar"></span>
-        </div>
-    </progress>
-</div>
-</#macro>
diff --git a/partials/icons/avatar.ftl b/partials/icons/avatar.ftl
deleted file mode 100644
index af37fca..0000000
--- a/partials/icons/avatar.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>
diff --git a/partials/icons/cnblog.ftl b/partials/icons/cnblog.ftl
deleted file mode 100644
index 9f80117..0000000
--- a/partials/icons/cnblog.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m500 10c-270.9 0-490 219.1-490 490s219.1 490 490 490 490-219.1 490-490-219.1-490-490-490zm-270.9 799.9c-60.6 0-109.2-49.4-109.2-109.2 0-60.6 49.4-109.2 109.2-109.2 60.6 0 109.2 49.4 109.2 109.2 0 60.6-48.6 109.2-109.2 109.2zm402.4-85.2c-.8 5.6-.8 11.2-1.6 15.9-7.2 28.7-32.7 51-63.7 51-36.7 0-66.1-32.7-66.1-69.3 0-5.6.8-11.2 2.4-15.9-1.6-125.1-99.6-227.9-223.1-236.6l-6.4-.8h-.8c-5.6 0-10.4-.8-15.1-2.4-26.3-8-46.2-32.7-46.2-62.1 0-35.9 28.7-65.3 64.5-65.3h.8c196.8 2.4 356.1 162.5 356.1 359.3 0 7.2 0 14.3-.8 22.3zm243-60.6c-10.4 43-24.7 99.6-70.9 99.6-54.2 0-46.2-62.9-46.2-117.9 0-8.8.8-16.7 3.2-23.9-2.4-188-162.5-371.3-347.4-384l-34.3-5.6c-40.6-7.2-106.8-3.2-106.8-47 0-54.2 47.8-78.1 101.2-78.1h1.6c294.8 3.2 503.5 199.2 503.5 494.8 0 11.2-.8 22.3-.8 32.7v5.6c-.7 7.1-1.5 15.1-3.1 23.8z"/></svg>
diff --git a/partials/icons/dribbble.ftl b/partials/icons/dribbble.ftl
deleted file mode 100644
index d728744..0000000
--- a/partials/icons/dribbble.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m476.8 362.6c-72.3-128.6-149.7-233.5-155.4-241.2-116.7 55.2-203.8 162.7-231 292.3 11 .2 185.5 2.3 386.4-51.1zm52.1 140.6c5.4-1.8 11-3.4 16.5-5-10.5-23.8-21.9-47.7-33.9-71.2-215.6 64.6-422.3 60-429.6 59.7-.2 4.5-.4 8.8-.4 13.3 0 107.5 40.6 205.7 107.4 279.7l-.3-.3c0 .1 114.5-203.1 340.3-276.2zm-286.1 326.7v-.2c-3.1-2.4-6.4-4.6-9.5-7.2 5.6 4.5 9.5 7.4 9.5 7.4zm156.9-736.2c-.4.1-.8.2-.8.2.3-.1.7-.1.7-.1zm376.7 92.3c-73.8-64.9-170.4-104.5-276.4-104.5-34 0-67 4.2-98.6 11.8 6.4 8.5 85 112.9 156.5 244.2 157.7-59.1 217.3-149.8 218.5-151.5zm-276.4 804c-270.6 0-490-219.4-490-490-.1-270.6 219.3-490 490-490s490 219.4 490 490.1c0 270.5-219.3 489.9-490 489.9zm71.1-421.5c-245.6 85.6-326.7 257.7-328.4 261.2 71.1 55.4 160.1 88.7 257.2 88.7 58 0 113.2-11.8 163.4-33.1-6.2-36.7-30.5-164.9-89.4-317.8-.9.4-1.8.7-2.8 1zm18.9-168.6c9.8 19.9 19.1 40.2 27.9 60.7 3.1 7.2 6.1 14.5 9.1 21.6 144.5-18.2 286.8 12.7 291.5 13.6-1-99.2-36.5-190.3-95.2-261.6-1 1.2-68.2 98.1-233.3 165.7zm62.4 148.3c54.9 151.1 77.2 273.9 81.4 298.9 94-63.4 160.8-164.1 179.3-280.7-8.3-2.7-125.4-39.8-260.7-18.2z"/></svg>
diff --git a/partials/icons/email.ftl b/partials/icons/email.ftl
deleted file mode 100644
index 7faa325..0000000
--- a/partials/icons/email.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m898.2 836.8h-796.3c-50.7 0-91.9-41-91.9-91.8v-490c0-50.8 41.2-91.8 91.9-91.8h796.3c50.7 0 91.8 41.1 91.8 91.8v490c0 50.8-41.2 91.8-91.8 91.8zm28.7-93.4v-486.8l-284 243.4zm-426.9-182.1 393-336.8h-786zm393 214.4-285.8-245-107.2 91.8-107.2-91.8-285.8 245zm-535.9-275.7-284-243.4v486.7z"/></svg>
diff --git a/partials/icons/facebook.ftl b/partials/icons/facebook.ftl
deleted file mode 100644
index 7332072..0000000
--- a/partials/icons/facebook.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
diff --git a/partials/icons/ghost-logo.ftl b/partials/icons/ghost-logo.ftl
deleted file mode 100644
index 637a2b5..0000000
--- a/partials/icons/ghost-logo.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg class="ghost-svg" viewBox="0 0 493 161" xmlns="http://www.w3.org/2000/svg"><title>Ghost Logo</title><g fill="none" fill-rule="evenodd"><path d="M328.52 37.36c-27.017 0-40.97 19.323-40.97 43.16 0 23.837 13.61 43.162 40.97 43.162s40.968-19.325 40.968-43.163c0-23.84-13.954-43.16-40.97-43.16zm20.438 43.237c-.02 15.328-5.126 27.743-20.44 27.743-15.312 0-20.42-12.414-20.435-27.743v-.078c.016-15.33 5.124-27.74 20.437-27.74 15.312 0 20.42 12.41 20.438 27.74v.07zM207.553 5.19c0-1.103.885-2.124 1.984-2.282 0 0 13.577-1.95 14.784-2.115 1.37-.187 3.19.798 3.19 2.744v44.236c3.23-3.105 6.79-5.608 10.66-7.515 3.88-1.906 8.43-2.86 13.66-2.86 4.53 0 8.53.776 12.03 2.33 3.5 1.55 6.43 3.73 8.77 6.533 2.34 2.81 4.12 6.16 5.33 10.05 1.21 3.9 1.82 8.19 1.82 12.87v51.35c0 1.1-.89 2-2 2h-15.95c-1.1 0-2-.9-2-1.99V69.18c0-5.118-1.17-9.08-3.51-11.888-2.35-2.804-5.86-4.207-10.544-4.207-3.45 0-6.677.79-9.69 2.37-3.02 1.58-5.87 3.73-8.564 6.46v58.617c0 1.102-.894 2-2.002 2h-15.94c-1.11 0-2.005-.895-2.005-2V5.188zm244.007 95.327v-43.68h-13.482c-1.1 0-1.742-.87-1.443-1.916l3-10.49c.262-.9.942-1.87 2.308-2.07l9.597-1.35 3.508-23.49c.163-1.09 1.18-2.1 2.274-2.26 0 0 9.192-1.31 10.963-1.58 1.673-.25 3.19.97 3.19 2.81v24.52h17.565c1.106 0 2.002.9 2.002 2.01v11.82c0 1.11-.89 2.01-2.002 2.01h-17.566v43.08c0 6.02 3.623 8.32 7.095 8.32 2.12 0 5.02-1.14 7.19-2.16 1.34-.62 3.41-.16 3.95 1.73l2.45 8.65c.3 1.07-.25 2.37-1.23 2.86 0 0-7.29 4.37-17.06 4.37-13.73 0-22.33-8.08-22.33-23.16zm-44.584-47.74c-7.084 0-12.657 2.476-12.657 8.433 0 7.44 12.01 9.606 20.23 12.64 5.49 2.027 20.24 5.98 20.24 22.016 0 19.48-16 27.807-33.06 27.807-17.06 0-25.4-5.465-25.4-5.465-.96-.527-1.5-1.822-1.2-2.89 0 0 2.1-7.52 2.64-9.386.48-1.68 2.41-2.27 3.64-1.792 4.39 1.712 12.32 4.092 21.28 4.092 9.07 0 13.46-2.803 13.46-8.777 0-7.95-12.26-10.38-20.36-12.967-5.59-1.78-20.36-5.93-20.36-23.566 0-17.373 15.08-25.524 31.2-25.524 13.64 0 23.5 4.69 23.5 4.69 1.01.427 1.58 1.635 1.28 2.698l-2.658 9.357c-.488 1.74-1.898 2.537-3.666 1.957-3.89-1.277-11.2-3.322-18.15-3.322zm-210.313-15.28c-6.695.775-11.472 3.962-14.562 6.93-6.06-4.81-14.49-7.106-23.94-7.106-18.95 0-33.76 9.26-33.76 29.43 0 11.58 4.88 19.56 12.62 24.26-5.75 2.75-9.57 8.59-9.57 14.34 0 9.61 7.5 12.61 7.5 12.61s-13.11 6.44-13.11 19.32c0 16.49 15.01 23.16 33.34 23.16 26.43 0 44.61-11.04 44.61-31.31 0-12.47-9.44-19.36-30.01-20.18-12.2-.48-20.11-.93-22.07-1.58-2.59-.87-3.86-2.96-3.86-5.28 0-2.55 2.08-4.98 5.35-6.65 2.86.516 5.87.768 8.99.768 18.97 0 33.76-9.223 33.76-29.425 0-4.897-.87-9.15-2.46-12.78 2.79-1.506 8.34-2.25 8.34-2.25 1.09-.17 1.975-1.21 1.974-2.31V40.3c0-1.88-1.59-2.955-3.1-2.78zm-49.13 85.132s9.954.38 19.9.84c11.172.52 14.654 2.96 14.654 8.81 0 7.15-9.71 14.1-23.28 14.1-12.88 0-19.314-4.54-19.314-12.08 0-4.33 2.26-9.18 8.04-11.69zm10.66-40.54c-8.978 0-15.983-4.83-15.983-15.35 0-10.53 7.01-15.35 15.983-15.35 8.974 0 15.984 4.81 15.984 15.34 0 10.53-7.002 15.34-15.984 15.34z" fill="#2D3134"/><g opacity=".6" transform="translate(0 36)" fill="#2E3134"><rect x=".209" y="69.017" width="33.643" height="17.014" rx="4"/><rect x="50.672" y="69.017" width="33.622" height="17.014" rx="4"/><rect x=".184" y="34.99" width="84.121" height="17.014" rx="4"/><rect x=".209" y=".964" width="50.469" height="17.013" rx="4"/><rect x="67.494" y=".964" width="16.821" height="17.013" rx="4"/></g></g></svg>
diff --git a/partials/icons/github.ftl b/partials/icons/github.ftl
deleted file mode 100644
index 23fbe55..0000000
--- a/partials/icons/github.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m990 512c0 106.8-31.2 202.8-93.5 288.1-62.3 85.2-142.8 144.2-241.5 177-11.5 2.1-19.9.6-25.2-4.5s-8-11.5-8-19.1v-134.6c0-41.3-11.1-71.5-33.2-90.6 24.2-2.6 46-6.4 65.4-11.5s39.3-13.4 60-24.9 37.9-25.6 51.7-42.4 25.1-39.1 33.8-67 13.1-59.9 13.1-96c0-51.5-16.8-95.3-50.4-131.4 15.7-38.7 14-82.1-5.1-130.2-11.9-3.8-29.1-1.5-51.7 7-22.5 8.5-42.1 17.9-58.7 28.1l-24.2 15.3c-39.6-11.1-80.4-16.6-122.5-16.6s-82.9 5.5-122.5 16.6c-6.8-4.7-15.8-10.4-27.1-17.2s-29-15-53.3-24.6c-24.2-9.6-42.5-12.4-54.9-8.6-18.7 48.1-20.2 91.4-4.5 130.2-33.6 36.2-50.4 80-50.4 131.4 0 36.2 4.4 68.1 13.1 95.7s19.9 50 33.5 67 30.7 31.3 51.4 42.7c20.6 11.5 40.6 19.8 60 24.9s41.2 8.9 65.4 11.5c-17 15.3-27.4 37.2-31.3 65.7-8.9 4.3-18.5 7.4-28.7 9.6-10.2 2.1-22.3 3.2-36.4 3.2-14 0-28-4.6-41.8-13.7s-25.6-22.4-35.4-39.9c-8.1-13.6-18.4-24.7-30.9-33.2s-23.1-13.6-31.6-15.3l-12.8-1.9c-8.9 0-15.1 1-18.5 2.9s-4.5 4.4-3.2 7.3c1.3 3 3.2 6 5.7 8.9 2.6 3 5.3 5.5 8.3 7.7l4.5 3.2c9.4 4.3 18.6 12.3 27.8 24.2 9.1 11.9 15.8 22.8 20.1 32.5l6.4 14.7c5.5 16.2 14.9 29.2 28.1 39.2s27.4 16.4 42.7 19.1c15.3 2.8 30.1 4.3 44.3 4.5s26.1-.5 35.4-2.2l14.7-2.6c0 16.2.1 35.1.3 56.8s.3 33.2.3 34.5c0 7.7-2.8 14-8.3 19.1s-14 6.6-25.5 4.5c-98.7-32.8-179.2-91.8-241.5-177.1s-93.4-181.3-93.4-288c0-88.9 21.9-170.9 65.7-246s103.3-134.5 178.3-178.3 157.1-65.7 246-65.7 170.9 21.9 246 65.7c75 43.8 134.5 103.2 178.3 178.3s65.7 157.1 65.7 246z"/></svg>
diff --git a/partials/icons/infinity.ftl b/partials/icons/infinity.ftl
deleted file mode 100644
index 87e44ea..0000000
--- a/partials/icons/infinity.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"/></svg>
diff --git a/partials/icons/instagram.ftl b/partials/icons/instagram.ftl
deleted file mode 100644
index 2514eea..0000000
--- a/partials/icons/instagram.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m881.1 10h-762.2c-59.9 0-108.9 49-108.9 108.9v762.2c0 60 49 108.9 108.9 108.9h762.2c59.9 0 108.9-48.9 108.9-108.9v-762.2c0-59.9-49-108.9-108.9-108.9zm-382 790.7c166.5 0 301.5-135.1 301.5-301.6 0-18.4-2.3-36.2-5.6-53.6h86.1v392.9c0 20.8-16.9 37.6-37.7 37.6h-686.8c-20.9 0-37.7-16.8-37.7-37.6v-392.8h84.3c-3.3 17.4-5.7 35.2-5.7 53.6.1 166.5 135.1 301.5 301.6 301.5zm-188.4-301.6c0-104.1 84.4-188.4 188.5-188.4 104 0 188.5 84.3 188.5 188.4s-84.4 188.5-188.5 188.5c-104.2 0-188.5-84.4-188.5-188.5zm532.7-216.9h-87.9c-20.8 0-37.7-17-37.7-37.7v-88c0-20.8 16.9-37.6 37.6-37.6h87.9c20.9 0 37.8 16.8 37.8 37.6v88c0 20.7-16.9 37.7-37.7 37.7z"/></svg>
diff --git a/partials/icons/location.ftl b/partials/icons/location.ftl
deleted file mode 100644
index 0c2d866..0000000
--- a/partials/icons/location.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M19.5 8c0 4.144-7.5 15.5-7.5 15.5S4.5 12.144 4.5 8C4.5 3.858 7.857.5 12 .5c4.142 0 7.5 3.358 7.5 7.5z"/><circle cx="12" cy="8" r="3"/></svg>
diff --git a/partials/icons/point.ftl b/partials/icons/point.ftl
deleted file mode 100644
index f3c7025..0000000
--- a/partials/icons/point.ftl
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"/>
-</svg>
diff --git a/partials/icons/qq.ftl b/partials/icons/qq.ftl
deleted file mode 100644
index d0195b9..0000000
--- a/partials/icons/qq.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m500 10c-270.6 0-490 219.4-490 490s219.4 490 490 490 490-219.4 490-490-219.4-490-490-490zm245.4 640.2s-20.6 14.8-46.1-42.8c-9.9 31.3-30.5 68.3-37.9 73.3 28 7.4 47.7 28 39.5 32.9 7.4 18.9 11.5 65.8-84 70.8-22.2 1.6-58.4-.8-105.4-33.7-23.9.8-30.5 0-30.5 0s-38.7 44.4-119.4 28.8c-42-6.6-85.6-28.8-60.1-65.8-9.1-6.6 8.2-28 31.3-34.6-9.1-9.1-32.9-36.2-36.2-65.8-12.3 22.2-27.2 37-41.2 41.2-21.4-2.5-25.5-118.5 42-173.7-2.5-6.6-4.9-36.2 5.8-51-3.3-4.1 1.6-23 14-25.5 0 0-11.5-189.3 182.7-191.8 180.3-1.6 189.3 179.4 189.3 187.7 11.5 9.1 23.9 48.6 14 71.6 24.1 25.3 80.1 115.9 42.2 178.4z"/></svg>
diff --git a/partials/icons/rss.ftl b/partials/icons/rss.ftl
deleted file mode 100644
index 3840238..0000000
--- a/partials/icons/rss.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
diff --git a/partials/icons/stackoverflow.ftl b/partials/icons/stackoverflow.ftl
deleted file mode 100644
index 6afbf64..0000000
--- a/partials/icons/stackoverflow.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m656.7 775v82l-493.1 1v-83zm167.3-188.2v400.9h-789l-23.7-1h-1.3v-399.9h84.9v336.5h645.4v-336.5zm-645.5 47.8 489.4 35.1-8.7 81.9-490.6-35.1zm46.2-172.6 476.9 100.5-27.5 79-475.6-99.5zm113.6-189.2 424.5 196-53.7 70.2-424.5-196zm251-180.5 277.1 318-86.1 46.8-277.1-318zm315.8-80 84.9 379.4-104.9 13.7-83.6-378.4z"/></svg>
diff --git a/partials/icons/telegram.ftl b/partials/icons/telegram.ftl
deleted file mode 100644
index 98ca0a7..0000000
--- a/partials/icons/telegram.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m500 10c-270.6 0-490 219.4-490 490s219.4 490 490 490 490-219.4 490-490-219.4-490-490-490zm240.8 335.9-80.4 378.8c-5.5 27-21.8 33.3-44.4 20.9l-122.5-90.6-58.8 57.2c-6.9 6.7-12.3 12.3-24.5 12.3-15.9 0-13.2-5.9-18.6-21.1l-41.7-137-121.2-37.7c-26.2-8-26.4-26 5.9-38.9l472-182.2c21.6-9.7 42.4 5.2 34.2 38.3z"/></svg>
diff --git a/partials/icons/twitter.ftl b/partials/icons/twitter.ftl
deleted file mode 100644
index 19de4af..0000000
--- a/partials/icons/twitter.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
diff --git a/partials/icons/website.ftl b/partials/icons/website.ftl
deleted file mode 100644
index 08be39f..0000000
--- a/partials/icons/website.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 11.957c0 6.375-5.163 11.544-11.532 11.544C5.599 23.5.5 18.125.5 11.75.5 5.542 5.37.758 11.505.511l.5-.011C18.374.5 23.5 5.582 23.5 11.957zM11.505.511c-6 6.5-6 14.98 0 22.98m1-22.98c6 6.5 6 14.977 0 22.977M2 17.479h20.063m-19.657-12h19.062m-20.968 6h22.938" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" fill="none"/></svg>
diff --git a/partials/icons/weibo.ftl b/partials/icons/weibo.ftl
deleted file mode 100644
index a303093..0000000
--- a/partials/icons/weibo.ftl
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="m379 712c7.7-12.4 9.7-25 6-37.7-3.6-12.8-11.8-21.9-24.6-27.3-12.4-5.1-25.7-5.3-39.9-.5-14.2 4.7-25.1 13.1-32.8 25.1-8 12.4-10.4 24.9-7.1 37.4s11.1 21.8 23.5 27.6 26 6.3 40.7 1.4c14.8-4.9 26.2-13.6 34.2-26zm51.4-66.1c2.9-4.7 3.6-9.6 1.9-14.5-1.6-4.9-4.8-8.3-9.6-10.1-5.1-1.8-10.3-1.7-15.6.3s-9.2 5.4-11.8 10.1c-6.2 11.3-3.8 19.5 7.1 24.6 5.1 1.8 10.4 1.7 15.9-.3 5.6-2 9.6-5.4 12.1-10.1zm95.1 58.5c-16.4 37.2-45.2 64.5-86.4 82s-82 19.7-122.5 6.6c-39-12.4-65.9-35.4-80.6-69.2s-13.6-67.9 3.6-102.5c17.1-33.9 44.7-59.2 82.8-76s76.4-20.2 115.1-10.4c40.5 10.6 69.3 32.3 86.7 65.3 17.3 33 17.7 67.7 1.3 104.2zm170.6-87.5c-3.3-35-19.5-66-48.7-92.9-29.2-27-67.2-46.8-114-59.6s-96.9-16.6-150.1-11.5c-81.3 8.4-148.6 34.2-202 77.4s-77.5 91.4-72.4 144.6c3.3 35 19.5 66 48.7 92.9 29.2 27 67.2 46.8 114 59.6s96.9 16.6 150.1 11.5c81.3-8.4 148.6-34.2 202-77.4s77.5-91.4 72.4-144.6zm168.4 2.2c0 24.8-6.7 50.2-20.2 76.3s-33.3 51-59.6 74.9-56.9 45.3-92.1 64.2c-35.2 19-76.4 34.1-123.6 45.4s-96.5 16.9-147.9 16.9-101.5-6.1-150.3-18.3-92.7-29.2-131.5-50.8c-38.8-21.7-70.1-49.2-93.8-82.6-23.7-33.4-35.5-69.7-35.5-109.1 0-41.9 12.7-86.6 38-133.9s61.3-94.4 108-141c61.6-61.6 123.8-104.6 186.7-129s107.8-23.1 134.8 3.8c23.7 23.3 27.3 61.4 10.9 114.3-1.5 5.1-1.6 8.7-.5 10.9s2.9 3.5 5.5 3.8c2.6.4 5.2.3 7.9-.3 2.7-.5 5.2-1.2 7.4-1.9l3.3-1.1c50.7-21.5 95.5-32.3 134.5-32.3s66.9 11.1 83.6 33.3c16.4 23 16.4 55.4 0 97.3-.7 4.7-1.5 8.4-2.5 10.9-.9 2.6-.1 4.8 2.5 6.8s4.7 3.4 6.6 4.1c1.8.7 4.9 1.8 9.3 3.3 20.8 6.6 39.5 15.1 56.3 25.7s31.3 25.4 43.7 44.6c12.3 19.2 18.5 40.5 18.5 63.8zm-40.5-341.2c15.3 17.1 25.2 36.9 29.8 59.3s3.4 43.8-3.6 64.2c-2.9 8.4-8.3 14.6-16.1 18.6s-15.9 4.7-24.3 2.2c-8.4-2.9-14.6-8.3-18.6-16.1s-4.7-15.9-2.2-24.3c7.3-23 2.9-43.2-13.1-60.7s-35.5-23.9-58.5-19.1c-8.7 1.8-16.9.4-24.6-4.4-7.7-4.7-12.2-11.5-13.7-20.2-1.8-8.7-.4-16.9 4.4-24.3s11.5-12.1 20.2-13.9c21.9-4.7 43.6-3.7 65.1 3s39.9 18.6 55.2 35.7zm99-89.1c31.7 35 52.2 75.5 61.5 121.6s6.8 90.1-7.4 132c-3.3 9.8-9.5 17.1-18.6 21.9-9.1 4.7-18.6 5.5-28.4 2.2s-17.1-9.5-21.9-18.6c-4.7-9.1-5.6-18.6-2.7-28.4 10.2-29.9 12-61.2 5.5-94-6.6-32.8-21.1-61.6-43.7-86.4-22.6-25.1-49.6-42.6-80.9-52.2-31.3-9.7-62.9-11.2-94.6-4.6-10.2 2.2-19.7.5-28.4-5.2-8.7-5.6-14.2-13.6-16.4-23.8s-.5-19.6 5.2-28.2c5.6-8.6 13.6-13.9 23.8-16.1 44.8-9.5 89.3-7.4 133.4 6.3 44 13.7 81.9 38.2 113.6 73.5z"/></svg>
diff --git a/partials/post-card.ftl b/partials/post-card.ftl
deleted file mode 100644
index 3879942..0000000
--- a/partials/post-card.ftl
+++ /dev/null
@@ -1,44 +0,0 @@
-<#macro post_card post>
-<article class="post-card post">
-    <#if post.thumbnail?? && post.thumbnail!=''>
-        <a class="post-card-image-link" href="${post.fullPath!}">
-            <div class="post-card-image" style="background-image: url(${post.thumbnail!})"></div>
-        </a>
-    </#if>
-    <div class="post-card-content">
-        <a class="post-card-content-link" href="${post.fullPath!}">
-            <header class="post-card-header">
-                <#if post.categories?? && post.categories?size gt 0>
-                    <span class="post-card-tags">${post.categories[0].name}</span>
-                </#if>
-                <h2 class="post-card-title">${post.title!}</h2>
-            </header>
-            <section class="post-card-excerpt">
-                <p>${post.summary!}</p>
-            </section>
-        </a>
-        <footer class="post-card-meta">
-
-            <ul class="author-list">
-                <li class="author-list-item">
-
-                    <div class="author-name-tooltip">
-                        ${user.nickname!}
-                    </div>
-
-                    <#if user.avatar??>
-                        <a href="${blog_url!}" class="static-avatar"><img class="author-profile-image" src="${user.avatar}" alt="${user.nickname!}" /></a>
-                    <#else>
-                        <a href="${blog_url!}" class="static-avatar author-profile-image">
-                            <#include "../partials/icons/avatar.ftl">
-                        </a>
-                    </#if>
-                </li>
-            </ul>
-
-            <span class="reading-time">${post.createTime?string("yyyy-MM-dd")}</span>
-
-        </footer>
-    </div>
-</article>
-</#macro>
diff --git a/partials/post-copyright.ftl b/partials/post-copyright.ftl
deleted file mode 100644
index e21a02b..0000000
--- a/partials/post-copyright.ftl
+++ /dev/null
@@ -1,19 +0,0 @@
-<#if settings.post_copyright!true>
-<hr />
-<blockquote style="font-size: 2rem;">
-    <ul class="post-copyright" style="margin: 0">
-        <li class="post-copyright-author" style="margin: 0">
-            <strong>本文作者：</strong>
-            ${user.nickname!}
-        </li>
-        <li class="post-copyright-link" style="margin: 0">
-            <strong>本文链接：</strong>
-            <a href="${post.fullPath!}" title="${post.title!}">${post.fullPath!}</a>
-        </li>
-        <li class="post-copyright-license" style="margin: 0">
-            <strong>版权声明：</strong>
-            本博客所有文章除特别声明外，均采用<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0</a> 许可协议。转载请注明出处！
-        </li>
-    </ul>
-</blockquote>
-</#if>
diff --git a/partials/site-nav.ftl b/partials/site-nav.ftl
deleted file mode 100644
index 7f65a95..0000000
--- a/partials/site-nav.ftl
+++ /dev/null
@@ -1,93 +0,0 @@
-<nav class="site-nav">
-    <div class="site-nav-left">
-        <#if !is_index??>
-            <#if blog_logo?? && blog_logo!=''>
-                <a class="site-nav-logo" href="${blog_url!}"><img src="${blog_logo!}" alt="${blog_title!}" /></a>
-            <#else>
-                <a class="site-nav-logo" href="${blog_url!}">${blog_title!}</a>
-            </#if>
-        </#if>
-        <@menuTag method="list">
-            <ul class="nav" role="menu">
-                <#list menus?sort_by('priority') as menu>
-                    <li class="nav-${menu.name}" role="menuitem"><a href="${menu.url}" target="${menu.target!'_blank'}">${menu.name}</a></li>
-                </#list>
-            </ul>
-        </@menuTag>
-    </div>
-    <div class="site-nav-right">
-        <div class="social-links">
-
-            <#if settings.twitter??>
-            <a class="social-link social-link-tw" href="https://twitter.com/${settings.twitter}" target="_blank" rel="noopener">
-                <#include "../partials/icons/twitter.ftl">
-            </a>
-            </#if>
-
-            <#if settings.facebook??>
-            <a class="social-link social-link-fb" href="https://www.facebook.com/${settings.facebook}" target="_blank" rel="noopener">
-                <#include "../partials/icons/facebook.ftl">
-            </a>
-            </#if>
-
-            <#if settings.instagram??>
-            <a class="social-link social-link-fb" href="https://www.instagram.com/${settings.instagram}" target="_blank" rel="noopener">
-                <#include "../partials/icons/instagram.ftl">
-            </a>
-            </#if>
-
-            <#if settings.dribbble??>
-            <a class="social-link social-link-fb" href="https://dribbble.com/${settings.dribbble}" target="_blank" rel="noopener">
-                <#include "../partials/icons/dribbble.ftl">
-            </a>
-            </#if>
-
-            <#if settings.weibo??>
-            <a class="social-link social-link-fb" href="https://weibo.com/${settings.weibo}" target="_blank" rel="noopener">
-                <#include "../partials/icons/weibo.ftl">
-            </a>
-            </#if>
-
-            <#if settings.qq??>
-            <a class="social-link social-link-fb" href="tencent://message/?uin=${settings.qq}&Site=&Menu=yes" target="_blank" rel="noopener">
-                <#include "../partials/icons/qq.ftl">
-            </a>
-            </#if>
-
-            <#if settings.telegram??>
-            <a class="social-link social-link-fb" href="https://t.me/${settings.telegram}" target="_blank" rel="noopener">
-                <#include "../partials/icons/telegram.ftl">
-            </a>
-            </#if>
-
-            <#if settings.email??>
-            <a class="social-link social-link-fb" href="mailto:${settings.email}" target="_blank" rel="noopener">
-                <#include "../partials/icons/email.ftl">
-            </a>
-            </#if>
-
-            <#if settings.github??>
-            <a class="social-link social-link-fb" href="https://github.com/${settings.github}" target="_blank" rel="noopener">
-                <#include "../partials/icons/github.ftl">
-            </a>
-            </#if>
-
-            <#if settings.cnblog??>
-                <a class="social-link social-link-fb" href="https://www.cnblogs.com/${settings.cnblog}/" target="_blank" rel="noopener">
-                    <#include "../partials/icons/cnblog.ftl">
-                </a>
-            </#if>
-
-            <#if settings.stackoverflow??>
-                <a class="social-link social-link-fb" href="https://stackoverflow.com/users/${settings.stackoverflow}" target="_blank" rel="noopener">
-                    <#include "../partials/icons/stackoverflow.ftl">
-                </a>
-            </#if>
-        </div>
-        <#if settings.rss!true>
-        <a class="rss-button" href="${rss_url!}" target="_blank" rel="noopener">
-            <#include "../partials/icons/rss.ftl">
-        </a>
-        </#if>
-    </div>
-</nav>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..8b92bed
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,18 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+devDependencies:
+  prettier:
+    specifier: ^3.0.3
+    version: 3.0.3
+
+packages:
+
+  /prettier@3.0.3:
+    resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
diff --git a/post.ftl b/post.ftl
deleted file mode 100644
index 0867d6a..0000000
--- a/post.ftl
+++ /dev/null
@@ -1,191 +0,0 @@
-<#include "default.ftl">
-<#include "partials/post-card.ftl">
-<#include "partials/floating-header.ftl">
-<@default title="${post.title!} | ${blog_title!}" canonical="${post.fullPath!}" body_class="post-template">
-
-<#-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template -->
-
-<header class="site-header outer">
-    <div class="inner">
-        <#include "partials/site-nav.ftl">
-    </div>
-</header>
-
-<#-- Everything inside the #post tags pulls data from the post -->
-
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-
-        <article class="post-full post <#if !post.thumbnail??>no-image</#if>">
-
-            <header class="post-full-header">
-                <section class="post-full-meta">
-                    <time class="post-full-meta-date" datetime="${post.createTime?string('yyyy-MM-dd')}">${post.createTime?string('d MMM,yyyy')}</time>
-                    <#if post.categories?? && post.categories?size gt 0>
-                    <span class="date-divider">/</span> <a href="${post.categories[0].fullPath!}">${post.categories[0].name}</a>
-                    </#if>
-                </section>
-                <h1 class="post-full-title">${post.title!}</h1>
-            </header>
-
-            <#if post.thumbnail?? && post.thumbnail!=''>
-            <figure class="post-full-image" style="background-image: url(${post.thumbnail})">
-            </figure>
-            </#if>
-
-            <section class="post-full-content">
-                <div class="post-content">
-                    ${post.formatContent!}
-                    <#include "partials/post-copyright.ftl">
-                </div>
-            </section>
-
-            <#-- Email subscribe form at the bottom of the page -->
-
-            <footer class="post-full-footer">
-
-                <#-- There are two options for how we display the byline/author-info.
-                If the post has more than one author, we load a specific template
-                from includes/byline-multiple.hbs, otherwise, we just use the
-                default byline. -->
-
-                <#include "partials/byline-single.ftl">
-
-            </footer>
-
-            <section class="post-full-comments">
-                <#-- If you want to embed comments, this is a good place to do it! -->
-                <#include "module/comment.ftl">
-                <@comment post=post type="post" />
-            </section>
-
-        </article>
-
-    </div>
-</main>
-
-<#-- Links to Previous/Next posts -->
-<aside class="read-next outer">
-    <div class="inner">
-        <div class="read-next-feed">
-            <#--<#if post.categories?? && post.categories?size gt 0>-->
-            <#--{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}-->
-                <#--{{#if related_posts}}-->
-                <#--<article class="read-next-card"-->
-                    <#--{{#if ../primary_tag.feature_image}}-->
-                        <#--style="background-image: url({{../primary_tag.feature_image}})"-->
-                    <#--{{else}}-->
-                        <#--{{#if @blog.cover_image}}-->
-                            <#--style="background-image: url({{@blog.cover_image}})"{{/if}}-->
-                    <#--{{/if}}-->
-                <#-->-->
-                    <#--<header class="read-next-card-header">-->
-                        <#--<small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>-->
-                        <#--{{#../primary_tag}}-->
-                        <#--<h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>-->
-                        <#--{{/../primary_tag}}-->
-                    <#--</header>-->
-                    <#--<div class="read-next-divider">{{> "icons/infinity"}}</div>-->
-                    <#--<div class="read-next-card-content">-->
-                        <#--<ul>-->
-                            <#--{{#foreach related_posts}}-->
-                            <#--<li><a href="{{url}}">{{title}}</a></li>-->
-                            <#--{{/foreach}}-->
-                        <#--</ul>-->
-                    <#--</div>-->
-                    <#--<footer class="read-next-card-footer">-->
-                        <#--<a href="/categories/${}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>-->
-                    <#--</footer>-->
-                <#--</article>-->
-                <#--{{/if}}-->
-            <#--{{/get}}-->
-            <#--</#if>-->
-
-            <#-- If there's a next post, display it using the same markup included from - partials/post-card.hbs -->
-            <#if afterPost??>
-                <@post_card afterPost></@post_card>
-            </#if>
-
-            <#-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs -->
-            <#if beforePost??>
-                <@post_card beforePost></@post_card>
-            </#if>
-
-        </div>
-    </div>
-</aside>
-
-<#-- Floating header which appears on-scroll, included from includes/floating-header.hbs -->
-<@floating_header title="${post.title!}"></@floating_header>
-
-</@default>
-<@scripts>
-    <#-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. -->
-    <script>
-
-        // NOTE: Scroll performance is poor in Safari
-        // - this appears to be due to the events firing much more slowly in Safari.
-        //   Dropping the scroll event and using only a raf loop results in smoother
-        //   scrolling but continuous processing even when not scrolling
-        $(document).ready(function () {
-            // Start fitVids
-            var $postContent = $(".post-full-content");
-            $postContent.fitVids();
-            // End fitVids
-
-            var progressBar = document.querySelector('#reading-progress');
-            var header = document.querySelector('.floating-header');
-            var title = document.querySelector('.post-full-title');
-
-            var lastScrollY = window.scrollY;
-            var lastWindowHeight = window.innerHeight;
-            var lastDocumentHeight = $(document).height();
-            var ticking = false;
-
-            function onScroll() {
-                lastScrollY = window.scrollY;
-                requestTick();
-            }
-
-            function onResize() {
-                lastWindowHeight = window.innerHeight;
-                lastDocumentHeight = $(document).height();
-                requestTick();
-            }
-
-            function requestTick() {
-                if (!ticking) {
-                    requestAnimationFrame(update);
-                }
-                ticking = true;
-            }
-
-            function update() {
-                var trigger = title.getBoundingClientRect().top + window.scrollY;
-                var triggerOffset = title.offsetHeight + 35;
-                var progressMax = lastDocumentHeight - lastWindowHeight;
-
-                // show/hide floating header
-                if (lastScrollY >= trigger + triggerOffset) {
-                    header.classList.add('floating-active');
-                } else {
-                    header.classList.remove('floating-active');
-                }
-
-                progressBar.setAttribute('max', progressMax);
-                progressBar.setAttribute('value', lastScrollY);
-
-                ticking = false;
-            }
-
-            window.addEventListener('scroll', onScroll, {passive: true});
-            window.addEventListener('resize', onResize, false);
-
-            update();
-
-        });
-    </script>
-    <#-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag -->
-    <#-- {{ghost_foot}} -->
-</@scripts>
diff --git a/setting.yaml b/setting.yaml
new file mode 100644
index 0000000..bfdf37f
--- /dev/null
+++ b/setting.yaml
@@ -0,0 +1,94 @@
+apiVersion: v1alpha1
+kind: Setting
+metadata:
+  name: halo-setting-casper
+spec:
+  forms:
+    - group: general
+      label: 基础设置
+      formSchema:
+        - $formkit: attachment
+          name: cover
+          label: 首页背景图
+          value: ""
+        - $formkit: attachment
+          name: links_cover
+          label: 友情链接页面背景图
+        - $formkit: attachment
+          name: archives_cover
+          label: 归档页面背景图
+        - $formkit: radio
+          name: post_copyright
+          label: 文章版权信息
+          value: true
+          options:
+            - value: true
+              label: 开启
+            - value: false
+              label: 关闭
+        - $formkit: text
+          name: location
+          label: 所在地
+        - $formkit: select
+          name: code_pretty
+          label: 文章代码高亮主题
+          value: Default
+          options:
+            - value: Default
+              label: Default
+            - value: Coy
+              label: Coy
+            - value: Dark
+              label: Dark
+            - value: Okaidia
+              label: Okaidia
+            - value: Solarized Light
+              label: Solarized Light
+            - value: Tomorrow Night
+              label: Tomorrow Night
+            - value: Twilight
+              label: Twilight
+    - group: sns
+      label: 社交设置
+      formSchema:
+        - $formkit: text
+          name: twitter
+          label: Twitter
+          placeholder: 只需填入 Twitter 用户名即可
+        - $formkit: text
+          name: facebook
+          label: Facebook
+          placeholder: 只需填入 Facebook 用户名即可
+        - $formkit: text
+          name: instagram
+          label: Instagram
+          placeholder: 只需填入 Instagram 用户名即可
+        - $formkit: text
+          name: dribbble
+          label: Dribbble
+          placeholder: 只需填入 Dribbble 用户名即可
+        - $formkit: text
+          name: weibo
+          label: 微博
+          placeholder: 只需填入微博 Id 即可
+        - $formkit: text
+          name: email
+          label: Email
+          placeholder: 只需填入邮箱地址即可
+        - $formkit: text
+          name: qq
+          label: QQ
+          placeholder: 只需填入 Github 用户名即可
+        - $formkit: text
+          name: telegram
+          label: Telegram
+          placeholder: 只需填入 Telegram Id 即可
+        - $formkit: text
+          name: cnblog
+          label: 博客园
+        - $formkit: text
+          name: github
+          label: Github
+        - $formkit: text
+          name: stackoverflow
+          label: Stack Overflow
diff --git a/settings.yaml b/settings.yaml
deleted file mode 100644
index 23fda7c..0000000
--- a/settings.yaml
+++ /dev/null
@@ -1,117 +0,0 @@
-general:
-  label: 基础设置
-  items:
-    cover:
-      name: cover
-      label: 首页背景图
-      type: attachment
-      default: '/themes/ghost_casper/assets/images/blog-cover.jpg'
-    links_cover:
-      name: links_cover
-      label: 友情链接页面背景图
-      type: attachment
-    archives_cover:
-      name: archives_cover
-      label: 归档页面背景图
-      type: attachment
-    post_copyright:
-      name: post_copyright
-      label: 文章版权信息
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    location:
-      name: location
-      label: 所在地
-      type: text
-    code_pretty:
-      name: code_pretty
-      label: 文章代码高亮主题
-      type: select
-      default: Default
-      options:
-        - value: Default
-          label: Default
-        - value: Coy
-          label: Coy
-        - value: Dark
-          label: Dark
-        - value: Okaidia
-          label: Okaidia
-        - value: Solarized Light
-          label: Solarized Light
-        - value: Tomorrow Night
-          label: Tomorrow Night
-        - value: Twilight
-          label: Twilight
-sns:
-  label: 社交设置
-  items:
-    rss:
-      name: rss
-      label: RSS
-      type: radio
-      data-type: bool
-      default: true
-      options:
-        - value: true
-          label: 开启
-        - value: false
-          label: 关闭
-    twitter:
-      name: twitter
-      label: Twitter
-      type: text
-      placeholder: '只需填入 Twitter 用户名即可'
-    facebook:
-      name: facebook
-      label: Facebook
-      type: text
-      placeholder: '只需填入 Facebook 用户名即可'
-    instagram:
-      name: instagram
-      label: Instagram
-      type: text
-      placeholder: '只需填入 Instagram 用户名即可'
-    dribbble:
-      name: dribbble
-      label: Dribbble
-      type: text
-      placeholder: '只需填入 Dribbble 用户名即可'
-    weibo:
-      name: weibo
-      label: 微博
-      type: text
-      placeholder: '只需填入微博 Id 即可'
-    email:
-      name: email
-      label: Email
-      type: text
-      placeholder: '只需填入邮箱地址即可'
-    qq:
-      name: qq
-      label: QQ
-      type: text
-      placeholder: '只需填入 Github 用户名即可'
-    telegram:
-      name: telegram
-      label: Telegram
-      type: text
-      placeholder: '只需填入 Telegram Id 即可'
-    cnblog:
-      name: cnblog
-      label: 博客园
-      type: text
-    github:
-      name: github
-      label: Github
-      type: text
-    stackoverflow:
-      name: stackoverflow
-      label: Stack Overflow
-      type: text
diff --git a/sheet.ftl b/sheet.ftl
deleted file mode 100644
index dff5e1b..0000000
--- a/sheet.ftl
+++ /dev/null
@@ -1,55 +0,0 @@
-<#include "default.ftl">
-<@default title="${post.title!} | ${blog_title!}" canonical="${sheet.fullPath!}" body_class="page-template">
-
-<#-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template -->
-
-<#-- The big featured header, it uses blog cover image as a BG if available -->
-<header class="site-header outer">
-    <div class="inner">
-        <#include "partials/site-nav.ftl">
-    </div>
-</header>
-
-<#-- Everything inside the #post tags pulls data from the post -->
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-
-        <article class="post-full post page <#if !post.thumbnail??>no-image</#if>">
-
-            <header class="post-full-header">
-                <h1 class="post-full-title">${post.title!}</h1>
-            </header>
-
-            <#if post.thumbnail?? && post.thumbnail!=''>
-            <figure class="post-full-image" style="background-image: url(${post.thumbnail})">
-            </figure>
-            </#if>
-
-            <section class="post-full-content">
-                <div class="post-content">
-                    ${post.formatContent!}
-                </div>
-            </section>
-
-            <section class="post-full-comments">
-            <#-- If you want to embed comments, this is a good place to do it! -->
-                <#include "module/comment.ftl">
-                <@comment post=sheet type="sheet" />
-            </section>
-
-        </article>
-
-    </div>
-</main>
-
-<#-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs -->
-</@default>
-<@scripts>
-    <script>
-        $(function() {
-            var $postContent = $(".post-full-content");
-            $postContent.fitVids();
-        });
-    </script>
-</@scripts>
diff --git a/sheet_author.ftl b/sheet_author.ftl
deleted file mode 100644
index e157d4f..0000000
--- a/sheet_author.ftl
+++ /dev/null
@@ -1,62 +0,0 @@
-<#include "default.ftl">
-<@default title="${sheet.title!} | ${blog_title!}" canonical="${sheet.fullPath!}" body_class="page-template">
-<#-- The tag above means - insert everything in this file into the {body} of the default.hbs template -->
-<#-- Everything inside the #author tags pulls data from the author -->
-<header class="site-header outer <#if settings.cover?default('${theme_base!}/assets/images/blog-cover.jpg') != ''>" style="background-image: url(${settings.cover?default('${theme_base!}/assets/images/blog-cover.jpg')})<#else>no-cover</#if>">
-    <div class="inner">
-        <#include "partials/site-nav.ftl">
-        <div class="site-header-content">
-            <img class="author-profile-image" src="${user.avatar!}" alt="${user.nickname!}" />
-            <h1 class="site-title">${user.nickname!}</h1>
-            <#if user.description??>
-                <h2 class="author-bio">${user.description!}</h2>
-            </#if>
-            <div class="author-meta">
-            <#if settings.location??>
-                <div class="author-location">${settings.location} <span class="bull">&bull;</span></div>
-            </#if>
-            <div class="author-stats">
-            <@postTag method="count">${count}</@postTag> 篇文章 <span class="bull">&bull;</span>
-            </div>
-            <a class="social-link social-link-rss" href="${atom_url!}" target="_blank" rel="noopener"><#include "partials/icons/rss.ftl"></a>
-            </div>
-        </div>
-    </div>
-</header>
-
-
-<#-- The main content area -->
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-
-        <article class="post-full post page no-image">
-
-            <header class="post-full-header">
-                <h1 class="post-full-title">${post.title!}</h1>
-            </header>
-
-            <section class="post-full-content">
-                <div class="post-content">
-                    ${sheet.formatContent!}
-                </div>
-            </section>
-
-            <section class="post-full-comments">
-            <#-- If you want to embed comments, this is a good place to do it! -->
-                <#include "module/comment.ftl">
-                <@comment post=sheet type="sheet" />
-            </section>
-
-        </article>
-
-    </div>
-</main>
-</@default>
-<@scripts>
-    <script>
-        $(function() {
-            var $postContent = $(".post-full-content");
-            $postContent.fitVids();
-        });
-    </script>
-</@scripts>
diff --git a/tag.ftl b/tag.ftl
deleted file mode 100644
index 9a26a6c..0000000
--- a/tag.ftl
+++ /dev/null
@@ -1,40 +0,0 @@
-<#include "default.ftl">
-<#include "partials/post-card.ftl">
-<@default title="标签：${tag.name} | ${blog_title!}" canonical="${tag.fullPath!}" body_class="tag-template">
-<#-- The tag above means - insert everything in this file into the {body} of the default.hbs template -->
-<#-- The big featured header, it uses blog cover image as a BG if available -->
-<header class="site-header outer <#if (settings.cover!'${theme_base!}/assets/images/blog-cover.jpg') != ''>" style="background-image: url(${settings.cover!'${theme_base!}/assets/images/blog-cover.jpg'})<#else>no-cover</#if>">
-    <div class="inner">
-        <#include "partials/site-nav.ftl">
-        <div class="site-header-content">
-            <h1 class="site-title">标签：${tag.name}</h1>
-            <h2 class="site-description">
-                ${posts.totalElements!0}篇文章
-            </h2>
-        </div>
-    </div>
-</header>
-
-<#-- The main content area -->
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-        <div class="post-feed">
-            <#list posts.content as post>
-            <#-- The tag below includes the markup for each post - partials/post-card.hbs -->
-                <@post_card post></@post_card>
-            </#list>
-        </div>
-    </div>
-</main>
-</@default>
-<@scripts>
-    <#if posts.totalPages gt 1>
-    <script>
-        // maxPages is a global variable that is needed to determine
-        // if we need to load more pages for the infinitescroll, or if
-        // we reached the last page already.
-        var maxPages = parseInt('${posts.totalPages}');
-    </script>
-    <script src="${theme_base!}/assets/built/infinitescroll.js"></script>
-    </#if>
-</@scripts>
diff --git a/templates/archives.html b/templates/archives.html
new file mode 100644
index 0000000..db66037
--- /dev/null
+++ b/templates/archives.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{layout :: html(title = |归档 - ${site.title}|,  content = ~{::content})}"
+>
+  <th:block th:fragment="content">
+    <header class="site-header outer">
+      <div class="inner">
+        <th:block th:replace="~{partials/site-nav}"></th:block>
+      </div>
+    </header>
+    <main id="site-main" class="site-main outer">
+      <div class="inner">
+        <article class="post-full post page">
+          <header class="post-full-header">
+            <h1 class="post-full-title">文章归档</h1>
+          </header>
+          <th:block th:if="${theme.config.general.archives_cover}">
+            <figure
+              class="post-full-image"
+              th:style="|background-image: url(${theme.config.general.archives_cover})|"
+            ></figure>
+          </th:block>
+          <section class="post-full-content">
+            <div class="post-content">
+              <h1>分类</h1>
+              <ul th:with="categories = ${categoryFinder.listAll()}">
+                <li th:each="category : ${categories}">
+                  <a
+                    th:href="@{${category.status.permalink}}"
+                    th:text="${category.spec.displayName}"
+                  ></a>
+                </li>
+              </ul>
+
+              <h1>标签</h1>
+              <ul th:with="tags = ${tagFinder.listAll()}">
+                <li th:each="tag : ${tags}">
+                  <a
+                    th:href="@{${tag.status.permalink}}"
+                    th:text="${tag.spec.displayName}"
+                  ></a>
+                </li>
+              </ul>
+
+              <h1>归档</h1>
+
+              <th:block th:each="archive : ${archives.items}">
+                <h2 th:text="|${archive.year}年|"></h2>
+                <ul class="listing">
+                  <th:block th:each="month : ${archive.months}">
+                    <li th:each="post : ${month.posts}">
+                      <a
+                        th:href="@{${post.status.permalink}}"
+                        th:text="${post.spec.title}"
+                      >
+                      </a>
+                    </li>
+                  </th:block>
+                </ul>
+              </th:block>
+            </div>
+          </section>
+        </article>
+      </div>
+    </main>
+
+    <script>
+      $(function () {
+        var $postContent = $(".post-full-content");
+        $postContent.fitVids();
+      });
+    </script>
+  </th:block>
+</html>
diff --git a/assets/built/global.css b/templates/assets/built/global.css
similarity index 100%
rename from assets/built/global.css
rename to templates/assets/built/global.css
diff --git a/assets/built/global.css.map b/templates/assets/built/global.css.map
similarity index 100%
rename from assets/built/global.css.map
rename to templates/assets/built/global.css.map
diff --git a/templates/assets/built/infinitescroll.js b/templates/assets/built/infinitescroll.js
new file mode 100644
index 0000000..a01cc18
--- /dev/null
+++ b/templates/assets/built/infinitescroll.js
@@ -0,0 +1,164 @@
+$(function ($) {
+  var currentPage = 1;
+  var pathname = window.location.pathname;
+  var $document = $(document);
+  var $result = $(".post-feed");
+  var buffer = 300;
+  var ticking = false;
+  var isLoading = false;
+  var lastScrollY = window.scrollY;
+  var lastWindowHeight = window.innerHeight;
+  var lastDocumentHeight = $document.height();
+  function onScroll() {
+    lastScrollY = window.scrollY;
+    requestTick();
+  }
+  function onResize() {
+    lastWindowHeight = window.innerHeight;
+    lastDocumentHeight = $document.height();
+    requestTick();
+  }
+  function requestTick() {
+    if (!ticking) {
+      requestAnimationFrame(infiniteScroll);
+    }
+    ticking = true;
+  }
+  function sanitizePathname(path) {
+    var paginationRegex = /(?:page\/)(\d)(?:\/)$/i;
+    path = path.replace(/#(.*)$/g, "").replace("////g", "/");
+    if (path.match(paginationRegex)) {
+      currentPage = parseInt(path.match(paginationRegex)[1]);
+      path = path.replace(paginationRegex, "");
+    }
+    return path;
+  }
+  function infiniteScroll() {
+    pathname = sanitizePathname(pathname);
+    if (isLoading) {
+      return;
+    }
+    if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
+      ticking = false;
+      return;
+    }
+    if (currentPage >= maxPages) {
+      window.removeEventListener("scroll", onScroll, { passive: true });
+      window.removeEventListener("resize", onResize);
+      return;
+    }
+    isLoading = true;
+    currentPage += 1;
+    if (pathname.charAt(pathname.length - 1) != "/") {
+      pathname = pathname + "/";
+    }
+    var nextPage = pathname + "page/" + currentPage;
+    console.log(pathname);
+    console.log(nextPage, 1111);
+    $.get(nextPage, function (content) {
+      var parse = document.createRange().createContextualFragment(content);
+      var posts = parse.querySelectorAll(".post");
+      if (posts.length) {
+        [].forEach.call(posts, function (post) {
+          $result[0].appendChild(post);
+        });
+      }
+    })
+      .fail(function (xhr) {
+        if (xhr.status === 404) {
+          window.removeEventListener("scroll", onScroll, { passive: true });
+          window.removeEventListener("resize", onResize);
+        }
+      })
+      .always(function () {
+        lastDocumentHeight = $document.height();
+        isLoading = false;
+        ticking = false;
+      });
+  }
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onResize);
+  infiniteScroll();
+});
+$(function ($) {
+  var currentPage = 1;
+  var pathname = window.location.pathname;
+  var $document = $(document);
+  var $result = $(".post-feed");
+  var buffer = 300;
+  var ticking = false;
+  var isLoading = false;
+  var lastScrollY = window.scrollY;
+  var lastWindowHeight = window.innerHeight;
+  var lastDocumentHeight = $document.height();
+  function onScroll() {
+    lastScrollY = window.scrollY;
+    requestTick();
+  }
+  function onResize() {
+    lastWindowHeight = window.innerHeight;
+    lastDocumentHeight = $document.height();
+    requestTick();
+  }
+  function requestTick() {
+    if (!ticking) {
+      requestAnimationFrame(infiniteScroll);
+    }
+    ticking = true;
+  }
+  function sanitizePathname(path) {
+    var paginationRegex = /(?:page\/)(\d)(?:\/)$/i;
+    path = path.replace(/#(.*)$/g, "").replace("////g", "/");
+    if (path.match(paginationRegex)) {
+      currentPage = parseInt(path.match(paginationRegex)[1]);
+      path = path.replace(paginationRegex, "");
+    }
+    return path;
+  }
+  function infiniteScroll() {
+    pathname = sanitizePathname(pathname);
+    if (isLoading) {
+      return;
+    }
+    if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
+      ticking = false;
+      return;
+    }
+    if (currentPage >= maxPages) {
+      window.removeEventListener("scroll", onScroll, { passive: true });
+      window.removeEventListener("resize", onResize);
+      return;
+    }
+    isLoading = true;
+    currentPage += 1;
+    if (pathname.charAt(pathname.length - 1) != "/") {
+      pathname = pathname + "/";
+    }
+    var nextPage = pathname + "page/" + currentPage;
+    console.log(pathname);
+    console.log(nextPage, 1111);
+    $.get(nextPage, function (content) {
+      var parse = document.createRange().createContextualFragment(content);
+      var posts = parse.querySelectorAll(".post");
+      if (posts.length) {
+        [].forEach.call(posts, function (post) {
+          $result[0].appendChild(post);
+        });
+      }
+    })
+      .fail(function (xhr) {
+        if (xhr.status === 404) {
+          window.removeEventListener("scroll", onScroll, { passive: true });
+          window.removeEventListener("resize", onResize);
+        }
+      })
+      .always(function () {
+        lastDocumentHeight = $document.height();
+        isLoading = false;
+        ticking = false;
+      });
+  }
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onResize);
+  infiniteScroll();
+});
diff --git a/assets/built/infinitescroll.js.map b/templates/assets/built/infinitescroll.js.map
similarity index 100%
rename from assets/built/infinitescroll.js.map
rename to templates/assets/built/infinitescroll.js.map
diff --git a/assets/built/jquery.fitvids.js b/templates/assets/built/jquery.fitvids.js
similarity index 100%
rename from assets/built/jquery.fitvids.js
rename to templates/assets/built/jquery.fitvids.js
diff --git a/assets/built/jquery.fitvids.js.map b/templates/assets/built/jquery.fitvids.js.map
similarity index 100%
rename from assets/built/jquery.fitvids.js.map
rename to templates/assets/built/jquery.fitvids.js.map
diff --git a/assets/built/jquery.min.js b/templates/assets/built/jquery.min.js
similarity index 100%
rename from assets/built/jquery.min.js
rename to templates/assets/built/jquery.min.js
diff --git a/templates/assets/built/screen.css b/templates/assets/built/screen.css
new file mode 100644
index 0000000..6f7de4b
--- /dev/null
+++ b/templates/assets/built/screen.css
@@ -0,0 +1,2387 @@
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+big,
+blockquote,
+body,
+canvas,
+caption,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+ul,
+var,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:after,
+blockquote:before,
+q:after,
+q:before {
+  content: "";
+  content: none;
+}
+img {
+  max-width: 100%;
+}
+html {
+  box-sizing: border-box;
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+*,
+:after,
+:before {
+  box-sizing: inherit;
+}
+a {
+  background-color: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+b,
+strong {
+  font-weight: 700;
+}
+dfn,
+em,
+i {
+  font-style: italic;
+}
+h1 {
+  margin: 0.67em 0;
+  font-size: 2em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+mark {
+  background-color: #fdffb6;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  color: inherit;
+  font: inherit;
+}
+button {
+  overflow: visible;
+  border: none;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+input {
+  line-height: normal;
+}
+input:focus {
+  outline: none;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+input[type="search"] {
+  box-sizing: content-box;
+  -webkit-appearance: textfield;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+legend {
+  padding: 0;
+  border: 0;
+}
+textarea {
+  overflow: auto;
+}
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+td,
+th {
+  padding: 0;
+}
+html {
+  overflow-y: scroll;
+  font-size: 62.5%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body,
+html {
+  overflow-x: hidden;
+}
+body {
+  color: #3c484e;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.6em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: 0;
+  text-rendering: optimizeLegibility;
+  background: #fff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
+}
+::-moz-selection {
+  text-shadow: none;
+  background: #cbeafb;
+}
+::selection {
+  text-shadow: none;
+  background: #cbeafb;
+}
+hr {
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 2.5em 0 3.5em;
+  padding: 0;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #e3e9ed;
+}
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+textarea {
+  resize: vertical;
+}
+blockquote,
+dl,
+ol,
+p,
+ul {
+  margin: 0 0 1.5em;
+}
+ol,
+ul {
+  padding-left: 1.3em;
+  padding-right: 1.5em;
+}
+ol ol,
+ol ul,
+ul ol,
+ul ul {
+  margin: 0.5em 0 1em;
+}
+ul {
+  list-style: disc;
+}
+ol {
+  list-style: decimal;
+}
+ol,
+ul {
+  max-width: 100%;
+}
+li {
+  margin: 0.5em 0;
+  padding-left: 0.3em;
+  line-height: 1.6em;
+}
+dt {
+  float: left;
+  margin: 0 20px 0 0;
+  width: 120px;
+  color: #15171a;
+  font-weight: 500;
+  text-align: right;
+}
+dd {
+  margin: 0 0 5px;
+  text-align: left;
+}
+blockquote {
+  margin: 1.5em 0;
+  padding: 0 1.6em;
+  border-left: 0.5em solid #e5eff5;
+}
+blockquote p {
+  margin: 0.8em 0;
+  font-size: 1.2em;
+  font-weight: 300;
+}
+blockquote small {
+  display: inline-block;
+  margin: 0.8em 0 0.8em 1.5em;
+  font-size: 0.9em;
+  opacity: 0.8;
+}
+blockquote small:before {
+  content: "\2014 \00A0";
+}
+blockquote cite {
+  font-weight: 700;
+}
+blockquote cite a {
+  font-weight: 400;
+}
+a {
+  color: #26a8ed;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  line-height: 1.15;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+h1 {
+  margin: 0 0 0.5em;
+  font-size: 5rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  h1 {
+    font-size: 2.2rem;
+  }
+}
+h2 {
+  margin: 1.5em 0 0.5em;
+  font-size: 2rem;
+}
+@media (max-width: 500px) {
+  h2 {
+    font-size: 1.8rem;
+  }
+}
+h3 {
+  margin: 1.5em 0 0.5em;
+  font-size: 1.8rem;
+  font-weight: 500;
+}
+@media (max-width: 500px) {
+  h3 {
+    font-size: 1.7rem;
+  }
+}
+h4 {
+  margin: 1.5em 0 0.5em;
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+h5,
+h6 {
+  margin: 1.5em 0 0.5em;
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+body {
+  background: #f4f8fb;
+}
+.img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-position: 50%;
+  background-size: cover;
+  border-radius: 100%;
+}
+.hidden {
+  visibility: hidden;
+  position: absolute;
+  text-indent: -9999px;
+}
+.site-wrapper {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.site-main {
+  z-index: 100;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+.outer {
+  position: relative;
+  padding: 0 4vw;
+}
+.inner {
+  margin: 0 auto;
+  max-width: 1040px;
+  width: 100%;
+}
+@media (min-width: 900px) {
+  .author-template .post-feed,
+  .home-template .post-feed,
+  .tag-template .post-feed {
+    margin-top: -70px;
+    padding-top: 0;
+  }
+  .home-template .site-nav {
+    position: relative;
+    top: -70px;
+  }
+}
+.site-header {
+  position: relative;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  color: #fff;
+  background: #090a0b no-repeat 50%;
+  background-size: cover;
+}
+.site-header:before {
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.18);
+}
+.site-header:after,
+.site-header:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  display: block;
+}
+.site-header:after {
+  bottom: auto;
+  height: 80px;
+  background: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
+}
+.site-header.no-cover:after,
+.site-header.no-cover:before {
+  display: none;
+}
+.site-header-content {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 10vw 4vw;
+  min-height: 200px;
+  max-height: 450px;
+  text-align: center;
+}
+.site-title {
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+  font-size: 3.8rem;
+  font-weight: 700;
+}
+.site-logo {
+  max-height: 45px;
+}
+.site-description {
+  z-index: 10;
+  margin: 0;
+  padding: 5px 0;
+  font-size: 2.2rem;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+@media (max-width: 500px) {
+  .site-title {
+    font-size: 3rem;
+  }
+  .site-description {
+    font-size: 1.8rem;
+  }
+}
+.site-nav {
+  position: relative;
+  z-index: 300;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  height: 40px;
+  font-size: 1.2rem;
+}
+.site-nav,
+.site-nav-left {
+  display: -ms-flexbox;
+  display: flex;
+  overflow-y: hidden;
+}
+.site-nav-left {
+  -ms-flex-align: center;
+  align-items: center;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-right: 10px;
+  padding-bottom: 80px;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+  -ms-overflow-scrolling: touch;
+}
+.site-nav-logo {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: block;
+  margin-right: 24px;
+  padding: 11px 0;
+  color: #fff;
+  font-size: 1.7rem;
+  line-height: 1em;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+.site-nav-logo:hover {
+  text-decoration: none;
+}
+.site-nav-logo img {
+  display: block;
+  width: auto;
+  height: 21px;
+}
+.nav {
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0 0 0 -12px;
+  padding: 0;
+  list-style: none;
+}
+.nav li {
+  padding: 0;
+  text-transform: uppercase;
+}
+.nav li,
+.nav li a {
+  display: block;
+  margin: 0;
+}
+.nav li a {
+  padding: 10px 12px;
+  color: #fff;
+  opacity: 0.8;
+  font-size: 16px;
+}
+.nav li a:hover {
+  text-decoration: none;
+  opacity: 1;
+}
+.site-nav-right {
+  height: 40px;
+}
+.site-nav-right,
+.social-links {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.social-links a:last-of-type {
+  padding-right: 20px;
+}
+.social-link {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 10px;
+  color: #fff;
+  opacity: 0.8;
+}
+.social-link:hover {
+  opacity: 1;
+}
+.social-link svg {
+  height: 1.8rem;
+  fill: #fff;
+}
+.social-link-fb svg {
+  height: 1.5rem;
+}
+.social-link-wb svg {
+  height: 1.6rem;
+}
+.social-link-wb svg path {
+  stroke: #fff;
+}
+.social-link-rss svg {
+  height: 1.9rem;
+}
+.subscribe-button {
+  display: block;
+  padding: 4px 10px;
+  border: 1px solid #fff;
+  color: #fff;
+  font-size: 1.2rem;
+  line-height: 1em;
+  border-radius: 10px;
+  opacity: 0.8;
+}
+.subscribe-button:hover {
+  text-decoration: none;
+  opacity: 1;
+}
+.rss-button {
+  opacity: 0.8;
+}
+.rss-button:hover {
+  opacity: 1;
+}
+.rss-button svg {
+  margin-bottom: 1px;
+  height: 2.1rem;
+  fill: #fff;
+}
+@media (max-width: 700px) {
+  .site-header {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .site-nav-left {
+    margin-right: 0;
+    padding-left: 4vw;
+  }
+  .site-nav-right {
+    display: none;
+  }
+}
+.post-feed {
+  position: relative;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 0 -20px;
+  padding: 40px 0 0;
+}
+.post-card,
+.post-feed {
+  display: -ms-flexbox;
+  display: flex;
+}
+.post-card {
+  -ms-flex: 1 1 300px;
+  flex: 1 1 300px;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0 20px 40px;
+  min-height: 300px;
+  background: #fff 50%;
+  background-size: cover;
+  border-radius: 5px;
+  box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06),
+    1px 3px 8px rgba(39, 44, 49, 0.03);
+  transition: all 0.5s ease;
+}
+.post-card:hover {
+  box-shadow: 8px 28px 50px rgba(39, 44, 49, 0.07),
+    1px 6px 12px rgba(39, 44, 49, 0.04);
+  transition: all 0.4s ease;
+  transform: translate3D(0, -1px, 0) scale(1.02);
+}
+.post-card-image-link {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 5px 5px 0 0;
+}
+.post-card-image {
+  width: auto;
+  height: 200px;
+  background: #c5d2d9 no-repeat 50%;
+  background-size: cover;
+}
+.post-card-content-link {
+  position: relative;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: block;
+  padding: 25px 25px 0;
+  color: #15171a;
+}
+.post-card-content-link:hover {
+  text-decoration: none;
+}
+.post-card-tags {
+  display: block;
+  margin-bottom: 4px;
+  color: #738a94;
+  font-size: 1.2rem;
+  line-height: 1.15em;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+.post-card-title {
+  margin-top: 0;
+}
+.post-card-content {
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.post-card-excerpt {
+  font-family: Georgia, serif;
+}
+.post-card-meta {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-align: end;
+  align-items: flex-end;
+  padding: 0 25px 25px;
+}
+.author-profile-image,
+.avatar-wrapper {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #e3e9ed;
+  border-radius: 100%;
+  object-fit: cover;
+}
+.post-card-meta .avatar-wrapper,
+.post-card-meta .profile-image-wrapper {
+  position: relative;
+}
+.author-list {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.author-list-item {
+  position: relative;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+}
+.author-list-item:first-child {
+  z-index: 10;
+}
+.author-list-item:nth-child(2) {
+  z-index: 9;
+}
+.author-list-item:nth-child(3) {
+  z-index: 8;
+}
+.author-list-item:nth-child(4) {
+  z-index: 7;
+}
+.author-list-item:nth-child(5) {
+  z-index: 6;
+}
+.author-list-item:nth-child(6) {
+  z-index: 5;
+}
+.author-list-item:nth-child(7) {
+  z-index: 4;
+}
+.author-list-item:nth-child(8) {
+  z-index: 3;
+}
+.author-list-item:nth-child(9) {
+  z-index: 2;
+}
+.author-list-item:nth-child(10) {
+  z-index: 1;
+}
+.static-avatar {
+  margin: 0 -5px;
+  width: 34px;
+  height: 34px;
+}
+.moving-avatar,
+.static-avatar {
+  display: block;
+  overflow: hidden;
+  border: 2px solid #fff;
+  border-radius: 100%;
+}
+.moving-avatar {
+  margin: 0 -6px;
+  width: 56px;
+  height: 56px;
+  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
+}
+@media (min-width: 800px) {
+  .author-list:hover .moving-avatar {
+    margin: 0;
+    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+  }
+}
+.author-name-tooltip {
+  position: absolute;
+  bottom: 105%;
+  z-index: 999;
+  display: block;
+  padding: 2px 8px;
+  color: #fff;
+  font-size: 1.2rem;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  background: #15171a;
+  border-radius: 3px;
+  box-shadow: 0 12px 26px rgba(39, 44, 49, 0.08),
+    1px 3px 8px rgba(39, 44, 49, 0.03);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+  transform: translateY(6px);
+  pointer-events: none;
+}
+.author-list-item:hover .author-name-tooltip {
+  opacity: 1;
+  transform: translateY(0);
+}
+@media (max-width: 650px) {
+  .author-name-tooltip {
+    display: none;
+  }
+}
+.reading-time {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 20px;
+  color: #738a94;
+  font-size: 1.2rem;
+  line-height: 33px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+@media (min-width: 795px) {
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) {
+    -ms-flex: 1 1 100%;
+    flex: 1 1 100%;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-image-link {
+    position: relative;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    border-radius: 5px 0 0 5px;
+  }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-content {
+    -ms-flex: 0 1 357px;
+    flex: 0 1 357px;
+  }
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) h2 {
+    font-size: 2.6rem;
+  }
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) p {
+    font-size: 1.8rem;
+    line-height: 1.55em;
+  }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-content-link {
+    padding: 30px 40px 0;
+  }
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-meta {
+    padding: 0 40px 30px;
+  }
+}
+.home-template .site-header:after {
+  display: none;
+}
+@media (max-width: 650px) {
+  .post-feed {
+    padding-top: 5vw;
+  }
+  .post-card {
+    margin: 0 20px 5vw;
+  }
+}
+.page-template .site-main,
+.post-template .site-main {
+  padding-bottom: 4vw;
+  background: #fff;
+}
+.post-full {
+  position: relative;
+  z-index: 50;
+}
+.post-full-header {
+  margin: 0 auto;
+  padding: 6vw 3vw 3vw;
+  max-width: 1040px;
+  text-align: center;
+}
+@media (max-width: 500px) {
+  .post-full-header {
+    padding: 14vw 3vw 10vw;
+  }
+}
+.post-full-meta {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  color: #738a94;
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.post-full-meta-date {
+  color: #3eb0ef;
+}
+.post-full-title {
+  margin: 0;
+  color: #090a0b;
+}
+.date-divider {
+  display: inline-block;
+  margin: 0 6px 1px;
+}
+.post-full-image {
+  margin: 0 -10vw -165px;
+  height: 800px;
+  background: #c5d2d9 50%;
+  background-size: cover;
+  border-radius: 5px;
+}
+@media (max-width: 1170px) {
+  .post-full-image {
+    margin: 0 -4vw -100px;
+    height: 600px;
+    border-radius: 0;
+  }
+}
+@media (max-width: 800px) {
+  .post-full-image {
+    height: 400px;
+  }
+}
+.post-full-content {
+  position: relative;
+  margin: 0 auto;
+  padding: 70px 100px 0;
+  min-height: 230px;
+  font-family: Georgia, serif;
+  font-size: 2.2rem;
+  line-height: 1.6em;
+  background: #fff;
+}
+@media (max-width: 1170px) {
+  .post-full-content {
+    padding: 5vw 7vw 0;
+  }
+}
+@media (max-width: 800px) {
+  .post-full-content {
+    font-size: 1.9rem;
+  }
+}
+.post-full-content:before {
+  left: -5px;
+  transform: rotate(-5deg);
+}
+.post-full-content:after,
+.post-full-content:before {
+  content: "";
+  position: absolute;
+  top: 15px;
+  z-index: -1;
+  display: block;
+  width: 20px;
+  height: 200px;
+  background: rgba(39, 44, 49, 0.15);
+  filter: blur(5px);
+}
+.post-full-content:after {
+  right: -5px;
+  transform: rotate(5deg);
+}
+.no-image .post-full-content {
+  padding-top: 0;
+}
+.no-image .post-full-content:after,
+.no-image .post-full-content:before {
+  display: none;
+}
+.footnotes,
+.post-full-comments,
+.post-full-content blockquote,
+.post-full-content dl,
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6,
+.post-full-content ol,
+.post-full-content p,
+.post-full-content pre,
+.post-full-content ul {
+  min-width: 100%;
+}
+.post-full-content li {
+  word-break: break-word;
+}
+.post-full-content li p {
+  margin: 0;
+}
+.post-full-content a {
+  color: #000;
+  word-break: break-word;
+  box-shadow: inset 0 -1px 0 #3eb0ef;
+}
+.post-full-content a:hover {
+  color: #3eb0ef;
+  text-decoration: none;
+}
+.post-full-content em,
+.post-full-content strong {
+  color: #090a0b;
+}
+.post-full-content small {
+  display: inline-block;
+  line-height: 1.6em;
+}
+.post-full-content li:first-child {
+  margin-top: 0;
+}
+.post-full-content img,
+.post-full-content video {
+  display: block;
+  margin: 1.5em auto;
+  max-width: 1040px;
+  height: auto;
+}
+@media (max-width: 1040px) {
+  .post-full-content img,
+  .post-full-content video {
+    width: 100%;
+  }
+}
+.post-full-content img[src$="#full"] {
+  max-width: none;
+  width: 100vw;
+}
+.post-full-content img + br + small {
+  display: block;
+  margin-top: -3em;
+  margin-bottom: 1.5em;
+  text-align: center;
+}
+.post-full-content iframe {
+  margin: 0 auto !important;
+}
+.post-full-content blockquote {
+  margin: 0 0 1.5em;
+  padding: 0 1.5em;
+  border-left: 3px solid #3eb0ef;
+}
+.post-full-content blockquote p {
+  margin: 0 0 1em;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-style: italic;
+}
+.post-full-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+.post-full-content code {
+  padding: 0 5px 2px;
+  font-size: 0.8em;
+  line-height: 1em;
+  font-weight: 400 !important;
+  background: #e5eff5;
+  border-radius: 3px;
+}
+.post-full-content p code {
+  word-break: break-all;
+}
+.post-full-content pre {
+  overflow-x: auto;
+  margin: 1.5em 0 3em;
+  padding: 20px;
+  max-width: 100%;
+  border: 1px solid #000;
+  color: #e5eff5;
+  font-size: 1.4rem;
+  line-height: 1.5em;
+  background: #0e0f11;
+  border-radius: 5px;
+}
+.post-full-content pre code {
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+}
+.post-full-content pre code :not(span) {
+  color: inherit;
+}
+.post-full-content .fluid-width-video-wrapper {
+  margin: 1.5em 0 3em;
+}
+.post-full-content hr {
+  margin: 4vw 0;
+}
+.post-full-content hr:after {
+  content: "";
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  display: block;
+  margin-left: -10px;
+  width: 1px;
+  height: 30px;
+  background: #e3e9ed;
+  box-shadow: 0 0 0 5px #fff;
+  transform: rotate(45deg);
+}
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6 {
+  color: #090a0b;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
+}
+.post-full-content h1 {
+  margin: 0.5em 0 0.2em;
+  font-size: 4.6rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h1 {
+    font-size: 2.8rem;
+  }
+}
+.post-full-content h2 {
+  margin: 0.5em 0 0.2em;
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h2 {
+    font-size: 2.6rem;
+  }
+}
+.post-full-content h3 {
+  margin: 0.5em 0 0.2em;
+  font-size: 2.8rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h3 {
+    font-size: 2.2rem;
+  }
+}
+.post-full-content h4 {
+  margin: 0.5em 0 0.2em;
+  font-size: 2.8rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h4 {
+    font-size: 2.2rem;
+  }
+}
+.post-full-content h5 {
+  display: block;
+  margin: 0.5em 0;
+  padding: 1em 0 1.5em;
+  border: 0;
+  color: #3eb0ef;
+  font-family: Georgia, serif;
+  font-size: 3.2rem;
+  line-height: 1.35em;
+  text-align: center;
+}
+@media (min-width: 1180px) {
+  .post-full-content h5 {
+    max-width: 1060px;
+    width: 100vw;
+  }
+}
+@media (max-width: 500px) {
+  .post-full-content h5 {
+    padding: 0 0 0.5em;
+    font-size: 2.2rem;
+  }
+}
+.post-full-content h6 {
+  margin: 0.5em 0 0.2em;
+  font-size: 2.3rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h6 {
+    font-size: 2rem;
+  }
+}
+.footnotes-sep {
+  margin-bottom: 30px;
+}
+.footnotes {
+  font-size: 1.5rem;
+}
+.footnotes p {
+  margin: 0;
+}
+.footnote-backref {
+  color: #3eb0ef !important;
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-decoration: none !important;
+  box-shadow: none !important;
+}
+@media (max-width: 500px) {
+  .post-full-meta {
+    font-size: 1.2rem;
+    line-height: 1.3em;
+  }
+  .post-full-title {
+    font-size: 2.9rem;
+  }
+  .post-full-image {
+    margin-bottom: 4vw;
+    height: 350px;
+  }
+  .post-full-content {
+    padding: 0;
+  }
+  .post-full-content:after,
+  .post-full-content:before {
+    display: none;
+  }
+}
+.post-full-content table {
+  display: inline-block;
+  overflow-x: auto;
+  margin: 0.5em 0 2.5em;
+  max-width: 100%;
+  width: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
+  font-size: 1.6rem;
+  white-space: nowrap;
+  vertical-align: top;
+  -webkit-overflow-scrolling: touch;
+  background: radial-gradient(
+        ellipse at left,
+        rgba(0, 0, 0, 0.2) 0,
+        transparent 75%
+      )
+      0,
+    radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0, transparent 75%)
+      100%;
+  background-attachment: scroll, scroll;
+  background-size: 10px 100%, 10px 100%;
+  background-repeat: no-repeat;
+}
+.post-full-content table td:first-child {
+  background-image: linear-gradient(90deg, #fff 50%, hsla(0, 0%, 100%, 0));
+  background-size: 20px 100%;
+  background-repeat: no-repeat;
+}
+.post-full-content table td:last-child {
+  background-image: linear-gradient(270deg, #fff 50%, hsla(0, 0%, 100%, 0));
+  background-position: 100% 0;
+  background-size: 20px 100%;
+  background-repeat: no-repeat;
+}
+.post-full-content table th {
+  color: #15171a;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  text-align: left;
+  text-transform: uppercase;
+  background-color: #f4f8fb;
+}
+.post-full-content table td,
+.post-full-content table th {
+  padding: 6px 12px;
+  border: 1px solid #e3ecf3;
+}
+.subscribe-form {
+  margin: 1.5em 0;
+  padding: 6.5vw 7vw 7vw;
+  border: 1px solid #edf4f8;
+  text-align: center;
+  background: #f4f8fb;
+  border-radius: 7px;
+}
+.subscribe-form-title {
+  margin: 0 0 3px;
+  padding: 0;
+  color: #15171a;
+  font-size: 3.5rem;
+  line-height: 1;
+  font-weight: 700;
+}
+.subscribe-form p {
+  margin-bottom: 1em;
+  color: #738a94;
+  font-size: 2.2rem;
+  line-height: 1.55em;
+  letter-spacing: 0.2px;
+}
+.subscribe-form form {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 420px;
+}
+.subscribe-form .form-group {
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+.subscribe-email {
+  display: block;
+  padding: 10px;
+  width: 100%;
+  border: 1px solid #dae2e7;
+  color: #738a94;
+  font-size: 1.8rem;
+  line-height: 1em;
+  font-weight: 400;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  border-radius: 5px;
+  transition: border-color 0.15s linear;
+  -webkit-appearance: none;
+}
+.subscribe-form button {
+  display: inline-block;
+  margin: 0 0 0 10px;
+  padding: 0 20px;
+  height: 41px;
+  outline: none;
+  color: #fff;
+  font-size: 1.5rem;
+  line-height: 37px;
+  font-weight: 400;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  background: linear-gradient(#4fb7f0, #29a0e0 60%, #29a0e0 90%, #36a6e2);
+  border-radius: 5px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+.subscribe-form button:active,
+.subscribe-form button:focus {
+  background: #209cdf;
+}
+@media (max-width: 650px) {
+  .subscribe-form-title {
+    font-size: 2.4rem;
+  }
+  .subscribe-form p {
+    font-size: 1.6rem;
+  }
+}
+@media (max-width: 500px) {
+  .subscribe-form form {
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+  .subscribe-form .form-group {
+    width: 100%;
+  }
+  .subscribe-form button {
+    margin: 10px 0 0;
+    width: 100%;
+  }
+}
+.post-full-footer {
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0 auto;
+  padding: 3vw 0 6vw;
+  max-width: 840px;
+}
+.author-card,
+.post-full-footer {
+  display: -ms-flexbox;
+  display: flex;
+}
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+  width: 60px;
+  height: 60px;
+}
+.author-card-name {
+  margin: 8px 0 2px;
+  padding: 0;
+  font-size: 2rem;
+}
+.author-card-name a {
+  color: #15171a;
+  font-weight: 700;
+}
+.author-card-name a:hover {
+  text-decoration: none;
+}
+.author-card-content p {
+  margin: 0;
+  color: #738a94;
+  line-height: 1.3em;
+}
+.post-full-footer-right {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-left: 20px;
+}
+.author-card-button {
+  display: block;
+  padding: 9px 16px;
+  border: 1px solid #aebbc1;
+  color: #738a94;
+  font-size: 1.2rem;
+  line-height: 1;
+  font-weight: 500;
+  border-radius: 20px;
+  transition: all 0.2s ease;
+}
+.author-card-button:hover {
+  border-color: #3eb0ef;
+  color: #3eb0ef;
+  text-decoration: none;
+}
+.post-full-authors {
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-top: 20px;
+  padding-top: 40px;
+  border-top: 1px solid #e3e9ed;
+}
+.post-full-authors-content {
+  margin-bottom: 20px;
+}
+.post-full-authors-content p {
+  margin-bottom: 0;
+  color: #738a94;
+  font-size: 1.4rem;
+  letter-spacing: 0.2px;
+  text-align: center;
+  text-transform: uppercase;
+}
+.post-full-authors-content a {
+  display: inline-block;
+  color: #424852;
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.post-full-footer .author-list {
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 10px 20px;
+}
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+  position: relative;
+  margin-right: 15px;
+}
+.author-list-item .author-card {
+  position: absolute;
+  bottom: 130%;
+  left: 50%;
+  z-index: 300;
+  display: block;
+  margin-left: -160px;
+  width: 320px;
+  font-size: 1.4rem;
+  letter-spacing: 0.2px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 12px 26px rgba(39, 44, 49, 0.08),
+    1px 3px 8px rgba(39, 44, 49, 0.03);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+  transform: scale(0.98) translateY(15px);
+  pointer-events: none;
+}
+.author-list-item .author-card:before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  display: block;
+  margin-left: -12px;
+  width: 0;
+  height: 0;
+  border-top: 12px solid #fff;
+  border-right: 12px solid transparent;
+  border-left: 12px solid transparent;
+}
+.author-list-item .author-card.hovered {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+.author-card .basic-info {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 30px 20px 20px;
+  color: #fff;
+  background: #15171a;
+  border-radius: 6px 6px 0 0;
+}
+.author-card .basic-info h2 {
+  margin: 1em 0 0.5em;
+}
+.author-card .bio {
+  padding: 20px 20px 0;
+}
+@media (max-width: 650px) {
+  .author-list-item .author-card {
+    display: none;
+  }
+}
+.basic-info .author-profile-image,
+.basic-info .avatar-wrapper {
+  margin: 0;
+  width: 88px;
+  height: 88px;
+  border: none;
+}
+.basic-info .avatar-wrapper {
+  position: relative;
+  background: rgba(229, 239, 245, 0.1);
+}
+.basic-info .avatar-wrapper svg {
+  margin: 0;
+  width: 88px;
+  height: 88px;
+  opacity: 0.15;
+}
+.post-full-comments {
+  margin: 0 auto;
+  max-width: 840px;
+}
+.read-next-feed {
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin: 0 -20px;
+  padding: 40px 0 0;
+}
+.read-next-card,
+.read-next-feed {
+  display: -ms-flexbox;
+  display: flex;
+}
+.read-next-card {
+  position: relative;
+  -ms-flex: 1 1 300px;
+  flex: 1 1 300px;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0 20px 40px;
+  padding: 25px;
+  color: #fff;
+  background: #15171a 50%;
+  background-size: cover;
+  border-radius: 5px;
+  box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06),
+    1px 3px 8px rgba(39, 44, 49, 0.03);
+}
+.read-next-card:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 40, 60, 0.8),
+    rgba(0, 20, 40, 0.7)
+  );
+  border-radius: 5px;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+.read-next-card-header {
+  position: relative;
+  z-index: 50;
+  padding-top: 20px;
+  text-align: center;
+}
+.read-next-card-header-sitetitle {
+  display: block;
+  font-size: 1.3rem;
+  line-height: 1.3em;
+  opacity: 0.8;
+}
+.read-next-card-header-title {
+  margin: 0;
+  padding: 0 20px;
+  color: #fff;
+  font-size: 3rem;
+  line-height: 1.2em;
+  letter-spacing: 1px;
+}
+.read-next-card-header-title a {
+  color: #fff;
+  font-weight: 300;
+  text-decoration: none;
+}
+.read-next-card-header-title a:hover {
+  text-decoration: none;
+}
+.read-next-divider {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 80px;
+}
+.read-next-divider svg {
+  width: 40px;
+  fill: transparent;
+  stroke: #fff;
+  stroke-width: 0.5px;
+  stroke-opacity: 0.65;
+}
+.read-next-card-content {
+  position: relative;
+  z-index: 50;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 1.7rem;
+}
+.read-next-card-content ul {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+  list-style: none;
+}
+.read-next-card-content li {
+  margin: 0;
+  padding: 0;
+  font-size: 1.6rem;
+  line-height: 1.25em;
+  font-weight: 200;
+  letter-spacing: -0.5px;
+}
+.read-next-card-content li a {
+  display: block;
+  padding: 20px 0;
+  border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+  color: #fff;
+  font-weight: 500;
+  vertical-align: top;
+  transition: opacity 0.3s ease;
+}
+.read-next-card-content li:first-of-type a {
+  padding-top: 10px;
+}
+.read-next-card-content li a:hover {
+  opacity: 1;
+}
+.read-next-card-footer {
+  position: relative;
+  margin: 15px 0 3px;
+  text-align: center;
+}
+.read-next-card-footer a {
+  color: #fff;
+}
+.floating-header {
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 60px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: hsla(0, 0%, 100%, 0.95);
+  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transform: translate3d(0, -120%, 0);
+}
+.floating-active {
+  visibility: visible;
+  transition: all 0.5s cubic-bezier(0.22, 1, 0.27, 1);
+  transform: translateZ(0);
+}
+.floating-header-logo {
+  overflow: hidden;
+  margin: 0 0 0 20px;
+  font-size: 1.6rem;
+  line-height: 1em;
+  letter-spacing: -1px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.floating-header-logo a {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  color: #15171a;
+  line-height: 1.1em;
+  font-weight: 700;
+}
+.floating-header-logo a:hover {
+  text-decoration: none;
+}
+.floating-header-logo img {
+  margin: 0 10px 0 0;
+  max-height: 20px;
+}
+.floating-header-divider {
+  margin: 0 5px;
+  line-height: 1em;
+}
+.floating-header-title {
+  -ms-flex: 1;
+  flex: 1;
+  overflow: hidden;
+  margin: 0;
+  color: #2e2e2e;
+  font-size: 1.6rem;
+  line-height: 1.3em;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.floating-header-share {
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  padding-left: 2%;
+  font-size: 1.3rem;
+  line-height: 1;
+}
+.floating-header-share,
+.floating-header-share a {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.floating-header-share a {
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.floating-header-share svg {
+  width: auto;
+  height: 16px;
+  fill: #fff;
+}
+.floating-header-share-label {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-right: 10px;
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: 500;
+}
+.floating-header-share-label svg {
+  margin: 0 5px 0 10px;
+  width: 18px;
+  height: 18px;
+  stroke: rgba(0, 0, 0, 0.7);
+  transform: rotate(90deg);
+}
+.floating-header-share-fb,
+.floating-header-share-tw {
+  display: block;
+  -ms-flex-align: center;
+  -ms-grid-row-align: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  color: #fff;
+  line-height: 48px;
+  text-align: center;
+  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+.floating-header-share-tw {
+  background: #33b1ff;
+}
+.floating-header-share-fb {
+  background: #005e99;
+}
+.progress {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border: none;
+  color: #3eb0ef;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.progress::-webkit-progress-bar {
+  background-color: transparent;
+}
+.progress::-webkit-progress-value {
+  background-color: #3eb0ef;
+}
+.progress::-moz-progress-bar {
+  background-color: #3eb0ef;
+}
+.progress-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
+}
+.progress-bar {
+  display: block;
+  width: 50%;
+  height: inherit;
+  background-color: #3eb0ef;
+}
+@media (max-width: 900px) {
+  .floating-header {
+    height: 40px;
+  }
+  .floating-header-logo,
+  .floating-header-title {
+    font-size: 1.5rem;
+  }
+  .floating-header-share-fb,
+  .floating-header-share-tw {
+    width: 40px;
+    height: 40px;
+    line-height: 38px;
+  }
+}
+@media (max-width: 800px) {
+  .floating-header-logo {
+    margin-left: 10px;
+  }
+  .floating-header-logo a {
+    color: #2e2e2e;
+  }
+  .floating-header-divider,
+  .floating-header-title {
+    visibility: hidden;
+  }
+}
+@media (max-width: 450px) {
+  .floating-header-share-label {
+    display: none;
+  }
+}
+.post-content {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-align: center;
+  align-items: center;
+  max-width: 920px;
+}
+.post-template .post-content > p:first-child {
+  font-size: 1.25em;
+  line-height: 1.5em;
+}
+.post-full-content .kg-image {
+  max-width: 100%;
+}
+.post-full-image + .post-full-content .kg-content :first-child .kg-image {
+  width: 100%;
+}
+.post-full-content .kg-width-wide .kg-image {
+  max-width: 1040px;
+}
+.post-full-content .kg-width-full .kg-image {
+  max-width: 100vw;
+}
+.post-full-content figure {
+  margin: 1.5em 0 3em;
+}
+.post-full-content figure img {
+  margin: 0;
+}
+.post-full-content figcaption {
+  margin: 1em 0 0;
+  font-size: 80%;
+  line-height: 1.6em;
+  text-align: center;
+}
+.kg-width-full figcaption {
+  padding: 0 1.5em;
+}
+.kg-embed-card {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-align: center;
+  align-items: center;
+  min-width: 100%;
+}
+.kg-embed-card .fluid-width-video-wrapper {
+  margin: 0;
+}
+@media (max-width: 1040px) {
+  .post-full-content .kg-width-full .kg-image {
+    width: 100vw;
+  }
+}
+.kg-gallery-container {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-width: 1040px;
+  width: 100vw;
+}
+.kg-gallery-row {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.kg-gallery-image img {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+.kg-gallery-row:not(:first-of-type) {
+  margin: 0.75em 0 0;
+}
+.kg-gallery-image:not(:first-of-type) {
+  margin: 0 0 0 0.75em;
+}
+.kg-gallery-card + .kg-gallery-card,
+.kg-gallery-card + .kg-image-card.kg-width-wide,
+.kg-image-card.kg-width-wide + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
+  margin: -2.25em 0 3em;
+}
+.site-header-content .author-profile-image {
+  z-index: 10;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin: 0 0 20px;
+  width: 100px;
+  height: 100px;
+  box-shadow: 0 0 0 6px hsla(0, 0%, 100%, 0.1);
+}
+.site-header-content .author-bio {
+  z-index: 10;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin: 5px 0 10px;
+  max-width: 600px;
+  font-size: 2rem;
+  line-height: 1.3em;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+.site-header-content .author-meta {
+  z-index: 10;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0 0 10px;
+  font-family: Georgia, serif;
+  font-style: italic;
+}
+.site-header-content .author-location svg {
+  height: 1.9rem;
+  stroke: #fff;
+}
+.site-header-content .bull {
+  display: inline-block;
+  margin: 0 12px;
+  opacity: 0.5;
+}
+.site-header-content .social-link:first-of-type {
+  padding-left: 4px;
+}
+@media (max-width: 500px) {
+  .site-header-content .author-bio {
+    font-size: 1.8rem;
+    line-height: 1.15em;
+    letter-spacing: 0;
+  }
+  .author-location,
+  .author-stats {
+    display: none;
+  }
+}
+.error-template .site-main {
+  padding: 7vw 4vw;
+}
+.site-nav-center {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+}
+.site-nav-center .site-nav-logo {
+  margin-right: 0;
+}
+.error-message {
+  text-align: center;
+}
+.error-code {
+  margin: 0;
+  font-size: 12vw;
+  line-height: 1em;
+  letter-spacing: -5px;
+  opacity: 0.3;
+}
+.error-description {
+  margin: 0;
+  color: #738a94;
+  font-size: 3rem;
+  line-height: 1.3em;
+  font-weight: 400;
+}
+@media (max-width: 800px) {
+  .error-description {
+    margin: 5px 0 0;
+    font-size: 1.8rem;
+  }
+}
+.error-link {
+  display: inline-block;
+  margin-top: 5px;
+}
+.error-template .post-feed {
+  padding-top: 0;
+}
+.subscribe-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9000;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: rgba(0, 25, 40, 0.97);
+  opacity: 0;
+  transition: opacity 0.2s ease-in;
+  pointer-events: none;
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+}
+.subscribe-overlay:target {
+  opacity: 1;
+  pointer-events: auto;
+}
+.subscribe-overlay-content {
+  position: relative;
+  z-index: 9999;
+  margin: 0 0 5vw;
+  padding: 4vw;
+  color: #fff;
+  text-align: center;
+}
+.subscribe-overlay-logo {
+  position: fixed;
+  top: 23px;
+  left: 30px;
+  height: 30px;
+}
+.subscribe-overlay-title {
+  display: inline-block;
+  margin: 0 0 10px;
+  font-size: 6rem;
+  line-height: 1.15em;
+}
+.subscribe-overlay-description {
+  margin: 0 auto 50px;
+  max-width: 650px;
+  font-family: Georgia, serif;
+  font-size: 3rem;
+  line-height: 1.3em;
+  font-weight: 300;
+  opacity: 0.8;
+}
+.subscribe-overlay form {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 500px;
+}
+.subscribe-overlay .form-group {
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+.subscribe-overlay .subscribe-email {
+  display: block;
+  padding: 14px 20px;
+  width: 100%;
+  border: none;
+  color: #738a94;
+  font-size: 2rem;
+  line-height: 1em;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  border-radius: 8px;
+  transition: border-color 0.15s linear;
+  -webkit-appearance: none;
+}
+.subscribe-email:focus {
+  outline: 0;
+  border-color: #becdd5;
+}
+.subscribe-overlay button {
+  display: inline-block;
+  margin: 0 0 0 15px;
+  padding: 0 25px;
+  height: 52px;
+  outline: none;
+  color: #fff;
+  font-size: 1.7rem;
+  line-height: 37px;
+  font-weight: 400;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  background: linear-gradient(#4fb7f0, #29a0e0 60%, #29a0e0 90%, #36a6e2);
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+.subscribe-overlay button:active,
+.subscribe-overlay button:focus {
+  background: #209cdf;
+}
+.subscribe-overlay-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+}
+.subscribe-overlay-close:before {
+  transform: rotate(45deg);
+}
+.subscribe-overlay-close:after,
+.subscribe-overlay-close:before {
+  content: "";
+  position: absolute;
+  top: 40px;
+  right: 25px;
+  display: block;
+  width: 30px;
+  height: 2px;
+  background: #fff;
+  opacity: 0.8;
+}
+.subscribe-overlay-close:after {
+  transform: rotate(-45deg);
+}
+.subscribe-overlay-close:hover {
+  cursor: default;
+}
+.site-footer {
+  position: relative;
+  padding-top: 20px;
+  padding-bottom: 60px;
+  color: #fff;
+  background: #000;
+}
+.site-footer-content {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 1.3rem;
+}
+.site-footer-content,
+.site-footer-content a {
+  color: hsla(0, 0%, 100%, 0.7);
+}
+.site-footer-content a:hover {
+  color: #fff;
+  text-decoration: none;
+}
+.site-footer-nav {
+  display: -ms-flexbox;
+  display: flex;
+}
+.site-footer-nav a {
+  position: relative;
+  margin-left: 20px;
+}
+.site-footer-nav a:before {
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: -11px;
+  display: block;
+  width: 2px;
+  height: 2px;
+  background: #fff;
+  border-radius: 100%;
+}
+.site-footer-nav a:first-of-type:before {
+  display: none;
+}
+@media (max-width: 650px) {
+  .site-footer-content {
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+  .site-footer-nav a:first-child {
+    margin-left: 0;
+  }
+}
+/*# sourceMappingURL=screen.css.map */
diff --git a/assets/built/screen.css.map b/templates/assets/built/screen.css.map
similarity index 100%
rename from assets/built/screen.css.map
rename to templates/assets/built/screen.css.map
diff --git a/assets/css/.csscomb.json b/templates/assets/css/.csscomb.json
similarity index 100%
rename from assets/css/.csscomb.json
rename to templates/assets/css/.csscomb.json
diff --git a/assets/css/csscomb.json b/templates/assets/css/csscomb.json
similarity index 100%
rename from assets/css/csscomb.json
rename to templates/assets/css/csscomb.json
diff --git a/assets/css/global.css b/templates/assets/css/global.css
similarity index 100%
rename from assets/css/global.css
rename to templates/assets/css/global.css
diff --git a/templates/assets/css/screen.css b/templates/assets/css/screen.css
new file mode 100644
index 0000000..b23e049
--- /dev/null
+++ b/templates/assets/css/screen.css
@@ -0,0 +1,2296 @@
+/* Table of Contents
+/* ------------------------------------------------------------
+
+This is a development CSS file which is built to a minified
+production stylesheet in assets/built/screen.css
+
+1.  Global Styles
+2.  Layout
+3.  Special Templates
+4.  Site Header
+5.  Site Navigation
+6.  Post Feed
+7.  Single Post
+  7.1. Subscribe Form
+  7.2. Post Footer
+     7.2.1 Single Author Byline
+     7.2.2 Multiple Author Byline
+  7.3. Comments
+  7.4. Related Posts
+  7.5. Floating Header
+  7.6. Koenig Styles
+8.  Author Template
+9.  Error Template
+10. Subscribe Overlay
+11. Site Footer
+
+*/
+
+/* 1. Global - Set up the things
+/* ---------------------------------------------------------- */
+@import "global.css";
+
+body {
+  background: #f4f8fb;
+}
+
+.img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 100%;
+}
+
+.hidden {
+  visibility: hidden;
+  position: absolute;
+  text-indent: -9999px;
+}
+
+/* 2. Layout - Page building blocks
+/* ---------------------------------------------------------- */
+
+.site-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.site-main {
+  z-index: 100;
+  flex-grow: 1;
+}
+
+/* Full width page blocks */
+.outer {
+  position: relative;
+  padding: 0 4vw;
+}
+
+/* Centered content container blocks */
+.inner {
+  margin: 0 auto;
+  max-width: 1040px;
+  width: 100%;
+}
+
+/* Usage:
+
+<div class="outer">
+    <div class="inner">
+        Centered content
+    </div>
+</div>
+
+*/
+
+/* 3. Special Template Styles
+/* ---------------------------------------------------------- */
+
+@media (min-width: 900px) {
+  .home-template .post-feed,
+  .tag-template .post-feed,
+  .author-template .post-feed {
+    margin-top: -70px;
+    padding-top: 0;
+  }
+  .home-template .site-nav {
+    position: relative;
+    top: -70px;
+  }
+}
+
+/* 4. Site Header
+/* ---------------------------------------------------------- */
+
+.site-header {
+  position: relative;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  color: #fff;
+  background: color(var(--darkgrey) l(-5%)) no-repeat center center;
+  background-size: cover;
+}
+
+.site-header:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: block;
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.site-header:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  z-index: 10;
+  display: block;
+  height: 80px;
+  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+}
+
+.site-header.no-cover:before,
+.site-header.no-cover:after {
+  display: none;
+}
+
+.site-header-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10vw 4vw;
+  min-height: 200px;
+  max-height: 450px;
+  text-align: center;
+}
+
+.site-title {
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+  font-size: 3.8rem;
+  font-weight: 700;
+}
+
+.site-logo {
+  max-height: 45px;
+}
+
+.site-description {
+  z-index: 10;
+  margin: 0;
+  padding: 5px 0;
+  font-size: 2.2rem;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+
+@media (max-width: 500px) {
+  .site-title {
+    font-size: 3rem;
+  }
+  .site-description {
+    font-size: 1.8rem;
+  }
+}
+
+/* 5. Site Navigation
+/* ---------------------------------------------------------- */
+
+.site-nav {
+  position: relative;
+  z-index: 300;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow-y: hidden;
+  height: 40px;
+  font-size: 1.2rem;
+}
+
+.site-nav-left {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  margin-right: 10px;
+  padding-bottom: 80px;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+
+  -ms-overflow-scrolling: touch;
+}
+
+/* Site Nav Hack Explanation (above):
+
+What's happening above it .site-nav-left is set to overflow-x and allow sideways scrolling, so that when there isn't enough space for all nav items (either due to lots of nav items, or a small viewport), you can still scroll side-to-side to reach them.
+
+The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px of padding-bottom and a 40px fixed height parent (.site-nav) hides that entirely. Slightly hacky code. But nice clean end-result.
+
+*/
+
+.site-nav-logo {
+  flex-shrink: 0;
+  display: block;
+  margin-right: 24px;
+  padding: 11px 0;
+  color: #fff;
+  font-size: 1.7rem;
+  line-height: 1em;
+  font-weight: bold;
+  letter-spacing: -0.5px;
+}
+
+.site-nav-logo:hover {
+  text-decoration: none;
+}
+
+.site-nav-logo img {
+  display: block;
+  width: auto;
+  height: 21px;
+}
+
+.nav {
+  display: flex;
+  margin: 0 0 0 -12px;
+  padding: 0;
+  list-style: none;
+}
+
+.nav li {
+  display: block;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.nav li a {
+  display: block;
+  margin: 0;
+  font-size: 16px;
+  padding: 10px 12px;
+  color: #fff;
+  opacity: 0.8;
+}
+
+.nav li a:hover {
+  text-decoration: none;
+  opacity: 1;
+}
+
+.site-nav-right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+
+.social-links {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.social-links a:last-of-type {
+  padding-right: 20px;
+}
+
+.social-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 10px;
+  color: #fff;
+  opacity: 0.8;
+}
+
+.social-link:hover {
+  opacity: 1;
+}
+
+.social-link svg {
+  height: 1.8rem;
+  fill: #fff;
+}
+
+.social-link-fb svg {
+  height: 1.5rem;
+}
+
+.social-link-wb svg {
+  height: 1.6rem;
+}
+
+.social-link-wb svg path {
+  stroke: #fff;
+}
+
+.social-link-rss svg {
+  height: 1.9rem;
+}
+
+.subscribe-button {
+  display: block;
+  padding: 4px 10px;
+  border: #fff 1px solid;
+  color: #fff;
+  font-size: 1.2rem;
+  line-height: 1em;
+  border-radius: 10px;
+  opacity: 0.8;
+}
+
+.subscribe-button:hover {
+  text-decoration: none;
+  opacity: 1;
+}
+
+.rss-button {
+  opacity: 0.8;
+}
+
+.rss-button:hover {
+  opacity: 1;
+}
+
+.rss-button svg {
+  margin-bottom: 1px;
+  height: 2.1rem;
+  fill: #fff;
+}
+
+@media (max-width: 700px) {
+  .site-header {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .site-nav-left {
+    margin-right: 0;
+    padding-left: 4vw;
+  }
+  .site-nav-right {
+    display: none;
+  }
+}
+
+/* 6. Post Feed
+/* ---------------------------------------------------------- */
+
+.post-feed {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -20px;
+  padding: 40px 0 0 0;
+}
+
+.post-card {
+  flex: 1 1 300px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0 20px 40px;
+  min-height: 300px;
+  background: #fff center center;
+  background-size: cover;
+  border-radius: 5px;
+  box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px,
+    rgba(39, 44, 49, 0.03) 1px 3px 8px;
+  transition: all 0.5s ease;
+}
+
+.post-card:hover {
+  box-shadow: rgba(39, 44, 49, 0.07) 8px 28px 50px,
+    rgba(39, 44, 49, 0.04) 1px 6px 12px;
+  transition: all 0.4s ease;
+  transform: translate3D(0, -1px, 0) scale(1.02);
+}
+
+.post-card-image-link {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 5px 5px 0 0;
+}
+
+.post-card-image {
+  width: auto;
+  height: 200px;
+  background: var(--lightgrey) no-repeat center center;
+  background-size: cover;
+}
+
+.post-card-content-link {
+  position: relative;
+  flex-grow: 1;
+  display: block;
+  padding: 25px 25px 0;
+  color: var(--darkgrey);
+}
+
+.post-card-content-link:hover {
+  text-decoration: none;
+}
+
+.post-card-tags {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--midgrey);
+  font-size: 1.2rem;
+  line-height: 1.15em;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.post-card-title {
+  margin-top: 0;
+}
+
+.post-card-content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.post-card-excerpt {
+  font-family: Georgia, serif;
+}
+
+.post-card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 0 25px 25px;
+}
+
+.author-profile-image,
+.avatar-wrapper {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: color(var(--lightgrey) l(+10%));
+  border-radius: 100%;
+
+  object-fit: cover;
+}
+
+.post-card-meta .profile-image-wrapper,
+.post-card-meta .avatar-wrapper {
+  position: relative;
+}
+
+.author-list {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.author-list-item {
+  position: relative;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.author-list-item:nth-child(1) {
+  z-index: 10;
+}
+.author-list-item:nth-child(2) {
+  z-index: 9;
+}
+.author-list-item:nth-child(3) {
+  z-index: 8;
+}
+.author-list-item:nth-child(4) {
+  z-index: 7;
+}
+.author-list-item:nth-child(5) {
+  z-index: 6;
+}
+.author-list-item:nth-child(6) {
+  z-index: 5;
+}
+.author-list-item:nth-child(7) {
+  z-index: 4;
+}
+.author-list-item:nth-child(8) {
+  z-index: 3;
+}
+.author-list-item:nth-child(9) {
+  z-index: 2;
+}
+.author-list-item:nth-child(10) {
+  z-index: 1;
+}
+
+.static-avatar {
+  display: block;
+  overflow: hidden;
+  margin: 0 -5px;
+  width: 34px;
+  height: 34px;
+  border: #fff 2px solid;
+  border-radius: 100%;
+}
+
+.moving-avatar {
+  display: block;
+  overflow: hidden;
+  margin: 0 -6px;
+  width: 56px;
+  height: 56px;
+  border: #fff 2px solid;
+  border-radius: 100%;
+  transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
+}
+
+@media (min-width: 800px) {
+  .author-list:hover .moving-avatar {
+    margin: 0;
+    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+  }
+}
+
+.author-name-tooltip {
+  position: absolute;
+  bottom: 105%;
+  z-index: 999;
+  display: block;
+  padding: 2px 8px;
+  color: white;
+  font-size: 1.2rem;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  background: var(--darkgrey);
+  border-radius: 3px;
+  box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px,
+    rgba(39, 44, 49, 0.03) 1px 3px 8px;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+  transform: translateY(6px);
+  pointer-events: none;
+}
+
+.author-list-item:hover .author-name-tooltip {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+@media (max-width: 650px) {
+  .author-name-tooltip {
+    display: none;
+  }
+}
+
+.reading-time {
+  flex-shrink: 0;
+  margin-left: 20px;
+  color: var(--midgrey);
+  font-size: 1.2rem;
+  line-height: 33px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+/* Special Styling for home page grid (below):
+
+The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
+
+ */
+
+@media (min-width: 795px) {
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) {
+    flex: 1 1 100%;
+    flex-direction: row;
+  }
+
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-image-link {
+    position: relative;
+    flex: 1 1 auto;
+    border-radius: 5px 0 0 5px;
+  }
+
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-content {
+    flex: 0 1 357px;
+  }
+
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) h2 {
+    font-size: 2.6rem;
+  }
+
+  .home-template .post-feed .post-card:nth-child(6n + 1):not(.no-image) p {
+    font-size: 1.8rem;
+    line-height: 1.55em;
+  }
+
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-content-link {
+    padding: 30px 40px 0;
+  }
+
+  .home-template
+    .post-feed
+    .post-card:nth-child(6n + 1):not(.no-image)
+    .post-card-meta {
+    padding: 0 40px 30px;
+  }
+}
+
+.home-template .site-header:after {
+  display: none;
+}
+
+/* Adjust some margins for smaller screens */
+@media (max-width: 650px) {
+  .post-feed {
+    padding-top: 5vw;
+  }
+  .post-card {
+    margin: 0 20px 5vw;
+  }
+}
+
+/* 7. Single Post
+/* ---------------------------------------------------------- */
+
+.post-template .site-main,
+.page-template .site-main {
+  padding-bottom: 4vw;
+  background: #fff;
+}
+
+.post-full {
+  position: relative;
+  z-index: 50;
+}
+/* ^ Required to make .post-full-content:before/after z-index stacking work */
+
+.post-full-header {
+  margin: 0 auto;
+  padding: 6vw 3vw 3vw;
+  max-width: 1040px;
+  text-align: center;
+}
+@media (max-width: 500px) {
+  .post-full-header {
+    padding: 14vw 3vw 10vw;
+  }
+}
+
+.post-full-meta {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--midgrey);
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.post-full-meta-date {
+  color: var(--blue);
+}
+
+.post-full-title {
+  margin: 0;
+  color: color(var(--darkgrey) l(-5%));
+}
+
+.date-divider {
+  display: inline-block;
+  margin: 0 6px 1px;
+}
+
+.post-full-image {
+  margin: 0 -10vw -165px;
+  height: 800px;
+  background: var(--lightgrey) center center;
+  background-size: cover;
+  border-radius: 5px;
+}
+
+@media (max-width: 1170px) {
+  .post-full-image {
+    margin: 0 -4vw -100px;
+    height: 600px;
+    border-radius: 0;
+  }
+}
+
+@media (max-width: 800px) {
+  .post-full-image {
+    height: 400px;
+  }
+}
+
+.post-full-content {
+  position: relative;
+  margin: 0 auto;
+  padding: 70px 100px 0;
+  min-height: 230px;
+  font-family: Georgia, serif;
+  font-size: 2.2rem;
+  line-height: 1.6em;
+  background: #fff;
+}
+
+@media (max-width: 1170px) {
+  .post-full-content {
+    padding: 5vw 7vw 0;
+  }
+}
+@media (max-width: 800px) {
+  .post-full-content {
+    font-size: 1.9rem;
+  }
+}
+
+.post-full-content:before {
+  content: "";
+  position: absolute;
+  top: 15px;
+  left: -5px;
+  z-index: -1;
+  display: block;
+  width: 20px;
+  height: 200px;
+  background: rgba(39, 44, 49, 0.15);
+  filter: blur(5px);
+  transform: rotate(-5deg);
+}
+
+.post-full-content:after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  right: -5px;
+  z-index: -1;
+  display: block;
+  width: 20px;
+  height: 200px;
+  background: rgba(39, 44, 49, 0.15);
+  filter: blur(5px);
+  transform: rotate(5deg);
+}
+
+.no-image .post-full-content {
+  padding-top: 0;
+}
+
+.no-image .post-full-content:before,
+.no-image .post-full-content:after {
+  display: none;
+}
+
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6,
+.post-full-content p,
+.post-full-content ul,
+.post-full-content ol,
+.post-full-content dl,
+.post-full-content pre,
+.post-full-content blockquote,
+.post-full-comments,
+.footnotes {
+  min-width: 100%;
+}
+
+.post-full-content li {
+  word-break: break-word;
+}
+
+.post-full-content li p {
+  margin: 0;
+}
+
+.post-full-content a {
+  color: #000;
+  word-break: break-word;
+  box-shadow: var(--blue) 0 -1px 0 inset;
+}
+
+.post-full-content a:hover {
+  color: var(--blue);
+  text-decoration: none;
+}
+
+.post-full-content strong,
+.post-full-content em {
+  color: color(var(--darkgrey) l(-5%));
+}
+
+.post-full-content small {
+  display: inline-block;
+  line-height: 1.6em;
+}
+
+.post-full-content li:first-child {
+  margin-top: 0;
+}
+
+.post-full-content img,
+.post-full-content video {
+  display: block;
+  margin: 1.5em auto;
+  max-width: 1040px;
+  height: auto;
+}
+@media (max-width: 1040px) {
+  .post-full-content img,
+  .post-full-content video {
+    width: 100%;
+  }
+}
+
+/* Full bleed images (#full)
+Super neat trick courtesy of @JoelDrapper
+
+Usage (In Ghost edtior):
+
+![img](/some/image.jpg#full)
+
+*/
+.post-full-content img[src$="#full"] {
+  max-width: none;
+  width: 100vw;
+}
+
+/* Image captions
+
+Usage (In Ghost editor):
+
+![img](/some/image.jpg)
+<small>Your image caption</small>
+
+*/
+.post-full-content img + br + small {
+  display: block;
+  margin-top: -3em;
+  margin-bottom: 1.5em;
+  text-align: center;
+}
+
+/* Override third party iframe styles */
+.post-full-content iframe {
+  margin: 0 auto !important;
+}
+
+.post-full-content blockquote {
+  margin: 0 0 1.5em;
+  padding: 0 1.5em;
+  border-left: #3eb0ef 3px solid;
+}
+
+.post-full-content blockquote p {
+  margin: 0 0 1em 0;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-style: italic;
+}
+
+.post-full-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.post-full-content code {
+  padding: 0 5px 2px;
+  font-size: 0.8em;
+  line-height: 1em;
+  font-weight: 400 !important;
+  background: var(--whitegrey);
+  border-radius: 3px;
+}
+
+.post-full-content p code {
+  word-break: break-all;
+}
+
+.post-full-content pre {
+  overflow-x: auto;
+  margin: 1.5em 0 3em;
+  padding: 20px;
+  max-width: 100%;
+  border: color(var(--darkgrey) l(-10%)) 1px solid;
+  color: var(--whitegrey);
+  font-size: 1.4rem;
+  line-height: 1.5em;
+  background: color(var(--darkgrey) l(-3%));
+  border-radius: 5px;
+}
+
+.post-full-content pre code {
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+}
+
+.post-full-content pre code :not(span) {
+  color: inherit;
+}
+
+.post-full-content .fluid-width-video-wrapper {
+  margin: 1.5em 0 3em;
+}
+
+.post-full-content hr {
+  margin: 4vw 0;
+}
+
+.post-full-content hr:after {
+  content: "";
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  display: block;
+  margin-left: -10px;
+  width: 1px;
+  height: 30px;
+  background: color(var(--lightgrey) l(+10%));
+  box-shadow: #fff 0 0 0 5px;
+  transform: rotate(45deg);
+}
+
+.post-full-content h1,
+.post-full-content h2,
+.post-full-content h3,
+.post-full-content h4,
+.post-full-content h5,
+.post-full-content h6 {
+  color: color(var(--darkgrey) l(-5%));
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+.post-full-content h1 {
+  margin: 0.5em 0 0.2em 0;
+  font-size: 4.6rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h1 {
+    font-size: 2.8rem;
+  }
+}
+
+.post-full-content h2 {
+  margin: 0.5em 0 0.2em 0;
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h2 {
+    font-size: 2.6rem;
+  }
+}
+
+.post-full-content h3 {
+  margin: 0.5em 0 0.2em 0;
+  font-size: 2.8rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h3 {
+    font-size: 2.2rem;
+  }
+}
+
+.post-full-content h4 {
+  margin: 0.5em 0 0.2em 0;
+  font-size: 2.8rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h4 {
+    font-size: 2.2rem;
+  }
+}
+
+.post-full-content h5 {
+  display: block;
+  margin: 0.5em 0;
+  padding: 1em 0 1.5em;
+  border: 0;
+  color: var(--blue);
+  font-family: Georgia, serif;
+  font-size: 3.2rem;
+  line-height: 1.35em;
+  text-align: center;
+}
+@media (min-width: 1180px) {
+  .post-full-content h5 {
+    max-width: 1060px;
+    width: 100vw;
+  }
+}
+@media (max-width: 500px) {
+  .post-full-content h5 {
+    padding: 0 0 0.5em;
+    font-size: 2.2rem;
+  }
+}
+
+.post-full-content h6 {
+  margin: 0.5em 0 0.2em 0;
+  font-size: 2.3rem;
+  font-weight: 700;
+}
+@media (max-width: 500px) {
+  .post-full-content h6 {
+    font-size: 2rem;
+  }
+}
+
+.footnotes-sep {
+  margin-bottom: 30px;
+}
+
+.footnotes {
+  font-size: 1.5rem;
+}
+
+.footnotes p {
+  margin: 0;
+}
+
+.footnote-backref {
+  color: var(--blue) !important;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-decoration: none !important;
+  box-shadow: none !important;
+}
+
+/* Some grouped styles for smaller viewports */
+@media (max-width: 500px) {
+  .post-full-meta {
+    font-size: 1.2rem;
+    line-height: 1.3em;
+  }
+  .post-full-title {
+    font-size: 2.9rem;
+  }
+  .post-full-image {
+    margin-bottom: 4vw;
+    height: 350px;
+  }
+  .post-full-content {
+    padding: 0;
+  }
+  .post-full-content:before,
+  .post-full-content:after {
+    display: none;
+  }
+}
+
+/* Tables */
+.post-full-content table {
+  display: inline-block;
+  overflow-x: auto;
+  margin: 0.5em 0 2.5em;
+  max-width: 100%;
+  width: auto;
+  border-spacing: 0;
+  border-collapse: collapse;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 1.6rem;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.post-full-content table {
+  -webkit-overflow-scrolling: touch;
+  background: radial-gradient(
+        ellipse at left,
+        rgba(0, 0, 0, 0.2) 0%,
+        rgba(0, 0, 0, 0) 75%
+      )
+      0 center,
+    radial-gradient(
+        ellipse at right,
+        rgba(0, 0, 0, 0.2) 0%,
+        rgba(0, 0, 0, 0) 75%
+      )
+      100% center;
+  background-attachment: scroll, scroll;
+  background-size: 10px 100%, 10px 100%;
+  background-repeat: no-repeat;
+}
+
+.post-full-content table td:first-child {
+  background-image: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-size: 20px 100%;
+  background-repeat: no-repeat;
+}
+
+.post-full-content table td:last-child {
+  background-image: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  background-position: 100% 0;
+  background-size: 20px 100%;
+  background-repeat: no-repeat;
+}
+
+.post-full-content table th {
+  color: var(--darkgrey);
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+  text-align: left;
+  text-transform: uppercase;
+  background-color: color(var(--whitegrey) l(+4%));
+}
+
+.post-full-content table th,
+.post-full-content table td {
+  padding: 6px 12px;
+  border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
+}
+
+/* 7.1. Subscribe Form
+/* ---------------------------------------------------------- */
+
+.subscribe-form {
+  margin: 1.5em 0;
+  padding: 6.5vw 7vw 7vw;
+  border: color(var(--whitegrey) l(+2%)) 1px solid;
+  text-align: center;
+  background: color(var(--whitegrey) l(+4%));
+  border-radius: 7px;
+}
+
+.subscribe-form-title {
+  margin: 0 0 3px 0;
+  padding: 0;
+  color: var(--darkgrey);
+  font-size: 3.5rem;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.subscribe-form p {
+  margin-bottom: 1em;
+  color: var(--midgrey);
+  font-size: 2.2rem;
+  line-height: 1.55em;
+  letter-spacing: 0.2px;
+}
+
+.subscribe-form form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 420px;
+}
+
+.subscribe-form .form-group {
+  flex-grow: 1;
+}
+
+.subscribe-email {
+  display: block;
+  padding: 10px;
+  width: 100%;
+  border: color(var(--lightgrey) l(+7%)) 1px solid;
+  color: var(--midgrey);
+  font-size: 1.8rem;
+  line-height: 1em;
+  font-weight: normal;
+  user-select: text;
+  border-radius: 5px;
+  transition: border-color 0.15s linear;
+
+  -webkit-appearance: none;
+}
+
+.subscribe-email:focus {
+  outline: 0;
+  border-color: color(var(--lightgrey) l(-2%));
+}
+
+.subscribe-form button {
+  display: inline-block;
+  margin: 0 0 0 10px;
+  padding: 0 20px;
+  height: 41px;
+  outline: none;
+  color: #fff;
+  font-size: 1.5rem;
+  line-height: 37px;
+  font-weight: 400;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  background: linear-gradient(
+    color(var(--blue) whiteness(+7%)),
+    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+    color(var(--blue) lightness(-4%) saturation(-10%))
+  );
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14);
+
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.subscribe-form button:active,
+.subscribe-form button:focus {
+  background: color(var(--blue) lightness(-9%) saturation(-10%));
+}
+
+@media (max-width: 650px) {
+  .subscribe-form-title {
+    font-size: 2.4rem;
+  }
+  .subscribe-form p {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 500px) {
+  .subscribe-form form {
+    flex-direction: column;
+  }
+  .subscribe-form .form-group {
+    width: 100%;
+  }
+  .subscribe-form button {
+    margin: 10px 0 0 0;
+    width: 100%;
+  }
+}
+
+/* 7.2. Post Footer
+/* ---------------------------------------------------------- */
+
+.post-full-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  padding: 3vw 0 6vw 0;
+  max-width: 840px;
+}
+
+/* 7.2.1 Single Author Byline
+/* ---------------------------------------------------------- */
+
+.author-card {
+  display: flex;
+}
+
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+  margin-right: 15px;
+  width: 60px;
+  height: 60px;
+}
+
+.author-card-name {
+  margin: 8px 0 2px 0;
+  padding: 0;
+  font-size: 2rem;
+}
+
+.author-card-name a {
+  color: var(--darkgrey);
+  font-weight: 700;
+}
+
+.author-card-name a:hover {
+  text-decoration: none;
+}
+
+.author-card-content p {
+  margin: 0;
+  color: var(--midgrey);
+  line-height: 1.3em;
+}
+
+.post-full-footer-right {
+  flex-shrink: 0;
+  margin-left: 20px;
+}
+
+.author-card-button {
+  display: block;
+  padding: 9px 16px;
+  border: color(var(--midgrey) l(+20%)) 1px solid;
+  color: var(--midgrey);
+  font-size: 1.2rem;
+  line-height: 1;
+  font-weight: 500;
+  border-radius: 20px;
+  transition: all ease 0.2s;
+}
+
+.author-card-button:hover {
+  border-color: var(--blue);
+  color: var(--blue);
+  text-decoration: none;
+}
+
+/* 7.2.2 Multiple Author Byline
+/* ---------------------------------------------------------- */
+
+.post-full-authors {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+  padding-top: 40px;
+  border-top: color(var(--lightgrey) l(+10%)) 1px solid;
+}
+
+.post-full-authors-content {
+  margin-bottom: 20px;
+}
+
+.post-full-authors-content p {
+  margin-bottom: 0;
+  color: var(--midgrey);
+  font-size: 1.4rem;
+  letter-spacing: 0.2px;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.post-full-authors-content a {
+  display: inline-block;
+  color: color(var(--darkgrey) l(+20%));
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.post-full-footer .author-list {
+  justify-content: center;
+  padding: 10px 20px;
+}
+
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+  position: relative;
+  margin-right: 15px;
+}
+
+.author-list-item .author-card {
+  position: absolute;
+  bottom: 130%;
+  left: 50%;
+  z-index: 300;
+  display: block;
+  margin-left: -160px;
+  width: 320px;
+  font-size: 1.4rem;
+  letter-spacing: 0.2px;
+  background: white;
+  border-radius: 6px;
+  box-shadow: rgba(39, 44, 49, 0.08) 0 12px 26px,
+    rgba(39, 44, 49, 0.03) 1px 3px 8px;
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+  transform: scale(0.98) translateY(15px);
+  pointer-events: none;
+}
+
+.author-list-item .author-card:before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  display: block;
+  margin-left: -12px;
+  width: 0;
+  height: 0;
+  border-top: 12px solid #fff;
+  border-right: 12px solid transparent;
+  border-left: 12px solid transparent;
+}
+
+.author-list-item .author-card.hovered {
+  opacity: 1;
+  transform: scale(1) translateY(0px);
+  pointer-events: auto;
+}
+
+.author-card .basic-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 20px 20px 20px;
+  color: #fff;
+  background: var(--darkgrey);
+  border-radius: 6px 6px 0 0;
+}
+
+.author-card .basic-info h2 {
+  margin: 1em 0 0.5em;
+}
+
+.author-card .bio {
+  padding: 20px 20px 0;
+}
+
+@media (max-width: 650px) {
+  .author-list-item .author-card {
+    display: none;
+  }
+}
+
+.basic-info .author-profile-image {
+  margin: 0;
+  width: 88px;
+  height: 88px;
+  border: none;
+}
+
+.basic-info .avatar-wrapper {
+  position: relative;
+  margin: 0;
+  width: 88px;
+  height: 88px;
+  border: none;
+  background: rgba(229, 239, 245, 0.1);
+}
+
+.basic-info .avatar-wrapper svg {
+  margin: 0;
+  width: 88px;
+  height: 88px;
+  opacity: 0.15;
+}
+
+/* 7.3. Comments
+/* ---------------------------------------------------------- */
+
+.post-full-comments {
+  margin: 0 auto;
+  max-width: 840px;
+}
+
+/* 7.4. Related posts
+/* ---------------------------------------------------------- */
+
+.read-next-feed {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -20px;
+  padding: 40px 0 0 0;
+}
+
+.read-next-card {
+  position: relative;
+  flex: 1 1 300px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: 0 20px 40px;
+  padding: 25px;
+  color: #fff;
+  background: var(--darkgrey) center center;
+  background-size: cover;
+  border-radius: 5px;
+  box-shadow: rgba(39, 44, 49, 0.06) 8px 14px 38px,
+    rgba(39, 44, 49, 0.03) 1px 3px 8px;
+}
+
+.read-next-card:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  background: linear-gradient(
+    135deg,
+    rgba(0, 40, 60, 0.8) 0%,
+    rgba(0, 20, 40, 0.7) 100%
+  );
+  border-radius: 5px;
+
+  backdrop-filter: blur(2px);
+}
+
+.read-next-card-header {
+  position: relative;
+  z-index: 50;
+  padding-top: 20px;
+  text-align: center;
+}
+
+.read-next-card-header-sitetitle {
+  display: block;
+  font-size: 1.3rem;
+  line-height: 1.3em;
+  opacity: 0.8;
+}
+
+.read-next-card-header-title {
+  margin: 0;
+  padding: 0 20px;
+  color: #fff;
+  font-size: 3rem;
+  line-height: 1.2em;
+  letter-spacing: 1px;
+}
+
+.read-next-card-header-title a {
+  color: #fff;
+  font-weight: 300;
+  text-decoration: none;
+}
+
+.read-next-card-header-title a:hover {
+  text-decoration: none;
+}
+
+.read-next-divider {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  height: 80px;
+}
+
+.read-next-divider svg {
+  width: 40px;
+  fill: transparent;
+  stroke: #fff;
+
+  stroke-width: 0.5px;
+  stroke-opacity: 0.65;
+}
+
+.read-next-card-content {
+  position: relative;
+  z-index: 50;
+  flex-grow: 1;
+  display: flex;
+  font-size: 1.7rem;
+}
+
+.read-next-card-content ul {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+  list-style: none;
+}
+
+.read-next-card-content li {
+  margin: 0;
+  padding: 0;
+  font-size: 1.6rem;
+  line-height: 1.25em;
+  font-weight: 200;
+  letter-spacing: -0.5px;
+}
+
+.read-next-card-content li a {
+  display: block;
+  padding: 20px 0;
+  border-bottom: rgba(255, 255, 255, 0.3) 1px solid;
+  color: #fff;
+  font-weight: 500;
+  vertical-align: top;
+  transition: opacity 0.3s ease;
+}
+
+.read-next-card-content li:first-of-type a {
+  padding-top: 10px;
+}
+
+.read-next-card-content li a:hover {
+  opacity: 1;
+}
+
+.read-next-card-footer {
+  position: relative;
+  margin: 15px 0 3px 0;
+  text-align: center;
+}
+
+.read-next-card-footer a {
+  color: #fff;
+}
+
+/* 7.5. Floating Header
+/* ---------------------------------------------------------- */
+
+.floating-header {
+  visibility: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  border-bottom: rgba(0, 0, 0, 0.06) 1px solid;
+  background: rgba(255, 255, 255, 0.95);
+  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+  transform: translate3d(0, -120%, 0);
+}
+
+.floating-active {
+  visibility: visible;
+  transition: all 500ms cubic-bezier(0.22, 1, 0.27, 1);
+  transform: translate3d(0, 0, 0);
+}
+
+.floating-header-logo {
+  overflow: hidden;
+  margin: 0 0 0 20px;
+  font-size: 1.6rem;
+  line-height: 1em;
+  letter-spacing: -1px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.floating-header-logo a {
+  display: flex;
+  align-items: center;
+  color: var(--darkgrey);
+  line-height: 1.1em;
+  font-weight: 700;
+}
+
+.floating-header-logo a:hover {
+  text-decoration: none;
+}
+
+.floating-header-logo img {
+  margin: 0 10px 0 0;
+  max-height: 20px;
+}
+
+.floating-header-divider {
+  margin: 0 5px;
+  line-height: 1em;
+}
+
+.floating-header-title {
+  flex: 1;
+  overflow: hidden;
+  margin: 0;
+  color: #2e2e2e;
+  font-size: 1.6rem;
+  line-height: 1.3em;
+  font-weight: bold;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.floating-header-share {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: 2%;
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
+.floating-header-share a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.floating-header-share svg {
+  width: auto;
+  height: 16px;
+  fill: #fff;
+}
+
+.floating-header-share-label {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: 500;
+}
+
+.floating-header-share-label svg {
+  margin: 0 5px 0 10px;
+  width: 18px;
+  height: 18px;
+  stroke: rgba(0, 0, 0, 0.7);
+  transform: rotate(90deg);
+}
+
+.floating-header-share-tw,
+.floating-header-share-fb {
+  display: block;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+  color: #fff;
+  line-height: 48px;
+  text-align: center;
+  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.floating-header-share-tw {
+  background: #33b1ff;
+}
+
+.floating-header-share-fb {
+  background: #005e99;
+}
+
+.progress {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border: none;
+  color: var(--blue);
+  background: transparent;
+
+  appearance: none;
+}
+
+.progress::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+.progress::-webkit-progress-value {
+  background-color: var(--blue);
+}
+
+.progress::-moz-progress-bar {
+  background-color: var(--blue);
+}
+
+.progress-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
+}
+
+.progress-bar {
+  display: block;
+  width: 50%;
+  height: inherit;
+  background-color: var(--blue);
+}
+
+@media (max-width: 900px) {
+  .floating-header {
+    height: 40px;
+  }
+  .floating-header-title,
+  .floating-header-logo {
+    font-size: 1.5rem;
+  }
+  .floating-header-share-tw,
+  .floating-header-share-fb {
+    width: 40px;
+    height: 40px;
+    line-height: 38px;
+  }
+}
+
+@media (max-width: 800px) {
+  .floating-header-logo {
+    margin-left: 10px;
+  }
+  .floating-header-logo a {
+    color: #2e2e2e;
+  }
+  .floating-header-title,
+  .floating-header-divider {
+    visibility: hidden;
+  }
+}
+
+@media (max-width: 450px) {
+  .floating-header-share-label {
+    display: none;
+  }
+}
+
+/* 7.6. Koenig Styles
+/* ---------------------------------------------------------- */
+
+.post-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 920px;
+}
+
+.post-template .post-content > p:first-child {
+  font-size: 1.25em;
+  line-height: 1.5em;
+}
+
+.post-full-content .kg-image {
+  max-width: 100%;
+}
+
+/* Preventing full-width image overlap with post image.  */
+.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
+  width: 100%;
+}
+
+.post-full-content .kg-width-wide .kg-image {
+  max-width: 1040px;
+}
+
+.post-full-content .kg-width-full .kg-image {
+  max-width: 100vw;
+}
+
+.post-full-content figure {
+  margin: 1.5em 0 3em;
+}
+
+.post-full-content figure img {
+  margin: 0;
+}
+
+.post-full-content figcaption {
+  margin: 1em 0 0;
+  font-size: 80%;
+  line-height: 1.6em;
+  text-align: center;
+}
+
+.kg-width-full figcaption {
+  padding: 0 1.5em;
+}
+
+.kg-embed-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 100%;
+}
+
+.kg-embed-card .fluid-width-video-wrapper {
+  margin: 0;
+}
+
+@media (max-width: 1040px) {
+  .post-full-content .kg-width-full .kg-image {
+    width: 100vw;
+  }
+}
+
+.kg-gallery-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 1040px;
+  width: 100vw;
+}
+
+.kg-gallery-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.kg-gallery-image img {
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+  margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+  margin: 0 0 0 0.75em;
+}
+
+.kg-gallery-card + .kg-image-card.kg-width-wide,
+.kg-gallery-card + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
+  margin: -2.25em 0 3em;
+}
+
+/* 8. Author Template
+/* ---------------------------------------------------------- */
+
+.site-header-content .author-profile-image {
+  z-index: 10;
+  flex-shrink: 0;
+  margin: 0 0 20px 0;
+  width: 100px;
+  height: 100px;
+  box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 6px;
+}
+
+.site-header-content .author-bio {
+  z-index: 10;
+  flex-shrink: 0;
+  margin: 5px 0 10px 0;
+  max-width: 600px;
+  font-size: 2rem;
+  line-height: 1.3em;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+
+.site-header-content .author-meta {
+  z-index: 10;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0 10px 0;
+  font-family: Georgia, serif;
+  font-style: italic;
+}
+
+.site-header-content .author-location svg {
+  height: 1.9rem;
+  stroke: #fff;
+}
+
+.site-header-content .bull {
+  display: inline-block;
+  margin: 0 12px;
+  opacity: 0.5;
+}
+
+.site-header-content .social-link:first-of-type {
+  padding-left: 4px;
+}
+
+@media (max-width: 500px) {
+  .site-header-content .author-bio {
+    font-size: 1.8rem;
+    line-height: 1.15em;
+    letter-spacing: 0;
+  }
+  .author-location,
+  .author-stats {
+    display: none;
+  }
+}
+
+/* 9. Error Template
+/* ---------------------------------------------------------- */
+
+.error-template .site-main {
+  padding: 7vw 4vw;
+}
+
+.site-nav-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.site-nav-center .site-nav-logo {
+  margin-right: 0;
+}
+
+.error-message {
+  text-align: center;
+}
+
+.error-code {
+  margin: 0;
+  font-size: 12vw;
+  line-height: 1em;
+  letter-spacing: -5px;
+  opacity: 0.3;
+}
+
+.error-description {
+  margin: 0;
+  color: var(--midgrey);
+  font-size: 3rem;
+  line-height: 1.3em;
+  font-weight: 400;
+}
+
+@media (max-width: 800px) {
+  .error-description {
+    margin: 5px 0 0 0;
+    font-size: 1.8rem;
+  }
+}
+
+.error-link {
+  display: inline-block;
+  margin-top: 5px;
+}
+
+.error-template .post-feed {
+  padding-top: 0;
+}
+
+/* 10. Subscribe Overlay
+/* ---------------------------------------------------------- */
+
+.subscribe-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 25, 40, 0.97);
+  opacity: 0;
+  transition: opacity 200ms ease-in;
+  pointer-events: none;
+
+  backdrop-filter: blur(3px);
+}
+
+.subscribe-overlay:target {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.subscribe-overlay-content {
+  position: relative;
+  z-index: 9999;
+  margin: 0 0 5vw 0;
+  padding: 4vw;
+  color: #fff;
+  text-align: center;
+}
+
+.subscribe-overlay-logo {
+  position: fixed;
+  top: 23px;
+  left: 30px;
+  height: 30px;
+}
+
+.subscribe-overlay-title {
+  display: inline-block;
+  margin: 0 0 10px 0;
+  font-size: 6rem;
+  line-height: 1.15em;
+}
+
+.subscribe-overlay-description {
+  margin: 0 auto 50px;
+  max-width: 650px;
+  font-family: Georgia, serif;
+  font-size: 3rem;
+  line-height: 1.3em;
+  font-weight: 300;
+  opacity: 0.8;
+}
+
+.subscribe-overlay form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  max-width: 500px;
+}
+
+.subscribe-overlay .form-group {
+  flex-grow: 1;
+}
+
+.subscribe-overlay .subscribe-email {
+  display: block;
+  padding: 14px 20px;
+  width: 100%;
+  border: none;
+  color: var(--midgrey);
+  font-size: 2rem;
+  line-height: 1em;
+  font-weight: normal;
+  letter-spacing: 0.5px;
+  user-select: text;
+  border-radius: 8px;
+  transition: border-color 0.15s linear;
+
+  -webkit-appearance: none;
+}
+
+.subscribe-email:focus {
+  outline: 0;
+  border-color: color(var(--lightgrey) l(-2%));
+}
+
+.subscribe-overlay button {
+  display: inline-block;
+  margin: 0 0 0 15px;
+  padding: 0 25px;
+  height: 52px;
+  outline: none;
+  color: #fff;
+  font-size: 1.7rem;
+  line-height: 37px;
+  font-weight: 400;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+  background: linear-gradient(
+    color(var(--blue) whiteness(+7%)),
+    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+    color(var(--blue) lightness(-4%) saturation(-10%))
+  );
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.14);
+
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.subscribe-overlay button:active,
+.subscribe-overlay button:focus {
+  background: color(var(--blue) lightness(-9%) saturation(-10%));
+}
+
+.subscribe-overlay-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+}
+
+.subscribe-overlay-close:before {
+  content: "";
+  position: absolute;
+  top: 40px;
+  right: 25px;
+  display: block;
+  width: 30px;
+  height: 2px;
+  background: #fff;
+  opacity: 0.8;
+  transform: rotate(45deg);
+}
+
+.subscribe-overlay-close:after {
+  content: "";
+  position: absolute;
+  top: 40px;
+  right: 25px;
+  display: block;
+  width: 30px;
+  height: 2px;
+  background: #fff;
+  opacity: 0.8;
+  transform: rotate(-45deg);
+}
+
+.subscribe-overlay-close:hover {
+  cursor: default;
+}
+
+/* 11. Site Footer
+/* ---------------------------------------------------------- */
+
+.site-footer {
+  position: relative;
+  padding-top: 20px;
+  padding-bottom: 60px;
+  color: #fff;
+  background: color(var(--darkgrey) l(-15%));
+}
+
+.site-footer-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 1.3rem;
+}
+
+.site-footer-content a {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.site-footer-content a:hover {
+  color: rgba(255, 255, 255, 1);
+  text-decoration: none;
+}
+
+.site-footer-nav {
+  display: flex;
+}
+
+.site-footer-nav a {
+  position: relative;
+  margin-left: 20px;
+}
+
+.site-footer-nav a:before {
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: -11px;
+  display: block;
+  width: 2px;
+  height: 2px;
+  background: #fff;
+  border-radius: 100%;
+}
+
+.site-footer-nav a:first-of-type:before {
+  display: none;
+}
+
+@media (max-width: 650px) {
+  .site-footer-content {
+    flex-direction: column;
+  }
+  .site-footer-nav a:first-child {
+    margin-left: 0;
+  }
+}
diff --git a/assets/images/blog-cover.jpg b/templates/assets/images/blog-cover.jpg
similarity index 100%
rename from assets/images/blog-cover.jpg
rename to templates/assets/images/blog-cover.jpg
diff --git a/templates/assets/js/infinitescroll.js b/templates/assets/js/infinitescroll.js
new file mode 100644
index 0000000..8366565
--- /dev/null
+++ b/templates/assets/js/infinitescroll.js
@@ -0,0 +1,123 @@
+/* global maxPages */
+
+// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
+$(function ($) {
+  var currentPage = 1;
+  var pathname = window.location.pathname;
+  var $document = $(document);
+  var $result = $(".post-feed");
+  var buffer = 300;
+
+  var ticking = false;
+  var isLoading = false;
+
+  var lastScrollY = window.scrollY;
+  var lastWindowHeight = window.innerHeight;
+  var lastDocumentHeight = $document.height();
+
+  function onScroll() {
+    lastScrollY = window.scrollY;
+    requestTick();
+  }
+
+  function onResize() {
+    lastWindowHeight = window.innerHeight;
+    lastDocumentHeight = $document.height();
+    requestTick();
+  }
+
+  function requestTick() {
+    if (!ticking) {
+      requestAnimationFrame(infiniteScroll);
+    }
+    ticking = true;
+  }
+
+  function sanitizePathname(path) {
+    var paginationRegex = /(?:page\/)(\d)(?:\/)$/i;
+
+    // remove hash params from path
+    path = path.replace(/#(.*)$/g, "").replace("////g", "/");
+
+    // remove pagination from the path and replace the current pages
+    // with the actual requested page. E. g. `/page/3/` indicates that
+    // the user actually requested page 3, so we should request page 4
+    // next, unless it's the last page already.
+    if (path.match(paginationRegex)) {
+      currentPage = parseInt(path.match(paginationRegex)[1]);
+
+      path = path.replace(paginationRegex, "");
+    }
+
+    return path;
+  }
+
+  function infiniteScroll() {
+    // sanitize the pathname from possible pagination or hash params
+    pathname = sanitizePathname(pathname);
+
+    // return if already loading
+    if (isLoading) {
+      return;
+    }
+
+    // return if not scroll to the bottom
+    if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
+      ticking = false;
+      return;
+    }
+
+    /**
+     * maxPages is defined in default.hbs and is the value
+     * of the amount of pagination pages.
+     * If we reached the last page or are past it,
+     * we return and disable the listeners.
+     */
+    if (currentPage >= maxPages) {
+      window.removeEventListener("scroll", onScroll, { passive: true });
+      window.removeEventListener("resize", onResize);
+      return;
+    }
+
+    isLoading = true;
+
+    // next page
+    currentPage += 1;
+
+    if (pathname.charAt(pathname.length - 1) != "/") {
+      pathname = pathname + "/";
+    }
+
+    // Load more
+    var nextPage = pathname + "page/" + currentPage;
+    console.log(pathname);
+    console.log(nextPage, 1111);
+
+    $.get(nextPage, function (content) {
+      var parse = document.createRange().createContextualFragment(content);
+      var posts = parse.querySelectorAll(".post");
+      if (posts.length) {
+        [].forEach.call(posts, function (post) {
+          $result[0].appendChild(post);
+        });
+      }
+    })
+      .fail(function (xhr) {
+        // 404 indicates we've run out of pages
+        if (xhr.status === 404) {
+          window.removeEventListener("scroll", onScroll, { passive: true });
+          window.removeEventListener("resize", onResize);
+        }
+      })
+      .always(function () {
+        lastDocumentHeight = $document.height();
+        isLoading = false;
+        ticking = false;
+      });
+  }
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onResize);
+
+  infiniteScroll();
+});
diff --git a/assets/js/jquery.fitvids.js b/templates/assets/js/jquery.fitvids.js
similarity index 100%
rename from assets/js/jquery.fitvids.js
rename to templates/assets/js/jquery.fitvids.js
diff --git a/assets/js/jquery.min.js b/templates/assets/js/jquery.min.js
similarity index 100%
rename from assets/js/jquery.min.js
rename to templates/assets/js/jquery.min.js
diff --git a/assets/js/vue.min.js b/templates/assets/js/vue.min.js
similarity index 100%
rename from assets/js/vue.min.js
rename to templates/assets/js/vue.min.js
diff --git a/assets/prism/css/prism-Coy.css b/templates/assets/prism/css/prism-Coy.css
similarity index 100%
rename from assets/prism/css/prism-Coy.css
rename to templates/assets/prism/css/prism-Coy.css
diff --git a/assets/prism/css/prism-Dark.css b/templates/assets/prism/css/prism-Dark.css
similarity index 100%
rename from assets/prism/css/prism-Dark.css
rename to templates/assets/prism/css/prism-Dark.css
diff --git a/assets/prism/css/prism-Default.css b/templates/assets/prism/css/prism-Default.css
similarity index 100%
rename from assets/prism/css/prism-Default.css
rename to templates/assets/prism/css/prism-Default.css
diff --git a/assets/prism/css/prism-Okaidia.css b/templates/assets/prism/css/prism-Okaidia.css
similarity index 100%
rename from assets/prism/css/prism-Okaidia.css
rename to templates/assets/prism/css/prism-Okaidia.css
diff --git a/assets/prism/css/prism-Solarized Light.css b/templates/assets/prism/css/prism-Solarized Light.css
similarity index 100%
rename from assets/prism/css/prism-Solarized Light.css
rename to templates/assets/prism/css/prism-Solarized Light.css
diff --git a/assets/prism/css/prism-Tomorrow Night.css b/templates/assets/prism/css/prism-Tomorrow Night.css
similarity index 100%
rename from assets/prism/css/prism-Tomorrow Night.css
rename to templates/assets/prism/css/prism-Tomorrow Night.css
diff --git a/assets/prism/css/prism-Twilight.css b/templates/assets/prism/css/prism-Twilight.css
similarity index 100%
rename from assets/prism/css/prism-Twilight.css
rename to templates/assets/prism/css/prism-Twilight.css
diff --git a/assets/prism/js/prism.js b/templates/assets/prism/js/prism.js
similarity index 100%
rename from assets/prism/js/prism.js
rename to templates/assets/prism/js/prism.js
diff --git a/assets/screenshot-desktop.jpg b/templates/assets/screenshot-desktop.jpg
similarity index 100%
rename from assets/screenshot-desktop.jpg
rename to templates/assets/screenshot-desktop.jpg
diff --git a/assets/screenshot-mobile.jpg b/templates/assets/screenshot-mobile.jpg
similarity index 100%
rename from assets/screenshot-mobile.jpg
rename to templates/assets/screenshot-mobile.jpg
diff --git a/templates/category.html b/templates/category.html
new file mode 100644
index 0000000..08edc59
--- /dev/null
+++ b/templates/category.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{layout :: html(title = |分类 - ${site.title}|,  content = ~{::content})}"
+>
+  <th:block th:fragment="content">
+    <header
+      class="site-header outer"
+      th:style="|background-image: url(${theme.config.general.cover})|"
+    >
+      <div class="inner">
+        <th:block th:replace="~{partials/site-nav}"></th:block>
+        <div class="site-header-content">
+          <h1 class="site-title">
+            分类：<th:blcok th:text="${category.spec.displayName}"></th:blcok>
+          </h1>
+          <h2 class="site-description">
+            <th:block
+              th:text="${category.spec.description}"
+              th:if="${category.spec.description != ''}"
+            >
+            </th:block>
+            <th:block th:text="|共有${category.postCount}文章|"></th:block>
+          </h2>
+        </div>
+      </div>
+    </header>
+    <main id="site-main" class="site-main outer">
+      <div class="inner">
+        <div class="post-feed">
+          <th:block th:each="post : ${posts.items}">
+            <th:block
+              th:replace="~{partials/post-card :: post-card(${post})}"
+            />
+          </th:block>
+        </div>
+      </div>
+    </main>
+    <th:block th:if="${posts.total gt 0}">
+      <script>
+        // maxPages is a global variable that is needed to determine
+        // if we need to load more pages for the infinitescroll, or if
+        // we reached the last page already.
+        var maxPages = parseInt(
+          document.querySelector(".total").getAttribute("data-total"),
+        );
+      </script>
+      <script th:src="@{/assets/built/infinitescroll.js}"></script>
+    </th:block>
+  </th:block>
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..a7494a0
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{layout :: html(title = ${site.title},  content = ~{::content})}"
+>
+  <th:block th:fragment="content">
+    <th:block th:if="${theme.config.general.cover !='' }">
+      <header
+        class="site-header outer"
+        th:style="|background-image: url(${theme.config.general.cover})|"
+      >
+        <div class="inner">
+          <div class="site-header-content">
+            <h1 class="site-title">
+              <th:block th:if="${site.logo !=''}">
+                <img
+                  class="site-logo"
+                  th:src="${site.logo}"
+                  th:alt="${site.title}"
+                />
+              </th:block>
+              <th:block th:if="${site.logo == ''}" th:text="${site.title}">
+              </th:block>
+            </h1>
+            <h2 class="site-description" th:text="${site.subtitle}"></h2>
+          </div>
+          <th:block th:replace="~{partials/site-nav}"></th:block>
+        </div>
+      </header>
+    </th:block>
+    <th:block th:if="${ theme.config.general.cover =='' }">
+      <header
+        class="site-header outer"
+        th:style="|background-image:url(@{/assets/images/blog-cover.jpg})|"
+      >
+        <div class="inner">
+          <div class="site-header-content">
+            <h1 class="site-title">
+              <th:block th:if="${site.logo !=''}">
+                <img
+                  class="site-logo"
+                  th:src="${site.logo}"
+                  th:alt="${site.title}"
+                />
+              </th:block>
+              <th:block th:if="${site.logo == ''}" th:text="${site.title}">
+              </th:block>
+            </h1>
+            <h2 class="site-description" th:text="${site.subtitle}"></h2>
+          </div>
+          <th:block th:replace="~{partials/site-nav}"></th:block>
+        </div>
+      </header>
+    </th:block>
+    <main id="site-main" class="site-main outer">
+      <div class="inner">
+        <div class="post-feed">
+          <th:block th:each="post : ${posts.items}">
+            <th:block
+              th:replace="~{partials/post-card :: post-card(${post})}"
+            />
+          </th:block>
+        </div>
+      </div>
+    </main>
+    <div
+      style="display: none"
+      class="total"
+      th:attr="data-total=${posts.totalPages}"
+    ></div>
+    <th:block th:if="${posts.total gt 0}">
+      <script>
+        // maxPages is a global variable that is needed to determine
+        // if we need to load more pages for the infinitescroll, or if
+        // we reached the last page already.
+        var maxPages = parseInt(
+          document.querySelector(".total").getAttribute("data-total"),
+        );
+      </script>
+      <script th:src="@{/assets/built/infinitescroll.js}"></script>
+    </th:block>
+  </th:block>
+</html>
diff --git a/templates/layout.html b/templates/layout.html
new file mode 100644
index 0000000..26a947b
--- /dev/null
+++ b/templates/layout.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en" th:fragment="html (title,content)">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <title th:text="${title}"></title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      th:href="@{/assets/built/screen.css}"
+    />
+
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+
+    <meta property="og:site_name" th:content="${site.title}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" th:content="${site.title}" />
+    <meta property="og:description" th:content="${site.subtitle}" />
+    <meta property="og:url" th:content="${site.url}" />
+
+    <meta
+      property="article:publisher"
+      content="https://www.facebook.com/ghost"
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" th:content="${site.title}" />
+    <meta name="twitter:description" th:content="${site.subtitle}" />
+    <meta name="twitter:url" th:content="${site.url}" />
+
+    <meta name="twitter:site" content="@tryghost" />
+    <meta property="og:image:width" content="2000" />
+    <meta property="og:image:height" content="666" />
+    <script th:src="@{/assets/js/jquery.min.js}"></script>
+    <script th:src="@{/assets/js/jquery.fitvids.js}"></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      th:href="|/themes/halo-theme-casper/assets/prism/css/prism-${theme.config.general.code_pretty}.css|"
+    />
+    <script
+      type="text/javascript"
+      th:src="@{/assets/prism/js/prism.js}"
+    ></script>
+  </head>
+
+  <body class="bg-slate-50 dark:bg-slate-900">
+    <section class="container mx-auto mt-6 grid grid-cols-4 gap-6">
+      <div class="z-0 col-span-4 sm:col-span-3">
+        <th:block th:replace="${content}" />
+      </div>
+    </section>
+    <th:block th:replace="~{partials/footer}"></th:block>
+  </body>
+</html>
diff --git a/templates/links.html b/templates/links.html
new file mode 100644
index 0000000..bf20c5e
--- /dev/null
+++ b/templates/links.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{layout :: html(title = |链接 - ${site.title}|,  content = ~{::content})}"
+>
+  <th:block th:fragment="content">
+    <header class="site-header outer">
+      <div class="inner">
+        <th:block th:replace="~{partials/site-nav}"></th:block>
+      </div>
+    </header>
+    <main id="site-main" class="site-main outer">
+      <div class="inner">
+        <article class="post-full post page">
+          <header class="post-full-header">
+            <h1 class="post-full-title">友情链接</h1>
+          </header>
+          <th:block th:if="${theme.config.general.links_cover}">
+            <figure
+              class="post-full-image"
+              th:style="|background-image: url(${theme.config.general.links_cover})|"
+            ></figure>
+          </th:block>
+
+          <section class="post-full-content">
+            <th:block th:each="group : ${groups}">
+              <div class="post-content">
+                <ul th:each="link : ${group.links}">
+                  <li>
+                    <a
+                      th:href="${link.spec.url}"
+                      target="_blank"
+                      th:text="${link.spec.displayName}"
+                    ></a>
+                    <th:block th:text="${link.spec.description}"></th:block>
+                  </li>
+                </ul>
+              </div>
+            </th:block>
+          </section>
+        </article>
+      </div>
+    </main>
+    <th:block th:if="${posts.total gt 0}">
+      <script>
+        // maxPages is a global variable that is needed to determine
+        // if we need to load more pages for the infinitescroll, or if
+        // we reached the last page already.
+        var maxPages = parseInt(
+          document.querySelector(".total").getAttribute("data-total"),
+        );
+      </script>
+      <script th:src="@{/assets/built/infinitescroll.js}"></script>
+    </th:block>
+  </th:block>
+</html>
diff --git a/templates/page.html b/templates/page.html
new file mode 100644
index 0000000..a9c7237
--- /dev/null
+++ b/templates/page.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{layout :: html(title = |${singlePage.spec.title} - ${site.title}|,  content = ~{::content})}"
+>
+  <th:block th:fragment="content">
+    <header class="site-header outer">
+      <div class="inner">
+        <th:block th:replace="~{partials/site-nav}"></th:block>
+      </div>
+    </header>
+    <main id="site-main" class="site-main outer">
+      <div class="inner">
+        <article
+          class="post-full post page <#if !post.thumbnail??>no-image</#if>"
+        >
+          <header class="post-full-header">
+            <h1 class="post-full-title" th:text="${singlePage.spec.title}"></h1>
+          </header>
+
+          <th:block th:if="${singlePage.spec.cover!=''}">
+            <figure
+              class="post-full-image"
+              th:style="|background-image: url(${singlePage.spec.cover})|"
+            ></figure>
+          </th:block>
+          <section class="post-full-content">
+            <div
+              class="post-content"
+              th:utext="${singlePage.content.content}"
+            ></div>
+          </section>
+
+          <section class="post-full-comments" style="margin-top: 20px">
+            <halo:comment
+              group="content.halo.run"
+              kind="Post"
+              th:attr="name=${singlePage.metadata.name}"
+              colorScheme="'light'"
+            />
+          </section>
+        </article>
+      </div>
+    </main>
+    <script>
+      $(function () {
+        var $postContent = $(".post-full-content");
+        $postContent.fitVids();
+      });
+    </script>
+  </th:block>
+</html>
diff --git a/templates/partials/byline-multiple.html b/templates/partials/byline-multiple.html
new file mode 100644
index 0000000..e00f433
--- /dev/null
+++ b/templates/partials/byline-multiple.html
@@ -0,0 +1,73 @@
+<section class="author-card" th:fragment="single(users)">
+  <th:block th:each="user : ${ users}">
+    <section class="author-card" th:fragment="single(user)">
+      <th:block th:if="${user.avatar != ''}">
+        <img
+          class="author-profile-image"
+          th:src="${user.avatar}"
+          th:alt="${user.displayName}"
+        />
+      </th:block>
+
+      <th:block th:if="${user.avatar == ''}">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+        >
+          <path
+            fill="currentColor"
+            d="M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5Zm0 8a3 3 0 1 1 3-3a3.003 3.003 0 0 1-3 3Z"
+          />
+          <path
+            fill="currentColor"
+            d="M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2Zm-6 24.377V25a3.003 3.003 0 0 1 3-3h6a3.003 3.003 0 0 1 3 3v1.377a11.899 11.899 0 0 1-12 0Zm13.992-1.451A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0Z"
+          />
+        </svg>
+      </th:block>
+      <section class="author-card-content">
+        <h4 class="author-card-name">
+          <a th:href="${site.url}" th:text="${user.displayName}"></a>
+        </h4>
+        <th:block th:if="${user.bio}">
+          <p th:text="${user.bio}"></p>
+        </th:block>
+        <th:block th:unless="${user.bio}">
+          <p>Read <a th:href="${site.url}">more posts</a> by this author.</p>
+        </th:block>
+      </section>
+    </section>
+    <div class="post-full-footer-right">
+      <a class="author-card-button" th:href="${site.url}">Read More</a>
+    </div>
+  </th:block>
+
+  <script>
+    // Adds delay to author card dropups to disappear. This gives enough
+    // time for the user to interact with the author card while they move
+    // the mouse from the avatar to the card. Also makes space for the
+    // interacted avatar.
+    $(document).ready(function () {
+      var hoverTimeout;
+
+      $(".author-list-item").hover(
+        function () {
+          var $this = $(this);
+
+          clearTimeout(hoverTimeout);
+
+          $(".author-card").removeClass("hovered");
+          $(this).children(".author-card").addClass("hovered");
+        },
+        function () {
+          var $this = $(this);
+
+          hoverTimeout = setTimeout(function () {
+            $this.children(".author-card").removeClass("hovered");
+          }, 800);
+        },
+      );
+    });
+  </script>
+</section>
diff --git a/templates/partials/byline-single.html b/templates/partials/byline-single.html
new file mode 100644
index 0000000..9b8666e
--- /dev/null
+++ b/templates/partials/byline-single.html
@@ -0,0 +1,41 @@
+<section class="author-card" th:fragment="single(user)">
+  <th:block th:if="${user.avatar != ''}">
+    <img
+      class="author-profile-image"
+      th:src="${user.avatar}"
+      th:alt="${user.displayName}"
+    />
+  </th:block>
+
+  <th:block th:if="${user.avatar == ''}">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+    >
+      <path
+        fill="currentColor"
+        d="M16 8a5 5 0 1 0 5 5a5 5 0 0 0-5-5Zm0 8a3 3 0 1 1 3-3a3.003 3.003 0 0 1-3 3Z"
+      />
+      <path
+        fill="currentColor"
+        d="M16 2a14 14 0 1 0 14 14A14.016 14.016 0 0 0 16 2Zm-6 24.377V25a3.003 3.003 0 0 1 3-3h6a3.003 3.003 0 0 1 3 3v1.377a11.899 11.899 0 0 1-12 0Zm13.992-1.451A5.002 5.002 0 0 0 19 20h-6a5.002 5.002 0 0 0-4.992 4.926a12 12 0 1 1 15.985 0Z"
+      />
+    </svg>
+  </th:block>
+  <section class="author-card-content">
+    <h4 class="author-card-name">
+      <a th:href="${site.url}" th:text="${user.displayName}"></a>
+    </h4>
+    <th:block th:if="${user.bio}">
+      <p th:text="${user.bio}"></p>
+    </th:block>
+    <th:block th:unless="${user.bio}">
+      <p>Read <a th:href="${site.url}">more posts</a> by this author.</p>
+    </th:block>
+  </section>
+</section>
+<div class="post-full-footer-right">
+  <a class="author-card-button" th:href="${site.url}">Read More</a>
+</div>
diff --git a/templates/partials/floating-header.html b/templates/partials/floating-header.html
new file mode 100644
index 0000000..2946be0
--- /dev/null
+++ b/templates/partials/floating-header.html
@@ -0,0 +1,54 @@
+<div class="floating-header" th:fragment="header(post)">
+  <div class="floating-header-logo">
+    <a th:href="@{site.url}">
+      <th:block th:if="${site.logo !=''}">
+        <img class="site-logo" th:src="${site.logo}" th:alt="${site.title}" />
+      </th:block>
+      <th:block th:if="${site.logo == ''}" th:text="${site.title}"> </th:block>
+    </a>
+  </div>
+  <span class="floating-header-divider">&mdash;</span>
+  <div class="floating-header-title" th:text="${site.title}"></div>
+  <div class="floating-header-share">
+    <div class="floating-header-share-label">Share this</div>
+    <a
+      class="floating-header-share-tw"
+      th:href="|https://twitter.com/share?text=${post.spec.title}&amp;url=${site.url}|"
+      onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 256 256"
+      >
+        <path
+          fill="currentColor"
+          d="M251.09 67.41A12 12 0 0 0 240 60h-28.18a52.73 52.73 0 0 0-43.67-24a50.85 50.85 0 0 0-36.6 14.85A51.87 51.87 0 0 0 116 88v.78c-36.83-11.57-66.38-40.9-66.7-41.23a12 12 0 0 0-20.47 7.38c-6.31 70.17 24.65 107.79 42.06 123.12C56.4 192.83 36 200.68 35.8 200.76a12 12 0 0 0-5.8 17.9C32 221.55 43.44 236 80 236c72.25 0 132.7-55.26 139.6-126.63l28.88-28.88a12 12 0 0 0 2.61-13.08Zm-51.57 28.11a11.93 11.93 0 0 0-3.49 7.72C192.14 164.23 141.18 212 80 212a90.78 90.78 0 0 1-12.49-.79C78 204.55 89.72 195.07 98 182.66a12 12 0 0 0-3.9-17c-.12-.07-12.33-7.49-23.43-24.42s-17.26-37-18.46-59.78C69.37 94.4 96 110.79 126 115.84A12 12 0 0 0 140 104V88a28 28 0 0 1 8.41-20.07A27.07 27.07 0 0 1 167.86 60a28.83 28.83 0 0 1 25.82 16.81a12 12 0 0 0 11 7.19H211Z"
+        />
+      </svg>
+    </a>
+    <a
+      class="floating-header-share-fb"
+      th:href="|https://www.facebook.com/sharer/sharer.php?u=${site.url}|"
+      onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"
+        />
+      </svg>
+    </a>
+  </div>
+  <progress id="reading-progress" class="progress" value="0">
+    <div class="progress-container">
+      <span class="progress-bar"></span>
+    </div>
+  </progress>
+</div>
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
new file mode 100644
index 0000000..9854772
--- /dev/null
+++ b/templates/partials/footer.html
@@ -0,0 +1,21 @@
+<footer class="site-footer outer">
+  <div class="site-footer-content inner">
+    <section class="copyright">
+      <a th:href="${site.url}" th:text="${site.title}"></a> ©
+      <th:block
+        th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}"
+      ></th:block>
+    </section>
+    <nav class="site-footer-nav">
+      <a href="http://localhost:8091">Latest Posts</a>
+      <a href="https://www.facebook.com/ghost" target="_blank" rel="noopener"
+        >Facebook</a
+      >
+      <a href="https://twitter.com/tryghost" target="_blank" rel="noopener"
+        >Twitter</a
+      >
+      <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
+      <a href="https://halo.run" target="_blank" rel="noopener">Halo</a>
+    </nav>
+  </div>
+</footer>
diff --git a/templates/partials/post-card.html b/templates/partials/post-card.html
new file mode 100644
index 0000000..d22ab61
--- /dev/null
+++ b/templates/partials/post-card.html
@@ -0,0 +1,37 @@
+<article class="post-card post" th:fragment="post-card(post)">
+  <th:block th:if="${post.spec.cover!=''}">
+    <a class="post-card-image-link" th:href="${post.status.permalink}">
+      <div
+        class="post-card-image"
+        th:style="|background-image: url(${post.spec.cover})|"
+      ></div>
+    </a>
+  </th:block>
+  <div class="post-card-content">
+    <a class="post-card-content-link" th:href="${post.status.permalink}">
+      <header class="post-card-header">
+        <th:block th:if="${not #lists.isEmpty(post.categories)}">
+          <span
+            class="post-card-tags"
+            th:text="${post.categories[0].spec.displayName}"
+          ></span>
+        </th:block>
+        <h2 class="post-card-title" th:text="${post.spec.title}"></h2>
+      </header>
+      <section class="post-card-excerpt">
+        <p th:utext="${post.status.excerpt}"></p>
+      </section>
+    </a>
+    <footer class="post-card-meta">
+      <ul class="author-list">
+        <li class="author-list-item">
+          <div class="author-name-tooltip" th:text="${post.spec.owner}"></div>
+        </li>
+      </ul>
+      <span
+        class="reading-time"
+        th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
+      ></span>
+    </footer>
+  </div>
+</article>
diff --git a/templates/partials/post-copyright.html b/templates/partials/post-copyright.html
new file mode 100644
index 0000000..f118904
--- /dev/null
+++ b/templates/partials/post-copyright.html
@@ -0,0 +1,30 @@
+<th:block th:fragment="post-copyright(post)">
+  <hr />
+  <blockquote style="font-size: 2rem">
+    <ul class="post-copyright" style="margin: 0">
+      <li class="post-copyright-author" style="margin: 0">
+        <strong>本文作者：</strong>
+        <th:block th:text="${post.spec.owner}"></th:block>
+      </li>
+      <li class="post-copyright-link" style="margin: 0">
+        <strong>本文链接：</strong>
+
+        <a
+          th:href="${post.status.permalink}"
+          th:text="${post.spec.title}"
+          th:title="${post.spec.title}"
+        ></a>
+      </li>
+      <li class="post-copyright-license" style="margin: 0">
+        <strong>版权声明：</strong>
+        本博客所有文章除特别声明外，均采用<a
+          href="https://creativecommons.org/licenses/by-nc-sa/3.0/"
+          rel="external nofollow"
+          target="_blank"
+          >CC BY-NC-SA 3.0</a
+        >
+        许可协议。转载请注明出处！
+      </li>
+    </ul>
+  </blockquote>
+</th:block>
diff --git a/templates/partials/site-nav.html b/templates/partials/site-nav.html
new file mode 100644
index 0000000..afb4f3f
--- /dev/null
+++ b/templates/partials/site-nav.html
@@ -0,0 +1,266 @@
+<nav class="site-nav">
+  <div class="site-nav-left">
+    <th:block th:if="${site.logo !=''}">
+      <a class="site-nav-logo" th:href="${site.url}"
+        ><img th:src="${site.logo}" th:alt="${site.title}"
+      /></a>
+    </th:block>
+    <th:block th:if="${site.logo == ''}">
+      <a
+        class="site-nav-logo"
+        th:href="${site.url}"
+        th:text="${site.title}"
+      ></a>
+    </th:block>
+    <div th:with="menu = ${menuFinder.getPrimary()}">
+      <ul class="nav" role="menu" th:with="menuItems = ${menu.menuItems}">
+        <li
+          th:each="menuItem : ${menuItems}"
+          th:class="|nav-${menuItem.spec.displayName}|"
+          role="menuitem"
+        >
+          <a
+            th:href="@{${menuItem.status.href}}"
+            th:target="${menuItem.spec.target?.value}"
+            th:text="${menuItem.status.displayName}"
+          ></a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="site-nav-right">
+    <div class="social-links">
+      <th:block th:if="${theme.config.sns.twitter}">
+        <a
+          class="social-link social-link-tw"
+          th:href="|https://twitter.com/${theme.config.sns.twitter}|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 256 256"
+          >
+            <path
+              fill="currentColor"
+              d="M251.09 67.41A12 12 0 0 0 240 60h-28.18a52.73 52.73 0 0 0-43.67-24a50.85 50.85 0 0 0-36.6 14.85A51.87 51.87 0 0 0 116 88v.78c-36.83-11.57-66.38-40.9-66.7-41.23a12 12 0 0 0-20.47 7.38c-6.31 70.17 24.65 107.79 42.06 123.12C56.4 192.83 36 200.68 35.8 200.76a12 12 0 0 0-5.8 17.9C32 221.55 43.44 236 80 236c72.25 0 132.7-55.26 139.6-126.63l28.88-28.88a12 12 0 0 0 2.61-13.08Zm-51.57 28.11a11.93 11.93 0 0 0-3.49 7.72C192.14 164.23 141.18 212 80 212a90.78 90.78 0 0 1-12.49-.79C78 204.55 89.72 195.07 98 182.66a12 12 0 0 0-3.9-17c-.12-.07-12.33-7.49-23.43-24.42s-17.26-37-18.46-59.78C69.37 94.4 96 110.79 126 115.84A12 12 0 0 0 140 104V88a28 28 0 0 1 8.41-20.07A27.07 27.07 0 0 1 167.86 60a28.83 28.83 0 0 1 25.82 16.81a12 12 0 0 0 11 7.19H211Z"
+            />
+          </svg>
+        </a>
+      </th:block>
+      <th:block th:if="${theme.config.sns.facebook}">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://www.facebook.com/${theme.config.sns.facebook}|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"
+            />
+          </svg>
+        </a>
+      </th:block>
+      <th:block th:if="${theme.config.sns.instagram }">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://www.instagram.com/${theme.config.sns.instagram }|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 256 256"
+          >
+            <path
+              fill="currentColor"
+              d="M128 80a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48Zm0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32Zm48-136H80a56.06 56.06 0 0 0-56 56v96a56.06 56.06 0 0 0 56 56h96a56.06 56.06 0 0 0 56-56V80a56.06 56.06 0 0 0-56-56Zm40 152a40 40 0 0 1-40 40H80a40 40 0 0 1-40-40V80a40 40 0 0 1 40-40h96a40 40 0 0 1 40 40ZM192 76a12 12 0 1 1-12-12a12 12 0 0 1 12 12Z"
+            />
+          </svg>
+        </a>
+      </th:block>
+      <th:block th:if="${theme.config.sns.dribbble}">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://dribbble.com/${theme.config.sns.dribbble }|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16.42 18.42A57.5 57.5 0 0 0 15 13.17c.5-.07 1-.11 1.58-.11h.02c.93 0 1.95.12 3.06.37a7.788 7.788 0 0 1-3.24 4.99M12 19.8c-1.74 0-3.34-.57-4.64-1.54c.28-.45.87-1.32 1.82-2.22c.96-.93 2.32-1.89 4.05-2.46c.59 1.67 1.13 3.57 1.54 5.71c-.86.33-1.77.51-2.77.51M4.2 12v-.11c.22.01.51.01.85.01h.01c1.56-.01 4.3-.14 7.08-1.01c.15.33.3.67.45 1.03c-1.86.62-3.32 1.61-4.4 2.58c-1.03.96-1.74 1.89-2.15 2.5a7.704 7.704 0 0 1-1.84-5m4.35-7c.55.65 1.63 2.06 2.79 4.25c-2.34.71-4.73.87-6.16.87h-.13c-.24 0-.45 0-.62-.01C5 7.87 6.5 6 8.55 5M12 4.2c1.84 0 3.53.64 4.86 1.71C15.84 7.14 14.5 8 13.03 8.65C12 6.67 11 5.25 10.34 4.38c.54-.11 1.09-.18 1.66-.18m6.13 2.98a7.823 7.823 0 0 1 1.66 4.45a15.32 15.32 0 0 0-3.19-.35h-.01c-.8 0-1.55.07-2.26.19c-.17-.42-.33-.82-.52-1.21c1.58-.69 3.09-1.68 4.32-3.08M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2z"
+              fill="currentColor"
+            />
+          </svg>
+        </a>
+      </th:block>
+
+      <th:block th:if="${theme.config.sns.weibo}">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://weibo.com/${theme.config.sns.weibo }|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M9.82 13.87c1.07 0 1.95.87 1.95 1.95a1.95 1.95 0 0 1-1.95 1.95c-1.08 0-1.95-.88-1.95-1.95c0-1.08.87-1.95 1.95-1.95M14.5 3.34l.68-.03c3.76 0 6.82 3.06 6.82 6.82l-.05.82l-1.19-.37l.02-.45c0-3.09-2.51-5.6-5.6-5.6l-.35.01l-.33-1.2m.82 2.89c2.06.07 3.73 1.77 3.76 3.83l-1.24-.38c-.19-1.12-1.06-2-2.17-2.18l-.35-1.27M2 15.41c-.03-.61.07-2.77 2.95-5.44c3.4-3.16 4.87-2.92 4.87-2.92s3.18-.3 1.24 3.41h.07c.47-.5 1.49-1.25 3.56-1.46c2.08-.21 2.08 1.5 1.81 2.7c1.88.94 3.06 2.33 3.06 3.88c0 2.82-3.93 5.11-8.78 5.11h-.28c-3.5 0-6.5-1.27-7.79-3.1c-.46-.62-.71-1.3-.71-2.01v-.17m7.82-3.49c-3.23 0-5.85 1.75-5.85 3.9s2.62 3.9 5.85 3.9c3.23 0 5.85-1.75 5.85-3.9s-2.62-3.9-5.85-3.9Z"
+            />
+          </svg>
+        </a>
+      </th:block>
+
+      <th:block th:if="${theme.config.sns.qq }">
+        <a
+          class="social-link social-link-fb"
+          th:href="|tencent://message/?uin=${theme.config.sns.qq}&Site=&Menu=yes|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="m17.536 12.514l-.696-1.796c0-.021.01-.375.01-.558C16.85 7.088 15.447 4 12 4c-3.446 0-4.848 3.088-4.848 6.16c0 .183.009.537.01.557l-.696 1.797c-.19.514-.38 1.05-.517 1.51c-.657 2.189-.444 3.095-.282 3.115c.348.043 1.354-1.648 1.354-1.648c0 .98.487 2.258 1.542 3.18c-.394.127-.878.32-1.188.557c-.28.214-.245.431-.194.52c.22.385 3.79.245 4.82.125c1.03.12 4.599.26 4.82-.126c.05-.088.085-.305-.194-.519c-.311-.237-.795-.43-1.19-.556c1.055-.923 1.542-2.202 1.542-3.181c0 0 1.007 1.691 1.355 1.648c.162-.02.378-.928-.283-3.116a26.91 26.91 0 0 0-.516-1.509Zm1.021 8.227c-.373.652-.833.892-1.438 1.057a4.91 4.91 0 0 1-.794.138c-.44.045-.986.065-1.613.064a33.217 33.217 0 0 1-2.71-.116c-.692.065-1.785.114-2.71.116a16.048 16.048 0 0 1-1.614-.064a4.917 4.917 0 0 1-.793-.138c-.605-.164-1.065-.405-1.44-1.059a2.274 2.274 0 0 1-.239-1.652c-.592-.132-1.001-.482-1.279-.911a2.43 2.43 0 0 1-.309-.71a4.027 4.027 0 0 1-.116-1.106c.013-.785.187-1.762.532-2.912c.14-.466.327-1.008.567-1.655l.554-1.43a15.362 15.362 0 0 1-.002-.203C5.153 5.605 7.589 2 12 2c4.413 0 6.848 3.605 6.848 8.16l-.001.203l.553 1.43l.01.026c.225.606.413 1.153.556 1.626c.348 1.15.522 2.128.535 2.916c.007.407-.03.776-.118 1.108c-.066.246-.161.48-.31.708c-.276.427-.684.776-1.277.91c.13.554.055 1.14-.24 1.654Z"
+            />
+          </svg>
+        </a>
+      </th:block>
+
+      <th:block th:if="${theme.config.sns.telegram}">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://t.me/${theme.config.sns.telegram}|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 256 256"
+          >
+            <path
+              fill="currentColor"
+              d="M236.88 26.19a9 9 0 0 0-9.16-1.57L25.06 103.93a14.22 14.22 0 0 0 2.43 27.21L80 141.45V200a15.92 15.92 0 0 0 10 14.83a15.91 15.91 0 0 0 17.51-3.73l25.32-26.26L173 220a15.88 15.88 0 0 0 10.51 4a16.3 16.3 0 0 0 5-.79a15.85 15.85 0 0 0 10.67-11.63L239.77 35a9 9 0 0 0-2.89-8.81Zm-61.14 36l-89.59 64.16l-49.6-9.73ZM96 200v-47.48l24.79 21.74Zm87.53 8l-82.68-72.5l119-85.29Z"
+            />
+          </svg>
+        </a>
+      </th:block>
+
+      <th:block th:if="${theme.config.sns.email }">
+        <a
+          class="social-link social-link-fb"
+          th:href="|mailto:${theme.config.sns.email }|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M4 20q-.825 0-1.413-.588T2 18V6q0-.825.588-1.413T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.588 1.413T20 20H4Zm8-7L4 8v10h16V8l-8 5Zm0-2l8-5H4l8 5ZM4 8V6v12V8Z"
+            />
+          </svg>
+        </a>
+      </th:block>
+
+      <th:block th:if="${theme.config.sns.github }">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://github.com/${theme.config.sns.github }|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
+            />
+          </svg>
+        </a>
+      </th:block>
+
+      <th:block th:if="${theme.config.sns.cnblog}">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://www.cnblogs.com/${theme.config.sns.cnblog}|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12.5 10H10c-.55 0-1-.45-1-1s.45-1 1-1h2.5c.55 0 1 .45 1 1s-.45 1-1 1m2.5 4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1h4c.55 0 1-.45 1-1m7-10v16c0 1.11-.89 2-2 2H4c-1.11 0-2-.89-2-2V4c0-1.11.89-2 2-2h16c1.11 0 2 .89 2 2m-4 8s0-1-1-1c-.95.03-1-1-1-1V8c0-1.66-1.34-3-3-3H9C7.34 5 6 6.34 6 8v7c0 1.66 1.34 3 3 3h6c1.66 0 3-1.34 3-3v-3z"
+              fill="currentColor"
+            />
+          </svg>
+        </a>
+      </th:block>
+
+      <th:block th:if="${theme.config.sns.stackoverflow }">
+        <a
+          class="social-link social-link-fb"
+          th:href="|https://stackoverflow.com/users/${theme.config.sns.stackoverflow}|"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1M8 16h8m-7.678-3.418l7.956.836m-7.491-4.25l7.826 1.664m-6.517-5.068l7.608 2.472"
+            />
+          </svg>
+        </a>
+      </th:block>
+    </div>
+  </div>
+</nav>
diff --git a/templates/post.html b/templates/post.html
new file mode 100644
index 0000000..74481f9
--- /dev/null
+++ b/templates/post.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{layout :: html(title = |${site.title} - ${post.spec.title}|,  content = ~{::content})}"
+>
+  <th:block th:fragment="content">
+    <header class="site-header outer">
+      <div class="inner">
+        <th:block th:replace="~{partials/site-nav}"></th:block>
+      </div>
+    </header>
+    <main id="site-main" class="site-main outer">
+      <div class="inner">
+        <article class="post-full post">
+          <header class="post-full-header">
+            <section class="post-full-meta">
+              <time
+                class="post-full-meta-date"
+                th:datetime="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
+                th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
+              ></time>
+              <th:block th:if=" ${not #lists.isEmpty(post.categories)}">
+                <span class="date-divider">/</span>
+                <a
+                  href="${post.categories[0].status.permalink}"
+                  th:text="${post.categories[0].spec.displayName}"
+                ></a>
+              </th:block>
+            </section>
+
+            <h1 class="post-full-title" th:text="${post.spec.title}"></h1>
+          </header>
+          <th:block th:if="${post.spec.cover!=''}">
+            <figure
+              class="post-full-image"
+              th:style="|background-image: url(${post.spec.cover})|"
+            ></figure>
+          </th:block>
+          <section class="post-full-content">
+            <div class="post-content">
+              <th:block th:utext="${post.content.content}"></th:block>
+
+              <th:blcok
+                th:replace="~{partials/post-copyright :: post-copyright(${post})}"
+              ></th:blcok>
+            </div>
+          </section>
+          <footer class="post-full-footer">
+            <th:block th:if="${#lists.size(post.contributors) gt 1}">
+              <th:block
+                th:replace="~{partials/byline-multiple :: single(${post.contributors})}"
+              >
+              </th:block>
+            </th:block>
+            <th:block th:unless="${#lists.size(post.contributors) gt 1}">
+              <th:block
+                th:replace="~{partials/byline-single :: single(${post.contributors[0]})}"
+              ></th:block>
+            </th:block>
+          </footer>
+
+          <section class="post-full-comments">
+            <halo:comment
+              group="content.halo.run"
+              kind="Post"
+              th:attr="name=${post.metadata.name}"
+              colorScheme="'light'"
+            />
+          </section>
+        </article>
+      </div>
+    </main>
+    <th:block th:replace="~{partials/floating-header :: header(${post})}">
+    </th:block>
+    <script>
+      // NOTE: Scroll performance is poor in Safari
+      // - this appears to be due to the events firing much more slowly in Safari.
+      //   Dropping the scroll event and using only a raf loop results in smoother
+      //   scrolling but continuous processing even when not scrolling
+      $(document).ready(function () {
+        // Start fitVids
+        var $postContent = $(".post-full-content");
+        $postContent.fitVids();
+        // End fitVids
+
+        var progressBar = document.querySelector("#reading-progress");
+        var header = document.querySelector(".floating-header");
+        var title = document.querySelector(".post-full-title");
+
+        var lastScrollY = window.scrollY;
+        var lastWindowHeight = window.innerHeight;
+        var lastDocumentHeight = $(document).height();
+        var ticking = false;
+
+        function onScroll() {
+          lastScrollY = window.scrollY;
+          requestTick();
+        }
+
+        function onResize() {
+          lastWindowHeight = window.innerHeight;
+          lastDocumentHeight = $(document).height();
+          requestTick();
+        }
+
+        function requestTick() {
+          if (!ticking) {
+            requestAnimationFrame(update);
+          }
+          ticking = true;
+        }
+
+        function update() {
+          var trigger = title.getBoundingClientRect().top + window.scrollY;
+          var triggerOffset = title.offsetHeight + 35;
+          var progressMax = lastDocumentHeight - lastWindowHeight;
+
+          // show/hide floating header
+          if (lastScrollY >= trigger + triggerOffset) {
+            header.classList.add("floating-active");
+          } else {
+            header.classList.remove("floating-active");
+          }
+
+          progressBar.setAttribute("max", progressMax);
+          progressBar.setAttribute("value", lastScrollY);
+
+          ticking = false;
+        }
+
+        window.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onResize, false);
+
+        update();
+      });
+    </script>
+  </th:block>
+</html>
diff --git a/templates/tag.html b/templates/tag.html
new file mode 100644
index 0000000..385cf8c
--- /dev/null
+++ b/templates/tag.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html
+  xmlns:th="https://www.thymeleaf.org"
+  th:replace="~{layout :: html(title = |标签 - ${site.title}|,  content = ~{::content})}"
+>
+  <th:block th:fragment="content">
+    <header
+      class="site-header outer"
+      th:style="|background-image: url(${theme.config.general.cover})|"
+    >
+      <div class="inner">
+        <th:block th:replace="~{partials/site-nav}"></th:block>
+        <div class="site-header-content">
+          <h1 class="site-title">
+            标签：<th:blcok th:text="${tag.spec.displayName}"></th:blcok>
+          </h1>
+          <h2 class="site-description">
+            <th:block th:text="|共有${tag.postCount}文章|"></th:block>
+          </h2>
+        </div>
+      </div>
+    </header>
+    <main id="site-main" class="site-main outer">
+      <div class="inner">
+        <div class="post-feed">
+          <th:block th:each="post : ${posts.items}">
+            <th:block
+              th:replace="~{partials/post-card :: post-card(${post})}"
+            />
+          </th:block>
+        </div>
+      </div>
+    </main>
+    <th:block th:if="${posts.total gt 0}">
+      <script>
+        // maxPages is a global variable that is needed to determine
+        // if we need to load more pages for the infinitescroll, or if
+        // we reached the last page already.
+        var maxPages = parseInt(
+          document.querySelector(".total").getAttribute("data-total"),
+        );
+      </script>
+      <script th:src="@{/assets/built/infinitescroll.js}"></script>
+    </th:block>
+  </th:block>
+</html>
diff --git a/theme.yaml b/theme.yaml
index d5087af..f97d051 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -1,11 +1,17 @@
-id: ghost_casper
-name: Casper
-author:
-  name: Ghost
-  website: https://ghost.org
-description:
-logo: https://avatars1.githubusercontent.com/u/2178663?s=200&v=4
-website: https://github.com/halo-dev/halo-theme-casper
-repo: https://github.com/halo-dev/halo-theme-casper
-version: 1.8
-require: 1.3.0
\ No newline at end of file
+apiVersion: theme.halo.run/v1alpha1
+kind: Theme
+spec:
+  displayName: Casper
+  author:
+    name: Ghost
+    website: https://ghost.org
+  description:
+  logo: https://avatars1.githubusercontent.com/u/2178663?s=200&v=4
+  website: https://github.com/halo-dev/halo-theme-casper
+  repo: https://github.com/halo-dev/halo-theme-casper
+  settingName: theme-casper-setting
+  configMapName: theme-casper-configMap
+  version: 2.0.0
+  require: ">=2.8.0"
+metadata:
+  name: halo-theme-casper