Fork of Chiri for Astro for my blog
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

style: refine LinkCard layout

the3ash 59106add e1a3f661

+14 -6
+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 {