52 lines
2.6 KiB
HTML
52 lines
2.6 KiB
HTML
{% if page.layout == "home-infographic" and site.data.theme.featured-image %}
|
|
<style>
|
|
#home-banner {
|
|
background-image: url('{{ site.data.featured_item.src | relative_url }}');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: {{ site.data.theme.home-banner-image-position | default: 'center' }};
|
|
}
|
|
#home-title-box {
|
|
padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
|
|
padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
|
|
}
|
|
@media screen and (max-width: 576px) {
|
|
#home-title-box {
|
|
padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
|
padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
|
}
|
|
}
|
|
</style>
|
|
<div id="home-banner" class="container-fluid mb-0 p-0">
|
|
<div id="home-title-box" class="position-relative" >
|
|
<div class="p-2 text-center text-white bg-dark bg-opacity-75">
|
|
{% if site.organization-logo-nav %}
|
|
<a class="d-none d-md-block" href="{{ site.organization-link }}">
|
|
<img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home" >
|
|
</a>{% endif %}
|
|
<h1 class="display-4">{{ site.title }}</h1>
|
|
{% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
|
|
</div>
|
|
{% unless site.data.theme.featured-image contains '/' %}
|
|
<div class="position-absolute bottom-0 end-0 px-2 bg-dark bg-opacity-75">
|
|
<a class="text-white fs-6" href="{{ site.data.featured_item.link | relative_url }}" title="{{ site.data.featured_item.alt | escape }}">Featured Image</a>
|
|
</div>{% endunless %}
|
|
</div>
|
|
</div>
|
|
{%- else -%}
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div id="title" class="{% if site.organization-logo-banner %}col-md-9{% else %}col-12{% endif %}">
|
|
<h1 class="mt-2"><a class="text-dark" href="{{ '/' | relative_url }}" >{{ site.title }}</a></h1>
|
|
{% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
|
|
</div>
|
|
{% if site.organization-logo-banner %}
|
|
<div class="col-md-3 d-none d-lg-block text-end">
|
|
<a class="btn btn-outline-light" href="{{ site.organization-link }}">
|
|
<img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home" >
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{%- endif -%} |