체인지로그 피드

<div class="log" id="log">
  <div class="entry new"><span class="dot"></span><div class="body"><span class="ver">v2.4</span><span class="date">Just now</span><p>Dark mode is here.</p></div></div>
  <div class="entry"><span class="dot"></span><div class="body"><span class="ver">v2.3</span><span class="date">2 weeks ago</span><p>Faster search across large workspaces.</p></div></div>
  <div class="entry"><span class="dot"></span><div class="body"><span class="ver">v2.2</span><span class="date">5 weeks ago</span><p>Bulk export to CSV.</p></div></div>
  <div class="entry"><span class="dot"></span><div class="body"><span class="ver">v2.1</span><span class="date">2 months ago</span><p>Team roles and permissions.</p></div></div>
</div>

.log{width:min(90%,540px);position:relative;padding-left:clamp(14px,3vmin,20px)}
.log::before{content:'';position:absolute;left:clamp(4px,1vmin,6px);top:6px;bottom:6px;width:2px;background:var(--line)}
.entry{position:relative;padding-bottom:clamp(10px,2.4vmin,18px)}
.entry:last-child{padding-bottom:0}
.dot{position:absolute;left:clamp(-11px,-2.2vmin,-15px);top:3px;width:clamp(7px,1.5vmin,11px);
  height:clamp(7px,1.5vmin,11px);border-radius:50%;background:var(--line);border:2px solid var(--bg)}
.entry.new .dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 25%,transparent)}
.body{display:flex;flex-direction:column;gap:2%}
.ver{font-size:clamp(7px,1.4vmin,11px);font-weight:800;color:var(--accent)}
.date{font-size:clamp(6px,1.1vmin,9px);color:var(--muted)}
.body p{margin:0;font-size:clamp(7.5px,1.4vmin,11px)}
.entry.new{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:1}50%{opacity:.75}}