diff --git a/Bubble/css/base.css b/Bubble/css/base.css
index e177912..ca6be40 100644
--- a/Bubble/css/base.css
+++ b/Bubble/css/base.css
@@ -1 +1 @@
-html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%}body{margin:0;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;font-size:14px;background-color:#fff;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch}::-moz-selection{text-shadow:none;background:rgba(65,131,196,0.4)}::selection{text-shadow:none;background:rgba(66,133,244,0.4)}ul,ol{margin:0;padding:0}h1,h2,h3,h4,h5,h6,dl,dd,p{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}a{outline:0;text-decoration:none}a:hover{text-decoration:underline}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{max-width:100%;vertical-align:middle;border:0;height:auto;-ms-interpolation-mode:bicubic;overflow:hidden;font-size:12px}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;outline:none}button,input{line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="search"]{box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}blockquote{margin:0}.user__site:hover{text-decoration:none}.article__toc{overflow:auto}.article__toc::-webkit-scrollbar{display:none}.article__toc li{list-style-type:none}.article__toc li a{padding-left:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article__toc li a:hover{text-decoration:none}.article__toc li.toc__h3 a{padding-left:20px}.article__toc li.toc__h4 a{padding-left:30px}.article__toc li.toc__h5 a{padding-left:40px}.fn__flex{display:flex}.fn__flex-center{align-self:center}.fn__flex-inline{display:inline-flex;align-items:center}.fn__flex-1{flex:1;min-width:1px}.fn__flex-column{min-height:100%;display:flex;flex-direction:column}.fn__pointer{cursor:pointer}.fn__clear:before,.fn__clear:after{display:table;content:""}.fn__clear:after{clear:both}.fn__left{float:left}.fn__right{float:right}.fn__none{display:none}.fn__hidden{visibility:hidden}.fn__ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ft__13{font-size:13px}.ft__smaller{font-size:12px}.ft__center{text-align:center}.ft__nowrap{white-space:nowrap}#nprogress{pointer-events:none}#nprogress .bar{background:#d23f31;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0px;width:100px;height:100%;box-shadow:0 0 10px #d23f31, 0 0 5px #d23f31;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px, -4px);-ms-transform:rotate(3deg) translate(0px, -4px);transform:rotate(3deg) translate(0px, -4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#d23f31;border-left-color:#d23f31;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.vditor-tooltipped{position:relative;cursor:pointer}.vditor-tooltipped::after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font-size:11px;font-weight:normal;-webkit-font-smoothing:subpixel-antialiased;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,0.8);border-radius:3px;line-height:16px;opacity:0}.vditor-tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,0.8);pointer-events:none;content:"";border:5px solid transparent;opacity:0}.vditor-tooltipped--hover::before,.vditor-tooltipped--hover::after,.vditor-tooltipped:hover::before,.vditor-tooltipped:hover::after,.vditor-tooltipped:active::before,.vditor-tooltipped:active::after,.vditor-tooltipped:focus::before,.vditor-tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s}.vditor-tooltipped__s::after,.vditor-tooltipped__se::after,.vditor-tooltipped__sw::after{top:100%;right:50%;margin-top:5px}.vditor-tooltipped__s::before,.vditor-tooltipped__se::before,.vditor-tooltipped__sw::before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,0.8)}.vditor-tooltipped__se::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__sw::after{margin-right:-15px}.vditor-tooltipped__n::after,.vditor-tooltipped__ne::after,.vditor-tooltipped__nw::after{right:50%;bottom:100%;margin-bottom:5px}.vditor-tooltipped__n::before,.vditor-tooltipped__ne::before,.vditor-tooltipped__nw::before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,0.8)}.vditor-tooltipped__ne::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__nw::after{margin-right:-15px}.vditor-tooltipped__s::after,.vditor-tooltipped__n::after{transform:translateX(50%)}.vditor-tooltipped__w::after{right:100%;bottom:50%;margin-right:5px;transform:translateY(50%)}.vditor-tooltipped__w::before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,0.8)}.vditor-tooltipped__e::after{bottom:50%;left:100%;margin-left:5px;transform:translateY(50%)}.vditor-tooltipped__e::before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,0.8)}@keyframes scale-in{0%{opacity:0;transform:scale(0.5)}100%{opacity:1;transform:scale(1)}}.vditor-panel{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px;z-index:1;font-size:14px;display:none;user-select:none;max-width:210px;min-width:80px;animation-duration:.15s;animation-name:scale-in;animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5)}.vditor-panel h1,.vditor-panel h2,.vditor-panel h3,.vditor-panel h4,.vditor-panel h5,.vditor-panel h6{margin:0;cursor:pointer;padding:3px 10px;border-radius:3px;line-height:normal}.vditor-panel h1:hover,.vditor-panel h2:hover,.vditor-panel h3:hover,.vditor-panel h4:hover,.vditor-panel h5:hover,.vditor-panel h6:hover{background-color:#4285f4;color:#fff}.vditor-toolbar{background-color:#f6f8fa;border-bottom:1px solid #d1d5da;padding:0 5px;border-radius:3px 3px 0 0}.vditor-toolbar>div{padding:10px 5px;float:left;line-height:14px;height:36px;box-sizing:border-box}.vditor-toolbar svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}.vditor-toolbar .vditor-tooltipped{color:#586069}.vditor-toolbar .vditor-tooltipped:hover{color:#4285f4}.vditor-toolbar label{overflow:hidden;position:relative;height:14px;width:15px;display:block;cursor:pointer}.vditor-toolbar label svg{position:absolute;top:0;left:0}.vditor-toolbar label input{position:absolute;width:15px;height:15px;top:0;left:0;opacity:.001;overflow:hidden}.vditor-menu--current svg{color:#4285f4}.vditor-menu__divider{width:10px}.vditor-menu__br{width:100%;padding:0 !important;height:0 !important}.vditor-emojis{display:inline-block;overflow:auto}.vditor-emojis::-webkit-scrollbar{display:none}.vditor-emojis__tip{flex:1;color:#586069}.vditor-emojis__tail{margin-top:5px;font-size:12px;color:#586069;display:flex}.vditor-emojis__tail a{text-decoration:none;color:#586069}.vditor-emojis__tail a:hover{color:#4285f4}.vditor-emojis span{cursor:pointer;border-radius:3px;float:left;height:30px;width:30px;text-align:center;line-height:26px;padding:3px;box-sizing:border-box;font-size:16px;transition:all 0.15s ease-in-out}.vditor-emojis span:hover{transform:scale(1.2)}.vditor-emojis img{height:20px;width:20px;float:left;margin:3px 0 0 3px}.vditor{display:flex;flex-direction:column;border:1px solid #d1d5da;border-radius:3px;box-sizing:border-box}.vditor--fullscreen{position:fixed;top:0;width:100% !important;left:0;height:100vh !important;z-index:90;background-color:#fff}.vditor-content{display:flex;min-height:60px;flex:1;position:relative}.vditor-textarea{flex:1;border:0;resize:none;padding:10px;box-sizing:border-box;background-color:#fafbfc;outline:0 none;font-size:16px;line-height:22px;color:#24292e;border-radius:0 0 3px 3px}.vditor-textarea[disabled]{opacity:0.3;cursor:not-allowed}.vditor-textarea:focus{background-color:#fff}.vditor-preview{flex:1;background-color:#fff;overflow:auto;padding:10px;box-shadow:inset 1px 0 #d1d5da;box-sizing:border-box;border-radius:0 0 3px 0}.vditor-preview::-webkit-scrollbar{display:none}.vditor-counter{padding:0 3px;position:absolute;bottom:10px;right:20px;color:#24292e;background-color:rgba(255,255,255,0.6);border-radius:3px;font-size:12px;user-select:none}.vditor-counter--error{color:#d23f31;background-color:rgba(210,63,49,0.1)}.vditor-resize{padding:1px 0;border-radius:5px;cursor:row-resize;transition:all 0.15s ease-in-out;user-select:none;background-color:#f6f8fa}.vditor-resize:hover{background-color:#4285f4}.vditor-resize:hover svg{color:#fff}.vditor-resize svg{fill:currentColor;stroke-width:0;stroke:currentColor;width:13px;height:3px;display:block;margin:0 auto;color:#586069}.vditor-upload{opacity:0;position:absolute;width:100%;height:5px;left:0;top:-3px;border-radius:3px;overflow:hidden;transition:all 0.15s ease-in-out;color:#fff;font-size:12px;line-height:14px}.vditor-upload ul{margin:0}.vditor-upload--tip{height:auto;opacity:1 !important}.vditor-upload--tip .vditor-upload__close{display:block}.vditor-upload__close{display:none;position:absolute;right:5px;cursor:pointer;padding:5px;top:0}.vditor-upload__progress{height:100%;background-color:rgba(66,133,244,0.8);transition:all 0.15s ease-in-out;padding:5px;box-sizing:border-box}.vditor-hint{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px 0;z-index:1;line-height:20px;list-style:none;color:#24292e;font-size:12px;margin:0;max-width:200px;min-width:80px;display:none}.vditor-hint li{cursor:pointer;padding:3px 10px;border-bottom:1px solid #d1d5da;line-height:20px}.vditor-hint li:last-child{border-bottom:0}.vditor-hint--current,.vditor-hint li:hover{background-color:#4285f4;color:#fff}.vditor-hint__emoji{font-size:16px;float:left;margin-right:3px}.vditor-hint img{height:20px;width:20px;float:left;margin-right:3px}.vditor-reset{font-family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;word-wrap:break-word;overflow:auto;line-height:1.65;font-size:16px;word-break:break-word}.vditor-reset ul,.vditor-reset ol{padding-left:2em;margin-top:0;margin-bottom:16px}.vditor-reset li{margin-top:0.25em}.vditor-reset audio{max-width:100%}.vditor-reset video{max-height:90vh}.vditor-reset img.emoji{cursor:auto;max-width:20px;vertical-align:sub}.vditor-reset h1,.vditor-reset h2,.vditor-reset h3,.vditor-reset h4,.vditor-reset h5,.vditor-reset h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.vditor-reset h1{padding-bottom:0.3em;font-size:1.7em;border-bottom:1px solid #eee}.vditor-reset h2{padding-bottom:0.3em;font-size:1.5em;border-bottom:1px solid #eee}.vditor-reset h3{font-size:1.25em}.vditor-reset h4{font-size:1em}.vditor-reset h5{font-size:0.875em}.vditor-reset h6{font-size:0.85em}.vditor-reset hr{height:2px;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.vditor-reset p{margin-top:0;margin-bottom:16px}.vditor-reset blockquote{padding:0 1em;color:#777;border-left:0.25em solid #ddd;margin:0 0 16px 0}.vditor-reset blockquote p{margin:0}.vditor-reset ins>iframe{border:0}.vditor-reset iframe{border:1px solid #d1d5da;max-width:100%}.vditor-reset table{width:100%;border:1px solid #dedede;margin:15px auto;border-collapse:collapse;empty-cells:show}.vditor-reset thead{text-align:center}.vditor-reset td,.vditor-reset th{height:35px;border:1px solid #dedede;padding:0 10px}.vditor-reset th{font-weight:bold;text-align:center !important;background:rgba(158,188,226,0.2)}.vditor-reset tbody tr:nth-child(2n){background:rgba(158,188,226,0.12)}.vditor-reset tr:hover{background:#efefef}.vditor-reset code{padding:0.2em 0.4em;margin:0;font-size:85%;border-radius:3px;font-family:mononoki,Consolas,"Liberation Mono",Menlo,Courier,monospace;word-break:break-word;background-size:20px 20px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==)}.vditor-reset pre>code{padding:0.5em;border-radius:5px;display:block;overflow:auto}.vditor-reset pre:hover div.vditor-copy{display:block}.vditor-reset kbd{display:inline-block;padding:3px 5px;font:11px Consolas, "Liberation Mono", Menlo, Courier, monospace;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:solid 1px #d1d5da;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.vditor-reset summary{cursor:pointer}.vditor-reset summary:focus{outline:none}.vditor-reset svg{height:auto;width:auto}.vditor-reset p:last-child,.vditor-reset blockquote:last-child,.vditor-reset pre:last-child,.vditor-reset ul:last-child,.vditor-reset ol:last-child,.vditor-reset hr:last-child{margin-bottom:0}.vditor-reset .katex{position:relative}.vditor-reset .language-echarts{overflow:hidden;height:420px}.vditor-task{list-style:none;margin-left:-1.4em;display:flex;align-items:center}.vditor-task input{margin-right:5px}.vditor-copy{position:relative;display:none}.vditor-copy textarea{position:absolute;left:-100000px}.vditor-copy span{cursor:pointer;position:absolute;right:0.5em;top:0.5em;height:14px;width:14px;display:block;background-color:#f6f8fa;border-radius:3px;padding:3px}.vditor-copy svg{color:#586069;height:14px;width:14px;display:block;fill:currentColor}body{background-color:#f4f8fb}::selection{text-shadow:none;background-color:#cbeafb}a{color:#26a8ed}.ft__a{color:#738a94}.ft__a:hover{color:rgba(115,138,148,0.8)}.wrapper{max-width:1040px;margin:0 auto;padding:0 10px}.header{color:#fff;position:relative}.header--index{height:100vh}.header--index:before{content:"";height:100%;position:absolute;background:url("../images/header-bg.jpg") no-repeat center center;width:100%;top:0;background-size:cover}.header--article{background-color:#090a0b;height:64px}.header--article .header__title{display:none}.header--article .header__nav a{margin-bottom:0;line-height:64px}.header--other{height:407px}.header--other .header__title{display:none}.header--other:before{content:"";height:100%;position:absolute;background:url("../images/header-bg.jpg") no-repeat center center;width:100%;top:0;background-size:cover;filter:brightness(48%)}.header--other .header__nav a{margin-bottom:0;line-height:64px}.header__title{position:relative;text-align:center}.header__h1{font-size:30px;padding-top:140px;font-weight:normal}.header__h1 img{height:32px;width:32px;margin-right:10px}.header__h1 a{color:#fff}.header__h1 a:hover{text-decoration:none;color:rgba(255,255,255,0.8)}.header__h2{font-size:20px;font-weight:300;margin:5px 0 70px;color:rgba(255,255,255,0.8);line-height:24px}.header__nav{position:relative}.header__nav a{font-size:13px;float:left;line-height:24px;color:rgba(255,255,255,0.8);margin:0 20px 90px 0}.header__nav a:hover{color:#fff;text-decoration:none}.header__nav img{height:14px;width:14px;margin-right:5px}.header__nav svg{margin-top:5px}.footer{font-size:13px;padding:20px 0;background-color:#090a0b;color:#fff}.footer a{color:rgba(255,255,255,0.8)}.footer a:hover{text-decoration:none;color:#fff}.footer .fn__right{text-align:right}.articles{display:flex;flex-wrap:wrap;margin:0 -20px}.articles .item{flex:1 1 300px;overflow:hidden;margin:0 20px 40px;min-height:300px;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 .3s ease;display:flex;flex-direction:column;background-color:#fff}.articles .item--large{flex-direction:row;flex:1 1 100%}.articles .item--large .item__cover{flex:1;height:auto}.articles .item--large .item__main{padding:30px 40px;width:357px;flex:unset}.articles .item:hover{box-shadow:8px 28px 50px rgba(39,44,49,0.07),1px 6px 12px rgba(39,44,49,0.04);transform:translate3D(0, -1px, 0) scale(1.02)}.articles .item__cover{background-size:cover;background-position:center center;height:200px}.articles .item__main{padding:25px;box-sizing:border-box;display:flex;flex-direction:column;flex:1}.articles .item__tag{display:inline-block;margin-bottom:4px;color:#738a94;font-size:12px;line-height:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.articles .item__tag:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__title{margin-bottom:10px}.articles .item__title a{color:#15171a;font-size:18px;line-height:24px}.articles .item__title a:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__title sup{font-size:12px;font-weight:normal;color:rgba(115,138,148,0.8)}.articles .item__abstract{line-height:24px;color:#15171a;flex:1}.articles .item__abstract:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__meta{float:right;margin-top:18px;color:#738a94}.articles .item__meta:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__avatar{margin-top:10px;float:left}.articles .item__avatar img{height:32px;width:32px}.pagination{text-align:center;margin-top:-70px}.pagination__item{width:30px;height:30px;background:#15171a;border-radius:50%;display:inline-block;color:#fff;line-height:30px;font-size:12px;margin:0 5px 40px}.pagination__item:hover,.pagination__item--active{opacity:0.68;text-decoration:none}.pagination__item--omit{background-color:transparent;color:#15171a}.article{background-color:#fff}.article__bottom{background-color:#fff;position:relative}.article__bottom .fn__flex{flex-wrap:wrap;margin:0 -20px}.article__bottom .item{position:relative;flex:1 1 300px;margin:40px 20px 40px;box-shadow:8px 14px 38px rgba(39,44,49,0.06),1px 3px 8px rgba(39,44,49,0.03);border-radius:5px;padding:40px;overflow:hidden;text-align:center;box-sizing:border-box}.article__bottom .item:before{content:"";position:absolute;height:100%;top:0;left:0;width:100%;background:url(../images/header-bg.jpg) no-repeat center center;background-size:cover;filter:brightness(48%)}.article__bottom .item h3{color:#fff;position:relative;margin-bottom:20px}.article__bottom .item ul{padding-left:0;position:relative;list-style:none}.article__bottom .item a{display:block;border-bottom:1px solid rgba(115,138,148,0.8);padding:10px 0;color:#fff;margin:0 20px}.article__top{position:fixed;width:100%;top:-61px;background-color:rgba(255,255,255,0.9);border-bottom:1px solid rgba(115,138,148,0.1);height:60px;transition:all .3s ease;z-index:1}.article__top .title{float:left;margin-left:20px;line-height:60px;font-size:22px}.article__share{float:right;position:relative}.article__share .item{height:60px;width:60px;float:left;text-align:center;padding:20px 0;box-sizing:border-box;color:#fdc200;cursor:pointer;transition:all .3s ease}.article__share .item svg{height:20px;width:20px}.article__share .item[data-type="wechat"]{color:#3caf36}.article__share .item[data-type="wechat"]:hover{background-color:#3caf36}.article__share .item[data-type="twitter"]{color:#18a3fa}.article__share .item[data-type="twitter"]:hover{background-color:#18a3fa}.article__share .item[data-type="weibo"]{color:#f93}.article__share .item[data-type="weibo"]:hover{background-color:#f93}.article__share .item:hover{color:#fff;background-color:#fdc200}.article__share .item__qr{position:absolute;top:61px;left:60px}.article__progress{position:absolute;right:0;bottom:-1px;left:0;width:100%;height:2px;border:none;background:transparent;-webkit-appearance:none}.article__progress::-webkit-progress-value{background-color:#26a8ed}.article__progress::-webkit-progress-bar{background-color:transparent}.article .item__meta{padding-top:76px;font-size:14px;text-transform:uppercase;color:rgba(115,138,148,0.8)}.article .item__meta a{color:#738a94}.article .item__title{font-size:28px;margin-bottom:40px}.article .item__title sup{font-size:14px;font-weight:normal;color:rgba(115,138,148,0.8)}.article .item__cover{height:800px;background-size:cover;background-position:center center;max-width:1404px;margin:0 auto;border-radius:5px;filter:sepia(0.2) contrast(1.3) opacity(0.86)}.article .item__content{padding:70px 100px 0;box-sizing:border-box;background-color:#fff}.article .item__content--article{margin-top:-164px;position:relative}.article .item__tip{margin-bottom:40px;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 .3s ease;padding:20px 0;text-align:center;background:#f4f8fb;cursor:pointer;font-size:18px}.article .item__tip:hover{box-shadow:8px 28px 50px rgba(39,44,49,0.07),1px 6px 12px rgba(39,44,49,0.04);transform:translate3D(0, -1px, 0) scale(1.02)}.post__toc{display:none;position:fixed;top:84px;bottom:80px;overflow:auto;padding-left:3px}.post__toc::-webkit-scrollbar{display:none}.post__toc .article__toc{overflow:initial;border-left:1px solid rgba(115,138,148,0.28);margin:0;font-size:14px;line-height:24px}.post__toc .article__toc li.current a,.post__toc .article__toc a:hover{color:#26a8ed}.post__toc .article__toc a{display:block;margin-top:-24px;color:#738a94}.post__toc li:before{position:relative;top:-2px;left:-4px;display:inline-block;width:7px;height:7px;content:'';border-radius:50%}.post__toc li.current:before{background-color:#26a8ed}.comment{background-color:#f4f8fb;position:relative}.comment__wrapper{margin:0 auto;padding:0 100px 0.1px;box-sizing:border-box}.comment-body-ref{position:absolute;left:80px;width:76%}.comment__title{text-align:center;padding:40px 0;color:#738a94}.comment .item{margin-bottom:40px;border:1px solid rgba(255,255,255,0.8);border-radius:5px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.04);list-style:none;padding:20px}.comment .item__meta{color:rgba(115,138,148,0.8);font-size:12px}.comment .item__avatar{float:left;height:40px;width:40px;border-radius:20px;border:1px solid rgba(0,0,0,0.04);margin:0 20px 20px 0;background-size:cover;background-position:center center}.comment .item__name{color:rgba(115,138,148,0.8);float:left;line-height:40px}.comment .item__name a{color:#738a94}.comment .item__name a:hover{color:rgba(115,138,148,0.8)}.comment .item:hover .item__reply{display:block}.comment #comments{position:relative}.comment #comment{position:relative;margin-bottom:30px;padding:20px;border-radius:3px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.04);border:0;resize:none;cursor:pointer;width:100%;box-sizing:border-box}.other{position:relative}.other__title{margin:-220px 0 5px;color:#fff;font-size:28px;text-align:center;font-weight:400}.other__meta{color:#fff;font-size:14px;text-align:center}.other__meta--list{margin-bottom:154px}.other__content{background-color:#fff;padding:70px 100px;margin:77px auto 40px;box-shadow:8px 14px 38px rgba(39,44,49,0.06),1px 3px 8px rgba(39,44,49,0.03);border-radius:5px}.other__item{line-height:20px;margin:10px;white-space:nowrap;display:block}.other__item--archive{width:187px;display:inline-block}.other__item span,.other__item div{color:#738a94;font-size:12px;word-break:break-all;white-space:normal}@media (max-width: 768px){.header{padding:10px 0}.header__h1{padding-top:60px}.header__h2{margin-bottom:40px}.header__nav .fn__right{float:none}.header__nav a{margin:0 10px 0 0}.header--article{height:auto}.header--article .header__nav a{line-height:24px}.header--other{height:360px}.header--other .header__nav a{line-height:24px}.articles{position:initial;margin:10px -5px 0 -5px}.articles .item{margin:0 5px 10px}.articles .item--large{flex-direction:column;flex:1 1 300px}.articles .item--large .item__cover{height:200px}.articles .item--large .item__main{padding:25px;width:auto;flex:1}.pagination{margin-top:0;margin-bottom:5px}.pagination__item{margin-bottom:5px}.footer .fn__left,.footer .fn__right{float:none;text-align:center}.article__top{height:40px}.article__top .title{display:none}.article__top .toc{display:block;float:left;line-height:40px;padding:0 10px;cursor:pointer}.article__share .item{height:40px;width:40px;padding:10px 0}.article .item__meta{padding-top:40px}.article .item__cover{display:none}.article .item__content{padding:10px 10px 0}.article .item__content--article{margin-top:-20px}.article__bottom .fn__flex{margin:0 0 10px 0}.article__bottom .item{margin:10px 0 0 0}.comment__title{padding:10px 0}.comment__wrapper{padding:0 10px 0.1px}.comment #comment,.comment .item{margin-bottom:10px;padding:10px}.comment #comment__avatar,.comment .item__avatar{margin-bottom:10px}.other__title{margin-top:-280px}.other__content{padding:20px;margin:40px auto 10px}.other__meta--list{margin-bottom:40px}.post__toc{left:0;background-color:#fff;width:100%;top:41px;bottom:0}}
+html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%}body{margin:0;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;font-size:14px;background-color:#fff;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch}::-moz-selection{text-shadow:none;background:rgba(65,131,196,0.4)}::selection{text-shadow:none;background:rgba(66,133,244,0.4)}ul,ol{margin:0;padding:0}h1,h2,h3,h4,h5,h6,dl,dd,p{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}a{outline:0;text-decoration:none}a:hover{text-decoration:underline}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{max-width:100%;vertical-align:middle;border:0;height:auto;-ms-interpolation-mode:bicubic;overflow:hidden;font-size:12px}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;font-family:"Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;outline:none}button,input{line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="search"]{box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}blockquote{margin:0}.user__site:hover{text-decoration:none}.article__toc{overflow:auto}.article__toc::-webkit-scrollbar{display:none}.article__toc li{list-style-type:none}.article__toc li a{padding-left:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.article__toc li a:hover{text-decoration:none}.article__toc li.toc__h3 a{padding-left:20px}.article__toc li.toc__h4 a{padding-left:30px}.article__toc li.toc__h5 a{padding-left:40px}.fn__flex{display:flex}.fn__flex-center{align-self:center}.fn__flex-inline{display:inline-flex;align-items:center}.fn__flex-1{flex:1;min-width:1px}.fn__flex-column{min-height:100%;display:flex;flex-direction:column}.fn__pointer{cursor:pointer}.fn__clear:before,.fn__clear:after{display:table;content:""}.fn__clear:after{clear:both}.fn__left{float:left}.fn__right{float:right}.fn__none{display:none}.fn__hidden{visibility:hidden}.fn__ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ft__13{font-size:13px}.ft__smaller{font-size:12px}.ft__center{text-align:center}.ft__nowrap{white-space:nowrap}#nprogress{pointer-events:none}#nprogress .bar{background:#d23f31;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0px;width:100px;height:100%;box-shadow:0 0 10px #d23f31, 0 0 5px #d23f31;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px, -4px);-ms-transform:rotate(3deg) translate(0px, -4px);transform:rotate(3deg) translate(0px, -4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#d23f31;border-left-color:#d23f31;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.vditor-tooltipped{position:relative;cursor:pointer}.vditor-tooltipped::after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font-size:11px;font-weight:normal;-webkit-font-smoothing:subpixel-antialiased;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,0.8);border-radius:3px;line-height:16px;opacity:0}.vditor-tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,0.8);pointer-events:none;content:"";border:5px solid transparent;opacity:0}.vditor-tooltipped--hover::before,.vditor-tooltipped--hover::after,.vditor-tooltipped:hover::before,.vditor-tooltipped:hover::after,.vditor-tooltipped:active::before,.vditor-tooltipped:active::after,.vditor-tooltipped:focus::before,.vditor-tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:0.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:0.4s}.vditor-tooltipped__s::after,.vditor-tooltipped__se::after,.vditor-tooltipped__sw::after{top:100%;right:50%;margin-top:5px}.vditor-tooltipped__s::before,.vditor-tooltipped__se::before,.vditor-tooltipped__sw::before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,0.8)}.vditor-tooltipped__se::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__sw::after{margin-right:-15px}.vditor-tooltipped__n::after,.vditor-tooltipped__ne::after,.vditor-tooltipped__nw::after{right:50%;bottom:100%;margin-bottom:5px}.vditor-tooltipped__n::before,.vditor-tooltipped__ne::before,.vditor-tooltipped__nw::before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,0.8)}.vditor-tooltipped__ne::after{right:auto;left:50%;margin-left:-15px}.vditor-tooltipped__nw::after{margin-right:-15px}.vditor-tooltipped__s::after,.vditor-tooltipped__n::after{transform:translateX(50%)}.vditor-tooltipped__w::after{right:100%;bottom:50%;margin-right:5px;transform:translateY(50%)}.vditor-tooltipped__w::before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,0.8)}.vditor-tooltipped__e::after{bottom:50%;left:100%;margin-left:5px;transform:translateY(50%)}.vditor-tooltipped__e::before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,0.8)}@keyframes scale-in{0%{opacity:0;transform:scale(0.5)}100%{opacity:1;transform:scale(1)}}.vditor-panel{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px;z-index:1;font-size:14px;display:none;user-select:none;max-width:210px;min-width:80px;animation-duration:.15s;animation-name:scale-in;animation-timing-function:cubic-bezier(0.2, 0, 0.13, 1.5)}.vditor-panel h1,.vditor-panel h2,.vditor-panel h3,.vditor-panel h4,.vditor-panel h5,.vditor-panel h6{margin:0;cursor:pointer;padding:3px 10px;border-radius:3px;line-height:normal}.vditor-panel h1:hover,.vditor-panel h2:hover,.vditor-panel h3:hover,.vditor-panel h4:hover,.vditor-panel h5:hover,.vditor-panel h6:hover{background-color:#4285f4;color:#fff}.vditor-toolbar{background-color:#f6f8fa;border-bottom:1px solid #d1d5da;padding:0 5px;border-radius:3px 3px 0 0}.vditor-toolbar>div{padding:10px 5px;float:left;line-height:14px;height:36px;box-sizing:border-box}.vditor-toolbar svg{fill:currentColor;display:inline-block;stroke-width:0;stroke:currentColor;width:14px;height:14px}.vditor-toolbar .vditor-tooltipped{color:#586069}.vditor-toolbar .vditor-tooltipped:hover{color:#4285f4}.vditor-toolbar label{overflow:hidden;position:relative;height:14px;width:15px;display:block;cursor:pointer}.vditor-toolbar label svg{position:absolute;top:0;left:0}.vditor-toolbar label input{position:absolute;width:15px;height:15px;top:0;left:0;opacity:.001;overflow:hidden}.vditor-menu--current svg{color:#4285f4}.vditor-menu__divider{width:10px}.vditor-menu__br{width:100%;padding:0 !important;height:0 !important}.vditor-emojis{display:inline-block;overflow:auto}.vditor-emojis::-webkit-scrollbar{display:none}.vditor-emojis__tip{flex:1;color:#586069}.vditor-emojis__tail{margin-top:5px;font-size:12px;color:#586069;display:flex}.vditor-emojis__tail a{text-decoration:none;color:#586069}.vditor-emojis__tail a:hover{color:#4285f4}.vditor-emojis span{cursor:pointer;border-radius:3px;float:left;height:30px;width:30px;text-align:center;line-height:26px;padding:3px;box-sizing:border-box;font-size:16px;transition:all 0.15s ease-in-out}.vditor-emojis span:hover{transform:scale(1.2)}.vditor-emojis img{height:20px;width:20px;float:left;margin:3px 0 0 3px}.vditor{display:flex;flex-direction:column;border:1px solid #d1d5da;border-radius:3px;box-sizing:border-box}.vditor--fullscreen{position:fixed;top:0;width:100% !important;left:0;height:100vh !important;z-index:90;background-color:#fff}.vditor-content{display:flex;min-height:60px;flex:1;position:relative}.vditor-textarea{flex:1;border:0;resize:none;padding:10px;box-sizing:border-box;background-color:#fafbfc;outline:0 none;font-size:16px;line-height:22px;color:#24292e;border-radius:0 0 3px 3px}.vditor-textarea[disabled]{opacity:0.3;cursor:not-allowed}.vditor-textarea:focus{background-color:#fff}.vditor-preview{flex:1;background-color:#fff;overflow:auto;padding:10px;box-shadow:inset 1px 0 #d1d5da;box-sizing:border-box;border-radius:0 0 3px 0}.vditor-preview::-webkit-scrollbar{display:none}.vditor-counter{padding:0 3px;position:absolute;bottom:10px;right:20px;color:#24292e;background-color:rgba(255,255,255,0.6);border-radius:3px;font-size:12px;user-select:none}.vditor-counter--error{color:#d23f31;background-color:rgba(210,63,49,0.1)}.vditor-resize{padding:1px 0;border-radius:5px;cursor:row-resize;transition:all 0.15s ease-in-out;user-select:none;background-color:#f6f8fa}.vditor-resize:hover{background-color:#4285f4}.vditor-resize:hover svg{color:#fff}.vditor-resize svg{fill:currentColor;stroke-width:0;stroke:currentColor;width:13px;height:3px;display:block;margin:0 auto;color:#586069}.vditor-upload{opacity:0;position:absolute;width:100%;height:5px;left:0;top:-3px;border-radius:3px;overflow:hidden;transition:all 0.15s ease-in-out;color:#fff;font-size:12px;line-height:14px}.vditor-upload ul{margin:0}.vditor-upload--tip{height:auto;opacity:1 !important}.vditor-upload--tip .vditor-upload__close{display:block}.vditor-upload__close{display:none;position:absolute;right:5px;cursor:pointer;padding:5px;top:0}.vditor-upload__progress{height:100%;background-color:rgba(66,133,244,0.8);transition:all 0.15s ease-in-out;padding:5px;box-sizing:border-box}.vditor-hint{background-color:#fff;position:absolute;box-shadow:0 1px 2px rgba(0,0,0,0.2);border-radius:3px;padding:5px 0;z-index:1;line-height:20px;list-style:none;color:#24292e;font-size:12px;margin:0;max-width:200px;min-width:80px;display:none}.vditor-hint li{cursor:pointer;padding:3px 10px;border-bottom:1px solid #d1d5da;line-height:20px}.vditor-hint li:last-child{border-bottom:0}.vditor-hint--current,.vditor-hint li:hover{background-color:#4285f4;color:#fff}.vditor-hint__emoji{font-size:16px;float:left;margin-right:3px}.vditor-hint img{height:20px;width:20px;float:left;margin-right:3px}.vditor-reset{font-family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;word-wrap:break-word;overflow:auto;line-height:1.65;font-size:16px;word-break:break-word}.vditor-reset ul,.vditor-reset ol{padding-left:2em;margin-top:0;margin-bottom:16px}.vditor-reset li{margin-top:0.25em}.vditor-reset audio{max-width:100%}.vditor-reset video{max-height:90vh}.vditor-reset img.emoji{cursor:auto;max-width:20px;vertical-align:sub}.vditor-reset h1,.vditor-reset h2,.vditor-reset h3,.vditor-reset h4,.vditor-reset h5,.vditor-reset h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.vditor-reset h1{padding-bottom:0.3em;font-size:1.7em;border-bottom:1px solid #eee}.vditor-reset h2{padding-bottom:0.3em;font-size:1.5em;border-bottom:1px solid #eee}.vditor-reset h3{font-size:1.25em}.vditor-reset h4{font-size:1em}.vditor-reset h5{font-size:0.875em}.vditor-reset h6{font-size:0.85em}.vditor-reset hr{height:2px;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.vditor-reset p{margin-top:0;margin-bottom:16px}.vditor-reset blockquote{padding:0 1em;color:#777;border-left:0.25em solid #ddd;margin:0 0 16px 0}.vditor-reset blockquote p{margin:0}.vditor-reset ins>iframe{border:0}.vditor-reset iframe{border:1px solid #d1d5da;max-width:100%}.vditor-reset table{width:100%;border:1px solid #dedede;margin:15px auto;border-collapse:collapse;empty-cells:show}.vditor-reset thead{text-align:center}.vditor-reset td,.vditor-reset th{height:35px;border:1px solid #dedede;padding:0 10px}.vditor-reset th{font-weight:bold;text-align:center !important;background:rgba(158,188,226,0.2)}.vditor-reset tbody tr:nth-child(2n){background:rgba(158,188,226,0.12)}.vditor-reset tr:hover{background:#efefef}.vditor-reset code{padding:0.2em 0.4em;margin:0;font-size:85%;border-radius:3px;font-family:mononoki,Consolas,"Liberation Mono",Menlo,Courier,monospace;word-break:break-word;background-size:20px 20px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==)}.vditor-reset pre>code{padding:0.5em;border-radius:5px;display:block;overflow:auto}.vditor-reset pre:hover div.vditor-copy{display:block}.vditor-reset kbd{display:inline-block;padding:3px 5px;font:11px Consolas, "Liberation Mono", Menlo, Courier, monospace;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:solid 1px #d1d5da;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}.vditor-reset summary{cursor:pointer}.vditor-reset summary:focus{outline:none}.vditor-reset svg{height:auto;width:auto}.vditor-reset p:last-child,.vditor-reset blockquote:last-child,.vditor-reset pre:last-child,.vditor-reset ul:last-child,.vditor-reset ol:last-child,.vditor-reset hr:last-child{margin-bottom:0}.vditor-reset .katex{position:relative}.vditor-reset .language-echarts{overflow:hidden;height:420px}.vditor-task{list-style:none;margin-left:-1.4em;display:flex;align-items:center}.vditor-task input{margin-right:5px}.vditor-copy{position:relative;display:none}.vditor-copy textarea{position:absolute;left:-100000px}.vditor-copy span{cursor:pointer;position:absolute;right:0.5em;top:0.5em;height:14px;width:14px;display:block;background-color:#f6f8fa;border-radius:3px;padding:3px}.vditor-copy svg{color:#586069;height:14px;width:14px;display:block;fill:currentColor}body{background-color:#f4f8fb}::selection{text-shadow:none;background-color:#cbeafb}a{color:#77b6ff}.ft__a{color:#738a94}.ft__a:hover{color:rgba(115,138,148,0.8)}.fn__progress{position:fixed;right:0;top:0;left:0;width:100%;height:2px;border:none;background:transparent;-webkit-appearance:none;z-index:1}.fn__progress::-webkit-progress-value{background-color:#77b6ff;transition:width 0.2s ease 0s, opacity 0.6s ease 0s}.fn__progress::-webkit-progress-bar{background-color:transparent}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}60%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}.wrapper{max-width:1040px;margin:0 auto;padding:0 10px}.header{position:relative}.header #canvas{position:absolute}.header--index{height:100vh}.header--index:before{content:"";height:100%;position:absolute;background:url("../images/header-bg.jpg") no-repeat center center;width:100%;top:0;background-size:cover}.header__title{position:relative;align-items:center;height:100%;display:flex;justify-content:center;flex-direction:column}.header__h1{letter-spacing:-1px;font-weight:700;font-size:50px;text-shadow:0 3px 6px rgba(0,0,0,0.3);animation:fade-in-down 1s both;animation-delay:.5s}.header__h1 a{color:#fff}.header__h1 a:hover{text-decoration:none;color:rgba(255,255,255,0.8)}.header__desc{margin-top:10px;color:rgba(255,255,255,0.8);line-height:24px;text-shadow:0 3px 6px rgba(0,0,0,0.3);animation:fade-in-down .9s both;animation-delay:.3s}.header__desc--title{font-size:20px;font-weight:400}.header__down{animation:bounce 4s 2s infinite;color:rgba(255,255,255,0.8);height:34px;width:34px;position:absolute;bottom:10px;cursor:pointer}.footer{font-size:13px;padding:20px 0;background-color:#090a0b;color:#fff}.footer a{color:rgba(255,255,255,0.8)}.footer a:hover{text-decoration:none;color:#fff}.footer .fn__right{text-align:right}.articles{display:flex;flex-wrap:wrap;margin:0 -20px}.articles .item{flex:1 1 300px;overflow:hidden;margin:0 20px 40px;min-height:300px;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 .3s ease;display:flex;flex-direction:column;background-color:#fff}.articles .item--large{flex-direction:row;flex:1 1 100%}.articles .item--large .item__cover{flex:1;height:auto}.articles .item--large .item__main{padding:30px 40px;width:357px;flex:unset}.articles .item:hover{box-shadow:8px 28px 50px rgba(39,44,49,0.07),1px 6px 12px rgba(39,44,49,0.04);transform:translate3D(0, -1px, 0) scale(1.02)}.articles .item__cover{background-size:cover;background-position:center center;height:200px}.articles .item__main{padding:25px;box-sizing:border-box;display:flex;flex-direction:column;flex:1}.articles .item__tag{display:inline-block;margin-bottom:4px;color:#738a94;font-size:12px;line-height:14px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.articles .item__tag:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__title{margin-bottom:10px}.articles .item__title a{color:#15171a;font-size:18px;line-height:24px}.articles .item__title a:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__title sup{font-size:12px;font-weight:normal;color:rgba(115,138,148,0.8)}.articles .item__abstract{line-height:24px;color:#15171a;flex:1}.articles .item__abstract:hover{text-decoration:none;color:rgba(21,23,26,0.8)}.articles .item__meta{float:right;margin-top:18px;color:#738a94}.articles .item__meta:hover{text-decoration:none;color:rgba(115,138,148,0.8)}.articles .item__avatar{margin-top:10px;float:left}.articles .item__avatar img{height:32px;width:32px}.pagination{text-align:center;margin-top:-70px}.pagination__item{width:30px;height:30px;background:#15171a;border-radius:50%;display:inline-block;color:#fff;line-height:30px;font-size:12px;margin:0 5px 40px}.pagination__item:hover,.pagination__item--active{opacity:0.68;text-decoration:none}.pagination__item--omit{background-color:transparent;color:#15171a}.article{background-color:#fff}.article__bottom{background-color:#fff;position:relative}.article__bottom .fn__flex{flex-wrap:wrap;margin:0 -20px}.article__bottom .item{position:relative;flex:1 1 300px;margin:40px 20px 40px;box-shadow:8px 14px 38px rgba(39,44,49,0.06),1px 3px 8px rgba(39,44,49,0.03);border-radius:5px;padding:40px;overflow:hidden;text-align:center;box-sizing:border-box}.article__bottom .item:before{content:"";position:absolute;height:100%;top:0;left:0;width:100%;background:url(../images/header-bg.jpg) no-repeat center center;background-size:cover;filter:brightness(48%)}.article__bottom .item h3{color:#fff;position:relative;margin-bottom:20px}.article__bottom .item ul{padding-left:0;position:relative;list-style:none}.article__bottom .item a{display:block;border-bottom:1px solid rgba(115,138,148,0.8);padding:10px 0;color:#fff;margin:0 20px}.article__top{position:fixed;width:100%;top:-61px;background-color:rgba(255,255,255,0.9);border-bottom:1px solid rgba(115,138,148,0.1);height:60px;transition:all .3s ease;z-index:1}.article__top .title{float:left;margin-left:20px;line-height:60px;font-size:22px}.article__share{float:right;position:relative}.article__share .item{height:60px;width:60px;float:left;text-align:center;padding:20px 0;box-sizing:border-box;color:#fdc200;cursor:pointer;transition:all .3s ease}.article__share .item svg{height:20px;width:20px}.article__share .item[data-type="wechat"]{color:#3caf36}.article__share .item[data-type="wechat"]:hover{background-color:#3caf36}.article__share .item[data-type="twitter"]{color:#18a3fa}.article__share .item[data-type="twitter"]:hover{background-color:#18a3fa}.article__share .item[data-type="weibo"]{color:#f93}.article__share .item[data-type="weibo"]:hover{background-color:#f93}.article__share .item:hover{color:#fff;background-color:#fdc200}.article__share .item__qr{position:absolute;top:61px;left:60px}.article .item__meta{padding-top:76px;font-size:14px;text-transform:uppercase;color:rgba(115,138,148,0.8)}.article .item__meta a{color:#738a94}.article .item__title{font-size:28px;margin-bottom:40px}.article .item__title sup{font-size:14px;font-weight:normal;color:rgba(115,138,148,0.8)}.article .item__cover{height:800px;background-size:cover;background-position:center center;max-width:1404px;margin:0 auto;border-radius:5px;filter:sepia(0.2) contrast(1.3) opacity(0.86)}.article .item__content{padding:70px 100px 0;box-sizing:border-box;background-color:#fff}.article .item__content--article{margin-top:-164px;position:relative}.article .item__tip{margin-bottom:40px;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 .3s ease;padding:20px 0;text-align:center;background:#f4f8fb;cursor:pointer;font-size:18px}.article .item__tip:hover{box-shadow:8px 28px 50px rgba(39,44,49,0.07),1px 6px 12px rgba(39,44,49,0.04);transform:translate3D(0, -1px, 0) scale(1.02)}.post__toc{display:none;position:fixed;top:84px;bottom:80px;overflow:auto;padding-left:3px}.post__toc::-webkit-scrollbar{display:none}.post__toc .article__toc{overflow:initial;border-left:1px solid rgba(115,138,148,0.28);margin:0;font-size:14px;line-height:24px}.post__toc .article__toc li.current a,.post__toc .article__toc a:hover{color:#77b6ff}.post__toc .article__toc a{display:block;margin-top:-24px;color:#738a94}.post__toc li:before{position:relative;top:-2px;left:-4px;display:inline-block;width:7px;height:7px;content:'';border-radius:50%}.post__toc li.current:before{background-color:#77b6ff}.comment{background-color:#f4f8fb;position:relative}.comment__wrapper{margin:0 auto;padding:0 100px 0.1px;box-sizing:border-box}.comment-body-ref{position:absolute;left:80px;width:76%}.comment__title{text-align:center;padding:40px 0;color:#738a94}.comment .item{margin-bottom:40px;border:1px solid rgba(255,255,255,0.8);border-radius:5px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.04);list-style:none;padding:20px}.comment .item__meta{color:rgba(115,138,148,0.8);font-size:12px}.comment .item__avatar{float:left;height:40px;width:40px;border-radius:20px;border:1px solid rgba(0,0,0,0.04);margin:0 20px 20px 0;background-size:cover;background-position:center center}.comment .item__name{color:rgba(115,138,148,0.8);float:left;line-height:40px}.comment .item__name a{color:#738a94}.comment .item__name a:hover{color:rgba(115,138,148,0.8)}.comment .item:hover .item__reply{display:block}.comment #comments{position:relative}.comment #comment{position:relative;margin-bottom:30px;padding:20px;border-radius:3px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.04);border:0;resize:none;cursor:pointer;width:100%;box-sizing:border-box}.other{position:relative}.other__title{margin:-220px 0 5px;color:#fff;font-size:28px;text-align:center;font-weight:400}.other__meta{color:#fff;font-size:14px;text-align:center}.other__meta--list{margin-bottom:154px}.other__content{background-color:#fff;padding:70px 100px;margin:77px auto 40px;box-shadow:8px 14px 38px rgba(39,44,49,0.06),1px 3px 8px rgba(39,44,49,0.03);border-radius:5px}.other__item{line-height:20px;margin:10px;white-space:nowrap;display:block}.other__item--archive{width:187px;display:inline-block}.other__item span,.other__item div{color:#738a94;font-size:12px;word-break:break-all;white-space:normal}@media (max-width: 768px){.header{padding:10px 0}.header__h1{padding-top:60px}.header__h2{margin-bottom:40px}.header__nav .fn__right{float:none}.header__nav a{margin:0 10px 0 0}.header--article{height:auto}.header--article .header__nav a{line-height:24px}.header--other{height:360px}.header--other .header__nav a{line-height:24px}.articles{position:initial;margin:10px -5px 0 -5px}.articles .item{margin:0 5px 10px}.articles .item--large{flex-direction:column;flex:1 1 300px}.articles .item--large .item__cover{height:200px}.articles .item--large .item__main{padding:25px;width:auto;flex:1}.pagination{margin-top:0;margin-bottom:5px}.pagination__item{margin-bottom:5px}.footer .fn__left,.footer .fn__right{float:none;text-align:center}.article__top{height:40px}.article__top .title{display:none}.article__top .toc{display:block;float:left;line-height:40px;padding:0 10px;cursor:pointer}.article__share .item{height:40px;width:40px;padding:10px 0}.article .item__meta{padding-top:40px}.article .item__cover{display:none}.article .item__content{padding:10px 10px 0}.article .item__content--article{margin-top:-20px}.article__bottom .fn__flex{margin:0 0 10px 0}.article__bottom .item{margin:10px 0 0 0}.comment__title{padding:10px 0}.comment__wrapper{padding:0 10px 0.1px}.comment #comment,.comment .item{margin-bottom:10px;padding:10px}.comment #comment__avatar,.comment .item__avatar{margin-bottom:10px}.other__title{margin-top:-280px}.other__content{padding:20px;margin:40px auto 10px}.other__meta--list{margin-bottom:40px}.post__toc{left:0;background-color:#fff;width:100%;top:41px;bottom:0}}
diff --git a/Bubble/css/base.scss b/Bubble/css/base.scss
index 8db65ab..02cf7fd 100644
--- a/Bubble/css/base.scss
+++ b/Bubble/css/base.scss
@@ -32,7 +32,7 @@ $fade-lighter: rgba(255, 255, 255, .8) !default;
$gray: #738a94 !default;
$black: #15171a !default;
$black-bg: #090a0b !default;
-$link: #26a8ed !default;
+$link: rgb(119, 182, 255) !default;
body {
background-color: #f4f8fb;
@@ -49,11 +49,63 @@ a {
.ft__a {
color: $gray;
+
&:hover {
color: rgba($gray, .8);
}
}
+.fn {
+ &__progress {
+ position: fixed;
+ right: 0;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ border: none;
+ background: transparent;
+ -webkit-appearance: none;
+ z-index: 1;
+
+ &::-webkit-progress-value {
+ background-color: $link;
+ transition: width 0.2s ease 0s, opacity 0.6s ease 0s;
+ }
+
+ &::-webkit-progress-bar {
+ background-color: transparent;
+ }
+ }
+}
+
+@keyframes fade-in-down {
+ 0% {
+ opacity: 0;
+ transform: translateY(-10px)
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0)
+ }
+}
+
+@keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
+ 40% {
+ -webkit-transform: translateY(-10px);
+ transform: translateY(-10px);
+ }
+ 60% {
+ -webkit-transform: translateY(-5px);
+ transform: translateY(-5px);
+ }
+}
+
.wrapper {
max-width: 1040px;
margin: 0 auto;
@@ -61,10 +113,15 @@ a {
}
.header {
- color: #fff;
position: relative;
+
+ #canvas {
+ position: absolute;
+ }
+
&--index {
height: 100vh;
+
&:before {
content: "";
height: 100%;
@@ -75,89 +132,113 @@ a {
background-size: cover;
}
}
- &--article {
- background-color: $black-bg;
- height: 64px;
- .header__title {
- display: none;
- }
- .header__nav a {
- margin-bottom: 0;
- line-height: 64px;
- }
- }
- &--other {
- height: 407px;
- .header__title {
- display: none;
- }
- &:before {
- content: "";
- height: 100%;
- position: absolute;
- background: url("../images/header-bg.jpg") no-repeat center center;
- width: 100%;
- top: 0;
- background-size: cover;
- filter: brightness(48%);
- }
- .header__nav a {
- margin-bottom: 0;
- line-height: 64px;
- }
- }
+
+ //&--article {
+ // background-color: $black-bg;
+ // height: 64px;
+ // .header__title {
+ // display: none;
+ // }
+ // .header__nav a {
+ // margin-bottom: 0;
+ // line-height: 64px;
+ // }
+ //}
+ //&--other {
+ // height: 407px;
+ // .header__title {
+ // display: none;
+ // }
+ // &:before {
+ // content: "";
+ // height: 100%;
+ // position: absolute;
+ // background: url("../images/header-bg.jpg") no-repeat center center;
+ // width: 100%;
+ // top: 0;
+ // background-size: cover;
+ // filter: brightness(48%);
+ // }
+ // .header__nav a {
+ // margin-bottom: 0;
+ // line-height: 64px;
+ // }
+ //}
&__title {
position: relative;
- text-align: center;
+ align-items: center;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
}
+
&__h1 {
- font-size: 30px;
- padding-top: 140px;
- font-weight: normal;
- img {
- height: 32px;
- width: 32px;
- margin-right: 10px;
- }
+ letter-spacing: -1px;
+ font-weight: 700;
+ font-size: 50px;
+ text-shadow: 0 3px 6px rgba(0, 0, 0, .3);
+ animation: fade-in-down 1s both;
+ animation-delay: .5s;
+
a {
color: #fff;
+
&:hover {
text-decoration: none;
color: $fade-lighter;
}
}
}
- &__h2 {
- font-size: 20px;
- font-weight: 300;
- margin: 5px 0 70px;
+
+ &__desc {
+ margin-top: 10px;
color: $fade-lighter;
line-height: 24px;
- }
- &__nav {
- position: relative;
- a {
- font-size: 13px;
- float: left;
- line-height: 24px;
- color: $fade-lighter;
- margin: 0 20px 90px 0;
- &:hover {
- color: #fff;
- text-decoration: none;
- }
- }
+ text-shadow: 0 3px 6px rgba(0, 0, 0, .3);
+ animation: fade-in-down .9s both;
+ animation-delay: .3s;
- img {
- height: 14px;
- width: 14px;
- margin-right: 5px;
- }
-
- svg {
- margin-top: 5px;
+ &--title {
+ font-size: 20px;
+ font-weight: 400;
}
}
+
+ &__down {
+ animation: bounce 4s 2s infinite;
+ color: $fade-lighter;
+ height: 34px;
+ width: 34px;
+ position: absolute;
+ bottom: 10px;
+ cursor: pointer;
+ }
+
+ //&__nav {
+ // position: relative;
+ // a {
+ // font-size: 13px;
+ // float: left;
+ // line-height: 24px;
+ // color: $fade-lighter;
+ // margin: 0 20px 90px 0;
+ // &:hover {
+ // color: #fff;
+ // text-decoration: none;
+ // }
+ // }
+ //
+ // img {
+ // height: 14px;
+ // width: 14px;
+ // margin-right: 5px;
+ // }
+ //
+ // svg {
+ // margin-top: 5px;
+ // }
+ //}
}
.footer {
@@ -165,8 +246,10 @@ a {
padding: 20px 0;
background-color: $black-bg;
color: #fff;
+
a {
color: $fade-lighter;
+
&:hover {
text-decoration: none;
color: #fff;
@@ -182,6 +265,7 @@ a {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
+
.item {
flex: 1 1 300px;
overflow: hidden;
@@ -193,6 +277,7 @@ a {
display: flex;
flex-direction: column;
background-color: #fff;
+
&--large {
flex-direction: row;
flex: 1 1 100%;
@@ -208,15 +293,18 @@ a {
flex: unset;
}
}
+
&:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02);
}
+
&__cover {
background-size: cover;
background-position: center center;
height: 200px;
}
+
&__main {
padding: 25px;
box-sizing: border-box;
@@ -224,6 +312,7 @@ a {
flex-direction: column;
flex: 1;
}
+
&__tag {
display: inline-block;
margin-bottom: 4px;
@@ -233,22 +322,27 @@ a {
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
+
&:hover {
text-decoration: none;
color: rgba($gray, 0.8);
}
}
+
&__title {
margin-bottom: 10px;
+
a {
color: $black;
font-size: 18px;
line-height: 24px;
+
&:hover {
text-decoration: none;
color: rgba($black, 0.8);
}
}
+
sup {
font-size: 12px;
font-weight: normal;
@@ -260,6 +354,7 @@ a {
line-height: 24px;
color: $black;
flex: 1;
+
&:hover {
text-decoration: none;
color: rgba($black, 0.8);
@@ -270,6 +365,7 @@ a {
float: right;
margin-top: 18px;
color: $gray;
+
&:hover {
text-decoration: none;
color: rgba($gray, 0.8);
@@ -279,6 +375,7 @@ a {
&__avatar {
margin-top: 10px;
float: left;
+
img {
height: 32px;
width: 32px;
@@ -302,11 +399,13 @@ a {
line-height: 30px;
font-size: 12px;
margin: 0 5px 40px;
+
&:hover,
&--active {
opacity: 0.68;
text-decoration: none;
}
+
&--omit {
background-color: transparent;
color: $black;
@@ -316,13 +415,16 @@ a {
.article {
background-color: #fff;
+
&__bottom {
background-color: #fff;
position: relative;
+
.fn__flex {
flex-wrap: wrap;
margin: 0 -20px;
}
+
.item {
position: relative;
flex: 1 1 300px;
@@ -333,6 +435,7 @@ a {
overflow: hidden;
text-align: center;
box-sizing: border-box;
+
&:before {
content: "";
position: absolute;
@@ -344,16 +447,19 @@ a {
background-size: cover;
filter: brightness(48%);
}
+
h3 {
color: #fff;
position: relative;
margin-bottom: 20px;
}
+
ul {
padding-left: 0;
position: relative;
list-style: none;
}
+
a {
display: block;
border-bottom: 1px solid rgba($gray, .8);
@@ -363,6 +469,7 @@ a {
}
}
}
+
&__top {
position: fixed;
width: 100%;
@@ -372,6 +479,7 @@ a {
height: 60px;
transition: all .3s ease;
z-index: 1;
+
.title {
float: left;
margin-left: 20px;
@@ -379,9 +487,11 @@ a {
font-size: 22px;
}
}
+
&__share {
float: right;
position: relative;
+
.item {
height: 60px;
width: 60px;
@@ -392,32 +502,41 @@ a {
color: #fdc200;
cursor: pointer;
transition: all .3s ease;
+
svg {
height: 20px;
width: 20px;
}
+
&[data-type="wechat"] {
color: #3caf36;
+
&:hover {
background-color: #3caf36;
}
}
+
&[data-type="twitter"] {
color: #18a3fa;
+
&:hover {
background-color: #18a3fa;
}
}
+
&[data-type="weibo"] {
color: #f93;
+
&:hover {
background-color: #f93;
}
}
+
&:hover {
color: #fff;
background-color: #fdc200;
}
+
&__qr {
position: absolute;
top: 61px;
@@ -425,42 +544,30 @@ a {
}
}
}
- &__progress {
- position: absolute;
- right: 0;
- bottom: -1px;
- left: 0;
- width: 100%;
- height: 2px;
- border: none;
- background: transparent;
- -webkit-appearance: none;
- &::-webkit-progress-value {
- background-color: $link;
- }
- &::-webkit-progress-bar {
- background-color: transparent;
- }
- }
+
.item {
&__meta {
padding-top: 76px;
font-size: 14px;
text-transform: uppercase;
color: rgba($gray, .8);
+
a {
color: $gray;
}
}
+
&__title {
font-size: 28px;
margin-bottom: 40px;
+
sup {
font-size: 14px;
font-weight: normal;
color: rgba($gray, .8);
}
}
+
&__cover {
height: 800px;
background-size: cover;
@@ -470,15 +577,18 @@ a {
border-radius: 5px;
filter: sepia(0.2) contrast(1.3) opacity(.86);
}
+
&__content {
padding: 70px 100px 0;
box-sizing: border-box;
background-color: #fff;
+
&--article {
margin-top: -164px;
position: relative;
}
}
+
&__tip {
margin-bottom: 40px;
border-radius: 5px;
@@ -489,6 +599,7 @@ a {
background: #f4f8fb;
cursor: pointer;
font-size: 18px;
+
&:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02);
@@ -515,10 +626,12 @@ a {
margin: 0;
font-size: 14px;
line-height: 24px;
+
li.current a,
a:hover {
color: $link;
}
+
a {
display: block;
margin-top: -24px;
@@ -537,6 +650,7 @@ a {
content: '';
border-radius: 50%;
}
+
&.current:before {
background-color: $link;
}
@@ -546,11 +660,13 @@ a {
.comment {
background-color: #f4f8fb;
position: relative;
+
&__wrapper {
margin: 0 auto;
padding: 0 100px 0.1px;
box-sizing: border-box;
}
+
&-body-ref {
position: absolute;
left: 80px;
@@ -592,8 +708,10 @@ a {
color: rgba($gray, .8);
float: left;
line-height: 40px;
+
a {
color: $gray;
+
&:hover {
color: rgba($gray, .8);
}
@@ -628,6 +746,7 @@ a {
.other {
position: relative;
+
&__title {
margin: -220px 0 5px;
color: #fff;
@@ -635,14 +754,17 @@ a {
text-align: center;
font-weight: 400;
}
+
&__meta {
color: #fff;
font-size: 14px;
text-align: center;
+
&--list {
margin-bottom: 154px;
}
}
+
&__content {
background-color: #fff;
padding: 70px 100px;
@@ -650,15 +772,18 @@ a {
box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
border-radius: 5px;
}
+
&__item {
line-height: 20px;
margin: 10px;
white-space: nowrap;
display: block;
+
&--archive {
width: 187px;
display: inline-block;
}
+
span, div {
color: $gray;
font-size: 12px;
@@ -671,28 +796,36 @@ a {
@media (max-width: 768px) {
.header {
padding: 10px 0;
+
&__h1 {
padding-top: 60px;
}
+
&__h2 {
margin-bottom: 40px;
}
+
&__nav {
.fn__right {
float: none;
}
+
a {
margin: 0 10px 0 0;
}
}
+
&--article {
height: auto;
+
.header__nav a {
line-height: 24px;
}
}
+
&--other {
height: 360px;
+
.header__nav a {
line-height: 24px;
}
@@ -702,8 +835,10 @@ a {
.articles {
position: initial;
margin: 10px -5px 0 -5px;
+
.item {
margin: 0 5px 10px;
+
&--large {
flex-direction: column;
flex: 1 1 300px;
@@ -723,6 +858,7 @@ a {
.pagination {
margin-top: 0;
margin-bottom: 5px;
+
&__item {
margin-bottom: 5px;
}
@@ -739,9 +875,11 @@ a {
.article {
&__top {
height: 40px;
+
.title {
display: none;
}
+
.toc {
display: block;
float: left;
@@ -750,29 +888,36 @@ a {
cursor: pointer;
}
}
+
&__share .item {
height: 40px;
width: 40px;
padding: 10px 0;
}
+
.item {
&__meta {
padding-top: 40px;
}
+
&__cover {
display: none;
}
+
&__content {
padding: 10px 10px 0;
+
&--article {
margin-top: -20px;
}
}
}
+
&__bottom {
.fn__flex {
margin: 0 0 10px 0;
}
+
.item {
margin: 10px 0 0 0;
}
@@ -783,6 +928,7 @@ a {
&__title {
padding: 10px 0;
}
+
&__wrapper {
padding: 0 10px 0.1px;
}
@@ -791,6 +937,7 @@ a {
.item {
margin-bottom: 10px;
padding: 10px;
+
&__avatar {
margin-bottom: 10px;
}
@@ -801,10 +948,12 @@ a {
&__title {
margin-top: -280px;
}
+
&__content {
padding: 20px;
margin: 40px auto 10px;
}
+
&__meta--list {
margin-bottom: 40px;
}
diff --git a/Bubble/footer.ftl b/Bubble/footer.ftl
index 01b057b..c983cba 100644
--- a/Bubble/footer.ftl
+++ b/Bubble/footer.ftl
@@ -53,6 +53,9 @@
+
diff --git a/Bubble/js/circleMagic.js b/Bubble/js/circleMagic.js
new file mode 100644
index 0000000..83cfc9d
--- /dev/null
+++ b/Bubble/js/circleMagic.js
@@ -0,0 +1,129 @@
+;(function ($) {
+ $.fn.circleMagic = function (options) {
+
+ var width, height, canvas, ctx, animateHeader = true;
+ var circles = [];
+
+ var settings = $.extend({
+ color: 'rgba(255,255,255,.5)',
+ radius: 10,
+ density: 0.3,
+ clearOffset: 0.2
+ }, options);
+
+ // Main
+
+ var container = this['0'];
+ initContainer();
+ addListeners();
+
+ function initContainer() {
+ width = container.offsetWidth;
+ height = container.offsetHeight;
+
+ // create canvas element
+
+ initCanvas();
+ canvas = document.getElementById('canvas');
+ canvas.width = width;
+ canvas.height = height;
+ ctx = canvas.getContext('2d');
+
+ // create circles
+ for (var x = 0; x < width * settings.density; x++) {
+ var c = new Circle();
+ circles.push(c);
+ }
+ animate();
+ }
+
+ //Init canvas element
+ function initCanvas() {
+ var canvasElement = document.createElement('canvas');
+ canvasElement.id = 'canvas';
+ container.appendChild(canvasElement);
+ canvasElement.parentElement.style.overflow = 'hidden';
+
+ }
+
+ // Event handling
+ function addListeners() {
+ window.addEventListener('scroll', scrollCheck, false);
+ window.addEventListener('resize', resize, false);
+ }
+
+ function scrollCheck() {
+ if (document.body.scrollTop > height) {
+ animateHeader = false;
+ }
+ else {
+ animateHeader = true;
+ }
+ }
+
+ function resize() {
+ width = container.clientWidth;
+ height = container.clientHeight;
+ container.height = height + 'px';
+ canvas.width = width;
+ canvas.height = height;
+ }
+
+ function animate() {
+ if (animateHeader) {
+ ctx.clearRect(0, 0, width, height);
+ for (var i in circles) {
+ circles[i].draw();
+ }
+ }
+ requestAnimationFrame(animate);
+ }
+
+ function randomColor() {
+ var r = Math.floor(Math.random() * 255);
+ var g = Math.floor(Math.random() * 255);
+ var b = Math.floor(Math.random() * 255);
+ var alpha = Math.random().toPrecision(2);
+ return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
+ }
+
+ // Canvas manipulation
+
+ function Circle() {
+ var that = this;
+
+ // constructor
+ (function () {
+ that.pos = {};
+ init();
+ })();
+
+ function init() {
+ that.pos.x = Math.random() * width;
+ that.pos.y = height + Math.random() * 100;
+ that.alpha = 0.1 + Math.random() * settings.clearOffset;
+ that.scale = 0.1 + Math.random() * 0.3;
+ that.speed = Math.random();
+ if (settings.color === 'random') {
+ that.color = randomColor();
+ }
+ else {
+ that.color = settings.color;
+ }
+ }
+
+ this.draw = function () {
+ if (that.alpha <= 0) {
+ init();
+ }
+ that.pos.y -= that.speed;
+ that.alpha -= 0.0005;
+ ctx.beginPath();
+ ctx.arc(that.pos.x, that.pos.y, that.scale * settings.radius, 0, 2 * Math.PI, false);
+ ctx.fillStyle = that.color;
+ ctx.fill();
+ ctx.closePath();
+ };
+ }
+ }
+})(jQuery);
\ No newline at end of file
diff --git a/Bubble/js/common.js b/Bubble/js/common.js
index 4d35738..b6f1d2c 100644
--- a/Bubble/js/common.js
+++ b/Bubble/js/common.js
@@ -29,6 +29,17 @@
var Skin = {
init: function () {
Util.initPjax()
+ $('#headerDown').click(function () {
+ $('html, body').animate({scrollTop: $(window).height()}, 300)
+ })
+
+ $(window).scroll(function (event) {
+ $('.fn__progress').attr('value', parseInt($(window).scrollTop())).
+ attr('max', parseInt($('body').outerHeight() -
+ $(window).height()))
+ })
+
+ $('.header').circleMagic();
},
initArticle: function () {
page.share()
diff --git a/Bubble/macro-header.ftl b/Bubble/macro-header.ftl
index cd8f1d2..233d09b 100644
--- a/Bubble/macro-header.ftl
+++ b/Bubble/macro-header.ftl
@@ -18,13 +18,20 @@
-->
<#macro header type>
+
\ No newline at end of file
diff --git a/Bubble/side.ftl b/Bubble/side.ftl
index 26147e9..4cda68e 100644
--- a/Bubble/side.ftl
+++ b/Bubble/side.ftl
@@ -17,6 +17,7 @@
along with this program. If not, see .
-->
+