iqbal/learning-lab-express
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fit the sign-in page on phones with a full blue background

Browse Source 
Shorten the story header so the form shows without scrolling, keep the
Clerk card inside the screen, and run one blue background behind the
whole page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Iqbal
2026-10-23 12:33:51 +07:00
parent a1d49b37b5
commit a4189f0d2a
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/styles/theme.css
View File

@@ -235,7 +235,20 @@ dialog::backdrop{background:rgba(16,24,40,.45);backdrop-filter:blur(4px)}
.page-head h1{font-size:30px} .page-head h1{font-size:30px}
.page-head p{font-size:14px} .page-head p{font-size:14px}
.metric strong{font-size:32px} .metric strong{font-size:32px}
.login-story{padding:28px 20px} /* Phone: a short story header so the sign-in form shows without scrolling past it */
/* Phone: one blue background behind both the story and the form, dot grid included */
.login-layout{background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px) 0 0/22px 22px,radial-gradient(circle 360px at 100% 0,rgba(255,255,255,.28),rgba(255,255,255,0)),linear-gradient(170deg,#175cd3,#1570ef 45%,#2e90fa)}
.login-story,.login-panel{background:transparent}
.login-story::before,.login-story::after{display:none}
.login-story{padding:20px 16px 24px}
.login-copy{padding:20px 0 0}
.login-copy h1{font-size:28px;line-height:1.1;margin:14px 0 10px}
.login-copy>p{font-size:14px;line-height:1.5}
.eyebrow{font-size:10.5px;padding:5px 12px 5px 6px}
.login-benefits,.login-footer{display:none}
.login-panel{padding:24px 16px 32px}
.login-form-wrap{width:100%}
.login-form-wrap :is(.cl-rootBox,.cl-cardBox){width:100%;max-width:100%}
} }
@media (prefers-reduced-motion:reduce){ @media (prefers-reduced-motion:reduce){
.btn,.content-card,.sidebar nav :is(button,a){transition:none} .btn,.content-card,.sidebar nav :is(button,a){transition:none}