Style back-to-top button to make sidebar more comfortable

[backrunner]

Add margin-bottom: 10px to the root div, to make this part more comfortable.
Just a style patch.

PR Checklist

• The commit message follows guidelines for NexT.
• Tests for the changes was maked (for bug fixes / features).
  • Muse | Mist have been tested.
  • Pisces | Gemini have been tested.
• Docs in NexT website have been added / updated (for features).

PR Type

• Bugfix.
• Feature.
• Code style update (formatting, local variables).
• Refactoring (no functional changes, no api changes).
• Build related changes.
• CI related changes.
• Documentation content changes.
• Other... Please describe:

What is the current behavior?

Issue resolved: N/A

What is the new behavior?

• Screenshots with this changes:
  Before adding an extra margin:
  
  Seems like the bottom of the links-of-blogroll is too narrow, may cause a weird feeling.

After applied this change:

• Link to demo site with this changes:
  https://io.backrunner.top
  You can see the part on the left.

Does this PR introduce a breaking change?

• Yes.
• No.

[welcome]

Thanks so much for opening your first PR here!

[claassistantio]

All committers have signed the CLA.

[stevenjoezhang]

I think the cause of the problem is the back-to-top button. Without back-to-top enabled, there would be too much white space.

You can try to style the back-to-top button to make it look better. However, there are some js files that need to be changed accordingly:

hexo-theme-next/source/js/utils.js

Line 324 in 4992cf7

// Margin of sidebar b2t: 8px -10px -20px, brings a different of 12px.

[backrunner]

I think the cause of the problem is the back-to-top button. Without back-to-top enabled, there would be too much white space.

How about adding an extra margin to .back-to-top-on?
Here's my codes (inject):

.back-to-top {
  margin: -4px -10px -18px;
  // or 0px -10px -18px
}
.back-to-top-on {
  margin-top: 16px;
}

In the original style, the back2top button looks like overflow, so I set the bottom margin to -18px.

After applying these styles:

With back2top button:

Without back2top button:

With friend links:

I don't know if the dynamic height of sidebar could cause some problem.
I changed the lines you mentioned like this:

// Margin of sidebar b2t: -4px -10px -18px, brings a different of 22px.
if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += (sidebarOffset * 2) - 22;

[WaldronWhy]

unsubscribe

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "BackRunner"<notifications@github.com&gt;; 发送时间: 2020年2月5日(星期三) 下午3:51 收件人: "theme-next/hexo-theme-next"<hexo-theme-next@noreply.github.com&gt;; 抄送: "Subscribed"<subscribed@noreply.github.com&gt;; 主题: Re: [theme-next/hexo-theme-next] Make links-of-blogroll more comfortable (#1367) I think the cause of the problem is the back-to-top button. Without back-to-top enabled, there would be too much white space. How about adding an extra margin to .back-to-top-on? Here's my codes: .back-to-top { margin: -4px -10px -18px; } .back-to-top-on { margin-top: 16px; } In the original style, the back2top button looks like overflow, so I set the bottom margin to -18px. After applying these styles: With back2top button: Without back2top button: With friend links: I don't know if the dynamic height of sidebar could cause some problem. I changed the lines you mentioned like this: // Margin of sidebar b2t: -4px -10px -18px, brings a different of 22px. if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += (sidebarOffset * 2) - 22; — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[stevenjoezhang]

I suggest reducing the margin here from 16px to 8px. This line of code affects all four schemes, not just Pisces and Gemini. 16px is too big for the other two schemes (Muse and Mist).

Suggested change

	margin-top: 16px;
	margin-top: 8px;

And it looks like this after modification

Do you have a better suggestion?

[backrunner]

If it is acceptable, I think the following line could be better:

margin-top: ($scheme == 'Muse' || $scheme == 'Mist') ? -4px : 16px;

IMO, the best way is only apply this patch to Pisces and Gemini, put my patch into the scheme file (/source/css/_schemes/Pisces/_sidebar.styl), but that could make project more difficult to maintain.

[backrunner]

Put codes into scheme file can avoid the position of back-to-top button to be too high.
Cause the final margin-top in .back-to-button changed from 8px to -4px, so the button will be higher than before when Muse or Mist is enabled (in the post pages), but the original margin-top seems more suitable.
So what's your opinion about this?

[welcome]

Congrats on merging your first pull request here! 🎉 How awesome!