diff --git a/demo/dist/dark/signature-dark.html b/demo/dist/dark/signature-dark.html new file mode 100644 index 0000000..5e709c4 --- /dev/null +++ b/demo/dist/dark/signature-dark.html @@ -0,0 +1 @@ +
Best regards,
The dark mail team
dark logo
LED Pylon. LED Wall. Digital Signage.
Call (45) 80100100 or email us at info@dark.dk
\ No newline at end of file diff --git a/demo/dist/dark/signature-reply-dark.html b/demo/dist/dark/signature-reply-dark.html new file mode 100644 index 0000000..8c0d576 --- /dev/null +++ b/demo/dist/dark/signature-reply-dark.html @@ -0,0 +1 @@ +
Best regards,
The dark mail team
\ No newline at end of file diff --git a/demo/dist/light/full-mail-light.html b/demo/dist/light/full-mail-light.html new file mode 100644 index 0000000..75990f9 --- /dev/null +++ b/demo/dist/light/full-mail-light.html @@ -0,0 +1 @@ +
Hi there,
Thanks for writing up this email.
We are delighted to reply with a responsive template.
Yours truly,
The light mail team
Call 80100100 or email us at info@light.dk
Happy Steet 31, DK-8000 Aarhus C, Denmark
light logo
\ No newline at end of file diff --git a/demo/dist/light/signature-light.html b/demo/dist/light/signature-light.html new file mode 100644 index 0000000..177898f --- /dev/null +++ b/demo/dist/light/signature-light.html @@ -0,0 +1 @@ +
Yours truly,
The light mail team
Call 80100100 or email us at info@light.dk
Happy Steet 31, DK-8000 Aarhus C, Denmark
light logo
\ No newline at end of file diff --git a/demo/dist/light/signature-reply-light.html b/demo/dist/light/signature-reply-light.html new file mode 100644 index 0000000..17e3287 --- /dev/null +++ b/demo/dist/light/signature-reply-light.html @@ -0,0 +1 @@ +
Yours truly,
The light mail team
\ No newline at end of file diff --git a/demo/examples/ONEstore/assets/fadeit-logo.png b/demo/examples/ONEstore/assets/fadeit-logo.png new file mode 100644 index 0000000..1d61548 Binary files /dev/null and b/demo/examples/ONEstore/assets/fadeit-logo.png differ diff --git a/demo/examples/ONEstore/assets/type01.png b/demo/examples/ONEstore/assets/type01.png new file mode 100644 index 0000000..0d69c65 Binary files /dev/null and b/demo/examples/ONEstore/assets/type01.png differ diff --git a/demo/examples/ONEstore/conf.json b/demo/examples/ONEstore/conf.json new file mode 100644 index 0000000..de85acf --- /dev/null +++ b/demo/examples/ONEstore/conf.json @@ -0,0 +1,18 @@ +{ + "persons": [ + { + "id": "ONEstore", + "name": "0 0 0 매니저", + "team": "스토어 기획팀", + "title": "Dev Relations", + "welcome": "안녕하세요.", + "introParagraph": "Thanks for writing up this email.
We are delighted to reply with a responsive template.", + "contactMain": "+82-10-1234-5678 | ", + "contactMail": "devhelper@onestore.co.kr", + "contactSecondary": "성남시 분당구 판교역로 188 SK플래닛 건물 11층", + "logoUrl": "assets/type01.png", + "logoAlt": "Onestore logo", + "website": "http://onesto.re/" + } + ] +} diff --git a/demo/examples/ONEstore/fadeit.css b/demo/examples/ONEstore/fadeit.css new file mode 100644 index 0000000..2b91a8a --- /dev/null +++ b/demo/examples/ONEstore/fadeit.css @@ -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; +} \ No newline at end of file diff --git a/demo/examples/ONEstore/footer.inc.html b/demo/examples/ONEstore/footer.inc.html new file mode 100644 index 0000000..43e0245 --- /dev/null +++ b/demo/examples/ONEstore/footer.inc.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + +
+ |
+
+
+
+ +
+ + + +
+ +
+ + + + + +
+ + <!-- @echo logoAlt -->
+ +
+ + + \ No newline at end of file diff --git a/demo/examples/ONEstore/full-mail.html b/demo/examples/ONEstore/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/demo/examples/ONEstore/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/demo/examples/ONEstore/head.inc.html b/demo/examples/ONEstore/head.inc.html new file mode 100644 index 0000000..5a6305e --- /dev/null +++ b/demo/examples/ONEstore/head.inc.html @@ -0,0 +1,34 @@ + + + + + + + + + + \ No newline at end of file diff --git a/demo/examples/ONEstore/signature-reply.html b/demo/examples/ONEstore/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/demo/examples/ONEstore/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/demo/examples/ONEstore/signature.html b/demo/examples/ONEstore/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/demo/examples/ONEstore/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+ diff --git a/demo/examples/ONEstoreBlack/assets/logo.png b/demo/examples/ONEstoreBlack/assets/logo.png new file mode 100644 index 0000000..587c07d Binary files /dev/null and b/demo/examples/ONEstoreBlack/assets/logo.png differ diff --git a/demo/examples/ONEstoreBlack/assets/play-logo.png b/demo/examples/ONEstoreBlack/assets/play-logo.png new file mode 100644 index 0000000..83e17b7 Binary files /dev/null and b/demo/examples/ONEstoreBlack/assets/play-logo.png differ diff --git a/demo/examples/ONEstoreBlack/assets/type03.png b/demo/examples/ONEstoreBlack/assets/type03.png new file mode 100644 index 0000000..ee2db4e Binary files /dev/null and b/demo/examples/ONEstoreBlack/assets/type03.png differ diff --git a/demo/examples/ONEstoreBlack/conf.json b/demo/examples/ONEstoreBlack/conf.json new file mode 100644 index 0000000..1af210b --- /dev/null +++ b/demo/examples/ONEstoreBlack/conf.json @@ -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.
We are delighted to reply with a responsive template.", + "contactMain": "Call +82-10-1234-5678 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/" + } + ] +} diff --git a/demo/examples/ONEstoreBlack/footer.inc.html b/demo/examples/ONEstoreBlack/footer.inc.html new file mode 100644 index 0000000..3f79328 --- /dev/null +++ b/demo/examples/ONEstoreBlack/footer.inc.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + +
+
+
+ | +
+ + +
+ + <!-- @echo logoAlt --> + +
+ + + + +
+ +
+ address: +
+ + + \ No newline at end of file diff --git a/demo/examples/ONEstoreBlack/full-mail.html b/demo/examples/ONEstoreBlack/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/demo/examples/ONEstoreBlack/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/demo/examples/ONEstoreBlack/head.inc.html b/demo/examples/ONEstoreBlack/head.inc.html new file mode 100644 index 0000000..2197a50 --- /dev/null +++ b/demo/examples/ONEstoreBlack/head.inc.html @@ -0,0 +1,42 @@ + + + + + + + + + + \ No newline at end of file diff --git a/demo/examples/ONEstoreBlack/play.css b/demo/examples/ONEstoreBlack/play.css new file mode 100644 index 0000000..5cb61d3 --- /dev/null +++ b/demo/examples/ONEstoreBlack/play.css @@ -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; +} \ No newline at end of file diff --git a/demo/examples/ONEstoreBlack/signature-reply.html b/demo/examples/ONEstoreBlack/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/demo/examples/ONEstoreBlack/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/demo/examples/ONEstoreBlack/signature.html b/demo/examples/ONEstoreBlack/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/demo/examples/ONEstoreBlack/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+ diff --git a/demo/examples/fadeit/assets/fadeit-logo.png b/demo/examples/fadeit/assets/fadeit-logo.png new file mode 100644 index 0000000..1d61548 Binary files /dev/null and b/demo/examples/fadeit/assets/fadeit-logo.png differ diff --git a/demo/examples/fadeit/conf.json b/demo/examples/fadeit/conf.json new file mode 100644 index 0000000..829694e --- /dev/null +++ b/demo/examples/fadeit/conf.json @@ -0,0 +1,17 @@ +{ + "persons": [ + { + "id": "fadeit", + "signature": "Yours truly,", + "name": "Jane Whatsmyname", + "welcome": "Hi there,", + "introParagraph": "Thanks for writing up this email.
We are delighted to reply with a responsive template.", + "contactMain": "Call 81100200 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" + } + ] +} \ No newline at end of file diff --git a/demo/examples/fadeit/fadeit.css b/demo/examples/fadeit/fadeit.css new file mode 100644 index 0000000..2b91a8a --- /dev/null +++ b/demo/examples/fadeit/fadeit.css @@ -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; +} \ No newline at end of file diff --git a/demo/examples/fadeit/footer.inc.html b/demo/examples/fadeit/footer.inc.html new file mode 100644 index 0000000..0ce5e38 --- /dev/null +++ b/demo/examples/fadeit/footer.inc.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + +
+
+
+
+
+ +
+ + + +
+ +
+ + + + + +
+ + <!-- @echo logoAlt --> + +
+ + + \ No newline at end of file diff --git a/demo/examples/fadeit/full-mail.html b/demo/examples/fadeit/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/demo/examples/fadeit/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/demo/examples/fadeit/head.inc.html b/demo/examples/fadeit/head.inc.html new file mode 100644 index 0000000..5a6305e --- /dev/null +++ b/demo/examples/fadeit/head.inc.html @@ -0,0 +1,34 @@ + + + + + + + + + + \ No newline at end of file diff --git a/demo/examples/fadeit/signature-reply.html b/demo/examples/fadeit/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/demo/examples/fadeit/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/demo/examples/fadeit/signature.html b/demo/examples/fadeit/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/demo/examples/fadeit/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+ diff --git a/demo/examples/play/assets/play-logo.png b/demo/examples/play/assets/play-logo.png new file mode 100644 index 0000000..83e17b7 Binary files /dev/null and b/demo/examples/play/assets/play-logo.png differ diff --git a/demo/examples/play/conf.json b/demo/examples/play/conf.json new file mode 100644 index 0000000..064d28a --- /dev/null +++ b/demo/examples/play/conf.json @@ -0,0 +1,15 @@ +{ + "persons": [ + { + "id": "play", + "signature": "Best regards,", + "name": "Jane Whatsmyname", + "contactMain": "Call (45) 81100200 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" + } + ] +} diff --git a/demo/examples/play/footer.inc.html b/demo/examples/play/footer.inc.html new file mode 100644 index 0000000..c70f880 --- /dev/null +++ b/demo/examples/play/footer.inc.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + + +
+
+
+
+ + +
+ + <!-- @echo logoAlt --> + +
+ + + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/demo/examples/play/head.inc.html b/demo/examples/play/head.inc.html new file mode 100644 index 0000000..2197a50 --- /dev/null +++ b/demo/examples/play/head.inc.html @@ -0,0 +1,42 @@ + + + + + + + + + + \ No newline at end of file diff --git a/demo/examples/play/play.css b/demo/examples/play/play.css new file mode 100644 index 0000000..5cb61d3 --- /dev/null +++ b/demo/examples/play/play.css @@ -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; +} \ No newline at end of file diff --git a/demo/examples/play/signature-reply.html b/demo/examples/play/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/demo/examples/play/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/demo/examples/play/signature.html b/demo/examples/play/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/demo/examples/play/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+ diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..e69de29