[opt] card hover effect

source/css/_defines/func.styl

@@ -104,7 +104,12 @@ floatable-float()
   box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15)
   transform: translate3d(0, -2px, 0)
 
-hover-float()
-  floatable-trans()
-  &:hover
-    floatable-float()
+hoverable-card()
+  trans1 all
+  @media (prefers-color-scheme: dark)
+    &:hover
+      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
+  @media (prefers-color-scheme: light)
+    box-shadow: $boxshadow-card
+    &:hover
+      floatable-float()

source/css/_layout/list.styl

@@ -25,13 +25,7 @@
   margin: 1rem 0
   border-radius: $border-card
   background: var(--card)
-  @media (prefers-color-scheme: dark)
-    &:hover
-      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
-  @media (prefers-color-scheme: light)
-    box-shadow: $boxshadow-card
-    hover-float()
-  trans1 all
+  hoverable-card()
   overflow: hidden
   z-index: 0
   

source/css/_layout/tag-plugins/grid.styl

@@ -21,5 +21,4 @@
     background: var(--block)
   &[bg='card']>.cell
     background: var(--card)
-    box-shadow: $boxshadow-card
-    hover-float()
+    hoverable-card()

source/css/_layout/tag-plugins/link.styl

@@ -11,9 +11,8 @@
   cursor: pointer
   width: 300px
   max-width: 100%
-  box-shadow: $boxshadow-card
   border-radius: $border-card
-  hover-float()
+  hoverable-card()
 
 .md-text .link-card.plain
   flex-direction: row