From 903e10859c400762ce261a11dfa6428b958d52c7 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Sun, 30 Aug 2020 23:26:33 +0200 Subject: [PATCH 1/3] fix homepage app list graphical issue --- website/static/css/homepage/AppList.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/website/static/css/homepage/AppList.css b/website/static/css/homepage/AppList.css index 99e66cb8268..92341186613 100644 --- a/website/static/css/homepage/AppList.css +++ b/website/static/css/homepage/AppList.css @@ -8,3 +8,8 @@ .AppList .item { list-style: none; } + +.AppList .item a { + background-color: transparent; + border-bottom: 0; +} From 2a129a98e88ba618c19070bd4a84868485649d6d Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Sun, 30 Aug 2020 23:50:01 +0200 Subject: [PATCH 2/3] add simple hover effect + tweak for square images --- website/static/css/homepage/AppList.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/website/static/css/homepage/AppList.css b/website/static/css/homepage/AppList.css index 92341186613..eb68293fcdf 100644 --- a/website/static/css/homepage/AppList.css +++ b/website/static/css/homepage/AppList.css @@ -12,4 +12,13 @@ .AppList .item a { background-color: transparent; border-bottom: 0; + transition: opacity 0.33s; +} + +.AppList .item a:hover { + opacity: 0.66; +} + +.AppList .item img { + border-radius: 12px; } From 85c1ae4b9708e0137edba35fbb3025a32c5f73ac Mon Sep 17 00:00:00 2001 From: R Nabors Date: Wed, 2 Sep 2020 15:36:58 +0100 Subject: [PATCH 3/3] tweaking the animation duration and easing --- website/static/css/homepage/AppList.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/static/css/homepage/AppList.css b/website/static/css/homepage/AppList.css index eb68293fcdf..953421545bf 100644 --- a/website/static/css/homepage/AppList.css +++ b/website/static/css/homepage/AppList.css @@ -12,7 +12,7 @@ .AppList .item a { background-color: transparent; border-bottom: 0; - transition: opacity 0.33s; + transition: opacity 250ms ease-out; } .AppList .item a:hover {