wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-04-05 15:54:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add light mode

Browse source
This commit is contained in:
Kentai Radiquum 2025-01-30 23:06:29 +05:00
parent e604b456c4
commit c3a775bc4a
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 40 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/static/tailwind.css
View file

@ -714,9 +714,27 @@
border-style: var(--tw-border-style); border-style: var(--tw-border-style);
border-width: 1px; border-width: 1px;
} }
.bg-\[\#faebeb\] {
background-color: #faebeb;
}
.bg-gray-400 { .bg-gray-400 {
background-color: var(--color-gray-400); background-color: var(--color-gray-400);
} }
.bg-orange-700 {
background-color: var(--color-orange-700);
}
.bg-orange-800 {
background-color: var(--color-orange-800);
}
.bg-orange-950 {
background-color: var(--color-orange-950);
}
.bg-yellow-800 {
background-color: var(--color-yellow-800);
}
.bg-yellow-950 {
background-color: var(--color-yellow-950);
}
.\[background-image\:var\(--blur-img\)\] { .\[background-image\:var\(--blur-img\)\] {
background-image: var(--blur-img); background-image: var(--blur-img);
} }
@ -746,6 +764,9 @@
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height)); line-height: var(--tw-leading, var(--text-xl--line-height));
} }
.text-\[\#140606\] {
color: #140606;
}
.text-\[\#f9ebeb\] { .text-\[\#f9ebeb\] {
color: #f9ebeb; color: #f9ebeb;
} }
@ -884,6 +905,11 @@
background-color: var(--color-yellow-950); background-color: var(--color-yellow-950);
} }
} }
.dark\:text-\[\#f9ebeb\] {
@media (prefers-color-scheme: dark) {
color: #f9ebeb;
}
}
.dark\:text-gray-600 { .dark\:text-gray-600 {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: var(--color-gray-600); color: var(--color-gray-600);

2
src/templates/Components/Head.tsx
View file

@ -26,7 +26,7 @@ export default function head(props: {
<meta property="og:image:alt" content="" /> <meta property="og:image:alt" content="" />
<link href="/static/tailwind.css" rel="stylesheet" /> <link href="/static/tailwind.css" rel="stylesheet" />
<meta property="og:url" content={`${props.url}${props.path}`} /> <meta property="og:url" content={`${props.url}${props.path}`} />
{props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch"></link>) : ""} {props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch" crossOrigin="anonymous"></link>) : ""}
{props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""} {props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""}
<meta property="og:logo" content={`${props.url}/static/logo-1x.png`} /> <meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
{props.environment == "dev" ? ( {props.environment == "dev" ? (

2
src/templates/Components/Header.tsx
View file

@ -1,6 +1,6 @@
export default function Header(props: {path: string}) { export default function Header(props: {path: string}) {
return ( return (
<header className="sticky top-0 left-0 right-0 dark:bg-orange-950 text-[#f9ebeb] rounded-b-lg z-10"> <header className="sticky top-0 left-0 right-0 bg-orange-950 text-[#f9ebeb] rounded-b-lg z-10">
<div className="container flex items-center justify-between gap-4 px-4 sm:px-8 py-4 mx-auto min-h-16"> <div className="container flex items-center justify-between gap-4 px-4 sm:px-8 py-4 mx-auto min-h-16">
<a href="/"> <a href="/">
<img <img

16
src/templates/index.tsx
View file

@ -21,7 +21,7 @@ export default function Index(props: {
path={props.path} path={props.path}
{...props.head} {...props.head}
/> />
<body className="dark:bg-[#160606] text-[#f9ebeb]"> <body className="dark:bg-[#160606] bg-[#faebeb] dark:text-[#f9ebeb] text-[#140606]">
<Header path={props.path} /> <Header path={props.path} />
<div className="container mx-auto py-4 px-4 sm:px-8"> <div className="container mx-auto py-4 px-4 sm:px-8">
<div> <div>
@ -35,13 +35,21 @@ export default function Index(props: {
<a <a
data-type="index__placeholder__image" data-type="index__placeholder__image"
key={`index__placeholder__image-${num}`} key={`index__placeholder__image-${num}`}
className={`relative aspect-square min-w-48 sm:min-w-auto ${idx >= 5 ? "hidden xl:block" : ""}`} className={`relative aspect-square min-w-48 sm:min-w-auto ${
idx >= 5 ? "hidden xl:block" : ""
}`}
> >
<div id={`index__placeholder__image-${num}-loader`} className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"></div> <div
id={`index__placeholder__image-${num}-loader`}
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
></div>
</a> </a>
); );
})} })}
<a href="/images/" className="hover:bg-orange-600 transition-colors aspect-square dark:bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"> <a
href="/images/"
className="text-[#f9ebeb] hover:bg-orange-600 transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"
>
<span className="material-symbols--arrow-forward-rounded w-16 h-16"></span> <span className="material-symbols--arrow-forward-rounded w-16 h-16"></span>
<p className="text-xl">All Images</p> <p className="text-xl">All Images</p>
</a> </a>