hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify banner and improve readability when used

Browse Source
This commit is contained in:
daudix
2024-07-14 08:17:36 +03:00
parent 35733fe153
commit 792a4a14ea
2 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
sass/_article.scss
View File

@ -1,5 +1,5 @@
#banner {
$mask: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
$mask: linear-gradient(black, transparent);
-webkit-mask-image: $mask;
position: absolute;
top: 0;
@ -9,10 +9,8 @@
transition: none;
margin: 0;
user-select: none;
}
&.bright {
$mask: linear-gradient(rgba(0, 0, 0, 0.3), transparent);
-webkit-mask-image: $mask;
mask-image: $mask;
}
.banner-margin {
margin-top: 35vw;
}

4
templates/article.html
View File

@ -5,10 +5,10 @@
{%- set date_locale = macros_translate::translate(key="date_locale", default="en_US", language_strings=language_strings) -%}
<article>
{%- if page.extra.banner -%}
<img id="banner" class="full-bleed{% if page.extra.banner_bright %} bright{% endif %}" src="{{ current_url | safe }}{{ page.extra.banner }}" />
<img id="banner" class="full-bleed" src="{{ current_url | safe }}{{ page.extra.banner }}" />
{%- endif -%}
<h1>{{ page.title }}</h1>
<h1 {% if page.extra.banner %}class="banner-margin"{%- endif -%}>{{ page.title }}</h1>
{%- if page.date -%}
<small>