shkim/photo-req
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use mobile-style poster on desktop

Browse Source
This commit is contained in:
DESKTOP-KSVGT20\shkim
2026-05-10 23:14:52 +09:00
parent 6943e6ef3e
commit 4525476945
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/public/upload.css
+13 -13
View File
@@ -31,10 +31,10 @@ body {
} }
.wedding-card { .wedding-card {
width: min(100%, 720px); width: min(100%, 430px);
min-height: 100vh; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
padding: 0 clamp(12px, 3.6vw, 34px) 38px; padding: 0 0 38px;
background: background:
radial-gradient(ellipse at 50% 30%, rgba(218, 218, 212, 0.28), transparent 58%), 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%), radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.7), transparent 48%),
@@ -44,9 +44,9 @@ body {
.poster { .poster {
position: relative; position: relative;
width: min(100%, 900px); width: 100%;
margin: 0 auto; margin: 0 auto;
aspect-ratio: 3 / 2; aspect-ratio: 390 / 545;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
} }
@@ -74,7 +74,7 @@ body {
position: absolute; position: absolute;
inset: 0 50% 0 auto; inset: 0 50% 0 auto;
z-index: 3; z-index: 3;
width: 100%; width: 212%;
height: 100%; height: 100%;
max-width: none; max-width: none;
object-fit: cover; object-fit: cover;
@@ -87,10 +87,10 @@ body {
.poster__portrait { .poster__portrait {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
left: 34%; left: 18%;
right: 34%; right: 18%;
top: 13%; top: 13%;
bottom: 16.5%; bottom: 24.8%;
overflow: hidden; overflow: hidden;
background: #ffffff; background: #ffffff;
border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px; border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px;
@@ -99,8 +99,8 @@ body {
.poster__couple { .poster__couple {
position: absolute; position: absolute;
left: 51.5%; left: 51.5%;
top: 13%; top: 14%;
width: 148%; width: 145%;
height: auto; height: auto;
max-width: none; max-width: none;
transform: translateX(-50%); transform: translateX(-50%);
@@ -123,7 +123,7 @@ body {
h1 { h1 {
margin: 0; margin: 0;
color: #565656; color: #565656;
font-size: clamp(32px, 7.5vw, 50px); font-size: clamp(32px, 7.5vw, 43px);
line-height: 1.1; line-height: 1.1;
font-weight: 400; font-weight: 400;
letter-spacing: 0.12em; letter-spacing: 0.12em;
@@ -140,13 +140,13 @@ h1 {
.poster__date { .poster__date {
margin-top: clamp(12px, 2.8vw, 20px); margin-top: clamp(12px, 2.8vw, 20px);
font-size: clamp(16px, 3.3vw, 24px); font-size: clamp(15px, 3.3vw, 19px);
font-weight: 700; font-weight: 700;
} }
.poster__subtitle { .poster__subtitle {
margin-top: clamp(14px, 3vw, 22px); margin-top: clamp(14px, 3vw, 22px);
font-size: clamp(15px, 3.3vw, 24px); font-size: clamp(14px, 3.3vw, 19px);
font-weight: 700; font-weight: 700;
} }