Better header

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/index-old.html.eex

@@ -18,18 +18,7 @@
   </header>
 </div>
 
-<header class="text-white" style="background: <%= header_background() %>;">
-  <div class="container px-6 pt-12 pb-12">
-    <h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
-      <%= "🥇 Accessibility-First Development" %>
-    </h1>
-    <p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-shadow">
-      <%#= "Write simpler, more robust tests using accessibility affordances." %>
-      <%= "Write simpler, more robust tests via user-friendly accessibility affordances." %>
-    </p>
-    <%= render @view_module, "_nav.html" %>
-  </div>
-</header>
+<%= render @view_module, "_header.html" %>
 
 <div class="bg-white">
   <%= section "Topics", class: "container pt-8 pb-16 text-2xl" do %>

apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/landmarks.html.eex

@@ -16,24 +16,14 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
     content_tag(:td, content |> line(), class: "px-3 py-1")
   end
 
-  def header_background do
-    Styling.linear_gradient("150grad", [
-      {:lab, 70, 40, -50},
-      {:lab, 60, -30, -50},
-      {:lab, 50, 0, -80}
-    ])
-  end
-
   def header_styles() do
-    l = 50
-    a = -60
-    b = -90
-    color = {:lab, l, a, b}
+    color = {:lab, 47, 10, -44}
 
     gradient = Styling.linear_gradient("150grad", [
-      {:lab, l * 1.1, a * 1.1, b * 1.4},
+      {:lab, 47, 5, -44},
+      {:lab, 47, -24, -44},
       color,
-      {:lab, l * 1.3, a * 0.5, b * 0.5},
+      {:lab, 47, 53, -44}
     ])
 
     "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"