Fix header gradient for Safari

rik · web-flow · commit 723fcd4ebb96 · 2020-12-02T17:25:00.000Z
Safari has a [different behaviour for gradients using the transparent keyword](https://bugs.webkit.org/show_bug.cgi?id=150940). To workaround it, let's be very explicit about the flavour of transparent we want.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -20,7 +20,7 @@
   </head>
   <body class="d-flex flex-column height-full">
     <header class="position-sticky top-0 d-flex"
-      style="z-index: 1; background-image: linear-gradient(to top, transparent, white 25%)">
+      style="z-index: 1; background-image: linear-gradient(to top, rgba(255, 255, 255, 0), white 25%)">
       <div class="flex-1 pl-3 pb-6 col-3 {% if page.layout != "default" %}bg-gray{% endif %}">
         <h1 class="m-0 mt-2">Catalyst</h1>
       </div>
