Setup demo
This commit is contained in:
Dan Mindru
parent
18606cff77
commit
cbb3743613
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
<!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"><style type="text/css">@media only screen and (max-width:560px){.footer__main__col1,.footer__main__col2{width:100%!important}.footer td{font-size:12px!important}.footer__main__col1__td{text-align:left}.footer__main__col1__td>span{margin-bottom:10px}.footer__main__col2__td{text-align:left;padding-bottom:20px}.footer__main__col2__td__img{padding-left:0!important}}</style></head><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer footer--simple" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF"><table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Best regards,<br>The dark mail team<br></td></tr></table></td></tr></table></body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
<!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"><style type="text/css">@media only screen and (max-width:480px){.footer td{font-size:12px!important}.footer__main__col1,.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}.gray-hr hr{margin-bottom:10px!important;margin-top:10px!important}}@media only screen and (min-width:1025px){.background,.body-with-bg{background-color:#F1F1F1}.body-with-bg .main{border:1px solid #E9E9E9!important;max-width:960px;margin:0 auto}.background{padding:30px}}</style></head><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0; padding-top: 15px;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer footer--simple" style="border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF"><table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>The light mail team<br></td></tr></table></td></tr></table></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"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/"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
/* 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!-- @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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!-- @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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!-- @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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"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/"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!-- @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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
/* 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!-- @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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!-- @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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
/* 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!-- @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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!-- @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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!-- @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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
/* 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!-- @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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!-- @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>
|
||||
Loading…
Reference in New Issue