lensfrex
/
hexo-theme-yorha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

3

Browse Source
main
lensfrex 1 year ago
parent 257728c5dd
commit 969291dcec
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
12 changed files with 167 additions and 77 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      _config.yml
  2. 4
      layout/includes/_partials/data_row.pug
  3. 34
      layout/includes/_partials/information_card.pug
  4. 13
      layout/includes/_partials/titled_card.pug
  5. 8
      layout/index.pug
  6. 96
      source/css/_partials/button.styl
  7. 3
      source/css/_partials/data_row.styl
  8. 20
      source/css/_partials/index.styl
  9. 27
      source/css/_partials/information_card.styl
  10. 2
      source/css/_partials/left_declaration.styl
  11. 10
      source/css/_partials/titled_card.styl
  12. 25
      source/css/common.styl

2
_config.yml
Unescape View File

@ -12,6 +12,8 @@ menu:
传送门: /teleport-public 传送门: /teleport-public
大佬们: /giants 大佬们: /giants
avatar: https://oss-img.ciduid.top/aether/square.jpg
# stylesheets loaded in the <head> # stylesheets loaded in the <head>
stylesheets: stylesheets:
- /css/hexo-theme-yorha.css - /css/hexo-theme-yorha.css

4
layout/includes/_partials/data_row.pug
Unescape View File

@ -0,0 +1,4 @@
mixin data_row(name, value)
.data-row
span.data-name=name
span.data-value=value

34
layout/includes/_partials/information_card.pug
Unescape View File

@ -1,5 +1,33 @@
include titled_card.pug include titled_card.pug
include data_row.pug
.information-card
+titled_card("Information - 信息")
.information-content
.avatar-box
.avatar-img
img(src="https://oss-img.ciduid.top/aether/square.jpg")
.personal-information
span.name lensfrex
span.sign 好好好，好好好，好好好好好好好
hr
+data_row("文章数", 12)
+data_row("总字数", "16k")
+data_row("全站访问次数", "16k")
hr
+data_row("文章数", 12)
+data_row("总字数", "16k")
+data_row("全站访问次数", "16k")
+data_row("文章数", 12)
+data_row("总字数", "16k")
+data_row("全站访问次数", "16k")
hr
+data_row("文章数", 12)
+data_row("总字数", "16k")
+create_card("Information - 信息")
div 这是我
div 随便写的文章

13
layout/includes/_partials/titled_card.pug
Unescape View File

@ -1,7 +1,6 @@
mixin create_card(title) mixin titled_card(title)
.titled-block-compoment .titled-card-compoment
.titled-block-container .card-title
.title-box = title
= title .card-content
.block-content block
block

8
layout/index.pug
Unescape View File

@ -1,4 +1,10 @@
extends includes/layout.pug extends includes/layout.pug
block content block content
include includes/_partials/information_card.pug .index-content
.left-content
include ./includes/_partials/left_declaration.pug
.post-list
.right-content
include includes/_partials/information_card.pug

96
source/css/_partials/button.styl
Unescape View File

@ -2,70 +2,70 @@
width: 100% width: 100%
.button-container .button-container
a.active a.active
background-position: -100% center; background-position: -100% center
color: rgb(180, 175, 154) !important; color: rgb(180, 175, 154) !important
&:hover::before &:hover::before
content: none !important; content: none !important
&:hover::after &:hover::after
content: none !important; content: none !important
.button-anchor-box .button-icon .button-anchor-box .button-icon
background-position: -100% center; background-position: -100% center
a.button-anchor a.button-anchor
text-decoration: none; text-decoration: none
display: flex; display: flex
flex-direction: column; flex-direction: column
color: rgb(74, 71, 62); color: rgb(74, 71, 62)
align-items: flex-start; align-items: flex-start
background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(74, 71, 62) 50%, rgb(74, 71, 62) 100%); background-image: linear-gradient(90deg, rgb(180, 175, 154) 50%, rgb(180, 175, 154) 50%, rgb(74, 71, 62) 50%, rgb(74, 71, 62) 100%)
background-size: 200%; background-size: 200%
transition: all 0.2s linear 0s; transition: all 0.2s linear 0s
cursor: default; cursor: default
&:hover &:hover
background-position: -100% center; background-position: -100% center
color: rgb(180, 175, 154); color: rgb(180, 175, 154)
// line over the button // line over the button
&::before &::before
background-color: rgb(74, 71, 62); background-color: rgb(74, 71, 62)
transition: all 0.2s ease 0s; transition: all 0.2s ease 0s
&:hover::before &:hover::before
height: 2px; height: 2px
z-index: -1; z-index: -1
width: 100%; width: 100%
content: ""; content: ""
transform: translate(0px, -8px); transform: translate(0px, -8px)
pointer-events: none; pointer-events: none
// line under the button // line under the button
&::after &::after
background-color: rgb(74, 71, 62); background-color: rgb(74, 71, 62)
transition: all 0.2s ease 0s; transition: all 0.2s ease 0s
&:hover::after &:hover::after
height: 2px; height: 2px
z-index: -1; z-index: -1
width: 100%; width: 100%
content: ""; content: ""
transform: translate(0px, 8px); transform: translate(0px, 8px)
pointer-events: none; pointer-events: none
&:hover .button-anchor-box .button-icon &:hover .button-anchor-box .button-icon
background-position: -100% center; background-position: -100% center
.button-anchor-box .button-anchor-box
padding: 8px; padding: 8px
display: flex; display: flex
gap: 10px; gap: 10px
-webkit-box-align: center; -webkit-box-align: center
align-items: center; align-items: center
font-family: Manrope, sans-serif; font-family: Manrope, sans-serif
font-weight: 500; font-weight: 500
font-size: 18px; font-size: 18px
.button-icon .button-icon
width: 5%; width: 5%
height: 5%; height: 5%
min-width: 20px; min-width: 20px
min-height: 20px; min-height: 20px
background-image: linear-gradient(90deg, rgb(74, 71, 62) 50%, rgb(74, 71, 62) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%); background-image: linear-gradient(90deg, rgb(74, 71, 62) 50%, rgb(74, 71, 62) 50%, rgb(218, 212, 187) 50%, rgb(218, 212, 187) 100%)
background-size: 200%; background-size: 200%
transition: all 0.1s linear 0s; transition: all 0.1s linear 0s

3
source/css/_partials/data_row.styl
Unescape View File

@ -0,0 +1,3 @@
.data-row
display: flex
flex-direction: row

20
source/css/_partials/index.styl
Unescape View File

@ -0,0 +1,20 @@
.index-content
display: flex
flex-direction: row
justify-content: space-between
gap: 16px
.left-content
width: 73%;
display: flex;
flex-direction: row;
gap: 16px;
.post-list
background-color: rgba(231, 225, 199, 0.5);
height: 1920px
width: 100%
.right-content
width: 24%
position: sticky
top: 16px
align-self: flex-start

27
source/css/_partials/information_card.styl
Unescape View File

@ -0,0 +1,27 @@
.information-content
display: flex
flex-direction: column
// filter: drop-shadow(0.8px 0.8px 0.8px);
.avatar-box
display: flex
flex-direction: row
gap: 10px
.avatar-img img
height: 64px
width: 64px
.personal-information
display: flex
flex-direction: column
gap: 3px
.name
font-size: 20px
font-weight: bold
.sign
font-size: 14px
hr
border: 1.3px solid rgba(0, 0, 0, 0.16)
width: 100%
.data-row
justify-content: space-between

2
source/css/_partials/left_declaration.styl
Unescape View File

@ -1,7 +1,7 @@
.left-declaration .left-declaration
display: flex display: flex
flex-direction: row flex-direction: row
height: 100% height: auto
.declaration .declaration
background-color: rgb(180, 175, 154); background-color: rgb(180, 175, 154);
width: 10px; width: 10px;

10
source/css/_partials/titled_card.styl
Unescape View File

@ -1,9 +1,9 @@
.titled-block-container .titled-card-compoment
background-color: rgb(231, 225, 199); background-color: rgb(231, 225, 199);
.title-box .card-title
background-color: rgb(74, 71, 62); background-color: rgb(74, 71, 62);
color: rgb(231, 225, 199); color: rgb(231, 225, 199);
padding: 0.5% 1%; padding: 0.5em 1em;
.block-content .card-content
padding: 0.5% 1%; padding: 0.5em 1em;
color: rgb(74, 71, 62); color: rgb(74, 71, 62);

25
source/css/common.styl
Unescape View File

@ -4,7 +4,8 @@ body
background-color: #c6c2a5 background-color: #c6c2a5
background-image: background-image:
linear-gradient(90deg, #c6c2a5 2px, rgba(255 255 255 0) 0), linear-gradient(90deg, #c6c2a5 2px, rgba(255 255 255 0) 0),
linear-gradient(180deg, #c6c2a5 2px, rgb(209 205 178) 0); linear-gradient(180deg, #c6c2a5 2px, rgb(209 205 178) 0)
background-attachment: fixed
background-size: .4rem .4rem background-size: .4rem .4rem
margin: 0 margin: 0
@ -12,23 +13,23 @@ body
padding: 1.5% 2% 2% 2% padding: 1.5% 2% 2% 2%
#main #main
margin-top: 0.5% margin-top: 2em
.bottom-declaration .bottom-declaration
// container左右各有2%的padding // container左右各有2%的padding
// 要突破这个container，所以要先往左边拉2%，然后width+=2%*2，也就是104% // 要突破这个container，所以要先往左边拉2%，然后width+=2%*2，也就是104%
margin-left: -2%; margin-left: -2%
margin-top: 1.5em; margin-top: 1.5em
width: 104%; width: 104%
.bottom-declaration-line .bottom-declaration-line
border: 1.3px solid #000; border: 1.3px solid #000
.bottom-declaration-dotted .bottom-declaration-dotted
background-image: linear-gradient(90deg,#333 14%,hsla(0,0%,100%,0) 0); background-image: linear-gradient(90deg,#333 14%,hsla(0,0%,100%,0) 0)
background-repeat: repeat-x; background-repeat: repeat-x
background-size: 100px 4px; background-size: 100px 4px
width: 100%; width: 100%
height: 4px; height: 4px
margin: 0 -2% 0; margin: 0 -2% 0
* *
box-sizing: border-box box-sizing: border-box

Write Preview
Loading…
Cancel
Save