soroushdes/hamkadr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile: smaller hero/heading typography so titles aren't oversized

Browse Source 
Reduce hero h1/p, page/section headings, stat pills and the hero search
font sizes on phones (<=560px); tighter hero padding. Desktop unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-08 23:21:32 +03:30
parent 69e2a12a3a
commit c92744fb50
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/wwwroot/css/site.css
+11 -4
View File
@@ -208,8 +208,8 @@ button, input, select, textarea, optgroup { font-family: inherit; }
background: linear-gradient(135deg, #0e8f8a 0%, #0a6f6b 100%); background: linear-gradient(135deg, #0e8f8a 0%, #0a6f6b 100%);
color: #fff; padding: clamp(40px, 8vw, 64px) 0 clamp(48px, 9vw, 80px); text-align: center; color: #fff; padding: clamp(40px, 8vw, 64px) 0 clamp(48px, 9vw, 80px); text-align: center;
} }
.hero h1 { font-size: clamp(23px, 5.5vw, 34px); font-weight: 900; margin: 0 0 14px; line-height: 1.45; } .hero h1 { font-size: clamp(19px, 5.2vw, 34px); font-weight: 900; margin: 0 0 12px; line-height: 1.4; }
.hero p { font-size: clamp(15px, 3.2vw, 17px); opacity: .92; max-width: 620px; margin: 0 auto 30px; } .hero p { font-size: clamp(13px, 3vw, 17px); opacity: .92; max-width: 620px; margin: 0 auto 28px; line-height: 1.7; }
/* search box on hero */ /* search box on hero */
.search-card { .search-card {
@@ -318,14 +318,21 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
.hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; } .hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; }
.hero-chips a:hover { background: rgba(255,255,255,.3); } .hero-chips a:hover { background: rgba(255,255,255,.3); }
@media (max-width: 560px) { @media (max-width: 560px) {
/* Smaller, tighter typography on phones */
.hero { padding: 28px 0 32px; }
.hero h1 { font-size: 18px; line-height: 1.55; margin-bottom: 8px; }
.hero p { font-size: 12.5px; line-height: 1.8; margin-bottom: 20px; }
.section-head h2, .page-head h1 { font-size: 18px; }
.hero-search { margin-top: 6px; } .hero-search { margin-top: 6px; }
.hero-search-pill { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; } .hero-search-pill { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; }
.hero-search-pill .hs-ico { display: none; } .hero-search-pill .hs-ico { display: none; }
.hero-search-pill input { width: 100%; border: 1px solid var(--line); border-radius: 10px; .hero-search-pill input { width: 100%; border: 1px solid var(--line); border-radius: 10px;
padding: 12px 14px; font-size: 15px; background: var(--bg); } padding: 11px 14px; font-size: 14px; background: var(--bg); }
.hero-search-pill .btn { width: 100%; } .hero-search-pill .btn { width: 100%; }
.hero-chips { gap: 6px; } .hero-chips { gap: 6px; font-size: 12px; }
.hero-chips .hc-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; } .hero-chips .hc-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
.stat-pill .n { font-size: 18px; }
.stat-pill .l { font-size: 11px; }
} }
/* Big search box on the /Search page head */ /* Big search box on the /Search page head */
.search-hero { display: flex; gap: 8px; max-width: 640px; margin: 6px 0 4px; } .search-hero { display: flex; gap: 8px; max-width: 640px; margin: 6px 0 4px; }