diff --git a/_config.yml b/_config.yml index 5b72e74..3c8beb4 100644 --- a/_config.yml +++ b/_config.yml @@ -12,6 +12,8 @@ menu: 传送门: /teleport-public 大佬们: /giants +avatar: https://oss-img.ciduid.top/aether/square.jpg + # stylesheets loaded in the stylesheets: - /css/hexo-theme-yorha.css diff --git a/layout/includes/_partials/data_row.pug b/layout/includes/_partials/data_row.pug new file mode 100644 index 0000000..f88e5bf --- /dev/null +++ b/layout/includes/_partials/data_row.pug @@ -0,0 +1,4 @@ +mixin data_row(name, value) + .data-row + span.data-name=name + span.data-value=value \ No newline at end of file diff --git a/layout/includes/_partials/information_card.pug b/layout/includes/_partials/information_card.pug index 835666a..d8c307e 100644 --- a/layout/includes/_partials/information_card.pug +++ b/layout/includes/_partials/information_card.pug @@ -1,5 +1,33 @@ include titled_card.pug +include data_row.pug -+create_card("Information - 信息") - div 这是我 - div 随便写的文章 \ No newline at end of file +.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") + \ No newline at end of file diff --git a/layout/includes/_partials/titled_card.pug b/layout/includes/_partials/titled_card.pug index d0800a1..a1e47bf 100644 --- a/layout/includes/_partials/titled_card.pug +++ b/layout/includes/_partials/titled_card.pug @@ -1,7 +1,6 @@ -mixin create_card(title) - .titled-block-compoment - .titled-block-container - .title-box - = title - .block-content - block \ No newline at end of file +mixin titled_card(title) + .titled-card-compoment + .card-title + = title + .card-content + block \ No newline at end of file diff --git a/layout/index.pug b/layout/index.pug index 42ead58..54f3e4c 100644 --- a/layout/index.pug +++ b/layout/index.pug @@ -1,4 +1,10 @@ extends includes/layout.pug 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 diff --git a/source/css/_partials/button.styl b/source/css/_partials/button.styl index a1dfc07..7e304cb 100644 --- a/source/css/_partials/button.styl +++ b/source/css/_partials/button.styl @@ -2,70 +2,70 @@ width: 100% .button-container a.active - background-position: -100% center; - color: rgb(180, 175, 154) !important; + background-position: -100% center + color: rgb(180, 175, 154) !important &:hover::before - content: none !important; + content: none !important &:hover::after - content: none !important; + content: none !important .button-anchor-box .button-icon - background-position: -100% center; + background-position: -100% center a.button-anchor - text-decoration: none; - display: flex; - flex-direction: column; - color: rgb(74, 71, 62); - 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-size: 200%; - transition: all 0.2s linear 0s; - cursor: default; + text-decoration: none + display: flex + flex-direction: column + color: rgb(74, 71, 62) + 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-size: 200% + transition: all 0.2s linear 0s + cursor: default &:hover - background-position: -100% center; - color: rgb(180, 175, 154); + background-position: -100% center + color: rgb(180, 175, 154) // line over the button &::before - background-color: rgb(74, 71, 62); - transition: all 0.2s ease 0s; + background-color: rgb(74, 71, 62) + transition: all 0.2s ease 0s &:hover::before - height: 2px; - z-index: -1; - width: 100%; - content: ""; - transform: translate(0px, -8px); - pointer-events: none; + height: 2px + z-index: -1 + width: 100% + content: "" + transform: translate(0px, -8px) + pointer-events: none // line under the button &::after - background-color: rgb(74, 71, 62); - transition: all 0.2s ease 0s; + background-color: rgb(74, 71, 62) + transition: all 0.2s ease 0s &:hover::after - height: 2px; - z-index: -1; - width: 100%; - content: ""; - transform: translate(0px, 8px); - pointer-events: none; + height: 2px + z-index: -1 + width: 100% + content: "" + transform: translate(0px, 8px) + pointer-events: none &:hover .button-anchor-box .button-icon - background-position: -100% center; + background-position: -100% center .button-anchor-box - padding: 8px; - display: flex; - gap: 10px; - -webkit-box-align: center; - align-items: center; - font-family: Manrope, sans-serif; - font-weight: 500; - font-size: 18px; + padding: 8px + display: flex + gap: 10px + -webkit-box-align: center + align-items: center + font-family: Manrope, sans-serif + font-weight: 500 + font-size: 18px .button-icon - width: 5%; - height: 5%; - min-width: 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-size: 200%; - transition: all 0.1s linear 0s; + width: 5% + height: 5% + min-width: 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-size: 200% + transition: all 0.1s linear 0s diff --git a/source/css/_partials/data_row.styl b/source/css/_partials/data_row.styl new file mode 100644 index 0000000..40a93eb --- /dev/null +++ b/source/css/_partials/data_row.styl @@ -0,0 +1,3 @@ +.data-row + display: flex + flex-direction: row \ No newline at end of file diff --git a/source/css/_partials/index.styl b/source/css/_partials/index.styl new file mode 100644 index 0000000..d234b61 --- /dev/null +++ b/source/css/_partials/index.styl @@ -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 \ No newline at end of file diff --git a/source/css/_partials/information_card.styl b/source/css/_partials/information_card.styl new file mode 100644 index 0000000..55dc65d --- /dev/null +++ b/source/css/_partials/information_card.styl @@ -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 diff --git a/source/css/_partials/left_declaration.styl b/source/css/_partials/left_declaration.styl index be49974..c6946db 100644 --- a/source/css/_partials/left_declaration.styl +++ b/source/css/_partials/left_declaration.styl @@ -1,7 +1,7 @@ .left-declaration display: flex flex-direction: row - height: 100% + height: auto .declaration background-color: rgb(180, 175, 154); width: 10px; diff --git a/source/css/_partials/titled_card.styl b/source/css/_partials/titled_card.styl index 073120a..9fb6087 100644 --- a/source/css/_partials/titled_card.styl +++ b/source/css/_partials/titled_card.styl @@ -1,9 +1,9 @@ -.titled-block-container +.titled-card-compoment background-color: rgb(231, 225, 199); - .title-box + .card-title background-color: rgb(74, 71, 62); color: rgb(231, 225, 199); - padding: 0.5% 1%; - .block-content - padding: 0.5% 1%; + padding: 0.5em 1em; + .card-content + padding: 0.5em 1em; color: rgb(74, 71, 62); \ No newline at end of file diff --git a/source/css/common.styl b/source/css/common.styl index 9f5db1f..34761db 100644 --- a/source/css/common.styl +++ b/source/css/common.styl @@ -4,7 +4,8 @@ body background-color: #c6c2a5 background-image: 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 margin: 0 @@ -12,23 +13,23 @@ body padding: 1.5% 2% 2% 2% #main - margin-top: 0.5% + margin-top: 2em .bottom-declaration // container左右各有2%的padding // 要突破这个container，所以要先往左边拉2%，然后width+=2%*2，也就是104% - margin-left: -2%; - margin-top: 1.5em; - width: 104%; + margin-left: -2% + margin-top: 1.5em + width: 104% .bottom-declaration-line - border: 1.3px solid #000; + border: 1.3px solid #000 .bottom-declaration-dotted - background-image: linear-gradient(90deg,#333 14%,hsla(0,0%,100%,0) 0); - background-repeat: repeat-x; - background-size: 100px 4px; - width: 100%; - height: 4px; - margin: 0 -2% 0; + background-image: linear-gradient(90deg,#333 14%,hsla(0,0%,100%,0) 0) + background-repeat: repeat-x + background-size: 100px 4px + width: 100% + height: 4px + margin: 0 -2% 0 * box-sizing: border-box