Changeset 386:c309e69e93ae for themes/ductile/mediaqueries.css

Timestamp:

06/18/11 08:42:01 (14 years ago)

Author:

kozlika

Branch:

themes

Message:

Ductile, jour 5 in progress. Sidebar width now in em unit (and other background-color). Some mobile screen adjustments.

File:

• themes/ductile/mediaqueries.css (modified) (16 diffs)

themes/ductile/mediaqueries.css

@@ -2 +2 @@
 
 /* seuils retenus :
-480px
-640px
-1024px
-1280px
------------------ */
-
+jusqu'à 480px: tout en une colonne, sidebar et stickers en bas
+480px: stickers en haut
+640px: sidebar toujours en bas mais divisé en deux colonnes
+1024px: passage à deux colonnes, sidebar à droite
+1280px: décalage du post-info vers la gauche
+1600px: marges plus grandes */
+
+/* --------------------------------------------------------------------
+     Téléphones (moins de 480px)
+-------------------------------------------------------------------- */
 @media only screen and (max-width:480px) {
      #prelude, #blogdesc, #supranav span {
           display: none !important;
           }
-
      h1 {
           font-size: 1.8em;
@@ -25 +28 @@
           border-bottom: 1px solid #ccc;
           }
-
      #supranav {
           border:none;
@@ -36 +38 @@
           border-bottom: 1px solid #ccc;
           }
-
      h2.post-title {
-          font-size: 2.5em;
-          }
-
+          font-size: 2em;
+          }
      #stickers {
           margin: 0;
@@ -52 +52 @@
           padding-left: 0;
           border: 2px solid #fff;
-          border-left: 8px solid #fff;
-          border-right: 8px solid #fff;
+          border-left: 6px solid #fff;
+          border-right: 6px solid #fff;
           }
      #stickers img {
@@ -67 +67 @@
           }
 }
+
+/* --------------------------------------------------------------------
+     Autres (plus de 480px)
+-------------------------------------------------------------------- */
 
 @media only screen and (min-width: 481px) {
@@ -78 +82 @@
           margin-left: 32px;
           }
-
      #supranav {
           margin: 36px 0 0;
@@ -95 +98 @@
           display: block;
           }
-
      #stickers {
           position: absolute;
@@ -113 +115 @@
           }
      h2.post-title {
-          font-size: 2.8em;
+          font-size: 2.6em;
           }
      #stickers li a:hover,
@@ -123 +125 @@
 }
 
+/* ------------------------------------------------------ special redimensionnement paysage */
+@media screen and (max-width:640px) and (orientation: landscape) { 
+  body { 
+   -webkit-text-size-adjust: 70%; 
+  } 
+}
+
+/* ------------------------------------------------------ règles communes > 640px */
 @media only screen and (max-width:639px) {
-     html {
+     body {
           -webkit-text-size-adjust: none;
           }
@@ -137 +147 @@
 }
 
+/* ------------------------------------------------------ spécifique 640px à 1024px */
 @media only screen and (min-width: 640px) and (max-width: 1023px) {
      #wrapper {
@@ -152 +163 @@
 }
 
+/* ------------------------------------------------------ spécifique 840px à 1024px */
 @media only screen and (min-width: 840px) and (max-width: 1023px) {
      #wrapper {
@@ -161 +173 @@
 }
 
+/* ------------------------------------------------------ 
+     au-delà de 1024px on passe à deux colonnes
+------------------------------------------------------ */
 @media only screen and (min-width: 1024px) {
      #wrapper {
@@ -167 +182 @@
      #main {
           width : 100%;
-          margin : 0 -22% 0 0;
+          margin : 0 -17em 0 0;
           float : left;
           display: inline;
           }
      #content {
-          margin : 0 30% 0 0;
+          margin : 0 20em 0 0;
           padding : 0 0 2em 0;
           }
      #sidebar {
-          width : 22%;
+          width : 17em;
           float : right;
           }
@@ -185 +200 @@
           padding-right: 7%;
           }
-
      #sidebar #blognav div:first-child {
           margin-top: 4.66em;
@@ -205 +219 @@
           color: #666;
           }
-     #sidebar div#search p {
+     #sidebar div#search:first-child p {
           margin: .33em 0;
           }
 }
 
+/* ------------------------------------------------------ 
+     au-delà de 1280px on décale le post-info à gauche
+------------------------------------------------------- */
 @media only screen and (min-width: 1280px) {
      #content {
-          margin : 0 30% 0 200px;
+          margin : 0 20em 0 200px;
           }
      p.post-info { 
@@ -228 +245 @@
 }
 
+/* ------------------------------------------------------ au-delà de 1600px */
 @media only screen and (min-width: 1600px) {
      #wrapper {
-          padding: 0 12%;
-          }
-     #stickers {
-          padding-right: 12%;
-          }
-}
+          padding: 0 10%;
+          }
+     #stickers {
+          padding-right: 10%;
+          }
+}