From e938e8a8429084d3f3a0d2a70e4f2eef917d1179 Mon Sep 17 00:00:00 2001
From: Liu Xiaoyi <circuitcoder0@gmail.com>
Date: Sat, 29 Feb 2020 01:26:36 +0800
Subject: [PATCH] Adjusted background opacity of the 404 page

---
 404.html              | 47 ++++++++++++++++++++++---------------------
 static/css/style.scss | 35 +++++++++++++++++++++++---------
 2 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/404.html b/404.html
index d980aee..1d4ec75 100644
--- a/404.html
+++ b/404.html
@@ -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 -->
diff --git a/static/css/style.scss b/static/css/style.scss
index 374ec5a..903258d 100644
--- a/static/css/style.scss
+++ b/static/css/style.scss
@@ -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;
 }