From feadc8bf4671ea9041d7ff7d0d4f2d9c5be6c924 Mon Sep 17 00:00:00 2001 From: Marco Burstein Date: Mon, 25 Mar 2019 15:48:40 -0700 Subject: [PATCH] portico: Fix trapsarent gradient styling inconsistencies. Instead of using the `trapsarent` keyword, which is interpreted as Safari as black with an opacity of 0%, re-use the gradient colors themselves in order to lead to a single color gradient. This allows for the homepage to look the same regardless of browser. Fix #11985. --- static/styles/landing-page.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/static/styles/landing-page.scss b/static/styles/landing-page.scss index 80286b2848..f76bed7db2 100644 --- a/static/styles/landing-page.scss +++ b/static/styles/landing-page.scss @@ -702,23 +702,23 @@ nav ul li.active::after { } .portico-landing.hello .gradients .gradient.dark-blue { - background: linear-gradient(10deg, transparent 50%, rgba(15, 46, 57, 0.7)); + background: linear-gradient(10deg, rgba(15, 46, 57, 0) 50%, rgba(15, 46, 57, 0.7)); } .portico-landing.hello .gradients .gradient.green { - background: linear-gradient(-25deg, transparent 40%, hsl(156, 47%, 47%)); + background: linear-gradient(-25deg, hsla(156, 47%, 47%, 0) 40%, hsl(156, 47%, 47%)); } .portico-landing.hello .gradients .gradient.blue { - background: linear-gradient(25deg, transparent 40%, hsl(196, 38%, 51%)); + background: linear-gradient(25deg, hsla(196, 38%, 51%, 0) 40%, hsl(196, 38%, 51%)); } .portico-landing.hello .gradients .gradient.sunburst { - background: linear-gradient(5deg, transparent 20%, hsl(49, 71%, 68%)); + background: linear-gradient(5deg, hsla(49, 71%, 68%, 0) 20%, hsl(49, 71%, 68%)); } .portico-landing.hello .gradients .gradient.white-fade { - background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, transparent 40%); + background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, hsla(0, 0%, 98%, 0) 40%); } .portico-landing.hello .hero .waves { @@ -2792,23 +2792,23 @@ nav ul li.active::after { } .gradients .gradient.dark-blue { - background: linear-gradient(10deg, transparent 50%, rgba(15, 46, 57, 0.7)); + background: linear-gradient(10deg, rgba(15, 46, 57, 0) 50%, rgba(15, 46, 57, 0.7)); } .gradients .gradient.green { - background: linear-gradient(-25deg, transparent 40%, hsl(156, 47%, 47%)); + background: linear-gradient(-25deg, hsla(156, 47%, 47%, 0) 40%, hsl(156, 47%, 47%)); } .gradients .gradient.blue { - background: linear-gradient(25deg, transparent 40%, hsl(196, 38%, 51%)); + background: linear-gradient(25deg, hsla(196, 38%, 51%, 0) 40%, hsl(196, 38%, 51%)); } .gradients .gradient.sunburst { - background: linear-gradient(5deg, transparent 20%, hsl(49, 71%, 68%)); + background: linear-gradient(5deg, hsla(49, 71%, 68%, 0) 20%, hsl(49, 71%, 68%)); } .gradients .gradient.white-fade { - background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, transparent 40%); + background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, hsla(0, 0%, 98%, 0) 40%); } /* -- pricing css -- */