diff --git a/sass/_utils.scss b/sass/_utils.scss index 3162dfa9c06cfe3dcf470d54bd53c8bc1968ce8f..96bf1c2cd1b3c2643c2aacdf308d3bf9c201ff8d 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -46,6 +46,15 @@ figure.image>figcaption { .box { color: black; } + + } + .container.is-transparent { + bottom: 0 !important; + opacity: 1; + .box { + background: none; + box-shadow: none; + } } } diff --git a/templates/shortcodes/hero_section.html b/templates/shortcodes/hero_section.html index e1543fd70b88195d1e57539fcfae963ba2ac6efa..e2d61c529abc40edd1dfe40e08f98e75307d9c8c 100644 --- a/templates/shortcodes/hero_section.html +++ b/templates/shortcodes/hero_section.html @@ -1,10 +1,10 @@ <section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}"> {% if background_img %} {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%} - <img class="hero-background" src="{{ image.url }}" alt=""> + <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" alt=""> {% endif -%} <div class="hero-body pl-0 pr-0"> - <div class="container has-text-centered"> + <div class="container has-text-centered {% if background_transparent %}is-transparent{% endif %}"> <div class="box is-radiusless"> <h1 class="title is-1 mb-5">{{ title | default(value=page.title) | safe }}</h1> {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}