From 06c7c78d43dad2dd124d1e0ba4df70050b199385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E7=BB=B4=E5=98=89?=
 <guoweijia@guoweijiadeMacBook-Pro.local>
Date: Thu, 12 Nov 2020 14:50:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BC=98=E5=8C=96=E5=9B=BE=E4=B9=A6?=
 =?UTF-8?q?=E5=B0=81=E9=9D=A2=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/index.html   | 39 +++++++++++++++------------------------
 static/css/index.css | 22 ++++++++++++++++++++--
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 0b97f35..ffc3782 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,11 +2,10 @@
 
 <section class="text-gray-700 body-font">
   <div class="container px-5 py-8 mx-auto">
-   <!-- {{- partial "custom-message.html" . -}}-->
+    <!-- {{- partial "custom-message.html" . -}}-->
 
     <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
-      {{ range where .Site.Pages "Kind" "page" }}
-      {{ if ne .Params.Exclude true }}
+      {{ range where .Site.Pages "Kind" "page" }} {{ if ne .Params.Exclude true }}
       <a
         target="_blank"
         rel="noopener"
@@ -15,30 +14,22 @@
       >
         <div class="rounded-lg h-64 overflow-hidden card-item relative">
           {{ if (or .Params.Image .CurrentSection.Params.Image) }}
-          <img
-            alt="{{ .Title }}"
-            class="object-cover object-center h-full w-full"
-            src="{{ (or .Params.Image .CurrentSection.Params.Image) }}"
-          />
+          <img alt="{{ .Title }}" class="object-cover object-center h-full w-full" src="{{ (or .Params.Image .CurrentSection.Params.Image) }}" />
           {{ end }}
-          <span
-            class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl"
-            >{{ title .Section }}</span
-          >
-          <h2
-            class="h2 text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
-          >
-            {{ .Title }}
-          </h2>
-          <p
-            class="h3 text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0"
-          >
-            {{ .Params.Subtitle }}
-          </p>
+          <div class="card-content">
+            <span class="bg-blue-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">{{ title .Section }}</span>
+            <h2
+              class="h2 text-white px-2 py-1 tracking-widest text-2xl leading-tight font-extrabold font-bree text-center w-full h-full flex justify-center items-center absolute top-0 left-0"
+            >
+              {{ .Title }}
+            </h2>
+            <p class="h3 text-white px-2 py-1 tracking-widest text-md leading-tight font-light w-full text-center absolute bottom-0 left-0">
+              {{ .Params.Subtitle }}
+            </p>
+          </div>
         </div>
       </a>
-      {{ end }}
-      {{ end }}
+      {{ end }} {{ end }}
     </div>
   </div>
 </section>
diff --git a/static/css/index.css b/static/css/index.css
index 4b20a9d..2edf65a 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,8 +1,26 @@
+.card-item::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background: rgba(0, 0, 0, 0.4);
+}
+.card-item .card-content {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 9;
+  top: 0;
+  left: 0;
+}
 .card-item .object-cover {
-  filter: brightness(0.6) blur(1px);
+  filter: blur(1px);
   transition: all 0.2s;
 }
 .card-item:hover .object-cover {
   transform: scale(1.02);
-  filter: brightness(0.6) blur(0);
+  filter: blur(0);
 }
-- 
GitLab