Dotclear

source: themes/ductile/mediaqueries.css @ 391:77ce8f145513

Revision 391:77ce8f145513, 5.5 KB checked in by kozlika, 14 years ago (diff)

Ductile, bugfix for colorpicker. Workaround on colorpicker.js with an old bug. Needs javascript sorcerer.

(La ligne 38 ne fonctionne pas comme elle le devrait.)

Line 
1@charset "UTF-8";
2
3/* seuils retenus :
4jusqu'à 480px: tout en une colonne, sidebar et stickers en bas
5480px: stickers en haut
6640px: sidebar toujours en bas mais divisé en deux colonnes
71024px: passage à deux colonnes, sidebar à droite
81280px: décalage du post-info vers la gauche
91600px: 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}
Note: See TracBrowser for help on using the repository browser.

Sites map