decentralized and customizable links page on top of atproto ligo.at
atproto link-in-bio python uv
at 1b7c0778f94de667d002f803fdb1fcc64b2efd23 106 lines 1.8 kB view raw
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}