Initial commit: Atomaste website
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) Cosmin Popovici
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="x-apple-disable-message-reformatting">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="supported-color-schemes" content="light dark">
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<style>
|
||||
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<title>{title}</title>
|
||||
<style>
|
||||
@media (max-width: 600px) {
|
||||
.sm-my-8 {
|
||||
margin-top: 32px !important;
|
||||
margin-bottom: 32px !important
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0; width: 100%; background-color: #f0f0f1; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">
|
||||
<div style="display: none">
|
||||
Here's your quick overview
|
||||
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
|
||||
</div>
|
||||
<div role="article" aria-roledescription="email" aria-label="You're weekly insights for {domain} are here!" lang="en">
|
||||
<div style="background-color: #f0f0f1; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #333">
|
||||
<table align="center" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr>
|
||||
<td style="width: 552px; max-width: 100%">
|
||||
<div class="sm-my-8" style="margin-top: 48px; margin-bottom: 48px; text-align: center">
|
||||
<img src="images/maizzle.png" width="70" alt="Logo" style="max-width: 100%; vertical-align: middle; line-height: 1">
|
||||
</div>
|
||||
<h1 style="text-align: center; font-size: 24px; font-weight: 400; color: #333">
|
||||
You're weekly insights for <br>
|
||||
<span style="font-size: 30px; font-weight: 700">{domain}</span> <br>
|
||||
are here!
|
||||
</h1>
|
||||
<h2 style="margin: 32px 0 0; text-align: center; font-size: 16px; font-weight: 400">
|
||||
Here's your quick overview:
|
||||
</h2>
|
||||
<table style="width: 100%; padding: 24px" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr>
|
||||
<td style="border-radius: 8px; background-color: #ffffff; padding: 24px; font-size: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)">
|
||||
<h3 style="margin: 0; padding: 0;">
|
||||
Compare
|
||||
</h3>
|
||||
<p style="margin: 0; padding-top: 4px; padding-bottom: 4px; font-size: 14px; color: #696969">vs. previous week</p>
|
||||
<div role="separator" style="line-height: 24px">‍</div>
|
||||
<table style="width: 100%; font-weight: 700;" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr style="line-height: 32px">
|
||||
<td style="width: 4px; padding-right: 16px">
|
||||
x
|
||||
</td>
|
||||
<td style="width: 288px">
|
||||
/
|
||||
</td>
|
||||
<td style="width: fit-content; text-align: right; font-size: 13px; color: #2e8a37">
|
||||
20%
|
||||
</td>
|
||||
<td style="width: fit-content; text-align: right;">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin: 16px 0 0; text-align: right; font-size: 15px; font-weight: 700">
|
||||
<a href="/" style="color: #696969;">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="separator">
|
||||
<td style="line-height: 20px">‍</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border-radius: 8px; background-color: #ffffff; padding: 24px; font-size: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<h3 style="margin: 0; padding: 0;">
|
||||
Most viewed pages
|
||||
</h3>
|
||||
<p style="margin: 0; padding-top: 4px; padding-bottom: 4px; font-size: 14px; color: #696969;">Compared vs. previous week</p>
|
||||
<div role="separator" style="line-height: 24px">‍</div>
|
||||
<table style="width: 100%; font-weight: 700;" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr style="line-height: 24px">
|
||||
<th style="text-align: left; font-size: 14px; font-weight: 400">
|
||||
Page
|
||||
</th>
|
||||
<th style="text-align: right; font-size: 14px; font-weight: 400;">
|
||||
Pageviews
|
||||
</th>
|
||||
</tr>
|
||||
<tr style="line-height: 32px;">
|
||||
<td>
|
||||
/
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="line-height: 32px;">
|
||||
<td>
|
||||
/url/
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
19
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin: 16px 0 0; text-align: right; font-size: 15px; font-weight: 700;">
|
||||
<a href="/" style="color: #696969;">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="separator">
|
||||
<td style="line-height: 20px;">‍</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border-radius: 8px; background-color: #ffffff; padding: 24px; font-size: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<h3 style="margin: 0; padding: 0;">
|
||||
Top referrers
|
||||
</h3>
|
||||
<p style="margin: 0; padding-top: 4px; padding-bottom: 4px; font-size: 14px; color: #696969;">Compared vs. previous week</p>
|
||||
<div role="separator" style="line-height: 24px">‍</div>
|
||||
<table style="width: 100%; font-weight: 700;" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr style="line-height: 24px;">
|
||||
<th style="text-align: left; font-size: 14px; font-weight: 400;">
|
||||
Page
|
||||
</th>
|
||||
<th style="text-align: right; font-size: 14px; font-weight: 400;">
|
||||
Pageviews
|
||||
</th>
|
||||
</tr>
|
||||
<tr style="line-height: 32px;">
|
||||
<td>
|
||||
/
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="line-height: 32px;">
|
||||
<td>
|
||||
/url/
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
19
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin: 16px 0 0; text-align: right; font-size: 15px; font-weight: 700;">
|
||||
<a href="/" style="color: #696969;">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="separator">
|
||||
<td style="line-height: 20px;">‍</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border-radius: 8px; background-color: #ffffff; padding: 24px; font-size: 16px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<h3 style="margin: 0; padding: 0;">
|
||||
Top viewing countries
|
||||
</h3>
|
||||
<p style="margin: 0; padding-top: 4px; padding-bottom: 4px; font-size: 14px; color: #696969;">Compared vs. previous week</p>
|
||||
<div role="separator" style="line-height: 24px">‍</div>
|
||||
<table style="width: 100%; font-weight: 700;" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr style="line-height: 24px;">
|
||||
<th style="text-align: left; font-size: 14px; font-weight: 400;">
|
||||
Page
|
||||
</th>
|
||||
<th style="text-align: right; font-size: 14px; font-weight: 400;">
|
||||
Pageviews
|
||||
</th>
|
||||
</tr>
|
||||
<tr style="line-height: 32px;">
|
||||
<td>
|
||||
/
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="line-height: 32px;">
|
||||
<td>
|
||||
/url/
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
19
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p style="margin: 16px 0 0; text-align: right; font-size: 15px; font-weight: 700;">
|
||||
<a href="/" style="color: #696969;">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="separator">
|
||||
<td style="line-height: 20px;">‍</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px">
|
||||
<h2>
|
||||
Discover all insights
|
||||
</h2>
|
||||
<p style="font-size: 16px; line-height: 24px; color: #333;">
|
||||
Dive deeper into your analytics and uncover new opportunities for {domain}.
|
||||
</p>
|
||||
<p style="margin: 0 0 16px; text-transform: uppercase"></p>
|
||||
<div>
|
||||
<a href="https://maizzle.com" style="display: inline-block; border-radius: 4px; background-color: #007cba; padding: 16px 24px; font-size: 16px; font-weight: 600; line-height: 1; color: #ffffff; text-decoration: none">
|
||||
<!--[if mso]>
|
||||
<i style="mso-font-width: 150%; mso-text-raise: 30px" hidden> </i>
|
||||
<![endif]-->
|
||||
<span style="mso-text-raise: 16px">
|
||||
Explore your insights →
|
||||
</span>
|
||||
<!--[if mso]>
|
||||
<i hidden style="mso-font-width: 150%;"> ​</i>
|
||||
<![endif]-->
|
||||
</a>
|
||||
</div>
|
||||
<p></p>
|
||||
<div role="separator" style="background-color: #a6a6a8; height: 1px; line-height: 1px; margin: 32px 0">‍</div>
|
||||
<p style="margin: 0; font-style: italic; line-height: 18px">
|
||||
This e-mail is sent from your own Wordpress website: {domain}. If you don't want to receive these
|
||||
e-mails in your inbox.
|
||||
Please go to the Burst settings page on your website and disable the email report setting or contact
|
||||
the administrator of your website.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
/** @type {import('@maizzle/framework').Config} */
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------------------------
|
||||
| Development config https://maizzle.com/docs/environments
|
||||
|-------------------------------------------------------------------------------
|
||||
|
|
||||
| The exported object contains the default Maizzle settings for development.
|
||||
| This is used when you run `maizzle build` or `maizzle serve` and it has
|
||||
| the fastest build time, since most transformations are disabled.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
build: {
|
||||
templates: {
|
||||
source: 'src/templates',
|
||||
destination: {
|
||||
path: 'build_local'
|
||||
},
|
||||
assets: {
|
||||
source: 'src/images',
|
||||
destination: 'images'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
/** @type {import('@maizzle/framework').Config} */
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------------------------
|
||||
| Production config https://maizzle.com/docs/environments
|
||||
|-------------------------------------------------------------------------------
|
||||
|
|
||||
| This is where you define settings that optimize your emails for production.
|
||||
| These will be merged on top of the base config.js, so you only need to
|
||||
| specify the options that are changing.
|
||||
|
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
build: {
|
||||
templates: {
|
||||
destination: {
|
||||
path: 'build_production'
|
||||
}
|
||||
}
|
||||
},
|
||||
inlineCSS: true,
|
||||
removeUnusedCSS: true,
|
||||
shorthandCSS: true,
|
||||
prettify: true
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
<script props>
|
||||
module.exports = {
|
||||
align: {
|
||||
left: 'text-left',
|
||||
center: 'text-center',
|
||||
right: 'text-right',
|
||||
}[props.align],
|
||||
href: props.href,
|
||||
msoPt: props['mso-pt'] || '16px',
|
||||
msoPb: props['mso-pb'] || '30px',
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="{{ align }}">
|
||||
<a
|
||||
attributes
|
||||
href="{{ href }}"
|
||||
class="inline-block py-4 px-6 text-base leading-none font-semibold rounded text-slate-50 bg-indigo-700 [text-decoration:none]"
|
||||
>
|
||||
<outlook>
|
||||
<i class="mso-font-width-[150%]" style="mso-text-raise: {{ msoPb }};" hidden> </i>
|
||||
</outlook>
|
||||
<span style="mso-text-raise: {{ msoPt }}"><content /></span>
|
||||
<outlook>
|
||||
<i class="mso-font-width-[150%]" hidden> ​</i>
|
||||
</outlook>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script props>
|
||||
// https://maizzle.com/docs/components/divider
|
||||
module.exports = {
|
||||
height: props.height || '1px',
|
||||
color: props.color, // any CSS color value
|
||||
top: props.top, // top margin
|
||||
bottom: props.bottom, // bottom margin
|
||||
left: props.left, // left margin
|
||||
right: props.right, // right margin
|
||||
spaceY: props['space-y'] || '24px', // top and bottom margin
|
||||
spaceX: props['space-x'], // right and left margin
|
||||
hasBgClass: props.class && props.class.split(' ').some(c => c.startsWith('bg-')),
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
role="separator"
|
||||
class="{{ (!color && !hasBgClass) && 'bg-slate-300' }}"
|
||||
style="height: {{ height }};
|
||||
line-height: {{ height }};
|
||||
{{ color && `background-color: ${color}` }};
|
||||
margin: 0;
|
||||
{{ spaceY && `margin-top: ${spaceY}; margin-bottom: ${spaceY}` }};
|
||||
{{ spaceX && `margin-left: ${spaceX}; margin-right: ${spaceX}` }};
|
||||
{{ top && `margin-top: ${top}` }};
|
||||
{{ bottom && `margin-bottom: ${bottom}` }};
|
||||
{{ left && `margin-left: ${left}` }};
|
||||
{{ right && `margin-right: ${right}` }};
|
||||
"
|
||||
>‍</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script props>
|
||||
// https://maizzle.com/docs/components/spacer
|
||||
module.exports = {
|
||||
height: props.height,
|
||||
msoHeight: props['mso-height'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<if condition="height">
|
||||
<div
|
||||
attributes
|
||||
role="separator"
|
||||
style="{{ height && `line-height: ${height}` }};
|
||||
{{ msoHeight && `mso-line-height-alt: ${msoHeight}` }};
|
||||
"
|
||||
>‍</div>
|
||||
</if>
|
||||
<else>
|
||||
<div role="separator">‍</div>
|
||||
</else>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script props>
|
||||
module.exports = {
|
||||
width: props.width || '600px',
|
||||
image: props.image || 'https://via.placeholder.com/600x400'
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--[if mso]>
|
||||
<v:rect stroke="f" fillcolor="none" style="width: {{ width }}" xmlns:v="urn:schemas-microsoft-com:vml">
|
||||
<v:fill type="frame" src="{{{ image }}}" />
|
||||
<v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text: true"><div><![endif]-->
|
||||
<content />
|
||||
<!--[if mso]></div></v:textbox></v:rect><![endif]-->
|
||||
@@ -0,0 +1,14 @@
|
||||
<script props>
|
||||
module.exports = {
|
||||
width: props.width || '600px',
|
||||
height: props.height || '400px',
|
||||
image: props.image || 'https://via.placeholder.com/600x400'
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--[if mso]>
|
||||
<v:image src="{{{ image }}}" style="width: {{ width }}; height: {{ height }};" xmlns:v="urn:schemas-microsoft-com:vml" />
|
||||
<v:rect fill="f" stroke="f" style="position: absolute; width: {{ width }}; height: {{ height }};" xmlns:v="urn:schemas-microsoft-com:vml">
|
||||
<v:textbox inset="0,0,0,0"><div><![endif]-->
|
||||
<content />
|
||||
<!--[if mso]></div></v:textbox></v:rect><![endif]-->
|
||||
@@ -0,0 +1,12 @@
|
||||
/*
|
||||
* Here is where you can add your global email CSS resets.
|
||||
*
|
||||
* We use a custom, email-specific CSS reset, instead
|
||||
* of Tailwind's web-optimized `base` layer.
|
||||
*
|
||||
* Styles defined here will be inlined.
|
||||
*/
|
||||
|
||||
img {
|
||||
@apply max-w-full leading-none align-middle;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/* Your custom CSS resets for email */
|
||||
@import "resets";
|
||||
|
||||
/* Tailwind CSS components */
|
||||
@import "tailwindcss/components";
|
||||
|
||||
/**
|
||||
* @import here any custom CSS components - that is, CSS that
|
||||
* you'd want loaded before the Tailwind utilities, so the
|
||||
* utilities can still override them.
|
||||
*/
|
||||
|
||||
/* Tailwind CSS utility classes */
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
/* Your custom utility classes */
|
||||
@import "utilities";
|
||||
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
* Here is where you can define your custom utility classes.
|
||||
*
|
||||
* We wrap them in the `utilities` @layer directive, so
|
||||
* that Tailwind moves them to the correct location.
|
||||
*
|
||||
* More info:
|
||||
* https://tailwindcss.com/docs/functions-and-directives#layer
|
||||
*/
|
||||
|
||||
@layer utilities {
|
||||
.break-word {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE {{{ page.doctype || 'html' }}}>
|
||||
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
|
||||
<head>
|
||||
<meta charset="{{ page.charset || 'utf-8' }}">
|
||||
<meta name="x-apple-disable-message-reformatting">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="supported-color-schemes" content="light dark">
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<style>
|
||||
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<if condition="page.title">
|
||||
<title>{{{ page.title }}}</title>
|
||||
</if>
|
||||
<style>
|
||||
{{{ page.css }}}
|
||||
</style>
|
||||
<stack name="head" />
|
||||
</head>
|
||||
<body class="m-0 p-0 w-full [word-break:break-word] [-webkit-font-smoothing:antialiased] {{ page.bodyClass || '' }}">
|
||||
<if condition="page.preheader">
|
||||
<div class="hidden">
|
||||
{{{ page.preheader }}}
|
||||
<each loop="item in Array.from(Array(150))"> ͏ </each>
|
||||
</div>
|
||||
</if>
|
||||
<div role="article" aria-roledescription="email" aria-label="{{{ page.title || '' }}}" lang="{{ page.language || 'en' }}">
|
||||
<content />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
---
|
||||
title: "You're weekly insights for
|
||||
{domain}
|
||||
are here!"
|
||||
preheader: "Here's your quick overview"
|
||||
bodyClass: bg-grey-100
|
||||
---
|
||||
|
||||
<x-main>
|
||||
<div class="bg-grey-100 text-black font-sans">
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td class="w-[552px] max-w-full">
|
||||
<div class="my-12 sm:my-8 text-center">
|
||||
<img src="images/maizzle.png" width="70" alt="Logo">
|
||||
</div>
|
||||
<h1 class="text-center text-black font-normal text-2xl">
|
||||
You're weekly insights for <br/>
|
||||
<span class="text-3xl font-bold">{domain}</span> <br/>
|
||||
are here!
|
||||
</h1>
|
||||
<h2 class="text-center m-0 mt-8 text-base font-normal text-gray-600">
|
||||
Here's your quick overview:
|
||||
</h2>
|
||||
|
||||
<table class="w-full p-6">
|
||||
<!-- First block - Compare -->
|
||||
<tr>
|
||||
<td class="p-6 text-base text-slate-700 bg-white rounded-lg shadow-sm">
|
||||
<h3 class="p-0 m-0">
|
||||
Compare
|
||||
</h3>
|
||||
<p class="py-1 m-0 text-sm text-grey-800">vs. previous week</p>
|
||||
|
||||
<x-spacer height="24px"/>
|
||||
<table class="font-bold text-l w-full">
|
||||
<tr class="leading-8">
|
||||
<td class="w-1 pr-4">
|
||||
x
|
||||
</td>
|
||||
<td class="w-72">
|
||||
/
|
||||
</td>
|
||||
<td class="text-right w-fit text-green text-2xs">
|
||||
20%
|
||||
</td>
|
||||
<td class="text-right w-fit">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="m-0 mt-4 text-right text-2sm font-bold">
|
||||
<a href="/" class="text-grey-800 text-md">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr role="separator">
|
||||
<td class="leading-5">‍</td>
|
||||
</tr>
|
||||
<!-- Second block - Most viewed -->
|
||||
<tr>
|
||||
<td class="p-6 text-base text-slate-700 bg-white rounded-lg shadow-sm">
|
||||
<h3 class="p-0 m-0">
|
||||
Most viewed pages
|
||||
</h3>
|
||||
<p class="py-1 m-0 text-sm text-grey-800">Compared vs. previous week</p>
|
||||
|
||||
<x-spacer height="24px"/>
|
||||
|
||||
<table class="font-bold text-l w-full">
|
||||
<tr class="leading-6">
|
||||
<th class="font-normal text-sm text-left">
|
||||
Page
|
||||
</th>
|
||||
<th class="font-normal text-sm text-right">
|
||||
Pageviews
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr class="leading-8">
|
||||
<td>
|
||||
/
|
||||
</td>
|
||||
<td class="text-right">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="leading-8">
|
||||
<td>
|
||||
/url/
|
||||
</td>
|
||||
<td class="text-right">
|
||||
19
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p class="m-0 mt-4 text-right text-2sm font-bold">
|
||||
<a href="/" class="text-grey-800 text-md">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr role="separator">
|
||||
<td class="leading-5">‍</td>
|
||||
</tr>
|
||||
<!-- Third block - Top referrers -->
|
||||
<tr>
|
||||
<td class="p-6 text-base text-slate-700 bg-white rounded-lg shadow-sm">
|
||||
<h3 class="p-0 m-0">
|
||||
Top referrers
|
||||
</h3>
|
||||
<p class="py-1 m-0 text-sm text-grey-800">Compared vs. previous week</p>
|
||||
|
||||
<x-spacer height="24px"/>
|
||||
|
||||
<table class="font-bold text-l w-full">
|
||||
<tr class="leading-6">
|
||||
<th class="font-normal text-sm text-left">
|
||||
Page
|
||||
</th>
|
||||
<th class="font-normal text-sm text-right">
|
||||
Pageviews
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr class="leading-8">
|
||||
<td>
|
||||
/
|
||||
</td>
|
||||
<td class="text-right">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="leading-8">
|
||||
<td>
|
||||
/url/
|
||||
</td>
|
||||
<td class="text-right">
|
||||
19
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<p class="m-0 mt-4 text-right text-2sm font-bold">
|
||||
<a href="/" class="text-grey-800 text-md">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr role="separator">
|
||||
<td class="leading-5">‍</td>
|
||||
</tr>
|
||||
<!-- Fourth block - Top countries -->
|
||||
<tr>
|
||||
<td class="p-6 text-base text-slate-700 bg-white rounded-lg shadow-sm">
|
||||
<h3 class="p-0 m-0">
|
||||
Top viewing countries
|
||||
</h3>
|
||||
<p class="py-1 m-0 text-sm text-grey-800">Compared vs. previous week</p>
|
||||
|
||||
<x-spacer height="24px"/>
|
||||
|
||||
<table class="font-bold text-l w-full">
|
||||
<tr class="leading-6">
|
||||
<th class="font-normal text-sm text-left">
|
||||
Page
|
||||
</th>
|
||||
<th class="font-normal text-sm text-right">
|
||||
Pageviews
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
<tr class="leading-8">
|
||||
<td>
|
||||
/
|
||||
</td>
|
||||
<td class="text-right">
|
||||
20
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr class="leading-8">
|
||||
<td>
|
||||
/url/
|
||||
</td>
|
||||
<td class="text-right">
|
||||
19
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p class="m-0 mt-4 text-right text-2sm font-bold">
|
||||
<a href="/" class="text-grey-800 text-md">
|
||||
See full report
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr role="separator">
|
||||
<td class="leading-5">‍</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="text-center text-slate-600 text-xs px-6">
|
||||
<h2>
|
||||
Discover all insights
|
||||
</h2>
|
||||
<p class="text-black text-base leading-6">
|
||||
Dive deeper into your analytics and uncover new opportunities for {domain}.
|
||||
</p>
|
||||
<p class="m-0 mb-4 uppercase">
|
||||
<x-button class="bg-wpBlue text-white" href="https://maizzle.com">
|
||||
Explore your insights →
|
||||
</x-button>
|
||||
</p>
|
||||
|
||||
<!-- <x-spacer height="24px" />-->
|
||||
|
||||
<x-divider space-y="32px" class="bg-grey-500"/>
|
||||
|
||||
<p class="m-0 leading-4.5 italic">
|
||||
This e-mail is sent from your own Wordpress website: {domain}. If you don't want to receive these
|
||||
e-mails in your inbox.
|
||||
Please go to the Burst settings page on your website and disable the email report setting or contact
|
||||
the administrator of your website.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</x-main>
|
||||
@@ -0,0 +1,175 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
theme: {
|
||||
screens: {
|
||||
sm: {max: '600px'},
|
||||
xs: {max: '425px'}
|
||||
},
|
||||
colors: {
|
||||
wpGray: '#f0f0f1',
|
||||
white: '#ffffff',
|
||||
black: '#333',
|
||||
yellow: '#f4bf3e',
|
||||
blue: '#009fff',
|
||||
darkBlue: '#1E73BE',
|
||||
green: '#2e8a37',
|
||||
red: '#D7263D',
|
||||
pink: '#E35899',
|
||||
orange: '#f39c12',
|
||||
wpBlue: '#007cba',
|
||||
yellowFaded: '#fdf4df',
|
||||
blueFaded: '#ecf8fe',
|
||||
darkBlueFaded: '#ebf2f9',
|
||||
greenFaded: '#ecf4ed',
|
||||
redFaded: '#fbebed',
|
||||
pinkFaded: '#fceff5',
|
||||
orangeFaded: '#fef5ea',
|
||||
wpBlueFaded: '#c6e0ef',
|
||||
grey: {
|
||||
100: '#f0f0f1',
|
||||
200: '#f7f7f7',
|
||||
300: '#ededed',
|
||||
400: '#f0f0f1',
|
||||
500: '#a6a6a8',
|
||||
600: '#8c8c8e',
|
||||
700: '#737373',
|
||||
800: '#696969',
|
||||
900: '#404041'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
none: '0px',
|
||||
sm: '5px',
|
||||
DEFAULT: '8px',
|
||||
lg: '12px'
|
||||
},
|
||||
extend: {
|
||||
spacing: {
|
||||
screen: '100vw',
|
||||
full: '100%',
|
||||
0: '0',
|
||||
0.5: '2px',
|
||||
1: '4px',
|
||||
1.5: '6px',
|
||||
2: '8px',
|
||||
2.5: '10px',
|
||||
3: '12px',
|
||||
3.5: '14px',
|
||||
4: '16px',
|
||||
4.5: '18px',
|
||||
5: '20px',
|
||||
5.5: '22px',
|
||||
6: '24px',
|
||||
6.5: '26px',
|
||||
7: '28px',
|
||||
7.5: '30px',
|
||||
8: '32px',
|
||||
8.5: '34px',
|
||||
9: '36px',
|
||||
9.5: '38px',
|
||||
10: '40px',
|
||||
11: '44px',
|
||||
12: '48px',
|
||||
14: '56px',
|
||||
16: '64px',
|
||||
20: '80px',
|
||||
24: '96px',
|
||||
28: '112px',
|
||||
32: '128px',
|
||||
36: '144px',
|
||||
40: '160px',
|
||||
44: '176px',
|
||||
48: '192px',
|
||||
52: '208px',
|
||||
56: '224px',
|
||||
60: '240px',
|
||||
64: '256px',
|
||||
72: '288px',
|
||||
80: '320px',
|
||||
96: '384px'
|
||||
},
|
||||
borderRadius: {
|
||||
none: '0px',
|
||||
sm: '2px',
|
||||
DEFAULT: '4px',
|
||||
md: '6px',
|
||||
lg: '8px',
|
||||
xl: '12px',
|
||||
'2xl': '16px',
|
||||
'3xl': '24px'
|
||||
},
|
||||
boxShadow: {
|
||||
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
||||
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
|
||||
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
|
||||
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
|
||||
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
|
||||
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [ 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif' ],
|
||||
serif: [ 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif' ],
|
||||
mono: [ 'ui-monospace', 'Menlo', 'Consolas', 'monospace' ]
|
||||
},
|
||||
fontSize: {
|
||||
0: '0',
|
||||
xxs: '11px',
|
||||
xs: '12px',
|
||||
'2xs': '13px',
|
||||
sm: '14px',
|
||||
'2sm': '15px',
|
||||
base: '16px',
|
||||
lg: '18px',
|
||||
xl: '20px',
|
||||
'2xl': '24px',
|
||||
'3xl': '30px',
|
||||
'4xl': '36px',
|
||||
'5xl': '48px',
|
||||
'6xl': '60px',
|
||||
'7xl': '72px',
|
||||
'8xl': '96px',
|
||||
'9xl': '128px'
|
||||
},
|
||||
letterSpacing: theme => ({
|
||||
...theme( 'width' )
|
||||
}),
|
||||
lineHeight: theme => ({
|
||||
...theme( 'width' )
|
||||
}),
|
||||
maxWidth: theme => ({
|
||||
...theme( 'width' ),
|
||||
xs: '160px',
|
||||
sm: '192px',
|
||||
md: '224px',
|
||||
lg: '256px',
|
||||
xl: '288px',
|
||||
'2xl': '336px',
|
||||
'3xl': '384px',
|
||||
'4xl': '448px',
|
||||
'5xl': '512px',
|
||||
'6xl': '576px',
|
||||
'7xl': '640px'
|
||||
}),
|
||||
minHeight: theme => ({
|
||||
...theme( 'width' )
|
||||
}),
|
||||
minWidth: theme => ({
|
||||
...theme( 'width' )
|
||||
})
|
||||
}
|
||||
},
|
||||
corePlugins: {
|
||||
preflight: false,
|
||||
backgroundOpacity: false,
|
||||
borderOpacity: false,
|
||||
divideOpacity: false,
|
||||
placeholderOpacity: false,
|
||||
textOpacity: false
|
||||
},
|
||||
plugins: [
|
||||
require( 'tailwindcss-mso' ),
|
||||
require( 'tailwindcss-box-shadow' ),
|
||||
require( 'tailwindcss-email-variants' )
|
||||
]
|
||||
};
|
||||
Reference in New Issue
Block a user