jekyll-theme-gaeblogx 0.1.0

data/_layouts/post.html

@@ -0,0 +1,107 @@
+---
+layout: default
+---
+
+<div class="page clearfix" post>
+    <div class="left">
+        <h1>{{page.title}}</h1>
+        <div class="label">
+
+            <div class="label-card">
+                <i class="fa fa-calendar"></i>{{ page.date | date: "%F" }}
+            </div>
+
+            <div class="label-card">
+                {% if page.author %}<i class="fa fa-user"></i>{{ page.author }}
+                {% endif %}
+            </div>
+
+            <div class="label-card">
+                {% if page.meta %}<i class="fa fa-key"></i>{{ page.meta }}  {% endif %}
+            </div>
+
+            <div class="label-card">
+            {% include category.html %}
+            </div>
+
+            <div class="label-card">
+            {% include tag.html %}
+            </div>
+
+        </div>
+        <hr>
+        <article itemscope itemtype="http://schema.org/BlogPosting">
+        {{content}}
+        </article>
+        <hr>
+
+        {% assign hasSimilar = '' %}
+        {% for post in site.related_posts %}
+            {% assign postHasSimilar = false %}
+            {% for tag in post.tags %}
+                {% for thisTag in page.tags %}
+                    {% if postHasSimilar == false and hasSimilar.size < 6 and post != page and tag == thisTag %}
+                        {% if hasSimilar.size == 0 %}
+                        <h2 id="similar_posts">Similar Posts</h2>
+                        <ul>
+                        {% endif %}
+                        <li class="relatedPost">
+                            <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}
+                            {% if post.series %}
+                                (Series: {{ post.series }})
+                            {% endif %}
+                            </a>
+                        </li>
+                        {% capture hasSimilar %}{{ hasSimilar }}*{% endcapture %}
+                        {% assign postHasSimilar = true %}
+                    {% endif %}
+                {% endfor %}
+            {% endfor %}
+        {% endfor %}
+        {% if hasSimilar.size > 0 %}
+            </ul>
+        {% endif %}
+
+        {% include previousAndNext.html %}
+
+        <h2 id="comments">Comments</h2>
+        {% include comments.html %}
+
+
+    </div>
+    <button class="anchor"><i class="fa fa-anchor"></i></button>
+    <div class="right">
+        <div class="wrap">
+
+             <div class="side content" id="search-div">
+                 {% include sidebar-search.html %}
+             </div>
+            <!-- Content -->
+            <div class="side content">
+                <div>
+                    Content
+                </div>
+                <ul id="content-side" class="content-ul">
+                    {% if hasSimilar.size > 0 %}
+                    <li><a href="#similar_posts">Similar Posts</a></li>
+                    {% endif %}
+                    <li><a href="#comments">Comments</a></li>
+                </ul>
+            </div>
+            <!-- 其他div框放到这里 -->
+            <!-- <div class="side">bbbb</div> -->
+        </div>
+    </div>
+</div>
+<script>
+/**
+ * target _blank
+ */
+(function() {
+    var aTags = document.querySelectorAll('article a:not([id])')
+    for (var i = 0; i < aTags.length; i++) {
+        aTags[i].setAttribute('target', '_blank')
+    }
+}());
+</script>
+<script src="{{ "/js/pageContent.js " | prepend: site.baseurl }}" charset="utf-8"></script>

data/_sass/_backToTop.scss

@@ -0,0 +1,49 @@
+.back-to-top {
+    position: fixed;
+    left: 50%;
+    margin-left: 580px;
+    bottom: 37px;
+    background-color: #f8f8fd;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.4s ease;
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 0 30px rgba(10, 10, 0, 0.1) inset;
+    a {
+        display: block;
+        background-color: #eee;
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        font-size: 20px;
+        color: #b4b4b4;
+    }
+}
+.back-to-top-show{
+    visibility: visible;
+    opacity: 0.7;
+    &:hover{
+        opacity: 1
+    }
+}
+@media screen and (max-width:1200px) and (min-width: 770px) {
+    .back-to-top {
+        left: 50%;
+        margin-left: 45.5%;
+    }
+}
+@media screen and (max-width: 770px) {
+    .back-to-top {
+        right:2.5%;
+        left: auto;
+        // left: 50%;
+        margin-left: 0px;
+        a {
+            width: 33px;
+            height: 33px;
+            line-height: 33px;
+            text-align: center;
+            font-size: 18px;
+        }
+    }
+}

data/_sass/_demo.scss

@@ -0,0 +1,65 @@
+.page[demo] {
+    .left {
+        width: 100%;
+        a {
+            color: #4d6dad;
+            transition: 0.5s ease;
+            &:hover {
+                color: #223253;
+                background-color: #f4efeb;
+            }
+        }
+        .grid {
+            margin: 0 auto;
+            /* clearfix */
+            &:after {
+                content: '';
+                display: block;
+                clear: both;
+            }
+            .grid-item {
+                width: 250px;
+                background-color: #fff;
+                margin-bottom: 20px;
+                padding-bottom: 10px;
+                float: left;
+                transition: 0.5s ease;
+                -webkit-transition: 0.5s ease;
+                -moz-transition: 0.5s ease;
+                -o-transition: 0.5s ease;
+                -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+                -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+                &:hover {
+                    -webkit-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
+                    -moz-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
+                    box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
+
+                }
+                .a-img {
+                    color: #fff;
+                    // transition: 0.5s ease;
+                    &:hover {
+                        color: #fff;
+                        background-color: #fff;
+                    }
+                }
+                .demo-title {
+                    font-size: 18px;
+                    font-weight: bold;
+                    margin: 0 8px;
+                }
+                p {
+                    margin: 0;
+                    padding: 0 8px;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+}
+.deep{
+    transition: .32s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+    transform-style: preserve-3d;
+    transform: perspective(1600px) rotateX(14deg) translateZ(-200px);
+}

data/_sass/_footer.scss

@@ -0,0 +1,63 @@
+.site-footer {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    text-align: center;
+    // margin-top: 50px;
+    background-color: #2b2b3c;
+    box-shadow: 0 -2px 4px 1px rgba(0,0,0,0.5);
+    color: #bbb;
+    .wrapper {
+        width: 1140px;
+        margin: 0 auto;
+        padding: 15px 0;
+        text-align: center;
+        font-size: 14px;
+        p {
+            margin: 0;
+            line-height: 1.6;
+        }
+        .contact {
+            display: inline-block;
+            a {
+                color: #ccc;
+                transition: 0.3s ease;
+                &:hover {
+                    color: #fff;
+                }
+                i {
+                    margin: 0 5px;
+                    font-size: 20px;
+                }
+            }
+        }
+        .description {
+            display: inline-block;
+        }
+        .power {
+            a {
+                color: #8F90C5;
+                transition: 0.3s ease;
+                &:hover {
+                    color: #fff;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width:1200px) and (min-width: 770px) {
+    .site-footer {
+        .wrapper {
+            width: 90%;
+        }
+    }
+}
+@media screen and (max-width: 770px) {
+    .site-footer {
+        .wrapper {
+            width: 90%;
+        }
+    }
+}

data/_sass/_header.scss

@@ -0,0 +1,174 @@
+header {
+    background: #222;
+    height: 52px;
+    color: #9d9d9d;
+    box-shadow: 0 2px 4px 1px rgba(0,0,0,0.5);
+    margin-bottom: 20px;
+    a {
+        color: #9d9d9d;
+        -webkit-transition: 0.2s ease;
+        transition: 0.2s ease;
+        &:hover {
+            color: #fff;
+        }
+    }
+    .wrapper {
+        width: 1140px;
+        margin: 0 auto;
+        line-height: 52px;
+        .brand {
+            font-size: 18px;
+        }
+        small {
+            margin-left: 26px;
+            font-size: 14px;
+        }
+        .menu{
+            display: none;
+        }
+        nav {
+            float: right;
+            ul {
+                font-size: 0;
+                margin: 0;
+                padding: 0;
+                li {
+                    list-style: none;
+                    font-size: 14px;
+                    display: inline-block;
+                    -webkit-transition: 0.2s ease;
+                    transition: 0.2s ease;
+                    a {
+                        display: inline-block;
+                        padding: 0 10px;
+                        height: 52px;
+                        &:hover {
+                            background-color: #000;
+                        }
+                        i {
+                            margin-right: 5px;
+                        }
+                    }
+                    >.active {
+                        color: #fff;
+                        background-color: #000;
+                        box-shadow: 0 25px 25px -15px rgba(255,255,255,0.93);
+                    }
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width:1200px) and (min-width: 770px) {
+    header {
+        height: 50px;
+        .wrapper {
+            width: 90%;
+            line-height: 50px;
+            .brand {
+                font-size: 16px;
+            }
+            small {
+                margin-left: 15px;
+                font-size: 12px;
+            }
+            .menu{
+                display: none;
+            }
+            nav {
+                ul {
+                    li {
+                        a {
+                            padding: 0 8px;
+                            height: 50px;
+                            i {
+                                margin-right: 4px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 770px) {
+    header {
+        height: 48px;
+        margin-bottom: 15px;
+        .wrapper {
+            width: 95%;
+            margin: 0 auto;
+            line-height: 48px;
+            position: relative;
+            z-index: 101;
+            .brand {
+                font-size: 16px;
+            }
+            small {
+                margin-left: 10px;
+                font-size: 12px;
+            }
+            .menu{
+                display: inline-block;
+                position: absolute;
+                z-index: -102;
+                right: 0;
+                top:10px;
+                padding: 5px 10px;
+                background: #333;
+                border: 1px solid #333;
+                border-radius: 4px;
+                color: #c9c9c9;
+                font-size: 17px;
+                -webkit-transition: 0.4s ease;
+                transition: 0.4s ease;
+            }
+            >.active{
+                background: #000;
+                color: #fff;
+            }
+            .nav-show{
+                visibility: visible;
+                transform: scale(1);
+                opacity: 1;
+            }
+            nav {
+                position: absolute;
+                z-index: 100;
+                right:0;
+                top:47px;
+                text-align: center;
+
+                visibility: hidden;
+                transform-origin: 100% 0%;
+                transform: scale(0.1);
+                opacity: 0;
+                transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38);
+                ul {
+                    background: #222;
+                    border-radius: 0 0 4px 4px;
+                    box-shadow: 0px 3px 4px 1px rgba(0,0,0,0.5);
+                    li {
+                        font-size: 14px;
+                        display: block;
+                        border-bottom: 1px solid #333;
+                        a {
+                            display: block;
+                            padding: 0 10px;
+                            height: 40px;
+                            line-height: 40px;
+                        }
+                        &:last-of-type{
+                            border: none;
+                        }
+                        >.active {
+                            color: #fff;
+                            background-color: #000;
+                            box-shadow: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}