|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <!-- Template from https://github.com/leemunroe/html-email-template --> |
|
4 <head> |
|
5 <meta name="viewport" content="width=device-width" /> |
|
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
|
7 <title>Renkan dépublié</title> |
|
8 <style> |
|
9 /* ------------------------------------- |
|
10 GLOBAL |
|
11 ------------------------------------- */ |
|
12 * { |
|
13 margin: 0; |
|
14 padding: 0; |
|
15 font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; |
|
16 font-size: 100%; |
|
17 line-height: 1.6; |
|
18 } |
|
19 |
|
20 img { |
|
21 max-width: 100%; |
|
22 } |
|
23 |
|
24 body { |
|
25 -webkit-font-smoothing: antialiased; |
|
26 -webkit-text-size-adjust: none; |
|
27 width: 100%!important; |
|
28 height: 100%; |
|
29 } |
|
30 |
|
31 |
|
32 /* ------------------------------------- |
|
33 ELEMENTS |
|
34 ------------------------------------- */ |
|
35 a { |
|
36 color: #348eda; |
|
37 } |
|
38 |
|
39 .btn-primary { |
|
40 text-decoration: none; |
|
41 color: #FFF; |
|
42 background-color: #348eda; |
|
43 border: solid #348eda; |
|
44 border-width: 10px 20px; |
|
45 line-height: 2; |
|
46 font-weight: bold; |
|
47 margin-right: 10px; |
|
48 text-align: center; |
|
49 cursor: pointer; |
|
50 display: inline-block; |
|
51 border-radius: 25px; |
|
52 } |
|
53 |
|
54 .btn-secondary { |
|
55 text-decoration: none; |
|
56 color: #FFF; |
|
57 background-color: #aaa; |
|
58 border: solid #aaa; |
|
59 border-width: 10px 20px; |
|
60 line-height: 2; |
|
61 font-weight: bold; |
|
62 margin-right: 10px; |
|
63 text-align: center; |
|
64 cursor: pointer; |
|
65 display: inline-block; |
|
66 border-radius: 25px; |
|
67 } |
|
68 |
|
69 .last { |
|
70 margin-bottom: 0; |
|
71 } |
|
72 |
|
73 .first { |
|
74 margin-top: 0; |
|
75 } |
|
76 |
|
77 .padding { |
|
78 padding: 10px 0; |
|
79 } |
|
80 |
|
81 |
|
82 /* ------------------------------------- |
|
83 BODY |
|
84 ------------------------------------- */ |
|
85 table.body-wrap { |
|
86 width: 100%; |
|
87 padding: 20px; |
|
88 } |
|
89 |
|
90 table.body-wrap .container { |
|
91 border: 1px solid #f0f0f0; |
|
92 } |
|
93 |
|
94 |
|
95 /* ------------------------------------- |
|
96 FOOTER |
|
97 ------------------------------------- */ |
|
98 table.footer-wrap { |
|
99 width: 100%; |
|
100 clear: both!important; |
|
101 } |
|
102 |
|
103 .footer-wrap .container p { |
|
104 font-size: 12px; |
|
105 color: #666; |
|
106 |
|
107 } |
|
108 |
|
109 table.footer-wrap a { |
|
110 color: #999; |
|
111 } |
|
112 |
|
113 |
|
114 /* ------------------------------------- |
|
115 TYPOGRAPHY |
|
116 ------------------------------------- */ |
|
117 h1, h2, h3 { |
|
118 font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
|
119 line-height: 1.1; |
|
120 margin-bottom: 15px; |
|
121 color: #000; |
|
122 margin: 40px 0 10px; |
|
123 line-height: 1.2; |
|
124 font-weight: 200; |
|
125 } |
|
126 |
|
127 h1 { |
|
128 font-size: 36px; |
|
129 } |
|
130 h2 { |
|
131 font-size: 28px; |
|
132 } |
|
133 h3 { |
|
134 font-size: 22px; |
|
135 } |
|
136 |
|
137 p, ul, ol { |
|
138 margin-bottom: 10px; |
|
139 font-weight: normal; |
|
140 font-size: 14px; |
|
141 } |
|
142 |
|
143 ul li, ol li { |
|
144 margin-left: 5px; |
|
145 list-style-position: inside; |
|
146 } |
|
147 |
|
148 /* --------------------------------------------------- |
|
149 RESPONSIVENESS |
|
150 |
|
151 ------------------------------------------------------ */ |
|
152 |
|
153 /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ |
|
154 .container { |
|
155 display: block!important; |
|
156 max-width: 600px!important; |
|
157 margin: 0 auto!important; /* makes it centered */ |
|
158 clear: both!important; |
|
159 } |
|
160 |
|
161 /* Set the padding on the td rather than the div for Outlook compatibility */ |
|
162 .body-wrap .container { |
|
163 padding: 20px; |
|
164 } |
|
165 |
|
166 /* This should also be a block element, so that it will fill 100% of the .container */ |
|
167 .content { |
|
168 max-width: 600px; |
|
169 margin: 0 auto; |
|
170 display: block; |
|
171 } |
|
172 |
|
173 /* Let's make sure tables in the content area are 100% wide */ |
|
174 .content table { |
|
175 width: 100%; |
|
176 } |
|
177 |
|
178 </style> |
|
179 </head> |
|
180 |
|
181 <body bgcolor="#f6f6f6"> |
|
182 |
|
183 <!-- body --> |
|
184 <table class="body-wrap"> |
|
185 <tr> |
|
186 <td></td> |
|
187 <td class="container" bgcolor="#FFFFFF"> |
|
188 |
|
189 <!-- content --> |
|
190 <div class="content"> |
|
191 <table> |
|
192 <tr> |
|
193 <td> |
|
194 <p>Bonjour,</p> |
|
195 <p>Votre Renkan intitulé "{{ renkan_state.renkan.renkan.title}}" a été dépublié.</p> |
|
196 {% if renkan_state.message %} |
|
197 <p>Avec le message suivant : {{ renkan_state.message }}</p> |
|
198 {% endif %} |
|
199 <p></p> |
|
200 </td> |
|
201 </tr> |
|
202 </table> |
|
203 </div> |
|
204 <!-- /content --> |
|
205 |
|
206 </td> |
|
207 <td></td> |
|
208 </tr> |
|
209 </table> |
|
210 <!-- /body --> |
|
211 |
|
212 </body> |
|
213 </html> |