From eba6eebf8432339077b325faf7411f887b21c9e5 Mon Sep 17 00:00:00 2001 From: nankeyilu Date: Tue, 28 Apr 2020 13:11:42 +0800 Subject: [PATCH] Remove backdrop-filter to improve scrolling performance Add visibility: none to inactive search panel to avoid interferring with Devtools' Inspect function. Fixes: 781c824 ("add LazyLoad and Local Search") --- source/css/allinonecss.min.css | 2 +- source/css/screen.css | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/source/css/allinonecss.min.css b/source/css/allinonecss.min.css index 0f9ca35..2ce8cc0 100644 --- a/source/css/allinonecss.min.css +++ b/source/css/allinonecss.min.css @@ -1 +1 @@ -*{margin:0;padding:0;box-sizing:inherit;--safe-area-inset-bottom:env(safe-area-inset-bottom)}html{box-sizing:border-box;font-size:62.5%;-webkit-tap-highlight-color:transparent}body,html{overflow-x:hidden}body{font-size:1.5rem;font-weight:400;line-height:2rem;font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;color:var(--body-color);background:var(--body-bg);-moz-font-feature-settings:"liga" on;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none}hr{position:relative;display:block;width:100%;height:1px;margin:2.5em 0;padding:0;border:0;border-top:5px solid #e3e9ed}img{max-width:100%;image-rendering:-webkit-optimize-contrast}blockquote,dl,ol,p,ul{margin:0 0 1.2em}audio,canvas,iframe,img,svg,video{vertical-align:middle}a{word-break:break-all;background-color:transparent;text-decoration:none;color:#26a8ed}a:active,a:hover{text-decoration:underline;outline:0}input{line-height:normal}input:focus{outline:0}h1,h2,h3,h4,h5,h6{line-height:1.15}.site-wrapper{display:flex;flex-direction:column;min-height:100vh}.site-main{z-index:100;flex-grow:1;-ms-flex-positive:1}.outer{position:relative;padding:0 4vw}.inner{width:100%;max-width:1040px;margin:0 auto}@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:var(--white-normal);background:50%/cover no-repeat #090a0b}.site-header:before{bottom:0;background:rgba(0,0,0,.18)}.site-header:after,.site-header:before{position:absolute;z-index:10;top:0;right:0;left:0;display:block;content:""}.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:flex;flex-direction:column;min-height:200px;max-height:450px;padding:10vw 4vw;text-align:center;align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.site-title{font-size:3.8rem;font-weight:700;z-index:10;margin:0;padding:0}.site-description{font-size:2.2rem;font-weight:300;z-index:10;margin:0;padding:5px 0;letter-spacing:.5px;opacity:.8}@media (max-width:500px){h1{font-size:2.2rem}.site-title{font-size:3rem}.site-description{font-size:1.8rem}}.site-nav{font-size:1.2rem;position:relative;z-index:300;height:40px;align-items:center;justify-content:space-between}.site-nav li{margin:.5em 0;padding-left:.3em;line-height:1.6em}.site-nav,.site-nav-left{display:flex;overflow-y:hidden}.site-nav-left{margin-right:10px;white-space:nowrap;letter-spacing:.4px;align-items:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-overflow-scrolling:touch;-ms-overflow-scrolling:touch}.site-nav-logo{font-size:1.7rem;font-weight:700;line-height:1em;display:block;margin-right:24px;padding:11px 0;letter-spacing:-.5px;color:var(--white-normal);flex-shrink:0}.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{padding:0;text-transform:uppercase}.nav li,.nav li a{display:block;margin:0}.nav li a{padding:10px 12px;opacity:.8;color:var(--white-normal)}.nav li a:hover{text-decoration:none;opacity:1}.search-button-area,.site-nav-right{height:40px}.search-button-area,.site-nav-right,.social-links{display:flex;align-items:center;-webkit-box-align:center;-ms-flex-align:center;flex-shrink:0}.social-links a:last-of-type{padding-right:20px}.social-link{display:flex;margin:0;padding:10px;opacity:.8;color:var(--white-normal);align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.social-link:hover{opacity:1}.social-link svg{height:1.8rem;fill:var(--white-normal)}.search-button{margin:0 10px;font-size:1.2rem;line-height:1em;display:block;padding:4px 10px;opacity:.8;color:var(--white-normal);border:1px solid var(--white-normal);border-radius:10px}.search-button:hover{text-decoration:none;opacity:1}@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;margin:0 -20px;padding:40px 0 0;flex-wrap:wrap}.post-card,.post-feed{display:flex}.post-card{overflow:hidden;flex-direction:column;min-height:300px;margin:0 20px 40px;transition:.5s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:5px;background:var(--post-card-bg);background-size:cover;box-shadow:8px 14px 20px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);flex:1 1 300px}.post-card:hover{-webkit-transform:translate3D(0,-1px,0) scale(1.02);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:50%/cover no-repeat #c5d2d9}.post-card-content-link{position:relative;display:block;padding:25px 25px 0;color:var(--post-card-link);flex-grow:1;-ms-flex-positive:1}.post-card-content-link:hover{text-decoration:none}.post-card-tags{font-size:1.2rem;font-weight:500;line-height:1.15em;display:block;margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase;color:#738a94}.post-card-content{display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-box-pack:justify;flex-grow:1;-ms-flex-pack:justify;-ms-flex-positive:1;justify-content:space-between}.post-card-meta{display:flex;padding:0 25px 25px;align-items:flex-end;-webkit-box-align:end;-webkit-box-pack:justify;-ms-flex-align:end;justify-content:space-between}.author-profile-image{width:30px;height:30px;display:block;border-radius:100%;background:#e3e9ed;-o-object-fit:cover;object-fit:cover}.author-list{display:flex;margin:0;padding:0;list-style:none;flex-wrap:wrap-reverse}.author-list-item{position:relative;margin:0;padding:0;flex-shrink:0}.static-avatar{width:34px;height:34px;margin:0 -5px;display:block;overflow:hidden;border:2px solid var(--white-normal);border-radius:100%}.author-name-tooltip{font-size:1.2rem;position:absolute;z-index:999;bottom:105%;display:block;padding:2px 8px;transition:.3s cubic-bezier(.4,.01,.165,.99);-webkit-transform:translateY(6px);transform:translateY(6px);white-space:nowrap;letter-spacing:.2px;pointer-events:none;opacity:0;color:var(--white-normal);border-radius:3px;background:#15171a}.author-list-item:hover .author-name-tooltip{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.reading-time{font-size:1.2rem;font-weight:500;line-height:33px;margin-left:20px;letter-spacing:.5px;text-transform:uppercase;color:#738a94;flex-shrink:0}@media (min-width:795px){.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image){flex-direction:row;flex:1 1 100%}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link{position:relative;border-radius:5px 0 0 5px;flex:1 1 auto}.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}@media (max-width:650px){.author-name-tooltip{display:none}.post-feed{padding-top:5vw}.post-card{margin:0 20px 20px}.post-card:hover{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.page-template .site-main,.post-template .site-main{padding-bottom:4vw;background:var(--post-bg)}.post-full{position:relative;z-index:50}.post-full-header{max-width:1040px;margin:0 auto;padding:5vw 3vw;text-align:center}@media (max-width:500px){.post-full-header{padding:10vw 3vw}}.post-full-meta{font-size:1.4rem;font-weight:600;display:flex;text-transform:uppercase;color:#738a94;align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.post-full-meta-date{color:#3eb0ef}.post-full-title{font-size:4rem;margin:0;color:var(--H-title)}.date-divider{display:inline-block;margin:0 6px 1px}.post-full-image{height:800px;margin:0 -10vw -165px;border-radius:5px;background:50%/cover #c5d2d9}@media (max-width:1170px){.post-full-image{height:600px;margin:0 -4vw -100px;border-radius:0}}@media (max-width:800px){.post-full-image{height:400px}}.post-full-content{font-size:1.75rem;line-height:1.6em;position:relative;min-height:230px;margin:0 auto;padding:70px 100px 0;background:var(--post-full-content)}@media (max-width:1170px){.post-full-content{padding:5vw 7vw 0}}.post-full-content:before{left:-5px;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}.post-full-content:after,.post-full-content:before{position:absolute;z-index:-1;top:15px;display:block;width:20px;height:200px;content:"";background:rgba(39,44,49,.15);-webkit-filter:blur(5px);filter:blur(5px)}.post-full-content:after{right:-5px;-webkit-transform:rotate(5deg);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}.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 p{margin:0}.post-full-content iframe{margin:0 auto}.post-full-content .fluid-width-video-wrapper{margin:1.5em 0 3em}.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:var(--H-title)}@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{height:350px;margin-bottom:4vw}.post-full-content{padding:0}.post-full-content:after,.post-full-content:before{display:none}}.read-next-feed{margin:0 -20px;padding:40px 0 0;flex-wrap:wrap}.read-next-card,.read-next-feed{display:flex}.read-next-card{position:relative;overflow:hidden;flex-direction:column;margin:0 20px 40px;padding:25px;border-radius:5px;background:50%/cover #15171a;box-shadow:8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);flex:1 1 300px}.read-next-card:before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;content:"";border-radius:5px;background:linear-gradient(135deg,rgba(0,40,60,.8),rgba(0,20,40,.7));-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{font-size:1.3rem;line-height:1.3em;display:block;opacity:.8}.read-next-card-header-title{font-size:3rem;line-height:1.2em;margin:0;padding:0 20px;letter-spacing:1px}.read-next-divider{position:relative;display:flex;height:80px;justify-content:center}.read-next-divider svg{width:40px;fill:transparent;stroke:var(--white-normal);stroke-opacity:.65;stroke-width:.5px}.read-next-card-content{font-size:1.7rem;position:relative;z-index:50;display:flex;flex-grow:1;-ms-flex-positive:1}.read-next-card-content ul{display:flex;flex-direction:column;margin:0 auto;padding:0;list-style:none;text-align:center}.read-next-card-content li{font-size:1.6rem;font-weight:200;line-height:1.25em;margin:0;padding:0;letter-spacing:-.5px}.read-next-card-content li a{font-weight:500;display:block;padding:20px 0;transition:opacity .3s;vertical-align:top;border-bottom:1px solid hsla(0,0%,100%,.3)}.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,.read-next-card-content li a,.read-next-card-content-ext a,.read-next-card-footer a{color:var(--read-next-card-text)}.read-next-card-content li a:hover,.read-next-card-content-ext a:hover,.read-next-card-footer a:hover{color:var(--white-normal)}.floating-header{position:fixed;z-index:1000;top:0;right:0;left:0;display:flex;visibility:hidden;height:60px;transition:.5s cubic-bezier(.19,1,.22,1);-webkit-transform:translate3d(0,-120%,0);transform:translate3d(0,-120%,0);border-bottom:1px solid rgba(0,0,0,.06);background:var(--floating-header-bg);align-items:center;-webkit-box-align:center;-ms-flex-align:center}.floating-active{visibility:visible;transition:.5s cubic-bezier(.22,1,.27,1);-webkit-transform:translateZ(0);transform:translateZ(0)}.floating-header-logo{font-size:1.6rem;line-height:1em;overflow:hidden;margin:0 0 0 20px;white-space:nowrap;letter-spacing:-1px;text-overflow:ellipsis}.floating-header-logo a{font-weight:700;line-height:1.1em;display:flex;color:var(--post-card-link);align-items:center;-webkit-box-align:center;-ms-flex-align:center}.floating-header-logo a:hover{text-decoration:none}.floating-header-logo img{max-height:20px;margin:0 10px 0 0}.floating-header-divider{line-height:1em;color:var(--post-card-link);margin:0 5px}.floating-header-title{font-size:1.6rem;font-weight:700;line-height:1.3em;overflow:hidden;margin:0;white-space:nowrap;text-overflow:ellipsis;color:var(--post-card-link);flex:1}.progress{position:absolute;right:0;bottom:-1px;left:0;width:100%;height:2px;color:#3eb0ef;border:none;background:0 0;-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}}@media (max-width:800px){.floating-header-logo{margin-left:10px}.floating-header-divider,.floating-header-title{visibility:hidden}}.site-header-content .author-profile-image{z-index:10;width:100px;height:100px;margin:0 0 20px;box-shadow:0 0 0 6px hsla(0,0%,100%,.1);flex-shrink:0}.site-header-content .author-bio{font-size:2rem;font-weight:300;line-height:1.3em;z-index:10;max-width:600px;margin:5px 0 10px;letter-spacing:.5px;opacity:.8;flex-shrink:0}.site-header-content .author-meta{font-family:Georgia,serif;font-style:italic;z-index:10;display:flex;margin:0 0 10px;align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;-ms-flex-negative:0;-ms-flex-pack:center;flex-shrink:0;justify-content:center}.site-header-content .author-location svg{height:1.9rem;stroke:var(--white-normal)}.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-message{text-align:center}.error-code{font-size:12vw;line-height:1em;margin:0;letter-spacing:-5px;opacity:.3}.error-description{font-size:3rem;font-weight:400;line-height:1.3em;margin:0;color:#738a94}@media (max-width:800px){.error-description{font-size:1.8rem;margin:5px 0 0}}.error-link{display:inline-block;margin-top:5px}.error-template .post-feed{padding-top:0}.search-overlay{position:fixed;z-index:9000;top:0;right:0;bottom:0;left:0;display:flex;transition:opacity .2s ease-in;pointer-events:none;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:rgba(0,25,40,.97);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.search-overlay:target{pointer-events:auto;opacity:1}.site-footer{position:relative;padding-top:20px;padding-bottom:60px;color:var(--white-normal);background:#000}.site-footer-content{font-size:1.3rem;display:flex;align-items:center;-webkit-box-align:center;-webkit-box-pack:justify;-ms-flex-align:center;-ms-flex-pack:justify;flex-wrap:wrap;justify-content:space-between}.site-footer-content,.site-footer-content a{color:hsla(0,0%,100%,.7)}.site-footer-content a:hover{text-decoration:none;color:var(--white-normal)}.site-footer-nav{display:flex}.site-footer-nav a{position:relative;margin-left:20px}.site-footer-nav a:before{position:absolute;top:11px;left:-11px;display:block;width:2px;height:2px;content:"";border-radius:100%;background:var(--white-normal)}.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}}img[mode=aspectFill]{object-fit:cover}.copyright{display:flex;align-items:center}.leancloud-visitors{position:relative;margin-left:20px}.leancloud-visitors:before{position:absolute;top:11px;left:-11px;display:block;width:2px;height:2px;content:"";border-radius:100%;background:var(--white-normal)}.search-result-list{padding:0 1.5rem 0 2rem}.search-result{text-align:justify;word-break:break-all}.custom-page{transition:unset!important;-webkit-transform:unset!important;transform:unset!important;box-shadow:unset!important}.post-card-excerpt{text-align:justify;word-break:break-all}.page-full-content{padding:4vw!important}.author-stats{color:var(--white-normal)}.tagcloud-card{padding-bottom:20px}.post-site-header:after,.post-site-header:before{display:none}.tags-postTags{list-style:none;padding:0;margin:4vw 0}.tags-postTags li{margin-right:8px;margin-bottom:8px;display:inline-block;font-weight:400;letter-spacing:0;border-radius:3px;padding:5px 10px;background:rgba(0,0,0,.05);color:var(--link-color)}.tags-postTags li:hover{background:rgba(0,0,0,.1);color:rgba(0,0,0,.68)}.tags-postTags a{text-decoration:none;font-size:15px;color:var(--link-color-hover)}.hide{display:none}@media (max-width:500px){.post-card-title{font-size:18px!important}.post-full-content{font-size:1.6rem}}.post-card-title{margin:0 0 .5em;font-size:2rem}.b-lazy.post-img{min-height:200px;min-width:100%;background:50% no-repeat #c5d2d9!important;border-radius:4px}.b-lazy{width:auto;transition:.5s ease-in-out;opacity:.5}.b-lazy.b-loaded{min-height:0;min-width:0;opacity:1}@media (max-width:800px){.floating-header-divider,.floating-header-title{visibility:inherit!important}.floating-header-logo{margin-left:10px;padding-right:5px}.floating-header-divider{margin-left:0}}.search-button-area{margin:0 10px}@media (min-width:701px){.search-button-area{display:none}#local-search-result{width:80%!important;padding:2rem 1rem!important;margin:6rem 0 1rem!important;border-radius:4px}}.search-form{height:5rem;text-align:center;position:fixed;top:0;width:100%;background:var(--body-bg)}.search-overlay-logo{position:absolute;left:0;top:0;height:5rem;padding:1.25rem 1.8rem 1.25rem 2rem}.search-overlay-logo>img{width:2.5rem;height:2.5rem;border-radius:50%}.search-input{color:var(--post-card-link);background:var(--search-input-bg);border:none;font-size:1.5rem;border-radius:4px;height:3.5rem;margin:.75rem 1.5rem;padding:0 2rem;width:calc(100% - 14.5rem);max-width:600px}.search-overlay-close{position:absolute;right:0;top:0;height:5rem;width:5rem}.search-overlay-close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.search-overlay-close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.search-overlay-close:after,.search-overlay-close:before{position:absolute;top:2.4rem;right:1.8rem;width:2rem;height:2px;content:"";background:rgba(0,25,40,.97)}#local-search-result{padding-top:1rem;margin:5rem 0 0;background:var(--body-bg);color:var(--post-card-link);width:100%;overflow:auto;border-top:1px solid var(--search-input-bg)}#local-search-result ul li{list-style:none;padding-top:.8em}.search-result-title{font-size:1.8rem}.search-keyword{color:red}.site-footer-nav{-webkit-box-pack:center;-ms-flex-pack:center;flex-wrap:wrap;justify-content:center}.pagination{font-size:1.5rem;position:relative;width:80%;max-width:840px;margin:2rem auto;text-align:center}.pagination a{transition:.2s;color:#8f8f94}.page-nav{overflow:hidden;min-width:100px;text-align:center;border-radius:4px;background:var(--post-card-bg)}.page-nav .current{font-weight:700;color:#555}.page-nav .current:hover{color:#555}.page-nav>.page-number,.prev-next-post{display:inline-block;min-width:100px;padding:8px 0}.next-post,.page-nav>.next,.page-nav>.prev,.prev-post{position:absolute;display:inline-block;padding:8px 16px;transition:border .3s;text-decoration:none;border-radius:4px}.next-post,.prev-post{border:1px solid #dedede}.page-nav>.prev,.prev-post{left:0}.next-post,.page-nav>.next{right:0}.page-nav>.next:hover,.page-nav>.prev:hover,.page-number:hover,.pagination a:hover{color:var(--page-nav--hover)}@media (max-width:800px){.next-post,.page-nav>.next,.page-nav>.prev,.prev-next-post,.prev-post{position:static;width:100%}.page-nav>.page-number{width:33.3%}.pagination{width:100%;margin-bottom:.5rem}.t-g-control{top:unset!important;right:unset!important;bottom:0!important;flex-direction:row!important;width:100%;justify-content:center}.toc-main{width:100%}}#comment{padding-top:2rem}@media (min-width:1170px){#comment{padding:20px 100px 0}::-webkit-scrollbar{width:8px;height:6px;background-color:var(--post-card-bg)}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);border-radius:6px;background-color:var(--post-card-bg)}::-webkit-scrollbar-thumb{border-radius:6px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);background-color:#555}}.v .vwrap .vedit .vemojis i{font-size:22px!important}.v *{font-size:15px!important}.v .vlist .vcard .vh .vmeta .vat{color:var(--post-card-link)!important}.v .vbtn{color:var(--post-card-link)!important;background:var(--post-full-content)!important}.v .vbtn:active,.v .vbtn:hover{color:#f6f8fa!important;border-color:var(--page-nav--hover)!important;background:var(--toc-btn-hover)!important}.v .vwrap .vedit .vctrl span{color:var(--body-color)!important}.read-next-card-content-ext{font-size:1.7rem;position:relative;z-index:50;display:flex;flex-grow:1;-ms-flex-positive:1;flex-wrap:wrap}.read-next-card-content-ext a{padding:10px}.toc-bar{z-index:666;position:fixed;height:100%;display:flex;align-items:center;transition:.5s ease-in-out}.toc-btn-bar svg{width:32px;height:32px;fill:#8a8a8a}.toc-btn{z-index:666;cursor:pointer;margin-right:10px;width:40px;height:40px;display:block;padding:4px;border-radius:4px;background:var(--toc-btn);box-shadow:0 1px 3px rgba(0,0,0,.1);transition:background .1s ease-in-out}.toc-btn:hover{background:var(--toc-btn-hover)}.toc-main{background:var(--floating-header-bg);height:100%;padding:100px 40px;border-left:1px solid rgba(0,0,0,.06);overflow-y:scroll}.toc-main::-webkit-scrollbar{display:none}.toc-main li,.toc-main ol,.toc-main ul{list-style:none}.toc{margin:0;padding:0}@media only screen and (max-width:767px){.toc-bar{width:100%;top:100%}.toc-btn-bar{text-align:center;position:fixed;bottom:0;padding-bottom:calc(var(--safe-area-inset-bottom) - 10px);z-index:666;width:100%;display:flex;flex-direction:row;justify-content:center}.toc-btn{margin:0 5px 10px}}@media only screen and (min-width:768px){.toc-bar{right:-100%}.toc-btn:nth-child(2){margin:10px 10px 10px 0}}code,pre{font-family:"Roboto Mono",Monaco,courier,monospace;font-size:.9em;background-color:var(--color-1);-webkit-font-smoothing:initial;-moz-osx-font-smoothing:initial}code{color:#e96900;padding:3px 5px;margin:0 2px;border-radius:2px;white-space:nowrap}kbd{margin:0 4px;padding:3px 4px;background:#eee;color:#555;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}em{color:#7f8c8d}.markdown-body>:first-child{margin-top:0}.markdown-body li{margin:.5em 0;padding-left:.3em;line-height:1.6em}.markdown-body img{max-width:100%}.markdown-body span.light{color:#7f8c8d}.markdown-body span.info{font-size:.85em;display:inline-block;vertical-align:middle;width:280px;margin-left:20px}.markdown-body h1{margin:0 0 1.2em}.markdown-body h2{margin-top:2em;margin-bottom:1em;padding-bottom:.6em;border-bottom:1px solid #ddd}.markdown-body h3{line-height:1.2;position:relative}.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body strong{margin-bottom:1em;font-weight:600;color:var(--color-2);margin-top:1.5em}.markdown-body figure{margin-bottom:1.2em}.markdown-body p{line-height:1.6em;position:relative;z-index:1;text-align:left}.markdown-body ol,.markdown-body ul{padding-left:1.5em;position:inherit}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin:0}.markdown-body a{color:#26a8ed;font-weight:600}.markdown-body a.button{font-size:.9em;color:#fff;margin:.2em 0;width:180px;text-align:center;padding:12px 24px;display:inline-block;vertical-align:middle}.markdown-body h2 a,.markdown-body h2 button,.markdown-body h3 a,.markdown-body h3 button{pointer-events:auto;color:#2c3e50}.markdown-body blockquote{margin:2em 0;padding:20px 0 20px 20px;border-left:4px solid #26a8ed}.markdown-body blockquote p{font-weight:600;margin-left:0;margin-bottom:0;padding-bottom:0}.markdown-body iframe{margin:1em 0}.markdown-body>table{word-break:keep-all;border-spacing:0;border-collapse:collapse;margin:1.2em auto;padding:0;display:block;overflow-x:auto}.markdown-body>table td,.markdown-body>table th{line-height:1.5em;padding:.4em .8em;border:1px solid #ddd}.markdown-body>table th{font-weight:700;text-align:left}.markdown-body>table th,.markdown-body>table tr:nth-child(2n){background-color:var(--color-1)}.markdown-body>table th code,.markdown-body>table tr:nth-child(2n) code{background-color:#efefef}.markdown-body p.error,.markdown-body p.success,.markdown-body p.warn{padding:12px 24px 12px 30px;margin:2em 0;border-left-width:4px;border-left-style:solid;background-color:var(--color-1);position:relative;border-bottom-right-radius:2px;border-top-right-radius:2px}.markdown-body p.error:before,.markdown-body p.success:before,.markdown-body p.warn:before{position:absolute;top:14px;left:-12px;color:#fff;width:20px;height:20px;border-radius:100%;text-align:center;line-height:20px;font-weight:700;font-family:Dosis,"Source Sans Pro","Helvetica Neue",Arial,sans-serif;font-size:14px}.markdown-body p.error code,.markdown-body p.success code,.markdown-body p.warn code{background-color:#efefef}.markdown-body p.error em,.markdown-body p.success em,.markdown-body p.warn em{color:#34495e}.markdown-body p.error{border-left-color:#f66}.markdown-body p.error:before{content:"\2717";background-color:#f66}.markdown-body p.warn{border-left-color:#f90}.markdown-body p.warn:before{content:"!";background-color:#f90}.markdown-body p.success{border-left-color:#42b983}.markdown-body p.success:before{content:"\2713";background-color:#42b983}.highlight{overflow-x:auto;overflow-y:hidden;background-color:var(--color-1);padding:.4em 0 0;line-height:1.1em;border-radius:2px;position:relative}.highlight table,.highlight td,.highlight tr{width:100%;border-collapse:collapse;padding:0;margin:0}.highlight .gutter{width:1.5em}.highlight .code pre{padding:1.2em 1.4em;margin:0}.highlight .code .line{min-height:1.5em}.highlight.bash .code:before,.highlight.css .code:before,.highlight.html .code:before,.highlight.js .code:before{position:absolute;top:0;right:0;padding:5px 10px 0;color:#ccc;text-align:right;font-size:1.4rem;line-height:15px;height:15px;font-weight:600}.highlight.html .code:before{content:"HTML"}.highlight.js .code:before{content:"JS"}.highlight.bash .code:before{content:"Shell"}.highlight.css .code:before{content:"CSS"}.gutter pre{color:#999;margin-bottom:0;padding:1.2em 0 1.2em 1.4em;font-size:.9em}pre{margin-bottom:1.2em;color:var(--pre-color);line-height:1.45;overflow:auto}pre .constant,pre .function .keyword{color:#0092db}pre .attribute,pre .keyword{color:#e96900}pre .literal,pre .number{color:#ae81ff}pre .change,pre .clojure .built_in,pre .flow,pre .lisp .title,pre .nginx .title,pre .tag,pre .tag .title,pre .tex .special,pre .winutils{color:#2973b7}pre .class .title{color:#fff}pre .regexp,pre .symbol,pre .symbol .string,pre .value{color:#42b983}pre .title{color:#a6e22e}pre .addition,pre .apache .cbracket,pre .apache .tag,pre .attr_selector,pre .built_in,pre .django .filter .argument,pre .django .template_tag,pre .django .variable,pre .envvar,pre .haskell .type,pre .javadoc,pre .preprocessor,pre .prompt,pre .pseudo,pre .ruby .class .parent,pre .smalltalk .array,pre .smalltalk .class,pre .smalltalk .localvars,pre .sql .aggregate,pre .stream,pre .string,pre .subst,pre .tag .value,pre .tex .command{color:#42b983}pre .apache .sqbracket,pre .comment,pre .deletion,pre .doctype,pre .java .annotation,pre .pi,pre .python .decorator,pre .shebang,pre .template_comment,pre .tex .formula{color:#b3b3b3}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .cdata,pre .xml .css,pre .xml .javascript,pre .xml .vbscript{opacity:.5}:root{--body-bg:#F4F8FB;--body-color:#3C484E;--post-bg:#FFFFFF;--H-title:#090A0B;--white-normal:#FFFFFF;--post-card-link:#15171A;--post-card-bg:#FFFFFF;--post-full-content:#FFFFFF;--read-next-card-text:#FFFFFF;--search-input-bg:rgba(0, 0, 0, 0.04);--page-nav--hover:#3C484E;--floating-header-bg:rgba(255, 255, 255, .95);--toc-btn:#f6f8fa;--toc-btn-hover:#F0F2F3;--color-1:#f8f8f8;--color-2:#2c3e50;--pre-color:#525252}@media (prefers-color-scheme:dark){:root{--body-bg:#323336;--body-color:#dfdfdf;--H-title:#dfdfdf;--white-normal:#dfdfdf;--post-bg:#323336;--post-card-link:#dfdfdf;--post-card-bg:#222;--post-full-content:#323336;--page-nav--hover:#dfdfdf;--read-next-card-text:#dfdfdf;--search-input-bg:rgba(255, 255, 255, 0.04);--floating-header-bg:rgba(34, 34, 34, .95);--toc-btn:#222;--toc-btn-hover:#2B2B2B;--color-1:#222;--color-2:#dfdfdf;--pre-color:#dfdfdf}.b-lazy.b-loaded{opacity:.85}.b-lazy.b-loaded:hover{opacity:1}.read-next-card:before{background:linear-gradient(135deg,rgba(33,37,41,.8),rgba(33,37,41,.7))}.search-overlay-close:after,.search-overlay-close:before{background:#fff}.search-overlay,.tags-postTags li{background:#222}.tags-postTags li:hover{background:#2b2b2b}.next-post,.prev-post{color:#dfdfdf}.v input,.v textarea{color:#dfdfdf!important}.v code,.v pre,.vpreview{background-color:#222!important}.v .vlist .vcard .vhead .vsys{background:unset!important}.v .vlist .vcard .vh,.v .vlist .vcard .vquote{border:none!important}.v .vlist{background:#111;padding:0 1.5rem;border-radius:4px}.v .vlist .vcard .vcontent.expand:before{background:linear-gradient(180deg,rgba(82,82,82,0),rgba(50,51,54,.9))!important}.v .vlist .vcard .vcontent.expand:after{background:rgba(50,51,54,.9)!important}} \ No newline at end of file +:root{--body-bg:#F4F8FB;--body-color:#3C484E;--post-bg:#FFFFFF;--H-title:#090A0B;--white-normal:#FFFFFF;--post-card-link:#15171A;--post-card-bg:#FFFFFF;--post-full-content:#FFFFFF;--read-next-card-text:#FFFFFF;--search-input-bg:rgba(0, 0, 0, 0.04);--page-nav--hover:#3C484E;--floating-header-bg:rgba(255, 255, 255, .95);--toc-btn:#f6f8fa;--toc-btn-hover:#F0F2F3;--color-1:#f8f8f8;--color-2:#2c3e50;--pre-color:#525252}@media (prefers-color-scheme:dark){:root{--body-bg:#323336;--body-color:#dfdfdf;--H-title:#dfdfdf;--white-normal:#dfdfdf;--post-bg:#323336;--post-card-link:#dfdfdf;--post-card-bg:#222;--post-full-content:#323336;--page-nav--hover:#dfdfdf;--read-next-card-text:#dfdfdf;--search-input-bg:rgba(255, 255, 255, 0.04);--floating-header-bg:rgba(34, 34, 34, .95);--toc-btn:#222;--toc-btn-hover:#2B2B2B;--color-1:#222;--color-2:#dfdfdf;--pre-color:#dfdfdf}.b-lazy.b-loaded{opacity:.85}.b-lazy.b-loaded:hover{opacity:1}.read-next-card:before{background:linear-gradient(135deg,rgba(33,37,41,.8),rgba(33,37,41,.7))}.search-overlay-close:after,.search-overlay-close:before{background:#fff}.search-overlay{background:#222}.tags-postTags li{background:#222}.tags-postTags li:hover{background:#2b2b2b}.next-post,.prev-post{color:#dfdfdf}.v input,.v textarea{color:#dfdfdf!important}.v code,.v pre,.vpreview{background-color:#222!important}.v .vlist .vcard .vhead .vsys{background:unset!important}.v .vlist .vcard .vh,.v .vlist .vcard .vquote{border:none!important}.v .vlist{background:#111;padding:0 1.5rem;border-radius:4px}.v .vlist .vcard .vcontent.expand:before{background:linear-gradient(180deg,rgba(82,82,82,0),rgba(50,51,54,.9))!important}.v .vlist .vcard .vcontent.expand:after{background:rgba(50,51,54,.9)!important}}.highlight{overflow-x:auto;overflow-y:hidden;background-color:var(--color-1);padding:.4em 0 0;line-height:1.1em;border-radius:2px;position:relative}.highlight table,.highlight td,.highlight tr{width:100%;border-collapse:collapse;padding:0;margin:0}.highlight .gutter{width:1.5em}.highlight .code pre{padding:1.2em 1.4em;margin:0}.highlight .code .line{min-height:1.5em}.highlight.bash .code:before,.highlight.css .code:before,.highlight.html .code:before,.highlight.js .code:before{position:absolute;top:0;right:0;padding:5px 10px 0;color:#ccc;text-align:right;font-size:1.4rem;line-height:15px;height:15px;font-weight:600}.highlight.html .code:before{content:"HTML"}.highlight.js .code:before{content:"JS"}.highlight.bash .code:before{content:"Shell"}.highlight.css .code:before{content:"CSS"}.gutter pre{color:#999;margin-bottom:0;padding:1.2em 0 1.2em 1.4em;font-size:.9em}pre{margin-bottom:1.2em;color:var(--pre-color);line-height:1.45;overflow:auto}pre .constant,pre .function .keyword{color:#0092db}pre .attribute,pre .keyword{color:#e96900}pre .literal,pre .number{color:#ae81ff}pre .change,pre .clojure .built_in,pre .flow,pre .lisp .title,pre .nginx .title,pre .tag,pre .tag .title,pre .tex .special,pre .winutils{color:#2973b7}pre .class .title{color:#fff}pre .regexp,pre .symbol,pre .symbol .string,pre .value{color:#42b983}pre .title{color:#a6e22e}pre .addition,pre .apache .cbracket,pre .apache .tag,pre .attr_selector,pre .built_in,pre .django .filter .argument,pre .django .template_tag,pre .django .variable,pre .envvar,pre .haskell .type,pre .javadoc,pre .preprocessor,pre .prompt,pre .pseudo,pre .ruby .class .parent,pre .smalltalk .array,pre .smalltalk .class,pre .smalltalk .localvars,pre .sql .aggregate,pre .stream,pre .string,pre .subst,pre .tag .value,pre .tex .command{color:#42b983}pre .apache .sqbracket,pre .comment,pre .deletion,pre .doctype,pre .java .annotation,pre .pi,pre .python .decorator,pre .shebang,pre .template_comment,pre .tex .formula{color:#b3b3b3}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .cdata,pre .xml .css,pre .xml .javascript,pre .xml .vbscript{opacity:.5}code,pre{font-family:"Roboto Mono",Monaco,courier,monospace;font-size:.9em;background-color:var(--color-1);-webkit-font-smoothing:initial;-moz-osx-font-smoothing:initial}code{color:#e96900;padding:3px 5px;margin:0 2px;border-radius:2px;white-space:nowrap}kbd{margin:0 4px;padding:3px 4px;background:#eee;color:#555;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}em{color:#7f8c8d}.markdown-body>:first-child{margin-top:0}.markdown-body li{margin:.5em 0;padding-left:.3em;line-height:1.6em}.markdown-body img{max-width:100%}.markdown-body span.light{color:#7f8c8d}.markdown-body span.info{font-size:.85em;display:inline-block;vertical-align:middle;width:280px;margin-left:20px}.markdown-body h1{margin:0 0 1.2em}.markdown-body h2{margin-top:2em;margin-bottom:1em;padding-bottom:.6em;border-bottom:1px solid #ddd}.markdown-body h3{line-height:1.2;position:relative}.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body strong{margin-bottom:1em;font-weight:600;color:var(--color-2);margin-top:1.5em}.markdown-body figure{margin-bottom:1.2em}.markdown-body p{line-height:1.6em;position:relative;z-index:1;text-align:left}.markdown-body ol,.markdown-body ul{padding-left:1.5em;position:inherit}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin:0}.markdown-body a{color:#26a8ed;font-weight:600}.markdown-body a.button{font-size:.9em;color:#fff;margin:.2em 0;width:180px;text-align:center;padding:12px 24px;display:inline-block;vertical-align:middle}.markdown-body h2 a,.markdown-body h2 button,.markdown-body h3 a,.markdown-body h3 button{pointer-events:auto;color:#2c3e50}.markdown-body blockquote{margin:2em 0;padding:20px 0 20px 20px;border-left:4px solid #26a8ed}.markdown-body blockquote p{font-weight:600;margin-left:0;margin-bottom:0;padding-bottom:0}.markdown-body iframe{margin:1em 0}.markdown-body>table{word-break:keep-all;border-spacing:0;border-collapse:collapse;margin:1.2em auto;padding:0;display:block;overflow-x:auto}.markdown-body>table td,.markdown-body>table th{line-height:1.5em;padding:.4em .8em;border:none;border:1px solid #ddd}.markdown-body>table th{font-weight:700;text-align:left}.markdown-body>table th,.markdown-body>table tr:nth-child(2n){background-color:var(--color-1)}.markdown-body>table th code,.markdown-body>table tr:nth-child(2n) code{background-color:#efefef}.markdown-body p.error,.markdown-body p.success,.markdown-body p.warn{padding:12px 24px 12px 30px;margin:2em 0;border-left-width:4px;border-left-style:solid;background-color:var(--color-1);position:relative;border-bottom-right-radius:2px;border-top-right-radius:2px}.markdown-body p.error:before,.markdown-body p.success:before,.markdown-body p.warn:before{position:absolute;top:14px;left:-12px;color:#fff;width:20px;height:20px;border-radius:100%;text-align:center;line-height:20px;font-weight:700;font-family:Dosis,"Source Sans Pro","Helvetica Neue",Arial,sans-serif;font-size:14px}.markdown-body p.error code,.markdown-body p.success code,.markdown-body p.warn code{background-color:#efefef}.markdown-body p.error em,.markdown-body p.success em,.markdown-body p.warn em{color:#34495e}.markdown-body p.error{border-left-color:#f66}.markdown-body p.error:before{content:"\2717";background-color:#f66}.markdown-body p.warn{border-left-color:#f90}.markdown-body p.warn:before{content:"!";background-color:#f90}.markdown-body p.success{border-left-color:#42b983}.markdown-body p.success:before{content:"\2713";background-color:#42b983}*{margin:0;padding:0;box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%;-webkit-tap-highlight-color:transparent}body,html{overflow-x:hidden}body{font-size:1.5rem;font-weight:400;line-height:2rem;font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;color:var(--body-color);background:var(--body-bg);-moz-font-feature-settings:"liga" on;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none}hr{position:relative;display:block;width:100%;height:1px;margin:2.5em 0;padding:0;border:0;border-top:5px solid #e3e9ed}img{max-width:100%}blockquote,dl,ol,p,ul{margin:0 0 1.2em}audio,canvas,iframe,img,svg,video{vertical-align:middle}a{word-break:break-all;background-color:transparent;text-decoration:none;color:#26a8ed}a:active,a:hover{text-decoration:underline;outline:0}input{line-height:normal}input:focus{outline:0}h1,h2,h3,h4,h5,h6{line-height:1.15}@media (max-width:500px){h1{font-size:2.2rem}}.site-wrapper{display:flex;flex-direction:column;min-height:100vh}.site-main{z-index:100;flex-grow:1;-ms-flex-positive:1}.outer{position:relative;padding:0 4vw}.inner{width:100%;max-width:1040px;margin:0 auto}@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:var(--white-normal);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{position:absolute;z-index:10;top:0;right:0;left:0;display:block;content:""}.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:flex;flex-direction:column;min-height:200px;max-height:450px;padding:10vw 4vw;text-align:center;align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.site-title{font-size:3.8rem;font-weight:700;z-index:10;margin:0;padding:0}.site-description{font-size:2.2rem;font-weight:300;z-index:10;margin:0;padding:5px 0;letter-spacing:.5px;opacity:.8}@media (max-width:500px){.site-title{font-size:3rem}.site-description{font-size:1.8rem}}.site-nav{font-size:1.2rem;position:relative;z-index:300;height:40px;align-items:center;justify-content:space-between}.site-nav li{margin:.5em 0;padding-left:.3em;line-height:1.6em}.site-nav,.site-nav-left{display:flex;overflow-y:hidden}.site-nav-left{margin-right:10px;white-space:nowrap;letter-spacing:.4px;align-items:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-overflow-scrolling:touch;-ms-overflow-scrolling:touch}.site-nav-logo{font-size:1.7rem;font-weight:700;line-height:1em;display:block;margin-right:24px;padding:11px 0;letter-spacing:-.5px;color:var(--white-normal);flex-shrink:0}.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{padding:0;text-transform:uppercase}.nav li,.nav li a{display:block;margin:0}.nav li a{padding:10px 12px;opacity:.8;color:var(--white-normal)}.nav li a:hover{text-decoration:none;opacity:1}.search-button-area,.site-nav-right{height:40px}.search-button-area,.site-nav-right,.social-links{display:flex;align-items:center;-webkit-box-align:center;-ms-flex-align:center;flex-shrink:0}.social-links a:last-of-type{padding-right:20px}.social-link{display:flex;margin:0;padding:10px;opacity:.8;color:var(--white-normal);align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.social-link:hover{opacity:1}.social-link svg{height:1.8rem;fill:var(--white-normal)}.search-button{margin:0 10px;font-size:1.2rem;line-height:1em;display:block;padding:4px 10px;opacity:.8;color:var(--white-normal);border:1px solid var(--white-normal);border-radius:10px}.search-button:hover{text-decoration:none;opacity:1}@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;margin:0 -20px;padding:40px 0 0;flex-wrap:wrap}.post-card,.post-feed{display:flex}.post-card{overflow:hidden;flex-direction:column;min-height:300px;margin:0 20px 40px;transition:all .5s ease;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:5px;background:var(--post-card-bg);background-size:cover;box-shadow:8px 14px 20px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);flex:1 1 300px}.post-card:hover{-webkit-transform:translate3D(0,-1px,0) scale(1.02);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;display:block;padding:25px 25px 0;color:var(--post-card-link);flex-grow:1;-ms-flex-positive:1}.post-card-content-link:hover{text-decoration:none}.post-card-tags{font-size:1.2rem;font-weight:500;line-height:1.15em;display:block;margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase;color:#738a94}.post-card-title{margin-top:0}.post-card-content{display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-box-pack:justify;flex-grow:1;-ms-flex-pack:justify;-ms-flex-positive:1;justify-content:space-between}.post-card-meta{display:flex;padding:0 25px 25px;align-items:flex-end;-webkit-box-align:end;-webkit-box-pack:justify;-ms-flex-align:end;justify-content:space-between}.author-profile-image{width:30px;height:30px;display:block;border-radius:100%;background:#e3e9ed;-o-object-fit:cover;object-fit:cover}.author-list{display:flex;margin:0;padding:0;list-style:none;flex-wrap:wrap-reverse}.author-list-item{position:relative;margin:0;padding:0;flex-shrink:0}.static-avatar{width:34px;height:34px;margin:0 -5px}.static-avatar{display:block;overflow:hidden;border:2px solid var(--white-normal);border-radius:100%}.author-name-tooltip{font-size:1.2rem;position:absolute;z-index:999;bottom:105%;display:block;padding:2px 8px;transition:all .3s cubic-bezier(.4,.01,.165,.99);-webkit-transform:translateY(6px);transform:translateY(6px);white-space:nowrap;letter-spacing:.2px;pointer-events:none;opacity:0;color:var(--white-normal);border-radius:3px;background:#15171a}.author-list-item:hover .author-name-tooltip{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}@media (max-width:650px){.author-name-tooltip{display:none}}.reading-time{font-size:1.2rem;font-weight:500;line-height:33px;margin-left:20px;letter-spacing:.5px;text-transform:uppercase;color:#738a94;flex-shrink:0}@media (min-width:795px){.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image){flex-direction:row;flex:1 1 100%}.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link{position:relative;border-radius:5px 0 0 5px;flex:1 1 auto}.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}@media (max-width:650px){.post-feed{padding-top:5vw}.post-card{margin:0 20px 20px}.post-card:hover{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.page-template .site-main,.post-template .site-main{padding-bottom:4vw;background:var(--post-bg)}.post-full{position:relative;z-index:50}.post-full-header{max-width:1040px;margin:0 auto;padding:5vw 3vw;text-align:center}@media (max-width:500px){.post-full-header{padding:10vw 3vw}}.post-full-meta{font-size:1.4rem;font-weight:600;display:flex;text-transform:uppercase;color:#738a94;align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.post-full-meta-date{color:#3eb0ef}.post-full-title{font-size:4rem;margin:0;color:var(--H-title)}.date-divider{display:inline-block;margin:0 6px 1px}.post-full-image{height:800px;margin:0 -10vw -165px;border-radius:5px;background:#c5d2d9 50%;background-size:cover}@media (max-width:1170px){.post-full-image{height:600px;margin:0 -4vw -100px;border-radius:0}}@media (max-width:800px){.post-full-image{height:400px}}.post-full-content{font-size:1.75rem;line-height:1.6em;position:relative;min-height:230px;margin:0 auto;padding:70px 100px 0;background:var(--post-full-content)}@media (max-width:1170px){.post-full-content{padding:5vw 7vw 0}}.post-full-content:before{left:-5px;-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}.post-full-content:after,.post-full-content:before{position:absolute;z-index:-1;top:15px;display:block;width:20px;height:200px;content:"";background:rgba(39,44,49,.15);-webkit-filter:blur(5px);filter:blur(5px)}.post-full-content:after{right:-5px;-webkit-transform:rotate(5deg);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}.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 p{margin:0}.post-full-content iframe{margin:0 auto}.post-full-content .fluid-width-video-wrapper{margin:1.5em 0 3em}.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:var(--H-title)}@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{height:350px;margin-bottom:4vw}.post-full-content{padding:0}.post-full-content:after,.post-full-content:before{display:none}}.read-next-feed{margin:0 -20px;padding:40px 0 0;flex-wrap:wrap}.read-next-card,.read-next-feed{display:flex}.read-next-card{position:relative;overflow:hidden;flex-direction:column;margin:0 20px 40px;padding:25px;border-radius:5px;background:#15171a 50%;background-size:cover;box-shadow:8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);flex:1 1 300px}.read-next-card:before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;content:"";border-radius:5px;background:linear-gradient(135deg,rgba(0,40,60,.8),rgba(0,20,40,.7))}.read-next-card-header{position:relative;z-index:50;padding-top:20px;text-align:center}.read-next-card-header-sitetitle{font-size:1.3rem;line-height:1.3em;display:block;opacity:.8}.read-next-card-header-title{font-size:3rem;line-height:1.2em;margin:0;padding:0 20px;letter-spacing:1px}.read-next-divider{position:relative;display:flex;height:80px;justify-content:center}.read-next-divider svg{width:40px;fill:transparent;stroke:var(--white-normal);stroke-opacity:.65;stroke-width:.5px}.read-next-card-content{font-size:1.7rem;position:relative;z-index:50;display:flex;flex-grow:1;-ms-flex-positive:1}.read-next-card-content ul{display:flex;flex-direction:column;margin:0 auto;padding:0;list-style:none;text-align:center}.read-next-card-content li{font-size:1.6rem;font-weight:200;line-height:1.25em;margin:0;padding:0;letter-spacing:-.5px}.read-next-card-content li a{font-weight:500;display:block;padding:20px 0;transition:opacity .3s ease;vertical-align:top;border-bottom:1px solid hsla(0,0%,100%,.3)}.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,.read-next-card-content li a,.read-next-card-content-ext a,.read-next-card-footer a{color:var(--read-next-card-text)}.read-next-card-content li a:hover,.read-next-card-content-ext a:hover,.read-next-card-footer a:hover{color:var(--white-normal)}.floating-header{position:fixed;z-index:1000;top:0;right:0;left:0;display:flex;visibility:hidden;height:60px;transition:all .5s cubic-bezier(.19,1,.22,1);-webkit-transform:translate3d(0,-120%,0);transform:translate3d(0,-120%,0);border-bottom:1px solid rgba(0,0,0,.06);background:var(--floating-header-bg);align-items:center;-webkit-box-align:center;-ms-flex-align:center}.floating-active{visibility:visible;transition:all .5s cubic-bezier(.22,1,.27,1);-webkit-transform:translateZ(0);transform:translateZ(0)}.floating-header-logo{font-size:1.6rem;line-height:1em;overflow:hidden;margin:0 0 0 20px;white-space:nowrap;letter-spacing:-1px;text-overflow:ellipsis}.floating-header-logo a{font-weight:700;line-height:1.1em;display:flex;color:var(--post-card-link);align-items:center;-webkit-box-align:center;-ms-flex-align:center}.floating-header-logo a:hover{text-decoration:none}.floating-header-logo img{max-height:20px;margin:0 10px 0 0}.floating-header-divider{line-height:1em;color:var(--post-card-link);margin:0 5px}.floating-header-title{font-size:1.6rem;font-weight:700;line-height:1.3em;overflow:hidden;margin:0;white-space:nowrap;text-overflow:ellipsis;color:var(--post-card-link);flex:1}.progress{position:absolute;right:0;bottom:-1px;left:0;width:100%;height:2px;color:#3eb0ef;border:none;background:0 0;-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}}@media (max-width:800px){.floating-header-logo{margin-left:10px}.floating-header-divider,.floating-header-title{visibility:hidden}}.site-header-content .author-profile-image{z-index:10;width:100px;height:100px;margin:0 0 20px;box-shadow:0 0 0 6px hsla(0,0%,100%,.1);flex-shrink:0}.site-header-content .author-bio{font-size:2rem;font-weight:300;line-height:1.3em;z-index:10;max-width:600px;margin:5px 0 10px;letter-spacing:.5px;opacity:.8;flex-shrink:0}.site-header-content .author-meta{font-family:Georgia,serif;font-style:italic;z-index:10;display:flex;margin:0 0 10px;align-items:center;-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;-ms-flex-negative:0;-ms-flex-pack:center;flex-shrink:0;justify-content:center}.site-header-content .author-location svg{height:1.9rem;stroke:var(--white-normal)}.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-message{text-align:center}.error-code{font-size:12vw;line-height:1em;margin:0;letter-spacing:-5px;opacity:.3}.error-description{font-size:3rem;font-weight:400;line-height:1.3em;margin:0;color:#738a94}@media (max-width:800px){.error-description{font-size:1.8rem;margin:5px 0 0}}.error-link{display:inline-block;margin-top:5px}.error-template .post-feed{padding-top:0}.search-overlay{position:fixed;z-index:9000;top:0;right:0;bottom:0;left:0;display:flex;transition:opacity .2s ease-in;visibility:none;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:0;background:rgba(0,25,40,.97);-webkit-box-align:center;-webkit-box-pack:center;-ms-flex-align:center;justify-content:center}.search-overlay:target{visibility:visible;opacity:1}.site-footer{position:relative;padding-top:20px;padding-bottom:60px;color:var(--white-normal);background:#000}.site-footer-content{font-size:1.3rem;display:flex;align-items:center;-webkit-box-align:center;-webkit-box-pack:justify;-ms-flex-align:center;-ms-flex-pack:justify;flex-wrap:wrap;justify-content:space-between}.site-footer-content,.site-footer-content a{color:hsla(0,0%,100%,.7)}.site-footer-content a:hover{text-decoration:none;color:var(--white-normal)}.site-footer-nav{display:flex}.site-footer-nav a{position:relative;margin-left:20px}.site-footer-nav a:before{position:absolute;top:11px;left:-11px;display:block;width:2px;height:2px;content:"";border-radius:100%;background:var(--white-normal)}.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}}*{--safe-area-inset-bottom:env(safe-area-inset-bottom)}img[mode=aspectFill]{object-fit:cover}.copyright{display:flex;align-items:center}.leancloud-visitors{position:relative;margin-left:20px}.leancloud-visitors:before{position:absolute;top:11px;left:-11px;display:block;width:2px;height:2px;content:"";border-radius:100%;background:var(--white-normal)}.search-result-list{padding:0 1.5rem 0 2rem}.search-result{text-align:justify;word-break:break-all}.custom-page{transition:unset!important;-webkit-transform:unset!important;transform:unset!important;box-shadow:unset!important}.post-card-excerpt{text-align:justify;word-break:break-all}.page-full-content{padding:4vw!important}img{image-rendering:-webkit-optimize-contrast}.author-stats{color:var(--white-normal)}.tagcloud-card{padding-bottom:20px}.post-site-header:after,.post-site-header:before{display:none}.tags-postTags{list-style:none;padding:0;margin:4vw 0}.tags-postTags li{margin-right:8px;margin-bottom:8px;display:inline-block;font-weight:400;letter-spacing:0;border-radius:3px;padding:5px 10px;background:rgba(0,0,0,.05);color:var(--link-color)}.tags-postTags li:hover{background:rgba(0,0,0,.1);color:rgba(0,0,0,.68)}.tags-postTags a{text-decoration:none;font-size:15px;color:var(--link-color-hover)}.hide{display:none}@media (max-width:500px){.post-card-title{font-size:18px!important}.post-full-content{font-size:1.6rem}}.post-card-title{margin:0 0 .5em;font-size:2rem}.b-lazy.post-img{min-height:200px;min-width:100%;background:#c5d2d9 no-repeat 50%!important;background-size:cover;border-radius:4px}.b-lazy{width:auto;transition:all .5s ease-in-out;opacity:.5}.b-lazy.b-loaded{min-height:0;min-width:0;opacity:1}@media (max-width:800px){.floating-header-divider,.floating-header-title{visibility:inherit!important}.floating-header-logo{margin-left:10px;padding-right:5px}.floating-header-divider{margin-left:0}}.search-button-area{margin:0 10px}@media (min-width:701px){.search-button-area{display:none}#local-search-result{width:80%!important;padding:2rem 1rem!important;margin:6rem 0 1rem!important;border-radius:4px}}.search-form{height:5rem;text-align:center;position:fixed;top:0;width:100%;background:var(--body-bg)}.search-overlay-logo{position:absolute;left:0;top:0;height:5rem;padding:1.25rem 1.8rem 1.25rem 2rem}.search-overlay-logo>img{width:2.5rem;height:2.5rem;border-radius:50%}.search-input{color:var(--post-card-link);background:var(--search-input-bg);border:none;font-size:1.5rem;border-radius:4px;height:3.5rem;margin:.75rem 1.5rem;padding:0 2rem;width:calc(100% - 14.5rem);max-width:600px}.search-overlay-close{position:absolute;right:0;top:0;height:5rem;width:5rem}.search-overlay-close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.search-overlay-close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.search-overlay-close:after,.search-overlay-close:before{position:absolute;top:2.4rem;right:1.8rem;width:2rem;height:2px;content:"";background:rgba(0,25,40,.97)}#local-search-result{padding-top:1rem;margin:5rem 0 0;background:var(--body-bg);color:var(--post-card-link);width:100%;overflow:auto;border-top:1px solid var(--search-input-bg)}#local-search-result ul li{list-style:none;padding-top:.8em}.search-result-title{font-size:1.8rem}.search-keyword{color:red}.site-footer-nav{-webkit-box-pack:center;-ms-flex-pack:center;flex-wrap:wrap;justify-content:center}.pagination{font-size:1.5rem;position:relative;width:80%;max-width:840px;margin:2rem auto;text-align:center}.pagination a{transition:all .2s ease;color:#8f8f94}.page-nav{overflow:hidden;min-width:100px;text-align:center;border-radius:4px;background:var(--post-card-bg)}.page-nav .current{font-weight:700;color:#555}.page-nav .current:hover{color:#555}.page-nav>.page-number,.prev-next-post{display:inline-block;min-width:100px;padding:8px 0}.next-post,.page-nav>.next,.page-nav>.prev,.prev-post{position:absolute;display:inline-block;padding:8px 16px;transition:border .3s ease;text-decoration:none;border-radius:4px}.next-post,.prev-post{border:1px solid #dedede}.page-nav>.prev,.prev-post{left:0}.next-post,.page-nav>.next{right:0}.page-nav>.next:hover,.page-nav>.prev:hover,.page-number:hover,.pagination a:hover{color:var(--page-nav--hover)}@media (max-width:800px){.next-post,.page-nav>.next,.page-nav>.prev,.prev-next-post,.prev-post{position:static;width:100%}.page-nav>.page-number{width:33.3%}.pagination{width:100%;margin-bottom:.5rem}.t-g-control{top:unset!important;right:unset!important;bottom:0!important;flex-direction:row!important;width:100%;justify-content:center}.toc-main{width:100%}}#comment{padding-top:2rem}@media (min-width:1170px){#comment{padding:20px 100px 0}::-webkit-scrollbar{width:8px;height:6px;background-color:var(--post-card-bg)}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);border-radius:6px;background-color:var(--post-card-bg)}::-webkit-scrollbar-thumb{border-radius:6px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.3);background-color:#555}}.v .vwrap .vedit .vemojis i{font-size:22px!important}.v *{font-size:15px!important}.v .vlist .vcard .vh .vmeta .vat{color:var(--post-card-link)!important}.v .vbtn{color:var(--post-card-link)!important;background:var(--post-full-content)!important}.v .vbtn:active,.v .vbtn:hover{color:#f6f8fa!important;border-color:var(--page-nav--hover)!important;background:var(--toc-btn-hover)!important}.v .vwrap .vedit .vctrl span{color:var(--body-color)!important}.read-next-card-content-ext{font-size:1.7rem;position:relative;z-index:50;display:flex;flex-grow:1;-ms-flex-positive:1;flex-wrap:wrap}.read-next-card-content-ext a{padding:10px}.toc-bar{z-index:666;position:fixed;height:100%;display:flex;align-items:center;transition:all .5s ease-in-out}.toc-btn-bar svg{width:32px;height:32px;fill:#8a8a8a}.toc-btn{z-index:666;cursor:pointer;margin-right:10px;width:40px;height:40px;display:block;padding:4px;border-radius:4px;background:var(--toc-btn);box-shadow:0 1px 3px rgba(0,0,0,.1);transition:background .1s ease-in-out}.toc-btn:hover{background:var(--toc-btn-hover)}.toc-main{background:var(--floating-header-bg);height:100%;padding:100px 40px;border-left:1px solid rgba(0,0,0,.06);overflow-y:scroll}.toc-main::-webkit-scrollbar{display:none}.toc-main li,.toc-main ol,.toc-main ul{list-style:none}.toc{margin:0;padding:0}@media only screen and (max-width:767px){.toc-bar{width:100%;top:100%}.toc-btn-bar{width:100%;text-align:center;position:fixed;bottom:0;padding-bottom:calc(var(--safe-area-inset-bottom) - 10px);z-index:666;width:100%;display:flex;flex-direction:row;justify-content:center}.toc-btn{margin:0 5px 10px}}@media only screen and (min-width:768px){.toc-bar{right:-100%}.toc-btn:nth-child(2){margin:10px;margin-left:0}} \ No newline at end of file diff --git a/source/css/screen.css b/source/css/screen.css index 20dbc5e..ac3c5e4 100644 --- a/source/css/screen.css +++ b/source/css/screen.css @@ -908,9 +908,6 @@ h6 { border-radius: 5px; background: linear-gradient(135deg, rgba(0, 40, 60, .8), rgba(0, 20, 40, .7)); - - -webkit-backdrop-filter: blur(2px); - backdrop-filter: blur(2px); } .read-next-card-header { @@ -1317,15 +1314,13 @@ h6 { left: 0; display: flex; transition: opacity .2s ease-in; - pointer-events: none; + visibility: none; will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0; background: rgba(0, 25, 40, .97); - -webkit-backdrop-filter: blur(3px); - backdrop-filter: blur(3px); -webkit-box-align: center; -webkit-box-pack: center; -ms-flex-align: center; @@ -1333,7 +1328,7 @@ h6 { } .search-overlay:target { - pointer-events: auto; + visibility: visible; opacity: 1; }