buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-22 06:51:31 +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>
</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>

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;
}
.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;
@ -629,3 +629,9 @@ pre {
margin-bottom: 0;
}
}
@media (min-width: 768px) {
.home-card {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}