jekyll-theme-h2o-ac 1.0.0

data/dev/sass/common.scss

@@ -0,0 +1,918 @@
+/*** Main style ***/
+
+.g-container {
+    width: $g-container-w;
+}
+
+.g-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: $g-header-h;
+    padding: 16px 0;
+    background-color: transparent;
+    transition: all .6s;
+    z-index: 1000;
+    .g-logo {
+        float: left;
+        margin-left: 2%;
+        width: 60px;
+        height: $g-header-h;
+        background: url('../icons/logo.svg') no-repeat center;
+        background-size: 100% 100%;
+        opacity: .8;
+        transition: all .2s;
+        &:hover {
+            opacity: 1;
+        }
+        a {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .icon-menu {
+        display: none;
+        position: absolute;
+        top: 22px;
+        right: 0;
+        padding: 8px;
+        font-size: 28px;
+        color: #fff;
+        opacity: .8;
+        border-radius: 3px;
+        &:active {
+            background-color: rgba(255, 255, 255, .2);
+        }
+    }
+
+    .g-nav {
+        float: right;
+        margin-right: 2%;
+        &>ul>li{
+            float: left;
+            height: $g-header-h;
+            line-height: $g-header-h;
+            text-transform: uppercase;
+            margin-right: 18px;
+            &:last-child {
+                margin-right: 0;
+            }
+            &>a {
+                display: inline-block;
+                font-size: 14px;
+                letter-spacing: 1px;
+                color: #fff;
+                padding: 0 12px;
+                opacity: .7;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .nav-default {
+        a:hover {
+            color: $color-theme-default !important;
+        }
+    }
+    .nav-pink {
+        a:hover {
+            color: $color-theme-pink !important;
+        }
+    }
+}
+// header scroll
+.headerUp{
+    top: -65px;
+}
+.headerDown{
+    top: 0;
+}
+
+.g-banner {
+    height: $g-banner-h;
+    background-color: #2F3139;
+    color: #fff;
+    padding: 0 60px;
+}
+
+.home-banner {
+    position: relative;
+    text-align: center;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 38, 55, .16);
+    h2, h3{
+        position: relative;
+        z-index: 1;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
+    }
+    h2 {
+        padding-top: 190px;
+        line-height: 38px;
+        font-size: 42px;
+        font-family: 'Microsoft YaHei', 'Arial', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
+        font-weight: bold;
+        line-height: 52px;
+    }
+    h3 {
+        font-size: 20px;
+        font-weight: 400;
+        margin-top: 8px;
+    }
+}
+
+.banner-theme-default {
+    background: -webkit-linear-gradient(0deg, #3CD5FF, #007AFF);
+    background: -o-linear-gradient(0deg, #3CD5FF, #007AFF);
+    background: -moz-linear-gradient(0deg, #3CD5FF, #007AFF);
+    background: linear-gradient(100deg, #3CD5FF, #007AFF);
+}
+.banner-theme-pink {
+    background: -webkit-linear-gradient(0deg, #FFCE69, #FA709A);
+    background: -o-linear-gradient(0deg, #FFCE69, #FA709A);
+    background: -moz-linear-gradient(0deg, #FFCE69, #FA709A);
+    background: linear-gradient(100deg, #FFCE69, #FA709A);
+}
+
+.themeColor-default {
+    background-color: $color-theme-default;
+}
+.themeColor-pink {
+    background-color: $color-theme-pink;
+}
+
+.home-content {
+    margin: 40px auto 60px;
+    @include clearfix;
+}
+
+.article-list {
+    float: left;
+    width: 695px;
+    .article-item {
+        width: 100%;
+        margin-bottom: 16px;
+        @include cardStyle;
+        &:last-child {
+            margin-bottom: 0;
+        }
+        .post-link {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .post-cover {
+            position: relative;
+            width: 100%;
+            max-height: 300px;
+            margin-bottom: 14px;
+            overflow: hidden;
+            img {
+                width: 100%;
+                vertical-align: middle;
+            }
+        }
+        .post-preview {
+            position: relative;
+            .post-title {
+                font-family: 'Merriweather', $fonts;
+                color: $color-f-primary;
+                font-size: 24px;
+                line-height: 32px;
+            }
+            .post-subtitle {
+                margin-top: 3px;
+                font-size: 18px;
+                font-weight: normal;
+                color: $color-brand;
+                line-height: 26px;
+            }
+            .post-excerpt {
+                margin-top: 8px;
+                font-size: 16px;
+                font-family: 'Merriweather', $fonts;
+                line-height: 26px;
+                word-break: break-all;
+                color: #b8bdc3;
+            }
+        }
+        .post-meta {
+            height: 22px;
+            margin-top: 16px;
+            .post-tags {
+                float: left;
+                display: inline-block;
+            }
+            .post-date {
+                float: right;
+                color: #A9B0BC;
+                @include timeStyle;
+            }
+        }
+    }
+}
+
+.author-card {
+    @include authorCard;
+}
+
+.article-item .post-meta .post-tag, .tags-card .tag, .tags-content .tag{
+    @include tagStyle;
+}
+
+.tags-card .links {
+    width: 100%;
+    font-size: 16px;
+    color: #4e4e4e;
+    font-weight: 500;
+    margin: 12px 0 6px;
+    text-align: center;
+  }
+
+.g-sidebar-wrapper {
+    float: right;
+    width: 240px;
+}
+
+.g-sidebar {
+    @include cardStyle;
+    section {
+        padding: 30px 0;
+        border-bottom: 1px solid #E7EAF1;
+        &:first-child {
+            padding-top: 0;
+        }
+        &:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+        .tag {
+            margin-bottom: 8px;
+        }
+    }
+}
+
+.search-card {
+    position: relative;
+    margin-top: 16px;
+    padding: 0;
+    // float: right;
+    // width: 240px;
+    input, .search_item {
+        font-size: 16px;
+        color: $color-f-primary;
+    }
+    input {
+        @include cardStyle;
+        position: relative;
+        padding: 12px 46px 12px 18px;
+        margin: 0;
+        width: 100%;
+        background-color: #fff;
+        outline: none;
+        z-index: 1;
+    }
+    ::-webkit-input-placeholder {
+        color: #9EA8B3;
+    }
+    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: #9EA8B3;
+    }
+    ::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: #9EA8B3;
+    }
+    .icon-search {
+        position: absolute;
+        top: 10px;
+        right: 18px;
+        font-size: 26px;
+        color: #CAD3DC;
+        transition: .2s;
+        z-index: 1;
+    }
+    .icon {
+        position: absolute;
+        top: 13px;
+        right: 18px;
+        color: #CAD3DC;
+        z-index: 1;
+        width: 20px;
+        height: 20px;
+        vertical-align: -0.15em;
+        fill: currentColor;
+        overflow: hidden;
+    }
+    .search_result {
+        position: relative;
+        margin-top: -2px;
+        // max-height: 230px;
+        background-color: #fff;
+        border-radius: 0 0 4px 4px;
+        // overflow: scroll;
+        z-index: 0;
+    }
+    .search_item {
+        padding: 6px 18px;
+        margin-bottom: 0;
+        width: 100%;
+        display: block;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        white-space: nowrap;
+        border-left: 1px solid #E7EAF1;
+        border-right: 1px solid #E7EAF1;
+        box-sizing: border-box;
+        opacity: .8;
+        transition: .2s;
+        &:first-child {
+            padding-top: 14px;
+        }
+        &:last-child {
+            padding-bottom: 14px;
+            border-radius: 0 0 4px 4px;
+            border-bottom: 1px solid #E7EAF1;
+        }
+        &:hover {
+            opacity: 1;
+            background-color: #FAFAFA;
+        }
+    }
+}
+
+.pagination {
+    float: left;
+    position: relative;
+    left: 50%;
+    margin: 8px auto 0;
+    .page-links {
+        position: relative;
+        left: -50%;
+        border: 1px solid #E7EAF1;
+        border-radius: 3px;
+        background-color: #fff;
+        padding: 0 8px;
+        overflow: auto;
+        box-shadow: 0 1px 3px rgba(0, 37, 55, .06);
+    }
+    .page-link {
+        display: block;
+        float: left;
+        width: 34px;
+        height: 34px;
+        margin: 6px;
+        font-size: 16px;
+        color: #A9B0BC;
+        line-height: 34px;
+        text-align: center;
+        border-radius: 2px;
+        cursor: pointer;
+        &:hover {
+            color: #8F98AA;
+            background-color: #EEF0F4;
+        }
+    }
+    .active {
+        color: #8F98AA;
+        background-color: #EEF0F4;
+    }
+    #page-link-container {
+        display: inline-block;
+        float: left;
+    }
+}
+
+.g-footer {
+    min-height: $g-footer-h;
+    padding: 20px 0;
+    border-top: 1px solid #E7EAF1;
+    text-align: center;
+    section {
+        font-size: 14px;
+        line-height: 20px;
+        color: #4E4E4E;
+        a {
+            color: #4E4E4E;
+            &:hover {
+                color: #83888F;
+            }
+
+        }
+    }
+}
+
+.post-header, .markdown-body, .post-wrapper, .author-detail, .social-share-wrapper {
+    margin: 0 auto;
+}
+.post-wrapper {
+    width: $post-content-w;
+}
+
+.post-header {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    color: #fff;
+    overflow: hidden;
+    background-color: #4285f4;
+    z-index: 0;
+    h1 {
+        font-size: 32px;
+        line-height: 42px;
+        margin-bottom: 12px;
+    }
+    .post-tags {
+        margin: 150px 0 16px;
+        .post-tag {
+            @include tagStyle;
+            color: #fff;
+            background-color: rgba(255, 255, 255, .26);
+            box-shadow: none;
+            margin-bottom: 8px;
+            &:hover {
+                color: #fff;
+                background-color: rgba(255, 255, 255, .4);
+            }
+        }
+    }
+    .post-meta {
+        margin-top: 32px;
+        .post-meta-item {
+            display: inline-block;
+            font-size: 16px;
+            color: #fff;
+            margin-right: 4px;
+            opacity: .8;
+            &:last-child {
+                margin-right: 0;
+            }
+            .iconfont {
+                font-size: 18px;
+                margin-right: 4px;
+            }
+            a {
+                color: #fff;
+            }
+        }
+    }
+
+    .filter {
+        position: absolute;
+        content: '';
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+        opacity: .3;
+        z-index: -1;
+    }
+
+    .post-cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -2;
+    }
+}
+
+.bgcolor-default {
+    background-color: $color-theme-default;
+}
+.bgcolor-pink {
+    background-color: $color-theme-pink;
+}
+
+.post-no-cover {
+    height: 360px;
+    .post-tags {
+        margin-top: 100px;
+    }
+}
+
+.post-pattern-circuitBoard {
+    @include postHeaderPattern('circuitBoard');
+}
+.post-pattern-overlappingCircles {
+    @include postHeaderPattern('overlappingCircles');
+}
+.post-pattern-food {
+    @include postHeaderPattern('food');
+}
+.post-pattern-glamorous {
+    @include postHeaderPattern('glamorous');
+}
+.post-pattern-ticTacToe {
+    @include postHeaderPattern('ticTacToe');
+}
+.post-pattern-seaOfClouds {
+    @include postHeaderPattern('seaOfClouds');
+}
+
+.post-content {
+    position: relative;
+    width: 100%;
+    background-color: #fff;
+    overflow: hidden;
+    padding: 40px 0 80px;
+    .post-subtitle {
+        position: relative;
+        width: $post-content-w;
+        font-size: 18px;
+        color: #a6a6a6;
+        font-weight: normal;
+        line-height: 28px;
+        text-align: center;
+        padding: 35px 0;
+        margin: 0 auto 40px;
+        box-sizing: border-box;
+        &:before, &:after {
+            position: absolute;
+            content: '';
+            left: 50%;
+            margin-left: -13%;
+            width: 26%;
+            height: 2px;
+            background-color: #EAECEE;
+        }
+        &:before {
+            top: 0;
+        }
+        &:after {
+            bottom: 0;
+        }
+    }
+}
+
+// Post style
+.markdown-body {
+    font-family: 'Merriweather', $fonts;
+    width: $post-content-w;
+    box-sizing: border-box;
+    padding: 0 0 32px;
+    .highlight {
+        margin: 0 0 16px;
+        /** overflow: scroll;  修复代码高亮 显示两个 scroll的问题 **/ 
+    }
+    img {
+        transition: .3s;
+    }
+    ul, ol {
+        li {
+            p {
+                margin: 0;
+                &:first-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+.social-share-wrapper {
+    float: left;
+    position: relative;
+    left: 50%;
+    .social-share {
+        position: relative;
+        left: -50%;
+    }
+}
+
+.post-footer-item {
+    margin: 0 auto;
+    width: $post-content-w;
+}
+
+.author-detail {
+    position: relative;
+    top: -35px;
+    .comment {
+        margin-bottom: 60px;
+    }
+}
+
+.read-next {
+    display: flex;
+    width: $post-content-w;
+    margin: 60px auto;
+}
+.read-next-item {
+    position: relative;
+    flex: 1;
+    height: 260px;
+    padding: 0;
+    top: 0;
+    background-color: #AAB4CA;
+    border-radius: 3px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(109, 127, 144, .5);
+    transition: box-shadow .4s ease, top .3s ease;
+    &:first-child {
+        margin-right: 10px;
+    }
+    &:hover {
+        top: -5px;
+        box-shadow: 0 8px 20px rgba(52, 61, 70, .3);
+    }
+    .read-next-link {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
+    }
+    section {
+        display: none;
+        position: relative;
+        width: 80%;
+        margin-left: 10%;
+        margin-top: 45px;
+        color: #fff;
+        z-index: 2;
+        span {
+            font-size: 22px;
+            font-weight: bold;
+            margin: 0;
+        }
+        p {
+            margin-top: 8px;
+            font-size: 15px;
+            line-height: 22px;
+            opacity: .8;
+        }
+    }
+    .filter {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, .22);
+        z-index: 1;
+        transition: .3s linear;
+    }
+    img {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        -webkit-filter: blur(6px);
+        z-index: 0;
+    }
+}
+
+.tags-banner {
+    height: 300px;
+    text-align: center;
+    h2 {
+        font-size: 36px;
+        line-height: 300px;
+    }
+}
+.tags-content {
+    width: 695px;
+    margin: -100px auto 0;
+}
+.tags-list {
+    padding: 40px 0;
+    li {
+        @include cardStyle;
+        margin-bottom: 12px;
+        &:first-child {
+            margin-bottom: 24px;
+            cursor: default;
+        }
+        .tag {
+            box-shadow: 0 0 .3px #BFC2C6;
+            margin-bottom: 12px;
+        }
+        .tag-name {
+            display: block;
+            font-size: 20px;
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .tag-post {
+            display: block;
+            font-size: 16px;
+            color: #666;
+            text-align: center;
+            margin: 16px auto;
+            &:hover {
+                color: #000;
+            }
+        }
+    }
+
+}
+
+// 404 page
+.np-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 !important;
+    text-align: center;
+    h1 {
+        font-size: 86px;
+        letter-spacing: 4px;
+        font-weight: normal;
+        padding: 160px 0 20px;
+    }
+    .subheading {
+        font-size: 18px;
+    }
+    .btn {
+        display: block;
+        width: 160px;
+        height: 38px;
+        font-size: 16px;
+        color: #fff;
+        line-height: 38px;
+        border-radius: 3px;
+        border: 1px solid #fff;
+        margin: 80px auto 0;
+        opacity: .8;
+    }
+
+}
+
+// 夜间模式
+.night-mode {
+    background-color: $color-dark-primary;
+
+    .g-banner {
+        background-color: $color-dark-primary;
+        color: #C8CDD3;
+    }
+
+    .post-header {
+        .filter {
+            opacity: .6;
+        }
+    }
+
+    .article-item, .g-sidebar, .page-links, .search-card input, .search_result,
+    .search_item, .article-item .post-tag, .tags-card .tag, .tags-list li,
+    .tags-list .tag {
+        color: $color-f-dark;
+        background-color: $color-dark-secondary;
+        border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .article-item {
+        .post-cover img {
+            -webkit-filter: brightness(.6);
+        }
+        .post-preview {
+            .post-title, .post-subtitle, .post-excerpt {
+                color: $color-f-dark;
+            }
+        }
+        .post-meta {
+            .post-tags, .post-date {
+                color: $color-f-dark;
+            }
+        }
+    }
+
+    .pagination {
+        .page-link{
+            &:hover {
+                background-color: rgba(255, 255, 255, .1);
+            }
+        }
+        .active {
+            background-color: rgba(255, 255, 255, .1);
+        }
+    }
+
+    .g-sidebar {
+        section {
+            border-bottom: 1px solid rgba(255, 255, 255, .1);
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+    .avatar img {
+        -webkit-filter: brightness(.6);
+    }
+    .author-name, .bio {
+        color: $color-f-dark;
+    }
+    .search_result {
+        .search_item {
+            &:last-child {
+                border-color: rgba(255, 255, 255, 0.1);
+            }
+            &:hover {
+                background-color: transparent;
+                color: #fff;
+            }
+        }
+    }
+    .article-item .post-tag, .tags-card .tag {
+        border: none;
+    }
+    .tags-list {
+        li {
+            .tag-name, .tag-post {
+                color: $color-f-dark;
+            }
+        }
+    }
+    .g-footer {
+        border-color: rgba(255, 255, 255, 0.1);
+        section {
+            color: $color-f-dark;
+        }
+    }
+    .post-content {
+        background-color: $color-dark-primary;
+        .post-subtitle {
+            &:before, &:after {
+                background-color: #575B63;
+            }
+        }
+    }
+
+    .markdown-body {
+        color: $color-f-dark;
+        img {
+            -webkit-filter: brightness(.6);
+        }
+        blockquote {
+            border-left-color: #555A61;
+        }
+    }
+    .read-next-item {
+        background-color: #484D59;
+        section {
+            color: #AEB4BD;
+        }
+        .filter {
+            background-color: rgba(0, 0, 0, .6);
+        }
+    }
+    :not(pre) > code[class*="language-"], pre[class*="language-"] {
+        background-color: $color-dark-secondary;
+    }
+    code[class*="language-"], pre[class*="language-"], .token.punctuation,
+    .token.operator, .token.entity, .token.url, .language-css .token.string,
+    .style .token.string, .token.variable {
+        color: #8F97A7;
+    }
+    .token.atrule, .token.attr-value, .token.function {
+        color: #A9A054;
+    }
+    .token.selector, .token.attr-name, .token.string, .token.char,
+    .token.builtin, .token.inserted {
+        color: #84AC35;
+    }
+    .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
+        color: #D75885;
+    }
+    .token.keyword {
+        color: #61BDCF;
+    }
+}
+
+.archives-date {
+    width: 130px;
+    display: inline-block;
+}
+  
+.archives-title {
+    width: 95%;
+    display: inline-block;
+    margin-bottom: 0!important;
+    margin-top: 0!important;
+}
+
+.markdown-body a {
+    color: #005b81;
+    text-decoration: none;
+}
+
+.markdown-body a:hover {
+    color: #e32e00;
+    text-decoration: underline;
+}
+
+.markdown-body p {
+    font-size: 16px;
+}