biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 17:30:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Jerry
2019-06-04 22:37:36 +08:00
Unverified
commit 1357f218e5
102 changed files with 7015 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
source/css/_global/index.styl Normal file
View File

@@ -0,0 +1,342 @@
html
height: 100%
font-size: $rem
body
position: relative
display: flex
flex-direction: column
min-height: 100%
background: #fff
color: $font-black
font-size: $font-size
font-family: $font-family
line-height: $text-line-height
*::-webkit-scrollbar
width: 8px
height: 8px
*::-webkit-scrollbar-thumb
background: $light-blue
*::-webkit-scrollbar-track
background-color: transparent
h1,
h2,
h3,
h4,
h5,
h6
position: relative
margin: 0.2rem 0
color: lighten($font-color, 15%)
font-weight: bold
#content-outer
flex: 1 auto
*
box-sizing: border-box
#content-inner
.img-alt
text-decoration: none
color: $a-link-color
#toggle-sidebar
position: fixed
bottom: $sidebar-icon-top
left: $sidebar-icon-left
z-index: 100
font-size: $sidebar-icon-size
cursor: pointer
transition: all 0.2s
opacity: 0
#go-up
position: fixed
right: $go-up-right
bottom: $go-up-bottom
z-index: 100
font-size: $sidebar-icon-size
opacity: 0
cursor: pointer
transition: all .2s
.fancybox-caption
text-align: center
hr
position: relative
margin: 2rem auto
width: calc(100% - 4px)
border: 2px dashed $pale-blue
background: $white
&:hover
&:before
left: calc(95% - 20px)
&:before
position: absolute
top: -10px
left: 5%
z-index: 1
color: $light-blue
content: "\f0c4"
font: normal normal normal 14px / 1 FontAwesome
font-size: 20px
transition: all 1s ease-in-out
// collapse/expand beautify
details
padding: 0.3rem
border: 2px solid darken($light-grey, 10%)
summary
color: $theme-color
// set <caption> of <figure> to center-align
// use class="not-code" to avoid conflicts because code also use <figure> tag
.not-code
margin: 0.5em
padding: 0.5em
border: thin silver solid
text-align: center
table
overflow: auto
width: 100%
border-spacing: 0
border-collapse: collapse
thead
background: alpha($a-link-color, 10%)
th,
td
padding: 0.3rem 0.6rem
border: 1px solid darken($light-grey, 10%)
vertical-align: top
*::selection
background: $selection
color: $pale-grey
.text-center
text-align: center
.pull-left
float: left
.pull-right
float: right
@media screen and (max-width: $bg)
i#toggle-sidebar,
#sidebar
display: none
body
padding-left: 0 !important
// valine
#vcomment
input
font-size: 0.65rem
button
font-size: .7rem;
padding: .3rem 1rem;
background-color: #49b1f5;
color: #fff;
border-color: #fff;
textarea
font-size: 0.7rem
background: url(/img/comment_bg.png) 100% 100% no-repeat
.info
display: none
.vcomment
margin-top: 20px
.vimg
border: 0
&:hover
-moz-transform: rotate(540deg)
-o-transform: rotate(540deg)
-webkit-transform: rotate(540deg)
transform: rotate(540deg)
.vcount
font-size: 0.775rem
.vnum
font-size: 1.1rem
.vnick
font-size: 100%
.vsys
font-size: 70%
.vtime
font-size: .65rem
.vcontent
font-size: 100%
.vat
font-size: .7125rem;
color: $cyan;
border: 1px solid $cyan;
padding: 0 .8rem;
border-radius: 5px;
#site-title, #site-sub-title,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
font-family: 'Titillium Web',Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
#rightside
right: -38px
z-index: 100
position: fixed
bottom: 50px
padding-bottom: 32px
opacity: 0
transition: all .2s
.translate_chn_to_cht
width: 30px
height: 30px
background-color: #49b1f5
color: #e3e8ee
text-align: center
line-height: 29px
font-size: 16px
display: block
margin-bottom: 2px
cursor: pointer
text-decoration: none
.nightshift
width: 30px
height: 30px
background-color: #49b1f5
color: #e3e8ee
text-align: center
font-size: 17px
display: block
margin-bottom: 2px
cursor: pointer
padding-top: 6px
#to_comment
width: 30px
height: 30px
background-color: #49b1f5
color: #e3e8ee
text-align: center
font-size: 17px
display: block
margin-bottom: 2px
cursor: pointer
padding-top: 6px
a
&:hover
color: white
&:after
color: white
.comment_headling
font-size: 20px
font-weight: 700
margin-bottom: 10px
// bookmark 樣式
.fc-container .fancybox-bg {
background: #eee;
}
.fancybox-is-open.fc-container .fancybox-bg {
opacity: 0.95;
}
.fc-content {
margin: 20px;
max-width: 550px;
padding: 50px;
box-shadow: 10px 10px 60px -25px;
border-radius: 4px;
}
.fc-content h3 {
margin-top: 0;
font-size: 1.6em;
letter-spacing: normal;
}
.fc-content p {
color: #666;
line-height: 1.5;
}
.fc-content p:last-child {
margin-bottom: 0;
}
/* Custom animation */
.fancybox-fx-material.fancybox-slide--previous,
.fancybox-fx-material.fancybox-slide--next {
transform: translateY(-60px) scale(1.1);
opacity: 0;
}
.fancybox-fx-material.fancybox-slide--current {
opacity: 1;
transform: translateY(0) scale(1);
}
.bookmark-ok
background: #FF6666;
border-width: 0;
color: #fff;
text-decoration: none;
padding: 7px 20px;
line-height: 1.5;
border-radius: 20px;
text-transform: uppercase;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 80%;
font-weight: 700;
margin: 5px 5px 5px 0;
display: inline-block;
cursor: pointer;
outline: none;
transition: all .2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.tright
text-align: right

8
source/css/_highlight/diff.styl Normal file
View File

@@ -0,0 +1,8 @@
$highlight_theme = hexo-config('highlight_theme')
if $highlight_theme == 'light'
$highlight-deletion = #fdd
$highlight-addition = #dfd
else
$highlight-deletion = #008000
$highlight-addition = #800000

303
source/css/_highlight/highlight.styl Normal file
View File

@@ -0,0 +1,303 @@
// https://github.com/equinusocio/vsc-material-theme
@require "theme"
@require "diff"
languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "gradle" "groovy" "ejs" "swig"
wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
loopForLanguages()
for lang in languages
.article-container
figure.highlight
&{"." + lang}
table
&:before
content: lang
loopForLanguages()
// Placeholder: $code-block
$code-block
overflow: auto
margin: 1rem 0
padding: 0
padding-top: 1.4rem
background: $highlight-background
color: $highlight-foreground
font-size: $code-font-size
line-height: $line-height-code-block
if wordWrap
counter-reset: line
white-space: pre-wrap
figure.highlight
position: relative
blockquote
margin: 0
padding: 0.1rem 0.8rem
border-left: 0.2rem solid $blockquote-padding-color
color: $blockquote-color
background-color: $blockquote-background-color
.article-container
pre,
code
font-family: $code-font !important
code
padding: 0.1rem 0.2rem
background: $code-background
color: $code-foreground
word-wrap: break-word
font-size: $code-font-size
pre
@extend $code-block
code
padding: 0
background: none
color: $highlight-foreground
text-shadow: none
.highlight
@extend $code-block
position: relative
border-radius: 1px
&:after
position: absolute
top: 0
z-index: 0
min-width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
content: ""
pre
margin: 0
padding: 8px 0
border: none
.line
&::selection
background: $highlight-selection
color: $highlight-foreground
if wordWrap
&:before
display: inline-block
padding: 0 0.3rem 0 0
min-width: 1.6rem
color: $highlight-gutter.color
content: counter(line)
counter-increment: line
text-align: left
table
position: relative
margin: 0
width: auto
border: none
&:before
position: absolute
z-index: 1
display: inline-block
margin-top: -1.4rem
padding: 0 0.7rem
width: 5rem
color: $highlight-foreground
content: "Code"
font-weight: bold
font-size: 0.8rem
line-height: 1.4rem
&:after
position: absolute
top: -1.4rem
z-index: 0
width: 100%
height: 1.4rem
background: darken($highlight-background, 5)
content: ""
td
padding: 0
border: none
figcaption
clearfix()
position: absolute
z-index: 1
margin-bottom: 1em
padding: 0.2em 0 0.2em 0.7rem
width: 100%
height: 1.4em
color: $highlight-foreground
font-size: 1em
line-height: 1em
span
float: left
overflow: hidden
max-width: 100%
text-overflow: ellipsis
white-space: nowrap
a
float: right
padding-right: 10px
color: $highlight-foreground
&:hover
border-bottom-color: $highlight-foreground
&+table
margin-top: 1em
&:before
margin-top: -2.1rem
&:after
top: -2.1rem
.gutter pre
padding-right: 0.5rem
padding-left: 0.5rem
background-color: $highlight-gutter.bg-color
color: $highlight-gutter.color
text-align: right
.code pre
padding-right: 0.5rem
padding-left: 0.5rem
width: 100%
background-color: $highlight-background
.line
height: 1rem
.gutter
user-select: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
.gist table
width: auto
td
border: none
// For diff highlight
pre .deletion
background: $highlight-deletion
pre .addition
background: $highlight-addition
pre .meta
color: $highlight-purple
pre
.comment
color: $highlight-comment
&::selection
background: $highlight-selection
color: $highlight-foreground
.variable,
.attribute,
.regexp,
.ruby .constant,
.xml .tag .title,
.xml .pi,
.xml .doctype,
.html .doctype,
.css .id,
.tag .name,
.css .class,
.css .pseudo
color: $highlight-red
&::selection
background: $highlight-selection
color: $highlight-foreground
.tag
color: $highlight-aqua
&::selection
background: $highlight-selection
color: $highlight-foreground
.number,
.preprocessor,
.literal,
.params,
.constant,
.command
color: $highlight-orange
&::selection
background: $highlight-selection
color: $highlight-foreground
.built_in
color: $highlight-yellow
&::selection
background: $highlight-selection
color: $highlight-foreground
.ruby .class .title,
.css .rules .attribute,
.string,
.value,
.inheritance,
.header,
.ruby .symbol,
.xml .cdata,
.special,
.number,
.formula
color: $highlight-green
&::selection
background: $highlight-selection
color: $highlight-foreground
.keyword,
.title,
.css .hexcolor
color: $highlight-aqua
&::selection
background: $highlight-selection
color: $highlight-foreground
.function,
.python .decorator,
.python .title,
.ruby .function .title,
.ruby .title .keyword,
.perl .sub,
.javascript .title,
.coffeescript .title
color: $highlight-blue
&::selection
background: $highlight-selection
color: $highlight-foreground
.tag .attr,
.javascript .function
color: $highlight-purple
&::selection
background: $highlight-selection
color: $highlight-foreground

91
source/css/_highlight/theme.styl Normal file
View File

@@ -0,0 +1,91 @@
$highlight_theme = hexo-config("highlight_theme")
if $highlight_theme == "default"
$highlight-background = #263238
$highlight-current-line = #efefef
$highlight-selection = #80CBC420
$highlight-foreground = #EEFFFF
$highlight-comment = #546E7A
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-gutter = {
color: #37474F,
bg-color: $highlight-background
}
if $highlight_theme == "darker"
$highlight-background = #212121
$highlight-current-line = #282a2e
$highlight-selection = #61616150
$highlight-foreground = #EEFFFF
$highlight-comment = #4A4A4A
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-gutter = {
color: #424242,
bg-color: $highlight-background
}
if $highlight_theme == "pale night"
$highlight-background = #292D3E
$highlight-current-line = #393939
$highlight-selection = #717CB450
$highlight-foreground = #A6ACCD
$highlight-comment = #676E95
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-gutter = {
color: #3A3F58,
bg-color: $highlight-background
}
if $highlight_theme == "ocean"
$highlight-background = #0F111A
$highlight-current-line = #000000
$highlight-selection = #717CB450
$highlight-foreground = #8F93A2
$highlight-comment = #464B5D
$highlight-red = #FF5370
$highlight-orange = #F78C6C
$highlight-yellow = #FFCB6B
$highlight-green = #C3E88D
$highlight-aqua = #89DDFF
$highlight-blue = #82AAFF
$highlight-purple = #C792EA
$highlight-gutter = {
color: #3B3F5180,
bg-color: $highlight-background
}
if $highlight_theme == "light"
$highlight-background = #F6F8FA
$highlight-current-line = #00346e
$highlight-selection = #80CBC440
$highlight-foreground = #90A4AE
$highlight-comment = #90A4AE90
$highlight-red = #E53935
$highlight-orange = #F76D47
$highlight-yellow = #FFB62C
$highlight-green = #91B859
$highlight-aqua = #39ADB5
$highlight-blue = #6182B8
$highlight-purple = #7C4DFF
$highlight-gutter = {
color: #CFD8DC,
bg-color: $highlight-background
}

292
source/css/_layout/aside.styl Normal file
View File

@@ -0,0 +1,292 @@
#aside_content
width: 25%
.card_widget
-webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
border-radius: 8px
-webkit-transition: all .3s
-moz-transition: all .3s
-o-transition: all .3s
-ms-transition: all .3s
transition: all .3s
background: #fff
margin-top: 20px
margin-left: 15px
overflow: hidden
&:hover
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
.card-author
img
height: 128px
width: 128px
display: inline-block
vertical-align: top
border-radius: 70px
transition: all .3s
&:hover
-moz-transform: rotate(540deg)
-o-transform: rotate(540deg)
-webkit-transform: rotate(540deg)
transform: rotate(540deg)
.author-info
&__name
font-size: 1.1rem
display: block
margin: -0.1rem auto
font-weight: 500
&__description
display: block
margin: -0.1rem auto
.data_link
a
text-decoration: none
.length_num
font-size: 1rem
color: #000
.headline
display: block
font-size: 0.7rem
letter-spacing: 1px
margin-bottom: -21px
text-transform: uppercase
color:#4c4948
#aside-social-icons
margin: 0.5rem auto -0.7rem
width: 15rem
text-align: center
.social-icon
margin: 0 0.5rem
color: #4c4948
/* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
font-size: 1rem
cursor: pointer
i
transition: all 0.3s
&:hover
-moz-transform: rotate(540deg)
-o-transform: rotate(540deg)
-webkit-transform: rotate(540deg)
transform: rotate(540deg)
a#bookmark-it
display: inline-block
margin-top: .2rem
padding: 0 1rem
height: 1.6rem
background: #49b1f5
color: #fff
text-decoration: none
line-height: 1.6rem
position: relative
text-transform: uppercase
z-index: 1
.toggle_change--primary,.bookmark--primary
color: $cyan
.toggle_change--animated,.bookmark--animated
transition-property: color
transition-duration: 1s
&:before {
content: ""
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: $cyan
transform: scaleX(0)
transform-origin: 0 50%
transition-property: transform
transition-duration: 0.5s
transition-timing-function: ease-out
z-index: -1
}
&:hover {
color: white
&:before {
transform: scaleX(1)
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
}
}
.card-content
padding: 1rem 1.2rem
.post_data
display: flex
.data-item
flex-grow: 1
align-items: center
flex-basis: auto
justify-content: center
.item_headline
font-size: 0.8rem
span
margin-left: 10px
.card-tag-cloud a
text-decoration: none
position: relative
padding-bottom: 0.3rem
word-break: keep-all
&::after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ""
transition: all 0.3s ease-in-out
&:hover
color: $light-blue !important
&::after
width: 100%
.aside_recent_item
margin: 10px 0 -15px 0
.aside_recent_post
a
text-decoration: none
color: #4c4948
.aside_recent_post
margin-bottom: 10px
width: 100%
.aside_post_cover
height: 70px
width: 70px
float: left
.aside_post_bg
object-fit: cover
width: 100%
height: 100%
max-width: 100%
&:hover
box-shadow: none
#aside_title
padding-top: 4px
.aside_post_meta
font-size: 0.6rem
padding-left: 5px
.aside_post_title
line-height: 1rem
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
height: 41px
padding-left: 5px
&:hover
color: $light-blue !important
.aside_category_item,.archive-list
list-style: none
margin-bottom: -3px
margin-block-start: 0.2rem
.aside_category_list,.archive-list-item
margin-left: -40px
padding: 0.2rem 1rem
&:hover
background-color: $light-blue
color: #363636
a
text-decoration: none
color: #4c4948
.aside_category_list_length,.archive-list-count
float: right
.card-archives
margin-bottom: 20px
.card-announcement-animation
animation: announ_animation 1.5s infinite
.card-webinfo
.webinfo
padding: 0.2rem 1rem
.webinfo_item
display: block
padding: 4px 0 0
.webinfo_article_name,
.webinfo_runtime_name,
.webinfo_site_uv_name,
.webinfo_site_name
display: inline-block
.webinfo_article_count,
.webinfo_runtime_count,
.webinfo_site_uv_count,
.webinfo_site_pv_count
float: right
display: inline-block
@keyframes announ_animation{
0%,to{
color: #4c4948
}
50%{
color: #FF0000
}
}
@media screen and (max-width: 900px)
.layout_page
flex-direction: column
#recent-posts,#aside_content
width: 100% !important
.card_widget
margin-left: 0 !important

64
source/css/_layout/category.styl Normal file
View File

@@ -0,0 +1,64 @@
.category-content
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
list-style: none
counter-reset: li
p
margin: 0
ol,
ul
padding-left: 0.5rem
li
position: relative
margin: 0.3rem 0
// padding-left: 0.3rem
padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
&:hover
&:before
transform: rotate(360deg)
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
ol
li
&:before
margin-top: 0.2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
line-height: h
ul
li
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
top: 10px
margin-left: 0.45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h

2
source/css/_layout/comments.styl Normal file
View File

@@ -0,0 +1,2 @@
#disqus_thread
margin-top: 1rem

34
source/css/_layout/footer.styl Normal file
View File

@@ -0,0 +1,34 @@
footer
$bg-svg += ""
margin-top: 1rem
background: $light-blue
// background-image: url($bg-svg)
background-attachment: local
&.footer-bg
background-position: bottom
background-size: cover
#footer
padding: 1.2rem 1rem 1rem
color: $light-grey
text-align: center
a
color: $light-grey
text-decoration: none
cursor: pointer
&:hover
color: $white
.footer-separator
margin: 0 0.2rem
#busuanzi
&_value
&_site_uv,
&_site_pv,
&_page_pv
margin-left: 0.2rem

236
source/css/_layout/head.styl Normal file
View File

@@ -0,0 +1,236 @@
#nav
position: relative
margin-bottom: 1rem
background-color: $light-blue
background-position: center
background-size: cover
&.full_page
background-attachment: local
height: 100vh
&.bg_local
background-attachment: local
&.no-bg
$bg-svg += ""
background-image: url($bg-svg) !important
background-size: initial
#site-social-icons
margin: 0 auto
width: 15rem
text-align: center
display: none
.social-icon
margin: 0 0.5rem
color: $light-grey
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-size: .9rem
cursor: pointer
&:hover
color: $white
#site-info
position: absolute
width: 100%
top: 43%
#site-title,
#site-sub-title
color: $light-grey
text-align: center
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
line-height: 1.5
#site-title
font-weight: bold
font-size: 1.3rem
#site-sub-title
font-size: 0.8rem
.scroll-down
position: absolute
bottom: 0
width: 100%
cursor: pointer
height: 42px
font-size: 30px
text-align: center
#page-header
position: absolute
top: 0
z-index: 99
padding: 10px 36px
width: 100%
border: none
font-size: 18px
transition: all 0.2s ease-in-out
.toggle-menu
display: none
padding-top: 0.6rem
color: $light-grey
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
color: $white
.menu-icon-first,
.menu-icon-second,
.menu-icon-third
width: 18px
height: 3px
background-color: #eee
margin: 2px 0
transition: 0.4s
&.close
/* 旋转第一条横线 */
.menu-icon-first
-webkit-transform: rotate(45deg) translate(4px, 3px)
transform: rotate(45deg) translate(4px, 3px)
/* 隐藏第二条横线 */
.menu-icon-second
opacity: 0
/* 旋转第三条横线 */
.menu-icon-third
-webkit-transform: rotate(-45deg) translate(4px, -4px)
transform: rotate(-45deg) translate(4px, -4px)
a
color: $light-grey
text-decoration: none
&:hover
color: $white
.site-page
position: relative
margin-left: 0.6rem
padding-bottom: 0.3rem
text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
font-size: 0.7rem
cursor: pointer
&::after
position: absolute
bottom: 0
left: 0
z-index: -1
width: 0
height: 3px
background-color: lighten($theme-color, 30%)
content: ""
transition: all 0.3s ease-in-out
&:hover
&::after
width: 100%
&.fixed
position: fixed
top: -60px
z-index: 101
background: alpha($white, 0.8)
box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
&.open-sidebar
.site-page
display: none
opacity: 0
a,
#site-name
color: $light-black
text-shadow: none
.menu-icon-first,
.menu-icon-second,
.menu-icon-third
background-color: $light-black
text-shadow: none
&a,#site-name
&:hover
color: $light-blue
&.visible
transform: translate3d(0, 100%, 0)
#site-name
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-weight: bold
cursor: pointer
@media screen and (min-width: $sm)
#site-title
font-size: 2rem
#site-sub-title
font-size: 1.2rem
@media screen and (max-width: $sm)
#page-header
padding: 10px 0.8rem
.toggle-menu
display: block
.menus
position: absolute
top: 3rem
right: 0.8rem
display: none
width: 8rem
background: alpha($white, 0.9)
cursor: pointer
box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
a
display: block !important
opacity: 1 !important
margin-left: 0
padding-top: 0.3rem
padding-bottom: 0.3rem
padding-left: 0.6rem
color: $font-black
text-shadow: none
font-size: 0.8rem
z-index: 0
&:hover
color: $light-blue
.search
right: 0.5rem
span
display none
&.fixed.open-sidebar
.search
display: inline-block;
opacity: 1;
#page-header .site-page
margin-left: 1rem

319
source/css/_layout/page.styl Normal file
View File

@@ -0,0 +1,319 @@
galleryItemStyle(w, h)
.gallery
&-item
width: w
height: unit(h, "rem")
&__title
transform: translate3d(0, unit(h, "rem"), 0)
&:hover
.gallery-item__title
transform: translate3d(0, unit(h - 1.5, "rem"), 0)
.recent-post-item
.content
margin-top: 0.5rem
p
word-break: break-word
ol,
ul
margin-top: 0.4rem
padding: 0 0 0 0.8rem
list-style: none
counter-reset: li
p
margin: 0
ol,
ul
padding-left: 0.5rem
li
position: relative
margin: 0.2rem 0
padding: 0.1rem 0.5rem 0.1rem 1.5rem
&:hover
&:before
transform: rotate(360deg)
&:before
position: absolute
top: 0
left: 0
background: $light-blue
color: $white
cursor: pointer
transition: all 0.3s ease-out
ol
li
&:before
margin-top: 0.2rem
width: w = 1.2rem
height: h = w
border-radius: 0.5 * w
content: counter(li)
counter-increment: li
text-align: center
font-size: 0.6rem
line-height: h
ul
li
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
top: 10px
margin-left: 0.45rem
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
.article-type
margin-left: 0.3rem
color: $grey
.article-meta
color: $grey
.sticky
color: $theme-button-hover-color
i
margin: 0 0.2rem 0 0.3rem
&__separator
margin-left: 0.3rem
.fa-angle-right,
&__link
margin: 0 0 0 0.3rem
time
color: $grey
.more_setting
display: none
.more
display: inline-block
padding: 0 1rem
height: h = 1.6rem
// background: $light-blue
// color: $white
text-align: center
text-decoration: none
line-height: h
cursor: pointer
// transition: all 0.2s ease-in-out
// &:hover
// background: $ruby
.article-title
margin-bottom: 0.3rem
color: $black
text-decoration: none
font-size: 1.2rem
cursor: pointer
transition: all 0.2s ease-in-out
line-height: 1.4
text-overflow: ellipsis
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 2
overflow: hidden
word-wrap: break-word
&:hover
// border-bottom: 1px solid $light-blue
color: $light-blue !important
.tag-cloud
padding: 1.5rem 1rem 2rem
text-align: center
a
display: inline-block
margin: 0 0.4rem
text-decoration: none
cursor: pointer
&:hover
color: $ruby !important
&__title
font-size: 1.8rem
#tag,
#category,
#archive
padding: 3rem 3rem 3rem
.article-sort
padding-left: 1rem
border-left: 2px solid $pale-blue
&-title
position: relative
padding-bottom: 1.2rem
padding-left: 1rem
font-size: 1.2rem
line-height: 1
&:hover
&:before
border-color: $ruby
&:before
position: absolute
top: 0.25rem
left: calc(-0.5rem + 1px)
z-index: 1
width: w = 0.5rem
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
transition: all 0.2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: 0.1rem
height: 1.3rem
background: $pale-blue
content: ""
&-item
position: relative
margin-bottom: 1rem
transition: all 0.2s ease-in-out
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
position: absolute
top: 0.48rem
left: calc(-1rem - 7px)
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
transition: all 0.2s ease-in-out
&.year
font-size: 1rem
&:hover
&:before
border-color: $light-blue
&:before
top: 0.7rem
border-color: $ruby
&__time
position: absolute
top: 0.1rem
color: $a-link-color
&__title
display: block
margin-left: 5rem
color: $font-black
text-decoration: none
font-size: 0.8rem
cursor: pointer
.category-lists
padding: 1rem 0 1.5rem
.category__title
text-align: center
font-size: 1.8rem
.category-list
a
color: $font-black
text-decoration: none
cursor: pointer
.category-list-count
margin-left: 0.4rem
color: $a-link-color
&:before
content: "("
&:after
content: ")"
.gallery
&-item
position: relative
display: inline-block
overflow: hidden
margin: 0.4rem
width: 6rem
height: 6rem
background-position: 50% 50%
background-size: cover
background-repeat: no-repeat
cursor: pointer
transition: all 0.2s ease-in-out
&__title
position: absolute
overflow: hidden
padding: 0 0.4rem
width: 100%
height: 1.5rem
background: rgba(0, 0, 0, 0.5)
color: $pale-blue
text-align: center
text-overflow: ellipsis
white-space: nowrap
line-height: 1.5rem
transition: 0.2s ease-in-out
transform: translate3d(0, 6rem, 0)
&:hover
.gallery-item__title
transform: translate3d(0, 4.5rem, 0)
@media screen and (max-width: $sm)
.recent-post-item
.article-title
font-size: 1rem
.article-meta.tags
display: none
galleryItemStyle(calc(50% - 22px), 6)
@media screen and (min-width: $md)
galleryItemStyle(8rem, 8)

114
source/css/_layout/pagination.styl Normal file
View File

@@ -0,0 +1,114 @@
#pagination
overflow: hidden
margin-top: 1rem
width: 100%
.pagination
text-align: center
.space
color: $a-link-color
.page-number
display: inline-block
margin: 0 0.2rem
min-width: w = 1.2rem
height: w
text-align: center
line-height: w
cursor: pointer
&.current
background: $cyan
color: $white
cursor: default
img.prev_cover, img.next_cover
position: absolute
padding: 0
z-index: 50
top: 0
left: 0
width: 100%
height: 100%
opacity: .4
background-size: cover
transition: all 0.6s;
object-fit: cover
pointer-events: none
.prev_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
bottom: 50px
.next_info
position: absolute
z-index: 100
font-weight: 400
width: 70%
color: #fff
overflow: hidden
white-space: nowrap
-o-text-overflow: ellipsis
text-overflow: ellipsis
display: block
right: 40px
bottom: 50px
text-align: right
.pull-full
width: 100% !important
.prev-post .label
position: absolute
top: 50px
z-index: 100
font-size: 13px
display: block
text-transform: uppercase
color: rgba(255,255,255,.7)
.next-post .label
position: absolute
top: 50px
right: 40px
z-index: 100
display: block
text-transform: uppercase
color: rgba(255,255,255,.7)
.prev-post, .next-post
width: 50%
float: left
a
width: 100%
height: 150px
padding: 55px 40px
text-align: left
position: relative
display: block
float: left
overflow: hidden
&:hover
img.prev_cover, img.next_cover
opacity: .8
transform:scale(1.1)
@media screen and (max-width:768px)
.prev-post, .next-post
width: 100% !important
.pagination_post
margin: 2rem 0 !important
background: #000

334
source/css/_layout/post.styl Normal file
View File

@@ -0,0 +1,334 @@
#post-title
font-size: 1.4rem
&.plain
margin-bottom: 0.3rem
border-bottom: 1px solid $light-grey
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
border-bottom: 1px solid $light-blue
color: $light-blue
#post
overflow: hidden
&-meta
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
#post-meta
color: $grey
a
text-decoration: none
i.fa.fa-comment-o
margin-right: 0.2rem
#top-container
position: relative
margin-bottom: 1rem
background-color: $light-blue
background-attachment: local
background-position: center
background-size: cover
height: 19rem
&:before
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #394245;
background-image: linear-gradient(234deg, #394245 0%, #000 100%);
&.no-bg
$bg-svg += ""
background-color: $light-blue
background-image: url($bg-svg) !important
background-size: auto
&.plain
margin-bottom: 1rem
height: 56px
a
color: $light-grey
text-decoration: none
transition: all 0.3s ease-out
&:hover
color: $white
#top-img
padding: 0
border: none
#site-name
font-weight: bold
cursor: pointer
#post-info
width: 100%
color: $light-grey
text-align: left
padding-left: 8%
position: absolute
bottom: 1.5rem
#post-title
text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
font-size: 1.5rem
i.fa.fa-angle-right
margin: 0 0.3rem 0 0.2rem
.post-meta
&__separator
margin: 0 0.3rem
&__icon
margin-right: 0.2rem
&__tags
display: inline-block
width: fit-content
margin: 0.4rem 0.4rem 0.4rem 0
padding: 0rem 0.6rem
border: 1px solid $light-blue
border-radius: 0.6rem
background: $white
color: $light-blue
text-decoration: none
font-size: 12px
cursor: pointer
transition: all 0.2s ease-in-out
&:hover
background: $light-blue
color: $white
.layout
margin: 0 auto
max-width: 1000px
#post-content
margin-bottom: 1rem
ol,
ul
margin-top: 0.4rem
counter-reset: li
p
margin: 0
ol,
ul
padding-left: 0.5rem
li
position: relative
margin: 0.3rem 0
padding-left: 0.3rem
a
color: $a-link-color
transition: all 0.2s
&:hover
color: $light-blue
text-decoration: none
&#site-name
text-decoration: none
a.fancybox
outline: none
&:focus
outline: none
display: inline-block
width: 100%
text-align: center
text-decoration: none
img
padding: $img-border-padding
max-width: 100%
transition: all 0.2s
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
.code-area-wrap
position: relative
.fa-clipboard
position: absolute
top: 0.4rem
right: 10px
z-index: 1
color: $highlight-aqua
cursor: pointer
transition: color 0.2s
&:hover
color: darken($highlight-aqua, 20%)
.copy-notice
position: absolute
top: 0
right: 0
z-index: 1
background: darken($highlight-background, 5)
color: $highlight-aqua
opacity: 0
.post-copyright
position: relative
margin-bottom: 0.4rem
padding: 0.5rem 0.8rem
border: 1px solid $light-grey
transition: box-shadow 0.3s ease-in-out
&:before
position: absolute
top: t = 0.5rem
right: t
width: w = 0.8rem
height: w
border-radius: w
background: $light-blue
content: ""
&:after
position: absolute
top: t = 0.7rem
right: t
width: w = 0.4rem
height: w
border-radius: w
background: $white
content: ""
&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
&-meta
color: $light-blue
font-weight: bold
&-info
a
word-break: break-word
.post-adv
margin: 1rem 0
@media screen and (max-width: $sm)
.layout
margin: 0 30px
width: auto
#top-container
// background-attachment: local
#post-title
font-size: 1rem
#post-title
font-size: 1.1rem
@media screen and (min-width: $md)
.layout
width: $content-large-width
.katex-wrap
overflow: auto
if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
&::-webkit-scrollbar
display: none
// 文章字體
#post-content p {
font-size: 1.1em
}
#post-content ol, #post-content ul {
font-size: 1em
}
@media screen and (max-width: 900px)
.layout
margin: 0 15px
width: auto
.layout_post
padding: 50px
-webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
-webkit-transition: all 0.3s
-moz-transition: all 0.3s
-o-transition: all 0.3s
-ms-transition: all 0.3s
transition: all 0.3s
background: #fff
margin-top: 40px
margin-bottom: 40px
&:hover
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
img
margin:0 auto
display:block
.tag_share
display: block
.post-meta__tag-list
display: inline-block
.post_share
width: fit-content;
display: inline-block;
float: right;
margin: 0.4rem 0
.social-share
font-size: 12px
.social-share .social-share-icon
width: 26px;
height: 26px;
font-size: 15px;
line-height: 25px;
.social-share a
margin: 0 4px;
#post
a
text-decoration: none
color: $light-blue

80
source/css/_layout/relatedposts.styl Normal file
View File

@@ -0,0 +1,80 @@
.relatedPosts
margin: 0 auto
padding: 0
margin-top: 1rem
width: 100%
.relatedPosts_item
width: calc(100%/3 - 10px)
height: 200px
overflow: hidden
float: left
position: relative
margin: 5px
background: #000
&:hover
.relatedPosts_cover
opacity: .8
transform:scale(1.1)
.relatedPosts_cover
border: 0
-webkit-transition: all 0.6s
-moz-transition: all 0.6s
-o-transition: all 0.6s
-ms-transition: all 0.6s
transition: all 0.6s
display: block
width: 100%
height: 100%
padding: 0
opacity: 0.4
margin: 0
object-fit: cover
.relatedPosts_title
color: #fff
position: absolute
left: 0
right: 0
top: 45%
height: 60px
padding: 0 30px
display: -webkit-box
-webkit-line-clamp: 2
-webkit-box-orient: vertical
overflow: hidden
max-width: 100%
width: 100%
margin: 0 auto
text-align: center
.relatedPosts_headling
font-size: 20px
font-weight: 700
margin-bottom: 5px
.clear_both
clear: both
@media screen and (max-width:768px)
.relatedPosts_item
width: calc(100%/2 - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%
@media screen and (max-width:480px)
.relatedPosts_item
width: calc(100% - 4px)
height: 150px
margin: 2px
.relatedPosts_title
top: 40%

71
source/css/_layout/reward.styl Normal file
View File

@@ -0,0 +1,71 @@
.post-reward
position: relative
width: 100%
margin: 75px auto 0
text-align: center
display: block
.reward-buttom
text-align: center
display: inline-block
cursor: pointer
color: #fff
line-height: 36px
background: #49b1f5
width: 80px
&:hover
background: #00c4b6
.reward-main
display: block
.reward-main
position: absolute
bottom: 40px
margin: 0
padding: 0 0 15px
width: 100%
left: 0
transition: all 0.6s
display: none
.reward-all
margin: 0 auto
padding: 20px 10px 8px
background: #f5f5f5
display: inline-block
border-radius: 4px
cursor: auto
&:after
content: ""
width: 0
height: 0
border-left: 13px solid transparent
border-right: 13px solid transparent
border-top: 13px solid #f5f5f5
position: absolute
bottom: 2px
left: 0
right: 0
margin: 0 auto
.reward-item
list-style-type: none
padding: 0 8px
display: inline-block
img
width: 130px
max-width: 130px
border-radius: 3px
position: relative
.post-qr-code__desc
text-align: center
margin: -10px 0
color: #858585

60
source/css/_layout/sidebar.styl Normal file
View File

@@ -0,0 +1,60 @@
#sidebar
position: fixed
top: 0
left: -300px
z-index: 10
overflow-y: auto
padding: 1rem 0 2rem 0.5rem
width: $sidebar-width
height: 100%
background: $sidebar-background
box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
opacity: 0.9
transition: all 0.2s
.sidebar-toc
ol,
li
list-style: none
ol
margin-top: 0.2rem
padding-left: 0.4rem
&__title
padding-right: 0.5rem
text-align: center
font-size: unit(0.9 * $rem, "px")
.toc-link
display: block
padding-left: 0.2rem
border-right: 3px solid transparent
text-decoration: none
transition: all 0.2s ease-in-out
&.active
border-right-color: darken($cyan, 20%)
background: $cyan
color: $white
&__progress
position: relative
margin-top: -0.3rem
padding-left: 0.6rem
color: $cyan
.progress-notice
margin-right: 0.4rem
.progress-num
display: inline-block
min-width: 0.9rem
&-bar
width: 0
height: 1px
background: $cyan

72
source/css/_search/algolia.styl Normal file
View File

@@ -0,0 +1,72 @@
#algolia-search
.ais-search-box
margin: 0 auto
max-width: 100%
width: 100%
input
padding: 0.25rem 0.7rem
outline: none
border: 2px solid $light-blue
border-radius: 2rem
font-size: 14px
.ais-hits--item.algolia-hit-item
position: relative
padding-left: 1.5rem
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
position: absolute
top: 0.4rem
left: 0
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
transition: all 0.2s ease-in-out
a
display: block
color: $font-black
text-decoration: none
font-size: 14px
cursor: pointer
&:hover
color: $light-blue
.ais-pagination.pagination
margin: 0.8rem 0 0 0
padding: 0
text-align: center
.ais-pagination--item
margin: 0 0.2rem
padding: 0
a
display: inline-block
min-width: 1.2rem
height: 1.2rem
text-align: center
line-height: 1.2rem
.ais-pagination--item.current
a
background: $cyan
color: $white
text-decoration: none
cursor: default
.algolia-logo
padding-top: 2px
width: 4rem
height: 1.5rem

46
source/css/_search/index.styl Normal file
View File

@@ -0,0 +1,46 @@
.search-dialog
position: fixed
top: 5rem
left: 50%
z-index: 1001
display: none
margin-left: -15rem
padding: 1rem
width: 30rem
background: $white
hr
margin: 1rem auto
span.search-close-button
position: absolute
top: 0.5rem
right: 0.5rem
color: $grey
line-height: 1
cursor: pointer
transition: color 0.2s ease-in-out
&:hover
color: $light-blue
&__title
padding: 0 0 0.7rem
color: $light-blue
font-size: 1rem
line-height: 1
.search-mask
position: fixed
top: 0
right: 0
bottom: 0
left: 0
z-index: 1000
display: none
background: rgba(0, 0, 0, 0.6)
@media screen and (max-width: $sm)
.search-dialog
margin-left: -45%
width: 90%

52
source/css/_search/local-search.styl Normal file
View File

@@ -0,0 +1,52 @@
#local-search
.local-search-box
margin: 0 auto
max-width: 100%
width: 100%
input
padding: 0.25rem 0.7rem
width: 100%
outline: none
border: 2px solid $light-blue
border-radius: 2rem
font-size: 14px
.local-search__hit-item
position: relative
padding-left: 1.5rem
&:hover
&:before
border-color: $ruby
&:before
$w = 0.3rem
position: absolute
top: 0.4rem
left: 0
width: w = $w
height: h = w
border: 0.5 * w solid $light-blue
border-radius: w
background: $white
content: ""
line-height: h
transition: all 0.2s ease-in-out
a
display: block
color: $font-black
text-decoration: none
font-size: 14px
cursor: pointer
&:hover
color: $light-blue
.local-search-stats__hr
display: none !important
.search-result-list
overflow-y: auto
max-height: 10.5rem

1
source/css/_third-party/jquery.fancybox.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
source/css/_third-party/normalize.min.css vendored Normal file
View File

@@ -0,0 +1 @@
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*# sourceMappingURL=normalize.min.css.map */

21
source/css/index.styl Normal file
View File

@@ -0,0 +1,21 @@
@import "nib"
@import "_third-party/normalize.min.css"
// project
@import "var"
@import "_global"
@import "_highlight/highlight"
@import "_layout/*"
@import "other"
if hexo-config("nightshift.enable")
@import "nightshift"
// search
if hexo-config("algolia_search.enable")
@import "_search/index"
@import "_search/algolia"
if hexo-config("local_search") && hexo-config("local_search.enable")
@import "_search/index"
@import "_search/local-search"

229
source/css/nightshift.styl Normal file
View File

@@ -0,0 +1,229 @@
.night-mode
footer
background: #2d3035
#sidebar
background: #2d3035 !important
box-shadow: -0.25rem 0 0.25rem #2d3035 !important
if hexo-config("local_search") && hexo-config("local_search.enable")
#local-search
background: #2d3035
.local-search-box--input
background: #2d3035
color: #99a9bf
.search-result-title
color: #99a9bf
if hexo-config("algolia_search.enable")
#algolia-search
background: #2d3035
.ais-search-box--input
background: #2d3035
color: #99a9bf
#algolia-search-results
.algolia-hit-item-link
color: #99a9bf !important
h1, h2, h3, h4, h5, h6
color: #99a9bf
.article-container code
background: #616a6b
color: #99a9bf
// 評論
#vcomment
*
color: #99a9bf !important
.vsys
background: rgb(97, 106, 107) !important
.vbtn
background: rgb(45, 48, 53) !important
color: #99a9bf !important
.recent-post-item .article-title
color: #99a9bf
#page-header
&.fixed
background: #2d3035
box-shadow: 0 5px 6px -5px rgba(133,133,133,0)
a,
.toggle-menu,
#site-name
color: #99a9bf
blockquote
border-left: 0.2rem solid #7A5353
color: #99a9bf
hr
background: 0
border: 2px dashed #616A6B
&:before
color: #99a9bf
.post-meta__tags
background: 0
border: 1px solid #99a9bf
color: #99a9bf
.post-copyright
border: 1px solid #99a9bf
*
color: #99a9bf
.article-container .highlight
background-color: #1B2631
.code pre
background-color: #1B2631
.gutter pre
background: #1C2833
&:after
background: rgb(27, 38, 59)
table
&:after,.copy-notice
background: rgb(27, 38, 59)
.copy-notice
background: rgb(27, 38, 59)
.post-cards,.md-links-item
// background: #2d3035
a
color: #99a9bf
.aplayer
color: #000000
filter: brightness(0.6)
.article-sort-item__title
color: #99a9bf
.category-list
a
color: #99a9bf
.translate_chn_to_cht,
.nightshift,
#to_comment
background-color: #2d3035 !important
img
filter: brightness(0.6)
.layout_post
background:#2d3035
canvas
display: none !important
#aside_content
.card_widget
background:#2d3035 !important
.headline,
.length_num,
.aside_post_title,
.aside_category_list_link,
.archive-list-link,
.social-icon
color: #99a9bf !important
#bookmark-it
background: #616a6b !important
#archive,
.tag-cloud,
#tag,
.category-content,
#category,
#page,
.flink
background:#2d3035
#nav,
#top-container
&::before
content: ""
position: absolute
top: 0
bottom: 0
left: 0
right: 0
background-color: rgba(0,0,0,.6)
.layout_page
.post-meta__date,
.article-meta__separator,
.article-meta__categories,
i
color: #99a9bf
#site-info .blogtitle,
span.subtitle,
#post-info .posttitle,
#post-info #post-meta,
#site-social-icons i,
#top-container a
color: rgba(238,238,238,.6)
//打賞 分享
.post-reward
.reward-buttom
background-color: #616a6b
.post_share
filter: brightness(0.6)
img
filter: brightness(1)
@media screen and (max-width: 768px)
.night-mode
color: #99a9bf
background-color: rgb(45, 48, 53)
#page-header
.menus
a
color: #99a9bf
background: #2d3035
&.fixed
.menu-icon-first,
.menu-icon-second,
.menu-icon-third
background-color: #99a9bf;
@media screen and (min-width: 768px)
.night-mode
color: #99a9bf
background-color: #2d3032
.recent-post-item
background: #2d3035 !important

355
source/css/other.styl Normal file
View File

@@ -0,0 +1,355 @@
#recent-posts
.recent-post-item
padding: 0
box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
border-radius: 8px
-webkit-transition: all 0.3s
-moz-transition: all 0.3s
-o-transition: all 0.3s
-ms-transition: all 0.3s
transition: all 0.3s
background: #fff
margin-top: 20px
height: 280px
&:hover
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
img.post_bg
transform:scale(1.1)
.is_left
float: left
border-top-left-radius: 8px
border-bottom-left-radius: 8px
.is_right
float: right
border-top-right-radius: 8px
border-bottom-right-radius: 8px
.post_cover
width: 45%
height: 280px
overflow: hidden
img.post_bg
border: 0
transition: all .6s
display: block
width: 100%
height: 100%
padding: 0
margin: 0
object-fit: cover
&:hover
transform:scale(1.1)
#pagination
margin-top: 2rem
.recent-post-info
padding: 50px 40px
display: inline-block
width: 55%
overflow hidden
a.article-meta__categories
text-decoration: none
color: #858585
&:hover
color: #49b1f5 !important
.content
display: -webkit-box
-webkit-line-clamp: 3
-webkit-box-orient: vertical
overflow: hidden
height: 90px
.more {
position: relative
letter-spacing: 1.2px
text-transform: uppercase
overflow: hidden
z-index: 1
&:focus {
outline: none
}
}
.more--primary {
color: lightslategray
}
.more--animated {
transition-property: color
transition-duration: 0.5s
&.more--border.more--primary {
border: 1px solid lightslategray
}
&:before {
content: ""
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: lightslategray
transform: scaleX(0)
transform-origin: 0 50%
transition-property: transform
transition-duration: 0.5s
transition-timing-function: ease-out
z-index: -1
}
&:hover {
color: white
&:before {
transform: scaleX(1)
transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
}
}
}
.layout_page
display: flex
margin: 0 auto
max-width: 1200px
align-items: flex-start
padding: 0 15px
#recent-posts
width: 75%
#page,.category-content,.flink
padding: 40px 44px 44px
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
border-radius: 8px
transition: all .3s
background: #fff
margin-top: 20px
width: 75%
.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
&:hover
-webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
#page_site-info
padding: 10rem 1rem 7rem
#site-title
font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
@media screen and (max-width: 900px)
#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
width: 100% !important
// .recent-post-info
// padding: 40px 30px 20px
@media screen and (max-width:768px)
.recent-post-item
height: auto !important
border-radius: 8px
.post_cover
width: 100% !important
height: 230px !important
border-radius: 8px !important
.recent-post-item,#page,.tag-cloud,.flink
margin-top: 1px
.recent-post-item,#page,.category-content,.tag-cloud,.flink
box-shadow: none !important
background: none !important
padding: 0px 20px 0 !important
&:hover
-webkit-box-shadow: none
box-shadow: none
#archive,#category,#tag
box-shadow: none !important
background: none !important
padding: 0px 30px 0 !important
.layout_post
padding: 0 20px 0
border-radius: 0
-webkit-box-shadow: none
box-shadow: none
background: none
margin: 0
&:hover
-webkit-box-shadow: none
box-shadow: none
.layout_page
padding: 0 !important
#aside_content
display: none !important
// .card_widget
// box-shadow: none
// border-radius: 0
// border-top: 1px dashed #a4d8fa
// &:hover
// box-shadow: none
.category-lists
padding: 0
.recent-post-info
padding: 20px 10px !important
width: 100%
#recent-posts #pagination
margin-bottom: 0
.more_setting
display: block !important
#nav #site-social-icons
display: block
#page_site-info
padding: 7rem 1rem 5rem
#top-container
height: 14rem
#post-info
bottom: 1rem
padding-left: 5%
.mobile_hidden
display: none
canvas
display: none !important
.layout_page,
.layout_post,
footer
animation: main 1s;
#nav,
#top-container
animation: header 1s
#site-title
animation: titlescale 1s
.search-dialog
transition: all .2s
.scroll-down-effects
-webkit-animation: pulse 1.5s infinite
animation: pulse 1.5s infinite
// font-size: 28px
position: absolute
color: #fff
@keyframes pulse{
0%,to{
// -ms-filter:"alpha(opacity=40)"
// filter:alpha(opacity=40)
opacity:.4
top:0}
50%{
// -ms-filter:none
// -webkit-filter:none
// filter:none
opacity:1
top:-16px}
}
@keyframes header {
0% {
opacity: 0;
transform: translateY(-50px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes main {
0% {
opacity: 0;
transform: translateY(50px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes titlescale{
0% {
// opacity:0;
transform: scale(0.7)
}
100% {
// opacity:1;
transform: scale(1)
}
}
.article-container .code_full_page
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 100%;
z-index: 9999;
margin: 0;
animation: code_full_page 1s;
.code_body
overflow: hidden
@keyframes code_full_page{
0%{transform:scale(0)}
50%{transform:scale(1)}
80%{transform:scale(.98)}
100%{transform:scale(1)}}

84
source/css/var.styl Normal file
View File

File diff suppressed because one or more lines are too long