refactor(style): decompose theme style
ppoffice
parent
23e2871917
commit
cd5d673d1d
|
|
@ -1,461 +0,0 @@
|
||||||
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%
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Article Summary and Content
|
||||||
|
* --------------------------------- */
|
||||||
|
$article-font-size ?= 1.1rem
|
||||||
|
|
||||||
|
article
|
||||||
|
&.media
|
||||||
|
.media-content
|
||||||
|
color: $text-light
|
||||||
|
|
||||||
|
.title
|
||||||
|
margin: 0
|
||||||
|
line-height: inherit
|
||||||
|
|
||||||
|
&.article
|
||||||
|
.article-meta, .article-tags
|
||||||
|
color: $text-light
|
||||||
|
|
||||||
|
.article-meta
|
||||||
|
overflow-x: auto
|
||||||
|
margin-bottom: .5rem
|
||||||
|
|
||||||
|
.article-more
|
||||||
|
@extend .button.is-light
|
||||||
|
|
||||||
|
.content
|
||||||
|
font-size: $article-font-size
|
||||||
|
|
||||||
|
a
|
||||||
|
word-wrap: break-word
|
||||||
|
|
||||||
|
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: .85em
|
||||||
|
|
||||||
|
code
|
||||||
|
padding: 0
|
||||||
|
background: transparent
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
&.pullquote
|
||||||
|
float: right
|
||||||
|
max-width: 50%
|
||||||
|
font-size: 1.15rem
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
footer
|
||||||
|
strong + cite
|
||||||
|
margin-left: .5em
|
||||||
|
|
||||||
|
.rtl
|
||||||
|
direction: rtl
|
||||||
|
|
||||||
|
.level
|
||||||
|
&, &.is-mobile
|
||||||
|
.level-item:not(:last-child)
|
||||||
|
margin-left: .75rem
|
||||||
|
margin-right: 0
|
||||||
|
|
||||||
|
.thumbnail
|
||||||
|
object-fit: cover
|
||||||
|
width: 100% !important
|
||||||
|
height: 100% !important
|
||||||
|
|
||||||
|
// 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%
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$navbar-item-active-color ?= $primary
|
||||||
|
$footer-background-color ?= $scheme-main
|
||||||
|
|
||||||
|
$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
|
||||||
|
|
||||||
|
|
||||||
|
$logo-height ?= 1.75rem
|
||||||
|
|
||||||
|
// 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"
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Buttons
|
||||||
|
* --------------------------------- */
|
||||||
|
.button
|
||||||
|
&.is-transparent
|
||||||
|
background: transparent
|
||||||
|
border-color: transparent
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Card
|
||||||
|
* --------------------------------- */
|
||||||
|
.card
|
||||||
|
overflow: hidden
|
||||||
|
border-radius: $card-radius
|
||||||
|
|
||||||
|
& + .card, & + .column-right-shadow
|
||||||
|
margin-top: 1.5rem
|
||||||
|
|
||||||
|
.media + .media
|
||||||
|
border: none
|
||||||
|
margin-top: 0
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Code Highlight
|
||||||
|
* --------------------------------- */
|
||||||
|
$codeblock-caption-bg ?= rgba(200, 200, 200, .15)
|
||||||
|
|
||||||
|
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: $codeblock-caption-bg
|
||||||
|
|
||||||
|
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 .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
|
||||||
|
|
||||||
|
/* ---------------------------------
|
||||||
|
* Fix Gist Snippet
|
||||||
|
* --------------------------------- */
|
||||||
|
.gist
|
||||||
|
table
|
||||||
|
tr:hover
|
||||||
|
background: transparent
|
||||||
|
|
||||||
|
td
|
||||||
|
border: none
|
||||||
|
|
||||||
|
.file
|
||||||
|
all: initial
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Donate Buttons
|
||||||
|
* --------------------------------- */
|
||||||
|
$donate-qrcode-max-width ?= 280px
|
||||||
|
$donate-qrcode-shadow ?= $card-shadow
|
||||||
|
$donate-qrcode-box-radius ?= $card-radius
|
||||||
|
|
||||||
|
.donate
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.qrcode
|
||||||
|
display: none
|
||||||
|
position: absolute
|
||||||
|
z-index: 99
|
||||||
|
bottom: 2.5em
|
||||||
|
line-height: 0
|
||||||
|
overflow: hidden
|
||||||
|
box-shadow: $donate-qrcode-shadow
|
||||||
|
border-radius: $donate-qrcode-box-radius
|
||||||
|
|
||||||
|
img
|
||||||
|
max-width: $donate-qrcode-max-width
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
.qrcode
|
||||||
|
display: block
|
||||||
|
|
||||||
|
&:first-child:not(:last-child)
|
||||||
|
.qrcode
|
||||||
|
left: -.75rem
|
||||||
|
|
||||||
|
&:last-child:not(:first-child)
|
||||||
|
.qrcode
|
||||||
|
right: -.75rem
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Page Footer
|
||||||
|
* --------------------------------- */
|
||||||
|
footer.footer
|
||||||
|
.level-start
|
||||||
|
+mobile()
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
.level-end
|
||||||
|
.field
|
||||||
|
flex-wrap: wrap
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
+mobile()
|
||||||
|
justify-content: center
|
||||||
|
margin-top: 1rem
|
||||||
|
|
||||||
|
.footer-logo
|
||||||
|
img
|
||||||
|
max-height: $logo-height
|
||||||
|
|
@ -4,92 +4,122 @@
|
||||||
$spacer ?= 1rem
|
$spacer ?= 1rem
|
||||||
$spacers ?= 0, $spacer * .25, $spacer * .5, $spacer, $spacer * 1.5, $spacer * 3
|
$spacers ?= 0, $spacer * .25, $spacer * .5, $spacer, $spacer * 1.5, $spacer * 3
|
||||||
|
|
||||||
for n in (0..5)
|
for n in (0 .. 5)
|
||||||
.ml-{n}
|
.ml-{n}
|
||||||
margin-left: $spacers[n] !important
|
margin-left: $spacers[n] !important
|
||||||
|
|
||||||
.mr-{n}
|
.mr-{n}
|
||||||
margin-right: $spacers[n] !important
|
margin-right: $spacers[n] !important
|
||||||
|
|
||||||
.mx-{n}
|
.mx-{n}
|
||||||
@extend .ml-{n}, .mr-{n}
|
@extend .ml-{n}, .mr-{n}
|
||||||
|
|
||||||
.ml-n{n}
|
.ml-n{n}
|
||||||
margin-left: - $spacers[n] !important
|
margin-left: - $spacers[n] !important
|
||||||
|
|
||||||
.mr-n{n}
|
.mr-n{n}
|
||||||
margin-right: - $spacers[n] !important
|
margin-right: - $spacers[n] !important
|
||||||
|
|
||||||
.mx-n{n}
|
.mx-n{n}
|
||||||
@extend .ml-n{n}, .mr-n{n}
|
@extend .ml-n{n}, .mr-n{n}
|
||||||
|
|
||||||
.mt-{n}
|
.mt-{n}
|
||||||
margin-top: $spacers[n] !important
|
margin-top: $spacers[n] !important
|
||||||
|
|
||||||
.mb-{n}
|
.mb-{n}
|
||||||
margin-bottom: $spacers[n] !important
|
margin-bottom: $spacers[n] !important
|
||||||
|
|
||||||
.my-{n}
|
.my-{n}
|
||||||
@extend .mt-{n}, .mb-{n}
|
@extend .mt-{n}, .mb-{n}
|
||||||
|
|
||||||
.mt-n{n}
|
.mt-n{n}
|
||||||
margin-top: - $spacers[n] !important
|
margin-top: - $spacers[n] !important
|
||||||
|
|
||||||
.mb-n{n}
|
.mb-n{n}
|
||||||
margin-bottom: - $spacers[n] !important
|
margin-bottom: - $spacers[n] !important
|
||||||
|
|
||||||
.my-n{n}
|
.my-n{n}
|
||||||
@extend .mt-n{n}, .mb-n{n}
|
@extend .mt-n{n}, .mb-n{n}
|
||||||
|
|
||||||
.pl-{n}
|
.pl-{n}
|
||||||
padding-left: $spacers[n] !important
|
padding-left: $spacers[n] !important
|
||||||
|
|
||||||
.pr-{n}
|
.pr-{n}
|
||||||
padding-right: $spacers[n] !important
|
padding-right: $spacers[n] !important
|
||||||
|
|
||||||
.px-{n}
|
.px-{n}
|
||||||
@extend .pl-{n}, .pr-{n}
|
@extend .pl-{n}, .pr-{n}
|
||||||
|
|
||||||
.pl-n{n}
|
.pl-n{n}
|
||||||
padding-left: - $spacers[n] !important
|
padding-left: - $spacers[n] !important
|
||||||
|
|
||||||
.pr-n{n}
|
.pr-n{n}
|
||||||
padding-right: - $spacers[n] !important
|
padding-right: - $spacers[n] !important
|
||||||
|
|
||||||
.px-n{n}
|
.px-n{n}
|
||||||
@extend .pl-n{n}, .pr-n{n}
|
@extend .pl-n{n}, .pr-n{n}
|
||||||
|
|
||||||
.pt-{n}
|
.pt-{n}
|
||||||
padding-top: $spacers[n] !important
|
padding-top: $spacers[n] !important
|
||||||
|
|
||||||
.pb-{n}
|
.pb-{n}
|
||||||
padding-bottom: $spacers[n] !important
|
padding-bottom: $spacers[n] !important
|
||||||
|
|
||||||
.py-{n}
|
.py-{n}
|
||||||
@extend .pt-{n}, .pb-{n}
|
@extend .pt-{n}, .pb-{n}
|
||||||
|
|
||||||
.pt-n{n}
|
.pt-n{n}
|
||||||
padding-top: - $spacers[n] !important
|
padding-top: - $spacers[n] !important
|
||||||
|
|
||||||
.pb-n{n}
|
.pb-n{n}
|
||||||
padding-bottom: - $spacers[n] !important
|
padding-bottom: - $spacers[n] !important
|
||||||
|
|
||||||
.py-n{n}
|
.py-n{n}
|
||||||
@extend .pt-n{n}, .pb-n{n}
|
@extend .pt-n{n}, .pb-n{n}
|
||||||
|
|
||||||
.ml-auto
|
.ml-auto
|
||||||
margin-left: auto !important
|
margin-left: auto !important
|
||||||
|
|
||||||
.mr-auto
|
.mr-auto
|
||||||
margin-right: auto !important
|
margin-right: auto !important
|
||||||
|
|
||||||
.mx-auto
|
.mx-auto
|
||||||
@extend .ml-auto, .mr-auto
|
@extend .ml-auto, .mr-auto
|
||||||
|
|
||||||
.mt-auto
|
.mt-auto
|
||||||
margin-top: auto !important
|
margin-top: auto !important
|
||||||
|
|
||||||
.mb-auto
|
.mb-auto
|
||||||
margin-bottom: auto !important
|
margin-bottom: auto !important
|
||||||
|
|
||||||
.my-auto
|
.my-auto
|
||||||
@extend .mt-auto, .mb-auto
|
@extend .mt-auto, .mb-auto
|
||||||
|
|
||||||
.pl-auto
|
.pl-auto
|
||||||
margin-left: auto !important
|
margin-left: auto !important
|
||||||
|
|
||||||
.pr-auto
|
.pr-auto
|
||||||
margin-right: auto !important
|
margin-right: auto !important
|
||||||
|
|
||||||
.px-auto
|
.px-auto
|
||||||
@extend .pl-auto, .pr-auto
|
@extend .pl-auto, .pr-auto
|
||||||
|
|
||||||
.pt-auto
|
.pt-auto
|
||||||
margin-top: auto !important
|
margin-top: auto !important
|
||||||
|
|
||||||
.pb-auto
|
.pb-auto
|
||||||
margin-bottom: auto !important
|
margin-bottom: auto !important
|
||||||
|
|
||||||
.py-auto
|
.py-auto
|
||||||
@extend .pt-auto, .pb-auto
|
@extend .pt-auto, .pb-auto
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------
|
/* ---------------------------------
|
||||||
* Flex helpers
|
* Flex helpers
|
||||||
* --------------------------------- */
|
* --------------------------------- */
|
||||||
for n in (0..5)
|
for n in (0 .. 5)
|
||||||
.order-{n}
|
.order-{n}
|
||||||
order: n !important
|
order: n !important
|
||||||
|
|
||||||
|
|
||||||
.justify-content-start
|
.justify-content-start
|
||||||
justify-content: start !important
|
justify-content: start !important
|
||||||
|
|
||||||
|
|
@ -99,16 +129,15 @@ for n in (0..5)
|
||||||
.flex-shrink-1
|
.flex-shrink-1
|
||||||
flex-shrink: 1 !important
|
flex-shrink: 1 !important
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------
|
/* ---------------------------------
|
||||||
* Color helpers
|
* Color helpers
|
||||||
* --------------------------------- */
|
* --------------------------------- */
|
||||||
.link-muted
|
.link-muted
|
||||||
color: inherit
|
color: inherit
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color: $primary !important
|
color: $primary !important
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------
|
/* ---------------------------------
|
||||||
* Font helpers
|
* Font helpers
|
||||||
* --------------------------------- */
|
* --------------------------------- */
|
||||||
|
|
@ -118,12 +147,12 @@ for n in (0..5)
|
||||||
.line-height-inherit
|
.line-height-inherit
|
||||||
line-height: inherit !important
|
line-height: inherit !important
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------
|
/* ---------------------------------
|
||||||
* Image helpers
|
* Image helpers
|
||||||
* --------------------------------- */
|
* --------------------------------- */
|
||||||
.image.is-7by3
|
.image.is-7by3
|
||||||
padding-top: 42.8%
|
padding-top: 42.8%
|
||||||
|
|
||||||
img
|
img
|
||||||
bottom: 0
|
bottom: 0
|
||||||
left: 0
|
left: 0
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Top Navigation
|
||||||
|
* --------------------------------- */
|
||||||
|
.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 .75rem
|
||||||
|
|
||||||
|
&.is-active
|
||||||
|
background-color: transparent
|
||||||
|
|
||||||
|
+until($navbar-breakpoint)
|
||||||
|
.navbar-menu
|
||||||
|
justify-content: center
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
.navbar-start
|
||||||
|
margin-right: 0
|
||||||
|
|
||||||
|
.navbar-end
|
||||||
|
margin-left: 0
|
||||||
|
|
||||||
|
.navbar-logo
|
||||||
|
img
|
||||||
|
max-height: $logo-height
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Pagination and Post Navigation
|
||||||
|
* --------------------------------- */
|
||||||
|
$pagination-box-shadow ?= $card-shadow
|
||||||
|
$pagination-background-color ?= $button-background-color
|
||||||
|
$post-navigation-fg ?= $grey
|
||||||
|
|
||||||
|
.pagination
|
||||||
|
.pagination-link,
|
||||||
|
.pagination-ellipsis,
|
||||||
|
.pagination-previous,
|
||||||
|
.pagination-next
|
||||||
|
a
|
||||||
|
color: $pagination-color
|
||||||
|
.pagination-link,
|
||||||
|
.pagination-previous,
|
||||||
|
.pagination-next
|
||||||
|
border: none
|
||||||
|
background: $pagination-background-color
|
||||||
|
box-shadow: $pagination-box-shadow
|
||||||
|
.pagination-link.is-current
|
||||||
|
background: $pagination-current-background-color
|
||||||
|
|
||||||
|
.post-navigation
|
||||||
|
color: $post-navigation-fg
|
||||||
|
flex-wrap: wrap
|
||||||
|
justify-content: space-around
|
||||||
|
.level-item
|
||||||
|
margin-bottom: 0
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Back to Top Button
|
||||||
|
* --------------------------------- */
|
||||||
|
#back-to-top
|
||||||
|
position: fixed
|
||||||
|
padding: 8px 0
|
||||||
|
transition: .4s ease opacity, .4s ease width, .4s ease transform, .4s ease border-radius
|
||||||
|
opacity: 0
|
||||||
|
line-height: 24px
|
||||||
|
outline: none
|
||||||
|
transform: translateY(120px)
|
||||||
|
|
||||||
|
&.fade-in
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
&.rise-up
|
||||||
|
transform: translateY(0)
|
||||||
|
|
||||||
|
/* ---------------------------------
|
||||||
|
* Gallery Plugin
|
||||||
|
* --------------------------------- */
|
||||||
|
.gallery-item
|
||||||
|
.caption
|
||||||
|
color: $grey
|
||||||
|
|
||||||
|
/* ---------------------------------
|
||||||
|
* Table of Content Widget
|
||||||
|
* --------------------------------- */
|
||||||
|
+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, .7)
|
||||||
|
|
||||||
|
#toc, #toc-mask
|
||||||
|
&.is-active
|
||||||
|
display: block
|
||||||
|
|
||||||
|
/* ---------------------------------
|
||||||
|
* Page Loading Progressbar
|
||||||
|
* --------------------------------- */
|
||||||
|
.pace
|
||||||
|
user-select: none
|
||||||
|
pointer-events: none
|
||||||
|
|
||||||
|
.pace-progress
|
||||||
|
top: 0
|
||||||
|
right: 100%
|
||||||
|
width: 100%
|
||||||
|
height: 2px
|
||||||
|
z-index: 2000
|
||||||
|
position: fixed
|
||||||
|
background: $primary
|
||||||
|
|
||||||
|
.pace-inactive
|
||||||
|
display: none
|
||||||
|
|
||||||
|
/* ---------------------------------
|
||||||
|
* Fix FontAwesome Icons
|
||||||
|
* --------------------------------- */
|
||||||
|
.fa, .fab, .fal, .far, .fas
|
||||||
|
line-height: inherit
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Responsive 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
|
||||||
|
|
@ -1,28 +1,34 @@
|
||||||
$box-shadow = 0 4px 10px rgba(0, 0, 0, .05), 0 0 1px rgba(0, 0, 0, .1)
|
/* ---------------------------------
|
||||||
$border-radius = 4px
|
* Search Box
|
||||||
$bg-shadow = rgba(0, 0, 0, .7)
|
* --------------------------------- */
|
||||||
$bg-container = #f7f7f7
|
// container sizes
|
||||||
$bg-primary = rgb(39, 108, 218)
|
$searchbox-container-width ?= 540px
|
||||||
$fg-primary = #fff
|
$searchbox-container-margin ?= 100px
|
||||||
$fg-input = #333
|
$searchbox-breakpoint-width ?= 559px
|
||||||
$bg-input = #fff
|
$searchbox-breakpoint-height ?= 479px
|
||||||
$bg-close-hover = $bg-container
|
// overlay and container styles
|
||||||
$bg-close-active = #eee
|
$searchbox-box-shadow ?= $card-shadow
|
||||||
$fg-result-header = #aaa
|
$searchbox-border-radius ?= $radius
|
||||||
$fg-result-item-secondary = #aaa
|
$searchbox-bg-overlay ?= $modal-background-background-color
|
||||||
$bg-result-item-hover = #fff
|
$searchbox-bg-container ?= $white-ter
|
||||||
$fg-result-item-active = $fg-primary
|
$searchbox-border ?= $border
|
||||||
$bg-result-item-active = $bg-primary
|
// header styles
|
||||||
$bg-result-item-highlight = $yellow
|
$searchbox-bg-input ?= $white
|
||||||
$fg-pagination-item = #333
|
$searchbox-bg-close-hover ?= $searchbox-bg-container
|
||||||
$bg-pagination-item = #fff
|
$searchbox-bg-close-active ?= $grey-lighter
|
||||||
$bg-pagination-item-hover = $bg-container
|
// body styles
|
||||||
$fg-pagination-item-active = $fg-primary
|
$searchbox-fg-result-header ?= $grey-light
|
||||||
$bg-pagination-item-active = $bg-primary
|
$searchbox-fg-result-item-secondary ?= $grey-light
|
||||||
$bg-pagination-item-disabled = $bg-container
|
$searchbox-bg-result-item-hover ?= $searchbox-bg-input
|
||||||
$fg-border = #e2e2e2
|
$searchbox-fg-result-item-active ?= findColorInvert($primary)
|
||||||
$container-width = 540px
|
$searchbox-bg-result-item-active ?= $primary
|
||||||
$container-margin = 100px
|
$searchbox-bg-result-item-highlight ?= $yellow
|
||||||
|
// footer styles
|
||||||
|
$searchbox-bg-pagination-item ?= $searchbox-bg-input
|
||||||
|
$searchbox-bg-pagination-item-hover ?= $searchbox-bg-container
|
||||||
|
$searchbox-fg-pagination-item-active ?= findColorInvert($primary)
|
||||||
|
$searchbox-bg-pagination-item-active ?= $primary
|
||||||
|
$searchbox-bg-pagination-item-disabled ?= $searchbox-bg-container
|
||||||
|
|
||||||
.searchbox
|
.searchbox
|
||||||
display: none
|
display: none
|
||||||
|
|
@ -33,7 +39,7 @@ $container-margin = 100px
|
||||||
z-index: 100
|
z-index: 100
|
||||||
font-size: 1rem
|
font-size: 1rem
|
||||||
line-height: 0
|
line-height: 0
|
||||||
background: $bg-shadow
|
background: $searchbox-bg-overlay
|
||||||
|
|
||||||
&.show
|
&.show
|
||||||
display: flex
|
display: flex
|
||||||
|
|
@ -59,12 +65,12 @@ $container-margin = 100px
|
||||||
z-index: 101
|
z-index: 101
|
||||||
display: flex
|
display: flex
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
box-shadow: $box-shadow
|
box-shadow: $searchbox-box-shadow
|
||||||
border-radius: $border-radius
|
border-radius: $searchbox-border-radius
|
||||||
background-color: $bg-container
|
background-color: $searchbox-bg-container
|
||||||
width: $container-width
|
width: $searchbox-container-width
|
||||||
top: $container-margin
|
top: $searchbox-container-margin
|
||||||
bottom: $container-margin
|
bottom: $searchbox-container-margin
|
||||||
|
|
||||||
.searchbox-header, .searchbox-body, .searchbox-footer
|
.searchbox-header, .searchbox-body, .searchbox-footer
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
@ -74,7 +80,7 @@ $container-margin = 100px
|
||||||
flex-direction: row
|
flex-direction: row
|
||||||
line-height: 1.5em
|
line-height: 1.5em
|
||||||
font-weight: normal
|
font-weight: normal
|
||||||
background-color: $bg-input
|
background-color: $searchbox-bg-input
|
||||||
|
|
||||||
.searchbox-input-container
|
.searchbox-input-container
|
||||||
display: flex
|
display: flex
|
||||||
|
|
@ -82,51 +88,49 @@ $container-margin = 100px
|
||||||
|
|
||||||
.searchbox-input
|
.searchbox-input
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
color: $fg-input
|
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
padding: .75em 0 .75em 1.25em
|
padding: .75em 0 .75em 1.25em
|
||||||
|
|
||||||
.searchbox-close
|
.searchbox-close
|
||||||
display: inline-block
|
display: inline-block
|
||||||
color: $fg-input
|
|
||||||
font-size: 1.5em
|
font-size: 1.5em
|
||||||
padding: .5em .75em
|
padding: .5em .75em
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background: $bg-close-hover
|
background: $searchbox-bg-close-hover
|
||||||
|
|
||||||
&:active
|
&:active
|
||||||
background: $bg-close-active
|
background: $searchbox-bg-close-active
|
||||||
|
|
||||||
.searchbox-body
|
.searchbox-body
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
overflow-y: auto
|
overflow-y: auto
|
||||||
border-top: 1px solid $fg-border
|
border-top: 1px solid $searchbox-border
|
||||||
|
|
||||||
.searchbox-result-section header, .searchbox-result-item
|
.searchbox-result-section header, .searchbox-result-item
|
||||||
padding: .75em 1em
|
padding: .75em 1em
|
||||||
|
|
||||||
.searchbox-result-section
|
.searchbox-result-section
|
||||||
border-bottom: 1px solid $fg-border
|
border-bottom: 1px solid $searchbox-border
|
||||||
|
|
||||||
header
|
header
|
||||||
color: $fg-result-header
|
color: $searchbox-fg-result-header
|
||||||
|
|
||||||
.searchbox-result-item
|
.searchbox-result-item
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: row
|
flex-direction: row
|
||||||
|
|
||||||
&:not(.disabled):not(.active):not(:active):hover
|
&:not(.disabled):not(.active):not(:active):hover
|
||||||
background-color: $bg-result-item-hover
|
background-color: $searchbox-bg-result-item-hover
|
||||||
|
|
||||||
&:active, &.active
|
&:active, &.active
|
||||||
color: $fg-result-item-active
|
color: $searchbox-fg-result-item-active
|
||||||
background-color: $bg-result-item-active
|
background-color: $searchbox-bg-result-item-active
|
||||||
|
|
||||||
em
|
em
|
||||||
font-style: normal
|
font-style: normal
|
||||||
background: $bg-result-item-highlight
|
background: $searchbox-bg-result-item-highlight
|
||||||
|
|
||||||
.searchbox-result-icon
|
.searchbox-result-icon
|
||||||
margin-right: 1em
|
margin-right: 1em
|
||||||
|
|
@ -141,14 +145,14 @@ $container-margin = 100px
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
|
|
||||||
.searchbox-result-title-secondary
|
.searchbox-result-title-secondary
|
||||||
color: $fg-result-item-secondary
|
color: $searchbox-fg-result-item-secondary
|
||||||
|
|
||||||
.searchbox-result-preview
|
.searchbox-result-preview
|
||||||
margin-top: .25em
|
margin-top: .25em
|
||||||
|
|
||||||
.searchbox-result-item:not(:active):not(.active)
|
.searchbox-result-item:not(:active):not(.active)
|
||||||
.searchbox-result-preview
|
.searchbox-result-preview
|
||||||
color: $fg-result-item-secondary
|
color: $searchbox-fg-result-item-secondary
|
||||||
|
|
||||||
.searchbox-footer
|
.searchbox-footer
|
||||||
padding: .5em 1em
|
padding: .5em 1em
|
||||||
|
|
@ -168,26 +172,25 @@ $container-margin = 100px
|
||||||
.searchbox-pagination-link
|
.searchbox-pagination-link
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
padding: .5em .8em
|
padding: .5em .8em
|
||||||
color: $fg-pagination-item
|
box-shadow: $searchbox-box-shadow
|
||||||
box-shadow: $box-shadow
|
border-radius: $searchbox-border-radius
|
||||||
border-radius: $border-radius
|
background-color: $searchbox-bg-pagination-item
|
||||||
background-color: $bg-pagination-item
|
|
||||||
|
|
||||||
.searchbox-pagination-item.active
|
.searchbox-pagination-item.active
|
||||||
.searchbox-pagination-link
|
.searchbox-pagination-link
|
||||||
color: $fg-pagination-item-active
|
color: $searchbox-fg-pagination-item-active
|
||||||
background-color: $bg-pagination-item-active
|
background-color: $searchbox-bg-pagination-item-active
|
||||||
|
|
||||||
.searchbox-pagination-item.disabled
|
.searchbox-pagination-item.disabled
|
||||||
.searchbox-pagination-link
|
.searchbox-pagination-link
|
||||||
cursor: not-allowed
|
cursor: not-allowed
|
||||||
background-color: $bg-pagination-item-disabled
|
background-color: $searchbox-bg-pagination-item-disabled
|
||||||
|
|
||||||
.searchbox-pagination-item:not(.active):not(.disabled)
|
.searchbox-pagination-item:not(.active):not(.disabled)
|
||||||
.searchbox-pagination-link:hover
|
.searchbox-pagination-link:hover
|
||||||
background-color: $bg-pagination-item-hover
|
background-color: $searchbox-bg-pagination-item-hover
|
||||||
|
|
||||||
@media screen and (max-width: 559px), screen and (max-height: 479px)
|
@media screen and (max-width: $searchbox-breakpoint-width), screen and (max-height: $searchbox-breakpoint-height)
|
||||||
.searchbox .searchbox-container
|
.searchbox .searchbox-container
|
||||||
top: 0
|
top: 0
|
||||||
left: 0
|
left: 0
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
/* ---------------------------------
|
||||||
|
* Archive Timeline
|
||||||
|
* --------------------------------- */
|
||||||
|
$timeline-fg-line ?= $grey-lighter
|
||||||
|
$timeline-bg-line ?= $card-background-color
|
||||||
|
|
||||||
|
.timeline
|
||||||
|
margin-left: 1rem
|
||||||
|
padding: 1rem 0 0 1.5rem
|
||||||
|
border-left: 1px solid $timeline-fg-line
|
||||||
|
|
||||||
|
.media
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
&:before, &:last-child:after
|
||||||
|
content: ''
|
||||||
|
display: block
|
||||||
|
position: absolute
|
||||||
|
left: calc(-5px - 1.5rem)
|
||||||
|
|
||||||
|
&:before
|
||||||
|
width: .75rem
|
||||||
|
height: .75rem
|
||||||
|
top: calc(1rem + 1.5 * .85rem / 2 - .75rem / 2)
|
||||||
|
background: $timeline-fg-line
|
||||||
|
border-radius: 50%
|
||||||
|
|
||||||
|
&:first-child:before
|
||||||
|
top: calc(1.5 * .85rem / 2 - .75rem / 2)
|
||||||
|
|
||||||
|
&:last-child:after
|
||||||
|
width: .75rem
|
||||||
|
top: calc(1rem + 1.5 * .85rem / 2 + .75rem / 2)
|
||||||
|
bottom: 0
|
||||||
|
background: $timeline-bg-line
|
||||||
|
|
||||||
|
&:first-child:last-child:after
|
||||||
|
top: calc(1.5 * .85rem / 2 + .75rem / 2)
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
#back-to-top
|
|
||||||
position: fixed
|
|
||||||
padding: 8px 0
|
|
||||||
transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius
|
|
||||||
opacity: 0
|
|
||||||
line-height: 24px
|
|
||||||
outline: none
|
|
||||||
transform: translateY(120px)
|
|
||||||
&.fade-in
|
|
||||||
opacity: 1
|
|
||||||
&.rise-up
|
|
||||||
transform: translateY(0)
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
.pace
|
|
||||||
user-select: none
|
|
||||||
pointer-events: none
|
|
||||||
.pace-progress
|
|
||||||
top: 0
|
|
||||||
right: 100%
|
|
||||||
width: 100%
|
|
||||||
height: 2px
|
|
||||||
z-index: 2000
|
|
||||||
position: fixed
|
|
||||||
background: $primary
|
|
||||||
|
|
||||||
.pace-inactive
|
|
||||||
display: none
|
|
||||||
|
|
@ -1,6 +1,17 @@
|
||||||
@import "base"
|
// Base CSS framework
|
||||||
@import "helper"
|
@import 'include/base'
|
||||||
@import "search"
|
// Helper classes & mixins
|
||||||
|
@import 'include/helper'
|
||||||
@import "plugin/back-to-top"
|
// Icarus components
|
||||||
@import "plugin/progressbar"
|
@import 'include/button'
|
||||||
|
@import 'include/card'
|
||||||
|
@import 'include/article'
|
||||||
|
@import 'include/navbar'
|
||||||
|
@import 'include/footer'
|
||||||
|
@import 'include/pagination'
|
||||||
|
@import 'include/timeline'
|
||||||
|
@import 'include/search'
|
||||||
|
@import 'include/codeblock'
|
||||||
|
@import 'include/donate'
|
||||||
|
@import 'include/plugin'
|
||||||
|
@import 'include/responsive'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue