devel #23
6 changed files with 30 additions and 29 deletions
|
@ -6,13 +6,22 @@
|
|||
@import "./lightbox.css";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color-primary: 16 185 129;
|
||||
:root[data-theme=default] {
|
||||
--color-primary: 68 68 68;
|
||||
--color-background: 255 255 255;
|
||||
--color-text-base: 82 82 91;
|
||||
--color-text-heading: 24 24 27;
|
||||
--color-text-muted: 82 82 91;
|
||||
--color-text-dim: 244 244 245;
|
||||
--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[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[data-theme=roguelight] {
|
||||
|
@ -28,7 +37,7 @@
|
|||
/*
|
||||
Invert prose styles based on the variant of the theme.
|
||||
*/
|
||||
:root[data-variant=dark] .prose {
|
||||
:root[data-mode=dark] .prose {
|
||||
@apply prose-invert;
|
||||
}
|
||||
|
||||
|
|
|
@ -70,15 +70,6 @@ defmodule ChiyaWeb.AdminComponents do
|
|||
<li class="text-xs leading-6 text-gray-100">
|
||||
<%= @current_user.email %>
|
||||
</li>
|
||||
<li>
|
||||
<.link
|
||||
href="#"
|
||||
id="dark-mode-toggle"
|
||||
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
|
||||
>
|
||||
<.icon name="hero-sun-mini" class="h-4 w-4" />
|
||||
</.link>
|
||||
</li>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/user"}
|
||||
|
@ -107,10 +98,11 @@ defmodule ChiyaWeb.AdminComponents do
|
|||
<% else %>
|
||||
<li>
|
||||
<.link
|
||||
href={~p"/user/register"}
|
||||
href="#"
|
||||
id="dark-mode-toggle"
|
||||
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
|
||||
>
|
||||
Register
|
||||
<.icon name="hero-sun-mini" class="h-4 w-4" />
|
||||
</.link>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
@ -2,11 +2,4 @@ defmodule ChiyaWeb.Layouts do
|
|||
use ChiyaWeb, :html
|
||||
|
||||
embed_templates "layouts/*"
|
||||
|
||||
@doc """
|
||||
Defines which themes are light and which are dark themes.
|
||||
This influences the prose styles in app.css.
|
||||
"""
|
||||
def theme_variant(:default), do: "light"
|
||||
def theme_variant(:roguelight), do: "dark"
|
||||
end
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" style="scrollbar-gutter: stable;" data-theme={@settings.theme} data-variant={theme_variant(@settings.theme)}>
|
||||
<html lang="en" style="scrollbar-gutter: stable;" data-theme={@settings.theme}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
@ -13,6 +13,13 @@
|
|||
<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>
|
||||
<script>
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.dataset["mode"] = "dark"
|
||||
} else {
|
||||
delete document.documentElement.dataset["mode"]
|
||||
}
|
||||
</script>
|
||||
<style><%= @settings.custom_css %></style>
|
||||
</head>
|
||||
<body class="bg-theme-background antialiased">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
|
||||
<div class="mx-auto max-w-xl lg:mx-0">
|
||||
<h1 class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-theme-primary">
|
||||
<h1 class="mt-4 text-[2rem] font-semibold font-serif leading-10 tracking-tighter text-theme-primary">
|
||||
<%= @settings.title %>
|
||||
</h1>
|
||||
<p class="mt-4 text-base leading-7 text-theme-base">
|
||||
|
@ -27,7 +27,7 @@
|
|||
<%= if @channel do %>
|
||||
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
|
||||
<%= for note <- @channel.notes do %>
|
||||
<a href={~p"/n/#{note.slug}"} class="group">
|
||||
<a href={~p"/n/#{note.slug}"} class="group rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-dim">
|
||||
<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 group-hover:text-theme-muted/75"><%= pretty_date(note.published_at) %></span>
|
||||
</a>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<header>
|
||||
<h1 class="text-lg font-semibold leading-8 text-theme-heading"><%= @note.name %></h1>
|
||||
<h1 class="text-2xl font-semibold leading-8 text-theme-heading font-serif"><%= @note.name %></h1>
|
||||
<p class="mt-2 text-sm leading-6 text-theme-muted">
|
||||
<%= pretty_date(@note.published_at) %>
|
||||
</p>
|
||||
|
|
Loading…
Reference in a new issue