forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
style: refine LinkCard layout
+14
-6
+14
-6
src/components/ui/LinkCard.astro
+14
-6
src/components/ui/LinkCard.astro
···
200
200
201
201
<style is:inline>
202
202
.prose .link-card {
203
-
display: block;
203
+
display: flex;
204
+
flex-direction: column;
204
205
border: 0.5px solid var(--border);
205
206
border-radius: 8px;
206
207
overflow: hidden;
···
219
220
220
221
.prose .link-card-content {
221
222
padding: 0.75rem 1.25rem 0.75rem 1.25rem;
223
+
order: 2;
224
+
display: flex;
225
+
flex-direction: column;
222
226
}
223
227
224
228
.prose .link-card-image-outer {
225
-
padding: 0 0.5rem 0.5rem 0.5rem;
229
+
padding: 0.5rem 0.5rem 0 0.5rem;
230
+
order: 1;
226
231
}
227
232
228
233
/* Set container size/padding when image hidden */
229
234
.prose .link-card-image-outer:has(.link-card-image[style*='display: none']) {
230
-
padding: 0 0.25rem 0.25rem 0.25rem;
235
+
padding: 0.25rem 0.25rem 0 0.25rem;
231
236
}
232
237
233
238
.prose .link-card-image {
···
270
275
font-size: var(--font-size-m);
271
276
font-weight: var(--font-weight-bold);
272
277
color: var(--text-primary);
273
-
margin: 0.375rem 0 0 0;
278
+
margin: 0;
274
279
white-space: nowrap;
275
280
overflow: hidden;
276
281
text-overflow: ellipsis;
277
282
padding-right: 1rem;
283
+
order: 1;
278
284
}
279
285
280
286
.prose .link-card .link-card-description {
···
289
295
word-wrap: break-word !important;
290
296
/* Fallback for older browsers */
291
297
max-height: calc(1.4em * 2) !important;
298
+
order: 2;
292
299
}
293
300
294
301
/* Hide description when display is set to none */
···
308
315
}
309
316
310
317
.prose .link-card-url {
311
-
color: var(--text-secondary);
318
+
color: var(--text-tertiary);
312
319
letter-spacing: 0.015em;
313
-
margin: 0;
320
+
margin: 0.25rem 0;
314
321
display: flex;
315
322
align-items: center;
316
323
gap: 0.325rem;
324
+
order: 3;
317
325
}
318
326
319
327
.prose .link-card-url svg {