jsonresume-theme-signal 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/style.css ADDED
@@ -0,0 +1,562 @@
1
+ :root {
2
+ --dark-navy: #1a252f;
3
+ --accent-blue: #2980b9;
4
+ --text-dark: #333333;
5
+ --text-light: #555555;
6
+ --text-lighter: #666666;
7
+ --border-color: #e0e6ed;
8
+
9
+ /* Dynamic print layout & typography variables */
10
+ --print-scale: 1;
11
+ --print-font-size: 10.5pt;
12
+ --print-line-height: 1.5;
13
+ --print-h1-size: 26pt;
14
+ --print-h2-size: 13.5pt;
15
+ --print-company-name-size: 12.5pt;
16
+ --print-company-desc-size: 9.5pt;
17
+ --print-role-title-size: 11pt;
18
+ --print-role-date-size: 10.5pt;
19
+ --print-education-size: 11pt;
20
+ --print-section-gap: 18px;
21
+ --print-item-gap: 10px;
22
+ --print-bullet-gap: 5px;
23
+ }
24
+
25
+ body {
26
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
27
+ background-color: #f0f2f5;
28
+ margin: 0;
29
+ padding: 40px 20px;
30
+ color: var(--text-dark);
31
+ line-height: 1.6;
32
+ }
33
+
34
+ .resume-container {
35
+ background-color: #ffffff;
36
+ max-width: 850px;
37
+ margin: 0 auto;
38
+ padding: 60px 70px;
39
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
40
+ border-radius: 4px;
41
+ font-size: 14px;
42
+ }
43
+
44
+ h1 {
45
+ font-size: 34px;
46
+ color: var(--dark-navy);
47
+ margin: 0 0 8px 0;
48
+ text-transform: uppercase;
49
+ letter-spacing: 1.5px;
50
+ text-align: center;
51
+ }
52
+
53
+ h1 + p {
54
+ text-align: center;
55
+ font-size: 14px;
56
+ color: var(--text-light);
57
+ margin-bottom: 24px;
58
+ padding-bottom: 16px;
59
+ border-bottom: 2px solid var(--border-color);
60
+ }
61
+
62
+ /* Contact details (phone, LinkedIn text) hidden in web view, displayed only in print/PDF */
63
+ .print-contact {
64
+ display: none;
65
+ }
66
+
67
+ h1 + p + p {
68
+ font-size: 14.5px;
69
+ margin-bottom: 28px;
70
+ text-align: left;
71
+ }
72
+
73
+ h2 {
74
+ font-size: 18px;
75
+ color: var(--accent-blue);
76
+ border-bottom: 1px solid #c8d6e5;
77
+ padding-bottom: 6px;
78
+ margin-top: 30px;
79
+ margin-bottom: 16px;
80
+ text-transform: uppercase;
81
+ letter-spacing: 0.5px;
82
+ }
83
+
84
+ .company-header {
85
+ margin-top: 20px;
86
+ margin-bottom: 8px;
87
+ }
88
+
89
+ .company-name {
90
+ font-size: 17px;
91
+ font-weight: bold;
92
+ color: var(--dark-navy);
93
+ }
94
+
95
+ .company-desc {
96
+ font-style: italic;
97
+ color: var(--text-lighter);
98
+ font-size: 13px;
99
+ display: block;
100
+ margin-top: 3px;
101
+ }
102
+
103
+ .role-header {
104
+ margin-top: 12px;
105
+ margin-bottom: 6px;
106
+ display: flex;
107
+ justify-content: space-between;
108
+ align-items: baseline;
109
+ }
110
+
111
+ .role-title {
112
+ font-weight: bold;
113
+ color: #34495e;
114
+ font-size: 15px;
115
+ }
116
+
117
+ .role-date {
118
+ font-weight: bold;
119
+ color: var(--accent-blue);
120
+ font-size: 14px;
121
+ }
122
+
123
+ ul {
124
+ margin-top: 8px;
125
+ margin-bottom: 18px;
126
+ padding-left: 24px;
127
+ }
128
+
129
+ li {
130
+ margin-bottom: 8px;
131
+ text-align: left;
132
+ }
133
+
134
+ .skills-table {
135
+ width: 100%;
136
+ border-collapse: collapse;
137
+ margin-top: 8px;
138
+ margin-bottom: 20px;
139
+ }
140
+
141
+ .skills-table td {
142
+ padding: 6px 0;
143
+ vertical-align: top;
144
+ }
145
+
146
+ .skill-cat {
147
+ font-weight: bold;
148
+ width: 25%;
149
+ color: #2c3e50;
150
+ }
151
+
152
+ .skill-list {
153
+ width: 75%;
154
+ color: #444444;
155
+ text-align: left;
156
+ }
157
+
158
+ .early-career td {
159
+ padding: 4px 0;
160
+ }
161
+
162
+ .education {
163
+ font-weight: bold;
164
+ color: #2c3e50;
165
+ font-size: 15px;
166
+ padding-bottom: 20px;
167
+ }
168
+
169
+ .action-links {
170
+ text-align: center;
171
+ margin-bottom: 20px;
172
+ padding-bottom: 16px;
173
+ border-bottom: 2px solid var(--border-color);
174
+ }
175
+
176
+ .action-link {
177
+ display: inline-flex;
178
+ align-items: center;
179
+ justify-content: center;
180
+ width: 42px;
181
+ height: 42px;
182
+ margin: 0 6px;
183
+ background-color: var(--accent-blue);
184
+ color: #ffffff;
185
+ text-decoration: none;
186
+ border-radius: 50%;
187
+ transition: background-color 0.2s;
188
+ }
189
+
190
+ .action-link:hover {
191
+ background-color: #1f6ba0;
192
+ }
193
+
194
+ .action-link svg {
195
+ width: 20px;
196
+ height: 20px;
197
+ }
198
+
199
+ @media (max-width: 600px) {
200
+ body {
201
+ padding: 0;
202
+ background-color: #ffffff;
203
+ }
204
+ .resume-container {
205
+ padding: 30px 20px;
206
+ box-shadow: none;
207
+ border-radius: 0;
208
+ }
209
+ .role-header {
210
+ flex-direction: column;
211
+ justify-content: flex-start;
212
+ }
213
+ .role-date {
214
+ margin-top: 4px;
215
+ }
216
+ .skills-table td {
217
+ display: block;
218
+ width: 100%;
219
+ }
220
+ .skill-cat {
221
+ padding-bottom: 0;
222
+ }
223
+ }
224
+
225
+ @page {
226
+ size: Letter;
227
+ margin: 18mm 18mm;
228
+ background-color: #fafbfd;
229
+ }
230
+
231
+ @media print, all {
232
+ body.pdf-mode {
233
+ font-family: "Liberation Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
234
+ background-color: #fafbfd !important;
235
+ -webkit-print-color-adjust: exact;
236
+ print-color-adjust: exact;
237
+ margin: 0 auto;
238
+ padding: 0;
239
+ width: 680px;
240
+ max-width: 680px;
241
+ box-sizing: border-box;
242
+ font-size: calc(var(--print-font-size) * var(--print-scale));
243
+ line-height: var(--print-line-height);
244
+ orphans: 3;
245
+ widows: 3;
246
+ }
247
+
248
+ body.pdf-mode .resume-container {
249
+ width: 680px !important;
250
+ max-width: 680px !important;
251
+ margin: 0 auto !important;
252
+ padding: 0 !important;
253
+ box-shadow: none !important;
254
+ border-radius: 0 !important;
255
+ background: transparent !important;
256
+ box-sizing: border-box;
257
+ font-size: calc(var(--print-font-size) * var(--print-scale));
258
+ }
259
+
260
+ body.pdf-mode .action-links {
261
+ display: none !important;
262
+ }
263
+
264
+ body.pdf-mode .print-contact {
265
+ display: inline !important;
266
+ }
267
+
268
+ body.pdf-mode h1 {
269
+ font-size: calc(var(--print-h1-size) * var(--print-scale));
270
+ margin: 0 0 calc(6px * var(--print-scale)) 0;
271
+ break-after: avoid;
272
+ page-break-after: avoid;
273
+ }
274
+
275
+ body.pdf-mode h1 + p {
276
+ font-size: calc(var(--print-font-size) * var(--print-scale));
277
+ margin-bottom: calc(var(--print-section-gap) * var(--print-scale));
278
+ padding-bottom: calc(12px * var(--print-scale));
279
+ border-bottom: 2px solid #e0e6ed;
280
+ break-after: avoid;
281
+ page-break-after: avoid;
282
+ }
283
+
284
+ body.pdf-mode h1 + p + p {
285
+ font-size: calc(var(--print-font-size) * var(--print-scale));
286
+ margin-bottom: calc(var(--print-section-gap) * var(--print-scale));
287
+ padding: 0 5px;
288
+ }
289
+
290
+ body.pdf-mode h2 {
291
+ font-size: calc(var(--print-h2-size) * var(--print-scale));
292
+ margin-top: calc(var(--print-section-gap) * var(--print-scale));
293
+ margin-bottom: calc(10px * var(--print-scale));
294
+ padding-bottom: calc(5px * var(--print-scale));
295
+ break-after: avoid;
296
+ page-break-after: avoid;
297
+ }
298
+
299
+ body.pdf-mode .company-header {
300
+ margin-top: calc(var(--print-item-gap) * var(--print-scale));
301
+ margin-bottom: calc(4px * var(--print-scale));
302
+ break-after: avoid;
303
+ page-break-after: avoid;
304
+ break-inside: avoid;
305
+ page-break-inside: avoid;
306
+ }
307
+
308
+ body.pdf-mode .company-name {
309
+ font-size: calc(var(--print-company-name-size) * var(--print-scale));
310
+ font-weight: bold;
311
+ color: #1a252f;
312
+ }
313
+
314
+ body.pdf-mode .company-desc {
315
+ font-size: calc(var(--print-company-desc-size) * var(--print-scale));
316
+ margin-top: 2px;
317
+ }
318
+
319
+ body.pdf-mode .role-header {
320
+ margin-top: calc(6px * var(--print-scale));
321
+ margin-bottom: calc(3px * var(--print-scale));
322
+ break-after: avoid;
323
+ page-break-after: avoid;
324
+ break-inside: avoid;
325
+ page-break-inside: avoid;
326
+ display: flex;
327
+ justify-content: space-between;
328
+ align-items: baseline;
329
+ }
330
+
331
+ body.pdf-mode .role-title {
332
+ font-size: calc(var(--print-role-title-size) * var(--print-scale));
333
+ font-weight: bold;
334
+ }
335
+
336
+ body.pdf-mode .role-date {
337
+ font-size: calc(var(--print-role-date-size) * var(--print-scale));
338
+ font-weight: bold;
339
+ }
340
+
341
+ body.pdf-mode ul {
342
+ margin-top: calc(4px * var(--print-scale));
343
+ margin-bottom: calc(12px * var(--print-scale));
344
+ padding-left: 18px;
345
+ }
346
+
347
+ body.pdf-mode li {
348
+ margin-bottom: calc(var(--print-bullet-gap) * var(--print-scale));
349
+ break-inside: avoid;
350
+ page-break-inside: avoid;
351
+ }
352
+
353
+ body.pdf-mode .skills-table {
354
+ margin-top: calc(6px * var(--print-scale));
355
+ margin-bottom: calc(var(--print-section-gap) * var(--print-scale));
356
+ break-inside: avoid;
357
+ page-break-inside: avoid;
358
+ }
359
+
360
+ body.pdf-mode .skills-table td {
361
+ padding: calc(5px * var(--print-scale)) 0;
362
+ }
363
+
364
+ body.pdf-mode .skill-cat {
365
+ width: 25%;
366
+ }
367
+
368
+ body.pdf-mode .skill-list {
369
+ width: 75%;
370
+ }
371
+
372
+ body.pdf-mode .early-career {
373
+ break-inside: avoid;
374
+ page-break-inside: avoid;
375
+ }
376
+
377
+ body.pdf-mode .early-career td {
378
+ padding: calc(3px * var(--print-scale)) 0;
379
+ }
380
+
381
+ body.pdf-mode .education {
382
+ font-size: calc(var(--print-education-size) * var(--print-scale));
383
+ padding-bottom: 0 !important;
384
+ margin-bottom: 0 !important;
385
+ break-inside: avoid;
386
+ page-break-inside: avoid;
387
+ }
388
+
389
+ body.pdf-mode .resume-container > *:last-child {
390
+ margin-bottom: 0 !important;
391
+ padding-bottom: 0 !important;
392
+ }
393
+
394
+ body.pdf-mode a {
395
+ text-decoration: none;
396
+ color: inherit;
397
+ }
398
+ }
399
+
400
+ @media print {
401
+ body {
402
+ font-family: "Liberation Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
403
+ background-color: #fafbfd !important;
404
+ -webkit-print-color-adjust: exact;
405
+ print-color-adjust: exact;
406
+ margin: 0;
407
+ padding: 0;
408
+ font-size: calc(var(--print-font-size) * var(--print-scale));
409
+ line-height: var(--print-line-height);
410
+ orphans: 3;
411
+ widows: 3;
412
+ }
413
+
414
+ .resume-container {
415
+ max-width: 100% !important;
416
+ margin: 0 !important;
417
+ padding: 0 !important;
418
+ box-shadow: none !important;
419
+ border-radius: 0 !important;
420
+ background: transparent !important;
421
+ font-size: calc(var(--print-font-size) * var(--print-scale));
422
+ }
423
+
424
+ .action-links {
425
+ display: none !important;
426
+ }
427
+
428
+ .print-contact {
429
+ display: inline !important;
430
+ }
431
+
432
+ h1 {
433
+ font-size: calc(var(--print-h1-size) * var(--print-scale));
434
+ margin: 0 0 calc(6px * var(--print-scale)) 0;
435
+ break-after: avoid;
436
+ page-break-after: avoid;
437
+ }
438
+
439
+ h1 + p {
440
+ font-size: calc(var(--print-font-size) * var(--print-scale));
441
+ margin-bottom: calc(var(--print-section-gap) * var(--print-scale));
442
+ padding-bottom: calc(12px * var(--print-scale));
443
+ border-bottom: 2px solid #e0e6ed;
444
+ break-after: avoid;
445
+ page-break-after: avoid;
446
+ }
447
+
448
+ h1 + p + p {
449
+ font-size: calc(var(--print-font-size) * var(--print-scale));
450
+ margin-bottom: calc(var(--print-section-gap) * var(--print-scale));
451
+ padding: 0 5px;
452
+ }
453
+
454
+ h2 {
455
+ font-size: calc(var(--print-h2-size) * var(--print-scale));
456
+ margin-top: calc(var(--print-section-gap) * var(--print-scale));
457
+ margin-bottom: calc(10px * var(--print-scale));
458
+ padding-bottom: calc(5px * var(--print-scale));
459
+ break-after: avoid;
460
+ page-break-after: avoid;
461
+ }
462
+
463
+ .company-header {
464
+ margin-top: calc(var(--print-item-gap) * var(--print-scale));
465
+ margin-bottom: calc(4px * var(--print-scale));
466
+ break-after: avoid;
467
+ page-break-after: avoid;
468
+ break-inside: avoid;
469
+ page-break-inside: avoid;
470
+ }
471
+
472
+ .company-name {
473
+ font-size: calc(var(--print-company-name-size) * var(--print-scale));
474
+ font-weight: bold;
475
+ color: #1a252f;
476
+ }
477
+
478
+ .company-desc {
479
+ font-size: calc(var(--print-company-desc-size) * var(--print-scale));
480
+ margin-top: 2px;
481
+ }
482
+
483
+ .role-header {
484
+ margin-top: calc(6px * var(--print-scale));
485
+ margin-bottom: calc(3px * var(--print-scale));
486
+ break-after: avoid;
487
+ page-break-after: avoid;
488
+ break-inside: avoid;
489
+ page-break-inside: avoid;
490
+ display: flex;
491
+ justify-content: space-between;
492
+ align-items: baseline;
493
+ }
494
+
495
+ .role-title {
496
+ font-size: calc(var(--print-role-title-size) * var(--print-scale));
497
+ font-weight: bold;
498
+ }
499
+
500
+ .role-date {
501
+ font-size: calc(var(--print-role-date-size) * var(--print-scale));
502
+ font-weight: bold;
503
+ }
504
+
505
+ ul {
506
+ margin-top: calc(4px * var(--print-scale));
507
+ margin-bottom: calc(12px * var(--print-scale));
508
+ padding-left: 18px;
509
+ }
510
+
511
+ li {
512
+ margin-bottom: calc(var(--print-bullet-gap) * var(--print-scale));
513
+ break-inside: avoid;
514
+ page-break-inside: avoid;
515
+ }
516
+
517
+ .skills-table {
518
+ margin-top: calc(6px * var(--print-scale));
519
+ margin-bottom: calc(var(--print-section-gap) * var(--print-scale));
520
+ break-inside: avoid;
521
+ page-break-inside: avoid;
522
+ }
523
+
524
+ .skills-table td {
525
+ padding: calc(5px * var(--print-scale)) 0;
526
+ }
527
+
528
+ .skill-cat {
529
+ width: 25%;
530
+ }
531
+
532
+ .skill-list {
533
+ width: 75%;
534
+ }
535
+
536
+ .early-career {
537
+ break-inside: avoid;
538
+ page-break-inside: avoid;
539
+ }
540
+
541
+ .early-career td {
542
+ padding: calc(3px * var(--print-scale)) 0;
543
+ }
544
+
545
+ .education {
546
+ font-size: calc(var(--print-education-size) * var(--print-scale));
547
+ padding-bottom: 0 !important;
548
+ margin-bottom: 0 !important;
549
+ break-inside: avoid;
550
+ page-break-inside: avoid;
551
+ }
552
+
553
+ .resume-container > *:last-child {
554
+ margin-bottom: 0 !important;
555
+ padding-bottom: 0 !important;
556
+ }
557
+
558
+ a {
559
+ text-decoration: none;
560
+ color: inherit;
561
+ }
562
+ }