mshillam
/
responsive-html-email-signature
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove examples

This commit is contained in:
Dan Mindru 2017-02-07 23:45:02 +01:00
parent 3348ad9dc1
commit 090b3f03ed
34 changed files with 0 additions and 1261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
examples/ONEstore/assets/fadeit-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

BIN
examples/ONEstore/assets/type01.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

18
examples/ONEstore/conf.json
View File

@ -1,18 +0,0 @@
{
"persons": [
{
"id": "ONEstore",
"name": "0 0 0 매니저",
"team": "스토어 기획팀",
"title": "Dev Relations",
"welcome": "안녕하세요.",
"introParagraph": "Thanks for writing up this email.<br/> We are delighted to reply with a responsive template.",
"contactMain": "<a href='tel:+821012345678'><span>+82-10-1234-5678</span></a> | ",
"contactMail": "devhelper@onestore.co.kr",
"contactSecondary": "성남시 분당구 판교역로 188 SK플래닛 건물 11층",
"logoUrl": "assets/type01.png",
"logoAlt": "Onestore logo",
"website": "http://onesto.re/"
}
]
}

160
examples/ONEstore/fadeit.css
View File

@ -1,160 +0,0 @@
/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */
/*
* =====================================
* 1. Common styles for general table things.
* =====================================
*/
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
tr{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
line-height: 20px;
}
.main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #ffffff;
}
.rbcc{
/*
* rbcc -> reset - border - cellspacing - cellpading
*
* Resets table attributes.
*/
border:0;
cellpadding:0;
cellspacing:0;
}
.sp{
/* Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
height: 30px;
}
.gray-hr{
border-bottom:1px solid #E4E4E4;
border-top:none;
margin-bottom:20px;
margin-top:20px;
}
a{
text-decoration: none;
color: #0fade1;
}
/*
* =================
* 2. Content styles.
* ==================
*/
.main__welcome{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 22px;
}
.main__content{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}
/*
* ================
* 3. Footer styles.
* ================
*/
.footer{
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #f5f5f5;
padding: 20px 30px 0px 30px;
color: #888;
border-top: 8px solid #EAEAEA;
}
.footer a{
color: #888;
}
.footer--simple{
padding-bottom: 20px;
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #FFFFFF;
}
.footer__main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
}
.footer__main__signature{
font-size: 14px;
color: #888;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1{
/* @todo gulp-inline-css can't use width in percentages */
width:70%;
margin-bottom:30px;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1__td{
font-size: 14px;
color: #888;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main a > span{
/* Revert apple blue-link style. */
color: #888!important;
text-decoration:none!important;
}
.footer__main__col2{
/* @todo gulp-inline-css can't use width in percentages */
width:30%;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td{
font-size: 14px;
color: #888;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td__img{
border: 0;
padding-top: 6px;
padding-left:10px;
max-width: 100%;
max-height:38px;
height: auto;
}

38
examples/ONEstore/footer.inc.html
View File

@ -1,38 +0,0 @@
<td class="footer" bgcolor="#f5f5f5">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo team --> | <!-- @echo title --><br />
<!-- @echo name --><br />
</td>
</tr>
<tr>
<td width="100%">
<hr class="gray-hr"/></td>
</tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="70%" align="left">
<td class="footer__main__col1__td" align="left">
<strong>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</strong><br />
<!-- @echo contactSecondary -->
</td>
</table>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="30%" align="right">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->">
<img src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/><br />
</a>
</td>
</table>
</tr>
</table>
</td>

25
examples/ONEstore/full-mail.html
View File

@ -1,25 +0,0 @@
<!-- @include head.inc.html -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<body>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="rbcc">
<td class="main__welcome">
<b><!-- @echo welcome --></b>
</td>
</tr>
<tr class="rbcc">
<td class="main__content">
<!-- @echo introParagraph -->
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

34
examples/ONEstore/head.inc.html
View File

@ -1,34 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="fadeit.css">
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style>

23
examples/ONEstore/signature-reply.html
View File

@ -1,23 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer footer--simple" bgcolor="#ffffff">
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

14
examples/ONEstore/signature.html
View File

@ -1,14 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/> <!-- <br/> Makes it easier to add text when composing -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

BIN
examples/ONEstoreBlack/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
examples/ONEstoreBlack/assets/play-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

BIN
examples/ONEstoreBlack/assets/type03.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.9 KiB

19
examples/ONEstoreBlack/conf.json
View File

@ -1,19 +0,0 @@
{
"persons": [
{
"id": "ONEstoreBlack",
"signature": "Best regards,",
"name": "Joo Hyung Park",
"team": "Service Planning Team",
"title": "Dev Relations",
"welcome": "안녕하세요.",
"introParagraph": "Thanks for writing up this email.<br/> We are delighted to reply with a responsive template.",
"contactMain": "Call <a href='tel:+821012345678'><span>+82-10-1234-5678</span></a> or email us at",
"contactMail": "devhelper@onestore.co.kr",
"contactSecondary": "188, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea",
"logoUrl": "assets/type03.png",
"logoAlt": "ONEstore. logo",
"website": "http://onesto.re/"
}
]
}

37
examples/ONEstoreBlack/footer.inc.html
View File

@ -1,37 +0,0 @@
<td class="footer" bgcolor="#303030">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<strong><!-- @echo name --></strong><br />
<strong><!-- @echo team --></strong> | <!-- @echo title -->
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="spd" height="60px"></tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="30%" align="right">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->">
<img src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a>
</td>
</table>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="70%" align="left">
<td class="footer__main__col1__td" align="left">
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a><br/>
address: <a href="http://map.naver.com/?dlevel=11&pinType=site&pinId=35263909&x=127.1100213&y=37.3975215&enc=b64"> <!-- @echo contactSecondary --></a>
</td>
</table>
</tr>
</table>
</td>

25
examples/ONEstoreBlack/full-mail.html
View File

@ -1,25 +0,0 @@
<!-- @include head.inc.html -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<body>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="rbcc">
<td class="main__welcome">
<b><!-- @echo welcome --></b>
</td>
</tr>
<tr class="rbcc">
<td class="main__content">
<!-- @echo introParagraph -->
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

42
examples/ONEstoreBlack/head.inc.html
View File

@ -1,42 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="play.css">
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col1__td{
text-align: left;
}
.footer__main__col1__td > span{
margin-bottom:10px;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style>

174
examples/ONEstoreBlack/play.css
View File

@ -1,174 +0,0 @@
/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */
/*
* =====================================
* 1. Common styles for general table things.
* =====================================
*/
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
tr{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
line-height: 22px;
}
.main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #ffffff;
}
.rbcc{
/*
* rbcc -> reset - border - cellspacing - cellpading
*
* Resets table attributes.
*/
border:0;
cellpadding:0;
cellspacing:0;
}
.sp{
/* sp -> space, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
height: 30px;
}
.spd{
/* spd -> space - double, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
height: 60px;
}
.gray-hr{
border-bottom:1px solid #E4E4E4;
border-top:none;
margin-bottom:20px;
margin-top:20px;
}
a{
text-decoration: none;
color: #0fade1;
}
/*
* =================
* 2. Content styles.
* ==================
*/
.main__welcome{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 22px;
}
.main__content{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}
/*
* ================
* 3. Footer styles.
* ================
*/
.footer{
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #303030;
padding: 20px 30px 0px 30px;
color: #f5f5f5;
border-top: 8px solid #585858;
}
.footer a{
color: #f5f5f5;
}
.footer--simple{
padding-bottom: 20px;
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #FFFFFF;
}
.footer--simple tr td{
color: #888;
}
.footer__main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
}
.footer__main__signature{
font-size: 14px;
color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1{
/* @todo gulp-inline-css can't use width in percentages */
width:70%;
margin-bottom:40px;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1__td{
color: #9E9E9E;
/* @todo gulp-inline-css doesn't parse align */
align:left;
padding-top: 15px;
}
.footer__main__col1__td > span{
font-size:18px;
margin-bottom:5px;
}
.footer__main a > span{
/* Revert apple blue-link style. */
color: #f5f5f5!important;
text-decoration:none!important;
}
.footer__main__col2{
/* @todo gulp-inline-css can't use width in percentages */
width:30%;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td{
font-size: 14px;
color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td__img{
border: 0;
padding-left:20px;
max-width: 100%;
max-height:65px;
height: auto;
}

23
examples/ONEstoreBlack/signature-reply.html
View File

@ -1,23 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer footer--simple" bgcolor="#ffffff">
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

14
examples/ONEstoreBlack/signature.html
View File

@ -1,14 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/> <!-- <br/> Makes it easier to add text when composing -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

BIN
examples/fadeit/assets/fadeit-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

17
examples/fadeit/conf.json
View File

@ -1,17 +0,0 @@
{
"persons": [
{
"id": "fadeit",
"signature": "Yours truly,",
"name": "Jane Whatsmyname",
"welcome": "Hi there,",
"introParagraph": "Thanks for writing up this email.<br/> We are delighted to reply with a responsive template.",
"contactMain": "Call <a href='tel:81100200'><span>81100200</span></a> or email us at",
"contactMail": "info@fadeit.dk",
"contactSecondary": "Anelystparken 31, DK-8381 Tilst, Aarhus",
"logoUrl": "http://fadeit.dk/src/assets/img/brand/fadeit-logo.png",
"logoAlt": "fadeit logo",
"website": "http://fadeit.dk"
}
]
}

160
examples/fadeit/fadeit.css
View File

@ -1,160 +0,0 @@
/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */
/*
* =====================================
* 1. Common styles for general table things.
* =====================================
*/
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
tr{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
line-height: 20px;
}
.main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #ffffff;
}
.rbcc{
/*
* rbcc -> reset - border - cellspacing - cellpading
*
* Resets table attributes.
*/
border:0;
cellpadding:0;
cellspacing:0;
}
.sp{
/* Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
height: 30px;
}
.gray-hr{
border-bottom:1px solid #E4E4E4;
border-top:none;
margin-bottom:20px;
margin-top:20px;
}
a{
text-decoration: none;
color: #0fade1;
}
/*
* =================
* 2. Content styles.
* ==================
*/
.main__welcome{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 22px;
}
.main__content{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}
/*
* ================
* 3. Footer styles.
* ================
*/
.footer{
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #f5f5f5;
padding: 20px 30px 0px 30px;
color: #888;
border-top: 8px solid #EAEAEA;
}
.footer a{
color: #888;
}
.footer--simple{
padding-bottom: 20px;
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #FFFFFF;
}
.footer__main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
}
.footer__main__signature{
font-size: 14px;
color: #888;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1{
/* @todo gulp-inline-css can't use width in percentages */
width:70%;
margin-bottom:30px;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1__td{
font-size: 14px;
color: #888;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main a > span{
/* Revert apple blue-link style. */
color: #888!important;
text-decoration:none!important;
}
.footer__main__col2{
/* @todo gulp-inline-css can't use width in percentages */
width:30%;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td{
font-size: 14px;
color: #888;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td__img{
border: 0;
padding-top: 6px;
padding-left:10px;
max-width: 100%;
max-height:38px;
height: auto;
}

38
examples/fadeit/footer.inc.html
View File

@ -1,38 +0,0 @@
<td class="footer" bgcolor="#f5f5f5">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
<tr>
<td width="100%">
<hr class="gray-hr"/></td>
</tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="70%" align="left">
<td class="footer__main__col1__td" align="left">
<strong>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</strong><br />
<!-- @echo contactSecondary -->
</td>
</table>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="30%" align="right">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->">
<img src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a>
</td>
</table>
</tr>
</table>
</td>

25
examples/fadeit/full-mail.html
View File

@ -1,25 +0,0 @@
<!-- @include head.inc.html -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<body>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="rbcc">
<td class="main__welcome">
<b><!-- @echo welcome --></b>
</td>
</tr>
<tr class="rbcc">
<td class="main__content">
<!-- @echo introParagraph -->
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

34
examples/fadeit/head.inc.html
View File

@ -1,34 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="fadeit.css">
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:480px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style>

23
examples/fadeit/signature-reply.html
View File

@ -1,23 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer footer--simple" bgcolor="#ffffff">
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

14
examples/fadeit/signature.html
View File

@ -1,14 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/> <!-- <br/> Makes it easier to add text when composing -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>

BIN
examples/play/assets/play-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

15
examples/play/conf.json
View File

@ -1,15 +0,0 @@
{
"persons": [
{
"id": "play",
"signature": "Best regards,",
"name": "Jane Whatsmyname",
"contactMain": "Call <a href='tel:004581100200'><span>(45) 81100200</span></a> or email us at",
"contactMail": "info@tryplay.dk",
"slogan": "LED Pylon. LED Wall. Digital Signage.",
"logoUrl": "https://informationscreen.com/manage/assets/images/play-logo.png",
"logoAlt": "Play. logo",
"website": "http://tryplay.dk"
}
]
}

36
examples/play/footer.inc.html
View File

@ -1,36 +0,0 @@
<td class="footer" bgcolor="#303030">
<!-- @todo gulp-inline-css can't use width in percentages -->
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<strong><!-- @echo name --></strong><br />
</td>
</tr>
<!-- @todo gulp-inline-css doesn't add height attrs -->
<tr class="spd" height="60px"></tr>
<tr>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col2" width="30%" align="right">
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__col2__td" align="right">
<a href="<!-- @echo website -->">
<img src="<!-- @echo logoUrl -->" alt="<!-- @echo logoAlt -->" class="footer__main__col2__td__img"/>
</a>
</td>
</table>
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse align -->
<table class="rbcc footer__main__col1" width="70%" align="left">
<td class="footer__main__col1__td" align="left">
<span><!-- @echo slogan --></span><br/>
<!-- @echo contactMain -->
<a href="mailto:<!-- @echo contactMail -->" target="_blank"><!-- @echo contactMail --></a>
</td>
</table>
</tr>
</table>
</td>

42
examples/play/head.inc.html
View File

@ -1,42 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. -->
<link rel="stylesheet" href="play.css">
</head>
<style type="text/css">
/* Responsive stuff goes here (inline css doesn't know what to do with it). */
@media only screen and (max-width:560px){
.footer td{
font-size: 12px!important;
}
.footer__main__col1{
width: 100%!important;
}
.footer__main__col1__td{
text-align: left;
}
.footer__main__col1__td > span{
margin-bottom:10px;
}
.footer__main__col2{
width: 100%!important;
}
.footer__main__col2__td{
text-align: left;
padding-bottom:20px;
}
.footer__main__col2__td__img{
padding-left:0!important;
}
}
</style>

174
examples/play/play.css
View File

@ -1,174 +0,0 @@
/* Solving https://github.com/jonkemp/inline-css/issues/8 would make things nicer. */
/*
* =====================================
* 1. Common styles for general table things.
* =====================================
*/
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
tr{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
font-size: 14px;
line-height: 22px;
}
.main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #ffffff;
}
.rbcc{
/*
* rbcc -> reset - border - cellspacing - cellpading
*
* Resets table attributes.
*/
border:0;
cellpadding:0;
cellspacing:0;
}
.sp{
/* sp -> space, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
height: 30px;
}
.spd{
/* spd -> space - double, Separator tr */
/* @todo gulp-inline-css doesn't add height attrs */
height: 60px;
}
.gray-hr{
border-bottom:1px solid #E4E4E4;
border-top:none;
margin-bottom:20px;
margin-top:20px;
}
a{
text-decoration: none;
color: #0fade1;
}
/*
* =================
* 2. Content styles.
* ==================
*/
.main__welcome{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 22px;
}
.main__content{
color: #000;
padding: 10px 30px 0 30px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}
/*
* ================
* 3. Footer styles.
* ================
*/
.footer{
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #303030;
padding: 20px 30px 0px 30px;
color: #f5f5f5;
border-top: 8px solid #585858;
}
.footer a{
color: #f5f5f5;
}
.footer--simple{
padding-bottom: 20px;
/* @todo gulp-inline-css doesn't parse background-color -> bgcolor */
background-color: #FFFFFF;
}
.footer--simple tr td{
color: #888;
}
.footer__main{
/* @todo gulp-inline-css can't use width in percentages */
/* This style property fucks up the width on OS X, needs to be *JUST* attribute ->
width:100%; */
}
.footer__main__signature{
font-size: 14px;
color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1{
/* @todo gulp-inline-css can't use width in percentages */
width:70%;
margin-bottom:40px;
/* @todo gulp-inline-css doesn't parse align */
align:left;
}
.footer__main__col1__td{
color: #9E9E9E;
/* @todo gulp-inline-css doesn't parse align */
align:left;
padding-top: 15px;
}
.footer__main__col1__td > span{
font-size:18px;
margin-bottom:5px;
}
.footer__main a > span{
/* Revert apple blue-link style. */
color: #f5f5f5!important;
text-decoration:none!important;
}
.footer__main__col2{
/* @todo gulp-inline-css can't use width in percentages */
width:30%;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td{
font-size: 14px;
color: #f5f5f5;
/* @todo gulp-inline-css doesn't parse align */
align:right;
}
.footer__main__col2__td__img{
border: 0;
padding-left:20px;
max-width: 100%;
max-height:65px;
height: auto;
}

23
examples/play/signature-reply.html
View File

@ -1,23 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/>
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<td class="footer footer--simple" bgcolor="#ffffff">
<table class="rbcc footer__main" width="100%">
<tr>
<!-- @todo gulp-inline-css doesn't parse align -->
<td class="footer__main__signature" align="left">
<!-- @echo signature --><br />
<!-- @echo name --><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

14
examples/play/signature.html
View File

@ -1,14 +0,0 @@
<!-- @include head.inc.html -->
<body>
<br/> <!-- <br/> Makes it easier to add text when composing -->
<!-- @todo gulp-inline-css can't use width in percentages, doesn't parse background-color -> bgcolor -->
<table class="main rbcc" width="100%" bgcolor="#ffffff";>
<tr class="sp" height="30px"></tr>
<tr class="rbcc">
<!-- @todo gulp-inline-css doesn't parse background-color -> bgcolor -->
<!-- @include footer.inc.html -->
</tr>
</table>
</body>