go for theming like a boss, then back out bc of prose styles :3
This commit is contained in:
parent
82dd5e0e7f
commit
1eb249a510
5 changed files with 26 additions and 20 deletions
|
@ -7,23 +7,26 @@
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
|
--color-primary: 16 185 129;
|
||||||
--color-background: 255 255 255;
|
--color-background: 255 255 255;
|
||||||
--color-text-base: 82 82 91;
|
--color-text-base: 82 82 91;
|
||||||
--color-text-heading: 24 24 27;
|
--color-text-heading: 24 24 27;
|
||||||
--color-text-muted: 82 82 91;
|
--color-text-muted: 82 82 91;
|
||||||
--color-primary: 16 185 129;
|
--color-text-dim: 244 244 245;
|
||||||
--color-secondary: 245 158 11;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[data-theme=roguelight] {
|
:root[data-theme=roguelight] {
|
||||||
--color-background: 118 174 128;
|
--color-primary: 150 207 133;
|
||||||
|
--color-background: 53 43 49;
|
||||||
--color-text-base: 245 245 212;
|
--color-text-base: 245 245 212;
|
||||||
--color-text-heading: 150 44 67;
|
--color-text-heading: 150 207 133;
|
||||||
--color-text-muted: 245 245 212;
|
--color-text-muted: 245 245 212;
|
||||||
--color-primary: 150 44 67;
|
--color-text-dim: 74 107 131;
|
||||||
--color-secondary: 150 44 67;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Set appropriate width for identity icons */
|
/* Set appropriate width for identity icons */
|
||||||
a[rel] svg { width: 1em; }
|
a[rel] svg {
|
||||||
|
width: 1em;
|
||||||
|
fill: rgb(var(--color-text-heading));
|
||||||
|
}
|
|
@ -19,11 +19,11 @@ module.exports = {
|
||||||
gray: colors.zinc,
|
gray: colors.zinc,
|
||||||
theme: {
|
theme: {
|
||||||
primary: 'rgb(var(--color-primary) / <alpha-value>)',
|
primary: 'rgb(var(--color-primary) / <alpha-value>)',
|
||||||
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
|
|
||||||
heading: 'rgb(var(--color-text-heading) / <alpha-value>)',
|
heading: 'rgb(var(--color-text-heading) / <alpha-value>)',
|
||||||
base: 'rgb(var(--color-text-base) / <alpha-value>)',
|
base: 'rgb(var(--color-text-base) / <alpha-value>)',
|
||||||
muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
|
muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
|
||||||
background: 'rgb(var(--color-background) / <alpha-value>)'
|
background: 'rgb(var(--color-background) / <alpha-value>)',
|
||||||
|
dim: 'rgb(var(--color-text-dim) / <alpha-value>)'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
<header class="px-4 sm:px-6 lg:px-8">
|
<header class="px-4 sm:px-6 lg:px-8">
|
||||||
<div class="flex items-center justify-between border-b border-gray-100 py-3">
|
<div class="flex items-center justify-between border-b border-theme-dim py-3">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<a href="/">Chiya</a>
|
<a href="/" class="text-theme-primary font-semibold hover:text-theme-primary/75">Chiya</a>
|
||||||
<p class="rounded-full bg-theme-primary px-2 text-[0.8125rem] font-medium leading-6">
|
<p class="rounded-full bg-theme-base/5 px-2 text-[0.8125rem] font-medium leading-6 text-theme-base">
|
||||||
v<%= Application.spec(:chiya, :vsn) %>
|
v<%= Application.spec(:chiya, :vsn) %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<.link
|
<.link
|
||||||
href={~p"/n/about"}
|
href={~p"/n/about"}
|
||||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
|
class="text-xs font-semibold leading-6 text-theme-base hover:text-theme-base/75"
|
||||||
>
|
>
|
||||||
About
|
About
|
||||||
</.link>
|
</.link>
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
rel={identity.rel}
|
rel={identity.rel}
|
||||||
href={identity.url}
|
href={identity.url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-gray-50 hover:text-gray-900"
|
class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-theme-dim"
|
||||||
>
|
>
|
||||||
<%= raw identity.icon %>
|
<%= raw identity.icon %>
|
||||||
<%= identity.name %>
|
<%= identity.name %>
|
||||||
|
@ -28,8 +28,8 @@
|
||||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||||
<%= for note <- @channel.notes do %>
|
<%= for note <- @channel.notes do %>
|
||||||
<a href={~p"/n/#{note.slug}"} class="group">
|
<a href={~p"/n/#{note.slug}"} class="group">
|
||||||
<span class="text-theme-heading text-lg font-semibold leading-8"><%= note.name %></span>
|
<span class="text-theme-heading text-lg font-semibold leading-8 group-hover:text-theme-heading/75"><%= note.name %></span>
|
||||||
<span class="text-theme-muted text-sm"><%= pretty_date(note.published_at) %></span>
|
<span class="text-theme-muted text-sm group-hover:text-theme-muted/75"><%= pretty_date(note.published_at) %></span>
|
||||||
</a>
|
</a>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,10 @@
|
||||||
<.header>
|
<header>
|
||||||
<%= @note.name %>
|
<h1 class="text-lg font-semibold leading-8 text-theme-heading"><%= @note.name %></h1>
|
||||||
<:subtitle><%= pretty_date(@note.published_at) %></:subtitle>
|
<p class="mt-2 text-sm leading-6 text-theme-muted">
|
||||||
</.header>
|
<%= pretty_date(@note.published_at) %>
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<section class="prose mt-8">
|
<section class="prose mt-8">
|
||||||
<%= Markdown.render(@note.content) |> raw %>
|
<%= Markdown.render(@note.content) |> raw %>
|
||||||
|
|
Loading…
Reference in a new issue