remake theme, focus on gruvbox #75
7 changed files with 131 additions and 123 deletions
|
@ -7,95 +7,71 @@
|
|||
@import "./lightbox.css";
|
||||
|
||||
@layer base {
|
||||
:root[data-theme=default] {
|
||||
--color-primary: 68 68 68;
|
||||
--color-background: 255 255 255;
|
||||
--color-text-base: 68 68 68;
|
||||
--color-text-heading: 68 68 68;
|
||||
--color-text-muted: 153 153 153;
|
||||
--color-text-dim: 204 204 204;
|
||||
:root { font-family: 'Inter', sans-serif; }
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root { font-family: 'Inter var', sans-serif; }
|
||||
}
|
||||
|
||||
:root[data-theme=default][data-mode=dark] {
|
||||
--color-primary: 255 255 255;
|
||||
--color-background: 34 34 34;
|
||||
--color-text-base: 204 204 204;
|
||||
--color-text-heading: 255 255 255;
|
||||
--color-text-muted: 102 102 102;
|
||||
--color-text-dim: 68 68 68;
|
||||
:root {
|
||||
--color-primary: 214 93 14; /* orange */
|
||||
--color-primary1: 175 58 3; /* orange faded */
|
||||
|
||||
--color-secondary: 104 157 106; /* aqua */
|
||||
--color-secondary1: 66 123 88; /* aqua faded */
|
||||
|
||||
--color-background: 253 244 193; /* light0 */
|
||||
--color-background1: 235 219 178; /* light1 */
|
||||
|
||||
--color-foreground: 60 56 54; /* dark1 */
|
||||
--color-foreground1: 80 73 69; /* dark2 */
|
||||
|
||||
--color-heading: var(--color-secondary);
|
||||
--color-code: var(--color-background1);
|
||||
|
||||
@apply selection:bg-theme-primary/50;
|
||||
}
|
||||
|
||||
:root[data-theme=frame] {
|
||||
--color-primary: 91 82 254;
|
||||
--color-background: 237 238 242;
|
||||
--color-text-base: 38 43 55;
|
||||
--color-text-heading: 57 65 83;
|
||||
--color-text-muted: 57 65 83;
|
||||
--color-text-dim: 76 87 111;
|
||||
:root[data-mode=dark] {
|
||||
--color-primary: 214 93 14; /* orange */
|
||||
--color-primary1: 254 128 25; /* orange bright */
|
||||
|
||||
--color-secondary: 104 157 106; /* aqua */
|
||||
--color-secondary1: 142 192 124; /* aqua faded */
|
||||
|
||||
--color-background: 40 40 40; /* dark0 */
|
||||
--color-background1: 60 56 54; /* dark1 */
|
||||
|
||||
--color-foreground: 235 219 178; /* light1 */
|
||||
--color-foreground1: 213 196 161; /* light2 */
|
||||
|
||||
--color-heading: var(--color-secondary);
|
||||
--color-code: var(--color-base);
|
||||
}
|
||||
|
||||
:root[data-theme=frame][data-mode=dark] {
|
||||
--color-primary: 91 82 254;
|
||||
--color-background: 38 43 55;
|
||||
--color-text-base: 204 204 204;
|
||||
--color-text-heading: 204 204 204;
|
||||
--color-text-muted: 76 87 111;
|
||||
--color-text-dim: 57 65 83;
|
||||
}
|
||||
|
||||
:root[data-theme=gruvbox] {
|
||||
--color-primary: 175 58 3;
|
||||
--color-background: 251 241 199;
|
||||
--color-text-base :40 40 40;
|
||||
--color-text-heading: 66 123 88;
|
||||
--color-text-muted: 60 56 54;
|
||||
--color-text-dim: 102 92 84;
|
||||
}
|
||||
|
||||
:root[data-theme=gruvbox][data-mode=dark] {
|
||||
--color-primary: 214 93 14;
|
||||
--color-background: 40 40 40;
|
||||
--color-text-base: 251 241 199;
|
||||
--color-text-heading: 104 157 106;
|
||||
--color-text-muted: 235 219 178;
|
||||
--color-text-dim: 189 174 147;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Invert prose styles based on the variant of the theme.
|
||||
*/
|
||||
:root[data-mode=dark] .prose {
|
||||
:root[data-mode=dark] .prose {
|
||||
@apply prose-invert;
|
||||
}
|
||||
}
|
||||
|
||||
.prose :where(a):not(:where([class~="not-prose"] *)) {
|
||||
@apply underline decoration-1 decoration-theme-primary;
|
||||
}
|
||||
|
||||
.prose :where(h2):not(:where([class~="not-prose"] *)) {
|
||||
@apply font-serif text-theme-heading;
|
||||
}
|
||||
|
||||
.prose img {
|
||||
@apply rounded border border-theme-dim;
|
||||
}
|
||||
|
||||
/* Set width and color for identity icons */
|
||||
a[rel] svg {
|
||||
@layer components {
|
||||
/* Set width and color for identity icons */
|
||||
a[rel] svg {
|
||||
width: 1em;
|
||||
fill: rgb(var(--color-primary));
|
||||
}
|
||||
|
||||
/* Set width and color for identity icons */
|
||||
svg {
|
||||
}
|
||||
svg {
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
.alert {
|
||||
@apply p-3 mt-3 rounded;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
.alert.alert-danger {
|
||||
@apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
@apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
|
||||
}
|
||||
}
|
|
@ -1,23 +1,22 @@
|
|||
.ll-nam { /* words */
|
||||
color: #2196f3;
|
||||
@apply text-code-500;
|
||||
@apply text-theme-code;
|
||||
}
|
||||
.ll-num { /* numbers */
|
||||
@apply text-code-400;
|
||||
@apply text-theme-code;
|
||||
}
|
||||
.ll-str { /* strings */
|
||||
@apply text-code-600;
|
||||
@apply text-theme-code;
|
||||
}
|
||||
.ll-rex { /* regular expressions */
|
||||
@apply text-code-600;
|
||||
@apply text-theme-code;
|
||||
}
|
||||
.ll-pct { /* operators, punctation */
|
||||
@apply text-code-200;
|
||||
@apply text-theme-code;
|
||||
}
|
||||
.ll-key { /* keywords */
|
||||
@apply text-code-300 font-bold;
|
||||
@apply text-theme-code font-bold;
|
||||
}
|
||||
.ll-com { /* comments */
|
||||
@apply text-code-100;
|
||||
@apply text-theme-code;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
@ -15,16 +15,37 @@ module.exports = {
|
|||
darkMode: ['class', '[data-mode="dark"]'],
|
||||
theme: {
|
||||
extend: {
|
||||
typography: {
|
||||
gruvbox: {
|
||||
css: {
|
||||
'--tw-prose-body': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-links': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-headings': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-bold': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-quotes': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-bullets': 'rgb(var(--color-primary))',
|
||||
'--tw-prose-quote-borders': 'rgb(var(--color-primary))',
|
||||
'--tw-prose-invert-body': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-invert-links': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-invert-headings': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-invert-bold': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-invert-quotes': 'rgb(var(--color-foreground))',
|
||||
'--tw-prose-invert-bullets': 'rgb(var(--color-primary))',
|
||||
'--tw-prose-invert-quote-borders': 'rgb(var(--color-primary))'
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
code: colors.emerald,
|
||||
gray: colors.zinc,
|
||||
theme: {
|
||||
primary: 'rgb(var(--color-primary) / <alpha-value>)',
|
||||
heading: 'rgb(var(--color-text-heading) / <alpha-value>)',
|
||||
base: 'rgb(var(--color-text-base) / <alpha-value>)',
|
||||
muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
|
||||
background: 'rgb(var(--color-background) / <alpha-value>)',
|
||||
dim: 'rgb(var(--color-text-dim) / <alpha-value>)'
|
||||
background1: 'rgb(var(--color-background1) / <alpha-value>)',
|
||||
base: 'rgb(var(--color-foreground) / <alpha-value>)',
|
||||
base1: 'rgb(var(--color-foreground1) / <alpha-value>)',
|
||||
primary: 'rgb(var(--color-primary) / <alpha-value>)',
|
||||
heading: 'rgb(var(--color-heading) / <alpha-value>)',
|
||||
code: 'rgb(var(--color-code) / <alpha-value>)'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -1,36 +1,42 @@
|
|||
<header class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-end border-b border-gray-300 dark:border-gray-800 py-3">
|
||||
<% items = [
|
||||
%{
|
||||
path: ~p"/admin/notes",
|
||||
icon: "hero-document-text-solid",
|
||||
name: "Notes"
|
||||
},
|
||||
%{
|
||||
path: ~p"/admin/comments",
|
||||
icon: "hero-chat-bubble-oval-left-ellipsis-solid",
|
||||
name: "Comments"
|
||||
},
|
||||
%{
|
||||
path: ~p"/admin/channels",
|
||||
icon: "hero-speaker-wave-solid",
|
||||
name: "Channels"
|
||||
},
|
||||
%{
|
||||
path: ~p"/admin/identities",
|
||||
icon: "hero-user-solid",
|
||||
name: "Identities"
|
||||
},
|
||||
%{
|
||||
path: ~p"/admin/settings",
|
||||
icon: "hero-wrench-screwdriver-solid",
|
||||
name: "Settings"
|
||||
}
|
||||
] %>
|
||||
<div class="flex items-center gap-4">
|
||||
<%= for item <- items do %>
|
||||
<.link
|
||||
href={~p"/admin/comments"}
|
||||
href={item.path}
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<.icon name="hero-document-text" class="w-4 h-4" /> Comments
|
||||
</.link>
|
||||
<.link
|
||||
href={~p"/admin/notes"}
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<.icon name="hero-document-text" class="w-4 h-4" /> Notes
|
||||
</.link>
|
||||
<.link
|
||||
href={~p"/admin/channels"}
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<.icon name="hero-speaker-wave" class="w-4 h-4" /> Channels
|
||||
</.link>
|
||||
<.link
|
||||
href={~p"/admin/identities"}
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<.icon name="hero-user" class="w-4 h-4" /> Identities
|
||||
</.link>
|
||||
<.link
|
||||
href={~p"/admin/settings"}
|
||||
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<.icon name="hero-wrench-screwdriver" class="w-4 h-4" /> Settings
|
||||
<.icon name={item.icon} class="w-4 h-4" />
|
||||
<span class="align-sub"><%= item.name %></span>
|
||||
</.link>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
|
||||
<.favicon />
|
||||
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||
</script>
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
|
||||
<.favicon />
|
||||
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/public.js"}>
|
||||
</script>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="mx-auto max-w-xl mx-4 lg:mx-0">
|
||||
<header>
|
||||
<h1 class="mt-16 text-3xl font-semibold leading-8 text-theme-heading font-serif">
|
||||
<h1 class="mt-16 text-3xl font-extrabold text-theme-base">
|
||||
<%= @note.name %>
|
||||
</h1>
|
||||
<p class="mt-2 text-sm leading-6 text-theme-base">
|
||||
|
@ -9,10 +9,11 @@
|
|||
<% else %>
|
||||
<span>Unpublished</span>
|
||||
<% end %>
|
||||
<time class="text-theme-primary font-semibold"><%= pretty_date(@note.published_at) %></time>
|
||||
<time class="font-semibold"><%= pretty_date(@note.published_at) %></time>
|
||||
<span>·</span>
|
||||
<span>Last Updated</span>
|
||||
<time class="text-theme-primary font-semibold"><%= pretty_date(@note.updated_at) %></time>
|
||||
<time class="font-semibold"><%= pretty_date(@note.updated_at) %></time>
|
||||
<%= if not Enum.empty?(@note.tags) do %>
|
||||
<span>·</span>
|
||||
<span>Tags</span>
|
||||
<span class="text-theme-primary font-semibold">
|
||||
|
@ -20,14 +21,15 @@
|
|||
<a href={~p"/t/#{tag.slug}"}><%= tag.name %></a>
|
||||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= if @current_user do %>
|
||||
<span>·</span>
|
||||
<a href={~p"/admin/notes/#{@note}/edit"} class="text-theme-primary font-semibold">Edit</a>
|
||||
<a href={~p"/admin/notes/#{@note}/edit"} class="font-semibold underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition">Edit</a>
|
||||
<% end %>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section class="prose mt-8">
|
||||
<section class="mt-8 prose prose-gruvbox md:prose-lg lg:prose-xl">
|
||||
<%= Markdown.render(@note.content) |> raw %>
|
||||
</section>
|
||||
|
||||
|
|
Loading…
Reference in a new issue