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.header {
8 height: 60px;
9 padding-left: var(--mantine-spacing-md);
10 padding-right: var(--mantine-spacing-md);
11
12}
13
14
15.title {
16 display: flex;
17 align-items: center;
18 text-decoration: none;
19 color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
20 font-size: var(--mantine-font-size-md);
21 font-weight: 500;
22
23 @media (max-width: $mantine-breakpoint-sm) {
24 height: 42px;
25 width: 100%;
26 }
27
28 @mixin hover {
29 background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
30 }
31}
32
33.link {
34 display: flex;
35 align-items: center;
36 padding-left: 0.5;
37 padding-right: 0.5;
38 text-decoration: none;
39 color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
40 font-weight: 500;
41 font-size: var(--mantine-font-size-sm);
42
43 @media (max-width: $mantine-breakpoint-sm) {
44 height: 42px;
45 width: 100%;
46 }
47
48 @mixin hover {
49 background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
50 }
51}
52
53.center {
54 position: absolute;
55 height: auto !important;
56 left: 50%;
57 transform: translateX(-50%);
58 display: flex;
59 gap: var(--mantine-spacing-md);
60}