lensfrex 1 year ago
parent 1520426a7f
commit ae57649f4b
Signed by: lensfrex
GPG Key ID: 947ADABD8533C476
  1. 4
      _config.yml
  2. 4
      layout/includes/_partials/footer.pug
  3. 15
      layout/includes/_partials/information_card.pug
  4. 18
      layout/includes/layout.pug
  5. 17
      layout/post.pug
  6. 2
      source/css/_partials/index.styl
  7. 2
      source/css/_partials/post_list/paginator.styl
  8. 28
      source/css/_partials/post_list/post_item.styl
  9. 113
      source/css/_partials/post_page/markdown_content.styl
  10. 29
      source/css/_partials/post_page/post_page.styl
  11. 20
      source/css/common.styl
  12. 34
      source/css/highlight.styl
  13. 185
      source/css/var.styl
  14. BIN
      source/favicon.ico
  15. BIN
      source/favicon.png
  16. 0
      source/js/time.js

@ -35,7 +35,9 @@ social:
Twitter: lensfrex || https://www.twitter.com Twitter: lensfrex || https://www.twitter.com
Bilibili: lensfrex || https://bilibili.com Bilibili: lensfrex || https://bilibili.com
beginTime: "2022·02·23" beginTime:
time: "2022·02·23"
format: "YYYY·MM·DD"
lazyload: lazyload:
enable: true enable: true

@ -21,6 +21,6 @@ include ./button.pug
a(href='/')= config.author a(href='/')= config.author
br br
br br
span.time= theme.beginTime span.time= theme.beginTime.time
span - span -
span.time= date(Date.now(), 'YYYY·MM·DD') span.time= date(Date.now(), theme.beginTime.format)

@ -33,9 +33,18 @@ mixin information_card(...extendData)
+data_row({name: data.name, value: data.value}) +data_row({name: data.name, value: data.value})
+data_row({name: "运行时间", value: "432天", value_id: "run_time"}) +data_row({name: "运行时间", value: "432天", value_id: "run_time"})
script. script
const runTime = document.getElementById("run_time"); - const beginTime = theme.beginTime
runTime.innerHtml = (Date.now() - ${startTime}) / 86400 - const millisecond = moment(beginTime.time, beginTime.format).valueOf()
| {const runTime = parseInt((Date.now() - !{millisecond}) / 86400000);
| document.getElementById("run_time").textContent = runTime + '天'};
+data_row({name: "页面构建时间", value: "0天前", value_id: "last_build_time"})
script
- const buildTime = Date.now()
| {const buildTime = parseInt((Date.now() - !{buildTime}) / 86400000);
| document.getElementById("last_build_time").textContent =
| (buildTime == 0) ? '今天' : buildTime + '天前'};
hr hr
span.no-error-declaration NO ERROR span.no-error-declaration NO ERROR

@ -17,25 +17,25 @@ html(lang=config.language)
//- stylesheets list from _config.yml //- stylesheets list from _config.yml
each url in theme.stylesheets each url in theme.stylesheets
link(rel='stylesheet', href=url) link(rel='stylesheet', href=url)
if is_post() || is_page()
link(rel="stylesheet", href="/css/highlight.css")
body body
#container.container #container.container
header#header.header header#header.header
include ./_partials/header.pug include ./_partials/header.pug
.bottom-declaration
.bottom-declaration .bottom-declaration-line
.bottom-declaration-line .bottom-declaration-dotted
.bottom-declaration-dotted
main#main.main main#main.main
#content.content #content.content
block content block content
footer#footer.footer footer#footer.footer
include ./_partials/footer.pug include ./_partials/footer.pug
.bottom-declaration
.bottom-declaration .bottom-declaration-line
.bottom-declaration-line .bottom-declaration-dotted
.bottom-declaration-dotted
//- 这段script一定要放在body结束前,否则lazyload不生效 //- 这段script一定要放在body结束前,否则lazyload不生效
script(src="/js/lazyload.min.js") script(src="/js/lazyload.min.js")

@ -1,7 +1,16 @@
extends includes/layout.pug extends includes/layout.pug
include includes/_partials/information_card.pug
block content block content
article#post .markdown-container
h1= page.title .content
!= page.content include includes/_partials/left_declaration.pug
#paginator!= paginator()
.article-container
h1= page.title
hr
!= page.content
.side-information
+information_card({name: '全站总字数', value: totalcount(site)})
//- script(src="/js/code.js")

@ -14,7 +14,7 @@
padding: 4px 32px padding: 4px 32px
display: flex display: flex
flex-direction: column flex-direction: column
gap: 32px gap: 16px
width: 100% width: 100%
// overflow-y: scroll // overflow-y: scroll
overflow-x: hidden overflow-x: hidden

@ -19,6 +19,8 @@
color: rgb(74, 71, 62) color: rgb(74, 71, 62)
font-size: 18px font-size: 18px
user-select: none user-select: none
box-sizing: border-box
cursor: default
&::-webkit-input-placeholder &::-webkit-input-placeholder
color: rgb(74, 71, 62); color: rgb(74, 71, 62);
&::-moz-placeholder &::-moz-placeholder

@ -1,3 +1,4 @@
.post-item .post-item
& > * & > *
user-select: none user-select: none
@ -6,8 +7,8 @@
gap: 16px gap: 16px
height: fit-content height: fit-content
transition: all 0.2s linear 0s transition: all 0.2s linear 0s
padding: 12px 12px padding: 20px 20px
margin: 4px 4px margin: 6px 4px
min-height: 144px; min-height: 144px;
&:hover &:hover
background-color: $light background-color: $light
@ -35,7 +36,7 @@
flex-direction: row flex-direction: row
justify-content: space-between justify-content: space-between
gap: 8px gap: 8px
padding: 3px 6px padding: 6px 10px
color: rgb(74, 71, 62) color: rgb(74, 71, 62)
background-color: rgb(180, 175, 154) background-color: rgb(180, 175, 154)
transition: all 0.2s linear 0s transition: all 0.2s linear 0s
@ -58,13 +59,15 @@
background-color: rgb(74, 71, 62) background-color: rgb(74, 71, 62)
transition: all 0.2s linear 0s transition: all 0.2s linear 0s
.post-cover $post-width = 307.2px
width: 256px $post-heigth = 172.8px
height 144px img.post-cover
min-width: 256px width: $post-width
min-height 144px height $post-heigth
max-width: 256px min-width: $post-width
max-height 144px min-height $post-heigth
max-width: $post-width
max-height $post-heigth
object-fit: cover object-fit: cover
transition: all 0.2s linear 0s transition: all 0.2s linear 0s
@ -72,11 +75,10 @@
display: flex display: flex
flex-direction: row flex-direction: row
justify-content: space-between justify-content: space-between
padding: 2px 6px padding: 6px 6px 0 32px
.post-summary .post-summary
max-width: 50% max-width: 61.8%
line-height: 2em line-height: 2em
margin-top: 0.25em
overflow: hidden overflow: hidden
display: -webkit-box display: -webkit-box
-webkit-line-clamp: 4 -webkit-line-clamp: 4

@ -0,0 +1,113 @@
.article-container
word-wrap: break-word
overflow-wrap: break-word
color: #4a473e
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
font-size: 16px
pre
padding: 0 10px;
padding-right: 10px
padding-left: 10px
font-family: 'Consolas', 'Courier New', Courier, monospace
td.gutter
background-color: rgb(177, 171, 143)
color: rgb(251, 244, 214)
text-align: right
user-select: none
td.code
background-color: rgb(243, 240, 227)
width: 100%
table
display: block;
overflow: scroll;
border: none;
border-collapse: collapse
td
padding: 0
border: none
code
font-family: 'Consolas', 'Courier New', Courier, monospace
font-size: 16px
padding: 2px
background: rgb(209, 213, 208)
color: rgb(74, 71, 62)
border-radius: 6px
blockquote
background-color: rgba(189, 203, 215, 0.53)
color: rgb(74, 71, 62)
margin: 0 0 16px 0;
padding: 2px 24px
justify-content: center
display: flex
flex-direction: column
border-left: 4px solid rgb(74, 71, 62)
font-size: 16px
p
margin: 16px 0
code
background: rgba(180, 175, 154, 0.45)
a
text-decoration: none
color: rgb(61, 70, 196)
&:hover
text-decoration: underline
img
display: block
margin: 20px auto 20px
max-width: 100%
p
margin: 0
line-height: 2em
iframe
margin: 0 0 20px
ul
margin: 0
ol, ul
ol, ul
padding-left: 20px
li
margin:8px 0
line-height: 1.5em
p
margin: 0 0 8px
line-height: 1.5em
> :last-child
margin-bottom: 0 !important
ol, ul
p
margin: 0 0 8px
li
&::marker
transition: all 0.2s linear 0s
font-weight: 600
font-size: 1.05em
&:hover
&::marker
color: #27af05
ul > li
list-style-type: circle

@ -0,0 +1,29 @@
// markdown使css
.markdown-container
display: flex
flex-direction: row
justify-content: space-between
gap: 16px
.content
width: 73%;
display: flex;
flex-direction: row;
gap: 12px
.article-container
background-color: rgb(231, 225, 199)
height: fit-content
padding: 4px 64px
display: flex
flex-direction: column
gap: 16px
width: 100%
// overflow-y: scroll
overflow-x: hidden
justify-content: space-between
font-size: 18px
.side-information
width: 24%
position: sticky
top: 16px
align-self: flex-start

@ -18,6 +18,13 @@ body > * ::selection
#container #container
padding: 1.5% 2% 1% 2% padding: 1.5% 2% 1% 2%
min-height: 100%
// position: relative
// footer
// position: absolute
// bottom: 0
// width: 100%
#main #main
margin: 2em 0 margin: 2em 0
@ -43,12 +50,8 @@ span::selection
margin: 0 -2% 0 margin: 0 -2% 0
* *
&::-webkit-scrollbar-button scrollbar-width: thin
border-radius: 10px; scrollbar-color: rgb(74, 71, 62) transparent
border-spacing: 10px;
background-color: rgb(74, 71, 62);
width: 10px;
height: 10px;
&::-webkit-scrollbar-corner &::-webkit-scrollbar-corner
background-color: rgb(197, 194, 165); background-color: rgb(197, 194, 165);
&::-webkit-scrollbar-thumb &::-webkit-scrollbar-thumb
@ -58,6 +61,7 @@ span::selection
width: 10px; width: 10px;
height: 10px; height: 10px;
img img
transition: filter 0.2s linear 0s !important transition: filter 0.2s linear 0s !important
&[data-src]:not(.loaded) &[data-src]:not(.loaded)
@ -73,5 +77,7 @@ img
@import '_partials/header/*' @import '_partials/header/*'
@import '_partials/footer/*' @import '_partials/footer/*'
@import '_partials/post_page/*'
@import '_partials/post_list/*' @import '_partials/post_list/*'
@import '_partials/*' @import '_partials/*'
@import 'var'

@ -0,0 +1,34 @@
.code
.comment, .quote
color:#a0a1a7;
font-style:italic
.doctag, .formula, .keyword
color:#a626a4
.deletion, .name, .section, .selector-tag, .subst
color:#e45649
.literal
color:#0184bb
.addition, .attribute, .meta .string, .regexp, .string
color:#50a14f
.attr, .number, .selector-attr, .selector-class, .selector-pseudo, .template-variable, .type, .variable
color:#986801
.bullet, .link, .meta, .selector-id, .symbol, .title
color:#4078f2
.built_in, .class .title, .title.class_
color:#c18401
.emphasis
font-style:italic
.strong
font-weight:700
.link
text-decoration:underline

@ -0,0 +1,185 @@
// color
$bright-blue = #49B1F5
$strong-cyan = #00c4b6
$light-orange = #FF7242
$light-red = #F47466
$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
$theme-link-color = $themeColorEnable && hexo-config('theme_color.link_color') ? convert(hexo-config('theme_color.link_color')) : $bright-blue
$theme-hr-color = $themeColorEnable && hexo-config('theme_color.hr_color') ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
$code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground') ? convert(hexo-config('theme_color.code_foreground')) : $light-red
$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
// font
$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
$code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
$site-name-font = hexo-config('blog_title_font.font-family') && unquote(hexo-config('blog_title_font.font-family'))
// hr
$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
$hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px
// page beatutify
$beautifyEnable = hexo-config('beautify.enable')
$title-prefix-icon = $beautifyEnable && hexo-config('beautify.title-prefix-icon') ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
$title-prefix-icon-color = $beautifyEnable && hexo-config('beautify.title-prefix-icon-color') ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
// Global Variables
$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : var(--global-font-size)
$font-color = #1F2D3D
$text-line-height = 2
$web-bg = hexo-config('background') && unquote(hexo-config('background'))
$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
// Global color & SVG
$light-blue = $theme-color
$dark-black = #000000
$light-grey = #EEEEEE
$grey = #858585
$dark-grey = #cacaca
$white = #FFFFFF
$whitesmoke = #f5f5f5
$font-black = #4C4948
$card-bg = $white
$text-highlight-color = $font-color
$text-hover = $theme-color
$text-bg-hover = $theme-color
// code
$line-height-code-block = 1.6
$blockquote-color = #6a737d
$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
// page
$body-bg = #fff
$a-link-color = #99a9bf
$sticky-color = $light-orange
$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
// sidebar
$sidebar-background = #f6f8fa
$sidebar-width = 300px
// aside
$toc-link-color = #666261
$toc-mobile-width = calc(100% - 80px)
$toc-mobile-maxWidth = 380px
$toc-active-color = #fff
// Button
$button-color = #fff
$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
$button-bg = $theme-color
$pseudo-hover = $button-hover-color
// scrollbar
$scrollbar-color = $themeColorEnable && hexo-config('theme_color.scrollbar_color') ? convert(hexo-config('theme_color.scrollbar_color')) : $theme-color
// table
$table-thead-bg = #99a9bf
// reward
$reward-pop-up-bg = #f5f5f5
$reward-pop-up-color = #858585
// search
$search-bg = #f6f8fa
$search-input-color = $font-black
$search-color = $theme-color
$search-keyword-highlight = #F47466
$search-result-title = $font-black
// comments
$comments-switch-first-text = $bright-blue
$comments-switch-second-text = $light-orange
$comments-switch-round = #fff
$comments-switch-bg = #f6f8fa
// noticeOutdate
$noticeOutdate-bg = #ffe6e6
$noticeOutdate-color = #ff6666
$noticeOutdate-border = #ff8080
// gallery
$gallery-color = #fff
// tag-hide
$tag-hide-bg = $theme-color
$tag-hide-toggle-bg = #f0f0f0
// preloader
$preloader-bg = #37474f
$preloader-word-color = #fff
// rightside
$rightside-bottom = hexo-config('rightside-bottom') ? convert(hexo-config('rightside-bottom')) : 40px
// fireworks
$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
// Tag Plugins - Note
hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger'
// Default
$note-default-border = #777
$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
$note-default-text = $note-default-border
$note-default-icon = '\f0a9'
$note-modern-default-border = #e1e1e1
$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
$note-modern-default-text = #666
$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
// Primary
$note-primary-border = #6f42c1
$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
$note-primary-text = $note-primary-border
$note-primary-icon = '\f055'
$note-modern-primary-border = #e1c2ff
$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
$note-modern-primary-text = #6f42c1
$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
// Info
$note-info-border = #428bca
$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
$note-info-text = $note-info-border
$note-info-icon = '\f05a'
$note-modern-info-border = #b3e5ef
$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
$note-modern-info-text = #31708f
$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
// Success
$note-success-border = #5cb85c
$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
$note-success-text = $note-success-border
$note-success-icon = '\f058'
$note-modern-success-border = #d0e6be
$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
$note-modern-success-text = #3c763d
$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
// Warning
$note-warning-border = #f0ad4e
$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
$note-warning-text = $note-warning-border
$note-warning-icon = '\f06a'
$note-modern-warning-border = #fae4cd
$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
$note-modern-warning-text = #8a6d3b
$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
// Danger
$note-danger-border = #d9534f
$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
$note-danger-text = $note-danger-border
$note-danger-icon = '\f056'
$note-modern-danger-border = #ebcdd2
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
$note-modern-danger-text = #a94442
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
// Tag Plugins - Button/note
$color-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
$btn-color = #fff
$btn-default-color = #777
$tagsP-blue-color = #428bca
$tagsP-pink-color = #FF69B4
$tagsP-red-color = #FF0000
$tagsP-orange-color = #FF8C00
$tagsP-purple-color = #6f42c1
$tagsP-green-color = #5cb85c
// Tag Plugins - Tab
$tab-border-color = #f0f0f0
$tab-botton-bg = #f0f0f0
$tab-botton-color = $font-color
$tab-button-hover-bg = darken($tab-border-color, 8)
$tab-active-border-color = $theme-color
$tab-button-active-bg = $card-bg
$tab-to-top-color = #99a9bf
// Tag Plugins - timeline
$timeline-default-color = $theme-color
// archor
$archor-button-icon = hexo-config('anchor.button.icon') ? hexo-config('anchor.button.icon') : '\f0c1'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Loading…
Cancel
Save