wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-09-14 10:23:50 +05:00
Code Issues Projects Releases Packages Wiki Activity

Prettify index page Images style

Browse source
This commit is contained in:
Kentai Radiquum 2025-01-30 22:49:02 +05:00
parent 4d4b346ea2
commit e604b456c4
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 204 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
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">
<div className="container flex items-center justify-between gap-4 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="/">
<img
className="h-6 sm:h-10"

32
src/templates/index.tsx
View file

@ -1,7 +1,6 @@
import Head from "./Components/Head";
import Header from "./Components/Header";
export default function Index(props: {
environment: "prod" | "dev";
title: string;
@ -23,14 +22,33 @@ export default function Index(props: {
{...props.head}
/>
<body className="dark:bg-[#160606] text-[#f9ebeb]">
<Header path={props.path}/>
<div className="container mx-auto">
<div>
<p>Images</p>
<div id="index_images" className="flex flex-wrap gap-4"></div>
<Header path={props.path} />
<div className="container mx-auto py-4 px-4 sm:px-8">
<div>
<p className="text-4xl ">Images</p>
<div
id="index_images"
className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
>
{[1, 2, 3, 4, 5, 6, 7].map((num, idx) => {
return (
<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" : ""}`}
>
<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">
<span className="material-symbols--arrow-forward-rounded w-16 h-16"></span>
<p className="text-xl">All Images</p>
</a>
</div>
</div>
</div>
<script src="./static/populate_index.js"></script>
<script src="./static/populate_index.js"></script>
</body>
</html>
);