From 88b5c8d9dc4655ba53b4662df9b80d2a2648555f Mon Sep 17 00:00:00 2001 From: xaoxuu Date: Sat, 20 Jan 2024 13:35:43 +0800 Subject: [PATCH] [opt] style --- _data/icons.yml | 12 ++++++-- layout/_partial/widgets/components/link.ejs | 10 +++++-- .../_partial/widgets/components/linklist.ejs | 2 +- layout/_partial/widgets/recent.ejs | 2 +- layout/_partial/widgets/related.ejs | 2 +- layout/_partial/widgets/toc.ejs | 2 +- scripts/helpers/icon.js | 8 ++--- source/css/_common/layout.styl | 6 ++++ source/css/_common/svg.styl | 3 ++ source/css/_layout/widgets/components.styl | 30 +++++++++---------- source/css/_layout/widgets/list.styl | 8 +++-- source/css/_layout/widgets/markdown.styl | 9 +++++- source/css/_layout/widgets/toc_wiki.styl | 16 ++++++---- source/css/_layout/widgets/widgets.styl | 13 +++++--- 14 files changed, 84 insertions(+), 39 deletions(-) create mode 100644 source/css/_common/layout.styl diff --git a/_data/icons.yml b/_data/icons.yml index dca4d21..2ac9317 100644 --- a/_data/icons.yml +++ b/_data/icons.yml @@ -6,10 +6,18 @@ solar:notebook-bookmark-bold-duotone: + +# 必须包含 class="loading" default:loading: + +# 必须包含 class="icon search-icon" default:search: -default:rss: -default:bookmark: +default:rss: + +# 必须包含 class="active-icon" +default:bookmark.active: + +# 必须包含 class="icon" default:sidebar: default:pin: diff --git a/layout/_partial/widgets/components/link.ejs b/layout/_partial/widgets/components/link.ejs index 5992236..fc77403 100644 --- a/layout/_partial/widgets/components/link.ejs +++ b/layout/_partial/widgets/components/link.ejs @@ -1,13 +1,19 @@ <% function layoutDiv() { var el = '' - el += `` + const isActive = url_for(item.url) == url_for(page.path) + el += `` + el += `
` if (item.icon) { el += icon(item.icon) } - if (showText) { + if (columns <= 2) { el += `${item.title}` } + el += `
` + if (columns == 1 && isActive) { + el += icon('default:bookmark.active') + } el += `` return el } diff --git a/layout/_partial/widgets/components/linklist.ejs b/layout/_partial/widgets/components/linklist.ejs index b4e7ecc..6253a9d 100644 --- a/layout/_partial/widgets/components/linklist.ejs +++ b/layout/_partial/widgets/components/linklist.ejs @@ -18,7 +18,7 @@ function layoutDiv(linklist) { } el += `
` for (let link of links) { - el += partial('link', {item: link, showText: columns > 2 ? false : true}) + el += partial('link', {item: link, columns: columns}) } el += `
` return el diff --git a/layout/_partial/widgets/recent.ejs b/layout/_partial/widgets/recent.ejs index d609eff..502b898 100644 --- a/layout/_partial/widgets/recent.ejs +++ b/layout/_partial/widgets/recent.ejs @@ -41,7 +41,7 @@ function layoutDiv() { } el += (post.title || post.wiki) + ''; if (isActive) { - el += icon('default:bookmark') + el += icon('default:bookmark.active') } el += ''; el += ''; diff --git a/layout/_partial/widgets/related.ejs b/layout/_partial/widgets/related.ejs index 9a482e9..c589afb 100644 --- a/layout/_partial/widgets/related.ejs +++ b/layout/_partial/widgets/related.ejs @@ -18,7 +18,7 @@ function relatedPostsInTopic() { el += `` el += `${post.title}` if (isActive) { - el += icon('default:bookmark') + el += icon('default:bookmark.active') } el += `` } diff --git a/layout/_partial/widgets/toc.ejs b/layout/_partial/widgets/toc.ejs index 81b3548..b72068a 100644 --- a/layout/_partial/widgets/toc.ejs +++ b/layout/_partial/widgets/toc.ejs @@ -41,7 +41,7 @@ function layoutDocTree(pages) { el += `` el += `${p.title}` if (isActive.length > 0) { - el += icon('default:bookmark') + el += icon('default:bookmark.active') } el += `` } diff --git a/scripts/helpers/icon.js b/scripts/helpers/icon.js index eb9830a..06d7c83 100644 --- a/scripts/helpers/icon.js +++ b/scripts/helpers/icon.js @@ -1,12 +1,12 @@ 'use strict'; -hexo.extend.helper.register('icon', function(args){ +hexo.extend.helper.register('icon', function(key) { const { icons } = hexo.theme.config var result = '' - if (icons[args]) { - result = icons[args] + if (icons[key]) { + result = icons[key] } else { - result = args + result = key } if (result.startsWith('/') || result.startsWith('https://') || result.startsWith('http://')) { return `` diff --git a/source/css/_common/layout.styl b/source/css/_common/layout.styl new file mode 100644 index 0000000..24cb8f5 --- /dev/null +++ b/source/css/_common/layout.styl @@ -0,0 +1,6 @@ +.flex + display: flex + align-items: center + +.flex.column + flex-direction: column diff --git a/source/css/_common/svg.styl b/source/css/_common/svg.styl index ac04a7a..1ad8d56 100644 --- a/source/css/_common/svg.styl +++ b/source/css/_common/svg.styl @@ -4,3 +4,6 @@ svg.icon vertical-align: middle fill: currentColor overflow: hidden + +svg.active-icon + color: $c-green \ No newline at end of file diff --git a/source/css/_layout/widgets/components.styl b/source/css/_layout/widgets/components.styl index 76fe630..c692e3a 100644 --- a/source/css/_layout/widgets/components.styl +++ b/source/css/_layout/widgets/components.styl @@ -1,21 +1,21 @@ -.widgets .linklist +.widget-body .linklist display: grid grid-gap: 8px - margin: 1em 0 .linklist .link border-radius: $border-bar - background: var(--alpha50) color: var(--text-p2) - border: none - border-bottom: none min-height: 32px - padding: 2px 4px + padding: 0 4px trans1 background display: flex justify-content: center align-items: center txt-ellipsis() + &.active + background: var(--alpha50) + svg,img + filter: unset .linklist .link span padding: 0 4px @@ -23,23 +23,23 @@ .linklist .link svg, .linklist .link img $size = 16px padding: 0 2px - color: $color-theme + &:not([class='active-icon']) + color: $color-theme max-height: 18px width: auto filter: grayscale(100%) brightness(0.8) opacity(0.8) trans1 filter flex-shrink: 0 -.markdown .linklist.center .link - border-radius: $border-button - -.linklist.left - grid-gap: 4px +.widget-body .linklist.left + grid-gap: 2px .linklist.left .link - justify-content: flex-start - padding: 2px 16px + justify-content: space-between + padding: 0 16px img,svg - width: 16px + width: 1em + height: 1em + transform: scale(1.2) span padding: 0 8px diff --git a/source/css/_layout/widgets/list.styl b/source/css/_layout/widgets/list.styl index f7134c7..3e81d69 100644 --- a/source/css/_layout/widgets/list.styl +++ b/source/css/_layout/widgets/list.styl @@ -20,5 +20,9 @@ align-items: center .title txt-ellipsis() - .icon - flex-shrink: 0 \ No newline at end of file + svg + flex-shrink: 0 + height: 1em + width: auto + transform: scale(1.2) + \ No newline at end of file diff --git a/source/css/_layout/widgets/markdown.styl b/source/css/_layout/widgets/markdown.styl index 87cf66f..1ce31ba 100644 --- a/source/css/_layout/widgets/markdown.styl +++ b/source/css/_layout/widgets/markdown.styl @@ -10,4 +10,11 @@ color: var(--text-p0) &:hover color: $color-hover - border-bottom: 1px solid $color-hover \ No newline at end of file + border-bottom: 1px solid $color-hover + +.widget-wrapper.markdown .linklist + margin: 1em 0 + .link + background: var(--alpha50) + .link:hover + background: var(--alpha100) \ No newline at end of file diff --git a/source/css/_layout/widgets/toc_wiki.styl b/source/css/_layout/widgets/toc_wiki.styl index 31cb49a..e679e4a 100644 --- a/source/css/_layout/widgets/toc_wiki.styl +++ b/source/css/_layout/widgets/toc_wiki.styl @@ -14,8 +14,9 @@ overflow: hidden a.doc-tree-link color: var(--text-p1) - padding: 0.5rem 16px + padding: 0 16px display: flex + min-height: 32px justify-content: space-between align-items: center font-size: $fs-14 @@ -23,16 +24,21 @@ trans1 background .toc-text txt-ellipsis() - .icon + svg,img flex-shrink: 0 + width: 1em + height: 1em + transform: scale(1.2) &:after position: absolute right: .5rem - &.active - &:only-child + &:only-child + &.active + background: var(--alpha50) + &:hover background: var(--alpha100) &:hover - background: var(--alpha50) + background: var(--alpha100) // 当前分页链接 diff --git a/source/css/_layout/widgets/widgets.styl b/source/css/_layout/widgets/widgets.styl index ebc0127..47fea23 100644 --- a/source/css/_layout/widgets/widgets.styl +++ b/source/css/_layout/widgets/widgets.styl @@ -31,17 +31,22 @@ display: none .cap-action line-height: 0 - color: var(--text-p2) - trans2: color background + color: inherit + opacity 0.6 + trans2: opacity background border-radius: 4px padding: 6px margin-right: -5px - .icon + svg + height: 1em + width: auto + transform: scale(1.2) fill: var(--text-p2) &:hover color: $color-hover background: var(--alpha100) - .icon + opacity 1 + svg fill: $color-hover .widget-body