src/templates/messages/main.sass

   1
   2 // Fonts
   3 $font-family:                                   Prompt, sans-serif
   4
   5 $font-weight-normal:                    500
   6 $font-weight-bold:                              700
   7
   8 // Container
   9 $container-width:                               600px
  10
  11 // A unit to use for padding
  12 $pad:                                                   20px
  13
  14 // Borders
  15 $border-radius:                                 4px
  16
  17 // Colours
  18 $black:                                                 hsl(0, 0%, 4%)
  19 $white:                                                 hsl(0, 0%, 100%)
  20 $grey:                                                  hsl(0, 0%, 97%)
  21 $light:                                                 hsl(0, 0%, 80%)
  22
  23 $primary:                                               #ff2e52
  24 $primary-inverted:                              $white
  25
  26 // Background Colours
  27 $bg-light:                                              $white
  28 $bg-dark:                                               $grey
  29
  30 // Text Colour
  31 $text:                                                  $black
  32 $link:                                                  $primary
  33
  34 // Font sizes
  35 $font-size-small:                               12px
  36 $font-size-normal:                              16px
  37 $font-size-large:                               20px
  38
  39 $line-height-small:                             16px
  40 $line-height-normal:                    22px
  41 $line-height-large:                             28px
  42
  43 // Headings
  44 $title-1:                                               30px
  45 $line-height-title-1:                   40px
  46
  47 // Remove spaces around the email design added by some email clients
  48 html, body
  49         margin: 0 auto !important
  50         padding: 0 !important
  51         height: 100% !important
  52         width: 100% !important
  53
  54 // Stop email clients resizing small text
  55 *
  56         -ms-text-size-adjust: 100%
  57         -webkit-text-size-adjust: 100%
  58
  59 // Centers email on Android 4.4
  60 div[style*="margin: 16px 0"]
  61         margin: 0 !important
  62
  63 // forces Samsung Android mail clients to use the entire viewport
  64 #MessageViewBody, #MessageWebViewDiv
  65         width: 100% !important
  66
  67 // Stop Outlook from adding extra spacing to tables
  68 table, td
  69         mso-table-lspace: 0pt !important
  70         mso-table-rspace: 0pt !important
  71
  72 // Fix a webkit padding issue
  73 table
  74         border-spacing: 0 !important
  75         border-collapse: collapse !important
  76         table-layout: fixed !important
  77         margin: 0 auto !important
  78
  79 // Use a better rendering method when resizing images in IE
  80 img
  81         -ms-interpolation-mode: bicubic
  82
  83 // Prevent Windows 10 Mail from underlining links despite inline CSS
  84 a
  85         text-decoration: none
  86
  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
  97
  98 // Prevent Gmail from displaying a download button on large, non-linked images
  99 .a6S
 100         display: none !important
 101         opacity: 0.01 !important
 102
 103 // Prevent Gmail from changing the text color in conversation threads.
 104 .im
 105         color: inherit !important
 106
 107 // If the above doesn't work, add a .g-img class to any image in question.
 108 img.g-img + div
 109         display: none !important
 110
 111 // Set font
 112 *
 113         font-family: $font-family
 114         font-weight: $font-weight-normal
 115
 116 body
 117         mso-line-height-rule: exactly
 118
 119 // Links
 120 a
 121         color: $link
 122
 123         &:hover
 124                 text-decoration: underline
 125
 126 // Center all content
 127 center
 128         width: 100%
 129
 130 // Visually Hidden Pre-header Text
 131 .pre-header
 132         max-height: 0
 133         overflow: hidden
 134         mso-hide: all
 135
 136 // Some whitespace
 137 .whitespace
 138         display: none
 139         font-size: 1px
 140         line-height: 1px
 141         max-height: 0px
 142         max-width: 0px
 143         opacity: 0
 144         overflow: hidden
 145         mso-hide: all
 146
 147 // The main container
 148 .container
 149         max-width: $container-width
 150         margin: 0 auto
 151
 152         // Improve readability on small screens
 153         @media screen and (max-width: 600px)
 154                 p
 155                         font-size: 17px !important;
 156
 157 // Make tables fill the entire viewport horizontally
 158 table
 159         width: 100%
 160         margin: auto
 161
 162         // The header box
 163         tr.header
 164                 td
 165                         padding: $pad 0
 166                         text-align: center
 167
 168                         h1
 169                                 margin: 0 0 10px 0
 170                                 font-size: 50px
 171                                 line-height: 60px
 172                                 font-weight: $font-weight-bold
 173
 174                                 span
 175                                         color: $primary
 176                                         font-weight: i$font-weight-bold
 177
 178         // The hero unit
 179         tr.hero
 180                 td
 181                         img
 182                                 display: block
 183                                 border: 0
 184                                 width: 100%
 185                                 max-width: $container-width
 186                                 height: auto
 187                                 background: $grey
 188                                 margin: auto
 189
 190         // Content (i.e. the big box)
 191         tr.content
 192                 td
 193                         background-color: $bg-dark
 194                         color: $text
 195
 196                         @media (prefers-color-scheme: dark)
 197                                 background-color: $bg-light
 198
 199                         table
 200                                 // One block in the box
 201                                 tr.section
 202                                         td
 203                                                 padding: $pad
 204                                                 font-size: $font-size-normal
 205                                                 line-height: $line-height-normal
 206
 207                                                 // Headings
 208                                                 h1
 209                                                         margin: 0 0 10px 0
 210                                                         font-size: $title-1
 211                                                         line-height: $line-height-title-1
 212
 213                                                 // Text
 214                                                 p
 215                                                         padding: 8px 0
 216                                                         margin: 0
 217
 218                                                         &:last-child
 219                                                                 padding: 0
 220
 221                                                 // Links
 222                                                 a
 223                                                         color: $link
 224
 225                                                         &:hover
 226                                                                 text-decoration: underline
 227
 228                                 // Buttons
 229                                 tr.button
 230                                         td
 231                                                 a
 232                                                         display: block
 233                                                         border: 1px solid $primary
 234                                                         border-radius: $border-radius
 235                                                         text-align: center
 236                                                         font-size: $font-size-large
 237                                                         font-weight: $font-weight-bold
 238                                                         line-height: $line-height-large
 239                                                         text-decoration: none
 240                                                         padding: 16px 20px
 241                                                         color: $white
 242
 243                                                         &.primary
 244                                                                 background-color: $primary
 245                                                                 color: $primary-inverted
 246
 247                                                                 &:hover
 248                                                                         background-color: $primary-inverted
 249                                                                         color: $primary
 250
 251                                 // Change the padding on the last element
 252                                 //tr:last-child
 253                                 //      td
 254                                 //              padding: 0 $pad
 255
 256         // Footer
 257         tr.footer
 258                 td
 259                         padding: $pad
 260                         font-size: $font-size-small
 261                         line-height: $line-height-small
 262                         color: $light
 263                         text-align: center
 264
 265                         // Make links grey, too
 266                         a
 267                                 color: inherit