refactor(style): decompose theme style

pull/645/head
ppoffice 2020-03-09 14:35:53 -04:00
parent 23e2871917
commit cd5d673d1d
18 changed files with 671 additions and 555 deletions

View File

@ -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%

View File

@ -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%

View File

@ -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"

View File

@ -0,0 +1,7 @@
/* ---------------------------------
* Buttons
* --------------------------------- */
.button
&.is-transparent
background: transparent
border-color: transparent

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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)

View File

@ -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)

View File

@ -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

View File

@ -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'