lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: optimize article content page user avatar display

This commit is contained in:
XPoet 2021-01-05 18:08:41 +08:00
parent fc6d6f6bac
commit 1f7c8924a2
6 changed files with 56 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_config.yml
View File

@ -27,7 +27,7 @@ style:
left_side_width: 260px left_side_width: 260px
# Content area max width # Content area max width
content_max_width: 900px content_max_width: 920px
# Mouse hover # Mouse hover
hover: hover:
@ -67,6 +67,7 @@ menu:
# Tags: /tags # Tags: /tags
# Links: /links # Links: /links
# About: /about # About: /about
# Changelog: /changelog
# ...... # ......
@ -97,17 +98,17 @@ toc:
enable: false enable: false
# Automatically add list number to toc. # Automatically add list number to toc.
number: true number: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it. # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: true expand_all: false
# --------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------
# Post copyright info # Post copyright info
# --------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------
copyright_info: copyright_info:
enable: true enable: false
# --------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------

1
source/css/layout/article-content.styl
View File

@ -44,6 +44,7 @@ $article-title-font-size = 1.6rem;
border-radius: 50%; border-radius: 50%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--avatar-background-color);
} }
} }

3
source/css/layout/common/variables.styl
View File

@ -71,6 +71,7 @@ $scroll-bar-color = lighten($default-text-color, 20%);
$scroll-bar-bg-color = darken($background-color, 10%); $scroll-bar-bg-color = darken($background-color, 10%);
$link-color = darken($default-text-color, 10%); $link-color = darken($default-text-color, 10%);
$copyright-info-color = #CC0033; $copyright-info-color = #CC0033;
$avatar-background-color = #0066CC;
// ====================== dark mode color ====================== // ====================== dark mode color ======================
$dark-primary-color = $primary-color; $dark-primary-color = $primary-color;
@ -89,6 +90,7 @@ $dark-scroll-bar-color = darken($dark-background-color, 30%);
$dark-scroll-bar-bg-color = lighten($dark-background-color, 10%); $dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
$dark-link-color = lighten($dark-default-text-color, 10%); $dark-link-color = lighten($dark-default-text-color, 10%);
$dark-copyright-info-color = darken($copyright-info-color, 20%); $dark-copyright-info-color = darken($copyright-info-color, 20%);
$dark-avatar-background-color = darken($avatar-background-color, 20%);
// ======================================================================== // ========================================================================
// font // font
@ -119,6 +121,7 @@ root-color(mode) {
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color; --scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
--link-color: mode == 'light' ? $link-color : $dark-link-color; --link-color: mode == 'light' ? $link-color : $dark-link-color;
--copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color; --copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
--avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
} }

BIN
source/images/avatar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

42
source/images/avatar.svg Normal file
View File

@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1417" height="1417" viewBox="0 0 1417 1417">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<defs>
<style>
.cls-1 {
fill: #fff;
fill-rule: evenodd;
}
</style>
</defs>
<image id="bg" width="1417" height="1417" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAABYkAAAWJAQMAAAABhQpvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUAZswAAACPjmqcAAAAAWJLR0QB/wIt3gAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UBBgEsJnio0pkAAAENSURBVHja7cGBAAAAAMOg+VPf4ARVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxwDe+AABxPjdbAAAAABJRU5ErkJggg=="/>
<path id="rectangular" class="cls-1" d="M274.359,275.19h289.77v874.62H274.359V275.19Z"/>
<path id="triangle-down" class="cls-1" d="M853.873,1149.81H1143.62L853.873,853.159V1149.81Z"/>
<path id="triangle-up" class="cls-1" d="M853.873,275.192H1143.62L853.873,564.942V275.192Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

13
source/images/logo.svg
View File

@ -1,4 +1,4 @@
<svg id="组_3" data-name="组 3" xmlns="http://www.w3.org/2000/svg" width="1062.75" height="1062.75" viewBox="0 0 1417 1417"> <svg xmlns="http://www.w3.org/2000/svg" width="1417" height="1417" viewBox="0 0 1417 1417">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21 "> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c140 79.160451, 2017/05/06-01:08:21 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
@ -29,16 +29,13 @@
<?xpacket end="w"?></metadata> <?xpacket end="w"?></metadata>
<defs> <defs>
<style> <style>
.cls-1, .cls-2 { .cls-1 {
fill: #06c; fill: #06c;
}
.cls-2 {
fill-rule: evenodd; fill-rule: evenodd;
} }
</style> </style>
</defs> </defs>
<rect id="矩形_2" data-name="矩形 2" class="cls-1" x="238" y="142" width="399" height="1141"/> <path id="rectangular" class="cls-1" d="M170.35,170.525h359.1V1254.47H170.35V170.525Z"/>
<path id="矩形_3" data-name="矩形 3" class="cls-2" d="M942,142h243L942,529V142Z"/> <path id="triangle-down" class="cls-1" d="M888.55,1254.47h359.1L888.55,886.825V1254.47Z"/>
<path id="矩形_3_拷贝" data-name="矩形 3 拷贝" class="cls-2" d="M942,1283h243L942,896v387Z"/> <path id="triangle-up" class="cls-1" d="M888.55,170.525h359.1l-359.1,359.1v-359.1Z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB