Adjusted background opacity of the 404 page

This commit is contained in:
Liu Xiaoyi 2020-02-29 01:26:36 +08:00
parent b406b3e671
commit e938e8a842
No known key found for this signature in database
GPG Key ID: B60C78B94C354E11
2 changed files with 50 additions and 32 deletions

View File

@ -11,30 +11,31 @@ permalink: /404.html
<div class="container">
<div class="row">
<div class="not-found">
<div class="not-found-hint">
<div class="not-found-code">
404 NOT FOUND
<div class="not-found-bg"></div>
<div class="not-found-hint">
<div class="not-found-code">
404 NOT FOUND
</div>
<span class="thuhidden">呜喵,金枪鱼</span>被吃掉了
</div>
<div class="not-found-text thuhidden">
如果您认为这一定是出了什么问题,或者正在寻找暂未包含的镜像,欢迎您前往
<a href="https://github.com/tuna/issues/issues/new/choose">
<i class="fa fa-github"></i> tuna/issues
</a>
提交<a href="https://github.com/tuna/issues/issues/new?labels=Service+Issue,404&template=2-bug_report.md" id="new_issue_bug"><!--
-->错误报告</a><!--
-->或者<a href="https://github.com/tuna/issues/issues/new?labels=MirrorRequest&template=1-mirror_request.md" id="new_issue_mr"><!--
-->镜像申请</a>
</div>
<div class="not-found-links">
<a class="not-found-link" href="javascript:history.back()">
<i class="fa fa-arrow-left"></i> 返回上一页
</a>
<a class="not-found-link" href="/">
镜像列表 <i class="fa fa-arrow-right"></i>
</a>
</div>
<span class="thuhidden">呜喵,金枪鱼</span>被吃掉了
</div>
<div class="not-found-text thuhidden">
如果您认为这一定是出了什么问题,或者正在寻找暂未包含的镜像,欢迎您前往
<a href="https://github.com/tuna/issues/issues/new/choose">
<i class="fa fa-github"></i> tuna/issues
</a>
提交<a href="https://github.com/tuna/issues/issues/new?labels=Service+Issue,404&template=2-bug_report.md" id="new_issue_bug"><!--
-->错误报告</a><!--
-->或者<a href="https://github.com/tuna/issues/issues/new?labels=MirrorRequest&template=1-mirror_request.md" id="new_issue_mr"><!--
-->镜像申请</a>
</div>
<div class="not-found-links">
<a class="not-found-link" href="javascript:history.back()">
<i class="fa fa-arrow-left"></i> 返回上一页
</a>
<a class="not-found-link" href="/">
镜像列表 <i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div><!--/container -->

View File

@ -322,6 +322,29 @@ body {
.not-found {
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.not-found-bg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
opacity: .5;
filter: grayscale(0.2);
background-repeat: no-repeat;
background-position: center;
background-image: url(/static/img/missing.png);
background-image: -webkit-image-set(url("/static/img/missing.png") 1x,
url("/static/img/missing@2x.png") 2x,
@ -331,15 +354,9 @@ body {
url("/static/img/missing@2x.png") 2x,
url("/static/img/missing@3x.png") 3x,
url("/static/img/missing@4x.png") 4x);
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@include dark {
opacity: 1;
filter: none;
background-image: url(/static/img/missing-dark.png);
background-image: -webkit-image-set(url("/static/img/missing-dark.png") 1x,
url("/static/img/missing-dark@2x.png") 2x,
@ -352,7 +369,7 @@ body {
}
}
.nonthu .not-found {
.nonthu .not-found-bg {
background-image: none;
}