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
|
||||
$spacers ?= 0, $spacer * .25, $spacer * .5, $spacer, $spacer * 1.5, $spacer * 3
|
||||
|
||||
for n in (0..5)
|
||||
for n in (0 .. 5)
|
||||
.ml-{n}
|
||||
margin-left: $spacers[n] !important
|
||||
|
||||
.mr-{n}
|
||||
margin-right: $spacers[n] !important
|
||||
|
||||
.mx-{n}
|
||||
@extend .ml-{n}, .mr-{n}
|
||||
|
||||
.ml-n{n}
|
||||
margin-left: - $spacers[n] !important
|
||||
|
||||
.mr-n{n}
|
||||
margin-right: - $spacers[n] !important
|
||||
|
||||
.mx-n{n}
|
||||
@extend .ml-n{n}, .mr-n{n}
|
||||
|
||||
.mt-{n}
|
||||
margin-top: $spacers[n] !important
|
||||
|
||||
.mb-{n}
|
||||
margin-bottom: $spacers[n] !important
|
||||
|
||||
.my-{n}
|
||||
@extend .mt-{n}, .mb-{n}
|
||||
|
||||
.mt-n{n}
|
||||
margin-top: - $spacers[n] !important
|
||||
|
||||
.mb-n{n}
|
||||
margin-bottom: - $spacers[n] !important
|
||||
|
||||
.my-n{n}
|
||||
@extend .mt-n{n}, .mb-n{n}
|
||||
|
||||
.pl-{n}
|
||||
padding-left: $spacers[n] !important
|
||||
|
||||
.pr-{n}
|
||||
padding-right: $spacers[n] !important
|
||||
|
||||
.px-{n}
|
||||
@extend .pl-{n}, .pr-{n}
|
||||
|
||||
.pl-n{n}
|
||||
padding-left: - $spacers[n] !important
|
||||
|
||||
.pr-n{n}
|
||||
padding-right: - $spacers[n] !important
|
||||
|
||||
.px-n{n}
|
||||
@extend .pl-n{n}, .pr-n{n}
|
||||
|
||||
.pt-{n}
|
||||
padding-top: $spacers[n] !important
|
||||
|
||||
.pb-{n}
|
||||
padding-bottom: $spacers[n] !important
|
||||
|
||||
.py-{n}
|
||||
@extend .pt-{n}, .pb-{n}
|
||||
|
||||
.pt-n{n}
|
||||
padding-top: - $spacers[n] !important
|
||||
|
||||
.pb-n{n}
|
||||
padding-bottom: - $spacers[n] !important
|
||||
|
||||
.py-n{n}
|
||||
@extend .pt-n{n}, .pb-n{n}
|
||||
|
||||
.ml-auto
|
||||
margin-left: auto !important
|
||||
|
||||
.mr-auto
|
||||
margin-right: auto !important
|
||||
|
||||
.mx-auto
|
||||
@extend .ml-auto, .mr-auto
|
||||
|
||||
.mt-auto
|
||||
margin-top: auto !important
|
||||
|
||||
.mb-auto
|
||||
margin-bottom: auto !important
|
||||
|
||||
.my-auto
|
||||
@extend .mt-auto, .mb-auto
|
||||
|
||||
.pl-auto
|
||||
margin-left: auto !important
|
||||
|
||||
.pr-auto
|
||||
margin-right: auto !important
|
||||
|
||||
.px-auto
|
||||
@extend .pl-auto, .pr-auto
|
||||
|
||||
.pt-auto
|
||||
margin-top: auto !important
|
||||
|
||||
.pb-auto
|
||||
margin-bottom: auto !important
|
||||
|
||||
.py-auto
|
||||
@extend .pt-auto, .pb-auto
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
* Flex helpers
|
||||
* --------------------------------- */
|
||||
for n in (0..5)
|
||||
for n in (0 .. 5)
|
||||
.order-{n}
|
||||
order: n !important
|
||||
|
||||
|
||||
.justify-content-start
|
||||
justify-content: start !important
|
||||
|
||||
|
|
@ -99,16 +129,15 @@ for n in (0..5)
|
|||
.flex-shrink-1
|
||||
flex-shrink: 1 !important
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
* Color helpers
|
||||
* --------------------------------- */
|
||||
.link-muted
|
||||
color: inherit
|
||||
|
||||
&:hover
|
||||
color: $primary !important
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
* Font helpers
|
||||
* --------------------------------- */
|
||||
|
|
@ -118,12 +147,12 @@ for n in (0..5)
|
|||
.line-height-inherit
|
||||
line-height: inherit !important
|
||||
|
||||
|
||||
/* ---------------------------------
|
||||
* Image helpers
|
||||
* --------------------------------- */
|
||||
.image.is-7by3
|
||||
padding-top: 42.8%
|
||||
|
||||
img
|
||||
bottom: 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
|
||||
$bg-shadow = rgba(0, 0, 0, .7)
|
||||
$bg-container = #f7f7f7
|
||||
$bg-primary = rgb(39, 108, 218)
|
||||
$fg-primary = #fff
|
||||
$fg-input = #333
|
||||
$bg-input = #fff
|
||||
$bg-close-hover = $bg-container
|
||||
$bg-close-active = #eee
|
||||
$fg-result-header = #aaa
|
||||
$fg-result-item-secondary = #aaa
|
||||
$bg-result-item-hover = #fff
|
||||
$fg-result-item-active = $fg-primary
|
||||
$bg-result-item-active = $bg-primary
|
||||
$bg-result-item-highlight = $yellow
|
||||
$fg-pagination-item = #333
|
||||
$bg-pagination-item = #fff
|
||||
$bg-pagination-item-hover = $bg-container
|
||||
$fg-pagination-item-active = $fg-primary
|
||||
$bg-pagination-item-active = $bg-primary
|
||||
$bg-pagination-item-disabled = $bg-container
|
||||
$fg-border = #e2e2e2
|
||||
$container-width = 540px
|
||||
$container-margin = 100px
|
||||
/* ---------------------------------
|
||||
* Search Box
|
||||
* --------------------------------- */
|
||||
// container sizes
|
||||
$searchbox-container-width ?= 540px
|
||||
$searchbox-container-margin ?= 100px
|
||||
$searchbox-breakpoint-width ?= 559px
|
||||
$searchbox-breakpoint-height ?= 479px
|
||||
// overlay and container styles
|
||||
$searchbox-box-shadow ?= $card-shadow
|
||||
$searchbox-border-radius ?= $radius
|
||||
$searchbox-bg-overlay ?= $modal-background-background-color
|
||||
$searchbox-bg-container ?= $white-ter
|
||||
$searchbox-border ?= $border
|
||||
// header styles
|
||||
$searchbox-bg-input ?= $white
|
||||
$searchbox-bg-close-hover ?= $searchbox-bg-container
|
||||
$searchbox-bg-close-active ?= $grey-lighter
|
||||
// body styles
|
||||
$searchbox-fg-result-header ?= $grey-light
|
||||
$searchbox-fg-result-item-secondary ?= $grey-light
|
||||
$searchbox-bg-result-item-hover ?= $searchbox-bg-input
|
||||
$searchbox-fg-result-item-active ?= findColorInvert($primary)
|
||||
$searchbox-bg-result-item-active ?= $primary
|
||||
$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
|
||||
display: none
|
||||
|
|
@ -33,7 +39,7 @@ $container-margin = 100px
|
|||
z-index: 100
|
||||
font-size: 1rem
|
||||
line-height: 0
|
||||
background: $bg-shadow
|
||||
background: $searchbox-bg-overlay
|
||||
|
||||
&.show
|
||||
display: flex
|
||||
|
|
@ -59,12 +65,12 @@ $container-margin = 100px
|
|||
z-index: 101
|
||||
display: flex
|
||||
overflow: hidden
|
||||
box-shadow: $box-shadow
|
||||
border-radius: $border-radius
|
||||
background-color: $bg-container
|
||||
width: $container-width
|
||||
top: $container-margin
|
||||
bottom: $container-margin
|
||||
box-shadow: $searchbox-box-shadow
|
||||
border-radius: $searchbox-border-radius
|
||||
background-color: $searchbox-bg-container
|
||||
width: $searchbox-container-width
|
||||
top: $searchbox-container-margin
|
||||
bottom: $searchbox-container-margin
|
||||
|
||||
.searchbox-header, .searchbox-body, .searchbox-footer
|
||||
width: 100%
|
||||
|
|
@ -74,7 +80,7 @@ $container-margin = 100px
|
|||
flex-direction: row
|
||||
line-height: 1.5em
|
||||
font-weight: normal
|
||||
background-color: $bg-input
|
||||
background-color: $searchbox-bg-input
|
||||
|
||||
.searchbox-input-container
|
||||
display: flex
|
||||
|
|
@ -82,51 +88,49 @@ $container-margin = 100px
|
|||
|
||||
.searchbox-input
|
||||
flex-grow: 1
|
||||
color: $fg-input
|
||||
box-sizing: border-box
|
||||
padding: .75em 0 .75em 1.25em
|
||||
|
||||
.searchbox-close
|
||||
display: inline-block
|
||||
color: $fg-input
|
||||
font-size: 1.5em
|
||||
padding: .5em .75em
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background: $bg-close-hover
|
||||
background: $searchbox-bg-close-hover
|
||||
|
||||
&:active
|
||||
background: $bg-close-active
|
||||
background: $searchbox-bg-close-active
|
||||
|
||||
.searchbox-body
|
||||
flex-grow: 1
|
||||
overflow-y: auto
|
||||
border-top: 1px solid $fg-border
|
||||
border-top: 1px solid $searchbox-border
|
||||
|
||||
.searchbox-result-section header, .searchbox-result-item
|
||||
padding: .75em 1em
|
||||
|
||||
.searchbox-result-section
|
||||
border-bottom: 1px solid $fg-border
|
||||
border-bottom: 1px solid $searchbox-border
|
||||
|
||||
header
|
||||
color: $fg-result-header
|
||||
color: $searchbox-fg-result-header
|
||||
|
||||
.searchbox-result-item
|
||||
display: flex
|
||||
flex-direction: row
|
||||
|
||||
&:not(.disabled):not(.active):not(:active):hover
|
||||
background-color: $bg-result-item-hover
|
||||
background-color: $searchbox-bg-result-item-hover
|
||||
|
||||
&:active, &.active
|
||||
color: $fg-result-item-active
|
||||
background-color: $bg-result-item-active
|
||||
color: $searchbox-fg-result-item-active
|
||||
background-color: $searchbox-bg-result-item-active
|
||||
|
||||
em
|
||||
font-style: normal
|
||||
background: $bg-result-item-highlight
|
||||
background: $searchbox-bg-result-item-highlight
|
||||
|
||||
.searchbox-result-icon
|
||||
margin-right: 1em
|
||||
|
|
@ -141,14 +145,14 @@ $container-margin = 100px
|
|||
text-overflow: ellipsis
|
||||
|
||||
.searchbox-result-title-secondary
|
||||
color: $fg-result-item-secondary
|
||||
color: $searchbox-fg-result-item-secondary
|
||||
|
||||
.searchbox-result-preview
|
||||
margin-top: .25em
|
||||
|
||||
.searchbox-result-item:not(:active):not(.active)
|
||||
.searchbox-result-preview
|
||||
color: $fg-result-item-secondary
|
||||
color: $searchbox-fg-result-item-secondary
|
||||
|
||||
.searchbox-footer
|
||||
padding: .5em 1em
|
||||
|
|
@ -168,26 +172,25 @@ $container-margin = 100px
|
|||
.searchbox-pagination-link
|
||||
overflow: hidden
|
||||
padding: .5em .8em
|
||||
color: $fg-pagination-item
|
||||
box-shadow: $box-shadow
|
||||
border-radius: $border-radius
|
||||
background-color: $bg-pagination-item
|
||||
box-shadow: $searchbox-box-shadow
|
||||
border-radius: $searchbox-border-radius
|
||||
background-color: $searchbox-bg-pagination-item
|
||||
|
||||
.searchbox-pagination-item.active
|
||||
.searchbox-pagination-link
|
||||
color: $fg-pagination-item-active
|
||||
background-color: $bg-pagination-item-active
|
||||
color: $searchbox-fg-pagination-item-active
|
||||
background-color: $searchbox-bg-pagination-item-active
|
||||
|
||||
.searchbox-pagination-item.disabled
|
||||
.searchbox-pagination-link
|
||||
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-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
|
||||
top: 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"
|
||||
@import "helper"
|
||||
@import "search"
|
||||
|
||||
@import "plugin/back-to-top"
|
||||
@import "plugin/progressbar"
|
||||
// Base CSS framework
|
||||
@import 'include/base'
|
||||
// Helper classes & mixins
|
||||
@import 'include/helper'
|
||||
// Icarus components
|
||||
@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