Changeset 51547 in spip-zone

Timestamp:

Sep 17, 2011, 12:14:41 PM (9 years ago)

Author:

romy@…

Message:

La dist passe désormais sur petits écrans (mobiles, popup, etc.)

Location:

_core_/plugins/dist/css

Files:

• layout.css (modified) (3 diffs)
• typo.css (modified) (1 diff)

_core_/plugins/dist/css/layout.css

@@ -11 +11 @@
 
 .header {}
-.main { margin: 1.5em 0; }
+.main { padding: 1.5em 0; }
 .footer { clear: both; padding: 1.5em 0; border-top: 4px solid; }
 
@@ -17 +17 @@
 .content { min-height: 350px; }
 .aside { float: right; width: 25%; overflow: hidden; }
-
-/* Gabarit d'impression */
-@media print {
-        .nav,
-        .arbo,
-        .aside,
-        .footer { display: none; }
-        .header { margin-bottom: 1.5em; }
-        .page,
-        .wrapper,
-        .content { width: auto; }
-}
 
 
@@ -56 +44 @@
 .footer .colophon { float: left; height: 40px; width: 90%; font-size: .9em; }
 .footer .generator { float: right; }
+.footer .generator a { padding: 0; background: none; }
+
+/* Gabarit d'impression
+------------------------------------------ */
+@media print {
+.page,
+.wrapper,
+.content { width: auto; }
+.nav,
+.arbo,
+.aside,
+.footer { display: none; }
+}
+
+/* Affichage sur petits ecrans
+Cf.: http://www.alsacreations.com/astuce/lire/1177
+------------------------------------------ */
+@media (max-width: 640px) {
+
+/* passer tous les éléments de largeur fixe en largeur automatique */
+body,
+.page,
+.header,
+.main,
+.footer,
+.wrapper,
+.content,
+.aside { width: auto !important; margin: auto !important; padding: auto !important; }
+
+.page { margin: 0; padding: 1%; }
+
+/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
+.content,
+.aside { clear: both; float: none !important; width: auto !important; }
+#formulaire_recherche { display: none; position: static; text-align: center; }
+.arbo { display: none; }
+
+}
 
 /* end */

_core_/plugins/dist/css/typo.css

@@ -113 +113 @@
 }
 
+/* Affichage sur petits ecrans
+Cf.: http://www.alsacreations.com/astuce/lire/1177
+------------------------------------------ */
+@media (max-width: 640px) {
+
+        /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
+        img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
+        
+        /* gestion des mots longs */
+        textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* césure forcée */ }
+        code, pre, samp { white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */ }
+
+}
+
+@media screen and (max-width:640px) and (orientation: landscape) {
+        body { -webkit-text-size-adjust: 70%; }
+}
+
 /* end */