From 6f094643e3e48f1dc517a8b6560050b27b5ea9b2 Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Sun, 5 Apr 2020 22:08:58 +0800 Subject: [PATCH] gap-row --- _config.yml | 4 +- layout/_partial/scripts.ejs | 2 +- source/css/_base/index.styl | 2 +- source/css/_defines/layout.styl | 4 +- source/css/_highlight/index.styl | 64 +++++++++++++++++++++++++- source/css/_layout/article.styl | 42 +++++++++-------- source/css/_layout/main.styl | 14 +++--- source/css/_layout/sidebar.styl | 4 +- source/css/_tag-plugins/folding.styl | 12 ++--- source/css/_tag-plugins/media.styl | 2 +- source/css/_tag-plugins/note.styl | 10 ++-- source/css/_tag-plugins/tabs.styl | 10 ++-- source/css/_third-party/clipboard.styl | 4 +- source/css/_third-party/fancybox.styl | 2 +- 14 files changed, 121 insertions(+), 55 deletions(-) diff --git a/_config.yml b/_config.yml index b557be0..8044341 100755 --- a/_config.yml +++ b/_config.yml @@ -41,8 +41,8 @@ style: h2: 48px # Spacing above H2 (only px unit) h3: 32px # Spacing above H3 (only px unit) h4: 16px # Spacing above H4 (only px unit) - block: 1rem # Paragraph spacing between blocks - p: .5rem # Paragraph spacing within a block + paragraph: 1.5rem # Paragraph spacing between paragraphs + row: .5rem # Paragraph spacing between other elements border_radius: card: 8px codeblock: 4px diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index f208caf..371ed5c 100755 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -228,7 +228,7 @@ -<% if (theme.plugins.clipboard && theme.style.body.highlight.copy_btn) { %> +<% if (theme.plugins.clipboard && (theme.style.body.highlight.copy_btn == true)) { %> <%- partial('_third-party/clipboard') %> <% } %> diff --git a/source/css/_base/index.styl b/source/css/_base/index.styl index 6ee3b7e..2700a8d 100644 --- a/source/css/_base/index.styl +++ b/source/css/_base/index.styl @@ -250,7 +250,7 @@ table display: inline-block max-width: 100% scrollbar() - margin-right: $gap-p + margin-right: $gap-row vertical-align: text-top; th background-color: darken($color-block, 2) diff --git a/source/css/_defines/layout.styl b/source/css/_defines/layout.styl index b9f48e1..40c41ff 100644 --- a/source/css/_defines/layout.styl +++ b/source/css/_defines/layout.styl @@ -21,8 +21,8 @@ $gap = convert(hexo-config('style.gap.base')) || 16px $gap-h2 = convert(hexo-config('style.gap.h2')) || 48px $gap-h3 = convert(hexo-config('style.gap.h3')) || 32px $gap-h4 = convert(hexo-config('style.gap.h4')) || 16px -$gap-block = convert(hexo-config('style.gap.block')) || 1rem // 区块间距 -$gap-p = convert(hexo-config('style.gap.p')) || .5rem // 段落间距 +$gap-paragraph = convert(hexo-config('style.gap.paragraph')) || 1rem // 区块间距 +$gap-row = convert(hexo-config('style.gap.row')) || .5rem // 行间距 $gap-card = $gap // border width diff --git a/source/css/_highlight/index.styl b/source/css/_highlight/index.styl index 01f88ed..2405f94 100644 --- a/source/css/_highlight/index.styl +++ b/source/css/_highlight/index.styl @@ -4,11 +4,73 @@ pre margin: 0 - $gap !important padding: $gap !important scrollbar() + if hexo-config('style.body.highlight.language') == true + &:before + position: absolute + top: 0 + right: 0 + color: $color-meta + font-size: $fontsize-footnote + padding: 4px 8px + &.md:before,&.markdown:before + content: "md" + &.yaml:before + content: "YAML" + &.json:before + content: "JSON" + + &.html:before + content: "HTML" + &.js:before,&.javascript:before + content: "JS" + &.css:before + content: "CSS" + &.less:before + content: "Less" + &.stylus:before + content: "Stylus" + + &.bash:before + content: "bash" + &.shell:before + content: "shell" + &.sh:before + content: "sh" + &.ini:before + content: "ini" + + &.c:before + content: "C" + &.cpp:before + content: "C++" + &.objc:before,&.objectivec:before + content: "Objective-C" + &.swift:before + content: "Swift" + + &.java:before + content: "Java" + &.python:before + content: "Python" + &.php:before + content: "PHP" + &.rust:before + content: "Rust" + &.sql:before + content: "SQL" + &.ruby:before + content: "Ruby" + &.makefile:before + content: "Makefile" + &.go:before + content: "Go" + &.typescript:before + content: "TypeScript" .highlight position: relative width: 100% - margin: $gap-block 0 + margin: $gap-row 0 display: block background: $color-codeblock font-size: $fontsize-code diff --git a/source/css/_layout/article.styl b/source/css/_layout/article.styl index f9ba51c..6b3482a 100644 --- a/source/css/_layout/article.styl +++ b/source/css/_layout/article.styl @@ -35,7 +35,7 @@ h1,h2,h3,h4,h5,h6 &:first-child - margin-top: $gap-block + margin-top: $gap-row padding-top: 0 &.title left: 0 @@ -64,17 +64,17 @@ h5 font-weight: bold color: $color-h5 - margin-top: $gap-block + margin-top: $gap-row h6 color: $color-h6 - margin-top: $gap-block + margin-top: $gap-row center &,p text-align: center .aplayer - margin: $gap-block 0 + margin: $gap-row 0 display: inline-block width: 400px max-width: 100% @@ -100,11 +100,11 @@ padding-right: 4px margin-left: 2px margin-right: 2px + p - margin-top: $gap-block - margin-bottom: $gap-block + margin-top: $gap-row + margin-bottom: $gap-row text-align: $textalign-p - max-width: 100% overflow: auto &.has-jax @@ -121,8 +121,8 @@ list-style: initial padding-left: 8px margin-left: $gap - margin-top: $gap-block - margin-bottom: $gap-block + margin-top: $gap-row + margin-bottom: $gap-row ul,ol margin-top: 0 margin-bottom: 0 @@ -163,8 +163,8 @@ text-align: left word-wrap: normal font-size: $fontsize-list - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row position: relative width: 100% padding: .7em 1.2em @@ -174,7 +174,7 @@ text-align: justify color: inherit font-style: italic - margin: $gap-p 0 + margin: $gap-row 0 cite &::before content: '----' @@ -195,8 +195,8 @@ display: block -moz-box-sizing: border-box box-sizing: border-box - margin-top: $gap-block - margin-bottom: $gap-block + margin-top: $gap-row + margin-bottom: $gap-row overflow: auto background: $color-codeblock font-size: $fontsize-code @@ -241,7 +241,7 @@ .widget background: transparent - margin: $gap-block 0 + margin: $gap-row 0 box-shadow: none border-radius: $border-codeblock cursor: auto @@ -333,15 +333,17 @@ h4 &:before margin-top: $gap-h4 - $navbar-height - 2 * $gap - margin-bottom: $gap-block + margin-bottom: $gap-row h5 font-weight: bold - margin-bottom: $gap-block + margin-bottom: $gap-row h6 - margin-bottom: $gap-block - + margin-bottom: $gap-row + p + margin-top: $gap-paragraph + margin-bottom: $gap-paragraph article .readmore - margin-top: $gap-block + margin-top: $gap-row >a font-size: $fontsize-meta diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl index 3115d52..817338b 100644 --- a/source/css/_layout/main.styl +++ b/source/css/_layout/main.styl @@ -93,13 +93,13 @@ .widget .content p,ul,ol,table,.tabs,details - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row .post padding-top: 0 padding-bottom: 0 - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row &.grid .content .grid.fixed a width: "calc(100%/8 - 0 * %s)" % $gap @media screen and (max-width: $device-laptop) @@ -322,12 +322,12 @@ div.hoverbox .article p[ct] margin-top: 0 - margin-bottom: $gap-p + margin-bottom: $gap-row font-size: $fontsize-h4 color: $color-text p[cst] - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row font-size: $fontsize-meta diff --git a/source/css/_layout/sidebar.styl b/source/css/_layout/sidebar.styl index 80297c4..dff9a68 100644 --- a/source/css/_layout/sidebar.styl +++ b/source/css/_layout/sidebar.styl @@ -56,8 +56,8 @@ >.content padding: $gap * 0.5 0 p - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row ul>li a color: $color-meta diff --git a/source/css/_tag-plugins/folding.styl b/source/css/_tag-plugins/folding.styl index 86584d3..2725aca 100644 --- a/source/css/_tag-plugins/folding.styl +++ b/source/css/_tag-plugins/folding.styl @@ -1,7 +1,7 @@ details display: block padding: $gap - margin: $gap-block 0 + margin: $gap-row 0 border-radius: $border-codeblock border: 1px solid darken($color-block, 4) background: $color-card @@ -25,8 +25,8 @@ details float: right content: '+' >div.content - margin-top: $gap-block - margin-bottom: "calc(%s - %s)" % ($gap-block $gap) + margin-top: $gap-row + margin-bottom: "calc(%s - %s)" % ($gap-row $gap) &[blue] border: 1px solid darken(bgcolor($color-md-blue), 4) >summary @@ -76,13 +76,13 @@ details[open] border-bottom: 1px solid darken(bgcolor($color-mac-red), 8) >summary color: $color-p - margin-bottom: $gap-block + margin-bottom: $gap-row &:hover &:after content: '-' >div.content> p,.tabs,ul,ol,.highlight,div.note - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row &:last-child margin-bottom: 0 diff --git a/source/css/_tag-plugins/media.styl b/source/css/_tag-plugins/media.styl index 22c72d4..cebd532 100644 --- a/source/css/_tag-plugins/media.styl +++ b/source/css/_tag-plugins/media.styl @@ -10,7 +10,7 @@ div.videos flex-wrap: wrap justify-content: space-start align-items: flex-end - margin: $gap-p 0 - $sp + margin: $gap-row 0 - $sp video,iframe width: 100% margin: $sp diff --git a/source/css/_tag-plugins/note.styl b/source/css/_tag-plugins/note.styl index b77cae9..8737d1e 100644 --- a/source/css/_tag-plugins/note.styl +++ b/source/css/_tag-plugins/note.styl @@ -5,9 +5,9 @@ div.note border($c) return mix($c, $color-card, 100) position: relative - margin-top: $gap-block - margin-bottom: $gap-block - padding: $gap-p $gap + margin-top: $gap-row + margin-bottom: $gap-row + padding: $gap-row $gap padding-left: "calc(16px + %s)" % $gap border-radius: $border-codeblock @@ -31,8 +31,8 @@ div.note blockquote, img font-size: $fontsize-list - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row &::before position: absolute diff --git a/source/css/_tag-plugins/tabs.styl b/source/css/_tag-plugins/tabs.styl index 53f0992..d82ead1 100644 --- a/source/css/_tag-plugins/tabs.styl +++ b/source/css/_tag-plugins/tabs.styl @@ -4,14 +4,14 @@ $tbr = 4px div.tabs display: block position: relative - margin-top: $gap-block - margin-bottom: $gap-block + margin-top: $gap-row + margin-bottom: $gap-row border-radius: $tbr background: $color-card border: 1px solid $border-color .highlight,p,ul,ol,div.note,details - margin-top: $gap-p - margin-bottom: $gap-p + margin-top: $gap-row + margin-bottom: $gap-row div.tabs ul.nav-tabs @@ -49,7 +49,7 @@ div.tabs border-top: 1px solid $border-color margin-top: -1px .tab-pane - padding: $gap-p $gap + padding: $gap-row $gap &:not(.active) display: none &.active diff --git a/source/css/_third-party/clipboard.styl b/source/css/_third-party/clipboard.styl index c8803a1..1683596 100644 --- a/source/css/_third-party/clipboard.styl +++ b/source/css/_third-party/clipboard.styl @@ -1,10 +1,11 @@ //代码块复制按钮 -if hexo-config('style.body.highlight.copy_btn') +if hexo-config('style.body.highlight.copy_btn') == true .highlight //方便copy代码按钮（btn-copy）的定位 position: relative .btn-copy + z-index: 1 display: inline-block cursor: pointer border: none @@ -31,5 +32,6 @@ if hexo-config('style.body.highlight.copy_btn') .highlight:hover .btn-copy opacity: 1 + .article pre:hover .btn-copy opacity: 1 diff --git a/source/css/_third-party/fancybox.styl b/source/css/_third-party/fancybox.styl index a08b4cf..ba26181 100644 --- a/source/css/_third-party/fancybox.styl +++ b/source/css/_third-party/fancybox.styl @@ -1,5 +1,5 @@ div.fancybox - margin: $gap-block 0 + margin: $gap-row 0 $sp = 1px >a,>p>a margin: $sp