571 lines
13 KiB
Stylus
571 lines
13 KiB
Stylus
family-sans = 'PingFangSC-Regular', 'Ubuntu',sans-serif
|
|
family-mono = 'Fira Sans', monospace, "Microsoft YaHei"
|
|
gap = 64px
|
|
screen-tablet = 769px
|
|
screen-desktop = 1088px
|
|
screen-widescreen = 1280px
|
|
screen-fullhd = 1472px
|
|
/* ---------------------------------
|
|
* Override CSS Framework
|
|
* --------------------------------- */
|
|
html
|
|
font-size: 14px
|
|
//overflow: -moz-hidden-unscrollable;
|
|
|
|
|
|
//body
|
|
// background-color: #f7f7f7
|
|
|
|
.section
|
|
padding: 2.0rem 1.5rem
|
|
|
|
body, button, input, select, textarea
|
|
font-family: family-sans
|
|
.tag:not(body),.button,.file-cta, .file-name, .input, .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea
|
|
border-radius: 2px
|
|
@media screen and (min-width: screen-widescreen)
|
|
.is-1-column .container
|
|
.is-2-column .container
|
|
max-width: screen-desktop - 2 * gap
|
|
width: screen-desktop - 2 * gap
|
|
@media screen and (min-width: screen-fullhd)
|
|
.is-2-column .container
|
|
max-width: screen-widescreen - 2 * gap
|
|
width: screen-widescreen - 2 * gap
|
|
.is-1-column .container
|
|
max-width: screen-desktop - 2 * gap
|
|
width: screen-desktop - 2 * gap
|
|
|
|
@media screen and (max-width: screen-tablet - 1)
|
|
.section
|
|
padding: 4.5rem 1rem
|
|
|
|
|
|
@media screen and (min-width: screen-tablet)
|
|
.column-main,
|
|
.column-left,
|
|
.column-right,
|
|
.column-right-shadow
|
|
&.is-sticky
|
|
align-self: flex-start
|
|
position: -webkit-sticky
|
|
position: sticky
|
|
top: .75rem
|
|
.column-right-shadow
|
|
&.is-sticky
|
|
top: 1.5rem
|
|
|
|
.tag
|
|
&.is-grey
|
|
background: #e7e7e7
|
|
|
|
//.card:hover
|
|
// .card-image
|
|
// img
|
|
// transform: scale(1.03);
|
|
.card
|
|
border-radius: 2px
|
|
//box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
|
|
|
|
@media screen and (max-width: screen-tablet)
|
|
.card-image
|
|
img
|
|
height: 80% !important
|
|
|
|
.card-normal
|
|
.card
|
|
border-radius: 2px
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
|
|
display: flex;
|
|
& + .card,
|
|
& + .column-right-shadow
|
|
margin-top: 1.5rem
|
|
&.card-transparent
|
|
box-shadow: none
|
|
background: transparent
|
|
.card-image
|
|
//overflow: hidden
|
|
border-top-left-radius: 4px
|
|
border-top-right-radius: 4px
|
|
flex: 8
|
|
img
|
|
//height: 80%
|
|
max-height 150px
|
|
top: 50%
|
|
transform: translateX(-5%) translateY(-50%)
|
|
position: relative
|
|
border-radius: 2px
|
|
box-shadow: 3px 4px 12px 0 rgba(0, 0, 0, .2)
|
|
.card-content
|
|
flex: 12
|
|
padding: 1rem
|
|
|
|
|
|
img.thumbnail
|
|
object-fit: cover
|
|
width: 100%
|
|
height: 100%
|
|
box-shadow: 3px 4px 12px 0 rgba(0,0,0,0.2)
|
|
border-radius: 2px
|
|
|
|
.navbar-logo,
|
|
.footer-logo
|
|
img
|
|
max-height: 1.75rem
|
|
|
|
.navbar-main
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
|
|
.navbar-item
|
|
padding-right: 1.5rem
|
|
&.is-active
|
|
color: hsl(217, 71%, 53%)
|
|
background-color: transparent
|
|
.navbar-dropdown
|
|
border-radius: 2px
|
|
box-shadow 0 8px 8px rgba(10,10,10,.1)
|
|
-webkit-backdrop-filter: blur(20px);
|
|
backdrop-filter: blur(20px);
|
|
.sub-menu {
|
|
color: #4a4a4a
|
|
padding: 1rem
|
|
}
|
|
.sub-menu:after
|
|
content '\2022'
|
|
position absolute
|
|
color: #3273dc
|
|
@media screen and (max-width: screen-tablet)
|
|
.navbar-main
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
z-index: 30;
|
|
top: 0
|
|
.navbar-item
|
|
padding: 0.55rem 0.75rem
|
|
.navbar-dropdown
|
|
box-shadow none
|
|
|
|
.footer
|
|
background: white
|
|
.field
|
|
.button
|
|
background: transparent
|
|
|
|
.widget
|
|
.media
|
|
border: none
|
|
.media + .media
|
|
margin-top: 0
|
|
.menu-list li ul
|
|
margin-right: 0
|
|
.menu-list a.level
|
|
display: flex
|
|
|
|
.pagination
|
|
width: 100%
|
|
.pagination-link:not(.is-current), .pagination-previous, .pagination-next
|
|
background: white
|
|
border: none
|
|
.pagination-link, .pagination-previous, .pagination-next
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
|
|
|
|
.post-navigation
|
|
//justify-content: space-around
|
|
width 100%
|
|
.level-item
|
|
margin-bottom: 0
|
|
|
|
.timeline
|
|
margin-left: 1rem
|
|
padding-left: 1.5rem
|
|
padding-top: 1rem
|
|
border-left: 1px solid hsl(0, 0%, 86%)
|
|
.media
|
|
margin-bottom: 20px !important
|
|
position: relative
|
|
&:before,
|
|
&:last-child:after
|
|
content: ''
|
|
display: block
|
|
position: absolute
|
|
left: calc(-5px - 1.5rem)
|
|
&:before
|
|
width: 9px
|
|
height: 9px
|
|
top: 1.3rem
|
|
background: hsl(0, 0%, 86%)
|
|
border-radius: 50%
|
|
&:first-child:before
|
|
top: 0.3rem
|
|
&:last-child:after
|
|
top: calc(1.3rem + 9px)
|
|
width: 9px
|
|
bottom: 0
|
|
background: white
|
|
&:first-child:last-child:after
|
|
top: calc(0.3rem + 9px)
|
|
|
|
.article
|
|
.article-meta
|
|
margin-bottom: 0.5rem !important
|
|
.content
|
|
font-size: 1.1rem
|
|
blockquote.pullquote
|
|
float: right
|
|
max-width: 50%
|
|
font-size: 1.15rem
|
|
position: relative
|
|
a
|
|
word-wrap: break-word
|
|
//border-bottom: .0625rem dashed #1abc9c
|
|
p
|
|
line-height 1.9rem
|
|
blockquote
|
|
border-left: .4rem solid #4b8af3
|
|
background-color: #e9f5fe
|
|
|
|
.rtl
|
|
direction: rtl
|
|
.level
|
|
&, &.is-mobile
|
|
.level-item:not(:last-child)
|
|
margin-left: 0.75rem
|
|
margin-right: 0
|
|
|
|
.donate
|
|
position: relative
|
|
.qrcode
|
|
display: none
|
|
position: absolute
|
|
z-index: 99
|
|
bottom: 2.5em
|
|
line-height: 0
|
|
overflow: hidden
|
|
border-radius: 2px
|
|
box-shadow: 0 4px 10px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.2)
|
|
overflow: hidden
|
|
img
|
|
max-width: 280px
|
|
&:hover
|
|
.qrcode
|
|
display: block
|
|
&:first-child:not(:last-child)
|
|
.qrcode
|
|
left: -0.75rem
|
|
&:last-child:not(:first-child)
|
|
.qrcode
|
|
right: -0.75rem
|
|
|
|
@media screen and (max-width: screen-tablet - 1)
|
|
#toc
|
|
display: none
|
|
position: fixed
|
|
margin: 1rem
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
z-index: 100
|
|
max-height: calc(100vh - 2rem)
|
|
overflow-y: auto
|
|
#toc-mask
|
|
display: none
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
z-index: 99
|
|
background: rgba(0, 0, 0, 0.7)
|
|
#toc,
|
|
#toc-mask
|
|
&.is-active
|
|
display: block
|
|
|
|
|
|
/* ---------------------------------
|
|
* Custom modifiers
|
|
* --------------------------------- */
|
|
.is-borderless
|
|
border: none
|
|
|
|
.is-size-7
|
|
font-size: 0.85rem !important
|
|
|
|
.is-7by1
|
|
padding-top: 42.8%
|
|
img
|
|
bottom: 0
|
|
left: 0
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
|
|
.is-overflow-x-auto
|
|
overflow-x: auto !important
|
|
|
|
.is-flex-grow
|
|
flex-grow: 1 !important
|
|
|
|
.is-flex-wrap
|
|
flex-wrap: wrap !important
|
|
|
|
.is-flex-start
|
|
justify-content: start !important
|
|
|
|
.is-flex-center
|
|
justify-content: center !important
|
|
|
|
.is-flex-middle
|
|
align-items: center !important
|
|
|
|
.has-order-1
|
|
order: 1
|
|
|
|
.has-order-2
|
|
order: 2
|
|
|
|
.has-order-3
|
|
order: 3
|
|
|
|
.has-mr-6
|
|
margin-right: 0.5em !important
|
|
|
|
.has-mb-6
|
|
margin-bottom: 0.5em !important
|
|
|
|
.has-mr-7
|
|
margin-right: 0.25em !important
|
|
|
|
.has-link-grey,
|
|
.has-link-black-ter
|
|
transition: 0.2s ease
|
|
&:hover
|
|
color: hsl(217, 71%, 53%) !important
|
|
|
|
.has-link-grey
|
|
color: hsl(0, 0%, 48%) !important
|
|
|
|
//.has-link-black-ter
|
|
//color: hsl(0, 0%, 14%) !important
|
|
|
|
@media screen and (max-width: screen-tablet - 1)
|
|
.has-text-centered-mobile
|
|
text-align: center !important
|
|
.is-flex-center-mobile
|
|
justify-content: center !important
|
|
.has-mt-5-mobile
|
|
margin-top: 1em !important
|
|
|
|
/* ---------------------------------
|
|
* Font icon fixes
|
|
* --------------------------------- */
|
|
.fa, .fab, .fal, .far, .fas
|
|
line-height: inherit
|
|
font-size:14px
|
|
|
|
/* ---------------------------------
|
|
* Fix content elements
|
|
* --------------------------------- */
|
|
.content
|
|
h1, h2, h3, h4, h5, h6
|
|
font-weight: 400
|
|
h1
|
|
font-size: 1.55em
|
|
h2
|
|
font-size: 1.5em
|
|
h3
|
|
font-size: 1.25em
|
|
h4
|
|
font-size: 1.125em
|
|
h5
|
|
font-size: 1em
|
|
code, pre
|
|
font-size: 0.95em
|
|
font-family: family-mono
|
|
//code
|
|
// color: hsl(348, 100%, 61%)
|
|
// background: transparent
|
|
// padding: 0
|
|
blockquote
|
|
footer
|
|
strong + cite
|
|
margin-left: 0.5em
|
|
|
|
/* ---------------------------------
|
|
* Fix code highlight
|
|
* --------------------------------- */
|
|
figure.highlight
|
|
padding: 0
|
|
width: 100%
|
|
position: relative
|
|
margin: 1em 0 1em !important
|
|
&.folded
|
|
.highlight-body
|
|
height: 0
|
|
|
|
pre,
|
|
table tr:hover
|
|
color: inherit
|
|
background: transparent
|
|
|
|
table
|
|
width: auto
|
|
|
|
pre
|
|
padding: 0
|
|
overflow: visible
|
|
|
|
.line
|
|
line-height: 1.5rem
|
|
|
|
figcaption,
|
|
.gutter
|
|
background: rgba(200, 200, 200, 0.15)
|
|
|
|
figcaption
|
|
padding: .3em .75em
|
|
text-align: left
|
|
font-style: normal
|
|
font-size: .8em
|
|
&:after
|
|
clear: both
|
|
content: " "
|
|
display: table
|
|
|
|
span
|
|
font-weight: 500
|
|
font-family: family-mono
|
|
|
|
.fold
|
|
a
|
|
color: #9a9a9a
|
|
|
|
a
|
|
float: right
|
|
margin-left: 0.5em
|
|
|
|
.fold
|
|
margin-right: 0.5em
|
|
cursor: pointer
|
|
|
|
.highlight-body
|
|
overflow: auto
|
|
|
|
.gutter
|
|
text-align: right
|
|
|
|
.tag,
|
|
.title,
|
|
.number,
|
|
.section
|
|
display: inherit
|
|
font: inherit
|
|
margin: inherit
|
|
padding: inherit
|
|
background: inherit
|
|
height: inherit
|
|
text-align: inherit
|
|
vertical-align: inherit
|
|
min-width: inherit
|
|
border-radius: inherit
|
|
|
|
/* ---------------------------------
|
|
* Overflow Table
|
|
* --------------------------------- */
|
|
.table-overflow
|
|
overflow-x: auto
|
|
table
|
|
width: auto!important
|
|
th
|
|
word-break: keep-all
|
|
|
|
/* ---------------------------------
|
|
* Fix Video
|
|
* --------------------------------- */
|
|
.video-container
|
|
position: relative
|
|
padding-bottom: 56.25%
|
|
padding-top: 25px
|
|
height: 0
|
|
iframe
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
|
|
/* ---------------------------------
|
|
* Fix Gist Snippet
|
|
* --------------------------------- */
|
|
.gist
|
|
table
|
|
tr:hover
|
|
background: transparent
|
|
td
|
|
border: none
|
|
.file
|
|
all: initial
|
|
|
|
/* ---------------------------------
|
|
* Fix iframe and video
|
|
* --------------------------------- */
|
|
iframe,
|
|
video
|
|
height: none
|
|
|
|
.post-article
|
|
word-wrap: break-word;
|
|
line-height: 1.8;
|
|
letter-spacing: 0.013rem;
|
|
//a
|
|
// border-bottom: .0625rem dashed #eee;
|
|
a {
|
|
position: relative;
|
|
white-space: normal;
|
|
color: #4b8af3;
|
|
background: transparent;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
word-break: break-all;
|
|
}
|
|
a::after {
|
|
position: absolute;
|
|
bottom: -0.2rem;
|
|
left: 100%;
|
|
width: 0;
|
|
border-bottom: 0.13rem solid #4b8af3;
|
|
content: "";
|
|
-webkit-transition: width 350ms,left 350ms;
|
|
-moz-transition: width 350ms,left 350ms;
|
|
-ms-transition: width 350ms,left 350ms;
|
|
-o-transition: width 350ms,left 350ms;
|
|
transition: width 350ms,left 350ms;
|
|
}
|
|
a:hover::after {
|
|
left: 0;
|
|
width: 100%;
|
|
-webkit-transition: width 350ms;
|
|
-moz-transition: width 350ms;
|
|
-ms-transition: width 350ms;
|
|
-o-transition: width 350ms;
|
|
transition: width 350ms; }
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1.25rem;
|
|
text-align: justify;
|
|
display: block;
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1em;
|
|
margin-inline-start: 0px;
|
|
margin-inline-end: 0px;
|
|
}
|
|
|
|
.comment-item-content
|
|
p
|
|
img
|
|
width: 100%
|
|
|
|
.searchbox
|
|
.searchbox-result-wrapper
|
|
overflow-y visible |