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