diff --git a/src/public/upload.css b/src/public/upload.css index b49764e..81c6213 100644 --- a/src/public/upload.css +++ b/src/public/upload.css @@ -31,10 +31,10 @@ body { } .wedding-card { - width: min(100%, 720px); + width: min(100%, 430px); min-height: 100vh; margin: 0 auto; - padding: 0 clamp(12px, 3.6vw, 34px) 38px; + padding: 0 0 38px; background: radial-gradient(ellipse at 50% 30%, rgba(218, 218, 212, 0.28), transparent 58%), radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.7), transparent 48%), @@ -44,9 +44,9 @@ body { .poster { position: relative; - width: min(100%, 900px); + width: 100%; margin: 0 auto; - aspect-ratio: 3 / 2; + aspect-ratio: 390 / 545; overflow: hidden; padding: 0; } @@ -74,7 +74,7 @@ body { position: absolute; inset: 0 50% 0 auto; z-index: 3; - width: 100%; + width: 212%; height: 100%; max-width: none; object-fit: cover; @@ -87,10 +87,10 @@ body { .poster__portrait { position: absolute; z-index: 2; - left: 34%; - right: 34%; + left: 18%; + right: 18%; top: 13%; - bottom: 16.5%; + bottom: 24.8%; overflow: hidden; background: #ffffff; border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px; @@ -99,8 +99,8 @@ body { .poster__couple { position: absolute; left: 51.5%; - top: 13%; - width: 148%; + top: 14%; + width: 145%; height: auto; max-width: none; transform: translateX(-50%); @@ -123,7 +123,7 @@ body { h1 { margin: 0; color: #565656; - font-size: clamp(32px, 7.5vw, 50px); + font-size: clamp(32px, 7.5vw, 43px); line-height: 1.1; font-weight: 400; letter-spacing: 0.12em; @@ -140,13 +140,13 @@ h1 { .poster__date { margin-top: clamp(12px, 2.8vw, 20px); - font-size: clamp(16px, 3.3vw, 24px); + font-size: clamp(15px, 3.3vw, 19px); font-weight: 700; } .poster__subtitle { margin-top: clamp(14px, 3vw, 22px); - font-size: clamp(15px, 3.3vw, 24px); + font-size: clamp(14px, 3.3vw, 19px); font-weight: 700; }