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

12
sass/_article.scss
View File

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

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) -%} {%- set date_locale = macros_translate::translate(key="date_locale", default="en_US", language_strings=language_strings) -%}
<article> <article>
{%- if page.extra.banner -%} {%- 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 -%} {%- endif -%}
<h1>{{ page.title }}</h1> <h1 {% if page.extra.banner %}class="banner-margin"{%- endif -%}>{{ page.title }}</h1>
{%- if page.date -%} {%- if page.date -%}
<small> <small>