Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update codeblock style and add border-radius settings #194

Merged
merged 3 commits into from
Mar 21, 2018
Merged

Update codeblock style and add border-radius settings #194

merged 3 commits into from
Mar 21, 2018

Conversation

sli1989
Copy link
Collaborator

@sli1989 sli1989 commented Mar 21, 2018 •
edited
Loading

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?

  • 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?

1

Issue Number(s): N/A

What is the new behavior?

  • Optimize the visual style of codeblock

2

  • 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

3

How to use?

In NexT _config.yml:

...

Does this PR introduce a breaking change?

  • Yes.
  • No.

ivan-nginx
ivan-nginx reviewed Mar 21, 2018
View reviewed changes
source/css/_common/components/highlight/highlight.styl Outdated
@@ -64,6 +66,10 @@ pre {
color: $highlight-foreground;
line-height: 1em;
margin-bottom: 1em;
margin: 0em;
padding: 0.5em;
background: #eee;
Copy link
Member

@ivan-nginx ivan-nginx Mar 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Line 151 in 52d3c02

$code-background = $gainsboro

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

anything else?

Copy link
Member

@ivan-nginx ivan-nginx Mar 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I saw it..

ivan-nginx
ivan-nginx approved these changes Mar 21, 2018
View reviewed changes
Copy link
Member

@ivan-nginx ivan-nginx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah! It's good.

@ivan-nginx
Copy link
Member

ivan-nginx commented Mar 21, 2018 •
edited
Loading

But, here is some else thing...

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

@sli1989
Copy link
Collaborator Author

sli1989 commented Mar 21, 2018 •
edited
Loading

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

@ivan-nginx
Copy link
Member

the latest commit is fine.

Demo with latest commit & border radius?

@sli1989
Copy link
Collaborator Author

sli1989 commented Mar 21, 2018

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

sli1989
sli1989 commented Mar 21, 2018
View reviewed changes
source/css/_common/components/highlight/highlight.styl Outdated
}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here has deleted.

@ivan-nginx
Copy link
Member

So, merge icon and go see here?

@sli1989
Copy link
Collaborator Author

sli1989 commented Mar 21, 2018

Live demo updated. There is no problem.

@ivan-nginx
Copy link
Member

So, yeah. It's good for now.

@sli1989 sli1989 added this to the v6.0.7 milestone Mar 21, 2018
@sli1989 sli1989 merged commit bcd8a28 into theme-next:master Mar 21, 2018
@sli1989 sli1989 deleted the code-block-style branch March 21, 2018 13:38
This was referenced Apr 24, 2018
Closed
Closed
geekrainy pushed a commit to geekrainy/theme-next-geekrainy that referenced this pull request Apr 28, 2018
@geekrainy
Update codeblock style and add border-radius settings (theme-next#194)
4a2e38b 
* Update codeblock style and add border-radius settings

* Add border radius as variable

* Replace `$gainsboro` by `$code-background`.
tongluyang pushed a commit to tongluyang/hexo-theme-next that referenced this pull request Nov 19, 2019
Update codeblock style and add border-radius settings (theme-next#194)
4d3c8ee 
* Update codeblock style and add border-radius settings

* Add border radius as variable

* Replace `$gainsboro` by `$code-background`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ivan-nginx ivan-nginx ivan-nginx approved these changes

Assignees
No one assigned
Labels
⭐ Feature
Projects
None yet
Milestone
v6.1.0
Development

Successfully merging this pull request may close these issues.
2 participants
@sli1989 @ivan-nginx