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-width: 1px;
}
.bg-\[\#faebeb\] {
background-color: #faebeb;
}
.bg-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);
}
@ -746,6 +764,9 @@
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-\[\#140606\] {
color: #140606;
}
.text-\[\#f9ebeb\] {
color: #f9ebeb;
}
@ -884,6 +905,11 @@
background-color: var(--color-yellow-950);
}
}
.dark\:text-\[\#f9ebeb\] {
@media (prefers-color-scheme: dark) {
color: #f9ebeb;
}
}
.dark\:text-gray-600 {
@media (prefers-color-scheme: dark) {
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="" />
<link href="/static/tailwind.css" rel="stylesheet" />
<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} />) : ""}
<meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
{props.environment == "dev" ? (

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

@ -1,6 +1,6 @@
export default function Header(props: {path: string}) {
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">
<a href="/">
<img

16
src/templates/index.tsx
View file

@ -21,7 +21,7 @@ export default function Index(props: {
path={props.path}
{...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} />
<div className="container mx-auto py-4 px-4 sm:px-8">
<div>
@ -35,13 +35,21 @@ export default function Index(props: {
<a
data-type="index__placeholder__image"
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 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>
<p className="text-xl">All Images</p>
</a>