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

.travis.yml

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

include/style/card.styl

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

source/css/cyberpunk.styl

@@ -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)
+clip-button($color, $color-invert)
-    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}
     &: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