<div class="branding">
<div class="site-title">
<a href="/" title="Home" rel="home">Site Name</a>
</div>
<div class="site-slogan">Site Slogan</div>
</div>
<div class="branding">
{% block content %}
{% if site_logo %}
<a href="/" title="{{ 'Home'|t }}" rel="home" class="site-logo">
<img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
{% if site_name %}
<div class="site-title">
<a href="/" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
</div>
{% endif %}
{% if site_slogan %}
<div class="site-slogan">{{ site_slogan }}</div>
{% endif %}
{% endblock %}
</div>
{
"site_name": "Site Name",
"site_slogan": "Site Slogan"
}
.branding {
background-color: $lehigh_brown;
}
.site-title {
color: $white;
font-size: 1.25rem;
line-height: 1.2;
margin: 0 0 $space_one_half 0;
@include media-breakpoint-down(xs) {
font-size: 1rem;
margin: 0;
}
a {
color: $white;
text-decoration: none;
font-weight: normal;
border-bottom: 0;
&:hover,
&:focus {
text-decoration: underline;
}
}
}
.site-slogan {
color: $gold;
font-size: 1rem;
font-style: italic;
@include media-breakpoint-down(xs) {
font-size: .875rem;
}
}
Display the branding bar for the header.