xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[opt] css

This commit is contained in:
xaoxuu 2022-12-09 23:56:58 +08:00
parent b1c1e5ba39
commit 978bece89b
14 changed files with 170 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
_config.yml
View File

@ -27,20 +27,20 @@ sidebar:
widgets: widgets:
#### 自动生成的页面 #### #### 自动生成的页面 ####
# 主页 # 主页
home: search, welcome, recent, timeline # for home home: search, recent, timeline # for home
# 博客索引页 # 博客索引页
blog_index: search_blog, recent, timeline # for categories/tags/archives blog_index: search_blog, recent, timeline # for categories/tags/archives
# 文档索引页 # 文档索引页
wiki_index: search_docs, recent, timeline # for wiki wiki_index: search_docs, recent, timeline # for wiki
# 其它（404） # 其它（404）
others: search, welcome, recent, timeline # for 404 and ... others: search, recent, timeline # for 404 and ...
#### 手动创建的页面 #### #### 手动创建的页面 ####
# 文章内页 # 文章内页
post: toc, ghrepo, search, ghissues # for pages using 'layout:post' post: search_blog, toc, ghrepo, ghissues # for pages using 'layout:post'
# 文档内页 # 文档内页
wiki: search, ghrepo, toc, ghissues, related # for pages using 'layout:wiki' wiki: search, ghrepo, toc, ghissues, related # for pages using 'layout:wiki'
# 其它 layout:page 的页面 # 其它 layout:page 的页面
page: welcome, toc, search # for custom pages using 'layout:page' page: toc, search # for custom pages using 'layout:page'
######## Index ######## ######## Index ########
post-index: # 近期发布 分类 标签 归档 and ... post-index: # 近期发布 分类 标签 归档 and ...
@ -340,26 +340,29 @@ style:
text-align: left text-align: left
color: color:
common: common:
theme: '#1BCDFC' # 主题色 theme: 'hsl(192 98% 55%)' # 主题色
accent: '#ff5722' # 强调色 accent: 'hsl(14 100% 57%)' # 强调色
link: '#2196f3' # 超链接颜色 link: 'hsl(207 90% 54%)' # 超链接颜色
button: '#1BCDFC' # 按钮颜色 button: 'hsl(192 98% 55%)' # 按钮颜色
hover: '#ff5722' # 按钮高亮颜色 hover: 'hsl(14 100% 57%)' # 按钮高亮颜色
# 动态颜色（会根据明暗主题重设明度值，只用关心色相和饱和度即可）
dynamic:
block: 'hsl(212 8% 95%)' # 块背景颜色
light: light:
background: '#F8F9FA' # 浅色背景颜色 background: hsl(212 16% 98%) # 浅色背景颜色
block: '#F0F1F2' # 块背景颜色 block: 'hsl(212 8% 95%)' # 块背景颜色
card: white # 卡片背景颜色 card: 'white' # 卡片背景颜色
title: '#000' # 标题文本颜色 title: 'black' # 标题文本颜色
text: '#333' # 正文文本颜色 text: 'hsl(0 0% 20%)' # 正文文本颜色
code: '#f33a00' # 行内代码颜色 code: 'hsl(14 100% 48%)' # 行内代码颜色
dark: dark:
background: '#313438' # 深色背景颜色 background: 'hsl(212 6% 16%)' # 深色背景颜色
background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电） background-mobile: black # 移动端深色背景（OLED调成纯黑可以省电）
block: '#2B2F33' # 块背景颜色 block: 'hsl(212 8% 20%)' # 块背景颜色
card: '#464D57' # 卡片背景颜色 card: 'hsl(212 10% 22%)' # 卡片背景颜色
title: '#fff' # 标题文本颜色 title: 'white' # 标题文本颜色
text: '#eee' # 正文文本颜色 text: 'hsl(0 0% 93%)' # 正文文本颜色
code: '#ff7043' # 行内代码颜色 code: 'hsl(14 100% 63%)' # 行内代码颜色
animated_avatar: animated_avatar:
animate: auto # auto, always animate: auto # auto, always
background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

14
_data/widgets.yml
View File

@ -62,20 +62,6 @@ tagcloud:
end_color: # 结束的颜色。您可使用十六进位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。 end_color: # 结束的颜色。您可使用十六进位值（#b700ff），rgba（rgba(183, 0, 255, 1)），hsla（hsla(283, 100%, 50%, 1)）或 颜色关键字。此变量仅在 color 参数开启时才有用。
show_count: false # 显示每个标签的文章总数 show_count: false # 显示每个标签的文章总数
welcome:
layout: markdown
title: Stellar 入门指南
content: | # support markdown
欢迎使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar/) 主题，下面是您的入门指南，祝您使用愉快！
<br>
**第一步**
创建 `blog/_config.stellar.yml` 文件，在此文件中填写需要自定义的主题配置。
<br>
**第二步**
创建 `blog/source/_data/widgets.yml` 文件，此文件中填写需要自定义的侧边栏组件，例如 `welcome` 组件。
<br>
如果有任何疑问，请先查阅 [文档](https://xaoxuu.com/wiki/stellar/)，如果文档中没有提供，请提 [issue](https://github.com/xaoxuu/hexo-theme-stellar/issues/) 向开发中询问。
timeline: timeline:
layout: timeline layout: timeline
title: 近期动态 title: 近期动态

8
layout/_partial/sidebar/header.ejs
View File

@ -10,10 +10,10 @@ function layoutTitle(main, url, sub) {
if (sub) { if (sub) {
let arr = sub.split('|'); let arr = sub.split('|');
if (arr.length > 1) { if (arr.length > 1) {
el += '<div class="sub normal cap">' + arr[0].trim() + '</div>'; el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
el += '<div class="sub hover cap" style="opacity:0">' + arr[1].trim() + '</div>'; el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
} else if (arr.length > 0) { } else {
el += '<div class="sub cap">' + arr[0] + '</div>'; el += '<div class="sub cap">' + sub + '</div>';
} }
} }
el += '</a>'; el += '</a>';

8
layout/_partial/sidebar/index.ejs
View File

@ -40,10 +40,10 @@ function layoutTitle(main, url, sub) {
if (sub) { if (sub) {
let arr = sub.split('|'); let arr = sub.split('|');
if (arr.length > 1) { if (arr.length > 1) {
el += '<div class="sub normal cap">' + arr[0].trim() + '</div>'; el += '<div class="sub normal cap">' + arr.shift().trim() + '</div>';
el += '<div class="sub hover cap" style="opacity:0">' + arr[1].trim() + '</div>'; el += '<div class="sub hover cap" style="opacity:0">' + arr.join('|') + '</div>';
} else if (arr.length > 0) { } else {
el += '<div class="sub cap">' + arr[0] + '</div>'; el += '<div class="sub cap">' + sub + '</div>';
} }
} }
el += '</a>'; el += '</a>';

1
layout/_partial/widgets/search.ejs
View File

@ -27,6 +27,7 @@ function layoutDiv() {
} else { } else {
el += ' placeholder="' + (item.placeholder || __('search.search')) + '">' el += ' placeholder="' + (item.placeholder || __('search.search')) + '">'
} }
el += '<svg t="1670596976048" class="icon search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2676" width="200" height="200"><path d="M938.2 832.6L723.8 618.1c-2.5-2.5-5.3-4.4-7.9-6.4 36.2-55.6 57.3-121.8 57.3-193.1C773.3 222.8 614.6 64 418.7 64S64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.2-57.4 2 2.7 3.9 5.4 6.3 7.8L832.5 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.8 29.2-29.1 29.2-76.4 0.1-105.5M418.7 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.7 176c133.8 0 242.6 108.9 242.6 242.7 0 133.7-108.9 242.6-242.6 242.6" p-id="2677"></path></svg>'
el += '</form>' el += '</form>'
el += '<div id="search-result"></div>' el += '<div id="search-result"></div>'
el += '<div class="search-no-result">' + __('search.no_results') + '</div>' el += '<div class="search-no-result">' + __('search.no_results') + '</div>'

4
source/css/_custom.styl
View File

@ -27,6 +27,8 @@ $dark-code = convert(hexo-config('style.color.dark.code'))
$dark-background-mobile = convert(hexo-config('style.color.dark.background-mobile')) $dark-background-mobile = convert(hexo-config('style.color.dark.background-mobile'))
$dynamic-block = convert(hexo-config('style.color.dynamic.block'))
// @font-face // @font-face
// font-family: 'Dosis' // font-family: 'Dosis'
// src: url('https://fastly.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf') // src: url('https://fastly.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
@ -64,7 +66,7 @@ $fs-p = $fs-15
$fs-code = $fs-13 $fs-code = $fs-13
$border-card = 12px $border-card = 12px
$border-block = 8px $border-block = 6px
$border-image = 6px $border-image = 6px
// 可以动态变化的属性 // 可以动态变化的属性

21
source/css/_defines/theme.styl
View File

@ -1,3 +1,7 @@
$dynamic-block-h = hue($dynamic-block)
$dynamic-block-s = saturation($dynamic-block)
$dynamic-block-l = lightness($dynamic-block)
set_text_light() set_text_light()
--text-p0: $dark-title --text-p0: $dark-title
--text-p1: mix($dark-text, $dark-background, 85) --text-p1: mix($dark-text, $dark-background, 85)
@ -17,9 +21,10 @@ set_text_dark()
:root :root
--site-bg: $light-background --site-bg: $light-background
--card: $light-card --card: $light-card
--block: $light-block --block: hsl($dynamic-block-h, $dynamic-block-s, 95)
--block-border: darken($light-block, 5) --block-border: hsl($dynamic-block-h, $dynamic-block-s, 90)
--block-hover: darken($light-block, 2) --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 92)
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 100)
set_text_dark() set_text_dark()
--theme-highlight: darken($color-theme, 5) --theme-highlight: darken($color-theme, 5)
--theme-bg: mix($color-theme, $light-card, 10) --theme-bg: mix($color-theme, $light-card, 10)
@ -29,18 +34,16 @@ set_darkmode()
:root :root
--site-bg: $dark-background --site-bg: $dark-background
--card: $dark-card --card: $dark-card
--block: $dark-block --block: hsl($dynamic-block-h, $dynamic-block-s, 12)
--block-border: lighten($dark-block, 6) --block-border: hsl($dynamic-block-h, $dynamic-block-s, 24)
--block-hover: darken($dark-block, 4) --block-hover: hsl($dynamic-block-h, $dynamic-block-s, 9)
--block-lighten: hsl($dynamic-block-h, $dynamic-block-s, 30)
set_text_light() set_text_light()
--theme-highlight: $color-theme --theme-highlight: $color-theme
--theme-bg: mix($color-theme, $dark-card, 10) --theme-bg: mix($color-theme, $dark-card, 10)
@media screen and (max-width: $device-mobile-max) @media screen and (max-width: $device-mobile-max)
--site-bg: $dark-background-mobile --site-bg: $dark-background-mobile
--card: darken($dark-card, 6) --card: darken($dark-card, 6)
--block: darken($dark-block, 4)
--block-border: lighten($dark-block, 2)
--block-hover: darken($dark-block,8)
if hexo-config('style.darkmode') == 'auto' if hexo-config('style.darkmode') == 'auto'
// 系统的dark模式 // 系统的dark模式

4
source/css/_layout/sidebar/header.styl
View File

@ -5,9 +5,9 @@
nav.menu nav.menu
margin: 1rem 0 margin: 1rem 0
background: var(--block) background: var(--block)
border: 1px solid var(--block-border)
border-radius: 6px border-radius: 6px
display: flex display: flex
padding: 1px
flex-wrap: wrap flex-wrap: wrap
&::-webkit-scrollbar &::-webkit-scrollbar
display: none display: none
@ -28,7 +28,7 @@ nav.menu
text-align: center text-align: center
&.active, &:hover &.active, &:hover
color: var(--text-p1) color: var(--text-p1)
background: var(--card) background: var(--block-lighten)
box-shadow: $boxshadow-button box-shadow: $boxshadow-button
.l_left .menu a.nav-item .l_left .menu a.nav-item

2
source/css/_layout/tag-plugins/common.styl
View File

@ -5,7 +5,6 @@ set_text_white()
--text-p3: #ddd --text-p3: #ddd
--text-code: white --text-code: white
--card: $dark-card --card: $dark-card
--block: $dark-block
--block-border: lighten($dark-block, 6) --block-border: lighten($dark-block, 6)
--block-hover: darken($dark-block, 4) --block-hover: darken($dark-block, 4)
set_text_black() set_text_black()
@ -15,7 +14,6 @@ set_text_black()
--text-p3: #555 --text-p3: #555
--text-code: white --text-code: white
--card: $light-card --card: $light-card
--block: $light-block
--block-border: darken($light-block, 5) --block-border: darken($light-block, 5)
--block-hover: darken($light-block, 2) --block-hover: darken($light-block, 2)

33
source/css/_layout/widgets/ghuser.styl
View File

@ -52,21 +52,24 @@
.menu .menu
margin-bottom: 0 margin-bottom: 0
background: none background: none
a:hover border: 0
box-shadow: none a
background: var(--block) margin: 0
a.active &:hover
box-shadow: none box-shadow: none
position: relative background: var(--block)
&:after &.active
content: '' box-shadow: none
position: absolute position: relative
height: 3px &:after
bottom: 0 content: ''
width: 32px position: absolute
left: 'calc(50% - 0.5 * %s)' % @width height: 3px
border-radius: 4px bottom: 0
background: $color-theme width: 32px
left: 'calc(50% - 0.5 * %s)' % @width
border-radius: 4px
background: $color-theme
.buttons .buttons
margin: 1rem 0 margin: 1rem 0

102
source/css/_layout/widgets/search.styl
View File

@ -1,3 +1,103 @@
.widgets .widget-wrapper.search .widgets .widget-wrapper.search
margin-top: 0 margin-top: 1rem
margin-bottom: 0 margin-bottom: 0
.search-wrapper
width: 100%
>.search-form
position: sticky
top: 1rem
display: flex
flex-direction: row
align-items: center
.search-input
width: 100%
padding: 0.5rem
line-height: 1
box-sizing: border-box
border-radius: $border-block
background-color: var(--card)
color: var(--text-p0)
border: 1px solid var(--block-border)
&:focus
trans1 border-color
&.noresult
.search-input
&:focus
border: 1px solid $c-red
.search-icon
color: $c-red
.search-no-result
display: none
margin: 1em auto
color: var(--text-p1)
text-align: center
font-size: $fs-14
padding: 2rem
background: var(--block)
border-radius: $border-block
#search-result
ul.search-result-list
padding: 0
margin: 0
list-style-type: none
li
margin: 1em auto
&:hover
.search-result-title
color: $color-hover
.search-result-title
color: var(--text-p1)
font-weight: 700
line-height: 1.2
.search-result-content
overflow: hidden
color: var(--text-p3)
margin: .4em auto
max-height: 13em
text-align: justify
font-size: $fs-12
line-height: 1.2
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 3
.search-keyword
border-bottom: 1px dashed $color-hover
color: $color-hover
font-weight: bold
.search-wrapper.noresult
.search-no-result
display: block
.widget-wrapper
.search-form
top: 0
background: var(--site-bg)
.search-input
margin-top: 1rem
margin-bottom: -1rem
padding-left: 1.75rem
.search-icon
margin-top: 1rem
margin-bottom: -1rem
position: absolute
margin-left: 0.5rem
left: 0
pointer-events: none
color: var(--text-p2)
#search-result,.search-no-result
margin-top: 2rem
.widget-wrapper:not(:first-child)
.search-wrapper
margin-top: -1rem

3
source/css/_plugins/index.styl
View File

@ -8,9 +8,6 @@ if hexo-config('plugins.scrollreveal.enable')
if hexo-config('plugins.fancybox.enable') if hexo-config('plugins.fancybox.enable')
@import 'fancybox' @import 'fancybox'
// 搜索
if hexo-config('search.service') == 'local_search'
@import 'search/local-search'
// 评论 // 评论
if hexo-config('comments.service') == 'beaudar' if hexo-config('comments.service') == 'beaudar'

87
source/css/_plugins/search/local-search.styl
View File

@ -1,87 +0,0 @@
.search-wrapper
width: 100%
>.search-form
position: sticky
top: 1rem
.search-input
width: 100%
padding: 0.75rem 1rem
line-height: 1
box-sizing: border-box
border-radius: $border-block
background-color: var(--card)
color: var(--text-p0)
box-shadow: $boxshadow-button
trans1 box-shadow
&:hover
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.16), 0 0 8px 0px rgba(0, 0, 0, 0.08)
&.noresult
.search-input
&:hover
box-shadow: 0 0 2px 0px alpha($c-red, 0.2), 0 0 8px 0px alpha($c-red, 0.2)
&:focus
box-shadow: 0 0 2px 0px alpha($c-red, 0.5), 0 0 8px 0px alpha($c-red, 0.4)
.search-no-result
display: none
margin: 1em auto
color: var(--text-p1)
text-align: center
font-size: $fs-14
padding: 2rem
background: var(--block)
border-radius: $border-block
#search-result
ul.search-result-list
padding: 0
margin: 0
list-style-type: none
li
margin: 1em auto
&:hover
.search-result-title
color: $color-hover
.search-result-title
color: var(--text-p1)
font-weight: 700
line-height: 1.2
.search-result-content
overflow: hidden
color: var(--text-p3)
margin: .4em auto
max-height: 13em
text-align: justify
font-size: $fs-12
line-height: 1.2
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 3
.search-keyword
border-bottom: 1px dashed $color-hover
color: $color-hover
font-weight: bold
.search-wrapper.noresult
.search-no-result
display: block
.widget-wrapper
.search-form
top: 0
background: var(--site-bg)
.search-input
margin-top: 1rem
margin-bottom: -1rem
#search-result,.search-no-result
margin-top: 2rem
.widget-wrapper:not(:first-child)
.search-wrapper
margin-top: -1rem