diff --git a/src/css/custom.scss b/src/css/custom.scss
index 6fdd2f4b..9b4601ae 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -46,6 +46,7 @@
 
   --blog-item-background-color: linear-gradient(180deg, #fcfcfc, #fff);
   --blog-item-shadow: 0 10px 60px 5px #f1f5f9, 0 0 10px 0 #e4e4e7;
+  --blog-item-shade: #f4f4f5;
 
   -webkit-font-smoothing: unset;
 
@@ -64,8 +65,9 @@ html[data-theme='dark'] {
   --ifm-toc-border-color: #313131;
 
   --content-background-color: #18181b;
-  --blog-item-background-color: linear-gradient(180deg, #18181b, #000);
-  --blog-item-shadow: 0 10px 60px 5px #253748, 0 0 10px 0 #253748;
+  --blog-item-background-color: linear-gradient(180deg, #171717, #0a0a0a);
+  --blog-item-shadow: 0 12px 24px rgb(37 55 72 / 20%), 0 0 8px rgb(37 55 72 / 40%);
+  --blog-item-shade: #27272a;
 
   color: hsl(214deg 15% 85%);
 
@@ -192,7 +194,7 @@ article {
   }
 }
 
-@media (max-width: 570px) {
+@media (width <= 570px) {
   h1 {
     font-size: 1.6em;
   }
@@ -209,7 +211,7 @@ article {
 }
 
 /* 导航收缩相应尺寸调大 */
-@media (max-width: 1100px) {
+@media (width <= 1100px) {
   .navbar > .container,
   .navbar > .container-fluid {
     padding: 0;
diff --git a/src/pages/resource/_components/ResourceCard/styles.module.css b/src/pages/resource/_components/ResourceCard/styles.module.css
index d6a3087e..cc2b5f29 100644
--- a/src/pages/resource/_components/ResourceCard/styles.module.css
+++ b/src/pages/resource/_components/ResourceCard/styles.module.css
@@ -1,7 +1,7 @@
 .resourceCard {
   background-color: var(--ifm-card-background-color);
   border-radius: 8px;
-  border: 1px solid rgb(204 204 204 / 50%);
+  border: 1px solid var(--ifm-toc-border-color);
   height: 100%;
   display: flex;
   flex-direction: row;
diff --git a/src/theme/BlogPostGridItems/styles.module.scss b/src/theme/BlogPostGridItems/styles.module.scss
index fb278d3d..d5d6a0ed 100644
--- a/src/theme/BlogPostGridItems/styles.module.scss
+++ b/src/theme/BlogPostGridItems/styles.module.scss
@@ -13,8 +13,7 @@
   grid-template-areas:
     'title title'
     'tags date';
-  column-gap: 2em;
-  row-gap: 1em;
+  gap: 1em 2em;
   align-items: center;
   padding: 1em 1.2em;
   background: var(--blog-item-background-color);
@@ -25,6 +24,7 @@
   &:hover {
     box-sizing: border-box;
     box-shadow: var(--blog-item-shadow);
+    background: var(--blog-item-shade);
   }
 
   .itemTitle {
@@ -78,14 +78,14 @@
 }
 
 /* post list view adjustment */
-@media only screen and (max-width: 768px) {
+@media only screen and (width <= 768px) {
   .postGridItem {
     min-width: 100%;
   }
 }
 
 /* post list view adjustment */
-@media only screen and (max-width: 576px) {
+@media only screen and (width <= 576px) {
   .blogGrid {
     grid-template-columns: minmax(0, max-content);
   }