gablaxy/bubo-rss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark mode

Browse source
This commit is contained in:
Carter McBride 2024-08-23 13:59:51 -06:00
parent 29bcc0ddca
commit c3854d38e3
1 changed files with 61 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/pages/index.astro
View file

@ -17,52 +17,52 @@ const categories = Array.from(
const accentColors = {
slate: {
bg: "bg-slate-200",
bl: "border-l-slate-200",
bg: "bg-slate-200 dark:bg-slate-600",
bl: "border-l-slate-200 dark:border-l-slate-600",
},
stone: {
bg: "bg-stone-200",
bl: "border-l-stone-200",
bg: "bg-stone-200 dark:bg-stone-600",
bl: "border-l-stone-200 dark:border-l-stone-600",
},
red: {
bg: "bg-red-200",
bl: "border-l-red-200",
bg: "bg-red-200 dark:bg-red-600",
bl: "border-l-red-200 dark:border-l-red-600",
},
amber: {
bg: "bg-amber-200",
bl: "border-l-amber-200",
bg: "bg-amber-200 dark:bg-amber-600",
bl: "border-l-amber-200 dark:border-l-amber-600",
},
lime: {
bg: "bg-lime-200",
bl: "border-l-lime-200",
bg: "bg-lime-200 dark:bg-lime-600",
bl: "border-l-lime-200 dark:border-l-lime-600",
},
emerald: {
bg: "bg-emerald-200",
bl: "border-l-emerald-200",
bg: "bg-emerald-200 dark:bg-emerald-600",
bl: "border-l-emerald-200 dark:border-l-emerald-600",
},
cyan: {
bg: "bg-cyan-200",
bl: "border-l-cyan-200",
bg: "bg-cyan-200 dark:bg-cyan-600",
bl: "border-l-cyan-200 dark:border-l-cyan-600",
},
sky: {
bg: "bg-sky-200",
bl: "border-l-sky-200",
bg: "bg-sky-200 dark:bg-sky-600",
bl: "border-l-sky-200 dark:border-l-sky-600",
},
indigo: {
bg: "bg-indigo-200",
bl: "border-l-indigo-200",
bg: "bg-indigo-200 dark:bg-indigo-600",
bl: "border-l-indigo-200 dark:border-l-indigo-600",
},
fuchsia: {
bg: "bg-fuchsia-200",
bl: "border-l-fuchsia-200",
bg: "bg-fuchsia-200 dark:bg-fuchsia-600",
bl: "border-l-fuchsia-200 dark:border-l-fuchsia-600",
},
pink: {
bg: "bg-pink-200",
bl: "border-l-pink-200",
bg: "bg-pink-200 dark:bg-pink-600",
bl: "border-l-pink-200 dark:border-l-pink-600",
},
rose: {
bg: "bg-rose-200",
bl: "border-l-rose-200",
bg: "bg-rose-200 dark:bg-rose-600",
bl: "border-l-rose-200 dark:border-l-rose-600",
},
};
@ -105,7 +105,7 @@ const categoriesSelectorCss = ["Recent", ...categories]
<style set:html={categoriesSelectorCss}></style>
</head>
<body
class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4 bg-orange-50 text-stone-700 font-semibold"
class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4 bg-orange-50 dark:bg-slate-900 dark:text-slate-300 text-stone-700 font-semibold"
>
<header
class="col-span-12 row-span-1 h-fit mb-4 flex flex-row gap-8 items-center"
@ -158,15 +158,24 @@ const categoriesSelectorCss = ["Recent", ...categories]
{
"Recent-item": isRecent(item.pubIsoDate),
},
"bg-orange-100",
"py-1 px-2",
"rounded-xl",
"flex flex-row gap-4 items-center",
"border-l-8",
categoryColors[item.category].bl,
]}
>
<a href={item.link} class="">
<a
href={item.link}
class:list={[
"w-full",
"border-l-8",
categoryColors[item.category].bl,
"hover:bg-orange-200 dark:hover:bg-slate-600",
"transition-all",
"active:bg-orange-300 dark:active:bg-slate-500",
"bg-orange-100 dark:bg-slate-700",
"visited:opacity-50",
"py-1 px-2",
"rounded-xl",
]}
>
<div set:html={item.title} class="underline" />
<div class="no-underline text-sm font-normal">
{[
@ -181,5 +190,26 @@ const categoriesSelectorCss = ["Recent", ...categories]
}
</ul>
</main>
<footer class="sticky bottom-4 mt-4 md:mt-0 text-sm row-end-13 row-span-1">
{
feedItems.errors.length === 0 ? (
<>No errors</>
) : (
<ul>
{feedItems.errors.map((error) => (
<li>{error}</li>
))}
</ul>
)
}
<ul>
<li>
<a
href="https://github.com/carterworks/rss-reader"
class="underline cursor-pointer">Github</a
>
</li>
</ul>
</footer>
</body>
</html>