Revision control
Copy as Markdown
Other Tools
<!doctype html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
<html>
<head>
<meta charset="utf-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; img-src data:; style-src 'unsafe-inline'"
/>
<!-- prettier-ignore -->
<style>
# Including this style sheet so we have our color variables available. The style
# sheet is self-contained and can thus safely be used here.
#include ../../../mail/themes/shared/mail/colors.css
</style>
<style>
html {
background: var(--color-surface-lower);
color: var(--color-text-base);
font-size: 1rem;
line-height: 1.31875;
font-family: Inter, sans-serif;
color-scheme: light dark;
}
main {
padding-block-start: 2rem;
--main-block-padding: 3rem;
padding-inline: var(--main-block-padding);
border-radius: 1.5rem;
max-inline-size: 50rem;
margin-block-start: 4.5rem;
margin-inline: auto;
background: var(--color-surface-base);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.14);
}
header {
margin-block-end: 1rem;
white-space: nowrap;
svg {
block-size: 3.5rem;
}
}
/* Tag name before ID needed to appease the preprocessor. */
span#brandLogo svg {
inline-size: auto;
padding-inline-end: 1px;
}
span#wordmark svg path[fill="context-fill"] {
fill: currentColor;
}
section {
margin-inline-start: 0.75rem;
margin-block-end: 1.5rem;
}
h1 {
font-size: 1.5rem;
font-weight: normal;
color: var(--color-text-highlight);
margin: 0;
margin-block-end: 0.75rem;
}
p#subtitle {
font-weight: bold;
}
p {
margin: 0;
padding-block-end: 1lh;
a {
color: inherit;
text-decoration: underline;
}
}
footer {
margin-inline: calc(-1 * var(--main-block-padding));
padding-block: 1rem;
padding-inline: 1.5rem;
text-align: center;
border-top: 1px solid var(--color-surface-border);
a {
color: var(--color-text-secondary);
font-size: 0.75rem;
text-decoration: underline;
}
}
</style>
</head>
<body>
<main>
<!-- The logo and wordmark should always be displayed ltr. -->
<header dir="ltr">
<span id="brandLogo" role="presentation"></span
><span id="wordmark" role="presentation"></span>
</header>
<section>
<h1 id="title"></h1>
<p id="subtitle"></p>
<p id="body"></p>
</section>
<footer>
<a
id="footerLink"
target="_blank"
></a>
</footer>
</main>
</body>
</html>