{% block title %}{% end block %}

+ + + {# Body #} + + {% block body %} + {# Header #} + + + + + {# Hero #} + {% block hero %}{% end block %} + + {# Content #} + +

+ + {% block content %}{% end block %} + + + + {% end block %} +

+ + {# Footer #} + + + + +

+ + + + + + + diff --git a/src/templates/messages/main.sass b/src/templates/messages/main.sass index ad115765..3116f791 100644 --- a/src/templates/messages/main.sass +++ b/src/templates/messages/main.sass @@ -1 +1,274 @@ -// Needs to be re-done https://bugzilla.ipfire.org/show_bug.cgi?id=13050 + +// Fonts +$font-family: Prompt, sans-serif + +$font-weight-normal: 500 +$font-weight-bold: 700 + +// Container +$container-width: 600px + +// A unit to use for padding +$pad: 20px + +// Borders +$border-radius: 4px + +// Colours +$black: hsl(0, 0%, 4%) +$white: hsl(0, 0%, 100%) +$grey: hsl(0, 0%, 97%) +$light: hsl(0, 0%, 80%) + +$primary: #ff2e52 +$primary-inverted: $white + +// Background Colours +$bg-light: $white +$bg-dark: $grey + +// Text Colour +$text: $black +$link: $primary + +// Font sizes +$font-size-small: 12px +$font-size-normal: 16px +$font-size-large: 20px + +$line-height-small: 16px +$line-height-normal: 22px +$line-height-large: 28px + +// Headings +$title-1: 30px +$line-height-title-1: 40px + +// Remove spaces around the email design added by some email clients +html, body + margin: 0 auto !important + padding: 0 !important + height: 100% !important + width: 100% !important + +// Stop email clients resizing small text +* + -ms-text-size-adjust: 100% + -webkit-text-size-adjust: 100% + +// Centers email on Android 4.4 +div[style*="margin: 16px 0"] + margin: 0 !important + +// forces Samsung Android mail clients to use the entire viewport +#MessageViewBody, #MessageWebViewDiv + width: 100% !important + +// Stop Outlook from adding extra spacing to tables +table, td + mso-table-lspace: 0pt !important + mso-table-rspace: 0pt !important + +// Fix a webkit padding issue +table + border-spacing: 0 !important + border-collapse: collapse !important + table-layout: fixed !important + margin: 0 auto !important + +// Use a better rendering method when resizing images in IE +img + -ms-interpolation-mode: bicubic + +// Prevent Windows 10 Mail from underlining links despite inline CSS +a + text-decoration: none + +// A work-around for email clients meddling in triggered links +a[x-apple-data-detectors], .unstyle-auto-detected-links a, .aBn + border-bottom: 0 !important + cursor: default !important + color: inherit !important + text-decoration: none !important + font-size: inherit !important + font-family: inherit !important + font-weight: inherit !important + line-height: inherit !important + +// Prevent Gmail from displaying a download button on large, non-linked images +.a6S + display: none !important + opacity: 0.01 !important + +// Prevent Gmail from changing the text color in conversation threads. +.im + color: inherit !important + +// If the above doesn't work, add a .g-img class to any image in question. +img.g-img + div + display: none !important + +// Set font +* + font-family: $font-family + font-weight: $font-weight-normal + +body + mso-line-height-rule: exactly + +// Links +a + color: $link + + &:hover + text-decoration: underline + +// Center all content +center + width: 100% + +// Visually Hidden Pre-header Text +.pre-header + max-height: 0 + overflow: hidden + mso-hide: all + +// Some whitespace +.whitespace + display: none + font-size: 1px + line-height: 1px + max-height: 0px + max-width: 0px + opacity: 0 + overflow: hidden + mso-hide: all + +// The main container +.container + max-width: $container-width + margin: 0 auto + + // Improve readability on small screens + @media screen and (max-width: 600px) + p + font-size: 17px !important; + +// Make tables fill the entire viewport horizontally +table + width: 100% + margin: auto + + // The header box + tr.header + td + padding: $pad 0 + text-align: center + + h1 + margin: 0 0 10px 0 + font-size: 50px + line-height: 60px + font-weight: $font-weight-bold + + span + color: $primary + font-weight: i$font-weight-bold + + // The hero unit + tr.hero + td + img + display: block + border: 0 + width: 100% + max-width: $container-width + height: auto + background: $grey + margin: auto + + // Content (i.e. the big box) + tr.content + td + background-color: $bg-dark + color: $text + + @media (prefers-color-scheme: dark) + background-color: $bg-light + + table + // One block in the box + tr.section + td + padding: $pad + font-size: $font-size-normal + line-height: $line-height-normal + + // Headings + h1 + margin: 0 0 10px 0 + font-size: $title-1 + line-height: $line-height-title-1 + + // Text + p + padding: 8px 0 + margin: 0 + + &:last-child + padding: 0 + + // Links + a + color: $link + + &:hover + text-decoration: underline + + // Optionally make the text large + &.text-large + td + p + font-size: $font-size-large + line-height: $line-height-large + + // Buttons + tr.button + td + a + display: block + border: 1px solid $primary + border-radius: $border-radius + text-align: center + font-size: $font-size-large + font-weight: $font-weight-bold + line-height: $line-height-large + text-decoration: none + padding: 16px 20px + color: $white + + &.primary + background-color: $primary + color: $primary-inverted + + &:hover + background-color: $primary-inverted + color: $primary + + // Change the padding on the last element + //tr:last-child + // td + // padding: 0 $pad + + // Footer + tr.footer + td + padding: $pad + font-size: $font-size-small + line-height: $line-height-small + color: $light + text-align: center + + // Make links grey, too + a + color: inherit

+ IPFire_ +