From 7b5ffb529dab3af368b0b4e6274590944ae161ed Mon Sep 17 00:00:00 2001
From: oiov <oiov@duck.com>
Date: Wed, 30 Oct 2024 15:19:52 +0800
Subject: [PATCH] styles: dark home

---
 components/sections/hero-landing.tsx | 10 +++++-----
 styles/globals.css                   | 11 +++++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/sections/hero-landing.tsx b/components/sections/hero-landing.tsx
index e9f566a..9559ebf 100644
--- a/components/sections/hero-landing.tsx
+++ b/components/sections/hero-landing.tsx
@@ -86,7 +86,7 @@ export function LandingImages() {
             width={450}
             height={280}
           />
-          <div className="grids px-2 py-4">
+          <div className="grids grids-dark px-2 py-4">
             <h3 className="mb-6 text-xl font-bold md:text-3xl">
               Free Subdomain Hosting
             </h3>
@@ -106,7 +106,7 @@ export function LandingImages() {
             width={430}
             height={280}
           />
-          <div className="grids px-2 py-4">
+          <div className="grids grids-dark px-2 py-4">
             <h3 className="mb-6 text-xl font-bold md:text-3xl">
               URL Shortening
             </h3>
@@ -126,7 +126,7 @@ export function LandingImages() {
             width={460}
             height={280}
           />
-          <div className="grids px-2 py-4">
+          <div className="grids grids-dark px-2 py-4">
             <h3 className="mb-6 text-xl font-bold md:text-3xl">
               Website Screenshot API
             </h3>
@@ -154,7 +154,7 @@ export function LandingImages() {
             width={430}
             height={280}
           />
-          <div className="grids px-2 py-4">
+          <div className="grids grids-dark px-2 py-4">
             <h3 className="mb-6 text-xl font-bold md:text-3xl">
               Meta Information API
             </h3>
@@ -173,7 +173,7 @@ export function LandingImages() {
         </div>
       </div>
 
-      <div className="grids my-10 flex w-full max-w-6xl items-center justify-center gap-8 pb-6 pt-6 md:gap-14 md:pb-10 md:pt-10">
+      <div className="grids grids-dark my-10 flex w-full max-w-6xl items-center justify-center gap-8 pb-6 pt-6 md:gap-14 md:pb-10 md:pt-10">
         <CardItem
           bgColor="bg-cyan-400"
           rotate="rotate-12 origin-top-left"
diff --git a/styles/globals.css b/styles/globals.css
index 84ad2e4..25807d3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -120,6 +120,17 @@
   background-size: 20px 20px;
 }
 
+.grids-dark:is(.dark *) {
+  background-image: linear-gradient(
+      0deg,
+      rgba(100, 100, 100, 0.278) 1px,
+      transparent 0
+    ),
+    linear-gradient(90deg, rgba(100, 100, 100, 0.278) 1px, transparent 0);
+  background-position: 50%;
+  background-size: 20px 20px;
+}
+
 @font-face {
   font-family: "Bahamas Normal";
   /* font-style: normal;