decentralized and customizable links page on top of atproto
ligo.at
atproto
link-in-bio
python
uv
separate editor.css
+50
-50
+32
src/static/editor.css
+32
src/static/editor.css
···
1
+
link-editor-item {
2
+
display: block;
3
+
margin-top: 1em;
4
+
margin-left: -0.25em;
5
+
margin-right: -0.25em;
6
+
padding: 0.25em;
7
+
border: 1px solid var(--color-border-secondary);
8
+
border-radius: 2px;
9
+
}
10
+
11
+
link-editor-header {
12
+
display: flex;
13
+
flex-direction: row;
14
+
gap: 0.25em;
15
+
}
16
+
17
+
link-editor-drag-handle {
18
+
background: var(--color-background-secondary);
19
+
display: flex;
20
+
flex-grow: 0;
21
+
padding: 2px;
22
+
line-height: 100%;
23
+
font-size: 1.5em;
24
+
align-items: center;
25
+
}
26
+
27
+
link-editor-buttons {
28
+
display: flex;
29
+
flex-direction: row;
30
+
gap: 0.25em;
31
+
margin-top: 0.25em;
32
+
}
+9
-42
src/static/style.css
+9
-42
src/static/style.css
···
80
80
padding: 0;
81
81
}
82
82
83
-
link-item {
83
+
.link-item {
84
84
background: currentColor;
85
85
display: block;
86
86
flex-grow: 1;
87
-
transition: transform 0.1s;
87
+
padding: 0.5em;
88
88
text-align: center;
89
-
padding: 0.5em;
89
+
transition: transform 0.1s;
90
90
}
91
91
92
-
link-item:not(.static) {
92
+
.link-item:not(.static) {
93
93
box-shadow: -3px 3px 0 rgba(from currentColor r g b / 0.6);
94
94
}
95
95
96
-
link-item-title {
96
+
.link-item-title {
97
97
color: white;
98
98
}
99
99
100
-
link-item link-item-detail {
100
+
.link-item .link-item-detail {
101
101
color: white;
102
102
display: block;
103
103
font-size: 0.75em;
···
105
105
transition: opacity 0.3s;
106
106
}
107
107
108
-
link-item:not(.static):hover {
108
+
.link-item:not(.static):hover {
109
109
transform: scale(1.05);
110
110
111
-
& link-item-detail {
111
+
& .link-item-detail {
112
112
opacity: 1;
113
113
}
114
114
}
115
115
116
-
li:has(link-item) + li:has(link-item) {
116
+
li:has(.link-item) + li:has(.link-item) {
117
117
margin-top: 1rem;
118
118
}
119
119
···
178
178
margin-top: 5em;
179
179
text-align: center;
180
180
}
181
-
182
-
link-editor-item {
183
-
display: block;
184
-
margin-top: 1em;
185
-
margin-left: -0.25em;
186
-
margin-right: -0.25em;
187
-
padding: 0.25em;
188
-
border: 1px solid var(--color-border-secondary);
189
-
border-radius: 2px;
190
-
}
191
-
192
-
link-editor-header {
193
-
display: flex;
194
-
flex-direction: row;
195
-
gap: 0.25em;
196
-
}
197
-
198
-
link-editor-drag-handle {
199
-
background: var(--color-background-secondary);
200
-
display: flex;
201
-
flex-grow: 0;
202
-
padding: 2px;
203
-
line-height: 100%;
204
-
font-size: 1.5em;
205
-
align-items: center;
206
-
}
207
-
208
-
link-editor-buttons {
209
-
display: flex;
210
-
flex-direction: row;
211
-
gap: 0.25em;
212
-
margin-top: 0.25em;
213
-
}
+5
-4
src/templates/editor.html
+5
-4
src/templates/editor.html
···
6
6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
7
7
<link rel="stylesheet" href="{{ url_for('static', filename='inter.css') }}" />
8
8
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
9
+
<link rel="stylesheet" href="{{ url_for('static', filename='editor.css') }}" />
9
10
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16.png') }}" />
10
11
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32.png') }}" />
11
12
<link rel="icon" type="image/png" sizes="48x48" href="{{ url_for('static', filename='favicon-48.png') }}" />
···
62
63
<template x-for="(link, index) in links">
63
64
<link-editor-item x-data="{ editing: !link.url }" x-sort:item="link.url">
64
65
<link-editor-header>
65
-
<link-item class="static" :style="'color: ' + link.background">
66
-
<link-item-title x-text="link.title"></link-item-title>
67
-
<link-item-detail x-show="link.detail" x-text="link.detail"></link-item-detail>
68
-
</link-item>
66
+
<div class="static link-item" :style="'color: ' + link.background">
67
+
<span class="link-item-title" x-text="link.title"></span>
68
+
<span class="link-item-detail" x-show="link.detail" x-text="link.detail"></span>
69
+
</div>
69
70
<link-editor-drag-handle x-sort:handle>⠿</link-editor-drag-handle>
70
71
</link-editor-header>
71
72
<div x-show="!editing">
+4
-4
src/templates/profile.html
+4
-4
src/templates/profile.html
···
23
23
{% for link in links %}
24
24
<li style="color: {{ link.background }}">
25
25
<a href="{{ link.url }}">
26
-
<link-item>
27
-
<link-item-title>{{ link.title }}</link-item-title>
26
+
<div class="link-item">
27
+
<span class="link-item-title">{{ link.title }}</span>
28
28
{% if link.detail %}
29
-
<link-item-detail>{{ link.detail }}</link-item-detail>
29
+
<span class="link-item-detail">{{ link.detail }}</span>
30
30
{% endif %}
31
-
</link-item>
31
+
</div><!-- .link-item -->
32
32
</a>
33
33
</li>
34
34
{% endfor %}