WIP PWA for Grain
0
fork

Configure Feed

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

feat: add CSS design tokens

+48
+48
src/styles/variables.css
··· 1 + :root { 2 + /* Colors - Instagram-inspired dark palette */ 3 + --color-bg-primary: #000000; 4 + --color-bg-secondary: #121212; 5 + --color-bg-elevated: #262626; 6 + --color-text-primary: #fafafa; 7 + --color-text-secondary: #a8a8a8; 8 + --color-border: #363636; 9 + --color-accent: #0095f6; 10 + --color-error: #ed4956; 11 + --color-heart: #ff3040; 12 + 13 + /* Typography */ 14 + --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 15 + --font-size-xs: 0.75rem; 16 + --font-size-sm: 0.875rem; 17 + --font-size-base: 1rem; 18 + --font-weight-normal: 400; 19 + --font-weight-semibold: 600; 20 + 21 + /* Spacing */ 22 + --space-xs: 0.25rem; 23 + --space-sm: 0.5rem; 24 + --space-md: 1rem; 25 + --space-lg: 1.5rem; 26 + --space-xl: 2rem; 27 + 28 + /* Layout */ 29 + --feed-max-width: 470px; 30 + --border-radius: 8px; 31 + --avatar-size-sm: 32px; 32 + --avatar-size-md: 44px; 33 + } 34 + 35 + /* Global resets */ 36 + *, *::before, *::after { 37 + box-sizing: border-box; 38 + margin: 0; 39 + padding: 0; 40 + } 41 + 42 + body { 43 + font-family: var(--font-family); 44 + background: var(--color-bg-primary); 45 + color: var(--color-text-primary); 46 + line-height: 1.5; 47 + -webkit-font-smoothing: antialiased; 48 + }