ligo.at
decentralized and customizable links page on top of atproto
ligo.at
atproto
link-in-bio
python
uv
nauta.one
1@import url(/static/profile/default.css);
2
3:root {
4 --color-alert: #ee0000;
5 --color-background-secondary: #eee;
6 --color-border: #bbb;
7 --color-border-secondary: #ddd;
8 --color-success: #080;
9}
10
11@media (prefers-color-scheme: dark) {
12 :root {
13 --color-background-secondary: #333;
14 --color-border: #555;
15 --color-border-secondary: #333;
16 --color-success: #af2;
17 }
18}
19
20p {
21 text-wrap: pretty;
22}
23
24.wrapper.error p {
25 text-align: center;
26}
27
28h2 {
29 font-size: 1.3em;
30 font-weight: 500;
31}
32
33.link-item.static {
34 flex-grow: 1;
35 box-shadow: none;
36}
37
38.link-item.static:hover {
39 transform: none;
40}
41
42.alert {
43 color: var(--color-alert);
44}
45
46.caption {
47 font-size: 0.8em;
48}
49
50.faded {
51 color: var(--color-text-secondary);
52}
53
54button,
55input {
56 background: var(--color-background-secondary);
57 border: 1px solid var(--color-border);
58 border-radius: 2px;
59 box-sizing: border-box;
60 color: var(--color-text);
61 font: inherit;
62 font-size: 14px;
63 padding: 0.5em;
64 width: 100%;
65}
66
67button,
68input[type="submit"] {
69 font-weight: 600;
70 cursor: pointer;
71 padding: 0.25em;
72}
73
74button.submit:last-of-type,
75input[type="submit"]:last-of-type {
76 margin-top: 1em;
77}
78
79editor-label {
80 display: block;
81}
82
83editor-label + editor-label {
84 margin-top: 0.25em;
85}
86
87editor-label .label {
88 font-size: 14px;
89 font-weight: 700;
90 text-transform: uppercase;
91}
92
93link-editor-item {
94 display: block;
95 margin-top: 1em;
96 margin-left: -0.25em;
97 margin-right: -0.25em;
98 padding: 0.25em;
99 background: var(--color-background);
100 border: 1px solid var(--color-border-secondary);
101 border-radius: 2px;
102}
103
104link-editor-header {
105 display: flex;
106 flex-direction: row;
107 gap: 0.25em;
108}
109
110link-editor-drag-handle {
111 background: var(--color-background-secondary);
112 display: flex;
113 flex-grow: 0;
114 padding: 2px;
115 line-height: 100%;
116 font-size: 1.5em;
117 align-items: center;
118 cursor: grab;
119}
120
121link-editor-drag-handle:active {
122 cursor: grabbing;
123}
124
125link-editor-buttons {
126 display: flex;
127 flex-direction: row;
128 gap: 0.25em;
129 margin-top: 0.25em;
130}
131
132still-building {
133 background-color: var(--color-background-secondary);
134 border-radius: 2px;
135 display: block;
136}
137
138still-building .title {
139 background: repeating-linear-gradient(
140 45deg,
141 #fc0,
142 #fc0 20px,
143 #333 20px,
144 #333 40px
145 );
146 border-radius: 2px 2px 0 0;
147 color: #fff;
148 display: block;
149 font-size: 1.2em;
150 font-weight: 900;
151 padding: 0.25em;
152 text-align: center;
153 text-transform: uppercase;
154 text-shadow:
155 -1px -1px 0.5px #000,
156 1px -1px 0.5px #000,
157 -1px 1px 0.5px #000,
158 1px 1px 0.5px #000;
159}
160
161still-building p {
162 margin: 0;
163 padding: 0.5em;
164
165 &:not(:first-of-type) {
166 padding-top: 0;
167 }
168}
169
170.htmx-indicator {
171 --height: 2px;
172 height: var(--height);
173 margin: 2px 0;
174 opacity: 0;
175 visibility: none;
176}
177
178.htmx-request .progress {
179 animation: progress-bar 0.5s linear;
180 animation-fill-mode: both;
181 background: var(--color-success);
182 border-radius: calc(var(--height) / 2);
183 display: block;
184 height: var(--height);
185}
186
187@keyframes progress-bar {
188 0% {
189 width: 25%;
190 }
191 100% {
192 width: 100%;
193 }
194}
195
196form[hx-post] {
197 transition: opacity 0.2s;
198}
199
200form[hx-post].htmx-request {
201 opacity: 0.6;
202}