@use 'sprucecss/scss/spruce' as *;
.changelog-block {
padding-block: spacer-clamp('xl', 'xxl');
&__inner {
align-items: start;
display: grid;
gap: spacer-clamp('l', 'xl');
@include breakpoint('lg') {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
&__main {
display: flex;
flex-direction: column;
gap: spacer('l');
}
&__aside {
@include layout-stack('m');
@include breakpoint('lg') {
inset-block-start: spacer('l');
position: sticky;
}
.newsletter {
grid-template-columns: minmax(0, 1fr);
}
.newsletter__title {
font-size: font-size('h4');
}
}
&__links {
list-style: none;
padding: 0;
@include layout-stack('xs');
a {
align-items: center;
color: color('heading');
display: inline-flex;
font-weight: 600;
gap: spacer('xs');
text-decoration: none;
&:hover {
color: color('primary');
text-decoration: underline;
}
}
svg {
block-size: 1.15rem;
inline-size: 1.15rem;
}
}
}
<section class="changelog-block" aria-labelledby="changelog-block-title">
<div class="container">
<div class="changelog-block__inner">
<div class="changelog-block__main">
<header class="block-heading block-heading--start">
<p class="block-heading__eyebrow">Changelog</p>
<h2 class="block-heading__title" id="changelog-block-title">What’s new</h2>
<p class="block-heading__text">Every release, with the new features, the changes and the fixes.</p>
</header>
<ol class="l-changelog" reversed>
<li class="l-changelog__item" aria-labelledby="release-v3-0-0">
<time class="l-changelog__date" datetime="2026-10-01">Oct 1, 2026</time>
<div class="l-changelog__body">
<h2 class="l-changelog__title" id="release-v3-0-0">v3.0.0 <span class="l-changelog__latest">Latest</span></h2>
<ul class="l-changelog__list">
<li><span class="l-changelog__tag l-changelog__tag--added">Added</span> Design styles: switch the whole look with one <code>data-spruce-style</code> attribute.</li>
<li><span class="l-changelog__tag l-changelog__tag--added">Added</span> Built-in dark mode that can follow the system preference.</li>
<li><span class="l-changelog__tag l-changelog__tag--changed">Changed</span> The form controls use <code>block-size</code> instead of <code>height</code>.</li>
<li><span class="l-changelog__tag l-changelog__tag--fixed">Fixed</span> The select icon in right-to-left layouts.</li>
</ul>
<p class="l-changelog__more"><a class="l-changelog__link" href="#">Release notes for v3.0.0</a></p>
</div>
</li>
<li class="l-changelog__item" aria-labelledby="release-v2-4-0">
<time class="l-changelog__date" datetime="2026-03-12">Mar 12, 2026</time>
<div class="l-changelog__body">
<h2 class="l-changelog__title" id="release-v2-4-0">v2.4.0</h2>
<ul class="l-changelog__list">
<li><span class="l-changelog__tag l-changelog__tag--added">Added</span> The <code>layout-cluster()</code> mixin.</li>
<li><span class="l-changelog__tag l-changelog__tag--deprecated">Deprecated</span> The <code>$btn-font-family</code> variable; use the <code>$btn</code> map.</li>
</ul>
<p class="l-changelog__more"><a class="l-changelog__link" href="#">Release notes for v2.4.0</a></p>
</div>
</li>
<li class="l-changelog__item" aria-labelledby="release-v2-3-1">
<time class="l-changelog__date" datetime="2025-11-03">Nov 3, 2025</time>
<div class="l-changelog__body">
<h2 class="l-changelog__title" id="release-v2-3-1">v2.3.1</h2>
<ul class="l-changelog__list">
<li><span class="l-changelog__tag l-changelog__tag--fixed">Fixed</span> The focus ring of the outline buttons in Safari.</li>
<li><span class="l-changelog__tag l-changelog__tag--security">Security</span> Updated the build dependencies.</li>
</ul>
<p class="l-changelog__more"><a class="l-changelog__link" href="#">Release notes for v2.3.1</a></p>
</div>
</li>
</ol>
</div>
<aside class="changelog-block__aside" aria-label="Follow the updates">
<section class="newsletter" aria-labelledby="newsletter-title">
<div class="newsletter__content">
<h2 class="newsletter__title" id="newsletter-title">Stay in the loop</h2>
<p class="newsletter__text">Monthly notes about CSS, Sass and design systems. No spam, unsubscribe anytime.</p>
</div>
<form class="newsletter__form" onsubmit="return false;">
<label class="sr-only" for="newsletter-email">Email address</label>
<input class="form-control" id="newsletter-email" type="email" placeholder="you@example.com" autocomplete="email" required>
<button class="btn btn--primary" type="submit">Subscribe</button>
<label class="form-check newsletter__consent" for="newsletter-consent">
<input class="form-check__control" id="newsletter-consent" name="consent" type="checkbox" required>
<span class="form-label form-check__label">I agree to receive the newsletter and accept the <a href="#">privacy policy</a>. Unsubscribe anytime.</span>
</label>
</form>
</section>
<ul class="changelog-block__links" role="list">
<li><a href="/changelog/feed.xml">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
RSS feed
</a></li>
<li><a href="#">
<svg class="changelog-block__brand" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
Releases on GitHub
</a></li>
</ul>
</aside>
</div>
</div>
</section>
