<div class="announcement announcement--democracy">
<a class="announcement__content" href="#"><strong>Just Launched</strong><span> | </span>How to Fix Democracy Season 2</a>
</div>
<div class="announcement{% if theme %} announcement--{{theme}}{% endif %}">
<a class="announcement__content" href="{{url}}"><strong>{% if title %}{{title}}{% else %}Just Released{% endif %}</strong><span> | </span>{{ description }}</a>
</div>
{
"title": "Just Launched",
"description": "How to Fix Democracy Season 2",
"url": "#",
"theme": "democracy"
}
// ===============================================
// Announcement Styles
// ===============================================
// Sets the local variable for the theme
.announcement { --announcement-hsl: var(--navy-hsl); }
// Applies local variable to background
.announcement { background-color: hsla(var(--announcement-hsl), .1); }
// Applies local variable to text color
.announcement__content { color: hsla(var(--announcement-hsl), 1); }
.announcement__content {
display: block;
padding-top: 8px;
padding-bottom: 8px;
@include wrapper;
}
// Sets a line break on small screens
.announcement__content > strong { @include breakpoint($small-only) { display: block; } }
// Hides the pipe character on small screens
.announcement__content > span { @include breakpoint($small-only) { display: none; } }
// ===============================================
// Announcement Typographic Styles
// ===============================================
.announcement__content {
text-decoration: none;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
@include wrapper;
@include breakpoint($large) { text-align: left; }
}
.announcement__content > strong { text-transform: uppercase; }
// ===============================================
// Announcement Backpanel
// ===============================================
// This creates a white pane behind the announcement, so the colors don't mix with the hero image
@include breakpoint($touch) {
.announcement { position: relative; }
.announcement:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color: white;
}
}
// ===============================================
// Announcement Theme Variables
// ===============================================
.announcement--democracy { --announcement-hsl: var(--green-hsl); }
.announcement--future-leadership { --announcement-hsl: var(--red-hsl); }
.announcement--politics-society { --announcement-hsl: var(--yellow-hsl); }
.announcement--digital-world { --announcement-hsl: var(--purple-hsl); }
There are no notes for this item.