From a5ee7e027e40893ddc749e1f633f6107583683b4 Mon Sep 17 00:00:00 2001 From: XPoet Date: Sat, 21 Mar 2020 23:04:01 +0800 Subject: [PATCH] =?UTF-8?q?modified:=20CSS=20=E6=8A=BD=E7=A6=BB=E5=87=BA?= =?UTF-8?q?=E5=8F=98=E9=87=8F=EF=BC=8C=E4=BC=98=E5=8C=96=20CSS=20=E5=86=99?= =?UTF-8?q?=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config.yml | 58 +-- layout/article-post.ejs | 11 +- layout/category-post.ejs | 4 +- layout/common/article-meta-info.ejs | 11 +- layout/common/header.ejs | 17 - layout/common/nav.ejs | 9 +- layout/common/valine.ejs | 28 +- layout/home-post.ejs | 8 +- layout/right-side.ejs | 2 + source/css/animated.styl | 21 - source/css/basic.styl | 113 ----- source/css/highlight/highlight.styl | 4 +- source/css/highlight/theme.styl | 8 + source/css/layout/about.styl | 3 + source/css/layout/archive-post.styl | 12 +- source/css/layout/article-post.styl | 100 +---- source/css/layout/basic.styl | 79 ++++ source/css/layout/category-post.styl | 7 +- source/css/layout/common/animated.styl | 41 ++ .../css/layout/common/article-meta-info.styl | 16 +- source/css/layout/common/footer.styl | 1 - source/css/layout/common/left-side.styl | 4 +- source/css/layout/common/nav.styl | 51 ++- source/css/layout/common/site-info.styl | 20 +- source/css/layout/common/valine.styl | 13 + source/css/layout/home-post.styl | 41 +- source/css/layout/index.styl | 8 +- source/css/layout/right-side.styl | 13 +- source/css/layout/tag-post.styl | 7 +- source/css/layout/variables.styl | 66 +++ source/css/style.styl | 7 +- source/css/variables.styl | 415 ------------------ 32 files changed, 357 insertions(+), 841 deletions(-) delete mode 100644 layout/common/header.ejs delete mode 100644 source/css/animated.styl delete mode 100644 source/css/basic.styl create mode 100644 source/css/layout/about.styl create mode 100644 source/css/layout/basic.styl create mode 100644 source/css/layout/common/animated.styl create mode 100644 source/css/layout/common/valine.styl create mode 100644 source/css/layout/variables.styl delete mode 100644 source/css/variables.styl diff --git a/_config.yml b/_config.yml index 4f0a23d..7112cf0 100644 --- a/_config.yml +++ b/_config.yml @@ -24,60 +24,4 @@ valine: appkey: gdf6tXXLBTLg9qpjS2y6Tbw7 # your leancloud application appkey notify: false # mail notifier , https://github.com/xCss/Valine/wiki verify: false # Verification code - placeholder: 评论一下再走吧~ - - -# --------------------------------------------------------------- -# Font Settings -# - Find fonts on Google Fonts (https://www.google.com/fonts) -# - All fonts set here will have the following styles: -# light, light italic, normal, normal italic, bold, bold italic -# - Be aware that setting too much fonts will cause site running slowly -# - Introduce in 5.0.1 -# --------------------------------------------------------------- -# CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844 -# To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`): -# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS -# --------------------------------------------------------------- -font: - enable: false - - # Uri of fonts host. E.g. //fonts.googleapis.com (Default). - host: - - # Font options: - # `external: true` will load this font family from `host` above. - # `family: Times New Roman`. Without any quotes. - # `size: xx`. Use `px` as unit. - - # Global font settings used on element. - global: - external: true - family: Lato - size: - - # Font settings for Headlines (h1, h2, h3, h4, h5, h6). - # Fallback to `global` font settings. - headings: - external: true - family: - size: - - # Font settings for posts. - # Fallback to `global` font settings. - posts: - external: true - family: - - # Font settings for Logo. - # Fallback to `global` font settings. - logo: - external: true - family: - size: - - # Font settings for and code blocks. - codes: - external: true - family: Source Code Pro - size: 14 + placeholder: 评论一下再走吧~ \ No newline at end of file diff --git a/layout/article-post.ejs b/layout/article-post.ejs index 1a55797..7abc8b7 100644 --- a/layout/article-post.ejs +++ b/layout/article-post.ejs @@ -3,27 +3,28 @@
-

<%= page.title %>

+

<%= page.title %>

-
- <%- partial('common/article-meta-info', {articleData: page, index: true}) %> +
+ <%- partial('common/article-meta-info', {articleObject: page, index: true}) %>
<%- page.content %>
+
<% if (page.prev) { %>
-
<% } %> <% if (page.next) { %>
-
diff --git a/layout/category-post.ejs b/layout/category-post.ejs index f13ff9d..520c753 100644 --- a/layout/category-post.ejs +++ b/layout/category-post.ejs @@ -4,7 +4,9 @@ --> <% if (is_category()) { %>
-
<%- __('category') %>：<%= page.category %> [共<%= page.posts.length %>篇]
+
+ <%- __('category') %>：<%= page.category %> [<%= page.posts.length %>] +
<%- partial('archive-post') %> <% } %> \ No newline at end of file diff --git a/layout/common/article-meta-info.ejs b/layout/common/article-meta-info.ejs index 9841952..7ac590f 100644 --- a/layout/common/article-meta-info.ejs +++ b/layout/common/article-meta-info.ejs @@ -1,15 +1,16 @@
+ - <%= date(articleData.date, 'YYYY-MM-DD HH:mm:ss') %> + <%= date(articleObject.date, 'YYYY-MM-DD HH:mm:ss') %> - <% if (articleData.categories.length) { %> + <% if (articleObject.categories.length) { %>
    - <% articleData.categories.forEach((category, i) => { %> + <% articleObject.categories.forEach((category, i) => { %>
  • <%= i === 0 ? '' : '| ' %><%= category.name %>
    • @@ -19,11 +20,11 @@ <% } %> - <% if (articleData.tags.length) { %> + <% if (articleObject.tags.length) { %>
      - <% articleData.tags.forEach((tag, i) => { %> + <% articleObject.tags.forEach((tag, i) => { %>
    • <%= i === 0 ? '' : '| ' %><%= tag.name %>
      • diff --git a/layout/common/header.ejs b/layout/common/header.ejs deleted file mode 100644 index 0139dce..0000000 --- a/layout/common/header.ejs +++ /dev/null @@ -1,17 +0,0 @@ -
      -

      - 网站标题：<%= config.title %> -

      -

      - 网站描述：<%= config.description %> -

      - -
      \ No newline at end of file diff --git a/layout/common/nav.ejs b/layout/common/nav.ejs index 35c9e8f..2fafb9a 100644 --- a/layout/common/nav.ejs +++ b/layout/common/nav.ejs @@ -1,8 +1,13 @@ -
- <%- partial('common/article-meta-info', {articleData: post, index: true}) %> + <%- partial('common/article-meta-info', {articleObject: post, index: true}) %>
<% }) %> @@ -25,15 +25,13 @@
<% if (page.prev) { %> <% } %> <% if (page.next) { %> <% } %>
diff --git a/layout/right-side.ejs b/layout/right-side.ejs index 1047739..2f528a3 100644 --- a/layout/right-side.ejs +++ b/layout/right-side.ejs @@ -1,7 +1,9 @@
+
<%- partial('common/nav') %>
+
<% if (is_home()) { %> diff --git a/source/css/animated.styl b/source/css/animated.styl deleted file mode 100644 index be6836c..0000000 --- a/source/css/animated.styl +++ /dev/null @@ -1,21 +0,0 @@ -.animated { - animation-fill-mode: both; - animation-duration: 1s; - animation-name fade-in-down -} - -.animated.hinge { - animation-duration: 1s; -} - -@keyframes fade-in-down { - 0% { - opacity: 0; - transform: translateY(-20px); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} diff --git a/source/css/basic.styl b/source/css/basic.styl deleted file mode 100644 index 2ebbb9f..0000000 --- a/source/css/basic.styl +++ /dev/null @@ -1,113 +0,0 @@ -html { - margin: 0 - padding: 0 - background-color: #fff; - font-smoothing: antialiased; -} - -body { - color: rgba(0, 0, 0, 0.5); - font-family: 'PingHei', 'PingFang SC', Helvetica Neue, 'Work Sans', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; - font-size: 15px; - width: 100%; - margin: 0 auto 30px auto; - background-color: #fff; -} - -ul, li, ol { - padding: 0; - margin: 0; - list-style: none -} - -p { - line-height: 1.9em; - font-weight: 400; - font-size: 14px; -} - -a { - text-decoration: none; -} - -a:link, a:visited { - opacity: 1; - transition: all .15s linear; - color: #424242; -} - -a:hover, a:active { - color: #4786D6; -} - -// 按钮样式 -a.btn { - color: #868686; - font-weight: 400; -} - -.btn { - display: inline-block; - position: relative; - outline: 0; - color: rgba(0, 0, 0, 0.44); - background: rgba(0, 0, 0, 0); - font-size: 14px; - text-align: center; - text-decoration: none; - cursor: pointer; - border: 1px solid rgba(0, 0, 0, 0.15); - white-space: nowrap; - font-weight: 400; - font-style: normal; - border-radius: 999em; -} - -.btn:hover { - display: inline-block; - position: relative; - outline: 0; - color: #464545; - background: rgba(0, 0, 0, 0); - font-size: 14px; - text-align: center; - text-decoration: none; - cursor: pointer; - border: 1px solid #464545; - white-space: nowrap; - font-weight: 400; - font-style: normal; - border-radius: 999em; -} - -[role="back"] { - padding: 0.5em 1.25em; - line-height: 1.666em; -} - -[role="home"] { - padding: 0.5em 1.25em; - line-height: 1.666em; -} - -[role="navigation"] { - padding: 0.5em 1.25em; - line-height: 1.666em; -} - -[role="tags"] { - padding: 6px 12px; -} - -// 单行代码样式 -code { - padding: 5px; - font-family: Inconsolata, monospace, sans-serif; - font-size: 0.85em; - white-space: pre-wrap; - border: 1px solid #E3EDF3; - background: #f7f7f9; - color: #d14; - border-radius: 2px; -} - diff --git a/source/css/highlight/highlight.styl b/source/css/highlight/highlight.styl index 0e2a88d..1a371b3 100644 --- a/source/css/highlight/highlight.styl +++ b/source/css/highlight/highlight.styl @@ -15,12 +15,12 @@ $code-block { pre, code { font-family: $code-font-family; } code { - padding: 2px 4px; + padding: 4px; word-wrap: break-word; color: $code-foreground; background: $code-background; border-radius: $code-border-radius; - font-size $code-font-size; + font-size: $code-font-size; } pre { diff --git a/source/css/highlight/theme.styl b/source/css/highlight/theme.styl index 94c320c..1c10676 100644 --- a/source/css/highlight/theme.styl +++ b/source/css/highlight/theme.styl @@ -89,3 +89,11 @@ if $highlight_theme == "night bright" color: lighten($highlight-background, 40%), bg-color: lighten($highlight-background, 16%) } + + +$code-font-size = 0.9em; +$line-height-code-block = 1.5em; +$code-foreground = #ff7600; +$code-background = #f8f8f8; +$code-border-radius = 2px; +$code-font-family = consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; \ No newline at end of file diff --git a/source/css/layout/about.styl b/source/css/layout/about.styl new file mode 100644 index 0000000..ba32d34 --- /dev/null +++ b/source/css/layout/about.styl @@ -0,0 +1,3 @@ +.about-container { + +} \ No newline at end of file diff --git a/source/css/layout/archive-post.styl b/source/css/layout/archive-post.styl index c6a7411..4067572 100644 --- a/source/css/layout/archive-post.styl +++ b/source/css/layout/archive-post.styl @@ -1,11 +1,15 @@ +@require 'variables.styl' + +$archive-year-font-size = 24px; + .archive-container { .archives-wrap { margin-bottom 20px .archive-year { - font-size: 24px; - color: #666; + font-size: $archive-year-font-size; + color: $article-title-color ; font-weight: 600; } @@ -16,10 +20,10 @@ font-size 16px a.archive-article-title { - color #8f8f8f + color $archive-article-title-color &:hover { - color: #4786D6; + color: $a-hover-color; } } diff --git a/source/css/layout/article-post.styl b/source/css/layout/article-post.styl index fb994d8..0616e83 100644 --- a/source/css/layout/article-post.styl +++ b/source/css/layout/article-post.styl @@ -1,111 +1,29 @@ +@require 'variables.styl' + .article-container { .article-title { - h1 { - text-transform: uppercase; - font-size: 30px; - letter-spacing: 5px; - line-height: 1; - } - - h2 { - text-transform: uppercase; - letter-spacing: 1px; - font-size: 28px; - line-height: 1; - font-weight: 600; - color: #5f5f5f; - - } h3 { text-transform: uppercase; - letter-spacing: 1px; - line-height: 1; font-weight: 600; - color: #464646; + color: $article-title-color; font-size: 22px; margin: 0; - } + a { - text-decoration: none; - letter-spacing: 1px; - color: #5f5f5f; - - &:hover { - text-decoration: underline; - } - + color: $article-title-color; } + + } - .article-meta-info { - - margin-top: 20px; - - .meta { - max-width: 100%; - height: 25px; - color: #bbbbbb; - - .info { - float: left; - font-size: 12px; - - .date { - margin-right: 10px; - } - } - - a { - text-decoration: none; - color: #bbbbbb; - padding-right: 10px; - - &:hover { - color: #4786D6; - } - } - - i { - margin-right: 6px; - } - } - - - .tags { - padding-bottom: 15px; - font-size: 13px; - - ul { - list-style-type: none; - display: inline; - margin: 0; - padding: 0; - - li { - list-style-type: none; - margin: 0; - padding-right: 5px; - display: inline; - } - } - - a { - text-decoration: none; - color: rgba(0, 0, 0, 0.44); - font-weight: 400; - - &:hover { - text-decoration: none; - } - } - } + .meta-info { + margin 10px 0 } - .article-content { padding-bottom 10px diff --git a/source/css/layout/basic.styl b/source/css/layout/basic.styl new file mode 100644 index 0000000..10be0be --- /dev/null +++ b/source/css/layout/basic.styl @@ -0,0 +1,79 @@ +@require 'variables.styl' +@require 'common/animated.styl' + +html, body { + margin: 0; + padding: 0; + color: $default-font-color; + background: $background-color; + font-size: $default-font-size; + font-family: $default-font-family; + font-weight: $default-font-weight; + -webkit-font-smoothing antialiased; +} + +ul, li, ol { + padding: 0; + margin: 0; + list-style: none; +} + +p { + line-height: 2em; +} + +a { + text-decoration: none; + color: $a-color; +} + +a:hover, a:active { + color: $a-hover-color; +} + + +// 预设的按钮样式 +.btn { + display: inline-block; + position: relative; + text-align: center; + cursor: pointer; + color: $button-color; + border: 1px solid $button-border-color; + white-space: nowrap; + border-radius: 10em; + padding: 0.5em 1em; + + &:hover { + color: $button-hover-color; + border: 1px solid $button-border-hover-color; + } +} + +// 文章标题悬浮动画 +.article-title-hover-animation { + display: inline-block; + position: relative; + color: $article-title-color; + border-bottom: none; + line-height: 1.3; + vertical-align: top; + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: $article-title-color; + visibility: hidden; + transform: scaleX(0); + the-transition(); + } + + &:hover::before { + visibility: visible; + transform: scaleX(1); + } +} \ No newline at end of file diff --git a/source/css/layout/category-post.styl b/source/css/layout/category-post.styl index 905b238..9d34964 100644 --- a/source/css/layout/category-post.styl +++ b/source/css/layout/category-post.styl @@ -1,9 +1,10 @@ +@require 'variables.styl' + .category-container { .category-name { - color: #666 + color: $article-title-color font-size 20px - font-weight bold + font-weight 600 margin-bottom 10px } - } \ No newline at end of file diff --git a/source/css/layout/common/animated.styl b/source/css/layout/common/animated.styl new file mode 100644 index 0000000..d28f0c2 --- /dev/null +++ b/source/css/layout/common/animated.styl @@ -0,0 +1,41 @@ +.animated { + animation-fill-mode: both; + animation-duration: 1s; + animation-name fade-in-down +} + +.animated.hinge { + animation-duration: 1s; +} + +@keyframes fade-in-down { + 0% { + opacity: 0; + transform: translateY(-20px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +the-transition() { + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + transition-delay: 0s; +} + + +the-transition-ease-in() { + transition-duration: 0.2s; + transition-timing-function: ease-in; + transition-delay: 0s; +} + + +the-transition-ease-out() { + transition-duration: 0.2s; + transition-timing-function: ease-out; + transition-delay: 0s; +} diff --git a/source/css/layout/common/article-meta-info.styl b/source/css/layout/common/article-meta-info.styl index 44332dd..d0b84fe 100644 --- a/source/css/layout/common/article-meta-info.styl +++ b/source/css/layout/common/article-meta-info.styl @@ -1,6 +1,12 @@ +@require '../variables.styl' + +$article-meta-info-color = #aaa; +$article-meta-info-font-size = 12px; + .article-meta-info { - color: #bbbbbb; - font-size: 12px; + + color: $article-meta-info-color; + font-size: $article-meta-info-font-size; .article-meta-item { margin-right: 10px; @@ -14,12 +20,10 @@ } a { - text-decoration: none; - color: rgba(0, 0, 0, 0.44); - font-weight: 400; + color: $article-meta-info-color; &:hover { - text-decoration: none; + color: $a-hover-color; } } } diff --git a/source/css/layout/common/footer.styl b/source/css/layout/common/footer.styl index 789f15f..881fee0 100644 --- a/source/css/layout/common/footer.styl +++ b/source/css/layout/common/footer.styl @@ -1,7 +1,6 @@ .footer { .copyright-info { padding 5px - font-size 14px text-align center } } \ No newline at end of file diff --git a/source/css/layout/common/left-side.styl b/source/css/layout/common/left-side.styl index e45e151..10dc448 100644 --- a/source/css/layout/common/left-side.styl +++ b/source/css/layout/common/left-side.styl @@ -1,9 +1,11 @@ +@require '../variables.styl' + .left-side-container { width 100% height 100% position relative box-sizing border-box - border-right 1px solid #f3f3f3 + border-right 1px solid $border-color .site-info-container { diff --git a/source/css/layout/common/nav.styl b/source/css/layout/common/nav.styl index 448bb6d..544c4c1 100644 --- a/source/css/layout/common/nav.styl +++ b/source/css/layout/common/nav.styl @@ -1,37 +1,40 @@ +@require '../variables.styl' + +$nav-font-size = 12px; + .nav { - position relative - width 100% - height 100% - box-sizing border-box - background: #fff - border-bottom 1px solid #f2f2f2 - font-size: 12px; + position: relative + width: 100% + height: 100% + box-sizing: border-box + background: $background-color + border-bottom: 1px solid $border-color padding: 20px; + font-size: $nav-font-size; + display: flex; + justify-content: flex-end; + + .fold-left-side { + position: absolute; + top: 50%; + transform: translateY(-50%); + font-size 20px + left: 20px + } .menu-list { - position: absolute + position: absolute; top: 50%; transform: translateY(-50%); .menu-item { - float: left - padding-right: 20px - - a { - color: #6a6a6a; - - &:hover { - color: #4786D6; - } - - &.current { - color: #5A5A5A; - padding-bottom: 20px; - border-bottom: 1px solid #4a4a4a; - } + float: left; + margin-left: 20px; + .current { + padding-bottom: 20px; + border-bottom: 1px solid $nav-selected-color; } - } } } \ No newline at end of file diff --git a/source/css/layout/common/site-info.styl b/source/css/layout/common/site-info.styl index ade6004..d7dc1d8 100644 --- a/source/css/layout/common/site-info.styl +++ b/source/css/layout/common/site-info.styl @@ -1,32 +1,32 @@ +@require '../variables.styl' + +$description-font-size = 16px + .site-info { text-align: center; .avatar { - padding 2px - border-radius 50% - border 1px solid #ddd + padding: 2px; + border-radius: 50%; + border: 1px solid $border-color; width: 150px; } - .title { - margin 5px 0; + margin: 5px 0; text-transform: uppercase; a { - color: #464646; + color: $logo-title-color; font-size: 30px; font-weight: bold; } } - .description { padding 5px - font-size: 16px; - color: #565654; + font-size: $description-font-size; } - } \ No newline at end of file diff --git a/source/css/layout/common/valine.styl b/source/css/layout/common/valine.styl new file mode 100644 index 0000000..4c171d9 --- /dev/null +++ b/source/css/layout/common/valine.styl @@ -0,0 +1,13 @@ +.valine-container { + .vcontrol { + .col-20 a { + display: none; + } + } + + .info { + .txt-right { + display none + } + } +} \ No newline at end of file diff --git a/source/css/layout/home-post.styl b/source/css/layout/home-post.styl index f4c45c2..08bc07e 100644 --- a/source/css/layout/home-post.styl +++ b/source/css/layout/home-post.styl @@ -1,3 +1,5 @@ +@require 'variables.styl' + .home-container { .article-post-list { @@ -6,51 +8,29 @@ margin-bottom 30px padding-bottom 20px - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid $border-color; .article-post-title { - h1 { - text-transform: uppercase; - font-size: 30px; - letter-spacing: 5px; - line-height: 1; - } - - h2 { - text-transform: uppercase; - letter-spacing: 1px; - font-size: 28px; - line-height: 1; - font-weight: 600; - color: #5f5f5f; - - } h3 { text-transform: uppercase; - letter-spacing: 1px; - line-height: 1; font-weight: 600; - color: #464646; + color: $article-title-color; font-size: 22px; margin: 0; } + a { - text-decoration: none; - letter-spacing: 1px; - color: #5f5f5f; - - &:hover { - text-decoration: underline; - } - + color: $article-title-color; } + + } .article-post-content { padding 15px 0 - line-height 28px + line-height 2em } } @@ -78,3 +58,6 @@ + + + diff --git a/source/css/layout/index.styl b/source/css/layout/index.styl index ca743e0..580ddd5 100644 --- a/source/css/layout/index.styl +++ b/source/css/layout/index.styl @@ -1,5 +1,4 @@ -$left-side-width = 30% -$right-side-width = 70% +@require 'variables.styl' .page-container { position absolute @@ -7,7 +6,7 @@ $right-side-width = 70% right: 0 top: 0 bottom: 0 - background: #fff + background: $background-color .page-left { float: left @@ -20,11 +19,12 @@ $right-side-width = 70% float: right width: $right-side-width height: 100% + position relative } @media screen and (max-width: 960px) { .page-left { - display none + display: none } .page-right { diff --git a/source/css/layout/right-side.styl b/source/css/layout/right-side.styl index 7efd8f7..6d1be20 100644 --- a/source/css/layout/right-side.styl +++ b/source/css/layout/right-side.styl @@ -1,20 +1,21 @@ -nav-container-height = 60px; +@require 'variables.styl' .right-side-container { + width: 100%; height: auto; - margin-top: nav-container-height; + margin-top: $nav-height; .nav-container { - width 100% - height nav-container-height position: fixed; top: 0; + width $right-side-width + height: $nav-height; z-index: 999; } .article-post-container { - background: #fff - padding 30px + background: $background-color; + padding: 30px; } } \ No newline at end of file diff --git a/source/css/layout/tag-post.styl b/source/css/layout/tag-post.styl index 2ab9eb1..9e4adef 100644 --- a/source/css/layout/tag-post.styl +++ b/source/css/layout/tag-post.styl @@ -1,9 +1,10 @@ +@require 'variables.styl' + .tag-container { .tag-name { - color: #666 + color: $article-title-color font-size 20px - font-weight bold + font-weight 600 margin-bottom 10px } - } \ No newline at end of file diff --git a/source/css/layout/variables.styl b/source/css/layout/variables.styl new file mode 100644 index 0000000..d99fce6 --- /dev/null +++ b/source/css/layout/variables.styl @@ -0,0 +1,66 @@ +// 左侧宽度占比 +$left-side-width = 30% + +// 右侧宽度占比 +$right-side-width = 70% + +// 背景颜色 +$background-color = #fff + +// 边框颜色 +$border-color = #f2f2f2 + +// 网站LOGO标题颜色 +$logo-title-color = #565656 + +// 网站LOGO描述颜色 +$logo-description-color = #666 + +// 网站LOGO描述字体大小 +$logo-description-font-size = #666 + +// 默认字体样式 +$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei' + +// 默认字体大小 +$default-font-size = 14px + +// 默认字体行高 +$default-font-line-height = 20px + +// 默认字体加粗程度 +$default-font-weight = 400 + +// 默认字体颜色 +$default-font-color = #777 + +// 文章标题颜色 +$article-title-color = #666 + +// 归档文章标题颜色 +$archive-article-title-color = #8f8f8f + + +// 导航栏高度 +$nav-height = 60px + +// 导航项选中的颜色 +$nav-selected-color = #4a4a4a + +// 超链接a标签颜色 +$a-color = #666 + +// 超链接a标签悬浮颜色 +$a-hover-color = #4786d6 + +// 按钮颜色 +$button-color = $default-font-color + +// 按钮边框颜色 +$button-border-color = $default-font-color + +// 按钮悬浮颜色 +$button-hover-color = #505050 + +// 按钮边框悬浮颜色 +$button-border-hover-color = #505050 \ No newline at end of file diff --git a/source/css/style.styl b/source/css/style.styl index febed14..220974e 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -1,6 +1,6 @@ @import "libs/font-awesome.min.css" -@import "basic.styl" -@import "animated.styl" +@import "layout/basic.styl" +@import "layout/common/animated.styl" @import "layout/index.styl" @import "layout/right-side.styl" @import "layout/common/left-side.styl" @@ -13,5 +13,6 @@ @import "layout/category-post.styl" @import "layout/tag-post.styl" @import "layout/common/site-info.styl" +@import "layout/common/valine.styl" @import "highlight" -@import "variables.styl" +@import "layout/variables.styl" diff --git a/source/css/variables.styl b/source/css/variables.styl deleted file mode 100644 index 1233301..0000000 --- a/source/css/variables.styl +++ /dev/null @@ -1,415 +0,0 @@ -// ================================================= -// Variables -// ================================================= - - -// Colors -// colors for use across theme. -// -------------------------------------------------- - -$whitesmoke = #f5f5f5 -$gainsboro = #eee -$gray-lighter = #ddd -$grey-light = #ccc -$grey = #bbb -$grey-dark = #999 -$grey-dim = #666 -$black-light = #555 -$black-dim = #333 -$black-deep = #222 -$red = #ff2a2a -$blue-bright = #87daff -$blue = #0684bd -$blue-deep = #262a30 -$orange = #fc6423 - - - -// Scaffolding -// Settings for some of the most global styles. -// -------------------------------------------------- - -// Global text color on -$text-color = $black-light - -// Global link color. -$link-color = $black-light -$link-hover-color = $black-deep -$link-decoration-color = $grey-light -$link-decoration-hover-color = $black-deep - -// Global border color. -$border-color = $grey-light - -// Background color for -$body-bg-color = white - -// Selection -$selection-bg = $blue-deep -$selection-color = white - - - -// Typography -// Font, line-height, and elements colors. -// -------------------------------------------------- - - -get_font_family(config) { - custom_family = hexo-config('font.' + config + '.family') - return custom_family is a 'string' ? custom_family : null -} - -// Font families. -$font-family-chinese = "PingFang SC", "Microsoft YaHei" - -$font-family-base = $font-family-chinese, sans-serif -$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global') - -$font-family-logo = $font-family-base -$font-family-logo = get_font_family('logo'), $font-family-base if get_font_family('logo') - -$font-family-headings = $font-family-base -$font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings') - -$font-family-posts = $font-family-base -$font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts') - -$font-family-monospace = consolas, Menlo, $font-family-chinese, monospace -$font-family-monospace = get_font_family('codes'), consolas, Menlo, $font-family-chinese, monospace if get_font_family('codes') - -$font-family-icons = 'FontAwesome' - - -// Font Weight -$font-weight-lighter = 200 -$font-weight-light = 300 -$font-weight-normal = 400 -$font-weight-bold = 600 -$font-weight-bolder = 700 - - -// Font size -$font-size-base = 14px -$font-size-base = unit(hexo-config('font.global.size'), px) if hexo-config('font.global.size') is a 'unit' -$font-size-small = $font-size-base - 2px -$font-size-smaller = $font-size-base - 4px -$font-size-large = $font-size-base + 2px -$font-size-larger = $font-size-base + 4px - - -// Headings font size -$font-size-headings-step = 2px -$font-size-headings-base = 24px -$font-size-headings-base = unit(hexo-config('font.headings.size'), px) if hexo-config('font.headings.size') is a 'unit' -$font-size-headings-small = $font-size-headings-base - $font-size-headings-step -$font-size-headings-smaller = $font-size-headings-small - $font-size-headings-step -$font-size-headings-large = $font-size-headings-base + $font-size-headings-step -$font-size-headings-larger = $font-size-headings-large + $font-size-headings-step - -// Global line height -$line-height-base = 2 -$line-height-code-block = 1.6 // Can't be less than 1.3 - - - -// Z-index master list -// -------------------------------------------------- -$zindex-bottom = -1 -$zindex-1 = 1010 -$zindex-2 = 1020 -$zindex-3 = 1030 -$zindex-4 = 1040 -$zindex-5 = 1050 - - - -// Table -// -------------------------------------------------- -$table-width = 100% -$table-border-color = $gray-lighter -$table-font-size = 14px -$table-content-alignment = left -$table-content-vertical = middle -$table-th-font-weight = 700 -$table-cell-padding = 8px -$table-cell-border-right-color = $gainsboro -$table-cell-border-bottom-color = $gray-lighter -$table-row-odd-bg-color = #f9f9f9 -$table-row-hover-bg-color = $whitesmoke - - - -// Code & Code Blocks -// -------------------------------------------------- -$code-font-family = $font-family-monospace -$code-font-size = 13px -$code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit' -$code-border-radius = 3px -$code-foreground = $black-light -$code-background = $gainsboro - - - -// Buttons -// -------------------------------------------------- - -$btn-font-weight = normal - -$btn-default-radius = 0 -$btn-default-bg = $black-deep -$btn-default-color = white -$btn-default-font-size = 14px -$btn-default-border-width = 2px -$btn-default-border-color = $black-deep -$btn-default-hover-bg = white -$btn-default-hover-color = $black-deep -$btn-default-hover-border-color = $black-deep - - - -// Pagination -// -------------------------------------------------- - -$pagination-border = $gainsboro - -$pagination-link-bg = transparent -$pagination-link-color = $link-color -$pagination-link-border = $gainsboro - -$pagination-link-hover-bg = transparent -$pagination-link-hover-color = $link-color -$pagination-link-hover-border = $black-deep - -$pagination-active-bg = $grey-light -$pagination-active-color = white -$pagination-active-border = $grey-light - - - -// Layout sizes -// -------------------------------------------------- - -$main-desktop = 960px -$main-desktop-large = 1200px - -$content-desktop = 700px -$content-desktop-large = 900px - -$content-desktop-padding = 40px -$content-tablet-padding = 10px -$content-mobile-padding = 8px - -$sidebar-desktop = 240px - -$footer-height = 50px - -$gap-between-main-and-footer = 100px - - - -// Headband -// -------------------------------------------------- -$headband-height = 3px -$headband-bg = $black-deep - - - -// Section Header -// Variables for header section elements. -// -------------------------------------------------- - -$head-bg = transparent - -// Site Meta -$site-meta-text-align = center -$brand-color = white -$brand-hover-color = white -$brand-bg = $black-deep - -$logo-font-size = 20px -$logo-font-size = unit(hexo-config('font.logo.size'), px) if hexo-config('font.logo.size') is a 'unit' - -$site-subtitle-color = $grey-dark -$subtitle-font-size = 13px -$subtitle-color = $grey-dark - -// Menu -$menu-link-border = transparent -$menu-link-hover-border = $black-deep - - - -// Posts Expand -// -------------------------------------------------- -$posts-expand-title-font-weight = $font-weight-normal -$post-copyright = { - margin: 2em 0 0, - padding: .5em 1em, - bg: #f9f9f9, - border: { - width: 3px, - style: solid, - color: #ff1700 - } -} - - -// Posts Collpase -// -------------------------------------------------- -$posts-collapse-left = 55px -$posts-collapse-left-mobile = 5px - - -// Sidebar -// Variables for sidebar section elements. -// -------------------------------------------------- -$sidebar-nav-color = $black-light -$sidebar-nav-hover-color = $whitesmoke -$sidebar-highlight = $blue-bright - -$site-author-image-padding = 2px -$site-author-image-width = 96px -$site-author-image-height = auto -$site-author-image-border-width = 2px -$site-author-image-border-color = $black-dim - -$site-author-name-margin = 5px 0 0 -$site-author-name-color = $whitesmoke -$site-author-name-align = center -$site-author-name-weight = normal - -$site-description-font-size = 14px -$site-description-color = $grey-dark -$site-description-margin-top = 5px -$site-description-align = center - -$site-state-align = center -$site-state-item-count-font-size = 18px -$site-state-item-count-color = inherit -$site-state-item-name-font-size = 13px -$site-state-item-name-color = inherit -$site-state-item-border-color = $black-dim - -$toc-link-color = $grey-dark -$toc-link-border-color = $black-light -$toc-link-hover-color = $grey-light -$toc-link-hover-border-color = $grey-light -$toc-link-active-color = $sidebar-highlight -$toc-link-active-border-color = $sidebar-highlight -$toc-link-active-current-color = $sidebar-highlight -$toc-link-active-current-border-color = $sidebar-highlight - - -// Components -// -------------------------------------------------- - -// Back to top -$b2t-opacity = 1 -$b2t-position-bottom = -100px -$b2t-position-bottom-on = 19px -$b2t-position-right = 30px -$b2t-font-size = 12px -$b2t-color = white -$b2t-bg-color = $black-deep - -// full-image -$full-image-width = 110% -$full-image-margin-horizontal = -5% -$full-image-margin-vertical = 25px - -// .post-expand .post-eof -// In Muse scheme, margin above and below the post separator -$post-eof-margin-top = 80px // or 160px for more white space -$post-eof-margin-bottom = 60px // or 120px for less white space - - -// Iconography -// Icons SVG Base64 -// -------------------------------------------------- - -// blockquote-center icon -$center-quote-left = '../images/quote-l.svg' -$center-quote-right = '../images/quote-r.svg' - - -// 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) - -// Default -$note-default-border = #777 -$note-default-bg = lighten(spin($note-default-border, 0), 94% + lbg) -$note-default-text = $note-default-border -$note-default-icon = "\f0a9" - -$note-modern-default-border = #e1e1e1 -$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + (lbg * 4)) -$note-modern-default-text = $grey-dim -$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%) - -// Primary -$note-primary-border = #6f42c1 -$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + lbg) -$note-primary-text = $note-primary-border -$note-primary-icon = "\f055" - -$note-modern-primary-border = #e1c2ff -$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + (lbg * 4)) -$note-modern-primary-text = #6f42c1 -$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%) - -// Info -$note-info-border = #428bca -$note-info-bg = lighten(spin($note-info-border, -10), 91% + lbg) -$note-info-text = $note-info-border -$note-info-icon = "\f05a" - -$note-modern-info-border = #b3e5ef -$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + (lbg * 4)) -$note-modern-info-text = #31708f -$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%) - -// Success -$note-success-border = #5cb85c -$note-success-bg = lighten(spin($note-success-border, 10), 90% + lbg) -$note-success-text = $note-success-border -$note-success-icon = "\f058" - -$note-modern-success-border = #d0e6be -$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + (lbg * 4)) -$note-modern-success-text = #3c763d -$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%) - -// Warning -$note-warning-border = #f0ad4e -$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + lbg) -$note-warning-text = $note-warning-border -$note-warning-icon = "\f06a" - -$note-modern-warning-border = #fae4cd -$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + (lbg * 4)) -$note-modern-warning-text = #8a6d3b -$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%) - -// Danger -$note-danger-border = #d9534f -$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + lbg) -$note-danger-text = $note-danger-border -$note-danger-icon = "\f056" - -$note-modern-danger-border = #ebcdd2 -$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + (lbg * 4)) -$note-modern-danger-text = #a94442 -$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%) - - -// Label colors -// -------------------------------------------------- -$label-default = lighten(spin($note-default-border, 0), 89% + lbg) -$label-primary = lighten(spin($note-primary-border, 10), 87% + lbg) -$label-info = lighten(spin($note-info-border, -10), 86% + lbg) -$label-success = lighten(spin($note-success-border, 10), 85% + lbg) -$label-warning = lighten(spin($note-warning-border, 10), 83% + lbg) -$label-danger = lighten(spin($note-danger-border, -10), 87% + lbg)