3 $font-family: Prompt, sans-serif
5 $font-weight-normal: 500
9 $container-width: 600px
11 // A unit to use for padding
18 $black: hsl(0, 0%, 4%)
19 $white: hsl(0, 0%, 100%)
20 $grey: hsl(0, 0%, 97%)
21 $light: hsl(0, 0%, 80%)
24 $primary-inverted: $white
35 $font-size-small: 12px
36 $font-size-normal: 16px
37 $font-size-large: 20px
39 $line-height-small: 16px
40 $line-height-normal: 22px
41 $line-height-large: 28px
45 $line-height-title-1: 40px
47 // Remove spaces around the email design added by some email clients
49 margin: 0 auto !important
51 height: 100% !important
52 width: 100% !important
54 // Stop email clients resizing small text
56 -ms-text-size-adjust: 100%
57 -webkit-text-size-adjust: 100%
59 // Centers email on Android 4.4
60 div[style*="margin: 16px 0"]
63 // forces Samsung Android mail clients to use the entire viewport
64 #MessageViewBody, #MessageWebViewDiv
65 width: 100% !important
67 // Stop Outlook from adding extra spacing to tables
69 mso-table-lspace: 0pt !important
70 mso-table-rspace: 0pt !important
72 // Fix a webkit padding issue
74 border-spacing: 0 !important
75 border-collapse: collapse !important
76 table-layout: fixed !important
77 margin: 0 auto !important
79 // Use a better rendering method when resizing images in IE
81 -ms-interpolation-mode: bicubic
83 // Prevent Windows 10 Mail from underlining links despite inline CSS
87 // A work-around for email clients meddling in triggered links
88 a[x-apple-data-detectors], .unstyle-auto-detected-links a, .aBn
89 border-bottom: 0 !important
90 cursor: default !important
91 color: inherit !important
92 text-decoration: none !important
93 font-size: inherit !important
94 font-family: inherit !important
95 font-weight: inherit !important
96 line-height: inherit !important
98 // Prevent Gmail from displaying a download button on large, non-linked images
100 display: none !important
101 opacity: 0.01 !important
103 // Prevent Gmail from changing the text color in conversation threads.
105 color: inherit !important
107 // If the above doesn't work, add a .g-img class to any image in question.
109 display: none !important
113 font-family: $font-family
114 font-weight: $font-weight-normal
117 mso-line-height-rule: exactly
124 text-decoration: underline
126 // Center all content
130 // Visually Hidden Pre-header Text
147 // The main container
149 max-width: $container-width
152 // Improve readability on small screens
153 @media screen and (max-width: 600px)
155 font-size: 17px !important;
157 // Make tables fill the entire viewport horizontally
172 font-weight: $font-weight-bold
176 font-weight: i$font-weight-bold
185 max-width: $container-width
190 // Content (i.e. the big box)
193 background-color: $bg-dark
196 @media (prefers-color-scheme: dark)
197 background-color: $bg-light
200 // One block in the box
204 font-size: $font-size-normal
205 line-height: $line-height-normal
211 line-height: $line-height-title-1
226 text-decoration: underline
233 border: 1px solid $primary
234 border-radius: $border-radius
236 font-size: $font-size-large
237 font-weight: $font-weight-bold
238 line-height: $line-height-large
239 text-decoration: none
244 background-color: $primary
245 color: $primary-inverted
248 background-color: $primary-inverted
251 // Change the padding on the last element
260 font-size: $font-size-small
261 line-height: $line-height-small
265 // Make links grey, too