an app to share curated trails
sidetrail.app
1.FloatingAvatar {
2 width: 28px;
3 height: 28px;
4 border-radius: 50%;
5 object-fit: cover;
6 border: 2px solid rgba(255, 255, 255, 0.95);
7 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
8 opacity: 0.8;
9 cursor: inherit;
10 animation: FloatingAvatar-floatNatural 6s ease-in-out infinite;
11}
12
13.FloatingAvatar-clickable {
14 cursor: pointer;
15}
16
17.FloatingAvatar-contained {
18 width: 20px;
19 height: 20px;
20 border: 1.5px solid rgba(255, 255, 255, 0.9);
21 opacity: 0.7;
22 animation: FloatingAvatar-floatContained 6s ease-in-out infinite;
23}
24
25.FloatingAvatar-opaque {
26 opacity: 1;
27}
28
29@keyframes FloatingAvatar-floatNatural {
30 0%,
31 100% {
32 transform: translate(0, 0) rotate(0deg);
33 }
34 25% {
35 transform: translate(3px, -5px) rotate(2deg);
36 }
37 50% {
38 transform: translate(-2px, -10px) rotate(-1deg);
39 }
40 75% {
41 transform: translate(4px, -7px) rotate(1deg);
42 }
43}
44
45@keyframes FloatingAvatar-floatContained {
46 0%,
47 100% {
48 transform: translate(0, 0);
49 }
50 25% {
51 transform: translate(1px, -2px);
52 }
53 50% {
54 transform: translate(-1px, -3px);
55 }
56 75% {
57 transform: translate(1px, -2px);
58 }
59}
60
61/* Mobile: smaller avatars, subtler floating animation */
62@media (max-width: 768px) {
63 .FloatingAvatar {
64 width: 22px;
65 height: 22px;
66 animation: FloatingAvatar-floatSubtle 8s ease-in-out infinite;
67 }
68
69 @keyframes FloatingAvatar-floatSubtle {
70 0%,
71 100% {
72 transform: translate(0, 0);
73 }
74 50% {
75 transform: translate(0, -3px);
76 }
77 }
78}