Update codeblock style and add border-radius settings by sli1989 · Pull Request #194 · theme-next/hexo-theme-next

sli1989 · 2018-03-21T05:04:10Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines.
Tests for the changes have been added (for bug fixes / features).
- Muse | Mist have been tested.
- Pisces | Gemini have been tested.
Docs have been added / updated (for bug fixes / features).

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Issue Number(s): N/A

What is the new behavior?

Optimize the visual style of codeblock

Add the option of border-radius of codeblock. if codeblock.border_radius=5, the codeblock would be loaded with rounded corner.

+# Manual define the border radius in codeblock
+# Leave it empty for the default 1
+codeblock:
+  border_radius: 5

Screens with this changes: N/A
Link to demo site with this changes: http://test.saili.science/posts/codeblock-test/

How to use?

In NexT _config.yml:

...

Does this PR introduce a breaking change?

Yes.
No.

ivan-nginx · 2018-03-21T07:49:46Z

source/css/_common/components/highlight/highlight.styl

    margin-bottom: 1em;
+	margin: 0em;
+	padding: 0.5em;
+	background: #eee;


hexo-theme-next/source/css/_variables/base.styl

Line 151 in 52d3c02

$code-background = $gainsboro

anything else?

Yeah. I think need to set 1 codeblock.rounded variable at the top of page. Here is examples:

hexo-theme-next/source/css/_variables/base.styl

Lines 337 to 340 in 52d3c02

// Note colors

// --------------------------------------------------

// Read note light_bg_offset from NexT config and set in "lbg%" to use it as string variable.

hexo-config('note.light_bg_offset') is a 'unit' ? (lbg = unit(hexo-config('note.light_bg_offset'),"%")) : (lbg = 0)

hexo-theme-next/source/css/_variables/Gemini.styl

Line 10 in 52d3c02

$sidebar-width = hexo-config('sidebar_width') is a 'unit' ? hexo-config('sidebar_width') : 240

hexo-theme-next/source/css/_schemes/Gemini/index.styl

Lines 22 to 24 in 52d3c02

// Read values from NexT config and set they as local variables to use as string variables (in any CSS section).

hexo-config('sidebar.offset') is a 'unit' ? (sboffset = unit(hexo-config('sidebar.offset'), px)) : (sboffset = 0)

use_seo = hexo-config('seo');

use_seo good for example here.

to set border-radius: ?+px? i don't know the css grammar. 😂

Yep. By this variable we can set custom border radius too. See sidebar.offset in 3rd example.

i don't know the css grammar.

This actually like JS grammar. This is swig. Try it as in examples, it's not hard.

yeah, I saw it..

ivan-nginx

Yeah! It's good.

ivan-nginx · 2018-03-21T10:10:15Z

But, here is some else thing...

See here rounding? Where strings count. I think round must be only on left-bottom corner:

sli1989 · 2018-03-21T10:40:13Z

I have deleted the border-radius in pre section in last commit. the latest commit is fine.

ivan-nginx · 2018-03-21T10:42:36Z

the latest commit is fine.

Demo with latest commit & border radius?

sli1989 · 2018-03-21T10:45:16Z

The latest living demo has changed to test footer icon... Above feature hasn't merged.

sli1989 · 2018-03-21T10:46:06Z

source/css/_common/components/highlight/highlight.styl

 pre {
  @extend $code-block;
  padding: 10px;
-  if hexo-config('codeblock.rounded') { border-radius: 5px;}


Here has deleted.

ivan-nginx · 2018-03-21T10:46:08Z

So, merge icon and go see here?

sli1989 · 2018-03-21T11:38:58Z

Live demo updated. There is no problem.

ivan-nginx · 2018-03-21T11:50:10Z

So, yeah. It's good for now.

* Update codeblock style and add border-radius settings * Add border radius as variable * Replace `$gainsboro` by `$code-background`.

Update codeblock style and add border-radius settings

9b71987

ivan-nginx reviewed Mar 21, 2018

View reviewed changes

sli1989 and others added 2 commits March 21, 2018 18:03

Add border radius as variable

786f75a

Replace $gainsboro by $code-background.

ccbaed8

ivan-nginx approved these changes Mar 21, 2018

View reviewed changes

sli1989 commented Mar 21, 2018

View reviewed changes

sli1989 added this to the v6.0.7 milestone Mar 21, 2018

sli1989 added the ⭐ Feature label Mar 21, 2018

sli1989 merged commit bcd8a28 into theme-next:master Mar 21, 2018

sli1989 deleted the code-block-style branch March 21, 2018 13:38

This was referenced Apr 24, 2018

NexT v7.x Roadmap #67

Closed

Titlebar in codeblocks [solved] #100

Closed

	// Note colors
	// --------------------------------------------------
	// Read note light_bg_offset from NexT config and set in "lbg%" to use it as string variable.
	hexo-config('note.light_bg_offset') is a 'unit' ? (lbg = unit(hexo-config('note.light_bg_offset'),"%")) : (lbg = 0)

	// Read values from NexT config and set they as local variables to use as string variables (in any CSS section).
	hexo-config('sidebar.offset') is a 'unit' ? (sboffset = unit(hexo-config('sidebar.offset'), px)) : (sboffset = 0)
	use_seo = hexo-config('seo');

Conversation

sli1989 commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

How to use?

Does this PR introduce a breaking change?

Uh oh!

ivan-nginx Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sli1989 Mar 21, 2018

Choose a reason for hiding this comment

Uh oh!

ivan-nginx Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sli1989 Mar 21, 2018

Choose a reason for hiding this comment

Uh oh!

ivan-nginx Mar 21, 2018

Choose a reason for hiding this comment

Uh oh!

sli1989 Mar 21, 2018

Choose a reason for hiding this comment

Uh oh!

ivan-nginx left a comment

Choose a reason for hiding this comment

Uh oh!

ivan-nginx commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sli1989 commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ivan-nginx commented Mar 21, 2018

Uh oh!

sli1989 commented Mar 21, 2018

Uh oh!

sli1989 Mar 21, 2018

Choose a reason for hiding this comment

Uh oh!

ivan-nginx commented Mar 21, 2018

Uh oh!

sli1989 commented Mar 21, 2018

Uh oh!

ivan-nginx commented Mar 21, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sli1989 commented Mar 21, 2018 •

edited

Loading

ivan-nginx Mar 21, 2018 •

edited

Loading

ivan-nginx Mar 21, 2018 •

edited

Loading

ivan-nginx commented Mar 21, 2018 •

edited

Loading

sli1989 commented Mar 21, 2018 •

edited

Loading