fix: some styles

Debbl · Jan 12, 2025 · 327bb11 · 327bb11
1 parent 764e671
commit 327bb11
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -165,7 +165,9 @@ const FindMeLinks: {
 export default function Home() {
   return (
     <>
-      <Meteors number={30} />
+      <div className="pointer-events-none absolute inset-0 z-0 size-full overflow-hidden">
+        <Meteors number={30} />
+      </div>
 
       <main className="relative flex-1 overflow-y-scroll">
         <div className="mb-10 flex flex-col items-center">

diff --git a/src/app/posts/_components/Image.tsx b/src/app/posts/_components/Image.tsx
@@ -31,7 +31,12 @@ export function Image({
         ZoomContent={(data) => <>{data.img}</>}
         wrapElement="span"
       >
-        <NextImage key={imageProps.src} {...imageProps} alt="image" />
+        <NextImage
+          className="mx-auto max-h-[300px] max-w-[60%] object-contain"
+          key={imageProps.src}
+          {...imageProps}
+          alt="image"
+        />
       </Zoom>
     </picture>
   );

diff --git a/src/app/posts/_components/Pre.tsx b/src/app/posts/_components/Pre.tsx
@@ -74,7 +74,7 @@ export function Pre({
           lang={lang}
           code={code}
         />
-        <figure>
+        <figure className="max-h-[300px] overflow-y-scroll text-xs">
           <pre {...preJSXElement.props} className="p-4" />
         </figure>
       </div>

diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
@@ -31,7 +31,10 @@ export default async function Page() {
 
   return (
     <>
-      <Meteors number={30} />
+      <div className="pointer-events-none absolute inset-0 z-0 size-full overflow-hidden">
+        <Meteors number={30} />
+      </div>
+
       <main className="relative flex-1 overflow-y-scroll">
         <div className="mx-auto w-fit">
           {postsByCategory.map((category) => (

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -49,7 +49,7 @@
     --card-foreground: 0 0% 98%;
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
+    --primary: 45, 93%, 47%;
     --primary-foreground: 240 5.9% 10%;
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;