source: spip-zone/_plugins_/newsletters/trunk/newsletters/typographic.html

Last change on this file was 110261, checked in by brunobergot@…, 19 months ago

version 1.5.4 : fix déclaration @media modèle typographic (stéphane sur spip-zone)

File size: 16.2 KB
Line 
1<BOUCLE_rem(CONDITION){si #REM}>
2<!-- titre=<multi>[fr]Typographic (une colonne, responsive)[en]Typographic (one column, responsive)</multi> -->
3</BOUCLE_rem>
4<BOUCLE_newsletter(NEWSLETTERS){id_newsletter}{statut?}{lang_select}>
5<!doctype html>
6<html>
7<head>
8<meta charset="utf-8">
9<meta name="viewport" content="width=device-width, initial-scale=1">
10<meta http-equiv="X-UA-Compatible" content="IE=edge">
11<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
12<title>#TITRE</title>
13<!-- Open Graph Protocol -->
14[<meta property="og:title" content="(#TITRE|attribut_html)" />]
15<meta property="og:type" content="article" />
16[<meta property="og:image" content="(#LOGO_NEWSLETTER_NORMAL|sinon{#LOGO_SITE_SPIP}|extraire_attribut{src}|url_absolue)" />]
17[<meta property="og:url" content="(#URL_NEWSLETTER|url_absolue)" />]
18[<meta property="og:description" content="(#INTRODUCTION|supprimer_tags|entites_html)" />]
19[<meta property="og:site_name" content="(#NOM_SITE_SPIP|attribut_html)" />]
20<style media="all" type="text/css">
21/* -------------------------------------
22    GLOBAL RESETS
23------------------------------------- */
24
25/* CLIENT-SPECIFIC STYLES */
26body,
27table,
28td,
29a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
30
31/* Prevent WebKit and Windows mobile changing default text sizes */
32table,
33td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
34
35/* Remove spacing between tables in Outlook 2007 and up */
36img { -ms-interpolation-mode: bicubic; }
37
38/* Allow smoother rendering of resized image in Internet Explorer */
39
40/* RESET STYLES */
41img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
42body { height: 100%!important; margin: 0!important; padding: 0!important; width: 100%!important; }
43figure { margin: 0; padding: 0; }
44article,
45aside,
46details,
47figcaption,
48figure,
49footer,
50header,
51hgroup,
52menu,
53nav,
54section { display: block; }
55
56/* iOS BLUE LINKS */
57a[x-apple-data-detectors] { color: inherit!important; text-decoration: none!important; font-size: inherit!important; font-family: inherit!important; font-weight: inherit!important; line-height: inherit!important; }
58
59/* ANDROID CENTER FIX */
60div[style*="margin: 16px 0;"] { margin: 0!important; }
61table,
62td,
63div,
64a { box-sizing: border-box; }
65img { -ms-interpolation-mode: bicubic; max-width: 100%; display: inline-block; padding: 5px; border: 1px solid #cccccc; }
66body,
67.body { font-family: Georgia,"Times New Roman",Times,serif; font-size: 20px; line-height: 1.5; height: 100%!important; width: 100%!important; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
68table { border-collapse: separate!important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; }
69table td { font-family: Georgia,"Times New Roman",Times,serif; font-size: 20px; vertical-align: top; }
70.ExternalClass { width: 100%; }
71.ExternalClass,
72.ExternalClass p,
73.ExternalClass span,
74.ExternalClass font,
75.ExternalClass td,
76.ExternalClass div { line-height: 100%; }
77strong,
78b { font-weight: bold; }
79
80/* -------------------------------------
81    BODY & CONTAINER
82------------------------------------- */
83body { background-color: #ffffff; }
84.body { background-color: #ffffff; width: 100%; }
85
86/* 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 */
87.container { display: block; Margin: 0 auto!important; /* makes it centered */max-width: 580px; padding: 10px; width: 100%!important; }
88
89/* This should also be a block element, so that it will fill 100% of the .container */
90.content { display: block; margin: 0 auto; max-width: 580px; padding: 10px; }
91
92/* -------------------------------------
93    HEADER, FOOTER, MAIN
94------------------------------------- */
95.main { background: #ffffff; border: none; border-radius: 0px; width: 100%; }
96.wrapper { padding: 30px; }
97.content-block { padding: 0 0 30px; }
98.header { margin-bottom: 30px; margin-top: 20px; width: 100%; }
99.footer { clear: both; width: 100%; }
100.footer * { color: #7F7F7F; font-size: 12px; }
101.footer td { padding: 20px 0; }
102
103/* -------------------------------------
104    TYPOGRAPHY
105------------------------------------- */
106h1,
107h2,
108h3,
109h4,
110h5,
111h6 { color: #222222!important; font-family: "Roboto","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif; font-weight: bold; line-height: 1.2; margin: 0; margin-bottom: 20px; margin-top: 30px; }
112h1,
113h2 { margin-bottom: 30px; margin-top: 40px; }
114h1 { font-size: 32px; }
115h2 { font-size: 28px; }
116h3 { font-size: 24px; }
117h4 { font-size: 22px; }
118h5 { font-size: 20px; }
119h6 { font-size: 18px; }
120p,
121ul,
122ol { font-family: Georgia,"Times New Roman",Times,serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 30px; color: #111111; }
123ul,
124ol { padding: 0; margin: 0; margin-bottom: 15px; padding-left: 25px; }
125ul li,
126ol li { list-style-position: outside; margin-left: 5px; margin-bottom: 2px; }
127li>ul,
128li>ol { margin-top: 15px; }
129a { color: #348eda; text-decoration: none; font-weight: bold; }
130code,
131pre,
132.word-wrap { word-break: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
133pre,
134code { font-family: Menlo,Monaco,Consolas,"Courier New",monospace; }
135pre { display: block; width: 96%; margin: 1em 0; background: #f6f6f6; padding: 2%; white-space: pre-wrap; font-size: 18px; }
136blockquote { margin: 0; padding: 0; padding-top: 20px; padding-bottom: 20px; padding-left: 40px; padding-right: 40px; border-left: 4px solid #cccccc; font-style: italic; margin: 2em 0; }
137blockquote p { margin-bottom: 0; }
138mark { background: #ff0; }
139dl dt { font-weight: bold; }
140dl dd { margin-left: 40px; }
141
142/* -------------------------------------
143  DIVIDERS
144------------------------------------- */
145.divider { border-collapse: separate; }
146.divider-spacer { padding: 20px 0; }
147.divider td { border-top: 1px solid #ccc; line-height: 0; font-size: 0; height: 1px; margin: 0; padding: 0; }
148
149/* -------------------------------------
150    OTHER STYLES THAT MIGHT BE USEFUL
151------------------------------------- */
152hr { margin: 40px 0; border: none; border-top: 1px solid #cccccc; color: #ffffff; }
153.last { margin-bottom: 0; }
154.first { margin-top: 0; }
155.align-center { text-align: center; }
156.align-right { text-align: right; }
157.align-left { text-align: left; }
158.clear { clear: both; }
159.mt0 { margin-top: 0; }
160.mb0 { margin-bottom: 0; }
161.preheader { color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0; }
162
163/* -------------------------------------
164    RESPONSIVE AND MOBILE FRIENDLY STYLES
165------------------------------------- */
166@media only screen and (max-width:620px) { 
167        table[class=body] { font-size: 18px!important; }
168        table[class=body] p,
169        table[class=body] ul,
170        table[class=body] ol { font-size: 18px!important; margin-bottom: 15px!important; }
171        table[class=body] .et-btn { margin-bottom: 15px; }
172        table[class=body] h1 { font-size: 26px!important; }
173        table[class=body] h2 { font-size: 24px!important; }
174        table[class=body] h3 { font-size: 22px!important; }
175        table[class=body] h4 { font-size: 21px!important; }
176        table[class=body] h5 { font-size: 18px!important; }
177        table[class=body] h6 { font-size: 17px!important; }
178        table[class=body] h1,
179        table[class=body] h2 { margin-bottom: 20px!important; margin-top: 20px!important; }
180        table[class=body] .container,
181        table[class=body] .content { width: 100%!important; max-width: 100%!important; }
182        table[class=body] .content,
183        table[class=body] .wrapper { padding: 10px!important; }
184        table[class=body] .container { padding: 0!important; width: 100%!important; }
185        table[class=body] .btn table,
186        table[class=body] .btn a { width: 100%!important; }
187 }
188</style>
189</head>
190
191<body style="background-color: #ffffff; -webkit-text-size-adjust: 100%; height: 100% !important; margin: 0 !important; padding: 0 !important; -ms-text-size-adjust: 100%; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; line-height: 1.5; -webkit-font-smoothing: antialiased; width: 100% !important;">
192
193<table class="body" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; border-collapse: separate !important; line-height: 1.5; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background-color: #ffffff;" width="100% !important" bgcolor="#ffffff">
194        <tr>
195                <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; vertical-align: top;" valign="top"></td>
196                <td class="container" style="-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; -ms-text-size-adjust: 100%; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; vertical-align: top; display: block; Margin: 0 auto !important; max-width: 580px; padding: 10px; width: 100% !important;" width="100% !important" valign="top">
197                        <div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
198[<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">(#INTRODUCTION)</span>]
199<span class="archive_link" style="font-family: Georgia, 'Times New Roman', Times, serif; font-weight: normal; margin: 0; margin-bottom: 30px; color: #7F7F7F; font-size: 12px;"><:newsletter:info_email_not_displaying:> <a href="#URL_NEWSLETTER" target="_blank"><:newsletter:info_email_voir_en_ligne:></a>.</span>
200
201<table class="main" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; border-collapse: separate !important; width: 100%; background: #ffffff; border: none; border-radius: 0px;" width="100%">
202        <tr>
203                <td class="wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; vertical-align: top; padding: 30px;" valign="top">
204                        <table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; border-collapse: separate !important; width: 100%;" width="100%">
205                                <tr>
206                                        <td class="reader-view" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; vertical-align: top;" valign="top">
207
208                                                <h1 style="color: #222222 !important; font-family: 'Roboto', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.2; margin: 0; margin-bottom: 30px; margin-top: 40px; font-size: 32px;">#TITRE</h1>
209
210                                                [<div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 30px; color: #111111;">(#CHAPO)</div>]
211
212                                                [(#LOGO_NEWSLETTER|sinon{#LOGO_SITE_SPIP}|image_reduire{460}
213                                                        |inserer_attribut{alt,''}
214                                                        |inserer_attribut{border,'0'}
215                                                        |inserer_attribut{style,'-ms-interpolation-mode: bicubic; border: 1px solid #cccccc; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100%; display: inline-block; padding: 5px; margin-bottom: 20px;'})]
216
217                                                [<div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 30px; color: #111111;">(#TEXTE|image_reduire{560,0})</div>]
218
219                                                <table class="divider-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; border-collapse: separate !important; width: 100%;" width="100%">
220                                                        <tr>
221                                                                <td class="divider-spacer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; vertical-align: top; padding: 20px 0;" valign="top">
222                                                                        <table class="divider divider- " cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; border-collapse: separate !important; width: 100%;" width="100%">
223                                                                                <tr>
224                                                                                        <td style="-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; -ms-text-size-adjust: 100%; font-family: Georgia, 'Times New Roman', Times, serif; vertical-align: top; padding: 0; border-top: 1px solid #ccc; line-height: 0; height: 1px; margin: 0; font-size: 0;" valign="top"></td>
225                                                                                </tr>
226                                                                        </table>
227                                                                </td>
228                                                        </tr>
229                                                </table>
230             
231                                                <BOUCLE_selectionarticles(ARTICLES){id_newsletter}>
232                                                <h2 style="color: #222222 !important; font-family: 'Roboto', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1.2; margin: 0; margin-bottom: 30px; margin-top: 40px; font-size: 28px;">#TITRE</h2>
233                                                [(#LOGO_ARTICLE_NORMAL|image_reduire{460}
234                                                        |inserer_attribut{alt,''}
235                                                        |inserer_attribut{border,'0'}
236                                                        |inserer_attribut{style,'-ms-interpolation-mode: bicubic; border: 1px solid #cccccc; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100%; display: inline-block; padding: 5px; margin-bottom: 20px;'})]
237                                                [<div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 30px; color: #111111;">(#INTRODUCTION)</div>]
238                                                <p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; font-weight: normal; margin: 0; margin-bottom: 30px; color: #111111;">
239                                                        <a href="#URL_ARTICLE" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; box-sizing: border-box; color: #348eda; text-decoration: none; font-weight: bold;"><:newsletter:lien_lire_en_ligne:> &laquo; #TITRE &raquo;</a>
240                                                </p>
241                                                </BOUCLE_selectionarticles>
242
243                                        </td><!-- content -->
244                                </tr>
245                        </table>
246                </td>
247        </tr>
248</table>
249 
250<div class="footer" style="box-sizing: border-box; clear: both; width: 100%;">
251        <table style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; border-collapse: separate !important; width: 100%; color: #7F7F7F; font-size: 12px;" width="100%">
252                <tr style="color: #7F7F7F; font-size: 12px;">
253                        <td class="align-center" style="-webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; -ms-text-size-adjust: 100%; font-family: Georgia, 'Times New Roman', Times, serif; vertical-align: top; font-size: 12px; color: #7F7F7F; text-align: center; padding: 20px 0;" valign="top" align="center">
254                                <p style="font-family: Georgia, 'Times New Roman', Times, serif; font-weight: normal; margin: 0; margin-bottom: 30px; color: #7F7F7F; font-size: 12px;">
255                                        &copy; <a href="#URL_SITE_SPIP" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; box-sizing: border-box; text-decoration: none; font-weight: bold; color: #7F7F7F; font-size: 12px;">#NOM_SITE_SPIP</a> &mdash; [(#ENV{date}|annee)]
256                                </p>
257                                <p style="font-family: Georgia, 'Times New Roman', Times, serif; font-weight: normal; margin: 0; margin-bottom: 30px; color: #7F7F7F; font-size: 12px;">
258                                        <:newsletter:info_email_reception:> @email@<br>
259                                        &nbsp;<a href="@url_unsubscribe@" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; box-sizing: border-box; text-decoration: none; font-weight: bold; color: #7F7F7F; font-size: 12px;"><:newsletter:label_link_unsubscribe:></a>&nbsp;
260                                </p>
261                        </td>
262                </tr>
263        </table>
264</div>
265</div>
266                </td>
267                <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; vertical-align: top;" valign="top"></td>
268        </tr>
269</table>
270
271</body>
272</html>
273</BOUCLE_newsletter>
274#FILTRE{newsletters_liens_absolus}
Note: See TracBrowser for help on using the repository browser.