frost-craft/frost-navigation
1
0
Fork 0
Code Releases Activity

调整样式；加入背景图；

Browse Source
This commit is contained in:
Frost-ZX
2019-10-29 13:40:57 +08:00
parent b33dac7746
commit 87ee9001a0
6 changed files with 266 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/css/slinky.min.css → docs/css/slinky.css
View File

@@ -11,7 +11,8 @@
transform: translateZ(0);
}
.slinky-menu ul, .slinky-menu li {
.slinky-menu ul,
.slinky-menu li {
list-style: none;
margin: 0;
}
@@ -76,7 +77,8 @@
background: rgba(90, 200, 250, 0.5);
}
.slinky-theme-default .next::after, .slinky-theme-default .back::before {
.slinky-theme-default .next::after,
.slinky-theme-default .back::before {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICAgIDxwYXRoIGQ9Ik0xMi4yMTkgMi4yODFMMTAuNzggMy43MiAxOC4wNjIgMTFIMnYyaDE2LjA2M2wtNy4yODIgNy4yODEgMS40MzggMS40MzggOS05IC42ODctLjcxOS0uNjg3LS43MTl6IiAvPjwvc3ZnPg==) center no-repeat;
background-size: 1em;
content: '';
@@ -95,10 +97,12 @@
transform: scaleX(-1);
}
.slinky-theme-default .next:hover::after, .slinky-theme-default .back:hover::before {
.slinky-theme-default .next:hover::after,
.slinky-theme-default .back:hover::before {
opacity: 0.75;
}
.slinky-theme-default .next:active::after, .slinky-theme-default .back:active::before {
.slinky-theme-default .next:active::after,
.slinky-theme-default .back:active::before {
opacity: 1;
}

84
docs/css/style.css
View File

@@ -24,14 +24,19 @@ html {
}
body {
background: #F9F9F9;
color: #222;
background-attachment: fixed;
background-color: #F9F9F9;
background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
cursor: default;
display: flex;
flex-direction: column;
font: normal 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
justify-content: center;
margin: 5em auto;
margin: 6em auto;
max-width: calc(100% - 2em);
min-height: calc(100vh - 8em);
/* text-transform: lowercase; */
@@ -64,10 +69,11 @@ h1, h2, h3 {
}
h2 {
color: #222;
font-size: 1.5em;
color: #FFF;
font-size: 1.6em;
margin-bottom: 2em;
position: relative;
text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
}
h2::before {
@@ -134,11 +140,12 @@ th, td {
vertical-align: top;
}
/* layout */
/* Layout */
header, h1 {
align-items: center;
align-self: center;
color: #444;
display: flex;
flex-direction: column;
}
@@ -153,14 +160,14 @@ header h1::before {
}
header p {
color: gray;
color: #555;
margin-top: 1em;
}
main {
margin: 4em 0;
opacity: 0;
/* background: #fff; */
/* background: #FFF; */
transition: opacity 1s;
}
@@ -169,17 +176,25 @@ main section:not(:first-child) {
}
footer {
color: #555;
color: #FFF;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
}
footer a {
color: #FFF;
}
footer img {
height: 1.5em;
}
/* components */
footer p {
margin: 0;
}
/* Components */
.loading {
align-items: center;
@@ -208,29 +223,35 @@ footer img {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #999;
background-color: #CCC;
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
background-color: #03A9F4;
}
::-webkit-scrollbar-track {
background: #eee;
background-color: #FFF;
border-radius: 0;
}
/* 工具面板 */
.tool-panel {
visibility: hidden;
/* visibility: hidden; */
z-index: 100;
position: fixed;
left: 0;
bottom: 0;
bottom: -110%;
opacity: 0;
transition: all 1.0s;
}
.tool-panel-bar {
height: 32px;
}
.tool-panel-newtab, .tool-panel-close {
.tool-panel-newtab,
.tool-panel-close {
position: absolute;
top: 0;
height: 32px;
@@ -291,6 +312,7 @@ main section li a:not(.back) {
top: 50%;
left: 50%;
font-size: 5vw;
color: #FFF;
transform: translate(-50%, -50%);
transition: opacity 1s;
}
@@ -324,7 +346,8 @@ main section li a:not(.back) {
.search-bar .search-input:hover {
border: solid 2px #00BCD4;
}
.search-bar .search-submit, .search-bar .search-cancel {
.search-bar .search-submit,
.search-bar .search-cancel {
width: 75px;
height: 50px;
border: none;
@@ -334,7 +357,8 @@ main section li a:not(.back) {
color: #FFF;
transition: background 0.2s;
}
.search-bar .search-submit:hover, .search-bar .search-cancel:hover {
.search-bar .search-submit:hover,
.search-bar .search-cancel:hover {
background-color: #00BCD4;
}
.search-bar .search-submit {
@@ -370,7 +394,8 @@ main section li a:not(.back) {
height: 40px;
font-size: 16px;
}
.search-bar .search-submit, .search-bar .search-cancel {
.search-bar .search-submit,
.search-bar .search-cancel {
width: 16%;
height: 40px;
font-size: 16px;
@@ -398,6 +423,10 @@ main section li a:not(.back) {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
white-space: nowrap;
}
.search-engine-select {
color: #FFF;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
#search-engine-input {
padding-left: 15px;
box-sizing: border-box;
@@ -474,22 +503,27 @@ main section li a:not(.back) {
left: 0;
bottom: 20px;
width: 100%;
opacity: 0.9;
/* opacity: 0.9; */
text-align: center;
animation: FloatingBarSlide 1s ease-out 1;
}
.floating-bar-search, .floating-bar-tool, .floating-bar-about, .floating-bar-totop {
.floating-bar-search,
.floating-bar-tool,
.floating-bar-about,
.floating-bar-totop {
display: inline-block;
width: 45px;
height: 30px;
width: 50px;
height: 32px;
background-color: #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
box-shadow: 0 8px 10px -4px rgba(76, 175, 80, 0.5);
text-align: center;
line-height: 30px;
line-height: 32px;
font-size: 14px;
color: #fff;
}
.floating-bar-tool, .floating-bar-about, .floating-bar-totop {
.floating-bar-tool,
.floating-bar-about,
.floating-bar-totop {
margin-left: 5px;
}

42
docs/css/tool.css
View File

@@ -9,7 +9,12 @@ html {
}
body {
padding: 20px 0 50px 0;
background-color: #F5F5F5;
background-attachment: fixed;
background-color: #F9F9F9;
background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
scroll-behavior: smooth;
}
@@ -20,11 +25,14 @@ body {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #999;
background-color: #CCC;
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
background-color: #03A9F4;
}
::-webkit-scrollbar-track {
background: #eee;
background-color: #FFF;
border-radius: 0;
}
@@ -48,7 +56,7 @@ body {
.main {
margin: 0 auto;
width: 90%;
max-width: 400px;
max-width: 450px;
}
.main > div {
margin: 20px 0;
@@ -57,7 +65,7 @@ body {
width: 100%;
border-radius: 5px;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.main > div header {
margin-bottom: 10px;
@@ -234,14 +242,26 @@ body {
position: fixed;
right: 20px;
bottom: 20px;
height: 50px;
width: 50px;
border-radius: 50%;
box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1);
background-color: #FFF;
text-align: center;
line-height: 50px;
font-family: monospace;
font-size: 20px;
color: #2196F3;
user-select: none;
transition: all 0.5s;
}
.to-top:hover {
right: 25px;
bottom: 25px;
height: 40px;
width: 40px;
border-radius: 50%;
box-shadow: 2px 2px 5px rgba(76, 175, 80, 0.5);
background-color: #4CAF50;
text-align: center;
line-height: 36px;
line-height: 40px;
font-size: 20px;
color: #FFF;
user-select: none;
transform: rotate(360deg);
}

BIN
docs/img/Unsplash_V6TWE6h8gyg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 439 KiB

BIN
docs/img/Unsplash_V6TWE6h8gyg_0.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

70
docs/index.html
View File

@@ -9,7 +9,7 @@
<meta name="description" content="网址导航" />
<meta name="keywords" content="link,navigation,导航,网站,网址" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slinky.min.css"/>
<link rel="stylesheet" href="css/slinky.css" />
</head>
<body>
<header>
@@ -215,7 +215,8 @@
<li>
<a href="#">官方</a>
<ul>
<li><a href="https://www.vocaloid.com/">VOCALOID ( ボーカロイド・ボカロ ) 公式サイト</a></li>
<li><a href="https://www.vocaloid.com/">VOCALOID ( ボーカロイド・ボカロ )
公式サイト</a></li>
<li><a href="http://www.zenith-grp.com/henian/">上海禾念信息科技有限公司</a></li>
<li><a href="https://shop69979973.taobao.com/">上海禾念（淘宝网）</a></li>
</ul>
@@ -738,7 +739,8 @@
<a href="#">Windows</a>
<ul>
<li><a href="https://msdn.itellyou.cn/">MSDN，我告诉你</a></li>
<li><a href="http://www.microsoft.com/zh-cn/download/details.aspx?id=5842">Windows 7 Service Pack 1</a></li>
<li><a href="http://www.microsoft.com/zh-cn/download/details.aspx?id=5842">Windows 7
Service Pack 1</a></li>
</ul>
</li>
<li>
@@ -803,8 +805,10 @@
<ul>
<li><a href="http://www.zuimc.com/">最MC论坛</a></li>
<li><a href="https://www.mcbbs.net/forum.php">Minecraft 中文论坛</a></li>
<li><a href="http://forum.minecraft-hk.com/portal.php">Minecraft-HK Community</a></li>
<li><a href="https://www.planetminecraft.com/">Planet Minecraft Community</a></li>
<li><a href="http://forum.minecraft-hk.com/portal.php">Minecraft-HK
Community</a></li>
<li><a href="https://www.planetminecraft.com/">Planet Minecraft
Community</a></li>
</ul>
</li>
<li>
@@ -813,7 +817,8 @@
<li>
<a href="#">官方</a>
<ul>
<li><a href="https://minecraft-zh.gamepedia.com/">中文 Minecraft Wiki</a></li>
<li><a href="https://minecraft-zh.gamepedia.com/">中文 Minecraft
Wiki</a></li>
<li><a href="https://minecraft-zh.gamepedia.com/附魔">附魔</a></li>
<li><a href="https://minecraft-zh.gamepedia.com/记分板">记分板</a></li>
<li><a href="https://minecraft-zh.gamepedia.com/命令">命令</a></li>
@@ -897,10 +902,12 @@
<li><a href="https://cuberite.org/">Cuberite</a></li>
<li><a href="https://www.mcedit-unified.net/">MCEdit Unified</a></li>
<li><a href="http://www.realtimerendering.com/erich/minecraft/public/mineways/">Mineways</a></li>
<li><a href="https://mcreator.net/">MCreator - The Best Minecraft Mod Maker Ever</a></li>
<li><a href="https://mcreator.net/">MCreator - The Best Minecraft Mod Maker
Ever</a></li>
<li><a href="https://zh-cn.namemc.com/">NameMC</a></li>
<li><a href="https://www.minecraftjson.com/">Tellraw Generator</a></li>
<li><a href="https://www.universalminecrafteditor.com/">Universal Minecraft Editor</a></li>
<li><a href="https://www.universalminecrafteditor.com/">Universal Minecraft
Editor</a></li>
</ul>
</li>
<!--
@@ -915,7 +922,8 @@
<a href="#">开发</a>
<ul>
<li><a href="https://mcforge-cn.readthedocs.io/zh/latest/">Forge 文档</a></li>
<li><a href="https://mcforge-cn.readthedocs.io/zh/latest/gettingstarted/structuring/">Forge 文档 - Mod 的结构</a></li>
<li><a href="https://mcforge-cn.readthedocs.io/zh/latest/gettingstarted/structuring/">Forge
文档 - Mod 的结构</a></li>
</ul>
</li>
<li>
@@ -927,7 +935,8 @@
<li><a href="https://www.bakaxl.com/">BakaXL</a></li>
<li><a href="http://jespertheend.com/">Jesper the End</a></li>
<li><a href="https://www.mineimator.com/">Mine-imator</a></li>
<li><a href="https://www.curseforge.com/minecraft/mc-mods">Minecraft CurseForge (Mod)</a></li>
<li><a href="https://www.curseforge.com/minecraft/mc-mods">Minecraft
CurseForge (Mod)</a></li>
<li><a href="http://www.minecraftxz.com/">Minecraft 中文下载站</a></li>
</ul>
</li>
@@ -935,9 +944,11 @@
<a href="#">光影</a>
<ul>
<li><a href="http://dedelner.net/">dedelner</a></li>
<li><a href="http://www.minecraftforum.net/forums/mapping-and-modding/minecraft-mods/1290991-v05-mrmeepz-shaders-the-cats-shaderpack">MrMeepz' Shaders</a></li>
<li><a href="http://www.minecraftforum.net/forums/mapping-and-modding/minecraft-mods/1290991-v05-mrmeepz-shaders-the-cats-shaderpack">MrMeepz'
Shaders</a></li>
<li><a href="http://sonicether.com/shaders/">SEUS</a></li>
<li><a href="http://www.minecraftforum.net/forums/mapping-and-modding/minecraft-mods/1294110-a-super-shaders">super Shaders</a></li>
<li><a href="http://www.minecraftforum.net/forums/mapping-and-modding/minecraft-mods/1294110-a-super-shaders">super
Shaders</a></li>
<li><a href="https://werrusshaders.wordpress.com/">Werrus Shaders</a></li>
</ul>
</li>
@@ -950,7 +961,8 @@
<li><a href="http://files.minecraftforge.net/">Forge</a></li>
</ul>
</li>
<li><a href="http://chickenbones.net/Pages/links.html">Chicken Bones Downloads</a></li>
<li><a href="http://chickenbones.net/Pages/links.html">Chicken Bones
Downloads</a></li>
<li><a href="http://chocolateminecraft.com/">Chocolate Minecraft</a></li>
<li><a href="http://ichun.us/">iChun's blog</a></li>
<li><a href="http://www.liteloader.com/">LiteLoader</a></li>
@@ -1100,13 +1112,15 @@
<li><a href="https://violentmonkey.github.io/">Violentmonkey</a></li>
</ul>
</li>
<li><a href="https://sourceforge.net/projects/npp-plugins/files/">Notepad++ Plugins</a></li>
<li><a href="https://sourceforge.net/projects/npp-plugins/files/">Notepad++
Plugins</a></li>
</ul>
</li>
<li>
<a href="#">创作 / 制作</a>
<ul>
<li><a href="https://helpx.adobe.com/download-install/kb/creative-cloud-apps-download.html">Adobe Creative Cloud apps</a></li>
<li><a href="https://helpx.adobe.com/download-install/kb/creative-cloud-apps-download.html">Adobe
Creative Cloud apps</a></li>
<li><a href="https://www.libreoffice.org/">LibreOffice</a></li>
<li><a href="https://ephtracy.github.io/">MagicaVoxel</a></li>
<li><a href="https://www.midieditor.org/">MidiEditor</a></li>
@@ -1161,8 +1175,10 @@
<a href="#">虚拟化</a>
<ul>
<li><a href="https://www.virtualbox.org/">Oracle VM VirtualBox</a></li>
<li><a href="http://download.virtualbox.org/virtualbox/">Oracle VM VirtualBox (Download)</a></li>
<li><a href="https://www.vmware.com/cn/products/workstation-pro.html">VMware Workstation Pro</a></li>
<li><a href="http://download.virtualbox.org/virtualbox/">Oracle VM VirtualBox
(Download)</a></li>
<li><a href="https://www.vmware.com/cn/products/workstation-pro.html">VMware
Workstation Pro</a></li>
</ul>
</li>
</ul>
@@ -1190,7 +1206,8 @@
<li>
<a href="#">其他</a>
<ul>
<li><a href="http://blog.sina.com.cn/s/blog_5f162b830102wosd.html">33 个 GIF 网页预加载 PSD</a></li>
<li><a href="http://blog.sina.com.cn/s/blog_5f162b830102wosd.html">33 个 GIF
网页预加载 PSD</a></li>
<li><a href="http://geek.prdsarea.com/forum-256-1.html">MMD 模型</a></li>
</ul>
</li>
@@ -1217,7 +1234,8 @@
<li><a href="https://lbs.amap.com/">高德开放平台</a></li>
<li><a href="http://www.itpk.cn/robot.php">茉莉机器人 API</a></li>
<li><a href="https://open.tencent.com/">腾讯开放平台</a></li>
<li><a href="javascript:prompt('API','https://music.163.com/song/media/outer/url?id={音乐 ID}.mp3'); void(0);">网易云音乐音频 API</a></li>
<li><a href="javascript:prompt('API','https://music.163.com/song/media/outer/url?id={音乐 ID}.mp3'); void(0);">网易云音乐音频
API</a></li>
<li><a href="https://open.weixin.qq.com/">微信开放平台</a></li>
<li><a href="https://open.weibo.com/">新浪微博开放平台</a></li>
<li><a href="https://www.xfyun.cn/">讯飞开放平台</a></li>
@@ -1262,7 +1280,7 @@
<div class="tool-panel-bar">
<div class="tool-panel-blank"></div>
<div class="tool-panel-newtab" onclick="window.open('tool.html');">新窗口</div>
<div class="tool-panel-close" onclick="ToolPanel.style.visibility = 'hidden';">关闭</div>
<div class="tool-panel-close" onclick="ToolPanel.style.bottom = '-110%'; ToolPanel.style.opacity = '0';">关闭</div>
</div>
<div class="tool-panel-iframe">
<iframe src="tool.html" frameborder="0"></iframe>
@@ -1273,18 +1291,26 @@
<!-- 悬浮栏 -->
<div class="floating-bar">
<div class="floating-bar-search" onclick="SearchPanel.style.visibility = 'visible'; SearchInput.focus();">查找</div>
<div class="floating-bar-tool" onclick="ToolPanel.style.visibility = 'visible';">工具</div>
<div class="floating-bar-tool" onclick="ToolPanel.style.bottom = '0'; ToolPanel.style.opacity = '1';">工具</div>
<div class="floating-bar-about" onclick="window.open('https://github.com/Frost-ZX/frost-navigation/blob/master/README.md');">关于</div>
<div class="floating-bar-totop" onclick="document.body.scrollTop = 0; document.documentElement.scrollTop = 0;">▲</div>
</div>
<!-- 底栏 -->
<footer>
<p>
&#169; 2019 <a href="https://github.com/Frost-ZX/frost-navigation">Frost 网址导航</a>
| Made by <a href="https://frost-zx.github.io/" target="_blank">Frost-ZX</a>
<br/>
</p>
<p>
Template: <a href="https://github.com/alizahid/slinky" target="_blank">Slinky</a>
| Made with <img src="files/heart.svg" alt="love" />
by <a href="http://designplox.com">Ali Zahid</a>
</p>
<p>
Background | Photo by
<a href="https://unsplash.com/@francesco_ungaro">Francesco Ungaro</a>
on <a href="https://unsplash.com/">Unsplash</a>
</p>
</footer>
<!-- JavaScript -->
<script src="js/jquery-3.2.1.min.js"></script>