Changeset 51547 in spip-zone


Ignore:
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:
2 edited

Legend:

Unmodified
Added
Removed
  • _core_/plugins/dist/css/layout.css

    r51544 r51547  
    1111
    1212.header {}
    13 .main { margin: 1.5em 0; }
     13.main { padding: 1.5em 0; }
    1414.footer { clear: both; padding: 1.5em 0; border-top: 4px solid; }
    1515
     
    1717.content { min-height: 350px; }
    1818.aside { float: right; width: 25%; overflow: hidden; }
    19 
    20 /* Gabarit d'impression */
    21 @media print {
    22         .nav,
    23         .arbo,
    24         .aside,
    25         .footer { display: none; }
    26         .header { margin-bottom: 1.5em; }
    27         .page,
    28         .wrapper,
    29         .content { width: auto; }
    30 }
    3119
    3220
     
    5644.footer .colophon { float: left; height: 40px; width: 90%; font-size: .9em; }
    5745.footer .generator { float: right; }
     46.footer .generator a { padding: 0; background: none; }
     47
     48/* Gabarit d'impression
     49------------------------------------------ */
     50@media print {
     51.page,
     52.wrapper,
     53.content { width: auto; }
     54.nav,
     55.arbo,
     56.aside,
     57.footer { display: none; }
     58}
     59
     60/* Affichage sur petits ecrans
     61Cf.: http://www.alsacreations.com/astuce/lire/1177
     62------------------------------------------ */
     63@media (max-width: 640px) {
     64
     65/* passer tous les éléments de largeur fixe en largeur automatique */
     66body,
     67.page,
     68.header,
     69.main,
     70.footer,
     71.wrapper,
     72.content,
     73.aside { width: auto !important; margin: auto !important; padding: auto !important; }
     74
     75.page { margin: 0; padding: 1%; }
     76
     77/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
     78.content,
     79.aside { clear: both; float: none !important; width: auto !important; }
     80#formulaire_recherche { display: none; position: static; text-align: center; }
     81.arbo { display: none; }
     82
     83}
    5884
    5985/* end */
  • _core_/plugins/dist/css/typo.css

    r51132 r51547  
    113113}
    114114
     115/* Affichage sur petits ecrans
     116Cf.: http://www.alsacreations.com/astuce/lire/1177
     117------------------------------------------ */
     118@media (max-width: 640px) {
     119
     120        /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
     121        img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
     122       
     123        /* gestion des mots longs */
     124        textarea, table, td, th, code, pre, samp { word-wrap: break-word; /* césure forcée */ }
     125        code, pre, samp { white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */ }
     126
     127}
     128
     129@media screen and (max-width:640px) and (orientation: landscape) {
     130        body { -webkit-text-size-adjust: 70%; }
     131}
     132
    115133/* end */
Note: See TracChangeset for help on using the changeset viewer.