Something went wrong. Try again.
🐦⬛ An observer for FOLK atproto records. folk.observer
atproto folk
Something went wrong. Try again.
2.0 kB · 98 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899.footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: auto; padding: 1.25rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint);}
/* Flex blockifies these, so transform applies without an explicit display. */.link { transition: transform 150ms ease, color 150ms ease, border-bottom-color 150ms ease;}
.link:hover { transform: translateY(-2px);}
.point { width: 1.25rem; height: 1.25rem; rotate: 115deg;}
@media (prefers-reduced-motion: reduce) { .link { transition: none; }
.link:hover { transform: none; }}
/* * Anchored to the bottom of the document (body is the containing block), so it * scrolls away with the page rather than riding the viewport. * * crow.png is 1080x1920 with its top 531px transparent (alpha box starts at * y=531), so the bird begins 27.66% down. Showing 26% of the image height: * * height = w * (1920/1080) * 0.26 = w * 0.4622 * offset% = 0.4917w / (1.7778w - h) = 37.38% (w cancels out) * * Cropping rather than letting the rest hang below bottom:0 matters - an * overhang would enlarge the document's scrollable area by ~400px of nothing. */.crow { --crow-w: clamp(190px, 24vw, 380px); position: absolute; left: 50%; bottom: 0; width: var(--crow-w); height: calc(var(--crow-w) * 0.4622); object-fit: cover; object-position: 50% 37.38%; translate: -50% 0; opacity: 0.45; user-select: none; z-index: 1;}
.crow:hover { animation: shake-crow 0.1s infinite;}
@keyframes shake-crow { 0% { transform: translateX(0); } 25% { transform: translateX(-1.5%); } 50% { transform: translateX(1.5%); } 75% { transform: translateX(-1.5%); } 100% { transform: translateX(0); }}
@media (prefers-reduced-motion: reduce) { .crow:hover { animation: none; }}