From a1ee9a7e37d810f06e9b0bdcad5424c8076c3fcb Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Thu, 18 Jun 2020 23:30:20 +0800 Subject: [PATCH] Refactor layout (#31) --- layout/_layout.njk | 26 +++++++------- layout/_scripts/pjax.njk | 2 +- .../_common/components/post/post-expand.styl | 6 +--- source/css/_common/outline/header/header.styl | 11 +----- source/css/_common/outline/mobile.styl | 2 +- source/css/_common/outline/outline.styl | 19 ----------- source/css/_common/scaffolding/base.styl | 2 +- source/css/_mixins.styl | 13 +++++++ source/css/_schemes/Gemini/index.styl | 6 ++-- source/css/_schemes/Mist/_header.styl | 1 - source/css/_schemes/Mist/_layout.styl | 5 --- source/css/_schemes/Mist/index.styl | 1 + source/css/_schemes/Muse/_header.styl | 20 +++++++++++ source/css/_schemes/Muse/_layout.styl | 34 +++++-------------- source/css/_schemes/Pisces/_layout.styl | 27 ++++++++------- source/css/_schemes/Pisces/_sidebar.styl | 17 +++------- source/js/next-boot.js | 9 ----- source/js/utils.js | 7 ---- 18 files changed, 82 insertions(+), 126 deletions(-) diff --git a/layout/_layout.njk b/layout/_layout.njk index 393e2f6..0b03592 100644 --- a/layout/_layout.njk +++ b/layout/_layout.njk @@ -13,24 +13,22 @@
-
-
{% include '_partials/header/index.njk' %}
-
- - {{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }} -
-
-
- {% include '_partials/header/sub-menu.njk' %} -
- {% block content %}{% endblock %} -
- {% include '_partials/comments.njk' %} -
+
+
{% include '_partials/header/index.njk' %}
{%- if theme.sidebar.display !== 'remove' %} {% block sidebar %}{% endblock %} {%- endif %} +
+ + {{ partial('_partials/widgets.njk', {}, {cache: theme.cache.enable}) }} + +
+ {% include '_partials/header/sub-menu.njk' %} +
+ {% block content %}{% endblock %} +
+ {% include '_partials/comments.njk' %}
diff --git a/layout/_scripts/pjax.njk b/layout/_scripts/pjax.njk index 27d00e6..7932ef5 100644 --- a/layout/_scripts/pjax.njk +++ b/layout/_scripts/pjax.njk @@ -3,7 +3,7 @@ var pjax = new Pjax({ selectors: [ 'head title', '#page-configurations', - '.content-wrap', + '.main-inner', '.post-toc-wrap', '.languages', '#pjax' diff --git a/source/css/_common/components/post/post-expand.styl b/source/css/_common/components/post/post-expand.styl index 671e4fb..6e707d2 100644 --- a/source/css/_common/components/post/post-expand.styl +++ b/source/css/_common/components/post/post-expand.styl @@ -1,7 +1,3 @@ -.content { - padding-top: 40px; -} - .post-body { +desktop() { text-align: unquote(hexo-config('text_align.desktop')); @@ -39,7 +35,7 @@ } } - iframe, img, video { + iframe, img, video, embed { margin-bottom: 20px; } diff --git a/source/css/_common/outline/header/header.styl b/source/css/_common/outline/header/header.styl index 091f13d..eb52d91 100644 --- a/source/css/_common/outline/header/header.styl +++ b/source/css/_common/outline/header/header.styl @@ -5,16 +5,7 @@ } .header-inner { - margin: 0 auto; - width: $content-desktop; - - +desktop-large() { - width: $content-desktop-large; - } - - +desktop-largest() { - width: $content-desktop-largest; - } + main-container(); } .site-brand-container { diff --git a/source/css/_common/outline/mobile.styl b/source/css/_common/outline/mobile.styl index 3110ed4..c8db05d 100644 --- a/source/css/_common/outline/mobile.styl +++ b/source/css/_common/outline/mobile.styl @@ -7,7 +7,7 @@ +mobile-small() { // For Pisces & Gemini schemes only wider width (remove main blocks in Gemini). - .content-wrap { + .main-inner { padding: initial !important; } diff --git a/source/css/_common/outline/outline.styl b/source/css/_common/outline/outline.styl index 0b8a6ed..3762767 100644 --- a/source/css/_common/outline/outline.styl +++ b/source/css/_common/outline/outline.styl @@ -3,25 +3,6 @@ position: relative; } -.main-inner { - margin: 0 auto; - width: $content-desktop; - - +desktop-large() { - width: $content-desktop-large; - } - - +desktop-largest() { - width: $content-desktop-largest; - } -} - -.content-wrap { - +mobile() { - padding: 0 20px; - } -} - @import 'header'; @import 'sidebar'; @import 'footer'; diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl index f5b4657..118e457 100644 --- a/source/css/_common/scaffolding/base.styl +++ b/source/css/_common/scaffolding/base.styl @@ -49,7 +49,7 @@ a, span.exturl { cursor: pointer; } -iframe, img, video { +iframe, img, video, embed { display: block; margin-left: auto; margin-right: auto; diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index ce08536..3e7afc1 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -96,3 +96,16 @@ font-family-icons($icon = '') { font-family: 'Font Awesome 5 Free'; font-weight: 900; } + +main-container() { + margin: 0 auto; + width: $content-desktop; + + +desktop-large() { + width: $content-desktop-large; + } + + +desktop-largest() { + width: $content-desktop-largest; + } +} diff --git a/source/css/_schemes/Gemini/index.styl b/source/css/_schemes/Gemini/index.styl index ebbc893..4ca257c 100644 --- a/source/css/_schemes/Gemini/index.styl +++ b/source/css/_schemes/Gemini/index.styl @@ -27,7 +27,7 @@ $use-seo = hexo-config('seo'); // Desktop layout styles. // ================================================== // Post blocks. -.content-wrap { +.main-inner { background: initial; box-shadow: initial; padding: initial; @@ -139,7 +139,7 @@ $use-seo = hexo-config('seo'); // ================================================== +tablet() { // Posts in blocks. - .content-wrap { + .main-inner { padding: $content-tablet-padding; } @@ -180,7 +180,7 @@ $use-seo = hexo-config('seo'); // ================================================== +mobile() { // Posts in blocks. - .content-wrap { + .main-inner { padding: $content-mobile-padding; } diff --git a/source/css/_schemes/Mist/_header.styl b/source/css/_schemes/Mist/_header.styl index e721cf3..ae6947a 100644 --- a/source/css/_schemes/Mist/_header.styl +++ b/source/css/_schemes/Mist/_header.styl @@ -12,7 +12,6 @@ +mobile() { display: block; padding: 10px 0; - width: auto; } } diff --git a/source/css/_schemes/Mist/_layout.styl b/source/css/_schemes/Mist/_layout.styl index 1ef760b..0ca48e7 100644 --- a/source/css/_schemes/Mist/_layout.styl +++ b/source/css/_schemes/Mist/_layout.styl @@ -19,10 +19,6 @@ hr { // -------------------------------------------------- .main-inner { padding-bottom: 80px; - - +mobile() { - width: auto; - } } .content { @@ -57,6 +53,5 @@ hr { +mobile() { text-align: center; - width: auto; } } diff --git a/source/css/_schemes/Mist/index.styl b/source/css/_schemes/Mist/index.styl index 2f7053c..6969d77 100644 --- a/source/css/_schemes/Mist/index.styl +++ b/source/css/_schemes/Mist/index.styl @@ -5,5 +5,6 @@ @import '_header'; @import '_menu'; @import '_posts-expand'; +@import '../Muse/_layout'; @import '../Muse/_sidebar'; @import '../Muse/_sub-menu'; diff --git a/source/css/_schemes/Muse/_header.styl b/source/css/_schemes/Muse/_header.styl index 9dcb8e0..f58a6ce 100644 --- a/source/css/_schemes/Muse/_header.styl +++ b/source/css/_schemes/Muse/_header.styl @@ -8,3 +8,23 @@ .brand { background: var(--btn-default-bg); } + +.header-inner { + padding-top: 100px; + + +mobile() { + padding-top: 50px; + } +} + +.main-inner { + padding-bottom: 60px; +} + +.content { + padding-top: 70px; + + +mobile() { + padding-top: 35px; + } +} diff --git a/source/css/_schemes/Muse/_layout.styl b/source/css/_schemes/Muse/_layout.styl index 4cea849..a21288e 100644 --- a/source/css/_schemes/Muse/_layout.styl +++ b/source/css/_schemes/Muse/_layout.styl @@ -1,30 +1,14 @@ +.main-inner { + main-container(); + + +mobile() { + padding-left: 20px; + padding-right: 20px; + } +} + .header-inner, .main-inner, .footer-inner { +mobile() { width: auto; } } - -.header-inner { - padding-top: 100px; - - +mobile() { - padding-top: 50px; - } -} - -.main-inner { - padding-bottom: 60px; -} - -.content { - padding-top: 70px; - - +mobile() { - padding-top: 35px; - } -} - -embed { - display: block; - margin: 0 auto 25px auto; -} diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl index ac7370b..1c01d7a 100644 --- a/source/css/_schemes/Pisces/_layout.styl +++ b/source/css/_schemes/Pisces/_layout.styl @@ -1,14 +1,11 @@ .header { - margin: 0 auto; - position: relative; - width: $content-desktop; + // Make sure that .header and .main-inner are the same height + // Required for .sidebar `position: sticky;` + align-self: stretch; + width: $sidebar-desktop; +desktop-large() { - width: $content-desktop-large; - } - - +desktop-largest() { - width: $content-desktop-largest; + width: $sidebar-desktop; } +tablet-mobile() { @@ -22,7 +19,6 @@ box-shadow: $box-shadow-inner; overflow: hidden; padding: 0; - position: absolute; top: 0; width: $sidebar-desktop; @@ -37,20 +33,23 @@ } } -.main-inner { +.main { align-items: flex-start; display: flex; justify-content: space-between; + main-container(); - if (hexo-config('sidebar.position') != 'right') { + if (hexo-config('sidebar.position') == 'right') { flex-direction: row-reverse; } + +tablet-mobile() { + display: block; width: auto; } } -.content-wrap { +.main-inner { align-self: stretch; background: var(--content-bg-color); border-radius: $border-radius-inner; @@ -66,6 +65,10 @@ } } +.content { + padding-top: 40px; +} + if (hexo-config('sidebar.position') == 'right') { .header-inner { right: 0; diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index f9b4499..5c37227 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -1,11 +1,9 @@ .sidebar { - // Make sure that .content-wrap and .sidebar are the same height - // Required for .sidebar-inner `position: sticky;` - align-self: stretch; - background: initial; + bottom: initial; box-shadow: none; - position: static; - width: $sidebar-desktop; + margin-top: $sidebar-offset; + position: sticky; + top: $sidebar-offset; +tablet-mobile() { display: none; @@ -22,9 +20,6 @@ box-shadow: $box-shadow; box-sizing: border-box; color: var(--text-color); - position: sticky; - top: $sidebar-offset; - width: $sidebar-desktop; if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) { opacity: 0; @@ -97,10 +92,6 @@ if (hexo-config('links_settings.layout') == 'inline') { display: inline-block; sidebar-inline-links-item(); - - if (!hexo-config('social_icons.icons_only')) { - width: unset; - } } } diff --git a/source/js/next-boot.js b/source/js/next-boot.js index 9880e27..c83a681 100644 --- a/source/js/next-boot.js +++ b/source/js/next-boot.js @@ -71,15 +71,6 @@ NexT.boot.registerEvents = function() { target && target.click(); } }); - - if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') { - NexT.utils.setAffixParam(); - window.matchMedia('(min-width: 992px)').addListener(event => { - if (event.matches) { - NexT.utils.setAffixParam(); - } - }); - } }; NexT.boot.refresh = function() { diff --git a/source/js/utils.js b/source/js/utils.js index 60b406d..bfc8d21 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -354,13 +354,6 @@ NexT.utils = { } }, - setAffixParam: function() { - const sidebarOffset = CONFIG.sidebar.offset || 12; - const headerOffset = document.querySelector('.header-inner').offsetHeight; - - document.querySelector('.sidebar-inner').style.marginTop = headerOffset + sidebarOffset + 'px'; - }, - getScript: function(url, callback, condition) { if (condition) { callback();