diff options
| author | Fuwn <[email protected]> | 2026-05-19 01:29:29 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-05-19 01:29:29 +0000 |
| commit | 9cd5919bd8ca87987d9bb3f735266c2398c6ce9e (patch) | |
| tree | 623ee26d41129acfe7c9b6c5e5d3a79bbb824da3 /src/styles/_breakpoints.scss | |
| parent | style(nav): add --base0011-strong for grounded glass on nav surfaces (diff) | |
| download | due.moe-9cd5919bd8ca87987d9bb3f735266c2398c6ce9e.tar.xz due.moe-9cd5919bd8ca87987d9bb3f735266c2398c6ce9e.zip | |
style(breakpoints): consolidate 9 ad-hoc values into 5 SCSS tokens
Adds src/styles/_breakpoints.scss with five canonical tokens
(\$bp-sm 600, \$bp-md 800, \$bp-lg 1024, \$bp-xl 1280, \$bp-2xl 1600)
and migrates all 15 @media (max-width: ...) occurrences across 9 files.
Configures vite.config.ts with scss loadPaths so any file can
@use "breakpoints" without relative paths.
Conservative rounding-up where existing values were near-duplicates:
500 and 512 collapse to 600, 768 collapses to 800, 1000 collapses to
1024. Slightly more viewports get the smaller-layout treatment in
those bands, which is usually beneficial on cramped widths.
Converts 7 Svelte files from <style> to <style lang="scss"> to access
the SCSS tokens. SCSS is a CSS superset, so existing rules stay valid.
Diffstat (limited to 'src/styles/_breakpoints.scss')
| -rw-r--r-- | src/styles/_breakpoints.scss | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/src/styles/_breakpoints.scss b/src/styles/_breakpoints.scss new file mode 100644 index 00000000..ab7d33aa --- /dev/null +++ b/src/styles/_breakpoints.scss @@ -0,0 +1,13 @@ +// Canonical viewport breakpoints. Always max-width queries. +// +// $bp-sm : phones (collapses 500, 512, 600) +// $bp-md : small tablets, narrow (collapses 768, 800) +// $bp-lg : laptops (collapses 1000, 1024) +// $bp-xl : standard desktops +// $bp-2xl : wide / external monitors + +$bp-sm: 600px; +$bp-md: 800px; +$bp-lg: 1024px; +$bp-xl: 1280px; +$bp-2xl: 1600px; |