Purple main nav

Author: RoyalIcing

lib/components_guide_web/templates/layout/_banner.html.heex

@@ -4,13 +4,13 @@
       <summary class="block w-48 text-left pl-6 text-base uppercase font-bold tracking-wider">
         Navigate to
       </summary>
-      <details-menu role="menu" class="absolute z-[var(--z-menu)] top-full left-0 flex flex-col py-2 text-left text-lg font-bold whitespace-nowrap text-blue-800 bg-white/80 rounded shadow-lg backdrop-blur-xl">
-        <%= link("React + TypeScript", to: "/react+typescript", class: "py-3 px-6 hover:text-blue-200 hover:bg-gray-900") %>
-        <%= link("React Playground", to: "/react-playground", class: "py-3 px-6 hover:text-blue-200 hover:bg-gray-900") %>
-        <%= link("Accessibility First", to: "/accessibility-first", class: "py-3 px-6 hover:text-blue-200 hover:bg-gray-900") %>
-        <%= link("Web Standards", to: "/web-standards", class: "py-3 px-6 hover:text-blue-200 hover:bg-gray-900") %>
-        <%= link("Composable Systems", to: "/composable-systems", class: "py-3 px-6 hover:text-blue-200 hover:bg-gray-900") %>
-        <%= link("Developer Calendar", to: "/calendar", class: "py-3 px-6 hover:text-blue-200 hover:bg-gray-900") %>
+      <details-menu role="menu" class="absolute z-[var(--z-menu)] top-full left-0 flex flex-col py-2 text-left text-lg font-bold whitespace-nowrap text-purple-800 bg-purple-100 rounded ring-2 ring-purple-400 backdrop-blur-xl">
+        <%= link("React & TypeScript", to: "/react+typescript", class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900") %>
+        <%= link("React Playground", to: "/react-playground", class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900") %>
+        <%= link("Accessibility First", to: "/accessibility-first", class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900") %>
+        <%= link("Web Standards", to: "/web-standards", class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900") %>
+        <%= link("Composable Systems", to: "/composable-systems", class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900") %>
+        <%= link("Developer Calendar", to: "/calendar", class: "py-3 px-6 hover:text-purple-50 hover:bg-purple-900") %>
       </details-menu>
     </details>