rito.blue
ATProto Social Bookmark
1$mantine-breakpoint-xs: 36em;
2$mantine-breakpoint-sm: 48em;
3$mantine-breakpoint-md: 62em;
4$mantine-breakpoint-lg: 75em;
5$mantine-breakpoint-xl: 88em;
6
7.wrapper {
8 padding-top: var(--mantine-spacing-xl);
9 padding-bottom: calc(var(--mantine-spacing-xl) * 1);
10}
11
12.title {
13 font-family: Outfit, var(--mantine-font-family);
14 font-weight: 500;
15 margin-bottom: var(--mantine-spacing-md);
16 text-align: center;
17 animation: fadeInDown 0.6s ease-out both;
18
19 @media (max-width: $mantine-breakpoint-sm) {
20 font-size: 28px;
21 text-align: left;
22 }
23}
24
25.description {
26 text-align: center;
27 animation: fadeInDown 0.6s ease-out 0.15s both;
28
29 @media (max-width: $mantine-breakpoint-sm) {
30 text-align: left;
31 }
32}
33
34// ===== Feature card animation =====
35.featureItem {
36 animation: featureAppear 0.5s ease-out both;
37}
38
39@for $i from 1 through 8 {
40 .featureItem:nth-child(#{$i}) {
41 animation-delay: #{0.2 + $i * 0.08}s;
42 }
43}
44
45@keyframes fadeInDown {
46 from {
47 opacity: 0;
48 filter: blur(4px);
49 transform: translateY(-10px);
50 }
51
52 to {
53 opacity: 1;
54 filter: blur(0);
55 transform: translateY(0);
56 }
57}
58
59@keyframes featureAppear {
60 from {
61 opacity: 0;
62 filter: blur(4px);
63 transform: translateY(16px) scale(0.98);
64 }
65
66 to {
67 opacity: 1;
68 filter: blur(0);
69 transform: translateY(0) scale(1);
70 }
71}