diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 9889f8a..81398f9 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -2,15 +2,18 @@
diff --git a/layout/archive-content.ejs b/layout/archive-content.ejs
index c4ca7d8..0a56486 100644
--- a/layout/archive-content.ejs
+++ b/layout/archive-content.ejs
@@ -17,4 +17,4 @@ const postList = createNewArchivePosts(is_archive() ? site.posts : page.posts)
<% }) %>
-
+
\ No newline at end of file
diff --git a/layout/home-content.ejs b/layout/home-content.ejs
index 95b054a..bae478c 100644
--- a/layout/home-content.ejs
+++ b/layout/home-content.ejs
@@ -1,103 +1,36 @@
-
-
-
-
-
\ No newline at end of file
+
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 3461935..f4b86c5 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -1,4 +1,5 @@
@require "../common/variables.styl"
+@import "../common/root.styl"
.header-wrapper {
width: 100%;
@@ -23,21 +24,76 @@
transform: translateY(-50%);
}
- .logo {
+ .logo-title {
left: 0;
font-size: 28px;
font-weight: bold;
color: #555;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -12px;
+ left: 0;
+ width: 40px;
+ height: 2px;
+ background: $a-hover-color;
+ transition: all 0.5s ease;
+ }
}
+
.menu-list {
right: 0;
- li {
+ .menu-item {
float: left;
- margin-left: 20px;
- font-size: 14px;
+ position: relative;
+ margin-left: 30px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ a {
+
+ &:hover {
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ width: 100%;
+ height: 2px;
+ transform: translateX(-50%);
+ background: $a-hover-color;
+ transition: all 0.5s ease;
+ }
+ }
+
+ }
+
+
+ .active {
+ color: #555;
+ font-weight: 700;
+ transition: all 0.5s ease;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ width: 100%;
+ height: 2px;
+ transform: translateX(-50%);
+ background: $a-hover-color;
+ transition: all 0.5s ease;
+ }
+ }
}
+
}
@@ -84,7 +140,7 @@
.drawer-menu-active {
- background: #f45a6f;
+ background: $a-hover-color;
color: white;
}
@@ -141,9 +197,38 @@
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+ .header-content {
+
+ .logo-title {
+ &::after {
+ opacity: 0;
+ }
+ }
+
+
+ .menu-list {
+
+ .menu-item {
+ a:hover {
+ &::after {
+ bottom: -22px;
+ }
+ }
+
+ .active::after {
+ bottom: -22px;
+ }
+ }
+
+ }
+ }
+
+
.header-drawer {
padding: $header-shrink-height 0 20px 0;
}
+
+
}
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index eb76e97..260d813 100644
--- a/source/css/layout/common/basic.styl
+++ b/source/css/layout/common/basic.styl
@@ -72,7 +72,7 @@ a:hover, a:active {
position: absolute;
width: 100%;
height: 2px;
- bottom: 0;
+ bottom: -2px;
left: 0;
background-color: $article-title-color;
visibility: hidden;
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 141b4f5..91a1d0a 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -1,165 +1,54 @@
@require "common/variables.styl"
.home-content-container {
- .left-sidebar {
- float: left;
- width: 70%;
- /*.active-list {
+ .home-article-list {
- .active-item {
- padding-bottom: 30px;
- margin-top: 10px;
- border-bottom: 1px solid #eee;
+ .home-article-item {
- .meta-info {
- font-size: 12px;
+ margin-bottom: 30px;
+ padding-bottom: 30px;
+ border-bottom: 1px solid $border-color;
- .meta-info-item {
- margin-right: 5px;
- }
+ .home-article-title {
+ h3 {
+ font-weight: 600;
+ color: $article-title-color;
+ font-size: 22px;
+ margin: 0;
+ }
+
+ a {
+ color: $article-title-color;
}
}
- }*/
-
- .home-container {
-
- .article-post-list {
-
- .article-post-item {
-
- margin-bottom: 30px;
- padding-bottom: 30px;
- border-bottom: 1px solid $border-color;
-
- .article-post-title {
-
- h3 {
- font-weight: 600;
- color: $article-title-color;
- font-size: 22px;
- margin: 0;
- }
-
- a {
- color: $article-title-color;
- }
- }
-
- .article-post-content {
- padding: 15px 0;
- line-height: 2em;
- }
-
- }
- }
-
- .paginator {
-
- padding-bottom: 40px;
-
- .page-number {
- display: none !important;
- }
-
- a.prev {
- float: left;
- }
-
- a.next {
- float: right;
- }
-
- }
- }
-
-
- }
-
-
- .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;
+ .home-article-content {
+ padding: 15px 0;
+ line-height: 2em;
}
}
-*/
}
+
+
+ .paginator {
+
+ padding-bottom: 40px;
+
+ .page-number {
+ display: none !important;
+ }
+
+ a.prev {
+ float: left;
+ }
+
+ a.next {
+ float: right;
+ }
+
+ }
+
}
\ No newline at end of file
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index d4018c6..d75aa45 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -22,6 +22,7 @@
width: 80%;
height: 100%;
position: relative;
+ padding: 20px 0;
}
diff --git a/source/css/style.styl b/source/css/style.styl
index 30df51d..4691b94 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -1,4 +1,3 @@
-//@import "layout/variables.styl"
@import "libs/font-awesome.min.css"
@import "layout/common/animated.styl"
@import "layout/common/basic.styl"
diff --git a/source/js/common.js b/source/js/common.js
index 6d7d996..017e38c 100644
--- a/source/js/common.js
+++ b/source/js/common.js
@@ -1,19 +1,19 @@
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');
-
-
+const header = document.querySelector('.header-wrapper');
+const pageTemplateContainer = document.querySelector('.page-template');
+const menuBar = document.querySelector('.menu-bar');
+const windowMask = document.querySelector('.window-mask');
+const headerHeight = header.getBoundingClientRect().height;
window.addEventListener('scroll', function (e) {
- var scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
- if (!isHeaderShrink && scrollTop > 10) {
+ const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
+
+ if (!isHeaderShrink && scrollTop > headerHeight) {
isHeaderShrink = true;
header.classList.add('header-wrapper-shrink');
pageTemplateContainer.classList.add('page-top-shrink');
- } else if (isHeaderShrink && scrollTop <= 10) {
+ } else if (isHeaderShrink && scrollTop <= headerHeight) {
isHeaderShrink = false;
header.classList.remove('header-wrapper-shrink');
pageTemplateContainer.classList.remove('page-top-shrink');