www/squelettes-dist/css/layout.css

   1 /* --------------------------------------------------------------
   2
   3    layout.css
   4    Disposition des blocs principaux
   5    cf.: http://romy.tetue.net/structure-html-de-base
   6
   7 -------------------------------------------------------------- */
   8
   9 /* Elements principaux
  10 ------------------------------------------ */
  11 body { text-align: center; background:#ddd;}
  12 .page { position: relative; width: 960px; max-width:95%; margin:2em auto; text-align: left;  }
  13 .header {}
  14 .main { padding: 1.5em 0; }
  15 .footer { clear: both; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid #999; }
  16
  17 /* largeur calculee du wrapper: 960*70%  = 672px */
  18 .wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
  19 .content { min-height: 350px; }
  20 /* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
  21 .aside { float: right; width: 23.333%; overflow: hidden; }
  22
  23 /* Entete et barre de navigation
  24 ------------------------------------------ */
  25 .header { padding-bottom: 1.5em;  }
  26 .header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold;  }
  27 .header .spip_logo_site,
  28 .header .spip_logo_site a,
  29 .header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#222; }
  30 .header .spip_logo_site a:hover  {color:#db1762;}
  31 .header .spip_logo_site a:hover img {opacity:0.7;}
  32 .header .spip_logo {margin-bottom:0;}
  33 .header #slogan { margin: 0; }
  34
  35 .formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }
  36
  37 .nav {}
  38 .nav li {display:inline;}
  39 .nav li a { display: inline-block; padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 0.25em;  text-decoration: none;  background: #f0f0f0; color: #db1762; }
  40 .nav li.on a { background:#c41558; color:#fff; font-weight: normal; }
  41 .nav li a:focus,
  42 .nav li a:hover,
  43 .nav li a:active { background: #c41558; color:#fff; }
  44
  45
  46 .footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
  47 .footer .generator { float: right; }
  48 .footer .generator a { padding: 0; background: none; }
  49
  50 /* Gabarit d'impression
  51 ------------------------------------------ */
  52 @media print {
  53     .page,
  54     .wrapper,
  55     .content { width: auto; }
  56     .nav,
  57     .arbo,
  58     .aside,
  59     .footer { display: none; }
  60 }
  61
  62 /* Affichage sur petits ecrans
  63 Cf.: http://www.alsacreations.com/astuce/lire/1177
  64 ------------------------------------------ */
  65
  66 /* largeur maximum 767px */
  67 @media (max-width: 767px) {
  68         body {          width: 100%;            padding: 0 20px;        }
  69         .page {         width: 100%;    max-width: none;        }
  70 }
  71
  72 /* largeur maximum 640px */
  73 @media (max-width: 640px) {
  74      /* layout */
  75     .wrapper,
  76     .content,
  77     .aside { width: 100%;}
  78     .content,
  79     .aside { clear: both; float: none; width: 100%; }
  80
  81     /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
  82     .nav ul li a { float: none; border: 0; }
  83     .arbo { display: none; }
  84     .footer .colophon { width: auto; float: none; }
  85     .footer .generator { display: none; }
  86
  87     /* header du calendrier full-calendar */
  88     table.fc-header td { display: block; text-align: left; }
  89
  90 }
  91
  92 /* fin */