/deep/ .el-backtop { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(1px); background-color: rgba(255,255,255,0.5); color: #272936; z-index: 999; } .article-header { height: 70vh; min-height: 12.5px; position: relative; display: table; text-align: center; overflow: hidden; color: #fff; background-color: #2e2e2e; width: -webkit-calc(100% - -0.0625rem); width: calc(100% - -0.0625rem); -webkit-transition: 1s ease background-color; -moz-transition: 1s ease background-color; -ms-transition: 1s ease background-color; -o-transition: 1s ease background-color; transition: 1s ease background-color; .article-background { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; left: 0; top: 0; overflow: hidden; opacity: 1; -webkit-transition: 1s ease opacity; -moz-transition: 1s ease opacity; -ms-transition: 1s ease opacity; -o-transition: 1s ease opacity; transition: 1s ease opacity; } } .inner { display: table-cell; position: relative; z-index: 10; width: 100%; left: -1px; vertical-align: middle; } .blog-title { font-size: 2.5rem; line-height: 1.5; margin-bottom: .75rem; } @media not all, screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all { .blog-description.font-mono { font-family: Consolas,Menlo,Monaco,"lucida console","Liberation Mono","Courier New","andale mono",monospaceX,monospace,sans-serif; font-size: 1.1125rem; } } .typed-cursor { animation: typedjsBlink 0.7s infinite; -webkit-animation: typedjsBlink 0.7s infinite; animation: typedjsBlink 0.7s infinite; } @keyframes typedjsBlink { 50% { opacity: 0.0; } } @media (min-width: 576px) { .navbar>.container-fluid { max-width: 540px; } } @media screen and (max-width: 768px) { .blog-title { font-size: 1.75rem; font-weight: 400; margin-bottom: .5rem; } .cover-wrapper .cover .cover-body { padding-bottom: 68px; .title { font-size: 2rem; font-weight: 400; } } .article-header .inner { padding-bottom: 80px; } } @media (min-width: 768px){ .navbar>.container-fluid { max-width: 720px; } } @media (min-width: 992px) { .navbar>.container-fluid { max-width: 960px; } } @media (min-width: 1210px) { .navbar>.container-fluid { max-width: 1170px; } }