diff --git a/assets/css/app.css b/assets/css/app.css index 0047a51..963c68c 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -53,6 +53,10 @@ & a { @apply p-3 rounded hover:bg-primary-700 transition; + + &.active { + @apply bg-primary-700; + } } } @@ -68,6 +72,10 @@ & h3 { @apply m-0; } + + & a.active { + @apply text-primary-500; + } } /* === SITE CONTENT === */ @@ -98,7 +106,7 @@ /* === PAGE HEADER === */ header.page-header { - @apply border-b border-neutral-300 mb-6 prose max-w-none; + @apply border-b border-foreground/50 mb-6 prose max-w-none; } header.page-header h1 { @@ -112,7 +120,7 @@ /* === PAGE GRID === */ section.page-grid { - @apply grid grid-cols-1 md:grid-cols-3 gap-3; + @apply grid grid-cols-1 md:grid-cols-3 gap-6; > section { @apply col-span-1 md:col-span-2; @@ -135,7 +143,7 @@ } .divider { - @apply flex text-red-500 items-center my-8 w-full mx-auto last:hidden; + @apply flex text-primary-500 items-center my-8 w-full mx-auto last:hidden; @apply before:flex-1 before:content-[''] before:bg-neutral-500/25 before:p-[0.5px] before:mr-2; @apply after:flex-1 after:content-[''] after:bg-neutral-500/25 after:p-[0.5px] after:ml-2; } diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index ab08a61..5636983 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -17,11 +17,43 @@ module.exports = { container: { center: true }, extend: { colors: { - primary: colors.sky, + primary: colors.rose, neutral: colors.slate, foreground: 'rgb(var(--color-foreground) / )', background: 'rgb(var(--color-background) / )' - } + }, + typography: ({ theme }) => ({ + colorful: { + css: { + '--tw-prose-lead': theme('colors.rose[700]'), + '--tw-prose-links': theme('colors.rose[900]'), + '--tw-prose-counters': theme('colors.rose[600]'), + '--tw-prose-bullets': theme('colors.rose[400]'), + '--tw-prose-hr': theme('colors.rose[300]'), + '--tw-prose-quotes': theme('colors.rose[900]'), + '--tw-prose-quote-borders': theme('colors.rose[300]'), + '--tw-prose-captions': theme('colors.rose[700]'), + '--tw-prose-code': theme('colors.rose[900]'), + '--tw-prose-pre-code': theme('colors.rose[100]'), + '--tw-prose-pre-bg': theme('colors.rose[900]'), + '--tw-prose-th-borders': theme('colors.rose[300]'), + '--tw-prose-td-borders': theme('colors.rose[200]'), + '--tw-prose-invert-lead': theme('colors.rose[300]'), + '--tw-prose-invert-links': theme('colors.white'), + '--tw-prose-invert-counters': theme('colors.rose[400]'), + '--tw-prose-invert-bullets': theme('colors.rose[600]'), + '--tw-prose-invert-hr': theme('colors.rose[700]'), + '--tw-prose-invert-quotes': theme('colors.rose[100]'), + '--tw-prose-invert-quote-borders': theme('colors.rose[700]'), + '--tw-prose-invert-captions': theme('colors.rose[400]'), + '--tw-prose-invert-code': theme('colors.white'), + '--tw-prose-invert-pre-code': theme('colors.rose[300]'), + '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', + '--tw-prose-invert-th-borders': theme('colors.rose[600]'), + '--tw-prose-invert-td-borders': theme('colors.rose[700]'), + }, + }, + }), } }, plugins: [ diff --git a/lib/chiya_web/components/layouts.ex b/lib/chiya_web/components/layouts.ex index a49bec1..5718213 100644 --- a/lib/chiya_web/components/layouts.ex +++ b/lib/chiya_web/components/layouts.ex @@ -1,5 +1,6 @@ defmodule ChiyaWeb.Layouts do use ChiyaWeb, :html + import PhoenixActiveLink embed_templates "layouts/*" end diff --git a/lib/chiya_web/components/layouts/public.html.heex b/lib/chiya_web/components/layouts/public.html.heex index 3d8af17..204867c 100644 --- a/lib/chiya_web/components/layouts/public.html.heex +++ b/lib/chiya_web/components/layouts/public.html.heex @@ -1,2 +1,12 @@ <.flash_group flash={@flash} /> -<%= @inner_content %> + +<%= if @page_header do %> + +<% end %> + +
+ <%= @inner_content %> +
diff --git a/lib/chiya_web/components/layouts/root_public.html.heex b/lib/chiya_web/components/layouts/root_public.html.heex index 24764ee..d3c4b1f 100644 --- a/lib/chiya_web/components/layouts/root_public.html.heex +++ b/lib/chiya_web/components/layouts/root_public.html.heex @@ -25,6 +25,7 @@