decentralized and customizable links page on top of atproto
ligo.at
atproto
link-in-bio
python
uv
1:root {
2 --color-background: #fff;
3 --color-text: #333;
4 --color-text-secondary: #696969;
5}
6
7@media (prefers-color-scheme: dark) {
8 :root {
9 --color-background: #111;
10 --color-text: #fff;
11 --color-text-secondary: #aaa;
12 }
13}
14
15body {
16 background: var(--color-background);
17 color: var(--color-text);
18 font-size: 18px;
19 font-family: "Inter", system-ui, sans-serif, ui-sans-serif;
20 font-feature-settings:
21 "kern" 1,
22 "liga" 1,
23 "cv05" 1,
24 "tnum" 1;
25 font-optical-sizing: auto;
26 font-variation-settings: normal;
27 font-weight: 400;
28 margin: 1rem;
29 -moz-osx-font-smoothing: grayscale;
30 -webkit-font-smoothing: antialiased;
31}
32
33a {
34 color: inherit;
35}
36
37.wrapper {
38 margin: auto;
39 max-width: 25em;
40}
41
42.wrapper.profile {
43 font-size: 20px;
44}
45
46header {
47 margin: 2.5em 0;
48 text-align: center;
49}
50
51header h1 {
52 margin: 0;
53 font-size: 1.5em;
54 font-weight: inherit;
55}
56
57header .tagline {
58 font-style: italic;
59 display: block;
60 margin-top: 0.5em;
61}
62
63.links-container ul {
64 list-style: none;
65 padding: 0;
66}
67
68.link-item {
69 background: currentColor;
70 display: block;
71 padding: 0.5em;
72 text-align: center;
73 transition: transform 0.1s;
74 box-shadow: -3px 3px 0 rgba(from currentColor r g b / 0.6);
75}
76
77.link-item .link-item-title {
78 color: white;
79}
80
81.link-item .link-item-detail {
82 color: white;
83 display: block;
84 font-size: 0.75em;
85 opacity: 0.6;
86 transition: opacity 0.3s;
87}
88
89.link-item:hover {
90 transform: scale(1.05);
91}
92
93.link-item:hover .link-item-detail {
94 opacity: 1;
95}
96
97.links-container li + li {
98 margin-top: 0.75em;
99}
100
101footer {
102 color: var(--color-text-secondary);
103 font-size: 14px;
104 margin: 5em 0;
105 text-align: center;
106}