🚀 feat: Add Parcel
This commit is contained in:
沈宇
@@ -1,40 +0,0 @@
|
||||
@charset "utf-8"
|
||||
//
|
||||
// 404
|
||||
html, body, div, figure, img
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
body
|
||||
font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
|
||||
.notfound
|
||||
position absolute
|
||||
top 50%
|
||||
left 50%
|
||||
transform translate(-50%, -50%)
|
||||
|
||||
figure.forrestgump
|
||||
position relative
|
||||
width 100%
|
||||
img
|
||||
width 100%
|
||||
figcaption
|
||||
float right
|
||||
clear right
|
||||
width 100%
|
||||
padding 0
|
||||
text-align right
|
||||
|
||||
@media (min-width: 768.02px)
|
||||
figure.forrestgump
|
||||
width 30rem
|
||||
figcaption
|
||||
width 60%
|
||||
padding 0 2rem
|
||||
|
||||
.notfound-link
|
||||
position absolute
|
||||
z-index 9
|
||||
margin-top 2rem
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
$block-caption
|
||||
text-decoration none
|
||||
color sea-lighter
|
||||
&:hover
|
||||
color sea-lighter
|
||||
|
||||
$block
|
||||
border-radius 4px
|
||||
|
||||
$base-style
|
||||
h1, h2, h3, h4, h5, h6
|
||||
margin 2.5rem 0 1.5rem
|
||||
hr
|
||||
height border-width
|
||||
background-color border-color
|
||||
border none
|
||||
padding 0
|
||||
margin 1.5rem 0
|
||||
strong
|
||||
font-weight bold
|
||||
em, cite
|
||||
font-style italic
|
||||
sup, sub
|
||||
font-size 75%
|
||||
line-height 0
|
||||
position relative
|
||||
vertical-align baseline
|
||||
sup
|
||||
top -.5rem
|
||||
sub
|
||||
bottom -.25rem
|
||||
small
|
||||
font-size 85%
|
||||
acronym, abbr
|
||||
border-bottom border-width border-color dotted
|
||||
ul, ol, dl
|
||||
margin 1.5rem 0 1.5rem 2rem
|
||||
|
||||
p, table, blockquote
|
||||
margin 1.5rem 0
|
||||
|
||||
img, video
|
||||
max-width 100%
|
||||
height auto
|
||||
display block
|
||||
margin auto
|
||||
iframe
|
||||
border none
|
||||
table
|
||||
width 100%
|
||||
max-width 70rem
|
||||
border 1px solid #dedede
|
||||
margin 15px auto
|
||||
border-collapse collapse
|
||||
empty-cells show
|
||||
th,td
|
||||
border 1px solid #dedede
|
||||
padding 5px 10px
|
||||
th
|
||||
font-weight bold
|
||||
text-align center !important
|
||||
background rgba(158, 188, 226, .2)
|
||||
white-space nowrap
|
||||
td:nth-child(1)
|
||||
white-space nowrap
|
||||
|
||||
blockquote
|
||||
display block
|
||||
padding 0 1.5rem
|
||||
width 100%
|
||||
overflow auto
|
||||
border-left .3rem water solid
|
||||
color sea-lighter
|
||||
> :first-child
|
||||
margin-top 0;
|
||||
> :last-child
|
||||
margin-bottom 0;
|
||||
footer
|
||||
cite
|
||||
&:before
|
||||
content "—"
|
||||
padding 0 .5rem
|
||||
|
||||
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
clearfix()
|
||||
&::before, &::after
|
||||
content ""
|
||||
display table
|
||||
clear both
|
||||
|
||||
hide-text()
|
||||
text-indent: 100%
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
|
||||
list-unstyled()
|
||||
list-style none
|
||||
padding-left 0
|
||||
margin-left 0
|
||||
|
||||
// Center
|
||||
center()
|
||||
top 50%
|
||||
left 50%
|
||||
transform translate(-50%, -50%)
|
||||
|
||||
// Horizontal Center
|
||||
center-x()
|
||||
left 50%
|
||||
transform translateX(-50%)
|
||||
|
||||
// Vertical Center
|
||||
center-y()
|
||||
top 50%
|
||||
transform translateY(-50%)
|
||||
|
||||
|
||||
border-radius(n)
|
||||
-webkit-border-radius n
|
||||
-moz-border-radius n
|
||||
border-radius n
|
||||
|
||||
border-top-radius(n)
|
||||
border-top-left-radius n
|
||||
border-top-right-radius n
|
||||
|
||||
border-right-radius(n)
|
||||
border-top-right-radius n
|
||||
border-bottom-right-radius n
|
||||
|
||||
border-bottom-radius(n)
|
||||
border-bottom-left-radius n
|
||||
border-bottom-right-radius n
|
||||
|
||||
transition(transition)
|
||||
transition transition
|
||||
|
||||
rounded-circle(size)
|
||||
width size
|
||||
height size
|
||||
border-radius size / 2
|
||||
|
||||
// Media queries
|
||||
@@ -1,308 +0,0 @@
|
||||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html
|
||||
line-height 1.15 /* 1 */
|
||||
-webkit-text-size-adjust 100% /* 2 */
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body
|
||||
margin 0
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1
|
||||
font-size 2em
|
||||
margin 0.67em 0
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr
|
||||
box-sizing content-box /* 1 */
|
||||
height 0 /* 1 */
|
||||
overflow visible /* 2 */
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre
|
||||
font-family monospace, monospace /* 1 */
|
||||
font-size 1em /* 2 */
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a
|
||||
background-color transparent
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title]
|
||||
border-bottom none /* 1 */
|
||||
text-decoration underline /* 2 */
|
||||
text-decoration underline dotted /* 2 */
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong
|
||||
font-weight bolder
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp
|
||||
font-family monospace, monospace /* 1 */
|
||||
font-size 1em /* 2 */
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small
|
||||
font-size 80%
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup
|
||||
font-size 75%
|
||||
line-height 0
|
||||
position relative
|
||||
vertical-align baseline
|
||||
|
||||
sub
|
||||
bottom -0.25em
|
||||
|
||||
sup
|
||||
top -0.5em
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img
|
||||
border-style none
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea
|
||||
font-family inherit /* 1 */
|
||||
font-size 100% /* 1 */
|
||||
line-height 1.15 /* 1 */
|
||||
margin 0 /* 2 */
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input /* 1 */
|
||||
overflow visible
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select /* 1 */
|
||||
text-transform none
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"]
|
||||
-webkit-appearance button
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner
|
||||
border-style none
|
||||
padding 0
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]-moz-focusring,
|
||||
[type="reset"]-moz-focusring,
|
||||
[type="submit"]-moz-focusring
|
||||
outline 1px dotted ButtonText
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset
|
||||
padding 0.35em 0.75em 0.625em
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend
|
||||
box-sizing border-box /* 1 */
|
||||
color inherit /* 2 */
|
||||
display table /* 1 */
|
||||
max-width 100% /* 1 */
|
||||
padding 0 /* 3 */
|
||||
white-space normal /* 1 */
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress
|
||||
vertical-align baseline
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea
|
||||
overflow auto
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
box-sizing border-box /* 1 */
|
||||
padding 0 /* 2 */
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button
|
||||
height auto
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"]
|
||||
-webkit-appearance textfield /* 1 */
|
||||
outline-offset -2px /* 2 */
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration
|
||||
-webkit-appearance none
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button
|
||||
-webkit-appearance button /* 1 */
|
||||
font inherit /* 2 */
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details
|
||||
display block
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary
|
||||
display list-item
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template
|
||||
display none
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden]
|
||||
display none
|
||||
@@ -1,55 +0,0 @@
|
||||
|
||||
.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
|
||||
@@ -1,89 +0,0 @@
|
||||
|
||||
// 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
|
||||
@@ -1,92 +0,0 @@
|
||||
.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.8rem
|
||||
|
||||
.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
|
||||
@@ -1,263 +0,0 @@
|
||||
|
||||
.article
|
||||
padding 5rem 0 3rem
|
||||
font-size 110%
|
||||
.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 .15rem
|
||||
font-family remixicon
|
||||
opacity .5
|
||||
|
||||
.article-category
|
||||
display inline-block
|
||||
margin-left 1.5rem
|
||||
&:before
|
||||
content "\efde"
|
||||
font-family remixicon
|
||||
margin-right .15rem
|
||||
opacity 0.6
|
||||
.article-category-link
|
||||
@extend $block-caption
|
||||
|
||||
.archive-article-header
|
||||
+ .article-category
|
||||
margin-left 0
|
||||
|
||||
.article-entry
|
||||
font-size 100%
|
||||
margin-top .5rem
|
||||
line-height 1.6
|
||||
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.5em
|
||||
font-weight bold
|
||||
margin-bottom 3rem
|
||||
text-decoration none
|
||||
color body-color
|
||||
padding-left 2rem
|
||||
border-left 4px solid body-color
|
||||
|
||||
.article-footer
|
||||
clearfix()
|
||||
|
||||
.declare
|
||||
margin 0 0 1rem
|
||||
padding-bottom 1rem
|
||||
color #999
|
||||
border-bottom 1px solid #f6f6f6
|
||||
ul
|
||||
list-style none
|
||||
li
|
||||
list-style none
|
||||
|
||||
// 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 1.5rem
|
||||
margin 1rem 0 2rem
|
||||
border-top border-width solid #eee
|
||||
|
||||
.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"
|
||||
@@ -1,21 +0,0 @@
|
||||
.articles
|
||||
.article
|
||||
padding 4.5rem 0
|
||||
&:not(:last-child)
|
||||
border-bottom border-width #ddd solid
|
||||
.article-entry
|
||||
margin-top 1rem
|
||||
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
|
||||
.article-footer
|
||||
margin-top 1rem
|
||||
@@ -1,93 +0,0 @@
|
||||
@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-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
|
||||
font-size 7rem
|
||||
margin 0
|
||||
opacity .95
|
||||
#subtitle-box
|
||||
font-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
|
||||
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
|
||||
transform scale(1.2)
|
||||
|
||||
#mask
|
||||
position fixed
|
||||
left 0
|
||||
top 0
|
||||
width 100%
|
||||
height 100%
|
||||
background-color rgba(0,0,0,.8)
|
||||
z-index 9998
|
||||
display none
|
||||
|
||||
.word_count
|
||||
margin-top 5px
|
||||
color darken(gray,30%)
|
||||
padding-bottom 1rem
|
||||
border-bottom 1px solid darken(froth-light,2%)
|
||||
|
||||
// Media Query
|
||||
@media (max-width: 768px)
|
||||
.cover-inner
|
||||
transform translate(-50%, -70%);
|
||||
width 100%
|
||||
h1
|
||||
font-size 4.5rem
|
||||
#subtitle-box
|
||||
font-size 2rem
|
||||
|
||||
.to_top
|
||||
right 10px
|
||||
@@ -1,44 +0,0 @@
|
||||
// Categories
|
||||
|
||||
.category-list
|
||||
list-unstyled()
|
||||
margin-right -.5rem
|
||||
margin-left -.5rem
|
||||
.category-list-item
|
||||
margin: 10px 10px;
|
||||
padding: 0 14px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: 38px;
|
||||
min-width: 80px;
|
||||
line-height: 38px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
border-radius: 5px;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 3px 5px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e7e7eb
|
||||
&:before
|
||||
content "\efde"
|
||||
font-family remixicon
|
||||
margin-right .5rem
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
i
|
||||
font-style normal
|
||||
margin-left 10px
|
||||
color: darken(water,45%)
|
||||
a
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
text-decoration: none
|
||||
color: body-color
|
||||
&:hover
|
||||
.category-list-item
|
||||
border: 1px solid darken(water,20%)
|
||||
box-shadow: 0 3px 5px water
|
||||
color: darken(water,50%);
|
||||
&:before
|
||||
color: darken(water,50%);
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
|
||||
.float-left
|
||||
float: left !important;
|
||||
|
||||
.float-right
|
||||
float: right !important;
|
||||
|
||||
.float-none
|
||||
float: none !important;
|
||||
@@ -1,19 +0,0 @@
|
||||
|
||||
.footer
|
||||
border-top 2px solid #f6f6f6
|
||||
padding 3rem 0
|
||||
.outer
|
||||
&>ul
|
||||
position relative
|
||||
display flex
|
||||
justify-content space-between
|
||||
&:first-child
|
||||
border-bottom border-width solid #f1f1f1
|
||||
|
||||
li
|
||||
display inline-block
|
||||
padding .5rem 0
|
||||
a
|
||||
text-decoration none
|
||||
span
|
||||
margin-right 6px
|
||||
@@ -1,20 +0,0 @@
|
||||
|
||||
.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
|
||||
@@ -1,7 +0,0 @@
|
||||
.gitalk,.markdown-body
|
||||
font-size font-size-base!important
|
||||
|
||||
.gt-container
|
||||
.gt-avatar.gt-comment-avatar
|
||||
img
|
||||
border-radius 50%!important
|
||||
@@ -1,260 +0,0 @@
|
||||
highlight-background = #2d2d2d
|
||||
highlight-code = #f2f2f2
|
||||
highlight-code-color = #c7254e
|
||||
highlight-current-line = grey
|
||||
highlight-selection = #000
|
||||
highlight-foreground = #dedede
|
||||
highlight-comment = #8e908c
|
||||
highlight-red = #f2777a
|
||||
highlight-orange = #f99157
|
||||
highlight-yellow = #ffcc66
|
||||
highlight-green = #99cc99
|
||||
highlight-aqua = #66cccc
|
||||
highlight-blue = #6699cc
|
||||
highlight-purple = #cc99cc
|
||||
|
||||
.article-entry pre,
|
||||
.article-entry .highlight {
|
||||
background: highlight-background;
|
||||
margin: 10px 0;
|
||||
padding: 10px 10px;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
color: highlight-foreground;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
|
||||
/** 滚动条整体部分 */
|
||||
&::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 7px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
/* 高宽分别对应横竖滚动条的尺寸 */
|
||||
/* width: 10px;
|
||||
height: 10px;
|
||||
background: #ccc;
|
||||
border-radius: 0; */
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 滚动条里面小方块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
-ms-border-radius: 6px;
|
||||
-o-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
/* Webkit browsers */
|
||||
-moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
/* Firefox */
|
||||
-ms-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
/* IE9 */
|
||||
-o-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
/* Opera(Old) */
|
||||
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
/* IE9+, News */
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/** 滚动条里面的轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
/* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
|
||||
background: #ededed;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.article-entry .highlight .gutter pre,
|
||||
.article-entry .highlight .gutter pre .line,
|
||||
.article-entry .gist .gist-file .gist-data .line-numbers {
|
||||
/* color: #666; */
|
||||
color: highlight-current-line;
|
||||
}
|
||||
|
||||
.article-entry pre,
|
||||
.article-entry code {
|
||||
font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace
|
||||
}
|
||||
|
||||
.article-entry code {
|
||||
background: #eee;
|
||||
color: highlight-code-color;
|
||||
padding: 0 0.3em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.article-entry pre code {
|
||||
background: none;
|
||||
text-shadow: none;
|
||||
padding: 0;
|
||||
color: highlight-foreground;
|
||||
}
|
||||
|
||||
.article-entry .highlight {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.article-entry .highlight pre {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.article-entry .highlight table {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.article-entry .highlight td {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.article-entry .highlight figcaption {
|
||||
color: highlight-comment;
|
||||
line-height: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.article-entry .highlight figcaption:before,
|
||||
.article-entry .highlight figcaption:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.article-entry .highlight figcaption:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.article-entry .highlight figcaption a {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.article-entry .highlight .gutter pre {
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.article-entry .highlight .gutter pre .line {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.article-entry .highlight .line {
|
||||
color: highlight-foreground;
|
||||
min-height: 19px;
|
||||
}
|
||||
|
||||
.article-entry .gist {
|
||||
margin: 0 -20px;
|
||||
border-style: solid;
|
||||
border-color: #ddd;
|
||||
border-width: 1px 0;
|
||||
background: #272822;
|
||||
padding: 15px 20px 15px 0;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file {
|
||||
border: none;
|
||||
font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file .gist-data {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file .gist-data .line-numbers {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file .gist-data .line-data {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file .highlight {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file .gist-meta {
|
||||
background: #272822;
|
||||
color: highlight-comment;
|
||||
font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-shadow: 0 0;
|
||||
padding: 0;
|
||||
margin-top: 1em;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file .gist-meta a {
|
||||
color: #258fb8;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.article-entry .gist .gist-file .gist-meta a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre .comment {
|
||||
/* color: #75715e; */
|
||||
color: highlight-green
|
||||
}
|
||||
|
||||
pre .keyword,
|
||||
pre .function .keyword,
|
||||
pre .class .params {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
pre .tag,
|
||||
pre .doctype,
|
||||
pre .params,
|
||||
pre .function,
|
||||
pre .css .value {
|
||||
color: highlight-foreground;
|
||||
}
|
||||
|
||||
pre .css~* .tag,
|
||||
pre .title,
|
||||
pre .at_rule,
|
||||
pre .at_rule .keyword,
|
||||
pre .preprocessor,
|
||||
pre .preprocessor .keyword {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
pre .attribute,
|
||||
pre .built_in,
|
||||
pre .class,
|
||||
pre .css~* .class,
|
||||
pre .function .title {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
pre .value,
|
||||
pre .string {
|
||||
color: highlight-foreground;
|
||||
}
|
||||
|
||||
pre .number {
|
||||
color: highlight-purple
|
||||
}
|
||||
|
||||
pre .id,
|
||||
pre .css~* .id {
|
||||
color: #fd971f;
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
/*
|
||||
* 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
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
// Layout
|
||||
#app
|
||||
height 100%
|
||||
width 100%
|
||||
position relative
|
||||
overflow hidden
|
||||
|
||||
.cover
|
||||
position relative
|
||||
padding 0
|
||||
margin-bottom 3rem
|
||||
text-align center
|
||||
.forkMe
|
||||
position absolute
|
||||
z-index 999
|
||||
top 0
|
||||
right 0
|
||||
|
||||
.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
|
||||
min-height calc( 100% - 157px )
|
||||
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)
|
||||
.cover
|
||||
.forkMe
|
||||
display none
|
||||
.content
|
||||
&.on
|
||||
margin-left -1px !important
|
||||
.sidebar
|
||||
background-color body-color
|
||||
.navbar-toggle
|
||||
transform: scale(1.1)
|
||||
@@ -1,2 +0,0 @@
|
||||
.list-unstyled
|
||||
list-unstyled()
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
.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
|
||||
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
|
||||
.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
|
||||
|
||||
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
#reward-btn
|
||||
position relative
|
||||
display inline-block
|
||||
height 36px
|
||||
line-height 36px
|
||||
margin 60px 0
|
||||
padding 0 20px
|
||||
font-size 18px
|
||||
color #fff
|
||||
background body-color
|
||||
text-decoration none
|
||||
border-radius 4px
|
||||
margin-left 50%
|
||||
transform translateX(-50%)
|
||||
box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
|
||||
-webkit-transition .4s ease-in-out
|
||||
transition .4s ease-in-out
|
||||
cursor pointer
|
||||
&:hover,
|
||||
&:active
|
||||
box-shadow 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2)
|
||||
|
||||
#reward
|
||||
position absolute
|
||||
z-index 9999
|
||||
left 50%
|
||||
top 20%
|
||||
transform translateX(-50%)
|
||||
margin 60px 0
|
||||
padding 0px 20px 20px
|
||||
background-color lighten(water,30%)
|
||||
display none
|
||||
&.ready {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
transform: translate(-50%, -100%);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
&.in {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.close
|
||||
height 28px
|
||||
line-height 28px
|
||||
width 28px
|
||||
display block
|
||||
text-align center
|
||||
position absolute
|
||||
right: -12px;
|
||||
top: -10px;
|
||||
border-radius: 50%
|
||||
background-color body-color
|
||||
cursor pointer
|
||||
i
|
||||
font-size: 20px
|
||||
color white
|
||||
.reward-p
|
||||
color body-color
|
||||
font-weight bold
|
||||
font-size 20px
|
||||
text-align center
|
||||
text-shadow 1px 1px 1px main-color
|
||||
i
|
||||
margin 0 10px
|
||||
transform translateY(2px)
|
||||
.reward-box
|
||||
display: flex
|
||||
justify-content space-between
|
||||
width 100%
|
||||
.reward-item
|
||||
text-align center
|
||||
margin: 0 10px
|
||||
.reward-type
|
||||
font-size 16px
|
||||
display block
|
||||
color black
|
||||
margin-top 10px
|
||||
.reward-img
|
||||
display block
|
||||
width 12rem
|
||||
height 12rem
|
||||
border-radius 3px
|
||||
|
||||
@media (max-width: 768px)
|
||||
#reward
|
||||
padding 0 10px 10px
|
||||
.reward-img
|
||||
max-width 10rem
|
||||
max-height 10rem
|
||||
margin 0 5px
|
||||
@@ -1,81 +0,0 @@
|
||||
|
||||
.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(body-color,.9)
|
||||
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
|
||||
color white
|
||||
padding-top .5rem
|
||||
margin 0
|
||||
max-height 12rem
|
||||
overflow hidden
|
||||
em.search-keyword
|
||||
font-style normal
|
||||
color link-color
|
||||
|
||||
.search-result-empty
|
||||
padding 2.6rem 0 0
|
||||
color white
|
||||
p
|
||||
text-align center
|
||||
@@ -1,161 +0,0 @@
|
||||
.share-wrap {
|
||||
min-height: 20px;
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 250px;
|
||||
background-color #f5f5f5;
|
||||
border-radius: 2px;
|
||||
.arrow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -3px;
|
||||
right:20px;
|
||||
display: block;
|
||||
width 10px;
|
||||
height 10px;
|
||||
transform: rotate(45deg);
|
||||
background-color #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
.share-outer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border: none;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
width auto;
|
||||
color: link-color;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
i{
|
||||
font-size: 18px;
|
||||
margin-right 5px;
|
||||
color lighten(link-color,30%)
|
||||
}
|
||||
&:hover {
|
||||
transform: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.share-icons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
margin: 3px;
|
||||
transition: 0.3s;
|
||||
text-align: center;
|
||||
color: main-color;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
font-size: 13px;
|
||||
i {
|
||||
font-size: 24px
|
||||
}
|
||||
&.weibo {
|
||||
color weibo-color
|
||||
}
|
||||
&.weixin {
|
||||
color wechat-color
|
||||
}
|
||||
&.qq {
|
||||
color qq-color
|
||||
}
|
||||
&.douban {
|
||||
color douban-color
|
||||
}
|
||||
&.twitter {
|
||||
color twitter-color
|
||||
}
|
||||
&.facebook {
|
||||
color facebook-color
|
||||
}
|
||||
&.google {
|
||||
color google-color
|
||||
}
|
||||
&:active {
|
||||
color: ocean;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wx-share-modal {
|
||||
position: fixed;
|
||||
top: 24%;
|
||||
left: 50%;
|
||||
z-index: 9999;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #727272;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -200%);
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&.ready {
|
||||
visibility: 0;
|
||||
display: block;
|
||||
transform: translate(-50%, -100%);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
&.in {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
color: rgba(0, 0, 0, .2);
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
i{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#share-mask{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color rgba(0,0,0,.6);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "navbar"
|
||||
@import "totop"
|
||||
@@ -1,32 +0,0 @@
|
||||
// Tags
|
||||
|
||||
.tag-list
|
||||
list-unstyled()
|
||||
margin-right -.5rem
|
||||
margin-left -.5rem
|
||||
> .tag-list-item
|
||||
display inline-block
|
||||
padding .5rem 1rem
|
||||
font-size 120%
|
||||
&:before
|
||||
content "\eec3"
|
||||
font-family remixicon
|
||||
margin-right .5rem
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
color: tag-color
|
||||
.tag-list-link
|
||||
display inline-block
|
||||
vertical-align middle
|
||||
text-decoration: none
|
||||
height 30px
|
||||
line-height 30px
|
||||
padding: 0 15px
|
||||
font-size: 1.5rem
|
||||
border-radius: 15px
|
||||
background-color tag-color
|
||||
color white
|
||||
box-shadow: 0 3px 5px rgba(0,0,0,0.12)
|
||||
transition: .2s
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
@@ -1,55 +0,0 @@
|
||||
|
||||
.tocbot
|
||||
position absolute
|
||||
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
|
||||
|
||||
// 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 sea-blue
|
||||
|
||||
.is-active-link
|
||||
font-weight 700
|
||||
@@ -1,31 +0,0 @@
|
||||
|
||||
@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
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,80 +0,0 @@
|
||||
// Config
|
||||
support-for-ie = false
|
||||
vendor-prefixes = webkit moz ms official
|
||||
|
||||
// Fonts
|
||||
font-size-browser = 62.5%
|
||||
font-size-base = 1.4rem
|
||||
font-family-base = "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
|
||||
font-line-height = 1.7
|
||||
|
||||
// Colors
|
||||
black = #000000
|
||||
water = #cce5ff
|
||||
water-green = #9c9
|
||||
sea-blue = #3d85c6
|
||||
sea-dark = #172d3e
|
||||
sea = #1e3e3f
|
||||
sea-light = #253145
|
||||
sea-lighter = #5c6b72
|
||||
gray = #adb5bd
|
||||
froth-light = #f4f4f4
|
||||
froth = #999
|
||||
white = #ffffff
|
||||
sand-light = #9c8079
|
||||
sand = #9e6a4d
|
||||
sand-dark = #5c5858
|
||||
sand-gray = #bbb
|
||||
red = #ea434a
|
||||
|
||||
// Share Colors
|
||||
weibo-color = #d81e06
|
||||
wechat-color = #51c332
|
||||
qq-color = #4cafe9
|
||||
douban-color = #05b711
|
||||
twitter-color = #00aced
|
||||
facebook-color = #3b5998
|
||||
pinterest-color = #cb2027
|
||||
google-color = #dd4b39
|
||||
|
||||
// Link Colors
|
||||
link-color = #0681d0
|
||||
link-hover-color = lighten(link-color, 20%)
|
||||
link-active-color = darken(link-color, 5%)
|
||||
disabled-color = gray
|
||||
|
||||
// Body Colors
|
||||
body-background = white
|
||||
body-color = darken(sand-dark,30%)
|
||||
main-color = darken(water,20%)
|
||||
tag-color = lighten(body-color,15%)
|
||||
|
||||
// Border
|
||||
border-radius = 0.4rem
|
||||
border-width = 0.1rem
|
||||
border-color = froth
|
||||
|
||||
// Layout
|
||||
aside-width = 8rem
|
||||
wrap-width = 70rem
|
||||
years-width = 6rem
|
||||
logo-size = 4.2rem
|
||||
cover-logo-size = 6rem
|
||||
|
||||
gutter-width = 1.5rem
|
||||
|
||||
// Breakpoints
|
||||
breakpoints = (
|
||||
xs = 0,
|
||||
sm = 576px,
|
||||
md = 768px,
|
||||
lg = 992px,
|
||||
xl = 1200px
|
||||
)
|
||||
|
||||
// Transition
|
||||
transition-slow = all .7s ease-in-out 0s
|
||||
transition-fast = all .1s ease-in-out 0s
|
||||
transition-base = all .3s ease-in-out
|
||||
transition-fade = opacity .15s linear
|
||||
transition-collapse = height .35s ease
|
||||
1
source/css/main.css
Normal file
1
source/css/main.css
Normal file
File diff suppressed because one or more lines are too long
5
source/css/main.js
Normal file
5
source/css/main.js
Normal file
@@ -0,0 +1,5 @@
|
||||
parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"MiQR":[function(require,module,exports) {
|
||||
|
||||
},{}],"epB2":[function(require,module,exports) {
|
||||
"use strict";require("./css/style.styl");
|
||||
},{"./css/style.styl":"MiQR"}]},{},["epB2"], null)
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 868 KiB |
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 654 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,79 +0,0 @@
|
||||
@import "_variables"
|
||||
@import "_mixins"
|
||||
@import "_remixicon"
|
||||
@import "_normalize"
|
||||
|
||||
*,
|
||||
*::before
|
||||
*::after
|
||||
box-sizing border-box
|
||||
|
||||
html, body
|
||||
height: 100%
|
||||
|
||||
html
|
||||
font-size font-size-browser
|
||||
-webkit-text-size-adjust 100%
|
||||
-ms-text-size-adjust 100%
|
||||
-ms-overflow-style scrollbar
|
||||
-webkit-tap-highlight-color transparent
|
||||
|
||||
body
|
||||
position relative
|
||||
background-color body-background
|
||||
font-family font-family-base
|
||||
font-size font-size-base
|
||||
line-height font-line-height
|
||||
color body-color
|
||||
padding 0
|
||||
margin 0
|
||||
overflow-x hidden
|
||||
text-size-adjust: 100%
|
||||
::selection
|
||||
background sea-lighter
|
||||
color froth
|
||||
a
|
||||
color link-color
|
||||
&:hover
|
||||
color link-hover-color
|
||||
&:active
|
||||
color link-active-color
|
||||
&.disabled
|
||||
color disabled-color
|
||||
ul, menu, dir
|
||||
margin 0
|
||||
padding 0
|
||||
img
|
||||
max-width 100%
|
||||
|
||||
button
|
||||
outline: none
|
||||
cursor pointer
|
||||
|
||||
@import "_extend"
|
||||
@import "_partial/layout"
|
||||
@import "_partial/lists"
|
||||
@import "_partial/categories"
|
||||
@import "_partial/tag"
|
||||
@import "_partial/ayer"
|
||||
@import "_partial/search"
|
||||
@import "_partial/article"
|
||||
@import "_partial/articles"
|
||||
@import "_partial/archive"
|
||||
@import "_partial/footer"
|
||||
@import "_partial/float"
|
||||
@import "_partial/highlight"
|
||||
@import "_partial/mobile"
|
||||
@import "_partial/pace"
|
||||
@import "_partial/gitalk"
|
||||
@import "_partial/apple"
|
||||
@import "_partial/reward"
|
||||
@import "_partial/share"
|
||||
|
||||
if sidebar
|
||||
@import "_partial/sidebar"
|
||||
|
||||
// Media Query
|
||||
@media (max-width: 768px)
|
||||
html
|
||||
font-size: 60%
|
||||
Reference in New Issue
Block a user