1 | @charset "UTF-8"; |
---|
2 | |
---|
3 | /* seuils retenus : |
---|
4 | jusqu'à 480px: tout en une colonne, sidebar et stickers en bas |
---|
5 | 480px: stickers en haut |
---|
6 | 640px: sidebar toujours en bas mais divisé en deux colonnes |
---|
7 | 1024px: passage à deux colonnes, sidebar à droite |
---|
8 | 1280px: décalage du post-info vers la gauche |
---|
9 | 1600px: marges plus grandes */ |
---|
10 | |
---|
11 | /* -------------------------------------------------------------------- |
---|
12 | Téléphones (moins de 480px) |
---|
13 | -------------------------------------------------------------------- */ |
---|
14 | @media only screen and (max-width:480px) { |
---|
15 | .nomobile { |
---|
16 | display: none !important; |
---|
17 | } |
---|
18 | h1 { |
---|
19 | font-size: 1.8em; |
---|
20 | } |
---|
21 | h1 a { |
---|
22 | display: block; |
---|
23 | padding: 6px 8px; |
---|
24 | background: #f4f4f5; |
---|
25 | background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f5), to(#d7d7dC)); |
---|
26 | background: -moz-linear-gradient(top, #f4f4f5, #d7d7dC); |
---|
27 | border-right: 1px solid #aaa; |
---|
28 | border-bottom: 1px solid #ccc; |
---|
29 | } |
---|
30 | #supranav { |
---|
31 | border:none; |
---|
32 | margin: 8px 0 0; |
---|
33 | } |
---|
34 | #supranav li a { |
---|
35 | border-right: 0; |
---|
36 | display: block; |
---|
37 | padding: 4px 8px; |
---|
38 | border-bottom: 1px solid #ccc; |
---|
39 | } |
---|
40 | .post-title { |
---|
41 | font-size: 1.5em; |
---|
42 | font-weight: bold; |
---|
43 | font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif; |
---|
44 | } |
---|
45 | .post-title a { |
---|
46 | font-style: normal; |
---|
47 | font-weight: bold; |
---|
48 | } |
---|
49 | #stickers { |
---|
50 | margin: 0; |
---|
51 | padding: 0; |
---|
52 | border-bottom: 8px solid #fff; |
---|
53 | } |
---|
54 | #stickers li { |
---|
55 | position: relative; |
---|
56 | line-height: 2.5em; |
---|
57 | margin-left: 0; |
---|
58 | padding-left: 0; |
---|
59 | border: 2px solid #fff; |
---|
60 | border-left: 6px solid #fff; |
---|
61 | border-right: 6px solid #fff; |
---|
62 | } |
---|
63 | #stickers img { |
---|
64 | display: block; |
---|
65 | position: absolute; |
---|
66 | clip: rect(0px,32px,32px,0px); |
---|
67 | } |
---|
68 | #stickers span { |
---|
69 | margin-left: 40px; |
---|
70 | } |
---|
71 | #stickers a { |
---|
72 | text-decoration: none; |
---|
73 | } |
---|
74 | } |
---|
75 | |
---|
76 | /* -------------------------------------------------------------------- |
---|
77 | Autres (plus de 480px) |
---|
78 | -------------------------------------------------------------------- */ |
---|
79 | |
---|
80 | @media only screen and (min-width: 481px) { |
---|
81 | #top { |
---|
82 | padding-top: 24px; |
---|
83 | } |
---|
84 | h1 { |
---|
85 | font-size: 2em; |
---|
86 | padding-right: 240px; |
---|
87 | padding-bottom: 4px; |
---|
88 | margin-left: 32px; |
---|
89 | } |
---|
90 | #supranav { |
---|
91 | margin: 36px 0 0; |
---|
92 | border-bottom: 1px solid #ccc; |
---|
93 | } |
---|
94 | #supranav li { |
---|
95 | display: inline; |
---|
96 | padding: 8px 0; |
---|
97 | } |
---|
98 | #supranav li a { |
---|
99 | display: inline-block; |
---|
100 | padding: 8px 32px 8px 28px; |
---|
101 | border-right: 1px solid #ccc; |
---|
102 | } |
---|
103 | #supranav li a span { |
---|
104 | display: block; |
---|
105 | } |
---|
106 | .post-title { |
---|
107 | font-size: 2.5em; |
---|
108 | font-weight: normal; |
---|
109 | } |
---|
110 | .post-title a { |
---|
111 | font-style: italic; |
---|
112 | font-weight: normal; |
---|
113 | } |
---|
114 | #stickers { |
---|
115 | position: absolute; |
---|
116 | top: 0; |
---|
117 | right: 0; |
---|
118 | padding-right: 3%; |
---|
119 | } |
---|
120 | #stickers li { |
---|
121 | display: inline; |
---|
122 | padding: 0 4px; |
---|
123 | } |
---|
124 | #stickers li.last { |
---|
125 | padding-right: 0; |
---|
126 | } |
---|
127 | #stickers li span { |
---|
128 | display: none; |
---|
129 | } |
---|
130 | .post-title { |
---|
131 | font-size: 2.6em; |
---|
132 | } |
---|
133 | #stickers li a:hover, |
---|
134 | #stickers li a:active, |
---|
135 | #stickers li a:focus { |
---|
136 | background-color: #fff; |
---|
137 | border-bottom: 4px solid #ad3f4c; |
---|
138 | } |
---|
139 | } |
---|
140 | |
---|
141 | /* ------------------------------------------------------ special redimensionnement paysage */ |
---|
142 | @media screen and (max-width:640px) and (orientation: landscape) { |
---|
143 | body { |
---|
144 | -webkit-text-size-adjust: 70%; |
---|
145 | } |
---|
146 | } |
---|
147 | |
---|
148 | /* ------------------------------------------------------ règles communes > 640px */ |
---|
149 | @media only screen and (max-width:639px) { |
---|
150 | body { |
---|
151 | -webkit-text-size-adjust: none; |
---|
152 | } |
---|
153 | #wrapper { |
---|
154 | padding: 0 2%; |
---|
155 | } |
---|
156 | img { |
---|
157 | max-width: 100%; |
---|
158 | height: auto; |
---|
159 | width: auto\9; /* pour ie8 */ |
---|
160 | } |
---|
161 | } |
---|
162 | |
---|
163 | /* ------------------------------------------------------ spécifique 640px à 1024px */ |
---|
164 | @media only screen and (min-width: 640px) and (max-width: 1023px) { |
---|
165 | #wrapper { |
---|
166 | padding: 0 10%; |
---|
167 | } |
---|
168 | #blognav, #blogextra { |
---|
169 | width: 48%; float:left; |
---|
170 | } |
---|
171 | #blognav { |
---|
172 | margin-right: 4%; |
---|
173 | } |
---|
174 | #stickers { |
---|
175 | padding-right: 10%; |
---|
176 | } |
---|
177 | } |
---|
178 | |
---|
179 | /* ------------------------------------------------------ spécifique 840px à 1024px */ |
---|
180 | @media only screen and (min-width: 840px) and (max-width: 1023px) { |
---|
181 | #wrapper { |
---|
182 | padding: 0 13%; |
---|
183 | } |
---|
184 | #stickers { |
---|
185 | padding-right: 13%; |
---|
186 | } |
---|
187 | } |
---|
188 | |
---|
189 | /* ------------------------------------------------------ |
---|
190 | au-delà de 1024px on passe à deux colonnes |
---|
191 | ------------------------------------------------------ */ |
---|
192 | @media only screen and (min-width: 1024px) { |
---|
193 | #wrapper { |
---|
194 | padding: 0 7%; |
---|
195 | } |
---|
196 | #main { |
---|
197 | width : 100%; |
---|
198 | margin : 0 -17em 0 0; |
---|
199 | float : left; |
---|
200 | display: inline; |
---|
201 | } |
---|
202 | #content { |
---|
203 | margin : 0 20em 0 0; |
---|
204 | padding : 0 0 2em 0; |
---|
205 | } |
---|
206 | #sidebar { |
---|
207 | width : 17em; |
---|
208 | float : right; |
---|
209 | } |
---|
210 | #blognav, #blogextra { |
---|
211 | margin : 0; |
---|
212 | } |
---|
213 | #stickers { |
---|
214 | padding-right: 7%; |
---|
215 | } |
---|
216 | #sidebar #blognav div:first-child { |
---|
217 | margin-top: 4.66em; |
---|
218 | } |
---|
219 | #sidebar div#search:first-child { |
---|
220 | background: none; |
---|
221 | margin-top: 0; |
---|
222 | margin-bottom: 2em; |
---|
223 | padding-bottom: 2px; |
---|
224 | font-size: 1em; |
---|
225 | border: 1px solid #ddd; |
---|
226 | border-top: none 0; |
---|
227 | } |
---|
228 | #sidebar div#search:first-child h2 { |
---|
229 | font-size: 1em; |
---|
230 | text-transform: uppercase; |
---|
231 | text-shadow: 0 1px 1px rgba(0,0,0,.2); |
---|
232 | vertical-align: top; |
---|
233 | color: #666; |
---|
234 | } |
---|
235 | #sidebar div#search:first-child p { |
---|
236 | margin: .33em 0; |
---|
237 | } |
---|
238 | } |
---|
239 | |
---|
240 | /* ------------------------------------------------------ |
---|
241 | au-delà de 1280px on décale le post-info à gauche |
---|
242 | ------------------------------------------------------- */ |
---|
243 | @media only screen and (min-width: 1280px) { |
---|
244 | #content { |
---|
245 | margin : 0 20em 0 200px; |
---|
246 | } |
---|
247 | p.post-info { |
---|
248 | margin-left: -200px; |
---|
249 | float: left; |
---|
250 | width: 150px; |
---|
251 | text-align: right; |
---|
252 | } |
---|
253 | .dc-archive-month p.post-info { |
---|
254 | margin-left: 0; |
---|
255 | float:none; |
---|
256 | width: auto; |
---|
257 | text-align: left; |
---|
258 | } |
---|
259 | } |
---|
260 | |
---|
261 | /* ------------------------------------------------------ au-delà de 1600px */ |
---|
262 | @media only screen and (min-width: 1600px) { |
---|
263 | #wrapper { |
---|
264 | padding: 0 10%; |
---|
265 | } |
---|
266 | #stickers { |
---|
267 | padding-right: 10%; |
---|
268 | } |
---|
269 | } |
---|