479 lines
10 KiB
Stylus
479 lines
10 KiB
Stylus
family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
|
|
family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
|
|
gap = 64px
|
|
screen-tablet = 769px
|
|
screen-desktop = 1088px
|
|
screen-widescreen = 1280px
|
|
screen-fullhd = 1472px
|
|
|
|
/* ---------------------------------
|
|
* Override CSS Framework
|
|
* --------------------------------- */
|
|
html
|
|
font-size: 14px
|
|
|
|
body
|
|
background-color: #f7f7f7
|
|
|
|
body, button, input, select, textarea
|
|
font-family: family-sans
|
|
|
|
@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: 1.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
|
|
border-radius: 4px
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
|
|
& + .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
|
|
|
|
img.thumbnail
|
|
object-fit: cover
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.navbar-logo,
|
|
.footer-logo
|
|
img
|
|
max-height: 1.75rem
|
|
|
|
.navbar-main
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
|
|
.navbar-menu,
|
|
.navbar-start,
|
|
.navbar-end
|
|
align-items: stretch
|
|
display: flex
|
|
padding: 0
|
|
flex-shrink: 0
|
|
.navbar-menu
|
|
flex-grow: 1
|
|
flex-shrink: 0
|
|
overflow-x: auto
|
|
.navbar-start
|
|
justify-content: flex-start
|
|
margin-right: auto
|
|
.navbar-end
|
|
justify-content: flex-end
|
|
margin-left: auto
|
|
.navbar-item
|
|
display: flex
|
|
align-items: center
|
|
padding: 1.25rem 0.75rem
|
|
&.is-active
|
|
color: hsl(217, 71%, 53%)
|
|
background-color: transparent
|
|
@media screen and (max-width: screen-desktop - 1)
|
|
.navbar-menu
|
|
justify-content: center
|
|
box-shadow: none
|
|
.navbar-start
|
|
margin-right: 0
|
|
.navbar-end
|
|
margin-left: 0
|
|
|
|
.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
|
|
.has-text-centered figure.image
|
|
margin: auto
|
|
|
|
.pagination
|
|
.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
|
|
.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
|
|
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
|
|
|
|
.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: 4px
|
|
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
|
|
|
|
/* ---------------------------------
|
|
* Fix content elements
|
|
* --------------------------------- */
|
|
.content
|
|
h1, h2, h3, h4, h5, h6
|
|
font-weight: 400
|
|
h1
|
|
font-size: 1.75em
|
|
h2
|
|
font-size: 1.5em
|
|
h3
|
|
font-size: 1.25em
|
|
h4
|
|
font-size: 1.125em
|
|
h5
|
|
font-size: 1em
|
|
code, pre
|
|
font-family: family-mono
|
|
pre
|
|
font-size: 0.85em
|
|
code
|
|
padding: 0
|
|
background: transparent
|
|
& > code,
|
|
:not(pre) > code
|
|
font-size: 0.85em
|
|
color: hsl(348, 100%, 61%)
|
|
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
|
|
|
|
tr td
|
|
border: none
|
|
tr:not(:first-child) td
|
|
padding-top: 0
|
|
tr:not(:last-child) td
|
|
padding-bottom: 0
|
|
|
|
pre
|
|
padding: 0
|
|
overflow: visible
|
|
|
|
.line,
|
|
code .hljs
|
|
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
|