inhji/chiya
inhji/chiya
1
1
Fork 0
Code Issues 8 Pull requests 9 Activity

simplify margins in public pages

Browse source
This commit is contained in:
Inhji 2023-04-03 22:22:02 +02:00
parent 5a2924f704
commit 68c62fcee8
4 changed files with 89 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/chiya_web/components/layouts/public.html.heex
View file

@ -13,7 +13,7 @@
</div> </div>
</header> </header>
<main class="px-4 py-20 sm:px-6 lg:px-8"> <main>
<div class="mx-auto max-w-2xl"> <div class="mx-auto max-w-2xl">
<.flash_group flash={@flash} /> <.flash_group flash={@flash} />
<%= @inner_content %> <%= @inner_content %>

38
lib/chiya_web/controllers/page_html/channel.html.heex
View file

@ -1,22 +1,20 @@
<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 mx-4 lg:mx-0">
<div class="mx-auto max-w-xl lg:mx-0"> <h1 class="mt-16 text-[2rem] font-semibold font-serif leading-10 tracking-tighter text-theme-primary">
<h1 class="mt-4 text-[2rem] font-semibold font-serif leading-10 tracking-tighter text-theme-primary"> <%= @channel.name %>
<%= @channel.name %> </h1>
</h1> <p class="mt-4 text-base leading-7 text-theme-base">
<p class="mt-4 text-base leading-7 text-theme-base"> <%= @channel.content %>
<%= @channel.content %> </p>
</p>
<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 <a
href={~p"/#{note.slug}"} href={~p"/#{note.slug}"}
class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition" class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition"
> >
<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"><%= note.name %></span>
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span> <span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
</a> </a>
<% end %> <% end %>
</div>
</div> </div>
</div> </div>

70
lib/chiya_web/controllers/page_html/home.html.heex
View file

@ -1,42 +1,40 @@
<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 mx-4 lg:mx-0">
<div class="mx-auto max-w-xl lg:mx-0"> <h1 class="mt-16 text-3xl font-semibold font-serif 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 %>
<%= @settings.title %> </h1>
</h1> <p class="mt-4 text-base leading-7 text-theme-base">
<p class="mt-4 text-base leading-7 text-theme-base"> <%= @settings.subtitle %>
<%= @settings.subtitle %> </p>
</p>
<div class="w-full mt-6 sm:w-auto"> <div class="w-full mt-6 sm:w-auto">
<div class="flex gap-4 text-sm leading-6 text-theme-base"> <div class="flex gap-4 text-sm leading-6 text-theme-base">
<%= for identity <- @identities do %> <%= for identity <- @identities do %>
<div> <div>
<a
rel={identity.rel}
href={identity.url}
class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-theme-primary/10 transition"
>
<%= raw(identity.icon) %>
<%= identity.name %>
</a>
</div>
<% end %>
</div>
</div>
<%= if @channel do %>
<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
<%= for note <- @channel.notes do %>
<a <a
href={~p"/#{note.slug}"} rel={identity.rel}
class="rounded -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/10 transition" href={identity.url}
class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-theme-primary/10 transition"
> >
<span class="text-theme-heading text-lg font-semibold leading-8"> <%= raw(identity.icon) %>
<%= note.name %> <%= identity.name %>
</span>
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
</a> </a>
<% end %> </div>
</div> <% end %>
<% end %> </div>
</div> </div>
<%= if @channel do %>
<div class="mt-6 sm:w-auto flex flex-col gap-1.5">
<%= for note <- @channel.notes do %>
<a
href={~p"/#{note.slug}"}
class="rounded-lg -mx-2 -my-0.5 px-2 py-0.5 hover:bg-theme-primary/30 transition"
>
<span class="text-theme-heading text-lg font-semibold leading-8">
<%= note.name %>
</span>
<span class="text-theme-base text-sm"><%= pretty_date(note.published_at) %></span>
</a>
<% end %>
</div>
<% end %>
</div> </div>

74
lib/chiya_web/controllers/page_html/note.html.heex
View file

@ -1,43 +1,41 @@
<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 mx-4 lg:mx-0">
<div class="mx-auto max-w-xl lg:mx-0"> <header>
<header> <h1 class="mt-16 text-3xl font-semibold leading-8 text-theme-heading font-serif underline underline-offset-2 decoration-theme-primary">
<h1 class="text-3xl font-semibold leading-8 text-theme-heading font-serif underline underline-offset-2 decoration-theme-primary"> <%= @note.name %>
<%= @note.name %> </h1>
</h1> <p class="mt-2 text-sm leading-6 text-theme-base font-semibold">
<p class="mt-2 text-sm leading-6 text-theme-base font-semibold"> <%= pretty_date(@note.published_at) %>
<%= pretty_date(@note.published_at) %> </p>
</p> </header>
</header>
<section class="prose mt-8"> <section class="prose mt-8">
<%= Markdown.render(@note.content) |> raw %> <%= Markdown.render(@note.content) |> raw %>
</section> </section>
<%= if !Enum.empty?(@note.images) do %> <%= if !Enum.empty?(@note.images) do %>
<.line /> <.line />
<div class="flex flex-wrap gap-3" id="images"> <div class="flex flex-wrap gap-3" id="images">
<%= for image <- @note.images do %> <%= for image <- @note.images do %>
<article> <article>
<a href={"#image-#{image.id}"}> <a href={"#image-#{image.id}"}>
<img
class="rounded-lg w-28 border"
src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
/>
</a>
<a href="#images" class="lightbox" id={"image-#{image.id}"}>
<span>
<img <img
class="rounded-lg w-28 border" class="md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg max-h-screen mx-auto"
src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)} src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}
loading="lazy"
/> />
</a> <span class="text-theme-background text-center"><%= image.content %></span>
<a href="#images" class="lightbox" id={"image-#{image.id}"}> </span>
<span> </a>
<img </article>
class="md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg max-h-screen mx-auto" <% end %>
src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} </div>
loading="lazy" <% end %>
/> </div>
<span class="text-theme-background text-center"><%= image.content %></span>
</span>
</a>
</article>
<% end %>
</div>
<% end %>
</div>
</div>