diff --git a/source/css/_custom.styl b/source/css/_custom.styl index 1f6fe14..af07ad8 100644 --- a/source/css/_custom.styl +++ b/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) +$boxshadow-block = 0 1px 4px 0px rgba(0, 0, 0, 0.02), 0 2px 8px 0px rgba(0, 0, 0, 0.02) \ No newline at end of file diff --git a/source/css/_defines/func.styl b/source/css/_defines/func.styl index 86fcee6..9b0fa4e 100644 --- a/source/css/_defines/func.styl +++ b/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() \ No newline at end of file diff --git a/source/css/_layout/list.styl b/source/css/_layout/list.styl index 78f473d..a0a6400 100644 --- a/source/css/_layout/list.styl +++ b/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%) diff --git a/source/css/_layout/partial/navbar.styl b/source/css/_layout/partial/navbar.styl index f898d94..3ee1220 100644 --- a/source/css/_layout/partial/navbar.styl +++ b/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 diff --git a/source/css/_layout/tag-plugins/friends.styl b/source/css/_layout/tag-plugins/friends.styl index 018a4fb..7a06b26 100644 --- a/source/css/_layout/tag-plugins/friends.styl +++ b/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 diff --git a/source/css/_layout/tag-plugins/grid.styl b/source/css/_layout/tag-plugins/grid.styl index 3442edc..a4d22ae 100644 --- a/source/css/_layout/tag-plugins/grid.styl +++ b/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 \ No newline at end of file + hover-float() \ No newline at end of file diff --git a/source/css/_layout/tag-plugins/link.styl b/source/css/_layout/tag-plugins/link.styl index 0acdd9c..232130a 100644 --- a/source/css/_layout/tag-plugins/link.styl +++ b/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 diff --git a/source/css/_layout/tag-plugins/sites.styl b/source/css/_layout/tag-plugins/sites.styl index f088788..e260431 100644 --- a/source/css/_layout/tag-plugins/sites.styl +++ b/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() diff --git a/source/css/_layout/widgets/ghrepo.styl b/source/css/_layout/widgets/ghrepo.styl index ae9f189..dc43327 100644 --- a/source/css/_layout/widgets/ghrepo.styl +++ b/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