asdfasdf

1 year ago · 6bee2d6d48
parent 33c95b2ec8
commit 6bee2d6d48
11 changed files with 150 additions and 81 deletions
--- a/layout/includes/layout.pug
+++ b/layout/includes/layout.pug
@ -7,6 +7,8 @@
 - if (is_year()) pageTitle += ': ' + page.year
 - pageTitle += ' [ ' + config.title + ' ]'

+include _partials/information_card.pug
+
 doctype html
 html(lang=config.language)
  head
@ -28,8 +30,9 @@ html(lang=config.language)
          .bottom-declaration-dotted

      main#main.main
-        #content.content 
-          block content
+        block content
+        .right-content
+          +information_card({name: '全站总字数', value: totalcount(site)})

      footer#footer.footer
        include ./_partials/footer.pug 
--- a/layout/index.pug
+++ b/layout/index.pug
@ -1,10 +1,6 @@
 extends includes/layout.pug
-include includes/_partials/information_card.pug

 block content
  .index-content
-    .left-content
      include includes/_partials/left_declaration.pug
-      include includes/_partials/post_list/post_list.pug
-    .right-content
-      +information_card({name: '全站总字数', value: totalcount(site)})
+      include includes/_partials/post_list/post_list.pug
--- a/layout/page.pug
+++ b/layout/page.pug
@ -3,13 +3,33 @@ include includes/_partials/information_card.pug

 block content
  .markdown-container
-    .content
-      include includes/_partials/left_declaration.pug
-      
-      .article-container
-        h1.article-title= (page.title === undefined || page.title === '') ? 'NO TITLE' : page.title
-        hr
-        != page.content      
-
-    .side-information
-      +information_card({name: '全站总字数', value: totalcount(site)})
+    include includes/_partials/left_declaration.pug
+    
+    .article-container
+      .article-header
+        - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
+        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+
+        .v-line
+
+        .article-info
+          span.article-title= page.title
+          - const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS");
+          - const updateTime = moment(page.updated).format("YYYY-MM-DD HH:mm:SS");
+          - const word_count = wordcount(page.content);
+          - const read_cost = min2read(page.content);
+          - const author = page.author === undefined ? config.author : page.author;
+          .h-line
+          .info-box
+            span.time-info.
+              发表于 #{publishTime}，更新于 #{updateTime}
+            br
+            span.stat-info.
+              总字数 #{word_count}， 阅读时长 约#{read_cost}分钟， 阅读量 100
+            br
+            span.big publish by 
+            span.author #{author}
+
+      hr
+      .main-content
+        != page.content
--- a/layout/post.pug
+++ b/layout/post.pug
@ -3,29 +3,33 @@ include includes/_partials/information_card.pug

 block content
  .markdown-container
-    .content
-      include includes/_partials/left_declaration.pug
-      .article-container
-        .article-header
-          h1.article-title= page.title
-          hr
-          
+    include includes/_partials/left_declaration.pug
+    
+    .article-container
+      .article-header
+        - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
+        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+
+        .v-line
+
+        .article-info
+          span.article-title= page.title
          - const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS");
          - const updateTime = moment(page.updated).format("YYYY-MM-DD HH:mm:SS");
          - const word_count = wordcount(page.content);
          - const read_cost = min2read(page.content);
          - const author = page.author === undefined ? config.author : page.author;
+          .h-line
          .info-box
            span.time-info.
-              发表于 #{publishTime}，  更新于 #{updateTime}
+              发表于 #{publishTime}，更新于 #{updateTime}
            br
            span.stat-info.
              总字数 #{word_count}， 阅读时长 约#{read_cost}分钟， 阅读量 100
            br
            span.big publish by 
            span.author #{author}
-          hr
-          != page.content      

-    .side-information
-      +information_card({name: '全站总字数', value: totalcount(site)})
+      hr
+      .main-content
+        != page.content
--- a/source/css/_partials/data_row.styl
+++ b/source/css/_partials/data_row.styl
@ -1,6 +1,7 @@
 .data-row
  display: flex
  flex-direction: row
+  gap: 10px
  .data-value a
    text-decoration: none
    color: rgb(74, 71, 62)
--- a/source/css/_partials/footer/footer.styl
+++ b/source/css/_partials/footer/footer.styl
@ -7,15 +7,13 @@
  width: 100%
  background-color: rgba(231, 225, 199, 0.75)
  color: rgb(74, 71, 62)
+
  .footer-info
    padding: 8px 0
    display: flex
    flex-direction: row
    gap: 24px
    justify-content: left
-    .v-line
-      margin-top: 2px
-      margin-bottom: 2px
    a
      text-decoration: none
      color: rgb(74, 71, 62)
--- a/source/css/_partials/index.styl
+++ b/source/css/_partials/index.styl
@ -1,10 +1,5 @@
 .index-content
-  display: flex
-  flex-direction: row
-  justify-content: space-between
-  gap: 16px
-  .left-content
-    width: 73%;
+    width: 98%;
    display: flex;
    flex-direction: row;
    gap: 12px
@ -18,10 +13,4 @@
      width: 100%
      // overflow-y: scroll
      overflow-x: hidden
-      justify-content: space-between
-      
-  .right-content
-    width: 24%
-    position: sticky
-    top: 16px
-    align-self: flex-start
+      justify-content: space-between
--- a/source/css/_partials/information_card.styl
+++ b/source/css/_partials/information_card.styl
@ -2,6 +2,7 @@
  display: flex
  flex-direction: column
  gap: 2px
+  overflow: hidden
  // filter: drop-shadow(0.8px 0.8px 0.8px);
  .avatar-box
    display: flex
--- a/source/css/_partials/post_page/markdown_content.styl
+++ b/source/css/_partials/post_page/markdown_content.styl
@ -1,16 +1,13 @@
-.article-container
+.main-content
  word-wrap: break-word
  overflow-wrap: break-word
  color: #4a473e
  
+  h1
+    margin-block-start: 0.4em
+    font-size: 2.25em
  h1, h2, h3, h4, h5, h6
    color: black
-    margin-left: -0.6em
-
-  hr
-    border: 1.3px solid rgba(0,0,0,0.16)
-    width: 108%
-    margin-left: -4%

  figure
    margin: 0
@ -87,6 +84,7 @@
    margin: 0

  ol, ul
+    // 二级列表
    ol, ul
      padding-left: 20px
    li
@ -95,6 +93,8 @@
    p
      margin: 4px 0 4px
      line-height: 1.5em
+    figure
+      line-height: normal

  > :last-child
    margin-bottom: 0 !important
--- a/source/css/_partials/post_page/post_page.styl
+++ b/source/css/_partials/post_page/post_page.styl
@ -5,37 +5,67 @@
  flex-direction: row
  justify-content: space-between
  gap: 16px
-  .article-title
-    font-size: 3em
-  .content
-    width: 73%;
-    display: flex;
-    flex-direction: row;
-    gap: 12px
-    .article-container
-      background-color: rgb(231, 225, 199)
-      height: fit-content
-      padding: 4px 64px
+  flex: 1
+  overflow: auto
+  width: 97%
+  
+  .article-container
+    background-color: rgb(231, 225, 199)
+    height: fit-content
+    padding: 1em 40px
+    display: flex
+    flex-direction: column
+    width: 100%
+    overflow-x: hidden
+    justify-content: space-between
+    font-size: 18px
+
+  .article-header
+    display: flex
+    flex-direction: row
+    margin: 1em 0 1em
+    gap: 2em
+
+    $post-width = 384px
+    $post-heigth = 216px
+    img.post-cover
+      width: $post-width
+      height $post-heigth
+      min-width: $post-width
+      min-height $post-heigth
+      max-width: $post-width
+      max-height $post-heigth
+      object-fit: cover
+      transition: all 0.2s linear 0s
+
+    .article-info
      display: flex
      flex-direction: column
-      gap: 16px
+      gap: 1em
      width: 100%
-      // overflow-y: scroll
-      overflow-x: hidden
-      justify-content: space-between
-      font-size: 18px
+      .h-line
+        margin-left: -2%
+      .article-title
+        font-size: 2.3em
+        font-weight: bold
+      .info-box
+        line-height: 1.6em
+        font-family: 'Consolas'
+        .time-info, .stat-info
+          font-size: 14px
+        .big, bold
+          font-size: 16px
+        .author
+          font-size: 16px
+          font-weight: bold
+
+  hr
+    border: 1.3px solid rgba(0,0,0,0.16)
+    width: 104%
+    margin-left: -2%
+
  .side-information
    width: 24%
    position: sticky
    top: 16px
    align-self: flex-start
-  .info-box
-    margin-left: -1.6em
-    line-height: 1.6em
-    .time-info, .stat-info
-      font-size: 14px
-    .big
-      font-size: 16px
-    .author
-      font-size: 16px
-      font-weight: bold
--- a/source/css/common.styl
+++ b/source/css/common.styl
@ -3,6 +3,9 @@ $backgroundColor=rgb(197, 194, 165)
 $light=rgb(231, 225, 199)
 $dark=rgb(74, 71, 62)

+html, body
+  height: 100%
+
 body
  background-color: rgb(197, 194, 165)
  background-image:
@ -17,17 +20,32 @@ body > * ::selection
  color: rgb(231, 225, 199)

 #container
-  padding: 1.5% 2% 1% 2%
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  padding: 0 2% 0 2%
  min-height: 100%
-  // position: relative
-
 // footer
 //   position: absolute
 //   bottom: 0
 //   width: 100%

+#header
+  margin-top: 1%
 #main
+  flex: 1
  margin: 2em 0
+  display: flex
+  flex-direction: row
+  gap: 4em
+  .right-content
+    width: 24%
+    position: sticky
+    top: 16px
+    align-self: flex-start
+    flex-shrink: 0
+#footer
+  margin-bottom: 1%

 span::selection
  background-color: rgb(74, 71, 62)
@ -74,6 +92,15 @@ img
  width: 1.3px;
  height: auto;
  background: rgba(0, 0, 0, 0.16);
+  margin: 2px
+
+
+.h-line
+  float: left;
+  width: auto;
+  height: 1.3px;
+  background: rgba(0, 0, 0, 0.16);
+  margin: 2px

@import '_partials/header/*'
@import '_partials/footer/*'