Initial commit: Atomaste website
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user