feat: add filters to the cover image (#89)

#### What type of PR is this?
/kind feature

#### What this PR does / why we need it:
为封面图增加一个暗色调滤镜，解决在亮色调背景图的情况下标题无法看清的问题。

#### Which issue(s) this PR fixes:
Fixes #86 

#### Does this PR introduce a user-facing change?

```release-note
为封面图增加暗色调滤镜
```

src/styles/main.css

@@ -34,6 +34,10 @@ body {
   @apply my-3 ml-3 space-y-1 border-l pl-2;
 }
 
+.pattern-header-text {
+  text-shadow: 2px 2px 10px #000;
+}
+
 .is-active-li {
   @apply rounded bg-gray-100 dark:bg-slate-600;
 }

templates/modules/footer.html

@@ -7,8 +7,10 @@
         class="mr-3 h-8 w-8"
         th:alt="${site.title}"
       />
-      <span class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50" 
+      <span
-            th:text="${theme.config.footer.title ?: site.title}">
+        class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
+        th:text="${theme.config.footer.title ?: site.title}"
+      >
       </span>
     </a>
     <th:block th:if="${not #strings.isEmpty(theme.config.footer.menu)}">

templates/modules/hero.html

@@ -37,13 +37,17 @@
       </th:block>
     </th:block>
   </div>
+  <th:block th:if="${theme.config.layout.content_header} and ${not #strings.isEmpty(cover)}">
+    <div class="relative">
       <div
-    th:if="${theme.config.layout.content_header} and ${not #strings.isEmpty(cover)}"
+        class="before:z-1 relative h-96 bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40 before:content-['*']"
-    class="h-96 bg-cover bg-center bg-no-repeat"
         th:style="'background-image: url('+${cover}+')'"
+      ></div>
+      <header
+        class="pattern-header-text absolute top-1/2 mx-auto flex w-full flex-col items-center justify-center gap-3"
       >
-    <div class="container mx-auto flex h-full flex-col items-center justify-center gap-3 py-6">
+        <h1 class="text-5xl text-white" th:text="${title}"></h1>
-      <span class="text-5xl text-white" th:text="${title}"></span>
+      </header>
-    </div>
     </div>
+  </th:block>
 </section>

templates/modules/layout.html

@@ -23,7 +23,7 @@
       <th:block th:replace="~{modules/hero :: hero(isHome = true, cover = null, title = null)}" />
     </th:block>
     <section class="container mx-auto mt-6 grid grid-cols-4 gap-6" th:classappend="${contentClass}">
-      <div class="col-span-4 sm:col-span-3">
+      <div class="z-0 col-span-4 sm:col-span-3">
         <th:block th:replace="${content}" />
       </div>
       <th:block th:if="${sidebar != null}">

templates/post.html

@@ -15,7 +15,7 @@
   </th:block>
   <th:block th:fragment="sidebar_prepend">
     <div
-      class="toc-container z-[5] sticky top-20 w-full cursor-pointer rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
+      class="toc-container sticky top-20 z-[5] w-full cursor-pointer rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
     >
       <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
         <span class="i-tabler-list text-lg"></span>