github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(style): card image radius & safari display bug

pull/645/head
ppoffice 2020-03-13 15:34:13 -04:00
parent e12a4da764
commit 60ec7005b2
3 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

@ -31,6 +31,8 @@ jobs:
- npm install
- npm install $DEPS
- cp _config.theme.yml themes/icarus/_config.yml
- ([[ -e _config.page.yml ]] && cp _config.page.yml themes/icarus/) || true
- ([[ -e _config.post.yml ]] && cp _config.post.yml themes/icarus/) || true
- hexo g
deploy:
provider: pages

5
include/style/card.styl
View File

@ -8,6 +8,11 @@
& + .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

52
source/css/cyberpunk.styl
View File

@ -63,6 +63,7 @@ $menu-list-border-left ?= 1px solid $text
$tag-color ?= $black
$tag-background-color ?= $blue
$timeline-fg-line ?= $blue
$timeline-bg-line ?= $body-background-color
$post-navigation-fg ?= $white-bis
$searchbox-bg-container ?= $black-bis
$searchbox-border ?= $blue
@ -73,20 +74,24 @@ $searchbox-bg-result-item-hover ?= $black
@import 'style'
clip-path(clip)
clip-path: clip
-webkit-clip-path: clip
cut-corner(size)
clip-path: unquote('polygon(' + size + ' 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%, 0 ' + size + ')')
clip-path(unquote('polygon(' + size + ' 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%, 0 ' + size + ')'))
cut-corner-reverse(size)
clip-path: unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '), 0 0)')
clip-path(unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '), 0 0)'))
cut-corner-top-right(size)
clip-path: unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, 0 100%)')
clip-path(unquote('polygon(0 0, calc(100% - ' + size + ') 0, 100% ' + size + ', 100% 100%, 0 100%)'))
cut-corner-bottom-left(size)
clip-path: unquote('polygon(0 0, 100% 0, 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '))')
clip-path(unquote('polygon(0 0, 100% 0, 100% 100%, ' + size + ' 100%, 0 calc(100% - ' + size + '))'))
cut-corner-bottom-right(size)
clip-path: unquote('polygon(0 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%)')
clip-path(unquote('polygon(0 0, 100% 0, 100% calc(100% - ' + size + '), calc(100% - ' + size + ') 100%, 0 100%)'))
undercover-before()
position: relative
@ -142,22 +147,7 @@ body
.card-image + .card-content:before
cut-corner-bottom-left(16px)
.button:not(input)
border: none
outline: none
background: transparent !important
undercover-before()
&:before
cut-corner(8px)
// clip-path will cut off overflown content inside a button
// thus we need to use :before pseudo-element to style the buttons
for $name, $pair in $colors
$color = $pair['1']
$color-invert = $pair['2']
&.is-{$name}
clip-button($color, $color-invert)
&:before
background-color: $color
color: $color-invert
@ -190,6 +180,24 @@ body
box-shadow: none
color: $color
.button:not(input)
border: none
outline: none
background: transparent !important
undercover-before()
&:before
cut-corner(8px)
// clip-path will cut off overflown content inside a button
// thus we need to use :before pseudo-element to style the buttons
for $name, $pair in $colors
$color = $pair['1']
$color-invert = $pair['2']
&.is-{$name}
clip-button($color, $color-invert)
.field.has-addons
.control:not(:first-child)
.button
@ -245,7 +253,7 @@ article.article, article.media
article.article
.article-more
@extend .button.is-link
clip-button($info, $info-invert)
.content
blockquote