diff --git a/index.html b/index.html
index 3c3720be..b530ce37 100644
--- a/index.html
+++ b/index.html
@@ -14,25 +14,25 @@
 <p>如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。</p>
 </div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>编程</h2><div class="wrap-body">
 <p class="home-card">
-  <a href="./docs/toml.html">TOML</a>
-  <a href="./docs/typescript.html">TypeScript</a>
-  <a href="./docs/javascript.html">JavaScript</a>
-  <a href="./docs/json.html">JSON</a>
-  <a href="./docs/markdown.html">Markdown</a>
+  <a href="./docs/toml.html" style="background: rgb(132 132 132/var(\-\-bg\-opacity));">TOML</a><!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+  <a href="./docs/typescript.html" style="background: rgb(49 120 198/var(\-\-bg\-opacity));">TypeScript</a><!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
+  <a href="./docs/javascript.html" style="background: rgb(203 183 31/var(\-\-bg\-opacity));">JavaScript</a><!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
+  <a href="./docs/json.html" style="background: rgb(57 59 60/var(\-\-bg\-opacity));">JSON</a><!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+  <a href="./docs/markdown.html" style="background: rgb(78 57 104/var(\-\-bg\-opacity));">Markdown</a><!--rehype:style=background: rgb(78 57 104/var(\-\-bg\-opacity));-->
 </p><!--rehype:class=home-card-->
 </div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>工具包</h2><div class="wrap-body">
 <p class="home-card">
-  <a href="./docs/npm.html">npm</a>
-  <a href="./docs/package.json.html">package.json</a>
-  <a href="./docs/vscode.html">VSCode</a>
-  <a href="./docs/semver.html">Semver</a>
-  <a href="./docs/sketch.html">Sketch</a>
-  <a href="./docs/jest.html">Jest</a>
+  <a href="./docs/npm.html" style="background: rgb(203 2 0/var(\-\-bg\-opacity));">npm</a><!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
+  <a href="./docs/package.json.html" style="background: rgb(132 132 132/var(\-\-bg\-opacity));">package.json</a><!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+  <a href="./docs/semver.html" style="background: rgb(106 111 141/var(\-\-bg\-opacity));">Semver</a><!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->
+  <a href="./docs/sketch.html" style="background: rgb(255 169 0/var(\-\-bg\-opacity));">Sketch</a><!--rehype:style=background: rgb(255 169 0/var(\-\-bg\-opacity));-->
+  <a href="./docs/jest.html" style="background: rgb(153 66 91/var(\-\-bg\-opacity));">Jest</a><!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
+  <a href="./docs/vscode.html" style="background: rgb(91 163 230/var(\-\-bg\-opacity));">VSCode</a><!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 </p><!--rehype:class=home-card-->
 </div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Linux 命令</h2><div class="wrap-body">
 <p class="home-card">
-  <a href="./docs/cron.html">Cron</a>
-  <a href="./docs/git.html">Git</a>
+  <a href="./docs/cron.html" style="background: rgb(239 68 68/var(\-\-bg\-opacity));">Cron</a><!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
+  <a href="./docs/git.html" style="background: rgb(215 89 62/var(\-\-bg\-opacity));">Git</a><!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
 </p><!--rehype:class=home-card-->
 </div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>License</h2><div class="wrap-body">
 <p>MIT © <a href="https://github.com/jaywcjlove">Kenny Wong</a></p>
diff --git a/style/style.css b/style/style.css
index d1362022..fcb53565 100644
--- a/style/style.css
+++ b/style/style.css
@@ -22,8 +22,10 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
   margin: 0;
 }
 
-.max-container a, .max-container a:visited {
+.max-container a {
   color: rgb(2 132 199/1);
+}
+.max-container a, .max-container a:visited {
   text-decoration: none;
   background-image: linear-gradient(transparent,transparent 6px,#34495e 6px,#34495e);
   background-position: bottom;
@@ -78,7 +80,9 @@ body.home .h1wrap p {
 }
 
 .home-card {
-  grid-template-columns: repeat(4,minmax(0,1fr));
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(2,minmax(0,1fr));
 }
 
 .home-card a {
@@ -87,9 +91,9 @@ body.home .h1wrap p {
   cursor: pointer;
   border-radius: 0.5rem;
   padding: 1rem;
-  color: rgb(30 41 59/1);
   box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05);
-  color: rgb(203 213 225/1);
+  --text-opacity: 1;
+  color: rgb(203 213 225/var(--text-opacity));
   --bg-opacity: 0.5;
   background-color: rgb(62 69 72/var(--bg-opacity));
   transition: all .3s;
@@ -617,10 +621,6 @@ pre {
 }
 
 @media (min-width: 1024px) {
-  .home-card {
-    display: grid;
-    gap: 2rem;
-  }
   .h2wrap-body {
     display: grid;
     gap: 1.75rem;
@@ -628,4 +628,10 @@ pre {
   .h2wrap-body > .wrap {
     margin-bottom: 0;
   }
+}
+
+@media (min-width: 768px) {
+  .home-card {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+  }
 }
\ No newline at end of file