461 lines
9.9 KiB
Stylus
461 lines
9.9 KiB
Stylus
bulma-stylus-root = "../../../../node_modules/bulma-stylus/stylus"
|
|
|
|
/* ---------------------------------
|
|
* Override Bulma CSS Framework
|
|
* --------------------------------- */
|
|
$body-size ?= 14px
|
|
$body-background-color ?= #f7f7f7
|
|
|
|
$family-sans-serif ?= Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif
|
|
$family-code ?= "Source Code Pro", monospace, "Microsoft YaHei"
|
|
|
|
$primary ?= $blue
|
|
$custom-colors ?= {
|
|
grey-lightest: {
|
|
'1': $grey-lightest
|
|
'2': $grey-darker
|
|
}
|
|
}
|
|
|
|
$gap ?= 64px
|
|
$tablet ?= 769px
|
|
$desktop ?= 1088px
|
|
$widescreen ?= 1280px
|
|
$fullhd ?= 1472px
|
|
|
|
$shadow ?= 0 4px 10px rgba(0, 0, 0, 0.05)
|
|
|
|
$title-weight ?= $weight-normal
|
|
|
|
$control-height ?= 2.25em
|
|
$button-padding-vertical ?= calc(0.375em - 1px)
|
|
|
|
$card-radius ?= $radius
|
|
$card-media-margin ?= 0.75rem
|
|
$card-shadow ?= $shadow, 0 0 1px rgba(0,0,0,0.1)
|
|
|
|
$content-heading-weight ?= $weight-normal
|
|
|
|
$article-size ?= 1.1rem
|
|
|
|
// FIXME: https://github.com/groenroos/bulma-stylus/issues/11
|
|
@import bulma-stylus-root + "/utilities/initial-variables"
|
|
@import bulma-stylus-root + "/utilities/functions"
|
|
@import bulma-stylus-root + "/utilities/derived-variables"
|
|
|
|
$colors = merge($colors, $custom-colors)
|
|
|
|
@import bulma-stylus-root + "/utilities/animations"
|
|
@import bulma-stylus-root + "/utilities/mixins"
|
|
@import bulma-stylus-root + "/utilities/controls"
|
|
@import bulma-stylus-root + "/base/_all"
|
|
@import bulma-stylus-root + "/components/_all"
|
|
@import bulma-stylus-root + "/elements/_all"
|
|
@import bulma-stylus-root + "/form/_all"
|
|
@import bulma-stylus-root + "/grid/_all"
|
|
@import bulma-stylus-root + "/layout/_all"
|
|
|
|
|
|
/* ---------------------------------
|
|
* Custom Layout
|
|
* --------------------------------- */
|
|
+widescreen()
|
|
.is-1-column .container
|
|
.is-2-column .container
|
|
max-width: $desktop - 2 * $gap
|
|
width: $desktop - 2 * $gap
|
|
+fullhd()
|
|
.is-2-column .container
|
|
max-width: $widescreen - 2 * $gap
|
|
width: $widescreen - 2 * $gap
|
|
.is-1-column .container
|
|
max-width: $desktop - 2 * $gap
|
|
width: $desktop - 2 * $gap
|
|
+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
|
|
+mobile()
|
|
.section
|
|
padding: 1.5rem 1rem
|
|
|
|
.navbar-main
|
|
box-shadow: $shadow
|
|
.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: $primary
|
|
background-color: transparent
|
|
+until($navbar-breakpoint)
|
|
.navbar-menu
|
|
justify-content: center
|
|
box-shadow: none
|
|
.navbar-start
|
|
margin-right: 0
|
|
.navbar-end
|
|
margin-left: 0
|
|
|
|
.title
|
|
color: $black-ter
|
|
|
|
.card
|
|
border-radius: $card-radius
|
|
& + .card,
|
|
& + .column-right-shadow
|
|
margin-top: 1.5rem
|
|
.card-image
|
|
overflow: hidden
|
|
border-top-left-radius: $card-radius
|
|
border-top-right-radius: $card-radius
|
|
.media + .media
|
|
border: none
|
|
margin-top: 0
|
|
|
|
.content
|
|
h1
|
|
font-size: 1.75em
|
|
h2
|
|
font-size: 1.5em
|
|
h3
|
|
font-size: 1.25em
|
|
h4
|
|
font-size: 1.125em
|
|
h5
|
|
font-size: 1em
|
|
pre
|
|
font-size: 0.85em
|
|
code
|
|
padding: 0
|
|
background: transparent
|
|
blockquote
|
|
footer
|
|
strong + cite
|
|
margin-left: 0.5em
|
|
|
|
|
|
/* ---------------------------------
|
|
* Font icon fixes
|
|
* --------------------------------- */
|
|
.fa, .fab, .fal, .far, .fas
|
|
line-height: inherit
|
|
|
|
|
|
/* ---------------------------------
|
|
* Fix Gist Snippet
|
|
* --------------------------------- */
|
|
.gist
|
|
table
|
|
tr:hover
|
|
background: transparent
|
|
td
|
|
border: none
|
|
.file
|
|
all: initial
|
|
|
|
|
|
/* ---------------------------------
|
|
* 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
|
|
margin: 0 !important
|
|
padding: .3em .0em .3em .75em
|
|
font-style: normal
|
|
font-size: .8em
|
|
|
|
*
|
|
color: $grey
|
|
|
|
span
|
|
font-weight: 500
|
|
font-family: $family-code
|
|
|
|
.level-left *:not(:last-child)
|
|
margin-right: .5em
|
|
|
|
.level-right *:not(:first-child)
|
|
margin-left: .5em
|
|
|
|
.fold
|
|
cursor: pointer
|
|
|
|
&.level
|
|
overflow: auto
|
|
.level-right
|
|
a
|
|
padding: .0em 0.75em
|
|
|
|
|
|
.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
|
|
|
|
|
|
/* ---------------------------------
|
|
* Custom Element/Component styles
|
|
* --------------------------------- */
|
|
.button.is-transparent
|
|
@extend .button.is-white
|
|
background: transparent !important
|
|
|
|
article
|
|
&.media
|
|
.media-content
|
|
color: $grey
|
|
.title
|
|
margin: 0
|
|
line-height: inherit
|
|
&.article
|
|
.article-meta,
|
|
.article-tags
|
|
color: $grey
|
|
.article-meta
|
|
overflow-x: auto
|
|
margin-bottom: 0.5rem
|
|
.article-more
|
|
@extend .button.is-light
|
|
.content
|
|
font-size: $article-size
|
|
blockquote.pullquote
|
|
float: right
|
|
max-width: 50%
|
|
font-size: 1.15rem
|
|
position: relative
|
|
a
|
|
word-wrap: break-word
|
|
|
|
footer.footer
|
|
background: $white
|
|
.level-start
|
|
+mobile()
|
|
text-align: center
|
|
.level-end
|
|
.field
|
|
flex-wrap: wrap
|
|
align-items: center
|
|
+mobile()
|
|
justify-content: center
|
|
margin-top: 1rem
|
|
|
|
.navbar-logo,
|
|
.footer-logo
|
|
img
|
|
max-height: 1.75rem
|
|
|
|
.thumbnail
|
|
object-fit: cover
|
|
width: 100% !important
|
|
height: 100% !important
|
|
|
|
.pagination
|
|
.pagination-link,
|
|
.pagination-ellipsis,
|
|
.pagination-previous,
|
|
.pagination-next
|
|
a
|
|
color: $black-ter
|
|
.pagination-link,
|
|
.pagination-previous,
|
|
.pagination-next
|
|
border: none
|
|
background: $white
|
|
box-shadow: $shadow
|
|
.pagination-link.is-current
|
|
background: $primary
|
|
|
|
.post-navigation
|
|
color: $grey
|
|
flex-wrap: wrap
|
|
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)
|
|
|
|
.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)
|
|
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
|
|
|
|
.gallery-item
|
|
.caption
|
|
color: $grey
|
|
|
|
+mobile()
|
|
#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
|
|
|
|
// Overflow table
|
|
.table-overflow
|
|
overflow-x: auto
|
|
table
|
|
width: auto!important
|
|
th
|
|
word-break: keep-all
|
|
|
|
// Video container
|
|
.video-container
|
|
position: relative
|
|
padding-bottom: 56.25%
|
|
padding-top: 25px
|
|
height: 0
|
|
iframe
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100% |