style: update home style.

Tech-Pang · Sep 28, 2022 · 0bf4e6c · 0bf4e6c
1 parent 2ea2d13
commit 0bf4e6c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -7,27 +7,27 @@ Quick Reference
 
 ## 编程
 
-[TOML](./docs/toml.md)
-[TypeScript](./docs/typescript.md)
-[JavaScript](./docs/javascript.md)
-[JSON](./docs/json.md)
-[Markdown](./docs/markdown.md)
+[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
+[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
+[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(78 57 104/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## 工具包
 
-[npm](./docs/npm.md)
-[package.json](./docs/package.json.md)
-[VSCode](./docs/vscode.md)
-[Semver](./docs/semver.md)
-[Sketch](./docs/sketch.md)
-[Jest](./docs/jest.md)
+[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
+[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->
+[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(255 169 0/var(\-\-bg\-opacity));-->
+[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
+[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## Linux 命令
 
-[Cron](./docs/cron.md)
-[Git](./docs/git.md)
+[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
+[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->
 
 ## License

diff --git a/package.json b/package.json
@@ -2,6 +2,9 @@
   "name": "reference",
   "version": "1.0.0",
   "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
+  "author": "jaywcjlove",
+  "license": "MIT",
+  "homepage": "https://jaywcjlove.github.io/reference",
   "private": false,
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -11,13 +14,10 @@
     "type": "git",
     "url": "git+https://github.com/jaywcjlove/reference.git"
   },
-  "keywords": [],
-  "author": "jaywcjlove",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/jaywcjlove/reference/issues"
   },
-  "homepage": "https://github.com/jaywcjlove/reference#readme",
+  "keywords": [],
   "devDependencies": {
     "@wcj/markdown-to-html": "^2.0.14",
     "fs-extra": "^10.1.0",

diff --git a/scripts/style.css b/scripts/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,15 +621,17 @@ pre {
 }
 
 @media (min-width: 1024px) {
-  .home-card {
-    display: grid;
-    gap: 2rem;
-  }
   .h2wrap-body {
     display: grid;
     gap: 1.75rem;
   }
   .h2wrap-body > .wrap {
     margin-bottom: 0;
   }
+}
+
+@media (min-width: 768px) {
+  .home-card {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+  }
 }