From 4fdaf1f2bff37723f320602d59b1945abc57ab52 Mon Sep 17 00:00:00 2001
From: Lio <git@lio.cat>
Date: Tue, 23 Jul 2024 23:36:10 +0200
Subject: [PATCH] frost some glass & fix some layouting

---
 src/components/Card.astro         |  2 +-
 src/components/Image.astro        |  2 +-
 src/components/Lightbox.astro     | 15 ++++++---------
 src/components/Sidebar.astro      |  5 ++++-
 src/layouts/CharacterList.astro   |  2 +-
 src/layouts/Gallery.astro         | 32 ++++---------------------------
 src/pages/characters/[slug].astro | 19 +++++++++---------
 src/pages/characters/index.astro  |  8 +++++---
 8 files changed, 32 insertions(+), 53 deletions(-)
diff --git a/src/components/Card.astro b/src/components/Card.astro
index ad4929f..66a67f2 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -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>
diff --git a/src/components/Image.astro b/src/components/Image.astro
index b95e997..8425f21 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -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>
diff --git a/src/components/Lightbox.astro b/src/components/Lightbox.astro
index cab6841..72f8eb3 100644
--- a/src/components/Lightbox.astro
+++ b/src/components/Lightbox.astro
@@ -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;
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index e280eea..e27d516 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -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>
 
diff --git a/src/layouts/CharacterList.astro b/src/layouts/CharacterList.astro
index 262ca53..c203ddc 100644
--- a/src/layouts/CharacterList.astro
+++ b/src/layouts/CharacterList.astro
@@ -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>
diff --git a/src/layouts/Gallery.astro b/src/layouts/Gallery.astro
index a4fb6ef..5b4a958 100644
--- a/src/layouts/Gallery.astro
+++ b/src/layouts/Gallery.astro
@@ -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>
diff --git a/src/pages/characters/[slug].astro b/src/pages/characters/[slug].astro
index fc1ad2c..aed9585 100644
--- a/src/pages/characters/[slug].astro
+++ b/src/pages/characters/[slug].astro
@@ -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} />
diff --git a/src/pages/characters/index.astro b/src/pages/characters/index.astro
index 96f7ebd..e1b829e 100644
--- a/src/pages/characters/index.astro
+++ b/src/pages/characters/index.astro
@@ -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}`}
