+
+ <%- partial('_partial/header') %>
-
- <%- partial('right-side') %>
+
+ <%- partial('_partial/page-main') %>
+
+
+ <%- partial('_partial/footer') %>
\ No newline at end of file
diff --git a/source/css/layout/_partial/common.styl b/source/css/layout/_partial/common.styl
new file mode 100644
index 0000000..fc2e623
--- /dev/null
+++ b/source/css/layout/_partial/common.styl
@@ -0,0 +1,7 @@
+:root {
+ --primary-color: #f45a6f;
+ --text-color: #2c3e50;
+ --second-text-color: #525e6b;
+ --normal-text-color: #616161;
+ --third-text-color: #9ca3ad;
+}
\ No newline at end of file
diff --git a/source/css/layout/_partial/footer.styl b/source/css/layout/_partial/footer.styl
new file mode 100644
index 0000000..2936dfe
--- /dev/null
+++ b/source/css/layout/_partial/footer.styl
@@ -0,0 +1,12 @@
+.footer {
+ .info-container {
+ font-size: 12px;
+ padding-bottom 10px
+ text-align center
+ }
+
+ .info-item {
+ margin 1px 0
+ }
+
+}
\ No newline at end of file
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
new file mode 100644
index 0000000..00f97e0
--- /dev/null
+++ b/source/css/layout/_partial/header.styl
@@ -0,0 +1,157 @@
+.header-wrapper {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
+
+ .header-content {
+ width: 80%;
+ height: 100%;
+ position: relative;
+ transition: transform 0.5s ease;
+ z-index: 999;
+
+ .vertical-center {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .logo {
+ left: 0;
+ font-size: 28px;
+ font-weight: bold;
+ color: #555;
+ }
+
+ .menu-list {
+ right: 0;
+
+ li {
+ float: left;
+ margin-left: 20px;
+ font-size: 14px;
+ }
+ }
+
+
+ .menu-bar {
+ right: 0;
+ font-size: 20px;
+ display: none;
+ cursor: pointer;
+ }
+
+ }
+
+
+ .header-drawer {
+ width: 100%;
+ padding: 100px 0 20px 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: scaleY(0);
+ transform-origin: top;
+ background: white;
+ transition: all 0.5s ease;
+ z-index: 998;
+
+ .drawer-menu-list {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ list-style-type: none;
+
+ .drawer-menu-item {
+ display: block;
+ margin: 8px auto;
+ padding: 0 30px;
+ border-radius: 22px;
+ text-align: center;
+ line-height: 42px;
+ font-size: 14px;
+ color: #9ca3ad;
+ transition: all 0.5s ease;
+ }
+
+
+ .drawer-menu-active {
+ background: #f45a6f;
+ color: white;
+ }
+
+ }
+ }
+
+
+ .window-mask {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.4);
+ z-index: 1;
+ visibility: hidden;
+ opacity: 0;
+ transition: all 0.2s ease;
+ }
+
+
+}
+
+.header-drawer-show {
+
+ .menu-bar {
+ background: rgba(0, 0, 0, 0);
+
+ &::before {
+ background: #2c3e50;
+ transform: translateY(6px) rotate(45deg);
+ }
+
+ &::after {
+ background: #2c3e50;
+ transform: translateY(-6px) rotate(-45deg);
+ }
+ }
+
+
+ .header-drawer {
+ transform: scaleY(1);
+ }
+
+
+ .window-mask {
+ visibility: visible;
+ opacity: 1;
+ }
+
+}
+
+
+.header-wrapper-shrink {
+ background: #fff;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+ .header-drawer {
+ padding: 60px 0 20px 0;
+ }
+}
+
+
+@media screen and (max-width: 760px) {
+ .menu-list {
+ display: none;
+ }
+
+ .menu-bar {
+ display: block !important;
+ }
+
+}
\ No newline at end of file
diff --git a/source/css/layout/_partial/page-main.styl b/source/css/layout/_partial/page-main.styl
new file mode 100644
index 0000000..9de75d5
--- /dev/null
+++ b/source/css/layout/_partial/page-main.styl
@@ -0,0 +1,124 @@
+.page-main-container {
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .main-content {
+ width: 80%;
+ height: 100%;
+ position: relative;
+
+
+ .left-sidebar {
+ float: left;
+ width: 70%;
+
+ .active-list {
+
+ .active-item {
+ padding-bottom: 30px;
+ margin-top: 10px;
+ border-bottom: 1px solid #eee;
+
+ .meta-info {
+ font-size: 12px;
+
+ .meta-info-item {
+ margin-right: 5px;
+ }
+
+ }
+ }
+
+ }
+ }
+
+
+ .right-sidebar {
+ float: right;
+ width: 30%;
+
+ .friend-link {
+ text-align: center;
+ border: 1px solid #eeeeee;
+
+ .friend-link-title {
+
+ text-align: left;
+
+ .page-change {
+ float: right;
+ display: inline-block;
+ font-size: 14px;
+ color: #969696;
+ }
+
+ }
+
+
+ .friend-link-list {
+ margin: 0 0 20px;
+ text-align: left;
+ .friend-link-item {
+
+ margin-top: 15px;
+
+ .avatar-box {
+ float: left;
+ width: 48px;
+ height: 48px;
+ margin-right: 10px;
+
+ img.avatar {
+ width: 100%;
+ height: 100%;
+ border-radius: 2px;
+ }
+ }
+
+
+ .go-friend-link {
+ float: right;
+ margin-top: 2px;
+ padding: 0;
+ font-size: 13px;
+ color: #42c02e;
+ }
+
+ .friend-name {
+ padding-top: 2px;
+ margin-right: 60px;
+ font-size: 14px;
+ display: block;
+ }
+
+ p.friend-intro {
+ margin-top: 2px;
+ font-size: 12px;
+ color: #969696;
+ }
+
+
+ }
+
+ }
+
+
+ .view-more {
+ left: 0;
+ width: 100%;
+ font-size: 13px;
+ color: #787878;
+ background-color: #f7f7f7;
+ border: 1px solid #dcdcdc;
+ border-radius: 4px;
+ }
+
+ }
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
new file mode 100644
index 0000000..e1cf0e2
--- /dev/null
+++ b/source/css/layout/page.styl
@@ -0,0 +1,31 @@
+$page-top-height = 100px;
+$page-top-shrink-height = 60px;
+
+.page-template {
+ padding-top: $page-top-height;
+
+ .page-top {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ height: $page-top-height;
+ z-index: 999;
+ transition: all 0.5s ease;
+ }
+
+ .page-middle {
+ width: 100%;
+ }
+
+ .page-bottom {
+ width: 100%;
+ }
+}
+
+.page-top-shrink {
+ padding-top: $page-top-shrink-height
+
+ .page-top {
+ height: $page-top-shrink-height
+ }
+}
\ No newline at end of file
diff --git a/source/css/layout/variables.styl b/source/css/layout/variables.styl
index daf3c07..433cb0b 100644
--- a/source/css/layout/variables.styl
+++ b/source/css/layout/variables.styl
@@ -23,7 +23,8 @@ $logo-description-color = #666
$logo-description-font-size = #666
// 默认字体样式
-$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
+//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
+$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial", 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light', 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif
// 默认字体大小
$default-font-size = 14px
diff --git a/source/css/style.styl b/source/css/style.styl
index 5fbf495..e549413 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -1,20 +1,26 @@
-@import "libs/font-awesome.min.css"
+//@import "layout/common/animated.styl"
+//@import "layout/index.styl"
+//@import "layout/right-side.styl"
+//@import "layout/common/left-side.styl"
+//@import "layout/common/footer.styl"
+//@import "layout/common/nav.styl"
+//@import "layout/home-post.styl"
+//@import "layout/archive-post.styl"
+//@import "layout/article-post.styl"
+//@import "layout/common/article-meta-info.styl"
+//@import "layout/category-post.styl"
+//@import "layout/tag-post.styl"
+//@import "layout/common/site-info.styl"
+//@import "layout/common/valine.styl"
+//@import "layout/common/local-search.styl"
+//@import "highlight"
+//@import "layout/variables.styl"
+//@import "markdown.styl"
+
+
@import "layout/basic.styl"
-@import "layout/common/animated.styl"
-@import "layout/index.styl"
-@import "layout/right-side.styl"
-@import "layout/common/left-side.styl"
-@import "layout/common/footer.styl"
-@import "layout/common/nav.styl"
-@import "layout/home-post.styl"
-@import "layout/archive-post.styl"
-@import "layout/article-post.styl"
-@import "layout/common/article-meta-info.styl"
-@import "layout/category-post.styl"
-@import "layout/tag-post.styl"
-@import "layout/common/site-info.styl"
-@import "layout/common/valine.styl"
-@import "layout/common/local-search.styl"
-@import "highlight"
-@import "layout/variables.styl"
-@import "markdown.styl"
\ No newline at end of file
+@import "layout/page.styl"
+@import "libs/font-awesome.min.css"
+@import "layout/_partial/header.styl"
+@import "layout/_partial/page-main.styl"
+@import "layout/_partial/footer.styl"
\ No newline at end of file
diff --git a/source/js/common.js b/source/js/common.js
new file mode 100644
index 0000000..6d7d996
--- /dev/null
+++ b/source/js/common.js
@@ -0,0 +1,30 @@
+let isHeaderShrink = false;
+let header = document.querySelector('.header-wrapper');
+let pageTemplateContainer = document.querySelector('.page-template');
+let menuBar = document.querySelector('.menu-bar');
+let windowMask = document.querySelector('.window-mask');
+
+
+
+window.addEventListener('scroll', function (e) {
+ var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
+
+ if (!isHeaderShrink && scrollTop > 10) {
+ isHeaderShrink = true;
+ header.classList.add('header-wrapper-shrink');
+ pageTemplateContainer.classList.add('page-top-shrink');
+ } else if (isHeaderShrink && scrollTop <= 10) {
+ isHeaderShrink = false;
+ header.classList.remove('header-wrapper-shrink');
+ pageTemplateContainer.classList.remove('page-top-shrink');
+ }
+});
+
+menuBar.addEventListener('click', function (e) {
+ header.classList.toggle('header-drawer-show');
+});
+
+windowMask.addEventListener('click', function (e) {
+ header.classList.toggle('header-drawer-show');
+});
+