3

2 years ago · 969291dcec
parent 257728c5dd
commit 969291dcec
12 changed files with 167 additions and 77 deletions
--- 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 <head>
 stylesheets:
 - /css/hexo-theme-yorha.css
--- a/layout/includes/_partials/data_row.pug
+++ 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
--- 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 随便写的文章
+.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")
+      
--- 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
+mixin titled_card(title)
+  .titled-card-compoment
+    .card-title
+      = title
+    .card-content 
+      block
--- 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
--- 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

--- a/source/css/_partials/data_row.styl
+++ b/source/css/_partials/data_row.styl
@ -0,0 +1,3 @@
+.data-row
+  display: flex
+  flex-direction: row
--- a/source/css/_partials/index.styl
+++ 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
--- a/source/css/_partials/information_card.styl
+++ 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
--- 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;
--- 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);
--- 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