diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css index d779ae6..295651d 100644 --- a/samples/calc-02/index.css +++ b/samples/calc-02/index.css @@ -46,14 +46,14 @@ body { min-height: 100vh; display: grid; place-items: center; - padding: clamp(12px, 2vw, 28px); + padding: 0; } .calculator { - width: min(100vw - 24px, 1120px); - height: min(100vh - 24px, 900px); + width: 100%; + height: 100%; display: grid; - padding: clamp(12px, 1.8vw, 18px); + padding: 8px; border-radius: 8px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--edge); @@ -96,8 +96,8 @@ body { .display-panel { position: relative; width: 100%; - padding: clamp(12px, 1.5vw, 16px); - padding-bottom: clamp(4px, 0.6vw, 8px); + padding: 16px; + padding-bottom: 8px; background: linear-gradient(180deg, var(--display), var(--display2)); color: var(--displayText); font-family: "Courier New", monospace; @@ -416,9 +416,9 @@ button:active { @media (orientation: portrait), (max-width: 860px) { .calculator { - width: min(100vw - 16px, 760px); + width: 100%; height: auto; - min-height: calc(100vh - 16px); + min-height: 100%; grid-template-columns: 1fr; grid-template-rows: minmax(160px, auto) auto auto auto; row-gap: 6px; @@ -452,19 +452,19 @@ button:active { @media (max-width: 520px) { .app-shell { - padding: 8px; + padding: 0; } .calculator { width: 100%; - min-height: calc(100vh - 16px); + min-height: 100%; border-radius: 8px; - padding: 10px; + padding: 8px; gap: 12px; } .display-panel { - padding: 10px; + padding: 8px; padding-bottom: 8px; } @@ -474,19 +474,19 @@ button:active { } .stack-copy-button { - padding: 5px 7px; - min-width: 28px; + padding: 4px; + min-width: 24px; } button { border-radius: 8px; - padding: 8px 6px; + padding: 10px 8px; font-size: 13px; line-height: 1; } .display-buttons-panel { - gap: 6px; + gap: 8px; } }