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">
<h2 class="text-white text-3xl font-bold">{title}</h2>
<span class="text-white">{body}</span>

2
src/components/Image.astro
View file

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

5
src/components/Sidebar.astro
View file

@ -42,7 +42,10 @@ const config = {
))
}
<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>
</aside>

2
src/layouts/CharacterList.astro
View file

@ -37,7 +37,7 @@ export const prerender = false;
</head>
<body>
<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 />
</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 pb from "../lib/pb";
export const prerender = false
export const prerender = false;
const avatarRec = await pb
.collection("images")
@ -38,12 +38,12 @@ const config = {
<body>
<Lightbox />
<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 />
</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 />
</div>
@ -51,7 +51,7 @@ const config = {
</html>
<style define:vars={{ background: `url(${config.background})` }}>
@media screen(md) {
@media screen(xl) {
.container {
width: calc(100% - 25rem);
}
@ -66,28 +66,4 @@ const config = {
background-attachment: fixed;
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>

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

@ -13,7 +13,7 @@ const characterDetails = await pb
.getFirstListItem(`(slug~"${slug}")`);
// console.log(characterDetails);
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 {
url: url,
desc: record.description,
@ -28,20 +28,21 @@ export const prerender = false;
<div class="flex flex-col">
<div class="pb-4">
<h1 class="text-2xl text-center p-8">
<a href={`/characters`}>
{characterDetails.name}
</a>
<!-- <a href={`/characters`}> -->
{characterDetails.name}
<!-- </a> -->
</h1>
{
characterDetails.description && (
<Fragment
class="text-xl p-8"
set:html={characterDetails.description}
/>
<div class="m-4 p-4 bg-[#11111156] backdrop-blur-md rounded-lg items-center justify-center">
<Fragment set:html={characterDetails.description} />
</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) => (
<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>
<div class="flex flex-col">
<h1 class="text-2xl text-center p-8">Characters</h1>
<div class="flex gap-4 columns-2 md:columns-4 self-center">
<h1 class="text-3xl text-center pt-8">Characters</h1>
<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
<Card
href={`/characters/${c.slug}`}