From 16bfb72a339b669a9f876bc7adfa422c27df04be Mon Sep 17 00:00:00 2001 From: liuyib <1656081615@qq.com> Date: Fri, 16 Aug 2019 18:48:49 +0800 Subject: [PATCH] refactor: Optimize UI style & not show header by default --- layout/_common/header.pug | 2 +- source/css/_common/main.styl | 4 ++-- source/css/_common/notification.styl | 5 +---- source/css/_common/page.styl | 16 ++++++++-------- source/css/_components/copy.styl | 1 + source/css/_components/external-link.styl | 4 ---- source/css/_components/tag-plugin/note.styl | 8 ++++---- source/css/_global/base.styl | 2 +- source/css/_highlight/highlight.styl | 20 +++++++++++--------- source/css/var.styl | 7 ++++++- source/js/copy.js | 2 +- 11 files changed, 36 insertions(+), 35 deletions(-) diff --git a/layout/_common/header.pug b/layout/_common/header.pug index c9f51e9..2246c33 100644 --- a/layout/_common/header.pug +++ b/layout/_common/header.pug @@ -5,7 +5,7 @@ header#header( theme.header.bg_image.url : " " })` ) - nav.header-nav + nav.header-nav.slider-up div.header-nav-inner div.fa.fa-bars.header-nav-menu-icon diff --git a/source/css/_common/main.styl b/source/css/_common/main.styl index 416d38c..03de6b6 100644 --- a/source/css/_common/main.styl +++ b/source/css/_common/main.styl @@ -8,7 +8,7 @@ setUlStyle(content, hoverColor) color: $ul-list-color transition: color .2s ease transform: scale(.6) - @extend $font-face + @extend $font-face-awesome &:hover &::before @@ -46,7 +46,7 @@ setUlStyle(content, hoverColor) color: $h-link-logo-color opacity: 0 transition: opacity .1s ease - @extend $font-face + @extend $font-face-awesome &:hover &::after diff --git a/source/css/_common/notification.styl b/source/css/_common/notification.styl index 062a5b7..4c65de8 100644 --- a/source/css/_common/notification.styl +++ b/source/css/_common/notification.styl @@ -9,6 +9,7 @@ position: relative border-radius: 3px padding: 8px 12px + font-size: $font-size-large line-height: 1rem color: $black-light background-color: #fff @@ -38,9 +39,5 @@ & ~ i color: $alert-error - &-icon - font-size: 20px - &-description margin-left: .5rem - font-size: 18px diff --git a/source/css/_common/page.styl b/source/css/_common/page.styl index 897c39c..24e0081 100644 --- a/source/css/_common/page.styl +++ b/source/css/_common/page.styl @@ -69,16 +69,16 @@ &::before color: $categories-list-dot-hover-color - &-count - padding-left: .3em - font-size: $font-size-base - color: $categories-post-count-color + &-count + padding-left: .3em + font-size: $font-size-base + color: $categories-post-count-color - &::before - content: '(' + &::before + content: '(' - &::after - content: ')' + &::after + content: ')' // Gallery in post / page. .gallery-image diff --git a/source/css/_components/copy.styl b/source/css/_components/copy.styl index 06dfb60..980bc66 100644 --- a/source/css/_components/copy.styl +++ b/source/css/_components/copy.styl @@ -4,6 +4,7 @@ right: 0 width: 1.5rem height: 1.5rem + line-height: 1.5rem text-align: center color: $black-light cursor: pointer diff --git a/source/css/_components/external-link.styl b/source/css/_components/external-link.styl index 8cf4d2f..e0ac4fc 100644 --- a/source/css/_components/external-link.styl +++ b/source/css/_components/external-link.styl @@ -11,7 +11,3 @@ .post-title .external-link i font-size: .7em - -.article-sort-item - .external-link i - font-size: .55em diff --git a/source/css/_components/tag-plugin/note.styl b/source/css/_components/tag-plugin/note.styl index baa75c6..2eb8c41 100644 --- a/source/css/_components/tag-plugin/note.styl +++ b/source/css/_components/tag-plugin/note.styl @@ -17,19 +17,19 @@ font-size: $font-size-base + 6px &.default::before - content: '\f0a9' + content: $note-default color: #777 &.success::before - content: '\f058' + content: $note-success color: #42b983 &.warning::before - content: '\f06a' + content: $note-warning color: #ecc91e &.danger::before - content: '\f056' + content: $note-danger color: #dc3b3b &.default diff --git a/source/css/_global/base.styl b/source/css/_global/base.styl index 149d88e..7996c65 100644 --- a/source/css/_global/base.styl +++ b/source/css/_global/base.styl @@ -65,7 +65,7 @@ hr font-size: 24px color: $hr-icon-color transform: translateY(-50% - 4px) - @extend $font-face + @extend $font-face-awesome blockquote border-left: 5px solid $quote-left-color diff --git a/source/css/_highlight/highlight.styl b/source/css/_highlight/highlight.styl index ef17e97..f3de00a 100644 --- a/source/css/_highlight/highlight.styl +++ b/source/css/_highlight/highlight.styl @@ -8,7 +8,7 @@ for lang in languages .highlight{'.' + lang} figcaption span - &::before + &:first-child::before content: lang margin: 0 .6rem color: alpha($highlight-header-color, .5) @@ -44,20 +44,22 @@ for lang in languages background-color: $highlight-header-bg-color span - float: left - color: $highlight-header-color + &:first-child + float: left + color: $highlight-header-color - a - float: right - margin-right: 2rem - border-bottom: 0 + span + &:nth-child(2) + float: right + margin-right: 2rem figcaption.custom padding: .1rem 0 min-height: 1.5rem - span - margin: 0 1rem 0 .6rem + .custom-lang + float: left + margin: 0 .6rem color: alpha($highlight-header-color, .5) .gutter, diff --git a/source/css/var.styl b/source/css/var.styl index 284f1ac..b9b960f 100644 --- a/source/css/var.styl +++ b/source/css/var.styl @@ -175,7 +175,7 @@ $font-weight-bolder = 700 // Icon content define // ------------------------------------------- // All icon elements will inherit these attributes. -$font-face +$font-face-awesome font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; @@ -190,6 +190,11 @@ $icon-ul-list-3 = '\f0c8' $icon-hr = '\f0fb' +$note-default = '\f0a9' +$note-success = '\f058' +$note-warning = '\f06a' +$note-danger = '\f056' + // ------------------------------------------- // z-index list // ------------------------------------------- diff --git a/source/js/copy.js b/source/js/copy.js index ed874f5..1ac8547 100644 --- a/source/js/copy.js +++ b/source/js/copy.js @@ -10,7 +10,7 @@ $(document).ready(function () { .filter(function (e) { return e !== CODEBLOCK_CLASS_NAME; }); var codeHeader = $( '
' + - '' + lang + '' + + '
' + lang + '
' + '
' )[0]; -- GitLab