jekyll-theme-gaeblogx 0.1.0

data/_sass/_index.scss

@@ -0,0 +1,174 @@
+.page[index] {
+    a {
+        color: #4d6dad;
+        transition: 0.5s ease;
+        &:hover {
+            color: #223253;
+        }
+    }
+    .left {
+        >ul {
+            padding: 0;
+            >li {
+                list-style: none;
+            }
+            li {
+                color: #333;
+                h2 {
+                    border: none;
+                    font-size: 27px;
+                    margin: 0;
+                }
+                .label {
+                    margin-bottom: 15px;
+                    overflow: hidden;
+                    .label-card {
+                        float: left;
+                        margin-right: 15px;
+                        i {
+                            padding-right: 0;
+                            margin-right: 3px;
+                            color: #6b6a6a;
+                        }
+                    }
+                    .categories {
+                        padding: 0;
+                    }
+                }
+                .excerpt {
+                    h2 {
+                        font-size: 24px;
+                    }
+                    h3 {
+                        font-size: 22px;
+                    }
+                    h4 {
+                        font-size: 20px;
+                    }
+                }
+                .read-all {
+                    text-align: right;
+                    font-size: 14px;
+                    a {
+                        color: #778ab0;
+                        transition: 0.2s ease;
+                        &:hover {
+                            color: #5872a7;
+                        }
+                        i {
+                            padding-right: 3px;
+                        }
+                    }
+                }
+            }
+        }
+        .pagination {
+            text-align: center;
+            .previous,
+            .next {
+                font-size: 20px;
+                padding: 0 5px;
+            }
+            .page_number {
+                padding: 0 5px;
+            }
+            .disable {
+                color: #cbcbcb;
+            }
+        }
+    }
+    .right {
+        .wrap {
+            .side {
+                margin-bottom: 20px;
+                padding-bottom: 0;
+                i {
+                    margin-right: 3px;
+                }
+                .content-ul[cate] {
+                    overflow: hidden;
+                    list-style: none;
+                    margin: 0;
+                    padding: 0;
+                    li {
+                        font-size: 14px;
+                        a {
+                            display: block;
+                            width: 100%;
+                            padding: 2px 0;
+                            border-bottom: 1px solid #eee;
+                            &:hover {
+                                background-color: #dbdfee;
+                                .badge {
+                                    background-color: #dbdfee;
+                                    transform: scale(1.2) rotate(360deg);
+                                }
+                            }
+                            .name {
+                                padding-left: 15px;
+                            }
+                            .badge {
+                                display: block;
+
+                                // width: 20px;
+                                float: right;
+                                text-align: center;
+                                margin-right: 15px;
+                                margin-top: 3px;
+                                padding: 0 10px;
+                                font-size: 12px;
+                                color: #fff;
+                                background-color: #bbb;
+                                border-radius: 50%;
+                                transition: 0.5s ease-in-out;
+                            }
+                        }
+                        &:last-of-type a {
+                            border: none;
+                        }
+                    }
+                }
+                .content-ul[recent]{
+                    padding-bottom: 16px;
+                    li{
+                        color:#aaa;
+                        font-size: 14px;
+                    }
+                }
+                .tags-cloud {
+                    font-weight: normal;
+                    a {
+                        padding: 0 3px;
+                        border-radius: 5px;
+                        &:hover {
+                            background-color: #f0e7ce;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 770px) {
+    .page[index] {
+        .left>ul li {
+            h2 {
+                font-size: 22px;
+            }
+            .excerpt {
+                h2 {
+                    font-size: 20px;
+                }
+                h3 {
+                    font-size: 18px;
+                }
+                h4 {
+                    font-size: 16px;
+                }
+                li{
+                    margin: 0;
+                }
+            }
+        }
+    }
+}

data/_sass/_layout.scss

@@ -0,0 +1,242 @@
+/**
+ * Site header
+ */
+.site-header {
+    border-top: 5px solid $grey-color-dark;
+    border-bottom: 1px solid $grey-color-light;
+    min-height: 56px;
+
+    // Positioning context for the mobile navigation icon
+    position: relative;
+}
+
+.site-title {
+    font-size: 26px;
+    font-weight: 300;
+    line-height: 56px;
+    letter-spacing: -1px;
+    margin-bottom: 0;
+    float: left;
+
+    &,
+    &:visited {
+        color: $grey-color-dark;
+    }
+}
+
+.site-nav {
+    float: right;
+    line-height: 56px;
+
+    .menu-icon {
+        display: none;
+    }
+
+    .page-link {
+        color: $text-color;
+        line-height: $base-line-height;
+
+        // Gaps between nav items, but not on the last one
+        &:not(:last-child) {
+            margin-right: 20px;
+        }
+    }
+
+    @include media-query($on-palm) {
+        position: absolute;
+        top: 9px;
+        right: $spacing-unit / 2;
+        background-color: $background-color;
+        border: 1px solid $grey-color-light;
+        border-radius: 5px;
+        text-align: right;
+
+        .menu-icon {
+            display: block;
+            float: right;
+            width: 36px;
+            height: 26px;
+            line-height: 0;
+            padding-top: 10px;
+            text-align: center;
+
+            > svg {
+                width: 18px;
+                height: 15px;
+
+                path {
+                    fill: $grey-color-dark;
+                }
+            }
+        }
+
+        .trigger {
+            clear: both;
+            display: none;
+        }
+
+        &:hover .trigger {
+            display: block;
+            padding-bottom: 5px;
+        }
+
+        .page-link {
+            display: block;
+            padding: 5px 10px;
+
+            &:not(:last-child) {
+                margin-right: 0;
+            }
+            margin-left: 20px;
+        }
+    }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+    border-top: 1px solid $grey-color-light;
+    padding: $spacing-unit 0;
+}
+
+.footer-heading {
+    font-size: 18px;
+    margin-bottom: $spacing-unit / 2;
+}
+
+.contact-list,
+.social-media-list {
+    list-style: none;
+    margin-left: 0;
+}
+
+.footer-col-wrapper {
+    font-size: 15px;
+    color: $grey-color;
+    margin-left: -$spacing-unit / 2;
+    @extend %clearfix;
+}
+
+.footer-col {
+    float: left;
+    margin-bottom: $spacing-unit / 2;
+    padding-left: $spacing-unit / 2;
+}
+
+.footer-col-1 {
+    width: -webkit-calc(35% - (#{$spacing-unit} / 2));
+    width:         calc(35% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+    width: -webkit-calc(20% - (#{$spacing-unit} / 2));
+    width:         calc(20% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+    width: -webkit-calc(45% - (#{$spacing-unit} / 2));
+    width:         calc(45% - (#{$spacing-unit} / 2));
+}
+
+@include media-query($on-laptop) {
+    .footer-col-1,
+    .footer-col-2 {
+        width: -webkit-calc(50% - (#{$spacing-unit} / 2));
+        width:         calc(50% - (#{$spacing-unit} / 2));
+    }
+
+    .footer-col-3 {
+        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+        width:         calc(100% - (#{$spacing-unit} / 2));
+    }
+}
+
+@include media-query($on-palm) {
+    .footer-col {
+        float: none;
+        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+        width:         calc(100% - (#{$spacing-unit} / 2));
+    }
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+    padding: $spacing-unit 0;
+}
+
+.page-heading {
+    font-size: 20px;
+}
+
+.post-list {
+    margin-left: 0;
+    list-style: none;
+
+    > li {
+        margin-bottom: $spacing-unit;
+    }
+}
+
+.post-meta {
+    font-size: $small-font-size;
+    color: $grey-color;
+}
+
+.post-link {
+    display: block;
+    font-size: 24px;
+}
+
+
+
+/**
+ * Posts
+ */
+.post-header {
+    margin-bottom: $spacing-unit;
+}
+
+.post-title {
+    font-size: 42px;
+    letter-spacing: -1px;
+    line-height: 1;
+
+    @include media-query($on-laptop) {
+        font-size: 36px;
+    }
+}
+
+.post-content {
+    margin-bottom: $spacing-unit;
+
+    h2 {
+        font-size: 32px;
+
+        @include media-query($on-laptop) {
+            font-size: 28px;
+        }
+    }
+
+    h3 {
+        font-size: 26px;
+
+        @include media-query($on-laptop) {
+            font-size: 22px;
+        }
+    }
+
+    h4 {
+        font-size: 20px;
+
+        @include media-query($on-laptop) {
+            font-size: 18px;
+        }
+    }
+}

data/_sass/_page.scss

@@ -0,0 +1,238 @@
+.clearfix:after {
+    content: "\200B";
+    display: block;
+    height: 0;
+    clear: both;
+}
+.clearfix {
+    *zoom: 1;
+}
+.page {
+    width: 1140px;
+    box-sizing: border-box;
+    margin: 0 auto;
+    // word-break: break-all;
+    .left {
+        width: 75%;
+        float: left;
+        padding: 20px 30px;
+        line-height: 1.6;
+        font-size: 16px;
+        background-color: #f8f8fd;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.4),0 0 30px rgba(10,10,0,0.1) inset;
+        >h1 {
+            margin-bottom: -10px;
+        }
+        a:not([title]){
+            word-break: break-all;
+        }
+        ul {
+            >h2 {
+                margin-left: -40px;
+                color: #6a6b6b;
+            }
+            li {
+                line-height: 1.8;
+                color: #888888;
+                time {
+                    display: inline-block;
+                    width: 135px;
+                }
+                .title {
+                    font-weight: bold;
+                    color: #223253;
+                    transition: 0.3s ease;
+                    &:hover {
+                        color: #4d6dad;
+                    }
+                }
+                i {
+                    margin-right: 5px;
+                }
+                .categories {
+                    padding: 0 15px;
+                    i {
+                        color: #9e9d9d;
+                    }
+                    a {
+                        padding: 0 5px;
+                        background-color: #9e9d9d;
+                        color: #fff;
+                        font-size: 90%;
+                        transition: 0.3s ease;
+                        &:hover {
+                            background-color: #b6b6b9;
+                        }
+                    }
+                }
+                .pageTag {
+                    i {
+                        color: #c6cbe9;
+                    }
+                    a {
+
+                        // border: 1px solid #aaa;
+                        padding: 0 5px;
+                        background-color: #c6cbe9;
+                        border-radius: 4px;
+                        color: #fff;
+                        font-size: 90%;
+                        transition: 0.3s ease;
+                        &:hover {
+                            background-color: #c0ddc7;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .anchor {
+        display: none;
+    }
+    .right {
+        float: left;
+        width: 25%;
+        padding-left: 20px;
+        top: 0;
+        .fixed {
+            position: fixed;
+            top: 20px;
+        }
+        .scroll-bottom {
+            position: absolute;
+            bottom: 190px;
+        }
+        .side {
+            box-sizing: border-box;
+            background-color: #f8f8fd;
+            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 0 30px rgba(10, 10, 0, 0.1) inset;
+            padding-bottom: 1px;
+            -ms-word-break: break-all;
+            word-break: break-all;
+            margin-bottom: 20px;
+            /* Non standard for webkit */
+            // word-break: break-word;
+            -webkit-hyphens: auto;
+            -moz-hyphens: auto;
+            -ms-hyphens: auto;
+            hyphens: auto;
+            >div {
+                padding: 12px 15px;
+
+                // margin-right: -10px;
+                border-bottom: 1px solid #c0c0c0;
+                font-size: 16px;
+                font-weight: bold;
+            }
+            a {
+                color: #4d6dad;
+                transition: 0.5s ease;
+                &:hover {
+                    color: #223253;
+                }
+            }
+        }
+        .content-ul {
+            overflow-y: auto;
+            padding-right: 10px;
+            line-height: 1.8;
+            padding-left: 35px;
+            ul {
+                padding-left: 20px;
+            }
+        }
+    }
+}
+@media screen and (max-width:1200px) and (min-width: 770px) {
+    .page {
+        width: 90%;
+    }
+}
+@media screen and (max-width: 770px) {
+    .page {
+        width: 95%;
+        .left {
+            width: 100%;
+            float: left;
+            padding: 10px 14px;
+            font-size: 14px;
+            >h1 {
+                font-size: 25px;
+                margin-bottom: -10px;
+            }
+            ul {
+                padding-left: 20px;
+                >h2 {
+                    font-size: 20px;
+
+                    // margin: 0;
+                    margin-left: -20px;
+                }
+                li {
+                    margin: 20px 0;
+                    time {
+                        display: block;
+                        width: auto;
+                    }
+                    .title {
+                        display: block;
+                        font-size: 16px;
+                    }
+                    .categories {
+                        font-size: 12px;
+                        padding-left: 0;
+                        padding-right: 10px;
+                    }
+                }
+            }
+        }
+        .anchor {
+            display: block;
+            visibility: visible;
+            position: fixed;
+            top: 76px;
+            right: 2.5%;
+            padding: 5px 10px;
+            color: #333;
+            font-size: 15px;
+            background-color: #f8f8fd;
+            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 30px rgba(10, 10, 0, 0.1) inset;
+            opacity: 0.7;
+            transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38);
+        }
+        .anchor-hide {
+            opacity: 0;
+            visibility: hidden;
+        }
+        .right {
+            visibility: hidden;
+
+            // display: none;
+            position: fixed;
+
+            // z-index: 190;
+            float: none;
+            width: auto;
+            max-width: 95%;
+            padding: 0;
+            top: 76px;
+            right: 2.5%;
+            opacity: 0;
+            transform-origin: 100% 0;
+            transform: scale(0.1);
+            transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38);
+        }
+        .right-show {
+            z-index: 999;
+            visibility: visible;
+            opacity: 1;
+            transform: scale(1);
+            .content-ul{
+              margin-bottom: 0;
+              >li:last-of-type{
+                margin-bottom: 16px;
+              }
+            }
+        }
+    }
+}