diff --git a/src/components/ViewCounter.astro b/src/components/ViewCounter.astro index c79c72b..a233ab5 100644 --- a/src/components/ViewCounter.astro +++ b/src/components/ViewCounter.astro @@ -28,22 +28,79 @@ padding: 0.25rem; font-size: 1.25rem; span { - display: inline-block; + display: inline-flex; + position: relative; background: black; color: white; padding: 0.5ch; font-family: monospace; + min-width: 1.5rem; + min-height: 2rem; + overflow: hidden; + &::before { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + content: "?"; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + &::after { + content: attr(data-number); + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: -100%; + left: 0; + width: 100%; + height: 100%; + } + &[data-number] { + &::before { + animation-delay: inherit; + animation-duration: 0.2s; + animation-name: spin-before; + animation-fill-mode: forwards; + } + &::after { + animation-delay: inherit; + animation-duration: 0.2s; + animation-name: spin-after; + animation-fill-mode: forwards; + } + } } } } - @media (max-width: 800px) { + @container(max-width: 175px) { .view-counter { margin: 0 auto; } } + @keyframes spin-before { + 0% { + top: 0; + } + 100% { + top: 100%; + } + } + @keyframes spin-after { + 0% { + top: -100%; + } + 100% { + top: 0; + } + } +