diff options
| author | Li Zhineng <[email protected]> | 2025-07-15 07:48:12 +0800 |
|---|---|---|
| committer | Li Zhineng <[email protected]> | 2025-07-15 07:48:12 +0800 |
| commit | 1d0a01683b58470dc682df1f4a104f07b33338e1 (patch) | |
| tree | 4744d3b019e36eba40f2cd9221dc442b79cf6c09 | |
| parent | 5f61c89768024f13b609d2b9e195b00224f46896 (diff) | |
| download | setup-1d0a01683b58470dc682df1f4a104f07b33338e1.tar.gz setup-1d0a01683b58470dc682df1f4a104f07b33338e1.zip | |
wip: responsive ui
| -rw-r--r-- | app.css | 25 | ||||
| -rw-r--r-- | index.html | 1 |
2 files changed, 18 insertions, 8 deletions
@@ -88,6 +88,7 @@ fieldset { body { display: grid; + grid: max-content max-content 4.5rem / auto; justify-content: center; font-family: "Inter", sans-serif; color: var(--color-white); @@ -95,25 +96,19 @@ body { min-height: 100vh; } -@media (min-width: 768px) { - body { - grid: max-content max-content 4.5rem / 40rem; - } -} - .page__header { display: flex; flex-direction: row; align-items: center; justify-content: center; - margin-block-start: 4.5rem; + margin-block-start: 2rem; } .container { position: relative; margin-block-start: 3rem; grid-row: 2; - padding: 3rem 4rem 4rem; + padding: 2rem 1.5rem 3rem; background: linear-gradient(324deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.06)); border-radius: 0.375rem; } @@ -372,3 +367,17 @@ body { .retry-message--shown { display: block; } + +@media (min-width: 768px) { + body { + grid: max-content max-content 4.5rem / 40rem; + } + + .page__header { + margin-block-start: 4.5rem; + } + + .container { + padding: 3rem 4rem 4rem; + } +} @@ -2,6 +2,7 @@ <html> <head> <title>Setup AIRMX device</title> + <meta name="viewport" content="width=device-width, initial-scale=1" /> <script defer src="main.mjs"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |