music on atproto
plyr.fm
zzstoatzz.io
1/**
2 * responsive breakpoints
3 *
4 * CSS media queries can't use CSS variables, so we document the values here
5 * as the single source of truth. when changing breakpoints, update both this
6 * file and the corresponding @media queries in components.
7 *
8 * usage in components:
9 * @media (max-width: 768px) { ... } // mobile
10 * @media (max-width: 1100px) { ... } // header mobile (needs margin space)
11 */
12
13/** standard mobile breakpoint - used by most components */
14export const MOBILE_BREAKPOINT = 768;
15
16/** small mobile breakpoint - extra compact styles */
17export const MOBILE_SMALL_BREAKPOINT = 480;
18
19/**
20 * header mobile breakpoint - switch to mobile layout before margin elements
21 * (stats, search, logout) crowd each other.
22 */
23export const HEADER_MOBILE_BREAKPOINT = 1300;
24
25/** content max-width used across pages */
26export const CONTENT_MAX_WIDTH = 800;
27
28/** queue panel width */
29export const QUEUE_WIDTH = 360;