diff --git a/README.md b/README.md index 4deedb1..e60d9b9 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,35 @@ $ chflags nouchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature If you are using iCloud drive or having problems with it, you might also want to check [this article](http://matt.coneybeare.me/how-to-make-an-html-signature-in-apple-mail-for-el-capitan-os-x-10-dot-11/). +### Outlook 2010 Client for Windows 7 + +#### Solution 1 +- Open Outlook 2010 and go to `File > Option > Mail > Signature` +- Create new signature (with a placeholder for your convenience) +- Open signature folder using CMD + +> As the AppData folder is hidden, I'd recommend you to opne it via CMD. + +``` +cd AppData\Roamin\Microsoft +start Signatures + +``` + +- Within this folder, find a file named with your placeholder then right click this file and select edit. +- Replace it with your HTML and save +- Open Outlook again and check your signature + + +#### Solution 2 +Unfortnately, Outlook 2010 client dosen't support HTML file import features for your email template. But you can add your own signatures by simple Copy and paste like **Solution 2** above. + +- Open built html file on `/dist` folder and Ctrl A + C +- Open Outlook 2010 and go to `File > Option > Mail > Signature` +- Create new signature and paste copyed one + + +> **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images. ===================
diff --git a/README_kor.md b/README_kor.md new file mode 100644 index 0000000..493a3e6 --- /dev/null +++ b/README_kor.md @@ -0,0 +1,142 @@ +# 반응형 HTML 메일 서명 +### 이메일 클라이언트를 씹어먹자(?!) +이메일 서명 전용 반응형 템플릿
+ +> 모바일에서 잘 동작하는 기본 서명이 필요하신가요?
+> ... 그리고 직장동료들도 필요한가요?
+> ... 근데 지저분하게 테이블이랑 인라인 CSS를 만들기 싫은가요?
+ + +## Preview +본 템플릿의 기본 동작방식은 아래와 같습니다: + +![responsive emails-01](https://cloud.githubusercontent.com/assets/1515742/10591900/13889d32-76b9-11e5-8dc0-b89d80189e93.png) +![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png) + +## 만들게된 동기 (Motivation) +이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다! + +이 [블로그 포스팅](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be)에서 fadeit 의 더 많은 이애기를 들어보세요. + + +## 이 템플릿에서 무엇을 할 수 있나? (What does it do?) +- [x] config-based template generation +- [x] allows generating multiple templates (for your colleagues too!) +- [x] transforms linked (``) CSS into inline styles +- [x] embeds local `img[src]` into the template (base64).* +- [x] minifies the template +- [x] media queries for mail clients that support them +- [x] can build templates from multiple sources +- [x] watches HTML/CSS files for changes and re-builds + +> *일부 이메일 클라이언트는 base64 기반의 이미지 표시 기능을 지원하지 않습니다. 외부 링크를 사용하는 것이 더 좋은 선택일 것 같아요. + + +## 시작하기 (Getting started) +``` +$ npm install +$ gulp +``` + +`src/fadeit/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/fadeit/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다. + +## 살펴보기 (Overview) +아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다. + +![Responsive HTML email template/signatures diagram](http://fadeit.dk/posts/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-build-diagram.png) + + +## CSS 서포트 (CSS Support) + +기억해둘 것은... 이것은 이메일용 HTML 을 만드는 것입니다. 그러니깐 이 프로젝트로 이메일을 빌드하는 여러분은 요즘은 잘 쓰지도 않는 멍청한 테이블 코드 덩어리를 확인하고 그 속에서 어떤 CSS가 동작하는지 안하는지를 알아봐야 할지도 모릅니다.(일단 이 [포스트](https://www.campaignmonitor.com/css/)를 참고하세요.) 아무튼 이런 과정을 통해서 여러분이 어떤 CSS 파일을 만들면, [gulp-inline-css](https://www.npmjs.com/package/gulp-inline-css) 모듈을 통해서 인라인 CSS로 바뀌어서 여러분의 HTML 파일로 빌드됩니다. + + +## 앞으로 할 일 (TODO): +- [ ] closing `inline-css` issue [#8](https://github.com/jonkemp/inline-css/issues/8#issuecomment-149025428) would greatly improve this repo +- [ ] preprocessor support (simplifies BEM) +- [ ] use github pages to show live demos +- [ ] check [gulp-inline-css](https://github.com/jonkemp/inline-css) for new features + + +## 다른 이메일 클라이언트에서 사용하는 법 (Usage with different e-mail clients) + +### Thunderbird +썬더버드 이메일 클라이언트에 html 서명을 자동으로 넣어주는 몇몇 플러그인이 있스빈다. 일단 우리는 [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) 를 추천합니다. 이 플러그인을 쓰면 새 이메일, 답장, 전달 등을 할 때마다 각각 다른 이메일 템플릿을 쓸 수 있습니다. + + +### Apple Mail / OS X (꼭.. 써야 한다면?) + +#### 방법 1 +- 이메일 앱을 열고 `Mail` -> `Preferences` -> `Signatures` 로 이동하세요. +- 아무거나 새 이메일 서명을 만들세요. (나중에 찾기 편하게 placeholder 를 써두는 것이 좋습니다.) +- 이메일을 닫으세요. +- 터미널을 열고 TextEdit으로 서명 파일을 열어보세요. (iCloud drive를 사용하는 경우는 잘 작동하지 않는 경우가 있습니다. 아래 troubleshooting을 참고하세요. ) + +``` +$ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/Signatures/ubiquitous_*.mailsignature +``` +- 위에서 placeholder를 넣어둔 파일을 열어봅니다. +- `...` 의 모든 html 코드를 여러분이 빌드한 `/dist/`의 html 파일로 교체 합니다. (``외에 다른 메타 정보는 수정하지 마세요!) +- 메일앱을 다시 실행하고 새로 바뀐 서명을 확인해보세요 :) + +> **주의**: 이미지 파일은 원래 `preference`의 미리보기 화면에서는 나오지 않습니다. 하지만 이메일을 만들고 발송하는 곳에서는 잘 보여지니깐 걱정마세요! + + +#### 방법 2 +다른 방법으로는 `/dist` 에 빌드한 html 파일을 CMD + A, CMD + C 해서 설정에 이메일 서명 박스에 붙여넣기 해서 쓸 수도 있습니다. 하지만 이렇게 복붙을 하는 경우 파일의 `` 이나 반응형 웹을 위한 미디어쿼리가 들어있는 `
안녕하세요.
Thanks for writing up this email.
We are delighted to reply with a responsive template.
스토어 기획팀 | Dev Relations
0 0 0 매니저
+82-10-1234-5678 | devhelper@onestore.co.kr
성남시 분당구 판교역로 188 SK플래닛 건물 11층
Onestore logo
\ No newline at end of file diff --git a/dist/ONEstore/signature-ONEstore.html b/dist/ONEstore/signature-ONEstore.html new file mode 100644 index 0000000..4ab616e --- /dev/null +++ b/dist/ONEstore/signature-ONEstore.html @@ -0,0 +1 @@ +
스토어 기획팀 | Dev Relations
0 0 0 매니저
+82-10-1234-5678 | devhelper@onestore.co.kr
성남시 분당구 판교역로 188 SK플래닛 건물 11층
Onestore logo
\ No newline at end of file diff --git a/dist/ONEstore/signature-reply-ONEstore.html b/dist/ONEstore/signature-reply-ONEstore.html new file mode 100644 index 0000000..f737548 --- /dev/null +++ b/dist/ONEstore/signature-reply-ONEstore.html @@ -0,0 +1 @@ +
undefined
0 0 0 매니저
\ No newline at end of file diff --git a/dist/ONEstoreBlack/full-mail-ONEstoreBlack.html b/dist/ONEstoreBlack/full-mail-ONEstoreBlack.html new file mode 100644 index 0000000..4cc008d --- /dev/null +++ b/dist/ONEstoreBlack/full-mail-ONEstoreBlack.html @@ -0,0 +1 @@ +
안녕하세요.
Thanks for writing up this email.
We are delighted to reply with a responsive template.
Best regards,
Joo Hyung Park
Service Planning Team | Dev Relations
ONEstore. logo
Call +82-10-1234-5678 or email us at devhelper@onestore.co.kr
address: 188, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea
\ No newline at end of file diff --git a/dist/ONEstoreBlack/signature-ONEstoreBlack.html b/dist/ONEstoreBlack/signature-ONEstoreBlack.html new file mode 100644 index 0000000..9c69fb0 --- /dev/null +++ b/dist/ONEstoreBlack/signature-ONEstoreBlack.html @@ -0,0 +1 @@ +
Best regards,
Joo Hyung Park
Service Planning Team | Dev Relations
ONEstore. logo
Call +82-10-1234-5678 or email us at devhelper@onestore.co.kr
address: 188, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea
\ No newline at end of file diff --git a/dist/ONEstoreBlack/signature-reply-ONEstoreBlack.html b/dist/ONEstoreBlack/signature-reply-ONEstoreBlack.html new file mode 100644 index 0000000..ddfa75f --- /dev/null +++ b/dist/ONEstoreBlack/signature-reply-ONEstoreBlack.html @@ -0,0 +1 @@ +
Best regards,
Joo Hyung Park
\ No newline at end of file diff --git a/dist/fadeit/full-mail-fadeit.html b/dist/fadeit/full-mail-fadeit.html index 5517e71..7fffe53 100644 --- a/dist/fadeit/full-mail-fadeit.html +++ b/dist/fadeit/full-mail-fadeit.html @@ -1 +1 @@ -
Hi there,
Thanks for writing up this email.
We are delighted to reply with a responsive template.
Yours truly,
Jane Whatsmyname
Call 81100200 or email us at info@fadeit.dk
Anelystparken 31, DK-8381 Tilst, Aarhus
fadeit logo
\ No newline at end of file +
Hi there,
Thanks for writing up this email.
We are delighted to reply with a responsive template.
Yours truly,
Jane Whatsmyname
Call 81100200 or email us at info@fadeit.dk
Anelystparken 31, DK-8381 Tilst, Aarhus
fadeit logo
\ No newline at end of file diff --git a/dist/fadeit/signature-fadeit.html b/dist/fadeit/signature-fadeit.html index de4b63e..c63e29f 100644 --- a/dist/fadeit/signature-fadeit.html +++ b/dist/fadeit/signature-fadeit.html @@ -1 +1 @@ -
Yours truly,
Jane Whatsmyname
Call 81100200 or email us at info@fadeit.dk
Anelystparken 31, DK-8381 Tilst, Aarhus
fadeit logo
\ No newline at end of file +
Yours truly,
Jane Whatsmyname
Call 81100200 or email us at info@fadeit.dk
Anelystparken 31, DK-8381 Tilst, Aarhus
fadeit logo
\ No newline at end of file diff --git a/dist/fadeit/signature-reply-fadeit.html b/dist/fadeit/signature-reply-fadeit.html index 67097bf..216c78f 100644 --- a/dist/fadeit/signature-reply-fadeit.html +++ b/dist/fadeit/signature-reply-fadeit.html @@ -1 +1 @@ -
Yours truly,
Jane Whatsmyname
\ No newline at end of file +
Yours truly,
Jane Whatsmyname
\ No newline at end of file diff --git a/dist/play/signature-play.html b/dist/play/signature-play.html index 41ab445..dd7096b 100644 --- a/dist/play/signature-play.html +++ b/dist/play/signature-play.html @@ -1 +1 @@ -
Best regards,
Jane Whatsmyname
Play. logo
LED Pylon. LED Wall. Digital Signage.
Call (45) 81100200 or email us at info@tryplay.dk
\ No newline at end of file +
Best regards,
Jane Whatsmyname
Play. logo
LED Pylon. LED Wall. Digital Signage.
Call (45) 81100200 or email us at info@tryplay.dk
\ No newline at end of file diff --git a/dist/play/signature-reply-play.html b/dist/play/signature-reply-play.html index 7b86e0f..bf12fb1 100644 --- a/dist/play/signature-reply-play.html +++ b/dist/play/signature-reply-play.html @@ -1 +1 @@ -
Best regards,
Jane Whatsmyname
\ No newline at end of file +
Best regards,
Jane Whatsmyname
\ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index e50fe7e..80449e7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,4 +1,4 @@ -'use strict'; +// 'use strict'; var gulp = require('gulp'), wrench = require('wrench'); diff --git a/package.json b/package.json index 910a58c..03426fa 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "homepage": "https://github.com/fadeit/responsive-html-email-signature#readme", "devDependencies": { "del": "^2.2.0", - "gulp": "^3.9.0", + "gulp": "^3.9.1", "gulp-inline-css": "^3.0.0", "gulp-inline-image-html": "^0.2.1", "gulp-minify-html": "^1.0.5", @@ -34,5 +34,6 @@ "q": "^1.4.1", "run-sequence": "^1.1.5", "wrench": "^1.5.8" - } + }, + "dependencies": {} } diff --git a/src/ONEstore/assets/fadeit-logo.png b/src/ONEstore/assets/fadeit-logo.png new file mode 100644 index 0000000..1d61548 Binary files /dev/null and b/src/ONEstore/assets/fadeit-logo.png differ diff --git a/src/ONEstore/assets/type01.png b/src/ONEstore/assets/type01.png new file mode 100644 index 0000000..0d69c65 Binary files /dev/null and b/src/ONEstore/assets/type01.png differ diff --git a/src/ONEstore/conf.js b/src/ONEstore/conf.js new file mode 100644 index 0000000..5ce2301 --- /dev/null +++ b/src/ONEstore/conf.js @@ -0,0 +1,21 @@ +/* + * NB: for images, if you pass in a relative path ('assets/logo.png'), they will be automatically embedded (base64). If you pass in a URL, it will stay as it is. + */ + +module.exports = [ + { + id: 'ONEstore', // Will be appended to the built templates. + // signature: '감사합니다.', + 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 | ', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'devhelper@onestore.co.kr', + contactSecondary: '성남시 분당구 판교역로 188 SK플래닛 건물 11층', + logoUrl: 'assets/type01.png', + logoAlt: 'Onestore logo', + website: 'http://onesto.re/' + } +] \ No newline at end of file diff --git a/src/ONEstore/fadeit.css b/src/ONEstore/fadeit.css new file mode 100644 index 0000000..2b91a8a --- /dev/null +++ b/src/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/src/ONEstore/footer.inc.html b/src/ONEstore/footer.inc.html new file mode 100644 index 0000000..43e0245 --- /dev/null +++ b/src/ONEstore/footer.inc.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + +
+ |
+
+
+
+ +
+ + + +
+ +
+ + + + + +
+ + <!-- @echo logoAlt -->
+ +
+ + + \ No newline at end of file diff --git a/src/ONEstore/full-mail.html b/src/ONEstore/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/src/ONEstore/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/src/ONEstore/head.inc.html b/src/ONEstore/head.inc.html new file mode 100644 index 0000000..5a6305e --- /dev/null +++ b/src/ONEstore/head.inc.html @@ -0,0 +1,34 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/ONEstore/signature-reply.html b/src/ONEstore/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/src/ONEstore/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/src/ONEstore/signature.html b/src/ONEstore/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/src/ONEstore/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+ diff --git a/src/ONEstoreBlack/assets/logo.png b/src/ONEstoreBlack/assets/logo.png new file mode 100644 index 0000000..587c07d Binary files /dev/null and b/src/ONEstoreBlack/assets/logo.png differ diff --git a/src/ONEstoreBlack/assets/play-logo.png b/src/ONEstoreBlack/assets/play-logo.png new file mode 100644 index 0000000..83e17b7 Binary files /dev/null and b/src/ONEstoreBlack/assets/play-logo.png differ diff --git a/src/ONEstoreBlack/assets/type03.png b/src/ONEstoreBlack/assets/type03.png new file mode 100644 index 0000000..ee2db4e Binary files /dev/null and b/src/ONEstoreBlack/assets/type03.png differ diff --git a/src/ONEstoreBlack/conf.js b/src/ONEstoreBlack/conf.js new file mode 100644 index 0000000..6530f36 --- /dev/null +++ b/src/ONEstoreBlack/conf.js @@ -0,0 +1,22 @@ +/* + * NB: for images, if you pass in a relative path ('assets/logo.png'), they will be automatically embedded (base64). If you pass in a URL, it will stay as it is. + */ + +module.exports = [ + { + id: 'ONEstoreBlack', // Will be appended to the built templates. + 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', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'devhelper@onestore.co.kr', + // slogan: '\"The 1st integrated Android App store in Korea\"', + contactSecondary: '188, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea', + logoUrl: 'assets/type03.png', + logoAlt: 'ONEstore. logo', + website: 'http://onesto.re/' + } +] \ No newline at end of file diff --git a/src/ONEstoreBlack/footer.inc.html b/src/ONEstoreBlack/footer.inc.html new file mode 100644 index 0000000..3f79328 --- /dev/null +++ b/src/ONEstoreBlack/footer.inc.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + +
+
+
+ | +
+ + +
+ + <!-- @echo logoAlt --> + +
+ + + + +
+ +
+ address: +
+ + + \ No newline at end of file diff --git a/src/ONEstoreBlack/full-mail.html b/src/ONEstoreBlack/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/src/ONEstoreBlack/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/src/ONEstoreBlack/head.inc.html b/src/ONEstoreBlack/head.inc.html new file mode 100644 index 0000000..2197a50 --- /dev/null +++ b/src/ONEstoreBlack/head.inc.html @@ -0,0 +1,42 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/ONEstoreBlack/play.css b/src/ONEstoreBlack/play.css new file mode 100644 index 0000000..5cb61d3 --- /dev/null +++ b/src/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/src/ONEstoreBlack/signature-reply.html b/src/ONEstoreBlack/signature-reply.html new file mode 100644 index 0000000..81f6f7a --- /dev/null +++ b/src/ONEstoreBlack/signature-reply.html @@ -0,0 +1,23 @@ + + + +
+ + + + + + + +
+ + + + + +
+
+
+
+
+ \ No newline at end of file diff --git a/src/ONEstoreBlack/signature.html b/src/ONEstoreBlack/signature.html new file mode 100644 index 0000000..a5951b2 --- /dev/null +++ b/src/ONEstoreBlack/signature.html @@ -0,0 +1,14 @@ + + + +
+ + + + + + + + +
+