From 6bee2d6d481235e914dfee9e2642ee81e55caa40 Mon Sep 17 00:00:00 2001 From: lensferno Date: Thu, 29 Jun 2023 21:46:10 +0800 Subject: [PATCH] asdfasdf --- layout/includes/layout.pug | 7 +- layout/index.pug | 6 +- layout/page.pug | 40 ++++++--- layout/post.pug | 28 ++++--- source/css/_partials/data_row.styl | 1 + source/css/_partials/footer/footer.styl | 4 +- source/css/_partials/index.styl | 15 +--- source/css/_partials/information_card.styl | 1 + .../_partials/post_page/markdown_content.styl | 14 ++-- source/css/_partials/post_page/post_page.styl | 82 +++++++++++++------ source/css/common.styl | 33 +++++++- 11 files changed, 150 insertions(+), 81 deletions(-) diff --git a/layout/includes/layout.pug b/layout/includes/layout.pug index 97e8ed3..bd3b495 100644 --- 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 diff --git a/layout/index.pug b/layout/index.pug index 5e44c61..5379d67 100644 --- 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)}) \ No newline at end of file + include includes/_partials/post_list/post_list.pug \ No newline at end of file diff --git a/layout/page.pug b/layout/page.pug index abd29c0..f6a572f 100644 --- 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 \ No newline at end of file diff --git a/layout/post.pug b/layout/post.pug index d33d8a2..f6a572f 100644 --- 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)}) \ No newline at end of file + hr + .main-content + != page.content \ No newline at end of file diff --git a/source/css/_partials/data_row.styl b/source/css/_partials/data_row.styl index 1f6fee4..172e48c 100644 --- 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) \ No newline at end of file diff --git a/source/css/_partials/footer/footer.styl b/source/css/_partials/footer/footer.styl index 925dd04..dd5f411 100644 --- 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) diff --git a/source/css/_partials/index.styl b/source/css/_partials/index.styl index 7333eb3..771b51b 100644 --- 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 \ No newline at end of file + justify-content: space-between \ No newline at end of file diff --git a/source/css/_partials/information_card.styl b/source/css/_partials/information_card.styl index 895bd69..c0713de 100644 --- 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 diff --git a/source/css/_partials/post_page/markdown_content.styl b/source/css/_partials/post_page/markdown_content.styl index c6ab1fe..d378d27 100644 --- 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 diff --git a/source/css/_partials/post_page/post_page.styl b/source/css/_partials/post_page/post_page.styl index efd642c..5d0b067 100644 --- 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 diff --git a/source/css/common.styl b/source/css/common.styl index 3d03771..fc56edf 100644 --- 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/*'