source: spip-zone/_plugins_/basecss/trunk/css/typo.css.html @ 58660

Last change on this file since 58660 was 58660, checked in by romy@…, 9 years ago

Finalement, alterner par défaut les couleurs des lignes d'un tableau via tr:nth-child(2n) td, comme dans Blueprint, n'est pas une bonne idée : ce n'est pas adapté aux tableaux complexes, avec ligne de th intermédiaire et th en titre de ligne.

Mieux vaut s'appuyer sur les classes .odd et .even (possible en SPIP 3)
+ patch temporaire pour SPIP 2

  • Property svn:executable set to *
File size: 6.5 KB
Line 
1#CACHE{3600*100,cache-client}
2#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
3#HTTP_HEADER{Vary: Accept-Encoding}
4[(#REM)<style>
5]/* --------------------------------------------------------------
6
7   typo.css.html
8   Base typographique
9   Cf.: http://www.spip-contrib.net/3820
10
11-------------------------------------------------------------- */
12
13/* Valeurs :
14#SET{font-size,#CONFIG{basecss/typo/font-size,1em}} [ font-size: (#GET{font-size});]
15#SET{line-height,#CONFIG{basecss/typo/line-height,1.5em}} [ line-height: (#GET{line-height});]
16#SET{margin-bottom,#CONFIG{basecss/typo/margin-bottom,1.5em}} [ margin-bottom: (#GET{margin-bottom});]
17#SET{text-indent,#CONFIG{basecss/typo/text-indent,50px}} [ text-indent: (#GET{text-indent});]
18#SET{font-family,#CONFIG{basecss/typo/font-family,'Helvetica, Arial, sans-serif'}} [ font-family: (#GET{font-family});]
19#SET{background-color,#CONFIG{basecss/typo/background-color,#FFFFFF}} [ background-color : (#GET{background-color});]
20#SET{color,#CONFIG{basecss/typo/color,#222222}} [ color: (#GET{color});]
21*/
22
23html { font-size: 100.01%; } /* pour IE < 6 */
24/* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ et http://forum.alsacreations.com/topic-4-54377-1.html */
25body { background: #GET{background-color}; font: #GET{font-size}/#GET{line-height}[ (#GET{font-family})]; color: #GET{color}; }
26
27/* Titraille / Intertitres */
28h1,.h1,
29h2,.h2,
30h3,.h3,
31h4,.h4,
32h5,.h5,
33h6,.h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
34hr { height: 1px; margin:[ (#GET{margin-bottom})] 0; border: 0; background: #GET{color}; color: #GET{color}; }
35
36/* Titraille Blueprint
37Cf. : http://www.blueprintcss.org/tests/parts/elements.html
38h1,.h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
39h2,.h2 { font-size: 2em; margin-bottom: 0.75em; }
40h3,.h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
41h4,.h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
42h5,.h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
43h6,.h6 { font-size: 1em; font-weight: bold; }*/
44
45h1,.h1 {font-size: 2em; line-height:#GET{line-height};margin-bottom: [(#GET{margin-bottom}|div{2})em]; }
46#SET{coeff,#GET{line-height}|plus{2}|div{2}|div{#GET{line-height}}}
47#SET{coeffinv,#VAL{1}|div{#GET{coeff}}}
48h2,.h2 {[ font-size: (#GET{line-height}|mult{#GET{coeff}})em];[ line-height: (#GET{coeffinv}|mult{2})em];[ margin-bottom: (#GET{coeffinv})em;]}
49h3,.h3 {[ font-size: (#GET{line-height}|mult{1})em]; line-height: 1; margin-bottom: 1em; }
50#SET{coeff,#GET{line-height}|plus{1}|div{2}|div{#GET{line-height}}}
51#SET{coeffinv,#VAL{1}|div{#GET{coeff}}}
52h4,.h4 {[ font-size: (#GET{line-height}|mult{#GET{coeff}})em];[ line-height: (#GET{coeffinv})em];[ margin-bottom: (#GET{coeffinv})em;] }
53h5,.h5 { font-size: 1em; font-weight: bold; margin-bottom: #GET{margin-bottom}; }
54h6,.h6 { font-size: 1em; font-weight: bold; }
55
56/* Enrichissements typographiques */
57strong, b { font-weight: bold; }
58em, i { font-style: italic; }
59small, .small { font-size: 90%; }
60big, .big { font-size: 130%; }
61abbr[title], acronym[title] { border-bottom: .1em dotted; cursor: help; }
62@media print { abbr[title]:after { content: " (" attr(title) ")"; } }
63dfn { font-weight: bold; font-style: italic; }
64del, .del { background-color: #FFDDDD; border-color: #CC0000; color: #CC0000; text-decoration: line-through; }
65ins, .ins { background-color: #DDFFDD; border-color: #00AA00; color: #00AA00; text-decoration: none; }
66sup, sub { font-size: .8em; font-variant: normal; line-height: 0; }
67sup { vertical-align: super; }
68.ie sup { vertical-align: text-top; }
69sub { vertical-align: sub; }
70.ie sub { vertical-align: text-bottom; }
71.caps { font-variant: small-caps; }
72
73/* Listes */
74ul, ol, li, dl, dt, dd {}
75ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; }
76
77dl dt { font-weight: bold; }
78dl dd {}
79
80/* Tableaux */
81table {}
82caption { background: #EEE; font-weight: bold; }
83th { font-weight: bold; }
84thead th { background: #CCC; }
85th, td, caption {[ padding: (#GET{line-height}|div{2})em;] }
86tbody tr.even th,
87tbody tr.even td { background: #EEE; }
88tfoot { font-style: italic; }
89
90/* Citations, code et poesie */
91q { font-style: italic; }
92blockquote { padding: 0 #GET{text-indent}; font-style: italic; }
93cite { font-style: italic; }
94
95address { font-style: italic; }
96
97pre, code, kbd, samp, var, tt { font-family: 'andale mono', 'lucida console', monospace; font-size: 1em; }
98pre { margin:[ (#GET{margin-bottom}) ]0;
99        /* Cf.: http://perishablepress.com/press/2010/06/01/wrapping-content/ */
100        white-space: pre;           /* CSS 2.0 */
101        white-space: pre-wrap;      /* CSS 2.1 */
102        white-space: pre-line;      /* CSS 3.0 */
103        white-space: -pre-wrap;     /* Opera 4-6 */
104        white-space: -o-pre-wrap;   /* Opera 7 */
105        white-space: -moz-pre-wrap; /* Mozilla */
106        white-space: -hp-pre-wrap;  /* HP Printers */
107        word-wrap: break-word;      /* IE 5+ */
108}
109kbd { background-color: #GET{color}; color: #GET{background-color}; }
110samp { font-weight: bold; }
111var { font-style: italic; }
112
113/* Paragraphes */
114p, .p, dl, dd, blockquote, address, pre, table, fieldset { margin-bottom: #GET{margin-bottom}; }
115
116/* Liens */
117a {}
118a:hover {}
119a[hreflang]:after { content: "\0000a0(" attr(hreflang) ")"; }
120@media print {
121        a, a:visited { color: #GET{color}; text-decoration: underline; }
122        .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
123}
124
125.on { font-weight: bold; }
126
127/**
128* Print styles from HTML5 Boilerplate
129* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
130*/
131@media print {
132        pre, blockquote { page-break-inside: avoid; }
133        thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
134        tr, img { page-break-inside: avoid; }
135        @page { margin: 0.5cm; }
136        p, h2, h3 { orphans: 3; widows: 3; }
137        h2, h3 { page-break-after: avoid; }
138}
139
140/* Affichage sur petits ecrans
141Cf.: http://www.alsacreations.com/astuce/lire/1177
142------------------------------------------ */
143@media (max-width: 640px) {
144
145        /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
146        img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
147       
148        /* gestion des mots longs */
149        textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* cesure forcee */ }
150        code, pre, samp { white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */ }
151
152}
153
154@media screen and (max-width:640px) and (orientation: landscape) {
155        body { -webkit-text-size-adjust: 70%; }
156}
157
158/* end */
Note: See TracBrowser for help on using the repository browser.