There are no notes for this item.
<p>Modifiers are in the <code>$tile-accent-colors</code> map in <code>_main-ldn.scss</code>, currently:</p>
<ul class="list--inline">
<li><code>bg-white</code></li>
<li><code>bg-blue-ldn</code></li>
<li><code>bg-blue-deep-ldn</code></li>
<li><code>bg-magenta-ldn</code></li>
<li><code>bg-purple-deep-ldn</code></li>
<li><code>bg-tef-gold</code></li>
</ul>
<div class="box box--bg-slate">
<div class="box__content">
<div class="title title--has-tail">
<h1 class="title__highlight">
This is an H1 with a tail
</h1>
</div>
<div class="title">
<h2 class="title__highlight h3">
This is an H2 styled as an H3
</h2>
</div>
<div class="title title--bg-white title--has-tail">
<p class="title__highlight">
This is a paragraph on white with a tail
</p>
</div>
<div class="title title--bg-purple-deep-ldn">
<h2 class="title__highlight">
H2 on purple-deep-ldn
</h2>
</div>
<div class="title title--bg-blue-ldn">
<h4 class="title__highlight">
This is an H4 on blue-ldn
</h4>
</div>
<div class="title title--bg-magenta-ldn">
<p class="title__highlight">
This is a paragraph on magenta with a tail
</p>
</div>
</div>
</div>
<div class="box box--bg-offwhite">
<div class="box__content">
<div class="title title--has-tail">
<h1 class="title__highlight">
This is an H1 with a tail
</h1>
</div>
<div class="title title--has-tail">
<h2 class="title__highlight">
This is an H2 with a tail
</h2>
</div>
<div class="title title--has-tail">
<h3 class="title__highlight">
This is an H3 with a tail
</h3>
</div>
<div class="title title--has-tail">
<h4 class="title__highlight">
This is an H4 with a tail
</h4>
</div>
<div class="title title--has-tail">
<h5 class="title__highlight">
This is an H5 with a tail
</h5>
</div>
<div class="title title--has-tail">
<h6 class="title__highlight">
This is an H6 with a tail
</h6>
</div>
<div class="title title--bg-white title--has-tail">
<p class="title__highlight">
This is a paragraph on white with a tail
</p>
</div>
</div>
</div>
<p>Modifiers are in the <code>$tile-accent-colors</code> map in <code>_main-ldn.scss</code>, currently:</p>
<ul class="list--inline">
<li><code>bg-white</code></li>
<li><code>bg-blue-ldn</code></li>
<li><code>bg-blue-deep-ldn</code></li>
<li><code>bg-magenta-ldn</code></li>
<li><code>bg-purple-deep-ldn</code></li>
<li><code>bg-tef-gold</code></li>
</ul>
<div class="box box--bg-slate">
<div class="box__content">
{% include '@title' with {
text: 'This is an H1 with a tail',
tail: true,
textElement: 'h1'
} %}
{% include '@title' with {
text: 'This is an H2 styled as an H3',
textElement: 'h2',
textElementStyle: 'h3'
} %}
{% include '@title' with {
text: 'This is a paragraph on white with a tail',
tail: true,
background: 'white',
textElement: 'p'
} %}
{% include '@title' with {
text: 'H2 on purple-deep-ldn',
background: 'purple-deep-ldn',
textElement: 'h2'
} %}
{% include '@title' with {
text: 'This is an H4 on blue-ldn',
background: 'blue-ldn',
textElement: 'h4'
} %}
{% include '@title' with {
text: 'This is a paragraph on magenta with a tail',
background: 'magenta-ldn',
textElement: 'p'
} %}
</div>
</div>
<div class="box box--bg-offwhite">
<div class="box__content">
{% include '@title' with {
text: 'This is an H1 with a tail',
modifiers: ['has-tail'],
textElement: 'h1'
} %}
{% include '@title' with {
text: 'This is an H2 with a tail',
modifiers: ['has-tail'],
textElement: 'h2'
} %}
{% include '@title' with {
text: 'This is an H3 with a tail',
modifiers: ['has-tail'],
textElement: 'h3'
} %}
{% include '@title' with {
text: 'This is an H4 with a tail',
modifiers: ['has-tail'],
textElement: 'h4'
} %}
{% include '@title' with {
text: 'This is an H5 with a tail',
modifiers: ['has-tail'],
textElement: 'h5'
} %}
{% include '@title' with {
text: 'This is an H6 with a tail',
modifiers: ['has-tail'],
textElement: 'h6'
} %}
{% include '@title' with {
text: 'This is a paragraph on white with a tail',
modifiers: ['bg-white', 'has-tail'],
textElement: 'p'
} %}
</div>
</div>
.title {
// $title-bg-colors: see __vars/colours
position: relative;
--background: #{$primary};
--color: white;
max-width: 42em; // @TODO: why? what does this relate to? make a variable
margin-bottom: $spacing-lg;
margin-right: $spacing-md;
+ .title {
margin-top: -$spacing-md;
}
}
.slab, .mini-template-grid {
.title {
margin-top: 0;
}
}
.title__highlight {
position: relative;
display: inline;
left: $spacing-xs;
padding: 0.25rem;
line-height: 1.4;
background: $primary;
background: var(--background, #{$primary});
color: white;
color: var(--color);
box-shadow: -$spacing-xs 0 0 0 #{$primary}, $spacing-xs 0 0 0 #{$primary};
box-shadow: -$spacing-xs 0 0 0 var(--background, #{$primary}), $spacing-xs 0 0 0 var(--background, #{$primary});
box-decoration-break: clone;
//border-top: 0.25rem solid transparent;
//border-bottom: 0.25rem solid transparent;
a {
color: white;
color: var(--color);
}
}
.title--has-tail {
margin-top: $spacing-3xl;
.title__highlight { // @TODO: Consider refactoring onto parent to reduce specificity further
&:before {
position: absolute;
content: '';
margin-top: 2px;
top: 0;
left: -0.5rem;
display: block;
width: 1000px;
height: 2px;
transform: rotate(225deg);
transform-origin: top left;
background: $primary;
background: var(--background, #{$primary});
transition: transform 500ms;
}
}
// We could use an animation if we wanted this to only run once...
//
//@keyframes title__drawIn {
// from { transform: translate(-50vw, -50vw) rotate(225deg); }
// to { transform: translate(0, 0) rotate(225deg); }
//}
&.js-waypoint {
.title__highlight {
&:before {
transform: translate(-50vw, -50vw) rotate(225deg);
}
}
}
&.is-waypoint-reached {
.title__highlight {
&:before {
transform: rotate(225deg);
}
}
}
@at-root .no-js & {
.title__highlight {
&:before {
transform: rotate(225deg);
}
}
}
}
@each $name, $value in $title-bg-colors {
.title--bg-#{$name} {
--background: #{$value};
@if ($value == 'white') {
// we should probably be using choose-contrast-color($value) in the if here,
// but someone wanted $gold--tef text to be white ¯\_(ツ)_/¯
--color: black;
}
}
}