margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1@keyframes shimmer {
2 0% {
3 background-position: -200% 0;
4 }
5 100% {
6 background-position: 200% 0;
7 }
8}
9
10.skeleton {
11 background: linear-gradient(
12 90deg,
13 var(--bg-tertiary) 25%,
14 var(--bg-hover) 50%,
15 var(--bg-tertiary) 75%
16 );
17 background-size: 200% 100%;
18 animation: shimmer 1.5s infinite;
19 border-radius: var(--radius-sm);
20}
21
22.skeleton-card {
23 padding: var(--spacing-md);
24 display: flex;
25 flex-direction: column;
26 gap: var(--spacing-sm);
27}
28
29.skeleton-header {
30 display: flex;
31 align-items: center;
32 gap: var(--spacing-sm);
33}
34
35.skeleton-avatar {
36 width: 32px;
37 height: 32px;
38 border-radius: var(--radius-full);
39 flex-shrink: 0;
40}
41
42.skeleton-meta {
43 display: flex;
44 flex-direction: column;
45 gap: 4px;
46}
47
48.skeleton-name {
49 width: 100px;
50 height: 12px;
51}
52
53.skeleton-handle {
54 width: 70px;
55 height: 10px;
56}
57
58.skeleton-content {
59 display: flex;
60 flex-direction: column;
61 gap: var(--spacing-sm);
62 padding-left: 40px;
63}
64
65.skeleton-source {
66 width: 140px;
67 height: 10px;
68}
69
70.skeleton-highlight {
71 width: 100%;
72 height: 48px;
73 border-radius: var(--radius-sm);
74}
75
76.skeleton-text-1 {
77 width: 85%;
78 height: 12px;
79}
80
81.skeleton-text-2 {
82 width: 55%;
83 height: 12px;
84}
85
86.skeleton-actions {
87 display: flex;
88 gap: var(--spacing-md);
89 padding-left: 40px;
90 margin-top: var(--spacing-xs);
91}
92
93.skeleton-action {
94 width: 20px;
95 height: 20px;
96 border-radius: var(--radius-sm);
97}
98
99@media (max-width: 768px) {
100 .skeleton-content,
101 .skeleton-actions {
102 padding-left: 0;
103 }
104}