finxol.io
1body {
2 margin: 0;
3 padding: 0;
4 font-family: "Actor", sans-serif;
5 min-height: 100svh;
6 display: flex;
7 flex-direction: column;
8 align-items: center;
9 justify-content: start;
10}
11
12main {
13 margin: 0;
14 padding: 1rem;
15 display: flex;
16 flex-direction: column;
17 align-items: center;
18 justify-content: center;
19
20 h1,
21 h2,
22 h3 {
23 font-family: "Coiny", serif;
24 font-weight: bold;
25 }
26
27 & > p {
28 text-align: center;
29 }
30}
31
32.atproto-logo {
33 height: 7rem;
34
35 path {
36 fill: oklch(62.3% 0.214 259.815);
37 }
38}
39
40section.users {
41 display: flex;
42 flex-direction: column;
43 align-items: center;
44 justify-content: start;
45 gap: 1rem;
46
47 & > div {
48 display: flex;
49 flex-direction: column;
50 align-items: start;
51 justify-content: start;
52 gap: 1rem;
53
54 & > div {
55 display: flex;
56 flex-direction: row;
57 align-items: center;
58 justify-content: start;
59 gap: 1rem;
60
61 width: 100%;
62 background-color: #f5f5f5;
63 border-radius: 0.5rem;
64 padding: 1rem;
65
66 & > img {
67 width: 3rem;
68 aspect-ratio: 1/1;
69 border-radius: 50%;
70 object-fit: cover;
71 }
72
73 & > div {
74 display: flex;
75 flex-direction: column;
76 align-items: center;
77 justify-content: center;
78
79 & > .handle {
80 font-size: 1.2rem;
81 font-weight: bold;
82 text-decoration: none;
83 color: inherit;
84 }
85 }
86 }
87 }
88}
89
90/* hide by default */
91.desktop-only {
92 display: none;
93}
94
95/* When the screen is 768px or wider, show it */
96@media (min-width: 768px) {
97 .desktop-only {
98 display: initial;
99 }
100}