buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-22 23:11:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: update home style. 0bf4e6c7fd

Browse Source
This commit is contained in:
jaywcjlove
2022-09-28 08:31:34 +00:00
parent 7e048e462a
commit 50bbfce02a
2 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -14,25 +14,25 @@
<p>如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。</p> <p>如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。</p>
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>编程</h2><div class="wrap-body"> </div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2>编程</h2><div class="wrap-body">
<p class="home-card"> <p class="home-card">
<a href="./docs/toml.html">TOML</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">TypeScript</a> <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">JavaScript</a> <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">JSON</a> <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">Markdown</a> <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--> </p><!--rehype:class=home-card-->
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>工具包</h2><div class="wrap-body"> </div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>工具包</h2><div class="wrap-body">
<p class="home-card"> <p class="home-card">
<a href="./docs/npm.html">npm</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">package.json</a> <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/vscode.html">VSCode</a> <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/semver.html">Semver</a> <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/sketch.html">Sketch</a> <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/jest.html">Jest</a> <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--> </p><!--rehype:class=home-card-->
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Linux 命令</h2><div class="wrap-body"> </div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>Linux 命令</h2><div class="wrap-body">
<p class="home-card"> <p class="home-card">
<a href="./docs/cron.html">Cron</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">Git</a> <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--> </p><!--rehype:class=home-card-->
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2>License</h2><div class="wrap-body"> </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> <p>MIT © <a href="https://github.com/jaywcjlove">Kenny Wong</a></p>

22
style/style.css
View File

@ -22,8 +22,10 @@ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
margin: 0; margin: 0;
} }
.max-container a, .max-container a:visited { .max-container a {
color: rgb(2 132 199/1); color: rgb(2 132 199/1);
}
.max-container a, .max-container a:visited {
text-decoration: none; text-decoration: none;
background-image: linear-gradient(transparent,transparent 6px,#34495e 6px,#34495e); background-image: linear-gradient(transparent,transparent 6px,#34495e 6px,#34495e);
background-position: bottom; background-position: bottom;
@ -78,7 +80,9 @@ body.home .h1wrap p {
} }
.home-card { .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 { .home-card a {
@ -87,9 +91,9 @@ body.home .h1wrap p {
cursor: pointer; cursor: pointer;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; 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); 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; --bg-opacity: 0.5;
background-color: rgb(62 69 72/var(--bg-opacity)); background-color: rgb(62 69 72/var(--bg-opacity));
transition: all .3s; transition: all .3s;
@ -617,10 +621,6 @@ pre {
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.home-card {
display: grid;
gap: 2rem;
}
.h2wrap-body { .h2wrap-body {
display: grid; display: grid;
gap: 1.75rem; gap: 1.75rem;
@ -629,3 +629,9 @@ pre {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media (min-width: 768px) {
.home-card {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}