@webloved: How I build with Lovable 👇 Academy in bio 🔗 Full prompt goes in the Academy soon. It took hours of testing to get right. Want a site like this? Send me an email, email in bio 📩 A magazine site that feels printed. The secret is the boring details, like the dotted lines in the table of contents 📖 The trick: dot leaders. Title on the left, page number on the right, dots fill the gap at any width. 1. Each contents row is display: flex with align-items: baseline. 2. Inside: the title, an empty span with flex: 1, then the page number. 3. The empty span is the dots: radial-gradient(circle, currentColor 1px, transparent 1.5px), background-size 6px 6px, repeat-x, position bottom. 4. Give it margin 0 8px and a small translateY so the dots sit on the text line. 5. Page numbers get font-variant-numeric: oldstyle-nums tabular-nums. They line up and look like print. 6. Tiny red bullet and a 10px caps label before each title, letter-spacing 0.2em. 7. On hover the dots turn red and the number moves 4px left in 200ms. 8. Same idea for the drop cap: initial-letter: 2 on the big red first letter, with a float fallback. Save this before your next editorial build 🔥 #lovableugcpartner #lovable #webdesign #typography #vibecoding

weblove

Open In TikTok:

Region: PT

Thursday 29 October 2026 12:56:19 GMT