Skip to content

Commit a4e4598

Browse files
minimaluminiumminimaluminium
committed
Converted em line-height values to unitless in email templates
Prevents compounding line-height scaling when iOS Dynamic Type increases font sizes, which caused excessive line spacing in newsletter emails.
1 parent 65a1d4a commit a4e4598

File tree

4 files changed

+47
-47
lines changed

4 files changed

+47
-47
lines changed

‎ghost/core/core/server/services/email-rendering/partials/base-styles.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ table td {
103103
padding-top: 10px;
104104
padding-left: 30px;
105105
padding-right: 30px;
106-
line-height: 1.5em;
106+
line-height: 1.5;
107107
}
108108
109109
.footer a {

‎ghost/core/core/server/services/email-rendering/partials/card-styles.hbs‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ td.kg-card-spacing {
6868
.kg-bookmark-title {
6969
color: {{#if backgroundIsDark}}#ffffff{{else}}#15212A{{/if}};
7070
font-size: 15px;
71-
line-height: 1.5em;
71+
line-height: 1.5;
7272
font-weight: 600;
7373
}
7474

@@ -85,7 +85,7 @@ td.kg-card-spacing {
8585
color: rgba(0, 0, 0, 0.6);
8686
{{/if}}
8787
font-size: 13px;
88-
line-height: 1.5em;
88+
line-height: 1.5;
8989
font-weight: 400;
9090

9191
-webkit-line-clamp: 2;
@@ -126,13 +126,13 @@ td.kg-card-spacing {
126126
}
127127

128128
.kg-bookmark-author {
129-
line-height: 1.5em;
129+
line-height: 1.5;
130130
}
131131

132132
.kg-bookmark-publisher {
133133
overflow: hidden;
134134
max-width: 240px;
135-
line-height: 1.5em;
135+
line-height: 1.5;
136136
text-overflow: ellipsis;
137137
white-space: nowrap;
138138
}
@@ -203,7 +203,7 @@ td.kg-card-spacing {
203203
color: #15212A !important;
204204
font-family: inherit !important;
205205
font-size: 14px;
206-
line-height: 1.3em;
206+
line-height: 1.3;
207207
padding-top: 4px;
208208
padding-right: 20px;
209209
padding-left: 20px;
@@ -217,7 +217,7 @@ td.kg-card-spacing {
217217
font-family: inherit !important;
218218
font-size: 15px;
219219
padding: 8px;
220-
line-height: 1.3em;
220+
line-height: 1.3;
221221
}
222222

223223
.kg-audio-thumbnail.placeholder {
@@ -249,7 +249,7 @@ td.kg-card-spacing {
249249
padding-top: 4px;
250250
font-size: 17px;
251251
font-weight: 600;
252-
line-height: 18px;
252+
line-height: 1.125;
253253
text-decoration: none !important;
254254
color: {{#if backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important;
255255
}
@@ -258,7 +258,7 @@ td.kg-card-spacing {
258258
display: inline-block;
259259
max-width: 400px;
260260
font-size: 14px;
261-
line-height: 1.4em;
261+
line-height: 1.4;
262262
text-decoration: none !important;
263263
{{#if backgroundIsDark}}
264264
color: #ffffff !important;
@@ -562,15 +562,15 @@ img.kg-cta-image {
562562

563563
.kg-cta-text p {
564564
margin-bottom: 1em;
565-
line-height: 1.4em;
565+
line-height: 1.4;
566566
}
567567

568568
.kg-cta-text p:last-child {
569569
margin-bottom: 0;
570570
}
571571

572572
.kg-cta-bg-none:not(.kg-cta-minimal.kg-cta-has-img) .kg-cta-text p {
573-
line-height: 1.6em;
573+
line-height: 1.6;
574574
}
575575

576576
.kg-cta-immersive.kg-cta-centered .kg-cta-text p {

‎ghost/core/core/server/services/email-rendering/partials/content-styles.hbs‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ ol,
8282
dl,
8383
blockquote {
8484
margin: 0 0 1.5em 0;
85-
line-height: 1.6em;
85+
line-height: 1.6;
8686
}
8787
8888
ol,
@@ -130,7 +130,7 @@ ol {
130130
li {
131131
margin: 0.5em 0;
132132
padding-left: 0.3em;
133-
line-height: 1.6em;
133+
line-height: 1.6;
134134
color: {{#if backgroundIsDark}}#ffffff{{else}}#15212A{{/if}};
135135
}
136136
@@ -154,7 +154,7 @@ blockquote {
154154
border-left: {{accentColor}} 2px solid;
155155
font-size: 17px;
156156
font-weight: 500;
157-
line-height: 1.6em;
157+
line-height: 1.6;
158158
letter-spacing: -0.2px;
159159
}
160160
@@ -210,7 +210,7 @@ h5,
210210
h6 {
211211
margin-top: 0;
212212
font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
213-
line-height: 1.11em;
213+
line-height: 1.11;
214214
font-weight: {{titleWeight}};
215215
text-rendering: optimizeLegibility;
216216
}
@@ -243,19 +243,19 @@ h3 {
243243
h4 {
244244
margin: 1.8em 0 0.5em 0;
245245
font-size: 21px;
246-
line-height: 1.2em;
246+
line-height: 1.2;
247247
}
248248
249249
h5 {
250250
margin: 2em 0 0.5em 0;
251251
font-size: 19px;
252-
line-height: 1.3em;
252+
line-height: 1.3;
253253
}
254254
255255
h6 {
256256
margin: 2em 0 0.5em 0;
257257
font-size: 19px;
258-
line-height: 1.3em;
258+
line-height: 1.3;
259259
}
260260
261261
/*
@@ -331,7 +331,7 @@ figcaption {
331331
font-size: 13px;
332332
padding-top: 10px;
333333
padding-bottom: 10px;
334-
line-height: 1.5em;
334+
line-height: 1.5;
335335
{{#if backgroundIsDark}}
336336
color: #ffffff;
337337
color: rgba(255, 255, 255, .6);
@@ -355,7 +355,7 @@ pre {
355355
background: #15212A;
356356
padding: 15px;
357357
border-radius: 3px;
358-
line-height: 1.2em;
358+
line-height: 1.2;
359359
color: #ffffff;
360360
}
361361

‎ghost/core/core/server/services/email-service/email-templates/partials/styles.hbs‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ img.is-dark-background {
192192
margin-top: 32px;
193193
color: #15212A;
194194
text-align: center;
195-
line-height: 1.1em;
195+
line-height: 1.1;
196196
}
197197
198198
.post-title-link-left {
@@ -208,7 +208,7 @@ img.is-dark-background {
208208
margin: 0;
209209
color: {{#if headerBackgroundIsDark}}#ffffff{{else}}#15212A{{/if}};
210210
font-size: 19px;
211-
line-height: 1.4em;
211+
line-height: 1.4;
212212
text-align: center;
213213
}
214214
@@ -317,7 +317,7 @@ img.is-dark-background {
317317
color: #15212a;
318318
color: rgba(0, 0, 0, 0.6);
319319
{{/if}}
320-
line-height: 1.5em;
320+
line-height: 1.5;
321321
}
322322
323323
.kg-card-figcaption {
@@ -358,7 +358,7 @@ img.is-dark-background {
358358
font-size: 13px !important;
359359
font-weight: 500;
360360
margin: 1em 0 0 0;
361-
line-height: 1.4em;
361+
line-height: 1.4;
362362
word-break: break-word;
363363
}
364364
@@ -482,7 +482,7 @@ h3.latest-posts-header {
482482
color: {{#if backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important;
483483
font-size: 15px;
484484
font-weight: 400;
485-
line-height: 1.45em;
485+
line-height: 1.45;
486486
text-decoration: none;
487487
}
488488
@@ -495,7 +495,7 @@ h3.latest-posts-header {
495495
font-size: 15px;
496496
font-weight: 400;
497497
text-align: right;
498-
line-height: 1.45em;
498+
line-height: 1.45;
499499
vertical-align: bottom;
500500
}
501501
@@ -519,7 +519,7 @@ h3.latest-posts-header {
519519
max-width: 600px !important;
520520
font-family: Georgia, serif;
521521
font-size: 18px;
522-
line-height: 1.5em;
522+
line-height: 1.5;
523523
color: #15212A;
524524
padding-bottom: 20px;
525525
border-bottom: 1px solid {{dividerColor}};
@@ -528,7 +528,7 @@ h3.latest-posts-header {
528528
.post-content-sans-serif {
529529
max-width: 600px !important;
530530
font-size: 17px;
531-
line-height: 1.5em;
531+
line-height: 1.5;
532532
color: #15212A;
533533
padding-bottom: 20px;
534534
border-bottom: 1px solid {{dividerColor}};
@@ -599,7 +599,7 @@ a[data-flickr-embed] img {
599599
.kg-header-card h2 {
600600
font-size: 32px;
601601
font-weight: {{titleWeight}};
602-
line-height: 1.1em;
602+
line-height: 1.1;
603603
margin: 0 0 0.125em;
604604
}
605605
@@ -614,7 +614,7 @@ a[data-flickr-embed] img {
614614
.kg-header-card h3 {
615615
font-size: 17px;
616616
font-weight: 400;
617-
line-height: 1.5em;
617+
line-height: 1.5;
618618
margin: 0;
619619
}
620620
@@ -644,7 +644,7 @@ a[data-flickr-embed] img {
644644
645645
.kg-header-card.kg-v2 .kg-header-card-heading {
646646
margin: 0;
647-
line-height: 1em;
647+
line-height: 1;
648648
}
649649
650650
.kg-header-card.kg-v2 .kg-header-card-subheading-wrapper {
@@ -654,7 +654,7 @@ a[data-flickr-embed] img {
654654
.kg-header-card.kg-v2 .kg-header-card-subheading {
655655
margin: 0;
656656
font-size: 17px;
657-
line-height: 1.5em;
657+
line-height: 1.5;
658658
}
659659
660660
.kg-header-card.kg-v2 .kg-header-card-heading a,
@@ -694,7 +694,7 @@ a[data-flickr-embed] img {
694694
padding-top: 4px;
695695
font-size: 16px;
696696
font-weight: 600;
697-
line-height: 18px;
697+
line-height: 1.125;
698698
text-decoration: none !important;
699699
color: {{#if backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important;
700700
}
@@ -754,7 +754,7 @@ a[data-flickr-embed] img {
754754
padding-top: 8px;
755755
font-size: 17px;
756756
font-weight: bold;
757-
line-height: 1.3em;
757+
line-height: 1.3;
758758
text-decoration: none !important;
759759
color: {{#if backgroundIsDark}}#ffffff{{else}}#15212A{{/if}} !important;
760760
}
@@ -764,7 +764,7 @@ a[data-flickr-embed] img {
764764
padding-left: 12px;
765765
padding-top: 2px;
766766
font-size: 15px;
767-
line-height: 1.4em;
767+
line-height: 1.4;
768768
text-decoration: none !important;
769769
{{#if backgroundIsDark}}
770770
color: #ffffff !important;
@@ -781,7 +781,7 @@ a[data-flickr-embed] img {
781781
padding-top: 4px;
782782
padding-bottom: 8px;
783783
font-size: 13px;
784-
line-height: 1.4em;
784+
line-height: 1.4;
785785
text-decoration: none !important;
786786
{{#if backgroundIsDark}}
787787
color: #ffffff;
@@ -948,7 +948,7 @@ a[data-flickr-embed] img {
948948
949949
table.body .kg-callout-text {
950950
font-size: 16px !important;
951-
line-height: 1.5em !important;
951+
line-height: 1.5 !important;
952952
}
953953
954954
table.body pre {
@@ -994,7 +994,7 @@ a[data-flickr-embed] img {
994994
table.header .post-meta-date {
995995
white-space: normal !important;
996996
font-size: 13px !important;
997-
line-height: 1.2em;
997+
line-height: 1.2;
998998
}
999999
10001000
table.header .post-meta,
@@ -1038,7 +1038,7 @@ a[data-flickr-embed] img {
10381038
10391039
table.header .post-title a {
10401040
font-size: 26px !important;
1041-
line-height: 1.1em !important;
1041+
line-height: 1.1 !important;
10421042
}
10431043
10441044
table.feedback-buttons {
@@ -1099,38 +1099,38 @@ a[data-flickr-embed] img {
10991099
11001100
table.body h1 {
11011101
font-size: 32px !important;
1102-
line-height: 1.3em !important;
1102+
line-height: 1.3 !important;
11031103
}
11041104
11051105
table.body h2,
11061106
table.body h2 span {
11071107
font-size: 26px !important;
1108-
line-height: 1.22em !important;
1108+
line-height: 1.22 !important;
11091109
}
11101110
11111111
table.body h3 {
11121112
font-size: 21px !important;
1113-
line-height: 1.25em !important;
1113+
line-height: 1.25 !important;
11141114
}
11151115
11161116
table.body h4 {
11171117
font-size: 19px !important;
1118-
line-height: 1.3em !important;
1118+
line-height: 1.3 !important;
11191119
}
11201120
11211121
table.body h5 {
11221122
font-size: 16px !important;
1123-
line-height: 1.4em !important;
1123+
line-height: 1.4 !important;
11241124
}
11251125
11261126
table.body h6 {
11271127
font-size: 16px !important;
1128-
line-height: 1.4em !important;
1128+
line-height: 1.4 !important;
11291129
}
11301130
11311131
table.body blockquote {
11321132
font-size: 16px !important;
1133-
line-height: 1.6em;
1133+
line-height: 1.6;
11341134
margin-bottom: 0;
11351135
}
11361136
@@ -1143,7 +1143,7 @@ a[data-flickr-embed] img {
11431143
border-left: 0 none !important;
11441144
margin: 0 !important;
11451145
font-size: 18px !important;
1146-
line-height: 1.4em !important;
1146+
line-height: 1.4 !important;
11471147
}
11481148
11491149
table.body blockquote.kg-blockquote-alt p {

0 commit comments

Comments
 (0)
⚡