[SPIP][PLUGINS] v3.0-->v3.2

[lhc/web/www.git] / www / squelettes-dist / css / layout.css

diff --git a/www/squelettes-dist/css/layout.css b/www/squelettes-dist/css/layout.css
index b6f4cf6..bd33db3 100644 (file)
--- a/www/squelettes-dist/css/layout.css
+++ b/www/squelettes-dist/css/layout.css
@@ -6,40 +6,42 @@
 
 -------------------------------------------------------------- */
 
-body { text-align: center; background: #FFF url(img/background.png); border-top: 5px solid; }
-.page { position: relative; width: 900px; margin: 0 auto; padding: 50px 1.5em; text-align: left;  }
-
+/* Elements principaux
+------------------------------------------ */
+body { text-align: center; background:#ddd;}
+.page { position: relative; width: 960px; max-width:95%; margin:2em auto; text-align: left;  }
 .header {}
 .main { padding: 1.5em 0; }
-.footer { clear: both; padding: 1.5em 0 0; border-top: 2px solid; }
+.footer { clear: both; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid #999; }
 
+/* largeur calculee du wrapper: 960*70%  = 672px */
 .wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
 .content { min-height: 350px; }
-.aside { float: right; width: 25%; overflow: hidden; }
-
-
+/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
+.aside { float: right; width: 23.333%; overflow: hidden; }    
+  
 /* Entete et barre de navigation
 ------------------------------------------ */
-
-.header { padding-bottom: 1.5em; padding-right: 30%; border-bottom: 1px solid; }
-.header #logo { display: block; margin: 0; line-height: 1; font-weight: bold;  }
-.header #logo,
-.header #logo a,
-.header #logo a:hover { background: transparent; text-decoration: none; color: #222; }
+.header { padding-bottom: 1.5em;  }
+.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold;  }
+.header .spip_logo_site,
+.header .spip_logo_site a,
+.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#222; }
+.header .spip_logo_site a:hover  {color:#db1762;}
+.header .spip_logo_site a:hover img {opacity:0.7;}
+.header .spip_logo {margin-bottom:0;}
 .header #slogan { margin: 0; }
 
 .formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }
 
-.nav { border: solid #222; border-width: 1px 0; }
-.nav ul {}
-.nav ul li {}
-.nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 1px solid #222; text-decoration: none; }
-.nav ul li.on a { background: #EED; color: #222; font-weight: normal; }
-.nav ul li a:focus,
-.nav ul li a:hover,
-.nav ul li a:active { background: #222; color: #FFF; }
-
-#formulaire_recherche { position: absolute; top: 50px; right: 50px; border: 0; }
+.nav {}
+.nav li {display:inline;}
+.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; }
+.nav li.on a { background:#c41558; color:#fff; font-weight: normal; }
+.nav li a:focus,
+.nav li a:hover,
+.nav li a:active { background: #c41558; color:#fff; }
+ 
 
 .footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
 .footer .generator { float: right; }
@@ -48,44 +50,43 @@ body { text-align: center; background: #FFF url(img/background.png); border-top:
 /* Gabarit d'impression
 ------------------------------------------ */
 @media print {
-.page,
-.wrapper,
-.content { width: auto; }
-.nav,
-.arbo,
-.aside,
-.footer { display: none; }
+    .page,
+    .wrapper,
+    .content { width: auto; }
+    .nav,
+    .arbo,
+    .aside,
+    .footer { display: none; }
 }
 
-/* Affichage sur petits ecrans
+/* Affichage sur petits ecrans  
 Cf.: http://www.alsacreations.com/astuce/lire/1177
 ------------------------------------------ */
-@media (max-width: 640px) {
-
-/* passer tous les elements de largeur fixe en largeur automatique */
-body,
-.page,
-.header,
-.main,
-.footer,
-.wrapper,
-.content,
-.aside { width: auto !important; margin: auto !important; }
-
-.page { margin: 0; padding: 5%; }
 
-/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
-.content,
-.aside { clear: both; float: none !important; width: auto !important; }
-.nav ul li a { float: none; border: 0; }
-#formulaire_recherche { display: none; position: static; text-align: center; }
-.arbo { display: none; }
-.footer .colophon { width: auto; float: none; }
-.footer .generator { display: none; }
-
-/* header du calendrier full-calendar */
-table.fc-header td { display: block; text-align: left; }
+/* largeur maximum 767px */
+@media (max-width: 767px) {
+       body {          width: 100%;            padding: 0 20px;        }
+       .page {         width: 100%;    max-width: none;        }
+}
+ 
+/* largeur maximum 640px */
+@media (max-width: 640px) {
+     /* layout */
+    .wrapper,
+    .content,
+    .aside { width: 100%;}
+    .content,
+    .aside { clear: both; float: none; width: 100%; }
+
+    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
+    .nav ul li a { float: none; border: 0; }
+    .arbo { display: none; }
+    .footer .colophon { width: auto; float: none; }
+    .footer .generator { display: none; }
+
+    /* header du calendrier full-calendar */
+    table.fc-header td { display: block; text-align: left; }
 
 }
 
-/* end */
\ No newline at end of file
+/* fin */
\ No newline at end of file