clients/phobos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

frost some glass & fix some layouting

Browse source
This commit is contained in:
Lio 2024-07-23 23:36:10 +02:00
parent 38cbf3fb63
commit 4fdaf1f2bf
8 changed files with 32 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Card.astro
View file

@ -21,7 +21,7 @@ if (image) {
) )
} }
<div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div> <div class="absolute inset-0 bg-[#111111] opacity-50 rounded-md"></div>
<div class="absolute inset-0 inline-flex flex-col items-center justify-center"> <div class="absolute inset-0 inline-flex flex-col items-center justify-center">
<h2 class="text-white text-3xl font-bold">{title}</h2> <h2 class="text-white text-3xl font-bold">{title}</h2>
<span class="text-white">{body}</span> <span class="text-white">{body}</span>

2
src/components/Image.astro
View file

@ -13,7 +13,7 @@ const { src, alt, nsfw } = Astro.props;
alt && ( alt && (
<div <div
id="info" id="info"
class="z-[2] absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity" class="absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
> >
{alt} {alt}
</div> </div>

15
src/components/Lightbox.astro
View file

@ -1,6 +1,6 @@
<figure class="place-content-center app-lightbox"> <figure class="place-content-center app-lightbox backdrop-blur-md">
<img class="portal" /> <img class="portal" />
<figcaption class="desc rounded font-bold"></figcaption> <figcaption class="desc rounded font-bold backdrop-blur-sm"></figcaption>
</figure> </figure>
<script> <script>
@ -17,8 +17,8 @@
portal.src = T.src; portal.src = T.src;
// console.log(); // console.log();
if (!T.alt) desc.classList.add('hidden'); if (!T.alt) desc.classList.add("hidden");
else desc.classList.remove('hidden') else desc.classList.remove("hidden");
desc.innerHTML = T.alt; desc.innerHTML = T.alt;
setTimeout(() => { setTimeout(() => {
@ -57,13 +57,12 @@
margin: auto auto; margin: auto auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 3;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
cursor: zoom-out; cursor: zoom-out;
// TODO: map color to API background-color: var(--bg-color, hsla(0, 0%, 0%, 0.623));
background-color: var(--bg-color, hsl(0, 0%, 0%, 0.85));
opacity: 0; opacity: 0;
transition: opacity 0.35s; transition: opacity 0.35s;
@ -84,7 +83,6 @@
padding: 2rem; padding: 2rem;
max-width: 90%; max-width: 90%;
max-height: 90%; max-height: 90%;
// TODO: map speed to API
transition: transition:
opacity 0.35s, opacity 0.35s,
transform 0.35s; transform 0.35s;
@ -102,7 +100,6 @@
} }
.desc { .desc {
background-color: darkgrey;
max-width: 20%; max-width: 20%;
margin: auto auto; margin: auto auto;
padding: 1rem; padding: 1rem;

5
src/components/Sidebar.astro
View file

@ -42,7 +42,10 @@ const config = {
)) ))
} }
<br /> <br />
<button class="bg-red-600 p-1 mt-4" id="nsfwButton">loading...</button> <button
class="border-2 border-gray-600 border-solid p-2 mt-4"
id="nsfwButton">loading...</button
>
</div> </div>
</aside> </aside>

2
src/layouts/CharacterList.astro
View file

@ -37,7 +37,7 @@ export const prerender = false;
</head> </head>
<body> <body>
<div <div
class="md:fixed md:left-0 md:top-0 w-full md:w-96 bg-[#ffffff59] h-full pt-4 z-[1] box-border text-center" class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
> >
<Sidebar /> <Sidebar />
</div> </div>

32
src/layouts/Gallery.astro
View file

@ -3,7 +3,7 @@ import Lightbox from "../components/Lightbox.astro";
import Sidebar from "../components/Sidebar.astro"; import Sidebar from "../components/Sidebar.astro";
import pb from "../lib/pb"; import pb from "../lib/pb";
export const prerender = false export const prerender = false;
const avatarRec = await pb const avatarRec = await pb
.collection("images") .collection("images")
@ -38,12 +38,12 @@ const config = {
<body> <body>
<Lightbox /> <Lightbox />
<div <div
class="md:fixed md:left-0 md:top-0 w-full md:w-96 bg-[#ffffff59] h-full pt-4 z-[1] box-border text-center" class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
> >
<Sidebar /> <Sidebar />
</div> </div>
<div <div
class="container float-none md:float-right md:container md:box-border transition-all" class="container float-none xl:float-right xl:box-border transition-all"
> >
<slot /> <slot />
</div> </div>
@ -51,7 +51,7 @@ const config = {
</html> </html>
<style define:vars={{ background: `url(${config.background})` }}> <style define:vars={{ background: `url(${config.background})` }}>
@media screen(md) { @media screen(xl) {
.container { .container {
width: calc(100% - 25rem); width: calc(100% - 25rem);
} }
@ -66,28 +66,4 @@ const config = {
background-attachment: fixed; background-attachment: fixed;
color: whitesmoke; color: whitesmoke;
} }
/*
:root {
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
code {
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} */
</style> </style>

19
src/pages/characters/[slug].astro
View file

@ -13,7 +13,7 @@ const characterDetails = await pb
.getFirstListItem(`(slug~"${slug}")`); .getFirstListItem(`(slug~"${slug}")`);
// console.log(characterDetails); // console.log(characterDetails);
const images = imageCollection.map((record) => { const images = imageCollection.map((record) => {
const url = pb.files.getUrl(record, record.file, {thumb: record.thumb}); const url = pb.files.getUrl(record, record.file, { thumb: record.thumb });
return { return {
url: url, url: url,
desc: record.description, desc: record.description,
@ -28,20 +28,21 @@ export const prerender = false;
<div class="flex flex-col"> <div class="flex flex-col">
<div class="pb-4"> <div class="pb-4">
<h1 class="text-2xl text-center p-8"> <h1 class="text-2xl text-center p-8">
<a href={`/characters`}> <!-- <a href={`/characters`}> -->
{characterDetails.name} {characterDetails.name}
</a> <!-- </a> -->
</h1> </h1>
{ {
characterDetails.description && ( characterDetails.description && (
<Fragment <div class="m-4 p-4 bg-[#11111156] backdrop-blur-md rounded-lg items-center justify-center">
class="text-xl p-8" <Fragment set:html={characterDetails.description} />
set:html={characterDetails.description} </div>
/>
) )
} }
</div> </div>
<div class="gap-4 columns-2 md:columns-4 self-center"> <div
class="gap-4 columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 self-center"
>
{ {
images.map((image) => ( images.map((image) => (
<Image nsfw={image.nsfw} src={image.url} alt={image.desc} /> <Image nsfw={image.nsfw} src={image.url} alt={image.desc} />

8
src/pages/characters/index.astro
View file

@ -13,10 +13,12 @@ export const prerender = false;
<CharacterList> <CharacterList>
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="text-2xl text-center p-8">Characters</h1> <h1 class="text-3xl text-center pt-8">Characters</h1>
<div class="flex gap-4 columns-2 md:columns-4 self-center"> <div
class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center"
>
{ {
characters.map((c) => ( [...characters].map((c) => (
// @ts-ignore // @ts-ignore
<Card <Card
href={`/characters/${c.slug}`} href={`/characters/${c.slug}`}