Skip to content

Commit 8300dee

Browse files
devanshi14malhotradevanshi14malhotra
committed
Merge pull request #959: Refine Typography Hierarchy
2 parents 721d3d2 + df0ec26 commit 8300dee

2 files changed

Lines changed: 136 additions & 51 deletions

File tree

‎frontend/css/style-responsive.css‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,12 @@ input {
112112
:root {
113113
--book-width: 130px;
114114
--book-height: 200px;
115+
--type-display-size: clamp(2.1rem, 7vw, 3rem);
116+
--type-copy-size: 1rem;
117+
--type-copy-line-height: 1.8;
118+
--type-heading-2-size: 1.35rem;
119+
--type-heading-3-size: 1.1rem;
120+
--type-section-meta-size: 0.85rem;
115121
}
116122

117123
/* Main content padding */
@@ -183,11 +189,13 @@ input {
183189
overflow-x: auto;
184190

185191
.hero h1 {
186-
font-size: clamp(1.8rem, 5vw, 2.5rem);
192+
font-size: var(--type-display-size);
193+
line-height: 1.08;
187194
}
188195

189196
.hero p {
190-
font-size: 1rem;
197+
font-size: var(--type-copy-size);
198+
line-height: var(--type-copy-line-height);
191199
}
192200

193201
/* Curated Sections - Improved Mobile Layout */
@@ -200,11 +208,12 @@ input {
200208
}
201209

202210
.section-header h2 {
203-
font-size: 1.3rem;
211+
font-size: var(--type-heading-2-size);
204212
}
205213

206214
.section-header span {
207-
font-size: 0.85rem;
215+
font-size: var(--type-section-meta-size);
216+
line-height: 1.45;
208217
}
209218

210219
.curated-row {
@@ -493,13 +502,15 @@ input {
493502
}
494503

495504
body.library-page .library-hero h1 {
496-
font-size: clamp(1.7rem, 5vw, 2rem);
497-
line-height: 1.1;
505+
font-size: var(--type-display-size);
506+
line-height: 1.08;
498507
}
499508

500509
body.library-page .library-hero p {
501510
max-width: 28rem;
502511
margin-inline: auto;
512+
font-size: var(--type-copy-size);
513+
line-height: var(--type-copy-line-height);
503514
}
504515

505516
body.library-page .hero .view-toggles {
@@ -543,16 +554,24 @@ input {
543554
}
544555

545556
@media (max-width: 480px) {
557+
:root {
558+
--type-display-size: clamp(1.9rem, 8vw, 2.5rem);
559+
--type-copy-size: 0.95rem;
560+
--type-copy-line-height: 1.75;
561+
--type-heading-2-size: 1.1rem;
562+
--type-section-meta-size: 0.75rem;
563+
}
564+
546565
body.library-page .library-hero {
547566
padding: 1rem 0.75rem;
548567
}
549568

550569
body.library-page .library-hero h1 {
551-
font-size: 1.55rem;
570+
font-size: var(--type-display-size);
552571
}
553572

554573
body.library-page .library-hero p {
555-
font-size: 0.95rem;
574+
font-size: var(--type-copy-size);
556575
}
557576

558577
body.library-page .hero .view-toggles {
@@ -888,12 +907,14 @@ input {
888907
}
889908

890909
.hero h1 {
891-
font-size: clamp(1.3rem, 5vw, 1.8rem);
910+
font-size: var(--type-display-size);
911+
line-height: 1.08;
892912
margin-bottom: 1rem;
893913
}
894914

895915
.hero p {
896-
font-size: 0.95rem;
916+
font-size: var(--type-copy-size);
917+
line-height: var(--type-copy-line-height);
897918
}
898919

899920
/* Curated Section */
@@ -907,11 +928,11 @@ input {
907928
}
908929

909930
.section-header h2 {
910-
font-size: 1.1rem;
931+
font-size: var(--type-heading-2-size);
911932
}
912933

913934
.section-header span {
914-
font-size: 0.75rem;
935+
font-size: var(--type-section-meta-size);
915936
}
916937

917938
.curated-row {

‎frontend/pages/auth.html‎

Lines changed: 103 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
radial-gradient(circle at top left, rgba(212, 175, 55, 0.12), transparent 34%),
6666
radial-gradient(circle at bottom right, rgba(93, 64, 55, 0.12), transparent 28%),
6767
var(--bg-color);
68+
color: var(--text-main);
6869
}
6970

7071
body.auth-page::before,
@@ -129,6 +130,7 @@
129130
flex-direction: column;
130131
justify-content: space-between;
131132
min-height: 100%;
133+
color: #fff7ef;
132134
}
133135

134136
.auth-intro::after {
@@ -147,20 +149,22 @@
147149
text-transform: uppercase;
148150
font-size: 0.78rem;
149151
font-weight: 700;
152+
line-height: 1.25;
150153
}
151154

152155
.auth-intro h1 {
153156
margin-top: 0.85rem;
154157
max-width: 10ch;
155-
font-size: clamp(2.25rem, 4vw, 4.25rem);
156-
line-height: 0.98;
158+
font-size: var(--type-display-size, clamp(2.05rem, 4vw, 4rem));
159+
line-height: 1.02;
160+
color: #fff7ef;
157161
}
158162

159163
.auth-copy {
160164
margin-top: 1.25rem;
161-
max-width: 34rem;
162-
font-size: 1.05rem;
163-
line-height: 1.7;
165+
max-width: 32rem;
166+
font-size: 1rem;
167+
line-height: 1.75;
164168
color: rgba(255, 247, 239, 0.84);
165169
}
166170

@@ -197,10 +201,11 @@
197201
padding: clamp(2rem, 4vw, 3.25rem);
198202
border-radius: 28px;
199203
text-align: left;
200-
background: var(--book-bg);
204+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 249, 0.9));
201205
backdrop-filter: blur(14px);
202206
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
203-
border: 1px solid rgba(0, 0, 0, 0.06);
207+
border: 1px solid rgba(93, 64, 55, 0.12);
208+
color: var(--text-main);
204209
}
205210

206211
.auth-kicker {
@@ -209,14 +214,16 @@
209214

210215
#authTitle {
211216
margin-top: 0.7rem;
212-
font-size: clamp(2rem, 3vw, 2.6rem);
213-
line-height: 1.05;
217+
font-size: var(--type-heading-1-size, clamp(1.95rem, 3vw, 2.55rem));
218+
line-height: 1.08;
219+
color: var(--text-main);
214220
}
215221

216222
.auth-subtitle {
217223
margin-top: 0.75rem;
218224
color: var(--text-muted);
219-
line-height: 1.6;
225+
font-size: 0.98rem;
226+
line-height: 1.68;
220227
}
221228

222229
#authForm {
@@ -287,7 +294,7 @@
287294
background: linear-gradient(135deg, var(--wood-dark), #1f1a17);
288295
color: #fff7ef;
289296
font-family: 'Playfair Display', serif;
290-
font-size: 1.08rem;
297+
font-size: 1rem;
291298
letter-spacing: 0.03em;
292299
box-shadow: 0 14px 30px rgba(44, 36, 32, 0.22);
293300
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
@@ -308,13 +315,13 @@
308315
width: 100%;
309316
padding: 0.9rem 1rem;
310317
margin-top: 1rem;
311-
background: #fff;
312-
color: #2c2c2c;
313-
border: 1px solid #ddd;
314-
border-radius: 6px;
318+
background: rgba(255, 255, 255, 0.92);
319+
color: var(--text-main);
320+
border: 1px solid rgba(93, 64, 55, 0.16);
321+
border-radius: 12px;
315322
cursor: pointer;
316323
font-family: 'Playfair Display', serif;
317-
font-size: 1rem;
324+
font-size: 0.96rem;
318325
display: flex;
319326
align-items: center;
320327
justify-content: center;
@@ -323,11 +330,12 @@
323330

324331
.toggle-link {
325332
display: inline-flex;
326-
color: var(--text-muted);
333+
color: var(--wood-dark);
327334
font-size: 0.96rem;
328335
cursor: pointer;
329336
text-decoration: underline;
330337
text-underline-offset: 0.2em;
338+
line-height: 1.5;
331339
}
332340

333341
@media (max-width: 900px) {
@@ -359,41 +367,97 @@
359367
border-radius: 22px;
360368
}
361369

370+
.auth-intro h1 {
371+
font-size: var(--type-display-size, clamp(1.9rem, 8vw, 2.9rem));
372+
}
373+
374+
.auth-copy {
375+
font-size: 0.96rem;
376+
line-height: 1.7;
377+
}
378+
379+
#authTitle {
380+
font-size: var(--type-heading-1-size, clamp(1.75rem, 6vw, 2.2rem));
381+
}
382+
383+
.auth-subtitle {
384+
font-size: 0.95rem;
385+
line-height: 1.65;
386+
}
387+
362388
.auth-highlights li {
363389
padding: 0.9rem 0.95rem;
364390
}
365391
}
366392

367-
#forgotPasswordPanel,
368-
#resetPasswordPanel {
369-
display: none;
393+
[data-theme="night"] body.auth-page {
394+
background:
395+
radial-gradient(circle at top left, rgba(252, 203, 78, 0.12), transparent 34%),
396+
radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.04), transparent 28%),
397+
var(--bg-color);
398+
color: var(--text-main);
370399
}
371400

372-
.auth-panel-actions {
373-
margin-top: 1rem;
401+
[data-theme="night"] body.auth-page::before {
402+
background: rgba(252, 203, 78, 0.08);
374403
}
375404

376-
.auth-hint {
377-
font-size: 0.85rem;
378-
color: #666;
379-
margin-bottom: 1rem;
380-
line-height: 1.4;
405+
[data-theme="night"] body.auth-page::after {
406+
background: rgba(255, 255, 255, 0.04);
381407
}
382408

383-
#forgotResetLinkBox {
384-
display: none;
385-
margin-top: 1rem;
386-
padding: 0.75rem;
387-
background: #f5f5f0;
388-
border-radius: 6px;
389-
text-align: left;
390-
font-size: 0.85rem;
391-
word-break: break-all;
409+
[data-theme="night"] .auth-intro {
410+
background:
411+
linear-gradient(145deg, rgba(60, 40, 30, 0.96), rgba(34, 24, 20, 0.94)),
412+
var(--wood-dark);
413+
color: #fff1e6;
414+
border-color: rgba(252, 203, 78, 0.18);
415+
}
416+
417+
[data-theme="night"] .auth-intro h1,
418+
[data-theme="night"] .auth-eyebrow,
419+
[data-theme="night"] .auth-copy,
420+
[data-theme="night"] .auth-highlights li {
421+
color: #fff1e6;
422+
}
423+
424+
[data-theme="night"] .auth-highlights li {
425+
background: rgba(255, 255, 255, 0.06);
426+
border-color: rgba(252, 203, 78, 0.14);
392427
}
393428

394-
#forgotResetLinkBox a {
395-
color: #2c2c2c;
396-
font-weight: 600;
429+
[data-theme="night"] .auth-container {
430+
background: linear-gradient(180deg, rgba(33, 26, 22, 0.95), rgba(24, 19, 16, 0.92));
431+
color: #f5e9db;
432+
border-color: rgba(252, 203, 78, 0.12);
433+
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
434+
}
435+
436+
[data-theme="night"] #authTitle,
437+
[data-theme="night"] .auth-subtitle,
438+
[data-theme="night"] .toggle-link {
439+
color: #f5e9db;
440+
}
441+
442+
[data-theme="night"] .auth-input {
443+
background: rgba(255, 255, 255, 0.06);
444+
color: #f5e9db;
445+
border-color: rgba(252, 203, 78, 0.16);
446+
}
447+
448+
[data-theme="night"] .auth-input::placeholder {
449+
color: rgba(245, 233, 219, 0.68);
450+
}
451+
452+
[data-theme="night"] .auth-input:focus {
453+
background: rgba(255, 255, 255, 0.08);
454+
border-color: rgba(252, 203, 78, 0.55);
455+
}
456+
457+
[data-theme="night"] .google-auth-btn {
458+
background: rgba(255, 255, 255, 0.08);
459+
color: #f5e9db;
460+
border-color: rgba(252, 203, 78, 0.16);
397461
}
398462

399463
/* Password Strength Styles */

0 commit comments

Comments
 (0)