mirror of
https://github.com/halo-dev/theme-earth.git
synced 2025-10-14 14:30:50 +00:00
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:
@@ -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;
|
||||
}
|
2
templates/assets/dist/style.css
vendored
2
templates/assets/dist/style.css
vendored
File diff suppressed because one or more lines are too long
@@ -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)}">
|
||||
|
@@ -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>
|
||||
|
@@ -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}">
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user