feat(css): add cyberpunk theme
This commit is contained in:
ppoffice
parent
cd5d673d1d
commit
285267e44c
|
|
@ -0,0 +1,187 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;600&display=swap')
|
||||
|
||||
$family-sans-serif ?= 'Oxanium', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
|
||||
// shadow and radius
|
||||
$shadow ?= none
|
||||
$radius ?= 0
|
||||
$radius-small ?= 0
|
||||
// base colors
|
||||
$white ?= #cdcdcd
|
||||
$red ?= #ff003c
|
||||
$yellow ?= #fcee09
|
||||
$blue ?= #02d7f2
|
||||
$black ?= #000
|
||||
$black-bis ?= #050a0e
|
||||
// derived colors
|
||||
$scheme-main ?= $black
|
||||
$primary ?= $yellow
|
||||
$text ?= $white
|
||||
$text-strong ?= $yellow
|
||||
$body-background-color ?= $scheme-main
|
||||
$footer-color ?= $black
|
||||
$footer-background-color ?= $yellow
|
||||
$navbar-background-color ?= $yellow
|
||||
$navbar-item-color ?= $black
|
||||
$navbar-item-active-color ?= $black
|
||||
$navbar-item-hover-color ?= $black
|
||||
$navbar-item-hover-background-color ?= transparent
|
||||
$menu-label-color ?= $blue
|
||||
$menu-item-hover-color ?= $black
|
||||
$menu-item-hover-background-color ?= $yellow
|
||||
$menu-list-border-left ?= 1px solid $text
|
||||
$tag-color ?= $black
|
||||
$tag-background-color ?= $blue
|
||||
$timeline-fg-line ?= $blue
|
||||
$post-navigation-fg ?= $white
|
||||
$searchbox-bg-container ?= $black-bis
|
||||
$searchbox-border ?= $blue
|
||||
$searchbox-bg-input ?= $black-bis
|
||||
$searchbox-bg-close-hover ?= $black
|
||||
$searchbox-bg-close-active ?= $searchbox-bg-close-hover
|
||||
$searchbox-bg-result-item-hover ?= $black
|
||||
|
||||
@import 'style'
|
||||
|
||||
body
|
||||
counter-reset: card
|
||||
|
||||
::selection
|
||||
color: $black
|
||||
background: $blue
|
||||
|
||||
.navbar-main
|
||||
padding-top: 10px
|
||||
padding-bottom: 30px
|
||||
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: -2px
|
||||
background: url('../img/razor-top-black.svg') repeat-x top
|
||||
height: 40px
|
||||
|
||||
.navbar-start
|
||||
.navbar-item
|
||||
&:hover, &.is-active
|
||||
text-decoration: underline
|
||||
|
||||
&.is-active
|
||||
font-weight: bold
|
||||
|
||||
.footer
|
||||
position: relative
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
top: -1px
|
||||
height: 39px
|
||||
background: url('../img/razor-bottom-black.svg') repeat-x top
|
||||
|
||||
& > .container
|
||||
padding-top: 40px
|
||||
|
||||
.card:not(#back-to-top)
|
||||
overflow: visible
|
||||
box-shadow: 0 0 0 .9px $blue
|
||||
counter-increment: card
|
||||
|
||||
&:before, &:after
|
||||
content: ''
|
||||
position: absolute
|
||||
width: 12.5px
|
||||
height: 21.5px
|
||||
z-index: 10
|
||||
background: $body-background-color
|
||||
|
||||
&:before
|
||||
top: -12px
|
||||
right: -1.5px
|
||||
border-left: 1px solid $blue
|
||||
transform: rotate(-45deg)
|
||||
transform-origin: right center
|
||||
|
||||
&:after
|
||||
left: -1.5px
|
||||
bottom: -12px
|
||||
border-right: 1px solid $blue
|
||||
transform: rotate(-45deg)
|
||||
transform-origin: left center
|
||||
|
||||
.card-content
|
||||
&:after
|
||||
content: 'R' counter(card)
|
||||
display: inline-block
|
||||
position: absolute
|
||||
color: $blue
|
||||
right: 2rem
|
||||
bottom: -.6em
|
||||
font-size: .75rem
|
||||
padding: 0 .25em
|
||||
background: $body-background-color
|
||||
|
||||
.button:not(.is-transparent), .pagination-link.is-current
|
||||
border: none
|
||||
outline: none
|
||||
|
||||
&.is-primary
|
||||
border-radius: 0 !important
|
||||
|
||||
&.article-more
|
||||
color: $black
|
||||
background-color: $blue
|
||||
margin-left: auto
|
||||
|
||||
&:before, &:after
|
||||
content: ''
|
||||
position: absolute
|
||||
width: 0
|
||||
z-index: 10
|
||||
|
||||
&:before
|
||||
top: 0
|
||||
left: 0
|
||||
border-top: 8px solid $card-background-color
|
||||
border-right: 8px solid transparent
|
||||
|
||||
&:after
|
||||
right: 0
|
||||
bottom: 0
|
||||
border-left: 8px solid transparent
|
||||
border-bottom: 8px solid $card-background-color
|
||||
|
||||
.tags
|
||||
.tag + .is-grey-lightest
|
||||
background: $yellow
|
||||
|
||||
article.article
|
||||
.title a
|
||||
background-image: linear-gradient(transparent calc(100% - 2px), $text-strong 2px)
|
||||
background-repeat: no-repeat
|
||||
background-size: 0 100%
|
||||
transition: background-size .25s ease-in-out
|
||||
|
||||
.title:hover a
|
||||
background-size: 100% 100%
|
||||
|
||||
.content
|
||||
blockquote
|
||||
background: transparent
|
||||
border: .5px solid $blue
|
||||
border-left: 5px solid $blue
|
||||
|
||||
.searchbox .searchbox-container
|
||||
border: 1px solid $blue
|
||||
|
||||
.searchbox-result-item
|
||||
em
|
||||
color: $black
|
||||
|
||||
#back-to-top
|
||||
color: $black
|
||||
background: $blue
|
||||
margin-top: 45px
|
||||
|
|
@ -3,5 +3,6 @@
|
|||
* --------------------------------- */
|
||||
.button
|
||||
&.is-transparent
|
||||
color: inherit
|
||||
background: transparent
|
||||
border-color: transparent
|
||||
|
|
|
|||
|
|
@ -3,12 +3,16 @@
|
|||
* --------------------------------- */
|
||||
#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
|
||||
padding: 8px 0
|
||||
line-height: 24px
|
||||
border-radius: $card-radius
|
||||
transform: translateY(120px)
|
||||
transition: .4s ease opacity, .4s ease width, .4s ease transform, .4s ease border-radius
|
||||
|
||||
&.is-rounded
|
||||
border-radius: 50%
|
||||
|
||||
&.fade-in
|
||||
opacity: 1
|
||||
|
|
|
|||
|
|
@ -88,8 +88,10 @@ $searchbox-bg-pagination-item-disabled ?= $searchbox-bg-container
|
|||
|
||||
.searchbox-input
|
||||
flex-grow: 1
|
||||
color: inherit
|
||||
box-sizing: border-box
|
||||
padding: .75em 0 .75em 1.25em
|
||||
background: $searchbox-bg-input
|
||||
|
||||
.searchbox-close
|
||||
display: inline-block
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="39px">
|
||||
<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M1877.759,23.791 L1874.461,20.504 L1879.969,15.027 L1868.965,15.027 L1874.461,20.504 L1871.156,23.791 L1789.442,23.791 L1784.749,28.484 L1775.502,37.704 L1769.337,31.559 L1738.089,31.695 L1733.080,31.695 L1720.422,19.079 L1686.790,19.079 L1679.552,26.293 L1386.290,26.255 L1380.520,20.508 L1371.871,29.132 L1368.980,26.255 L1203.819,26.293 L1191.058,38.996 L1167.007,15.027 L1167.000,15.038 L1166.989,15.027 L1157.936,24.049 L1154.094,24.049 L1151.994,21.956 L1155.330,18.643 L1148.674,18.643 L1151.994,21.956 L1149.933,24.007 L1072.000,24.040 L1072.000,24.049 L1061.000,24.044 L1050.000,24.049 L1050.000,24.040 L972.067,24.007 L970.005,21.956 L973.326,18.643 L966.670,18.643 L970.005,21.956 L967.906,24.049 L964.064,24.049 L955.012,15.027 L955.000,15.038 L954.993,15.027 L930.942,38.996 L918.181,26.293 L818.020,26.255 L815.129,29.132 L806.480,20.508 L800.710,26.255 L661.448,26.293 L654.209,19.079 L620.578,19.079 L607.919,31.695 L602.910,31.695 L571.663,31.559 L565.497,37.704 L556.251,28.484 L551.557,23.791 L469.844,23.791 L466.539,20.504 L472.035,15.027 L461.031,15.027 L466.539,20.504 L463.241,23.791 L204.638,23.791 L195.467,15.027 L195.449,15.049 L195.426,15.027 L179.458,31.695 L166.537,31.695 L158.884,24.049 L0.001,24.049 L0.001,-0.012 L1919.998,-0.012 L1919.998,24.049 L1877.759,23.791 ZM228.624,15.027 L226.889,15.027 L226.889,20.205 L228.624,20.205 L228.624,15.027 ZM231.248,15.027 L229.518,15.027 L229.518,20.205 L231.248,20.205 L231.248,15.027 ZM243.370,15.027 L241.640,15.027 L241.640,20.205 L243.370,20.205 L243.370,15.027 ZM264.168,15.027 L258.973,15.027 L258.973,20.205 L264.168,20.205 L264.168,15.027 ZM584.675,24.989 L582.941,24.989 L582.941,26.714 L584.675,26.714 L584.675,24.989 ZM591.316,21.536 L589.582,21.536 L589.582,26.714 L591.316,26.714 L591.316,21.536 ZM604.751,21.536 L603.017,21.536 L603.017,23.260 L604.751,23.260 L604.751,21.536 ZM604.751,24.989 L603.017,24.989 L603.017,26.714 L604.751,26.714 L604.751,24.989 ZM1737.983,21.536 L1736.249,21.536 L1736.249,23.260 L1737.983,23.260 L1737.983,21.536 ZM1737.983,24.989 L1736.249,24.989 L1736.249,26.714 L1737.983,26.714 L1737.983,24.989 ZM1751.418,21.536 L1749.683,21.536 L1749.683,26.714 L1751.418,26.714 L1751.418,21.536 ZM1758.059,24.989 L1756.324,24.989 L1756.324,26.714 L1758.059,26.714 L1758.059,24.989 ZM1877.785,23.818 L1871.129,23.818 L1871.156,23.791 L1877.759,23.791 L1877.785,23.818 ZM1367.778,33.211 L1371.871,29.132 L1375.975,33.211 L1367.778,33.211 ZM469.871,23.818 L463.214,23.818 L463.241,23.791 L469.844,23.791 L469.871,23.818 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="40px">
|
||||
<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M1827.156,15.021 L1827.129,14.994 L1833.785,14.994 L1833.759,15.021 L1827.156,15.021 ZM1824.965,24.036 L1835.969,24.036 L1830.461,18.558 L1833.759,15.021 L1920.000,15.021 L1920.000,39.075 L0.001,39.075 L0.001,15.013 L271.884,15.013 L279.537,6.930 L292.458,6.930 L308.426,24.036 L308.449,24.013 L308.467,24.036 L317.638,15.021 L463.241,15.021 L466.539,18.558 L461.031,24.036 L472.035,24.036 L466.539,18.558 L469.844,15.021 L551.557,15.021 L556.251,10.578 L565.497,1.358 L571.663,7.066 L602.910,7.055 L607.919,7.055 L620.578,19.983 L654.209,19.983 L661.448,12.957 L735.709,12.995 L741.480,18.554 L750.129,9.930 L753.020,12.995 L918.181,12.957 L930.942,0.066 L954.993,24.036 L955.000,24.024 L955.012,24.036 L964.064,15.013 L967.906,15.013 L970.005,17.106 L966.670,20.419 L973.326,20.419 L970.005,17.106 L972.067,15.055 L1050.000,15.023 L1050.000,15.013 L1064.030,15.017 L1072.000,15.013 L1072.000,15.019 L1225.933,15.055 L1227.994,17.106 L1224.674,20.419 L1231.331,20.419 L1227.994,17.106 L1230.094,15.013 L1233.936,15.013 L1242.989,24.036 L1243.000,24.024 L1243.007,24.036 L1267.058,0.066 L1279.819,12.957 L1368.980,12.995 L1371.871,9.930 L1380.520,18.554 L1386.290,13.057 L1635.552,13.019 L1642.790,19.983 L1676.422,19.983 L1689.080,6.992 L1725.337,7.003 L1731.502,1.358 L1740.749,10.578 L1745.443,15.021 L1827.156,15.021 L1830.461,18.558 L1824.965,24.036 ZM341.624,18.857 L339.889,18.857 L339.889,24.036 L341.624,24.036 L341.624,18.857 ZM344.248,18.857 L342.518,18.857 L342.518,24.036 L344.248,24.036 L344.248,18.857 ZM356.370,18.857 L354.640,18.857 L354.640,24.036 L356.370,24.036 L356.370,18.857 ZM377.168,18.857 L371.973,18.857 L371.973,24.036 L377.168,24.036 L377.168,18.857 ZM584.675,12.348 L582.941,12.348 L582.941,14.073 L584.675,14.073 L584.675,12.348 ZM591.316,12.348 L589.582,12.348 L589.582,17.526 L591.316,17.526 L591.316,12.348 ZM604.751,12.348 L603.017,12.348 L603.017,14.073 L604.751,14.073 L604.751,12.348 ZM604.751,15.802 L603.017,15.802 L603.017,17.526 L604.751,17.526 L604.751,15.802 ZM1693.983,12.348 L1692.249,12.348 L1692.249,14.073 L1693.983,14.073 L1693.983,12.348 ZM1693.983,15.802 L1692.249,15.802 L1692.249,17.526 L1693.983,17.526 L1693.983,15.802 ZM1707.418,12.348 L1705.683,12.348 L1705.683,17.526 L1707.418,17.526 L1707.418,12.348 ZM1714.059,12.348 L1712.324,12.348 L1712.324,14.073 L1714.059,14.073 L1714.059,12.348 ZM463.214,14.994 L469.871,14.994 L469.844,15.021 L463.241,15.021 L463.214,14.994 ZM754.222,5.976 L750.129,9.930 L746.025,5.976 L754.222,5.976 ZM1375.975,5.976 L1371.871,9.930 L1367.778,5.976 L1375.975,5.976 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -13,8 +13,7 @@ $(document).ready(() => {
|
|||
classname: 'card has-text-centered',
|
||||
left: '',
|
||||
width: 64,
|
||||
bottom: bottomMargin,
|
||||
'border-radius': 4
|
||||
bottom: bottomMargin
|
||||
}
|
||||
};
|
||||
state['desktop-hidden'] = Object.assign({}, state.base, {
|
||||
|
|
@ -24,9 +23,8 @@ $(document).ready(() => {
|
|||
classname: state['desktop-hidden'].classname + ' fade-in'
|
||||
});
|
||||
state['desktop-dock'] = Object.assign({}, state['desktop-visible'], {
|
||||
classname: state['desktop-visible'].classname + ' fade-in',
|
||||
width: 40,
|
||||
'border-radius': '50%'
|
||||
classname: state['desktop-visible'].classname + ' fade-in is-rounded',
|
||||
width: 40
|
||||
});
|
||||
state['mobile-hidden'] = Object.assign({}, state.base, {
|
||||
classname: state.base.classname + ' fade-in',
|
||||
|
|
|
|||
Loading…
Reference in New Issue