aleks/hexo-theme-ayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
shenyu
2019-12-03 19:37:44 +08:00
commit f396a42774
105 changed files with 19372 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
source/css/_partial/albums.styl Normal file
View File

@@ -0,0 +1,55 @@
.article-albums
position relative
.article-albums-photos
position relative
display flex
flex-wrap wrap
list-unstyled()
clearfix()
&::after
content: ''
flex-grow 999999999
.article-albums-item
position relative
flex-grow 1
margin .5rem
overflow hidden
img
object-fit cover
max-width 100%
min-width 100%
vertical-align: center
.article-albums-caption
display block
width 100%
padding 1rem 0
text-align center
// Media Query
@media (min-width: 576px)
.article-albums-item
img
height 32rem
.article-albums-caption
position absolute
bottom 0
left 0
width 100%
background-color rgba(black, .5)
background linear-gradient(to top, rgba(black, .5), transparent)
color white
padding 1rem
opacity 0
transform translateY(100%)
transition(transition-base)
&:hover
.article-albums-caption
opacity 1
transform translateY(0)
@media (min-width: 768px)
.article-albums-item
img
height 20rem

89
source/css/_partial/apple.styl Normal file
View File

@@ -0,0 +1,89 @@
// apple product
//
// macbook air
color-macbook = white
color-macbook-darken = darken(color-macbook, 5%)
//
// browser
color-browser-light = white
color-browser-btns =
close #eb6b60
minimize #f4be4f
maximize #66c655
scrolling-wrap-height = 30rem
//
// macbook air
.macbook
position relative
.macbook-screen
position relative
background-color transparent
border-style solid
border-color color-macbook
border-radius 1rem
border-width 1.25rem
box-shadow 0 1rem 3rem rgba(black, .15), 0 0 .5rem rgba(black, .15) inset
.macbook-keyboard
display none
position relative
box-sizing content-box
background-color color-macbook
border-bottom solid .75rem color-macbook-darken
border-bottom-radius(50%)
margin -.5rem -5rem 0
height .5rem
box-shadow 0 .5rem 3rem rgba(0,0,0,.15)
&::before
content ''
position absolute
center-x()
background linear-gradient(90deg, color-macbook-darken, color-macbook, color-macbook-darken)
box-shadow 0 0 .1rem rgba(0, 0, 0, .05) inset
width 20%
height .3rem
border-radius .125rem
//
@media (min-width: 768px)
.macbook
.macbook-screen
border-width 2rem 1.25rem 1.25rem
.macbook-keyboard
display block
//
// markdown article
.macbook-wrap
padding 1rem 9rem
//
// markdown article shwo scrolling page
@keyframes scrolling-animation
0%
top 0
10%
top 0
transform translateY(0)
30%
transform translateY(-35%)
60%
transform translateY(-75%)
90%
transform translateY(-100%)
100%
transform translateY(-100%)
.scrolling-wrap
min-height scrolling-wrap-height
overflow hidden
.scrolling
position absolute
top scrolling-wrap-height
width 100%
animation scrolling-animation 10s ease-in-out 1s infinite

92
source/css/_partial/archive.styl Normal file
View File

@@ -0,0 +1,92 @@
.archives-wrap
position relative
clearfix()
&:first-child
margin-top 3rem
&:last-child
margin-bottom 3rem
.archive-year-wrap
position absolute
top 0
left 0
width years-width
.archive-year
position relative
display inline-block
@extend $block-caption
&::after
content ''
position absolute
left 0
bottom 0
height .15rem
background-color sea-lighter
width 100%
.archives
margin-left years-width
border-left border-width border-color dashed
padding-left 3rem
clearfix()
.archive-article
avoid-column-break()
.archive-article-inner
@extend $block
margin-bottom 1.5rem
.archive-article-header
display table-row
> a, > h2
display table-cell
h2
margin 0
padding-left 3rem
.archive-article-title
text-decoration: none
font-size 1.5rem
.archive-article-footer
margin-top: 1.5rem
.archive-article-date
position relative
display: block
@extend $block-caption
&::before
content ''
position absolute
top 50%
left -3.5rem
margin-top -.5rem
rounded-circle(1rem)
background-color border-color
.page-type-title
margin 0
padding 3rem 0
.page-nav
clearfix()
margin: 3rem auto
text-align: center
overflow: hidden
a, span
padding: 1rem 1.5rem
line-height: 1
a
text-decoration: none
.prev
float: left
.next
float: right
.page-number
display: inline-block
@media mq-mobile
display: none
.current
font-weight: bold
.space
color: border-color

256
source/css/_partial/article.styl Normal file
View File

@@ -0,0 +1,256 @@
.article
padding 5rem 0 3rem
.sea-center
text-align center
color black
&::after
border-bottom: 2px dashed water;
content: '';
width: 100px;
display: block;
margin: .2em auto 0;
height: 2px
//.article-inner
// overflow hidden
.article-topping
position absolute
top 0
left -3rem
color: #ea434a
&>i
font-size 2rem
line-height 1.7
.article-meta
clearfix()
.article-date
@extend $block-caption
&::before
content '\eaf2'
margin-right .5rem
font-family remixicon
opacity .5
.article-category
display inline-block
margin-left 1.5rem
&:before
content "\efde"
font-family remixicon
margin-right .5rem
opacity 0.6
.article-category-link
@extend $block-caption
.archive-article-header
+ .article-category
margin-left 0
.article-entry
font-size 110%
margin-top 1rem
clearfix()
@extend $base-style
color body-color
.pullquote
text-align left
width 45%
margin 0
&.left
margin-left 0.5em
margin-right 1em
&.right
margin-right 0.5em
margin-left 1em
.caption
color color-grey
display block
font-size 0.9em
margin-top 0.5em
position relative
text-align center
// http://webdesignerwall.com/tutorials/css-elastic-videos
.video-container
position relative
padding-top (9 / 16 * 100) % // 16:9 ratio
height 0
overflow hidden
iframe, object, embed
position absolute
top 0
left 0
width 100%
height 100%
margin-top 0
.article-header
position relative
h1, h2
margin 0
.article-title
display block
font-size 1.8em
font-weight bold
margin-bottom 3rem
text-decoration none
color body-color
padding-left 2rem
border-left 4px solid body-color
.article-footer
clearfix()
margin-top 3rem
// Tags
.article-tag-list
list-unstyled()
margin 0
&:before
color: tag-color
content "\eec3"
font-family remixicon
margin-right .5rem
.article-tag-list-item
display inline-block
padding-right 1rem
.article-tag-list-link
font-size: 11px
text-decoration: none
display: block;
color: white;
float: left;
height 18px
line-height 18px
padding 0px 8px;
position: relative;
border-radius: 9px;
background-color tag-color
.article-comment-link
float right
&:before
content "\ee0d"
font-family remixicon
padding-right 8px
.article-share-link
cursor pointer
float right
margin-left 20px
&:before
content "\ef76"
font-family remixicon
padding-right 6px
// Nav Older & Newer
.article-nav
clearfix()
position relative
padding-top 3rem
margin-top 5rem
border-top border-width border-color solid
.article-nav-link
display block
text-decoration none
&:first-child
float left
&:last-child
float right
text-align right
.article-nav-caption
color sea-lighter
.article-nav-title
font-size inherit
// Share
.article-share-box
position absolute
display none
background white
border-radius(.4rem)
box-shadow 1px 2px 10px rgba(0, 0, 0, 0.2)
border-radius 3px
margin-left -145px
overflow hidden
z-index 1
&.on
display block
.article-share-input
width 100%
background none
box-sizing border-box
padding 0 1.5rem
outline none
border none
border-bottom border-width border-color solid
height 3.6rem
line-height 3.6rem
.article-share-links
clearfix()
$article-share-link
position relative
display block
float left
width 5rem
height 3.6rem
color body-color
text-align center
text-decoration none
&:before
font-size 20px
font-family remixicon
absolute-center(font-size-base)
&:hover
color white
.article-share-twitter
@extend $article-share-link
&:before
content "\f068"
&:hover
background twitter-color
text-shadow 0 1px darken(twitter-color, 20%)
.article-share-facebook
@extend $article-share-link
&:before
content "\ec30"
&:hover
background facebook-color
text-shadow 0 1px darken(facebook-color, 20%)
.article-share-pinterest
@extend $article-share-link
&:before
content "\eea8"
&:hover
background pinterest-color
text-shadow 0 1px darken(pinterest-color, 20%)
.article-share-google
@extend $article-share-link
&:before
content "\ed15"
&:hover
background google-color
text-shadow 0 1px darken(google-color, 20%)
@import "tocbot"
@import "gallery"
@import "albums"
@import "justifiedGallery"
@media (max-width: 768px)
.article-entry
font-size 120%

21
source/css/_partial/articles.styl Normal file
View File

@@ -0,0 +1,21 @@
.articles
.article
padding 4.5rem 0
&:not(:last-child)
border-bottom border-width border-color solid
.article-entry, .article-footer
margin-top 0
.article-entry
margin 1rem 0
padding 0 2rem 2rem
border 1px dashed lighten(tag-color,80%)
.article-more-link
display inline-block
float right
background-color body-color
padding .5rem 1rem
border-radius 4px
color white !important
text-decoration none
.article-gallery
margin-top 1.5rem

72
source/css/_partial/ayer.styl Normal file
View File

@@ -0,0 +1,72 @@
@keyframes down
0%
margin-bottom 0
opacity 1
100%
margin-bottom -15px
opacity .1
//
.cover-frame
position relative
min-width 100%
height 100vh
.bg-box
width 100%
height 100%
&>img
display block
width 100vw
height 100vh
object-fit cover
object-position center center
.cover-inner
position absolute
top 50%
left 50%
transform translate(-50%, -100%)
h1
font-size 8rem
margin 0
h2
font-size 3rem
margin .5rem 0 1.5rem
a, &
color white
text-decoration none
video, img
position relative
.cover-logo
width cover-logo-size
.cover-learn-more
position absolute
z-index 1
bottom 10px
left 0
width 100%
a > i
font-size 3rem
color white
animation down 1s linear infinite
&:hover
color sea
.to_top
position fixed
bottom 10rem
right 50px
z-index 9
text-align center
// Media Query
@media (max-width: 768px)
.cover-inner
transform: translate(-50%, -70%);
h1
font-size 6rem
h2
font-size 2.3rem
.to_top
right 10px

13
source/css/_partial/categories.styl Normal file
View File

@@ -0,0 +1,13 @@
// Categories
.category-list
list-unstyled()
margin-right -.5rem
margin-left -.5rem
> .category-list-item
display inline-block
padding .5rem 1rem
&:before
content "\efde"
font-family remixicon
margin-right .5rem

9
source/css/_partial/float.styl Normal file
View File

@@ -0,0 +1,9 @@
.float-left
float: left !important;
.float-right
float: right !important;
.float-none
float: none !important;

17
source/css/_partial/footer.styl Normal file
View File

@@ -0,0 +1,17 @@
.footer
border-top border-width solid border-color
padding 3rem 0
.outer
&>ul
position relative
display flex
justify-content space-between
&:first-child
border-bottom border-width solid darken(froth-light,10%)
li
display inline-block
padding .5rem 0
span
margin-right 6px

20
source/css/_partial/gallery.styl Normal file
View File

@@ -0,0 +1,20 @@
.article-gallery
position: relative
.article-gallery-photos
position: relative
overflow: hidden
.article-gallery-img
display: none
max-width: 100%
&:first-child
display: block
&.loaded
position: absolute
display: block
img
display: block
max-width: 100%
margin: 0 auto

7
source/css/_partial/gitalk.styl Normal file
View File

@@ -0,0 +1,7 @@
.gitalk,.markdown-body
font-size font-size-base!important
.gt-container
.gt-avatar.gt-comment-avatar
img
border-radius 50%!important

148
source/css/_partial/highlight.styl Normal file
View File

@@ -0,0 +1,148 @@
highlight-background = #f6f8fa
highlight-current-line = #efefef
highlight-selection = #d6d6d6
highlight-foreground = #4d4d4c
highlight-comment = #8e908c
highlight-red = #f2777a
highlight-orange = #f99157
highlight-yellow = #ffcc66
highlight-green = #99cc99
highlight-aqua = #66cccc
highlight-blue = #6699cc
highlight-purple = #cc99cc
$code-block
background highlight-background
padding 1.5rem
margin 1.5rem 0
border-radius .4rem
overflow auto
color highlight-foreground
$line-numbers
color highlight-comment
.article-entry
pre, code
font-family inherit
text-shadow none
code
background highlight-background
padding .25rem
border-radius(.4rem)
pre
@extend $code-block
code
background none
padding 0
.highlight
@extend $code-block
pre
border none
margin 0
padding 0
table
margin 0
width auto
border none
td
border none
padding 0
figcaption
clearfix()
font-size 85%
color highlight-comment
line-height 1rem
margin-bottom 1rem
a
float right
.gutter
-webkit-user-select none
-moz-user-select none
-ms-user-select none
user-select none
.gutter pre
@extend $line-numbers
text-align right
padding-right 1.5rem
.line
height inherit
.line.marked
background highlight-selection
.gist
background highlight-background
.gist-file
border none
margin 0
.gist-data
background none
border none
.line-numbers
@extend $line-numbers
background none
border none
.line-data
padding 0 !important
.highlight
margin 0
padding 0
border none
.gist-meta
background highlight-background
color highlight-comment
padding 0
margin-top 1rem
a
font-weight normal
&:hover
text-decoration underline
pre
.comment
.title
color highlight-comment
.variable
.attribute
.tag
.regexp
.ruby .constant
.xml .tag .title
.xml .pi
.xml .doctype
.html .doctype
.css .id
.css .class
.css .pseudo
color highlight-red
.number
.preprocessor
.built_in
.literal
.params
.constant
color highlight-orange
.class
.ruby .class .title
.css .rules .attribute
color highlight-green
.string
.value
.inheritance
.header
.ruby .symbol
.xml .cdata
color highlight-green
.css .hexcolor
color highlight-aqua
.function
.python .decorator
.python .title
.ruby .function .title
.ruby .title .keyword
.perl .sub
.javascript .title
.coffeescript .title
color highlight-blue
.keyword
.javascript .function
color highlight-purple

73
source/css/_partial/justifiedGallery.styl Normal file
View File

@@ -0,0 +1,73 @@
/*
* Justified Gallery - v4.0.0-alpha
* http://miromannino.com/projects/justified-gallery/
* Copyright (c) 2019 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery
width 100%
position relative
overflow hidden
> a, > div, > figure
position absolute
display inline-block
overflow hidden
background gray /* To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
filter "alpha(opacity=10)"
opacity 0.1
margin 0
padding 0
> img, > a > img, > svg, > a > svg
position absolute
top 50%
left 50%
margin 0
padding 0
border none
filter "alpha(opacity=0)"
opacity 0
> .caption
display none
position absolute
right 0
bottom 0
left 0
padding 1rem
background-color rgba(black, .5)
background linear-gradient(to top, rgba(black, .5), transparent)
color white
&.caption-visible
display initial
> .jg-entry-visible
filter "alpha(opacity=100)"
opacity 1
background none
> img, > a > img, > svg, > a > svg
filter "alpha(opacity=100)"
opacity 1
-webkit-transition opacity 500ms ease-in
-moz-transition opacity 500ms ease-in
-o-transition opacity 500ms ease-in
transition opacity 500ms ease-in
> .jg-filtered
display none
> .spinner
position absolute
bottom 0
margin-left -24px
padding 10px 0 10px 0
left 50%
filter "alpha(opacity=100)"
opacity 1
overflow initial
> span
display inline-block
filter "alpha(opacity=0)"
opacity 0
width 8px
height 8px
margin 0 4px 0 4px
background-color #000
border-radius 6px

97
source/css/_partial/layout.styl Normal file
View File

@@ -0,0 +1,97 @@
// Layout
#app
height 100%
width 100%
position relative
overflow hidden
.cover
position relative
padding 0
margin-bottom 3rem
text-align center
.content, .sidebar
transition(transition-base)
.content
position relative
z-index 1
margin-left 0
height 100%
width 100%
overflow-y scroll
overflow-x: hidden
-webkit-overflow-scrolling touch
&.on
transform translateX(aside-width)
margin-left 0 !important
.sidebar
position fixed
z-index 9
left - aside-width
bottom 0
width aside-width
height 100%
background-color rgba(0,0,0,.8)
&.on
left 0
.navbar-toggle
position absolute
top gutter-width
left: gutter-width + aside-width
border none
height 4rem
width 4rem
border-radius 50%
background-color rgba(black, .5)
color white
transition(transition-base)
opacity .5
&:hover
opacity 1
&::before
content '\ee09'
font-family remixicon
font-size larger
.wrap, .outer
width 100%
padding-right gutter-width
padding-left gutter-width
margin auto
overflow-x hidden
clearfix()
.local-search
width 100%
// Media Query
@media (min-width: 768px)
.cover
margin-bottom 0
height 100%
.wrap, .outer
width wrap-width
padding-right 0
padding-left 0
.local-search
width wrap-width
.content
&.on
transform: none
@media (max-width: 768px)
.content
&.on
margin-left -1px !important
.sidebar
background-color body-color
.navbar-toggle
transform: scale(1.1)

2
source/css/_partial/lists.styl Normal file
View File

@@ -0,0 +1,2 @@
.list-unstyled
list-unstyled()

1
source/css/_partial/mobile.styl Normal file
View File

@@ -0,0 +1 @@

41
source/css/_partial/navbar.styl Normal file
View File

@@ -0,0 +1,41 @@
.navbar
position relative
padding-top 3rem
text-align center
.nav
list-unstyled()
.nav-item-link
display block
padding 1rem
color #bbb
text-decoration none
cursor pointer
&:hover
opacity .8
background-color body-color
&.nav-main
.nav-item-link
i
font-size 1rem
display block
line-height 1
.navbar-bottom
position absolute
bottom 0
width 100%
font-size 2rem
.logo
text-align center
margin-bottom 2rem
img
width logo-size
// Media Query
@media (max-width: 768px)
.navbar
.nav
.nav-item-link
&.nav-item-search
display: none

25
source/css/_partial/pace.styl Normal file
View File

@@ -0,0 +1,25 @@
.pace
-webkit-pointer-events none
pointer-events none
-webkit-user-select none
-moz-user-select none
user-select none
.pace-progress
position fixed
z-index 2000
top 0
right 100%
width 100%
height .2rem
background-color sea-blue
.pace-inactive
display none
@media (max-width: 768px)
.pace
display none

76
source/css/_partial/search.styl Normal file
View File

@@ -0,0 +1,76 @@
.search-form-wrap
width 100%
position fixed
top -100%
right aside-width
left 0
opacity 0
transition(.3s)
&.on
top 0
opacity 1
//-------------
.local-search
position relative
margin 0 auto
padding 1rem 3rem
background-color rgba(255,255,255,.5)
box-shadow 0 1rem 3rem rgba(sea, .05)
max-height 100vh
overflow-y auto
.local-search-input
font-size 120%
border 0
border-radius(.4rem)
width 100%
padding 1rem 1.5rem
outline: none
&::-webkit-search-results-decoration
&::-webkit-search-cancel-button
-webkit-appearance: none
.local-search-close
position absolute
top 1.85rem
right 4.25rem
display block
height 2rem
width 2rem
padding 0
border none
border-radius(50%)
color white
text-align center
cursor pointer
&::before
font-size: 150%
content '\eb52'
font-family remixicon
// 搜索结果
.local-search-result
text-align left
.search-result-list
list-unstyled()
li
padding 1.5rem 0
&:not(:last-child)
border-bottom border-width border-color solid
.search-result-title
font-size 1.6rem
font-weight bold
.search-result
padding-top .5rem
margin 0
max-height 12rem
overflow hidden
em.search-keyword
color sand
.search-result-empty
padding 3rem 0 0

2
source/css/_partial/sidebar.styl Normal file
View File

@@ -0,0 +1,2 @@
@import "navbar"
@import "totop"

13
source/css/_partial/tag.styl Normal file
View File

@@ -0,0 +1,13 @@
// Tags
.tag-list
list-unstyled()
margin-right -.5rem
margin-left -.5rem
> .tag-list-item
display inline-block
padding .5rem 1rem
&:before
content "\eec3"
font-family remixicon
margin-right .5rem

56
source/css/_partial/tocbot.styl Normal file
View File

@@ -0,0 +1,56 @@
.tocbot
position fixed
top 14rem
left calc((100vw - 70rem) / 2 + 70rem)
font-size 80%
opacity .8
> .toc-list
position relative
overflow hidden
.toc-list
list-unstyled()
padding-left 1rem
a.toc-link
height 100%
color sea-dark
text-decoration none
font-size 115%
.is-collapsible
max-height 1000px
overflow hidden
transition all 300ms ease-in-out
.is-collapsed
max-height 0
.is-position-fixed
position fixed !important
top 0
right aside-width
.is-active-link
font-weight 700
// Left line before pseudo element.
.toc-link::before
background-color water
content ' '
display inline-block
height inherit
left 0
margin-top -1px
position absolute
width 2px
.is-active-link::before
background-color link-active-color

31
source/css/_partial/totop.styl Normal file
View File

@@ -0,0 +1,31 @@
@keyframes rocket {
0% {
transform translateY(0)
opacity 1;
}
45% {
transform translateY(-3.2rem)
opacity 0;
}
55% {
transform translateY(3.2rem)
opacity 0;
}
100% {
transform translateY(0)
opacity 1;
}
}
.totop
position relative
display inline-block
overflow hidden
cursor pointer
rounded-circle(3.2rem)
background-color froth-light
line-height 3rem
&:hover > i {
animation rocket .3s ease-in-out
}