main
lensfrex 1 year ago
parent 33c95b2ec8
commit 6bee2d6d48
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
  1. 7
      layout/includes/layout.pug
  2. 4
      layout/index.pug
  3. 36
      layout/page.pug
  4. 26
      layout/post.pug
  5. 1
      source/css/_partials/data_row.styl
  6. 4
      source/css/_partials/footer/footer.styl
  7. 13
      source/css/_partials/index.styl
  8. 1
      source/css/_partials/information_card.styl
  9. 14
      source/css/_partials/post_page/markdown_content.styl
  10. 82
      source/css/_partials/post_page/post_page.styl
  11. 33
      source/css/common.styl

@ -7,6 +7,8 @@
- if (is_year()) pageTitle += ': ' + page.year - if (is_year()) pageTitle += ': ' + page.year
- pageTitle += ' [ ' + config.title + ' ]' - pageTitle += ' [ ' + config.title + ' ]'
include _partials/information_card.pug
doctype html doctype html
html(lang=config.language) html(lang=config.language)
head head
@ -28,8 +30,9 @@ html(lang=config.language)
.bottom-declaration-dotted .bottom-declaration-dotted
main#main.main main#main.main
#content.content block content
block content .right-content
+information_card({name: '全站总字数', value: totalcount(site)})
footer#footer.footer footer#footer.footer
include ./_partials/footer.pug include ./_partials/footer.pug

@ -1,10 +1,6 @@
extends includes/layout.pug extends includes/layout.pug
include includes/_partials/information_card.pug
block content block content
.index-content .index-content
.left-content
include includes/_partials/left_declaration.pug include includes/_partials/left_declaration.pug
include includes/_partials/post_list/post_list.pug include includes/_partials/post_list/post_list.pug
.right-content
+information_card({name: '全站总字数', value: totalcount(site)})

@ -3,13 +3,33 @@ include includes/_partials/information_card.pug
block content block content
.markdown-container .markdown-container
.content include includes/_partials/left_declaration.pug
include includes/_partials/left_declaration.pug
.article-container .article-container
h1.article-title= (page.title === undefined || page.title === '') ? 'NO TITLE' : page.title .article-header
hr - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
!= page.content img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
.v-line
.side-information .article-info
+information_card({name: '全站总字数', value: totalcount(site)}) 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

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

@ -1,6 +1,7 @@
.data-row .data-row
display: flex display: flex
flex-direction: row flex-direction: row
gap: 10px
.data-value a .data-value a
text-decoration: none text-decoration: none
color: rgb(74, 71, 62) color: rgb(74, 71, 62)

@ -7,15 +7,13 @@
width: 100% width: 100%
background-color: rgba(231, 225, 199, 0.75) background-color: rgba(231, 225, 199, 0.75)
color: rgb(74, 71, 62) color: rgb(74, 71, 62)
.footer-info .footer-info
padding: 8px 0 padding: 8px 0
display: flex display: flex
flex-direction: row flex-direction: row
gap: 24px gap: 24px
justify-content: left justify-content: left
.v-line
margin-top: 2px
margin-bottom: 2px
a a
text-decoration: none text-decoration: none
color: rgb(74, 71, 62) color: rgb(74, 71, 62)

@ -1,10 +1,5 @@
.index-content .index-content
display: flex width: 98%;
flex-direction: row
justify-content: space-between
gap: 16px
.left-content
width: 73%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 12px gap: 12px
@ -19,9 +14,3 @@
// overflow-y: scroll // overflow-y: scroll
overflow-x: hidden overflow-x: hidden
justify-content: space-between justify-content: space-between
.right-content
width: 24%
position: sticky
top: 16px
align-self: flex-start

@ -2,6 +2,7 @@
display: flex display: flex
flex-direction: column flex-direction: column
gap: 2px gap: 2px
overflow: hidden
// filter: drop-shadow(0.8px 0.8px 0.8px); // filter: drop-shadow(0.8px 0.8px 0.8px);
.avatar-box .avatar-box
display: flex display: flex

@ -1,16 +1,13 @@
.article-container .main-content
word-wrap: break-word word-wrap: break-word
overflow-wrap: break-word overflow-wrap: break-word
color: #4a473e color: #4a473e
h1
margin-block-start: 0.4em
font-size: 2.25em
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6
color: black color: black
margin-left: -0.6em
hr
border: 1.3px solid rgba(0,0,0,0.16)
width: 108%
margin-left: -4%
figure figure
margin: 0 margin: 0
@ -87,6 +84,7 @@
margin: 0 margin: 0
ol, ul ol, ul
//
ol, ul ol, ul
padding-left: 20px padding-left: 20px
li li
@ -95,6 +93,8 @@
p p
margin: 4px 0 4px margin: 4px 0 4px
line-height: 1.5em line-height: 1.5em
figure
line-height: normal
> :last-child > :last-child
margin-bottom: 0 !important margin-bottom: 0 !important

@ -5,37 +5,67 @@
flex-direction: row flex-direction: row
justify-content: space-between justify-content: space-between
gap: 16px gap: 16px
.article-title flex: 1
font-size: 3em overflow: auto
.content width: 97%
width: 73%;
display: flex; .article-container
flex-direction: row; background-color: rgb(231, 225, 199)
gap: 12px height: fit-content
.article-container padding: 1em 40px
background-color: rgb(231, 225, 199) display: flex
height: fit-content flex-direction: column
padding: 4px 64px 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 display: flex
flex-direction: column flex-direction: column
gap: 16px gap: 1em
width: 100% width: 100%
// overflow-y: scroll .h-line
overflow-x: hidden margin-left: -2%
justify-content: space-between .article-title
font-size: 18px 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 .side-information
width: 24% width: 24%
position: sticky position: sticky
top: 16px top: 16px
align-self: flex-start 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

@ -3,6 +3,9 @@ $backgroundColor=rgb(197, 194, 165)
$light=rgb(231, 225, 199) $light=rgb(231, 225, 199)
$dark=rgb(74, 71, 62) $dark=rgb(74, 71, 62)
html, body
height: 100%
body body
background-color: rgb(197, 194, 165) background-color: rgb(197, 194, 165)
background-image: background-image:
@ -17,17 +20,32 @@ body > * ::selection
color: rgb(231, 225, 199) color: rgb(231, 225, 199)
#container #container
padding: 1.5% 2% 1% 2% display: flex
flex-direction: column
justify-content: space-between
padding: 0 2% 0 2%
min-height: 100% min-height: 100%
// position: relative
// footer // footer
// position: absolute // position: absolute
// bottom: 0 // bottom: 0
// width: 100% // width: 100%
#header
margin-top: 1%
#main #main
flex: 1
margin: 2em 0 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 span::selection
background-color: rgb(74, 71, 62) background-color: rgb(74, 71, 62)
@ -74,6 +92,15 @@ img
width: 1.3px; width: 1.3px;
height: auto; height: auto;
background: rgba(0, 0, 0, 0.16); 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/header/*'
@import '_partials/footer/*' @import '_partials/footer/*'

Loading…
Cancel
Save