diff --git a/README.md b/README.md index a6783a408c3a544630171b47a0b30c0ea26ef870..9496b71460a1f2084ec1edf6c30263a694ab87af 100644 --- a/README.md +++ b/README.md @@ -76,12 +76,12 @@ $ git pull ## 问题 -如果使用时出现问题，首先请仔细阅读[文档](https://liuyib.github.io/hexo-theme-stun/zh-CN/)，或者查看[常见问题](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md)。当以上的方法都无法解决你的问题时，再去提 `issue` :hugs:。 +如果遇到问题，首先请仔细阅读[文档](https://liuyib.github.io/hexo-theme-stun/zh-CN/)，或者查看[常见问题](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md)。当以上的方法都无法帮助你时，再去提出 `issue`:hugs:。 ## 浏览器支持 | IE
IE | Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | Opera
Opera | -| --- | --- | --- | --- | --- | --- | +| :---: | :---: | :---: |:---: | :---: | :---: | | Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ | ## 开源协议 diff --git a/README_en_US.md b/README_en_US.md index ddd4d20529a1226e7b9c638ddd5c077e4ecc220a..c8782a7034ab83e3db08bef9ee0839a54fc818ca 100644 --- a/README_en_US.md +++ b/README_en_US.md @@ -74,12 +74,12 @@ Please see: [https://liuyib.github.io/hexo-theme-stun/](https://liuyib.github.io ## Question -If you have problems with your use, please read [documentation](https://liuyib.github.io/hexo-theme-stun/zh-CN/) firstly, or check [FAQ](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md). When the above methods can't solve your problem, then mention `issue` :hugs:. +If you have problems, please read [documentation](https://liuyib.github.io/hexo-theme-stun/zh-CN/) firstly, or check [FAQ](https://github.com/liuyib/hexo-theme-stun/blob/master/FAQ.md). You can open an `issue` when the above methods can't help you :hugs:. ## Browser Support | IE
IE | Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | Opera
Opera | -| --- | --- | --- | --- | --- | --- | +| :---: | :---: | :---: |:---: | :---: | :---: | | Not Support | 12+ | 28+ | 21+ | 6.1+ | 12.1+ | ## License diff --git a/source/css/_common/header.styl b/source/css/_common/header.styl index 11f025365c5b54c7731a0438298442b23639b5b6..a42744da295612fd229790c102f859f983de8f7a 100644 --- a/source/css/_common/header.styl +++ b/source/css/_common/header.styl @@ -7,7 +7,6 @@ if (hexo-config('header.height')) #header display: flex position: relative - margin: 0 0 3rem height: $header-height font-size: $font-header-base background-color: $gray-dark diff --git a/source/css/_common/main.styl b/source/css/_common/main.styl index 33af7d0641094abb1ea8caabbd2a14858b15fe32..fd89dd492c0d8a0a8c40165efd992c1e0874a11e 100644 --- a/source/css/_common/main.styl +++ b/source/css/_common/main.styl @@ -20,22 +20,12 @@ setUlStyle(content, hoverColor) flex-direction: column #main - margin-bottom: 3rem + margin: 1.5rem 0 flex: 1 auto .main-inner margin: 0 auto - -$content-position - margin: 0 auto - -if (hexo-config('sidebar.enable')) - if (hexo-config('sidebar.position') == 'left') - $content-position - float: right - else - $content-position - float: left + width: calc(100% - 2rem) .headings h1, @@ -73,12 +63,21 @@ if (hexo-config('sidebar.enable')) margin-left: .8rem - .1 * size .content - @extend $content-position border-radius: 5px padding: 2rem font-size: $font-main-base background-color: $white + if (hexo-config('sidebar.enable')) + width: calc(100% - 320px) + if (hexo-config('sidebar.position') == 'left') + float: right + else + float: left + else + margin: 0 auto + width: calc(100% - 200px) + & > :first-child margin-top: 0 diff --git a/source/css/_common/responsive.styl b/source/css/_common/responsive.styl index 08c99acfcf6975dce0a6e0428b79c8082ff3b40b..ead5c478164adec5607913cf376ad3409114732a 100644 --- a/source/css/_common/responsive.styl +++ b/source/css/_common/responsive.styl @@ -1,53 +1,43 @@ -// $content-desktop: 1340px +// $main-width: A calc value. // ----------------------------------------- -@media screen and (min-width: $content-desktop) +@media screen and (min-width: $main-responsive-width) #header width: 100% .header-nav-inner - width: $content-desktop + width: $main-width .main-inner - width: $content-desktop + width: $main-width -@media screen and (max-width: $content-desktop) - .header-nav-inner - width: 100% - - #sidebar - display: none - - .content - float: none - margin: 0 auto - - .comments - margin: 1.5rem auto 0 - -// $md-width: 992px +// $md-width: 992px - 0.02px // ----------------------------------------- -@media screen and (min-width: $md-width) - .content, - .comments - width: $main-desktop - @media screen and (max-width: $md-width) #header, #footer background-attachment: local #header - height: 50vh + height: 340px - #header, #main - margin-bottom: 2rem + margin: 1rem 0 + + #sidebar + display: none + + .main-inner + width: 100% .content - padding: 1.2rem + padding: 0 .8rem width: 100% -// sm-width: 768px + #recent-posts article.post-item + margin: 0 0 1rem + padding: .8rem 1rem + +// sm-width: 768px - 0.02px // ----------------------------------------- @media screen and (min-width: $sm-width) .header-nav-inner @@ -83,7 +73,7 @@ .header-info-inner .site-info-title - font-size: 3rem + font-size: 3.25rem .site-info-subtitle font-size: 1rem @@ -93,15 +83,21 @@ margin: 0 1rem width: calc(100% - 2rem) -// $xs-width: 576px +// $xs-width: 576px - 0.02px // ----------------------------------------- @media screen and (max-width: $xs-width) #header height: 240px - #header, #main - margin-bottom: 1.5rem + margin: .8rem 0 + + .content + padding: 0 .6rem + + #recent-posts article.post-item + margin: 0 0 .8rem + padding: .6rem .8rem .header-info-inner .site-info-title @@ -120,9 +116,6 @@ .algolia-hit-item margin: 0 - .content - padding: 1rem - .post-header .post-title font-size: 1.25rem @@ -140,14 +133,6 @@ .reward-qr flex-direction: column - #recent-posts - article.post-item - margin: 0 0 1.5rem - padding: 1rem 1.2rem - - .content - padding: 1.2rem - .archive-inner margin-left: .5rem diff --git a/source/css/_components/recent-posts.styl b/source/css/_components/recent-posts.styl index 230e45ef7b78acde864ef6a4e14ff783640dc906..9302b5d5097bf970a2c036b3fedf4655ea219e9f 100644 --- a/source/css/_components/recent-posts.styl +++ b/source/css/_components/recent-posts.styl @@ -7,7 +7,7 @@ .post-item position: relative - margin: 0 0 2rem + margin: 0 0 1.5rem border-radius: 5px padding: 1.5rem 2rem width: 100% diff --git a/source/css/var.styl b/source/css/var.styl index 47ab0de2ea3f4cbadf12896ff4b2f51cb1bd5f43..245f42bf6a9e4d62fcc0fe9278254ef48abae894 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -201,15 +201,6 @@ $z-index1 = 1001 $z-index2 = 1002 $z-index3 = 1003 -// ------------------------------------------- -// Layout -// ------------------------------------------- -// Width -$main-sidebar-gap = 30px -$main-desktop = 992px -$content-desktop = $main-desktop + convert( - hexo-config('sidebar.width') || '300px') + $main-sidebar-gap - // ------------------------------------------- // Responsive layout // ------------------------------------------- @@ -219,3 +210,14 @@ $xs-width = 576px - 0.02px $sm-width = 768px - 0.02px $md-width = 992px - 0.02px $lg-width = 1200px - 0.02px + +// ------------------------------------------- +// Layout +// ------------------------------------------- +// Width +$sidebar-width = 300px +$side-main-gap = 20px +$content-width = $md-width +$main-aside-gap = $font-size-rem * 2 +$main-width = $sidebar-width + $content-width + $side-main-gap +$main-responsive-width = $main-width + $main-aside-gap diff --git a/source/js/utils.js b/source/js/utils.js index f646fafe36618b6ff366113218ba49470b6ef115..9e0a08bfcede994c403600c0a7bbf7237bb118b4 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -184,7 +184,7 @@ Stun.utils = Stun.$u = { galleryWaterFall: function () { var colWidth = parseInt(CONFIG.waterfall_col_width); var colGap = parseInt(CONFIG.waterfall_gap.x); - + $('.post-gallery').masonry({ itemSelector: '.post-g-img', columnWidth: colWidth,