diff options
| author | Fuwn <[email protected]> | 2023-09-04 02:00:54 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-09-04 02:00:54 -0700 |
| commit | d55a3f01c1c96ba8c1fc7ffd713fb307d6ca7c09 (patch) | |
| tree | 94a174dd2027bd78a482a084ad6cbba82208f0e9 /src | |
| parent | feat: dark theme (diff) | |
| download | due.moe-d55a3f01c1c96ba8c1fc7ffd713fb307d6ca7c09.tar.xz due.moe-d55a3f01c1c96ba8c1fc7ffd713fb307d6ca7c09.zip | |
feat(home): response columns
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/+page.svelte | 25 |
1 files changed, 20 insertions, 5 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1e49411e..e981ea3f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -79,13 +79,28 @@ </div> <style> - .list { - width: 100%; + #list-container { + display: flex; + flex-wrap: wrap; } - @media (min-width: 960px) { - #list-container { - display: flex; + /* (1440 / 2) + (1440/8) = 720 + 180 = 900 */ + @media (max-width: 900px) { + .list { + flex: 0 0 100%; + } + } + + /* (1920 / 2) + (1920 / 4) = 960 + 480 = 1440 */ + @media (min-width: 901px) and (max-width: 1440px) { + .list { + flex: 0 0 50%; + } + } + + @media (min-width: 1441px) { + .list { + flex: 0 0 33.33%; } } </style> |