diff --git a/apps/phx_wc_storybook_web/assets/css/app.css b/apps/phx_wc_storybook_web/assets/css/app.css index 4f0db667..f701d02f 100644 --- a/apps/phx_wc_storybook_web/assets/css/app.css +++ b/apps/phx_wc_storybook_web/assets/css/app.css @@ -27,6 +27,21 @@ ); } +.phx-wc-hero-text { + text-shadow: #fc0 1px 0 10px; + transition: all 1s; + animation: 4s linear 1s infinite running bg-rainbow-turn; +} +.phx-wc-hero-p-text { + text-shadow: 1px -2px 2px #222a30; +} +@keyframes bg-rainbow-turn { + 0% { background-image: linear-gradient(to top left, #fac2b0, #b4e3da); } + 25% { background-image: linear-gradient(to top right, #fac2b0, #b4e3da); } + 50% { background-image: linear-gradient(to bottom right, #fac2b0, #b4e3da); } + 75% { background-image: linear-gradient(to bottom left, #fac2b0, #b4e3da); } +} + app-bar { --btn-link: rgb(238, 249, 238); } diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex index 70dd7416..c40dd272 100644 --- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex +++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex @@ -11,9 +11,11 @@ -
<%= @inner_content %> diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex index 438406bb..12825b18 100644 --- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex +++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex @@ -1,9 +1,9 @@ <.wc_page_header class={[ - "bg-gradient-to-br from-cyan-500 to-blue-500", + "bg-gradient-to-br from-[#ff6f61] to-[#639]", "text-slate-200 h-[680px] py-6" ]} - nav_class={["bg-slate-50 text-sky-700 shadow"]} + nav_class={["bg-gradient-to-br from-[#ff6f61] to-[#639] text-slate-200 shadow"]} > <:menu to={~p"/"} class="border-b-2 border-slate-50">Home <:menu to={~p"/hook"} class="opacity-60">Hook @@ -18,17 +18,21 @@Bring web components to Phoneix
+ <.link href="/#hook" class="my-4 px-4 py-2 text-4xl bg-rose-400 rounded shadow-md hover:shadow-2xl"> + See More +- This Hook binding custom element's custom events to phoenix live events. +
+ Binding custom element's custom events to phoenix live events.
-- This Hook also binding phoenix live events to custom element's custom action. +
+ Binding phoenix live events to custom element's custom action.
+
Includs 7000+ Material Design Commmunity Icons.
+
Includs 1900+ Bootstrap Icons.
- Documents in storybook -
+