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
为封面图增加暗色调滤镜
```
This commit is contained in:
Takagi
2023-07-07 10:30:11 +08:00
committed by GitHub
parent 42918cf81c
commit 810cc3eff6
6 changed files with 24 additions and 14 deletions

View File

@@ -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;
}

File diff suppressed because one or more lines are too long

View File

@@ -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"
th:text="${theme.config.footer.title ?: site.title}">
<span
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)}">

View File

@@ -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="h-96 bg-cover bg-center bg-no-repeat"
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-['*']"
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">
<span class="text-5xl text-white" th:text="${title}"></span>
</div>
<h1 class="text-5xl text-white" th:text="${title}"></h1>
</header>
</div>
</th:block>
</section>

View File

@@ -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}">

View File

@@ -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>