::-webkit-scrollbar { display: none; } body { background: #fcfcfc; padding: 0; margin: 0; font-family: "Lora", "source-han-serif-tc", serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; color: black; } * { color: black; line-height: 1.5em; word-wrap: break-word; } h1 { font-size: 30px; } h2 { font-size: 27px; } h3 { font-size: 24px; } h4 { font-size: 21px; } h5 { font-size: 18px; } h6 { font-size: 15px; } textarea, select, input, button { outline: none !important; } button { cursor: hand; cursor: pointer; } code { color: #7a422c; background: rgba(159, 86, 58, 0.07) !important; padding: 2px 5px; border-radius: 3px; font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; } pre { background: rgba(159, 86, 58, 0.07) !important; color: #7a422c; padding: 12px 15px; border-radius: 5px; font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; } pre * { background: none !important; font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace !important; } pre code { padding: 0; } blockquote { padding: 10px 20px; border-left: 3px solid rgba(159, 86, 58, 0.7); color: #7a422c; background: rgba(159, 86, 58, 0.05); } blockquote p { margin-bottom: 0; } blockquote * { color: #7a422c; } a { color: #9f563a; } a:hover { color: #7a422c; text-underline-position: under; } @media screen and (max-width: 1020px) { a:hover { text-decoration: none !important; } } .a-block { display: block; text-decoration: none !important; } .a-block:hover { text-decoration: none !important; } .no-margin { margin: 0; } .no-padding { padding: 0; } .no-overflow { overflow: hidden !important; } .animated-visibility { transition: visibility 0s, opacity 0.5s linear; visibility: visible; opacity: 1; } .invisible { visibility: hidden; opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } #lv-container { padding: 0 30px; } @media screen and (max-width: 1020px) { #lv-container { padding: 0 15px; } } .single-column-nav-container { display: none !important; } @media screen and (max-width: 1020px) { .single-column-nav-container { display: block !important; padding: 0; } .single-column-nav-container * { font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif; transition: opacity 0.5s ease-in-out; } .single-column-nav-container button { padding: 0; } .single-column-nav-container .nav-content { padding: 12px 20px; justify-content: flex-start; max-width: unset !important; } .single-column-nav-container .navbar-brand { opacity: 0; text-align: left; padding-left: 24px !important; } .single-column-nav-container .nav-dropdown-toggle { display: flex; align-content: center; align-items: center; justify-items: center; justify-content: center; background: none !important; border: none; padding-top: 1px; } .single-column-nav-container .nav-dropdown-toggle:hover { color: #3f587d !important; } .single-column-nav-container .nav-icon-group { z-index: 5; padding-right: 5px; } .single-column-nav-container .nav-icon-group ul { list-style: none; margin: 0; padding: 0; } .single-column-nav-container .nav-icon-group li { display: inline; margin: 0; padding: 0; } .single-column-nav-container .nav-icon { padding: 8px; } .single-column-nav-container .nav-background { opacity: 0; z-index: -1; left: 0; position: absolute; width: 100%; height: 100%; background: white; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } } .single-column-header-container { display: none !important; } @media screen and (max-width: 1020px) { .single-column-header-container { display: block !important; padding: 50px 20px 80px 20px; transition: padding 0.5s ease-in-out, margin 0.5s ease-in-out; text-align: center; } .single-column-header-container * { font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif; color: black; } .single-column-header-container .single-column-header-title { font-size: 28px; } .single-column-header-container .single-column-header-subtitle { font-size: 20px; } } .single-column-drawer-container { display: none !important; } @media screen and (max-width: 1020px) { .single-column-drawer-container { display: block !important; position: fixed; top: 0; left: -260px; width: 260px; height: 100vh; z-index: 1800; transition: all 0.3s ease-in-out; } .single-column-drawer-container .drawer-content { background: white; height: 100%; width: 100%; padding: 50px 0 80px 0; display: flex; } .single-column-drawer-container .drawer-content .drawer-menu { flex-grow: 1; display: flex; justify-items: center; justify-content: center; flex-direction: column; } .single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item { font-size: 18px; margin-bottom: 10px; border-right: 2px solid transparent; padding: 8px 30px 8px 30px; cursor: hand; cursor: pointer; transition: all 0.2s linear; color: black; } .single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active { border-right: 2px solid #9f563a; background: rgba(159, 86, 58, 0.1); color: #2f1911; } } .single-column-drawer-mask { display: none !important; } @media screen and (max-width: 1020px) { .single-column-drawer-mask { display: block !important; position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 1600; transition: all 0.3s ease-in-out; } } .single-column-drawer-container-active { left: 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } .side-container { position: fixed; top: 0; height: 100vh; width: 25%; text-align: right; font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif; padding: 20px 0 50px 0; overflow-x: hidden; overflow-y: scroll; display: flex; flex-direction: column; justify-content: space-between; scrollbar-width: none; } .side-container .nav-head { padding: 30px 28px 30px 20px; cursor: hand; cursor: pointer; margin-bottom: 10px; transition: all 0.2s linear; color: black; border-right: 2px solid transparent; } .side-container .nav-head .nav-title { font-size: 30px; line-height: 42px; } .side-container .nav-head .nav-subtitle { margin-top: 8px; font-size: 18px; } .side-container .nav-head:hover { border-right: 2px solid rgba(159, 86, 58, 0.6); background: rgba(159, 86, 58, 0.02); color: #2f1911; } .side-container .nav-head.active { border-right: 2px solid #9f563a; background: rgba(159, 86, 58, 0.03); color: #542e1f; } .side-container .nav-link-list { flex-grow: 1; } .side-container .nav-link-list .nav-link-item { font-size: 20px; margin-bottom: 10px; border-right: 2px solid transparent; padding: 8px 28px 8px 30px; cursor: hand; cursor: pointer; transition: all 0.2s linear; color: black; } .side-container .nav-link-list .nav-link-item:hover { border-right: 2px solid rgba(159, 86, 58, 0.6); background: rgba(159, 86, 58, 0.02); color: #2f1911; } .side-container .nav-link-list .nav-link-item.active { border-right: 2px solid #9f563a; background: rgba(159, 86, 58, 0.03); color: #542e1f; } .side-container .nav-footer { padding: 20px 30px 0 20px; font-size: 12px; } @media screen and (max-width: 1020px) { .side-container { display: none; } } .extra-container { position: fixed; top: 0; right: 0; height: 100vh; width: 64px; text-align: right; font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif; overflow-x: hidden; overflow-y: scroll; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 0; scrollbar-width: none; } .extra-container .pagination { display: flex; flex-direction: column; } .extra-container .pagination .pagination-indicator { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; justify-items: center; width: 64px; padding: 15px 0; font-size: 12px; font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; } .extra-container .pagination .pagination-action { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; justify-items: center; width: 64px; cursor: hand; cursor: pointer; padding: 15px 0; } .extra-container .pagination .pagination-action :not(.pagination-action-icon) { transition: all 0.2s linear; font-size: 13px; font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; } .extra-container .pagination .pagination-action * { transition: all 0.3s linear; } .extra-container .pagination .pagination-action:hover { text-decoration: none; } .extra-container .pagination .pagination-action:hover * { color: #7a422c; } @media screen and (max-width: 1020px) { .extra-container { display: none; } } .pagination-bar-container { position: fixed; top: 0; right: 0; height: 100vh; width: 25%; text-align: right; font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif; padding: 20px 0; overflow: scroll; display: flex; flex-direction: column; } .stream-container { padding-left: 25%; padding-right: 64px; width: 100%; min-height: 100vh; max-width: 1480px; } @media screen and (max-width: 1020px) { .stream-container { padding: 0; min-height: unset; } } .stream-container .post-list-container { width: 100%; min-height: 100vh; padding: 20px 0 20px 0; background: #ffffff; box-shadow: 0 0 16px rgba(0, 0, 0, 0.12); } @media screen and (max-width: 1020px) { .stream-container .post-list-container { min-height: unset; padding: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); } } .stream-container .post-list-container .post-item-wrapper, .stream-container .post-list-container > * .post-item-wrapper { cursor: hand; cursor: pointer; transition: all 0.2s linear; } .stream-container .post-list-container .post-item-wrapper .post-item, .stream-container .post-list-container > * .post-item-wrapper .post-item { margin: 0 28px 0 35px; padding: 30px 0; display: flex; flex-direction: row; align-items: center; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item, .stream-container .post-list-container > * .post-item-wrapper .post-item { flex-direction: column-reverse; margin: 0 0 15px 0; padding: 0; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); background: #ffffff; } } .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper { flex-grow: 1; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper { width: 100%; padding: 15px 20px; } } .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title { font-size: 30px; font-weight: 600; font-style: normal; margin-bottom: 10px; line-height: 1.5em; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title { font-size: 22px; margin-bottom: 5px; } } .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small { font-size: 22px; margin-bottom: 0; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small { font-size: 14px; } } .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary { font-size: 16px; line-height: 1.5em; margin-bottom: 10px; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary { font-size: 16px; margin-bottom: 5px; } } .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta { font-size: 16px; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta { font-size: 14px; } } .stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-image-wrapper { margin-left: 20px; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-image-wrapper { width: 100%; margin-left: 0; } } .stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image { width: 230px; height: 120px; background: no-repeat center; background-size: cover; border-radius: 5px; overflow: hidden; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image, .stream-container .post-list-container > * .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image { width: 100%; height: 180px; border-radius: 0; } } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper .post-item-no-divider, .stream-container .post-list-container > * .post-item-wrapper .post-item-no-divider { border-bottom: none !important; } .stream-container .post-list-container .post-item-wrapper .post-item-no-gaps, .stream-container .post-list-container > * .post-item-wrapper .post-item-no-gaps { margin: 0; box-shadow: none; } } .stream-container .post-list-container .post-item-wrapper *, .stream-container .post-list-container > * .post-item-wrapper * { transition: all 0.2s linear; } .stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover, .stream-container .post-list-container > * .post-item-wrapper:not(.post-item-wrapper-no-hover):hover { text-decoration: none; background: rgba(0, 0, 0, 0.03); } .stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title, .stream-container .post-list-container > * .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title { text-decoration: underline; text-decoration-style: 2px solid #9f563a; text-underline-position: under; } .stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *, .stream-container .post-list-container > * .post-item-wrapper:not(.post-item-wrapper-no-hover):hover * { color: #7a422c; } @media screen and (max-width: 1020px) { .stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title, .stream-container .post-list-container > * .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title { text-decoration: none !important; } } .stream-container .post-list-container .post-item-wrapper-no-hover, .stream-container .post-list-container > * .post-item-wrapper-no-hover { cursor: unset; } .stream-container .post-list-container:not(:last-child) .post-item, .stream-container .post-list-container > *:not(:last-child) .post-item { border-bottom: 1px solid rgba(128, 128, 128, 0.12); } @media screen and (max-width: 1020px) { .stream-container .post-list-container-no-background { background: none; } } @media screen and (max-width: 1020px) { .stream-container .post-list-container-shadow { box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1); } } .stream-container .post-list-footer { text-align: center; width: 100%; opacity: 0.3; color: black; font-family: "Lora", "source-han-serif-tc", serif; font-size: 13px; padding: 15px; } .stream-container .post { padding: 0 0 20px 0; } .stream-container .post .post-head-wrapper { margin-top: -20px; background: no-repeat center; background-size: cover; position: relative; padding-top: 140px; } @media screen and (max-width: 1020px) { .stream-container .post .post-head-wrapper { padding-top: 120px; } } .stream-container .post .post-head-wrapper * { color: white; } .stream-container .post .post-head-wrapper .post-title { padding: 80px 35px 30px 35px; font-size: 30px; font-weight: 600; font-style: normal; line-height: 1.5em; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#c6000000', GradientType=0); /* IE6-9 */ } @media screen and (max-width: 1020px) { .stream-container .post .post-head-wrapper .post-title { font-size: 22px; padding: 80px 20px 30px 20px; } } .stream-container .post .post-head-wrapper .post-title .post-meta { margin: 0; } .stream-container .post .post-head-wrapper .post-title .post-meta, .stream-container .post .post-head-wrapper .post-title .post-meta * { font-size: 16px; } .stream-container .post .post-head-wrapper .post-title .post-meta .material-icons { vertical-align: middle; margin-bottom: 3px; } @media screen and (max-width: 1020px) { .stream-container .post .post-head-wrapper .post-title .post-meta, .stream-container .post .post-head-wrapper .post-title .post-meta * { font-size: 14px; } } .stream-container .post .post-head-wrapper-text-only { padding: 30px 35px 0 35px; } @media screen and (max-width: 1020px) { .stream-container .post .post-head-wrapper-text-only { padding: 30px 20px 0 20px; } } .stream-container .post .post-head-wrapper-text-only .post-title { font-size: 30px; font-weight: 600; font-style: normal; line-height: 1.5em; } .stream-container .post .post-head-wrapper-text-only .post-title .post-meta { margin: 0; } .stream-container .post .post-head-wrapper-text-only .post-title .post-meta, .stream-container .post .post-head-wrapper-text-only .post-title .post-meta * { font-size: 16px; } .stream-container .post .post-head-wrapper-text-only .post-title .post-meta .material-icons { vertical-align: middle; margin-bottom: 3px; } @media screen and (max-width: 1020px) { .stream-container .post .post-head-wrapper-text-only .post-title .post-meta, .stream-container .post .post-head-wrapper-text-only .post-title .post-meta * { font-size: 14px; } } @media screen and (max-width: 1020px) { .stream-container .post .post-head-wrapper-text-only .post-title { font-size: 22px; } } .stream-container .post .post-body-wrapper { padding: 30px 35px 35px 35px; } @media screen and (max-width: 1020px) { .stream-container .post .post-body-wrapper { padding: 20px 20px 35px 20px; } } .stream-container .post .post-body-wrapper .post-body { font-size: 16px; line-height: 1.5em; } .stream-container .post .post-body-wrapper .post-body * { word-wrap: break-word; } .stream-container .post .post-body-wrapper .post-body img { max-width: 100%; border-radius: 5px; overflow: hidden; } @media screen and (max-width: 1020px) { .stream-container .post .post-body-wrapper .post-body { font-size: 16px; } } .stream-container .post .post-body-wrapper .post-body .toc { float: right; border-radius: 5px; background: rgba(159, 86, 58, 0.05); padding: 30px; margin-left: 30px; margin-bottom: 30px; } .stream-container .post .post-body-wrapper .post-body .toc, .stream-container .post .post-body-wrapper .post-body .toc * { font-size: 16px; } .stream-container .post .post-body-wrapper .post-body .toc ul { list-style: decimal; padding: 0 0 0 20px; margin: 0; } @media screen and (max-width: 1020px) { .stream-container .post .post-body-wrapper .post-body .toc, .stream-container .post .post-body-wrapper .post-body .toc * { font-size: 14px; } } .stream-container .post .post-pagination { padding: 20px 35px; width: 100%; display: flex; justify-content: space-between; } .stream-container .post .post-pagination .newer-posts { padding-right: 5px; text-align: left; width: 50%; } .stream-container .post .post-pagination .older-posts { padding-left: 5px; text-align: right; width: 50%; } @media screen and (max-width: 1020px) { .stream-container .post .post-pagination { padding: 20px 20px; } } .stream-container .post .post-comment-wrapper { padding: 20px 35px; } .stream-container .post .post-comment-wrapper iframe { overflow: hidden !important; } @media screen and (max-width: 1020px) { .stream-container .post .post-comment-wrapper { padding: 20px 20px; } } .stream-container .pagination { display: none; } @media screen and (max-width: 1020px) { .stream-container .pagination { display: flex !important; flex-direction: row; justify-content: space-between; } .stream-container .pagination:not(.index-page) { margin-top: 15px; } .stream-container .pagination .pagination-indicator { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; justify-items: center; width: 64px; padding: 15px 0; font-size: 12px; font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; } .stream-container .pagination .pagination-action { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; justify-items: center; width: 64px; cursor: hand; cursor: pointer; padding: 15px 0; } .stream-container .pagination .pagination-action :not(.pagination-action-icon) { transition: all 0.2s linear; font-size: 13px; font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; } .stream-container .pagination .pagination-action * { transition: all 0.3s linear; } .stream-container .pagination .pagination-action:hover { text-decoration: none; } .stream-container .pagination .pagination-action:hover * { color: #7a422c; } } /*.stream-container .single-column-footer*/ .single-column-footer { display: none; } @media screen and (max-width: 1020px) { .single-column-footer { display: block !important; text-align: center; font-size: 13px; font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif; padding: 40px 20px 40px 20px; } }