Skip to content

Commit f05507a

Browse files
iammukeshmclaude
iammukeshm
and
claude
committed
fix(docs): mobile font sizes, author image fill, hero-to-stats gap
- Bump all mobile font sizes to readable range (0.88-1.05rem body text) - Fix author image to fill container edge-to-edge - Reduce hero bottom padding and stats section padding to close gap Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent e25234b commit f05507a

1 file changed

Lines changed: 79 additions & 37 deletions

File tree

‎docs/src/pages/index.astro‎

Lines changed: 79 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -897,7 +897,7 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
897897

898898
/* ── HERO ─────────────────────── */
899899
.hero {
900-
position: relative; padding: 8rem 0 4rem; overflow: hidden;
900+
position: relative; padding: 8rem 0 2rem; overflow: hidden;
901901
}
902902

903903
/* particle constellation */
@@ -958,7 +958,7 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
958958
.hero-row { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
959959

960960
.hero-term-wrap {
961-
max-width: 40rem; margin: 3rem auto 0;
961+
max-width: 40rem; margin: 2rem auto 0;
962962
padding: 0 0.5rem;
963963
}
964964

@@ -1030,7 +1030,7 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
10301030
}
10311031

10321032
/* ── NUMBERS ──────────────────── */
1033-
.nums { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
1033+
.nums { padding: 1.75rem 0; border-bottom: 1px solid var(--border); }
10341034
.nums-strip {
10351035
display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
10361036
}
@@ -1687,7 +1687,8 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
16871687
overflow: hidden;
16881688
}
16891689
.au-img {
1690-
width: 100%; height: 100%; object-fit: cover; display: block;
1690+
width: 100% !important; height: 100% !important; object-fit: cover; display: block;
1691+
max-width: none !important;
16911692
}
16921693

16931694
/* body */
@@ -1984,15 +1985,29 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
19841985
/* ── RESPONSIVE ───────────────── */
19851986
@media (max-width: 768px) {
19861987
/* hero */
1987-
.hero { padding: 6rem 0 2rem; }
1988-
.hero h1 { font-size: 2rem; }
1989-
.hero-p { font-size: 0.95rem; }
1988+
.hero { padding: 5rem 0 2rem; }
1989+
.hero h1 { font-size: 2.25rem; }
1990+
.hero-p { font-size: 1.05rem; line-height: 1.6; }
1991+
.hero-eyebrow { font-size: 0.88rem; }
19901992
.br-desk { display: none; }
19911993
.hero-term-wrap { margin-top: 2rem; padding: 0; }
19921994
.hero-term { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
1995+
.ht-body { font-size: 0.82rem; }
1996+
1997+
/* buttons */
1998+
.btn { font-size: 0.95rem; padding: 0.6rem 1.4rem; }
19931999

19942000
/* stats */
19952001
.nums-strip { flex-wrap: wrap; justify-content: center; }
2002+
.ns-val { font-size: 1rem; }
2003+
.ns-label { font-size: 0.88rem; }
2004+
2005+
/* section headers */
2006+
.sec-hd h2 { font-size: 1.6rem; }
2007+
.sec-sub { font-size: 1rem; }
2008+
.sec-tag { font-size: 0.75rem; }
2009+
.nl-h2 { font-size: 1.5rem; }
2010+
.code-h2 { font-size: 1.5rem; }
19962011

19972012
/* bento */
19982013
.bento-grid {
@@ -2002,61 +2017,80 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
20022017
.b-card { border: 1px solid var(--border); border-radius: 12px; }
20032018
.b-span2 { flex-direction: column; gap: 1.25rem; }
20042019
.b-visual { min-width: 0; width: 100%; }
2020+
.b-card h3 { font-size: 1.15rem; }
2021+
.b-card p { font-size: 0.95rem; }
2022+
.b-label { font-size: 0.75rem; }
2023+
.b-tag-row code { font-size: 0.78rem; }
2024+
.bsp { font-size: 0.88rem; }
20052025

20062026
/* newsletter */
20072027
.nl-content { grid-template-columns: 1fr; }
20082028
.nl-text { padding: 2rem 1.5rem 1.5rem; }
2029+
.nl-p { font-size: 0.95rem; }
2030+
.nl-perk { font-size: 0.9rem; }
20092031
.nl-form-wrap { padding: 0 1.5rem 2rem; border-left: none; border-top: 1px solid var(--border); padding-top: 1.5rem; }
20102032
.nl-form-card { max-width: none; }
2033+
.nl-input { font-size: 1rem; }
2034+
.nl-btn { font-size: 1rem; }
2035+
.nl-label { font-size: 0.78rem; }
2036+
.nl-proof { font-size: 0.78rem; }
20112037

20122038
/* architecture */
20132039
.arch-panels {
20142040
grid-template-columns: 1fr;
2015-
overflow: visible;
2016-
border-radius: 0;
2017-
border: none;
2018-
background: none;
2019-
gap: 1rem;
2041+
overflow: visible; border-radius: 0; border: none; background: none; gap: 1rem;
20202042
}
20212043
.arch-panel {
20222044
padding: 1.25rem;
20232045
border: 1px solid var(--border);
20242046
border-radius: 12px;
20252047
}
2048+
.ap-desc { font-size: 0.92rem; }
2049+
.ap-badge { font-size: 0.75rem; }
20262050
.ap-mod-body { gap: 0; }
2027-
.ap-mod-name { font-size: 0.78rem; }
2028-
.ap-mod-type { font-size: 0.58rem; }
2029-
.ap-file { font-size: 0.68rem; }
2030-
.ap-rule-badge { font-size: 0.6rem; white-space: normal; }
2031-
.al-items span { font-size: 0.7rem; padding: 0.15rem 0.4rem; }
2032-
.al-tag { min-width: 4rem; font-size: 0.55rem; }
2033-
.al { padding: 0.65rem 0.85rem; flex-wrap: wrap; }
2034-
.vsa-request, .vsa-result { font-size: 0.7rem; }
2035-
.vsa-file-name { font-size: 0.72rem; }
2036-
.vsa-file-desc { font-size: 0.65rem; }
2037-
.vsa-slice-path { font-size: 0.65rem; }
2051+
.ap-mod-name { font-size: 0.88rem; }
2052+
.ap-mod-type { font-size: 0.68rem; }
2053+
.ap-file { font-size: 0.8rem; }
2054+
.ap-col-label { font-size: 0.68rem; }
2055+
.ap-rule-badge { font-size: 0.72rem; white-space: normal; }
2056+
.ap-shared-items span { font-size: 0.78rem; }
2057+
.vsa-request, .vsa-result { font-size: 0.82rem; }
2058+
.vsa-file-name { font-size: 0.85rem; }
2059+
.vsa-file-desc { font-size: 0.78rem; }
2060+
.vsa-slice-path { font-size: 0.78rem; }
2061+
.vsa-insight { font-size: 0.88rem; }
20382062

20392063
/* code */
20402064
.code-layout { grid-template-columns: 1fr; gap: 1.5rem; }
20412065
.code-text { text-align: center; }
2066+
.code-p { font-size: 1rem; }
20422067
.code-list { align-items: center; }
2043-
.code-block pre { font-size: 0.7rem; }
2068+
.code-list li { font-size: 0.95rem; }
2069+
.code-block pre { font-size: 0.78rem; }
20442070

20452071
/* stack */
20462072
.stack-grid {
20472073
grid-template-columns: 1fr 1fr;
20482074
overflow: visible; border-radius: 0; border: none; background: none; gap: 0.75rem;
20492075
}
20502076
.sg-card { border: 1px solid var(--border); border-radius: 10px; }
2077+
.sg-card li { font-size: 0.95rem; }
2078+
.sg-card h4 { font-size: 0.75rem; }
20512079

20522080
/* diy */
20532081
.diy-grid {
20542082
grid-template-columns: 1fr;
20552083
overflow: visible; border-radius: 0; border: none; background: none; gap: 0.75rem;
20562084
}
20572085
.diy-card { border: 1px solid var(--border); border-radius: 10px; }
2086+
.diy-card h4 { font-size: 1.05rem; }
2087+
.diy-card p { font-size: 0.92rem; }
2088+
.diy-weeks { font-size: 0.78rem; }
20582089
.diy-total-inner { flex-direction: column; gap: 0; }
20592090
.diy-total-left, .diy-total-right { padding: 1.25rem 1.5rem; }
2091+
.diy-total-val { font-size: 1.85rem; }
2092+
.diy-total-sub { font-size: 0.88rem; }
2093+
.diy-total-label { font-size: 0.75rem; }
20602094
.diy-total-vs { padding: 0.25rem 0; }
20612095

20622096
/* teams */
@@ -2065,32 +2099,40 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
20652099
overflow: visible; border-radius: 0; border: none; background: none; gap: 0.75rem;
20662100
}
20672101
.team-card { border: 1px solid var(--border); border-radius: 10px; }
2102+
.team-card h4 { font-size: 1.05rem; }
2103+
.team-card p { font-size: 0.92rem; }
20682104

20692105
/* testimonials */
20702106
.social-grid { grid-template-columns: 1fr; }
2107+
.quote-card p { font-size: 0.98rem; }
2108+
.quote-author strong { font-size: 0.9rem; }
2109+
.quote-author span { font-size: 0.8rem; }
20712110

20722111
/* author */
20732112
.au-outer { grid-template-columns: 1fr; }
20742113
.au-img-col { width: 100%; height: 360px; }
20752114
.au-body { padding: 1.5rem; text-align: center; align-items: center; }
20762115
.au-meta { justify-content: center; }
2077-
.au-bio { text-align: center; }
2116+
.au-name { font-size: 1.5rem; }
2117+
.au-role { font-size: 0.95rem; }
2118+
.au-bio { text-align: center; font-size: 0.98rem; }
20782119
.au-nums { width: 100%; overflow-x: auto; justify-content: center; }
2079-
.au-n { flex: 1; min-width: 0; padding: 0.5rem 0.5rem; }
2120+
.au-n { flex: 1; min-width: 0; padding: 0.5rem 0.5rem; font-size: 0.85rem; }
2121+
.au-nv { font-size: 1.05rem; }
20802122
.au-socials { flex-wrap: wrap; justify-content: center; }
20812123

2082-
/* cta */
2083-
.cta-box { padding: 2rem 1.25rem; }
2084-
.cta-term pre { font-size: 0.7rem; }
2124+
/* faq */
2125+
.faq-item summary { font-size: 1.02rem; }
2126+
.faq-item p { font-size: 0.95rem; }
20852127

2086-
/* sections */
2087-
.sec-hd h2 { font-size: 1.4rem; }
2088-
.nl-h2 { font-size: 1.3rem; }
2089-
.code-h2 { font-size: 1.3rem; }
2090-
.au-name { font-size: 1.3rem; }
2128+
/* cta */
2129+
.cta-box { padding: 2.5rem 1.25rem; }
2130+
.cta-box h2 { font-size: 1.6rem; }
2131+
.cta-box > p { font-size: 1.05rem; }
2132+
.cta-term pre { font-size: 0.78rem; }
20912133

20922134
/* general */
2093-
.w { padding: 0 1rem; }
2135+
.w { padding: 0 1.25rem; }
20942136
section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
20952137

20962138
/* center everything on mobile */
@@ -2107,12 +2149,12 @@ import mukeshPhoto from '../assets/mukesh_murugan.png';
21072149
}
21082150

21092151
@media (max-width: 480px) {
2110-
.hero h1 { font-size: 1.75rem; }
2152+
.hero h1 { font-size: 2rem; }
21112153
.hero-eyebrow span:last-child { display: none; }
21122154
.hero-eyebrow .sep { display: none; }
21132155
.stack-grid { grid-template-columns: 1fr; }
21142156
.nums-strip { gap: 0.5rem; }
2115-
.ns { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
2157+
.ns { padding: 0.45rem 0.75rem; }
21162158
.au-img-col { height: 300px; }
21172159
}
21182160
</style>

0 commit comments

Comments
 (0)