[opt] css

source/css/_custom.styl

@@ -89,6 +89,6 @@ $border-button = 4px
 // shadow
 $boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
 $boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)
-$boxshadow-card-float = 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
+$boxshadow-card-float = 0 12px 16px -4px rgba(0, 0, 0, 0.2)
 $boxshadow-button = 0 0 2px 0px rgba(0, 0, 0, 0.04), 0 0 8px 0px rgba(0, 0, 0, 0.04)
 $boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02)

source/css/_defines/func.styl

@@ -97,3 +97,14 @@ hover-block($v, $h, $br = 4px)
   trans2 color background
   &:hover
     background: var(--block-hover)
+
+floatable-trans()
+  trans2 transform box-shadow
+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()

source/css/_layout/list.styl

@@ -54,7 +54,6 @@
         height: 1.5em
 
 .post-list .post-card:hover
-  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
   img 
     transform: scale(1.02)
     filter: brightness(80%)

source/css/_layout/partial/navbar.styl

@@ -24,11 +24,11 @@ nav.cap
   >p
     margin: 0
   a
-    padding: .25rem 1rem
-    margin: 10px 0 8px 0
+    padding: .25rem 0.75rem
+    margin: 10px 0.25rem 8px 0.25rem
     line-height: 2
     color: var(--text-p3)
-    border-radius: 4px
+    border-radius: $border-button
     font-weight: 500
     white-space: nowrap
     position: relative
@@ -37,8 +37,8 @@ nav.cap
       height: 2px
       position: absolute
       bottom: -8px
-      left: 1rem
-      right: 1rem
+      left: 0.75rem
+      right: 0.75rem
       background: $color-theme
       border-radius: 2px
       pointer-events: none

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

@@ -32,7 +32,7 @@
 // transform
 .users-wrap .user-card .card-link
   >img
-    trans2 transform box-shadow
+    floatable-trans()
   &:hover
     background: var(--block-hover)
     img

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

@@ -26,7 +26,4 @@
   &[bg='card']>.cell
     background: var(--card)
     box-shadow: $boxshadow-card
-    trans2 box-shadow transform
-    &:hover
-      transform: translateY(-1px)
-      box-shadow: $boxshadow-card-float
+    hover-float()

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

@@ -13,10 +13,7 @@
   max-width: 100%
   box-shadow: $boxshadow-card
   border-radius: $border-bar
-  trans2: box-shadow transform
-  &:hover
-    box-shadow: $boxshadow-card-float
-    transform: translateY(-1px)
+  hover-float()
 
 .md-text .link-card.plain
   flex-direction: row

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

@@ -49,8 +49,7 @@
 // transform
 .sites-wrap .site-card .card-link
   >img
-    trans2: box-shadow transform
+    floatable-trans()
   &:hover
     >img
-      box-shadow: $boxshadow-float, $boxshadow-card-float
-      transform: translateY(-2px)
+      floatable-float()

source/css/_layout/widgets/ghrepo.styl

@@ -6,14 +6,11 @@
     background: var(--card)
     border-radius: $border-block
     box-shadow: $boxshadow-card
-    trans2 box-shadow transform
+    hover-float()
     >div+div
       margin-top: 0.5rem
     span
       color: var(--text-p2)
-    &:hover
-      box-shadow: $boxshadow-card-float
-      transform: translateY(-1px)
     svg
       margin-right: 4px
     .flex-row