<!DOCTYPE html>
-<html>
- <head>
- <meta name="viewport" content="width=device-width">
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>{% block title %}{% end block %}</title>
- <style media="all" type="text/css">
- {% include "main.css" %}
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+ {# Based on https://www.cerberusemail.com #}
+ <meta charset="utf-8">
+
+ {# Enable "responsiveness" #}
+ <meta name="viewport" content="width=device-width">
+
+ {# Use the latest (edge) version of IE rendering engine #}
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+ {# Disable auto-scale in iOS 10 Mail entirely #}
+ <meta name="x-apple-disable-message-reformatting">
+
+ {# Tell iOS not to automatically link certain text strings #}
+ <meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no">
+
+ {# Declare supported color schemes #}
+ <meta name="color-scheme" content="light dark">
+ <meta name="supported-color-schemes" content="light dark">
+
+ {# Title #}
+ <title>{% block title %}{% end block %}</title>
+
+ {# Make background images in 72ppi Outlook render at correct size #}
+ <!--[if gte mso 9]>
+ <xml>
+ <o:OfficeDocumentSettings>
+ <o:PixelsPerInch>96</o:PixelsPerInch>
+ </o:OfficeDocumentSettings>
+ </xml>
+ <![endif]-->
+
+ {# Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font #}
+ <!--[if mso]>
+ <style>
+ * {
+ font-family: sans-serif !important;
+ }
+ </style>
+ <![endif]-->
+
+ {# All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks.
+ More on that here: https://web.archive.org/web/20190717120616/http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ #}
+ <!--[if !mso]>
+ <style>
+ {% include "fonts.css" %}
</style>
- </head>
-
- <body>
- <span class="preheader">{% block preheader %}{% end preheader %}</span>
- <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
- <tr>
- <td class="container">
- <div class="content">
- {% block container %}
- <table role="presentation" class="main">
- <tr>
- <td class="logo">
- <img src="https://www.ipfire.org/static/img/ipfire-tux.png" alt="{{ _("IPFire Logo") }}">
- </td>
- </tr>
- <tr>
- <td class="wrapper">
- <table role="presentation" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td>
- {% block content %}{% end block %}
- </td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- {% end block %}
-
- <div class="footer">
- <table role="presentation" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td class="content-block">
- <span class="apple-link">{{ _("The IPFire Project" )}}</span>
-
- <br>
-
- {% block footer %}{% end block %}
- </td>
- </tr>
- </table>
- </div>
- </div>
+ <![endif]-->
+
+ {# Import the main CSS #}
+ <style>
+ {# Tell the email client that both light and dark styles are provided #}
+ :root {
+ color-scheme: light dark
+ supported-color-schemes: light dark
+ }
+
+ {% include "main.css" %}
+ </style>
+</head>
+
+<body class="bg">
+ <center role="article" aria-roledescription="email" lang="en" class="bg">
+ <!--[if mso | IE]>
+ <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" class="bg">
+ <tr>
+ <td>
+ <![endif]-->
+ {# Visually Hidden Pre-header Text #}
+ <div class="pre-header" aria-hidden="true">
+ {% block preview %}{% end block %}
+ </div>
+
+ {# Create white space after the desired preview text so email clients don’t pull other distracting text into the inbox preview #}
+ <div class="whitespace">
+ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
+ </div>
+
+ <div class="container">
+ <!--[if mso]>
+ <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
+ <tr>
+ <td>
+ <![endif]-->
+
+ {# Body #}
+ <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0">
+ {% block body %}
+ {# Header #}
+ <tr class="header">
+ <td>
+ <h1>
+ IPFire<span class="has-text-primary">_</span>
+ </h1>
+ </td>
+ </tr>
+
+ {# Hero #}
+ {% block hero %}{% end block %}
+
+ {# Content #}
+ <tr class="content">
+ <td>
+ <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+ {% block content %}{% end block %}
+ </tabke>
+ </td>
+ </tr>
+ {% end block %}
+ </table>
+
+ {# Footer #}
+ <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0">
+ <tr class="footer">
+ <td>
+ {{ _("The IPFire Project") }},
+ {{ _("c/o") }} Lightning Wire Labs GmbH,
+ <span class="unstyle-auto-detected-links">Gerhardstraße 8, 45711 Datteln, Germany</span>
+
+ <br><br>
+
+ {% block footer %}{% end block %}
+ </td>
+ </tr>
+ </table>
+
+ <!--[if mso]>
</td>
- </tr>
+ </tr>
+ </table>
+ <![endif]-->
+ </div>
+
+ <!--[if mso | IE]>
+ </td>
+ </tr>
</table>
- </body>
+ <![endif]-->
+ </center>
+</body>
</html>
-// 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
projects / ipfire.org.git / commitdiff
