@use 'sprucecss/scss/spruce' as *;

.l-changelog {
  @include layout-stack('l');

  &__item {
    --gtc: minmax(0, 1fr);
    align-items: flex-start;
    display: grid;
    gap: spacer('m') spacer('l');
    grid-template-columns: var(--gtc);

    @include breakpoint('md') {
      --gtc: minmax(0, 9rem) minmax(0, 1fr);
    }
  }

  &__title {
    margin-block: 0;
  }

  &__date {
    background-color: color('primary-background', 'btn');
    border-radius: config('border-radius-sm', $display);
    color: color('primary-foreground', 'btn');
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 700;
    justify-self: start;
    padding: spacer('xxs') spacer('s');
  }
}

<div class="l-changelog">
    <div class="l-changelog__item">
        <time datetime="2023-05-24T00:00:00.000Z" class="l-changelog__date">May 24, 2023</time>
        <div class="l-changelog__body post-content">
            <h2 class="l-changelog__title">v1.1.0</h2>
            <ul>
                <li>
                    <strong>This is a test changelog record for demonstration.</strong>
                </li>
                <li>
                    <strong>Improvement:</strong> add <code>$btn-font-family</code> to control the button's font family.
                </li>
                <li>
                    <strong>Improvement:</strong> add <code>$heading-font-weight</code> to control the heading's font-weight.
                </li>
                <li>
                    <strong>Improvement:</strong> rename some keys in the <code>$colors</code> map (<code>mark-color</code> : <code>mark-foreground</code>, <code>code-color</code> : <code>code-foreground</code>).
                </li>
                <li>
                    <strong>Improvement:</strong> reorganize the recurrent colors into variables.
                </li>
                <li>
                    <strong>Fix:</strong> modify <code>btn-variant()</code> mixin: add hover foreground color.
                </li>
                <li>
                    Global switch to <code>color()</code> function's fallback value under the <a href="https://sprucecss.com/docs/sass/variables#settings"><code>$settings</code></a> map.
                </li>
                <li>
                    Modify the <a href="https://sprucecss.com/docs/sass/mixins#scrollbar"><code>scrollbar()</code></a> mixin to accept hover thumb background-color value.
                </li>
                <li>
                    Make <code>$breakpoints</code> overwritable by key.
                </li>
                <li>
                    Modify <code>font-size()</code> and <code>responsive-font-size()</code> function to accept optimal size value. The optimal value will fallback to a global settnigs under the <code>$settings</code> map.
                </li>
            </ul>
        </div>
    </div>
    <div class="l-changelog__item">
        <time datetime="2023-05-23T00:00:00.000Z" class="l-changelog__date">May 23, 2023</time>
        <div class="l-changelog__body post-content">
            <h2 class="l-changelog__title">v1.0.0</h2>
            <ul>
                <li>
                    Initial release
                </li>
            </ul>
        </div>
    </div>
</div>