Changeset 51554 in spip-zone


Ignore:
Timestamp:
Sep 17, 2011, 3:45:52 PM (9 years ago)
Author:
real3t@…
Message:

Adapter l'affichage en fonction de la résolution (Mobiles, tablettes) : cf http://www.alsacreations.com/astuce/lire/1177

3 modes d'affichage :

  • classique
  • moins de 640px de large : tout est sur une seule colonne
  • entre les 2 : le texte sur une seule colonne, mais le cartouche (Quoi de neuf, dans la même rubrique) flotte toujours à droite, menus principal et secondaire sur 2 colonnes en dessous du texte.
Location:
_squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/noisettes/header/header.html

    r50565 r51554  
    33<head><title>[(#ENV{title}|sinon{<:soyezcreateurs:sommaire:>})] - [(#NOM_SITE_SPIP|textebrut)]</title>
    44<meta http-equiv="content-type" content="text/html; charset=#CHARSET" />
     5<meta name="viewport" content="width=device-width" />
    56<BOUCLE_Icra(MOTS){type=_HTTP-EQUIV}{titre=pics-label}{texte!=}><link rel="meta" href="#URL_SITE_SPIP/labels.rdf" type="application/rdf+xml" title="ICRA labels" /></BOUCLE_Icra>
    67<BOUCLE_http-equiv(MOTS){type=_HTTP-EQUIV}{par titre}>[<meta[ http-equiv='(#TITRE|attribut_html)'] content='(#TEXTE|attribut_html|sc_replace{&quot;,'"'})' />]</BOUCLE_http-equiv>
  • _squelettes_/soyezcreateurs_net/plugins_2.1/plugins/soyezcreateurs/stylessoyezcreateurs.css.html

    r49856 r51554  
    204204[(#REM) Si titre visible OU pas de logo de survol du site ]
    205205[(#CONFIG{soyezcreateurs/afficher_titre,invisible}|=={visible}|oui|?{' ',[(#LOGO_SITE_SPIP_SURVOL|non)]})
    206 #header h1 { float:left; margin:0; padding:0 1em; }
     206#header h1 { float:left; margin:0; padding:0 1em; text-shadow: 4px 4px 4px #GET{c_header_bk};}
    207207#header h1, #header h1 a, #header h1 a:link, #header h1 a:visited, #header h1 a:hover, #header h1 a:focus, #header h1 a:active { color: #GET{c_header}; }
    208208]
     
    272272#extra { background-color: #GET{c_extra_bk}; color: #GET{c_extra}; font-size: #CONFIG{soyezcreateurs_couleurs/fontsizenavigation,1.2}em; }
    273273#extra ul ul li { padding: 0; padding-right:0; padding-left:10px; margin: 0; }
    274 #extra ul ul li a { overflow: hidden; width: [(#GET{LargeurMenuDroit}|moins{35})]px; padding: 0; padding-right:0; padding-left:15px; margin: 1px 0 0; }
     274#extra ul ul li a { overflow: hidden; padding: 0; padding-right:0; padding-left:15px; margin: 1px 0 0; }
    275275.rightmenu li a { display: block; padding: 5px 0; padding-right:0; padding-left:15px; margin: 3px 0; background: #GET{c_menu_a_bk}; color: #GET{c_menu_a}; font-weight: bold; text-decoration: none; }
    276276.rightmenu li a:link { }
     
    679679.agendaderniersajouts { text-align: left; }
    680680/* bloc citations */
    681 #citations { position: relative; overflow: hidden; padding: 0; margin-top:2em; margin-right: 10px; margin-bottom: .5em; margin-left: 10px; width: [(#GET{LargeurMenuDroit}|moins{20})]px; }
     681#citations { position: relative; overflow: hidden; padding: 0; margin-top:2em; margin-right: 10px; margin-bottom: .5em; margin-left: 10px; }
    682682#citations dt { overflow: hidden; padding: .25em .5em; margin: 0; background-color: #GET{c_menu_a_bk}; border-bottom: solid 1px[ #(#GET{c_menu_a_bk}|couleur_foncerluminosite)]; -moz-border-radius-topright: .5em; -webkit-border-top-right-radius: .5em; -moz-border-radius-topleft: .5em; -webkit-border-top-left-radius: .5em; color: #GET{c_menu_a}; font-family: #GET{f_content}; font-size: 1.1em; font-weight: bold; }
    683683#citations dd { background-color:[ #(#GET{c_menu_a_bk}|couleur_inverserluminosite{80})];
     
    10531053]
    10541054
    1055 
    1056 
     1055/* Pour les mobiles, inspiré de http://www.alsacreations.com/astuce/lire/1177 */
     1056#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
     1057#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,160})}
     1058#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,140})}
     1059
     1060
     1061@media (max-width: [(#GET{LargeurContaineur})]px) {
     1062
     1063 /* passer tous les éléments de largeur fixe en largeur automatique */
     1064 body, #container, #content {
     1065   width: auto !important;
     1066   margin: auto !important;
     1067   padding: auto !important;
     1068 }
     1069 #menu {
     1070   width: auto !important;
     1071 }
     1072
     1073 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
     1074 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
     1075   max-width: 100% !important;
     1076 }
     1077
     1078 /* gestion des mots longs */
     1079 textarea, table, td, th, code, pre, samp {
     1080   word-wrap: break-word; /* césure forcée */
     1081 }
     1082 code, pre, samp {
     1083   white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */
     1084 }
     1085
     1086 #navigation, #extra, #content {
     1087   height: auto !important;
     1088 }
     1089
     1090 #navigation, #extra {
     1091   width: 50% !important;
     1092   margin: auto !important;
     1093   padding: auto !important;
     1094 }
     1095
     1096 /* masquer les éléments superflus */
     1097 .hide_mobile {
     1098   display: none !important;
     1099 }
     1100}
     1101
     1102@media (max-width: 640px) {
     1103
     1104 /* passer tous les éléments de largeur fixe en largeur automatique */
     1105 #artrecents {
     1106   width: auto !important;
     1107   margin: auto !important;
     1108   padding: auto !important;
     1109   display: block;
     1110   max-height: auto;
     1111 }
     1112
     1113 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
     1114 #wrapper, #navigation, #extra, #artrecents {
     1115   float: none !important;
     1116   width: auto !important
     1117 }
     1118}
     1119
     1120@media screen and (max-width:640px) and (orientation: landscape) {
     1121  body {
     1122   -webkit-text-size-adjust: 70%;
     1123  }
     1124}
Note: See TracChangeset for help on using the changeset viewer.