Browse Source

- Ajout de respond.js une librairie JavaScript qui apporte un support minimaliste des media queries pour IE(6,7 et 8)

- Ajout de meta et de Google Font-Face dans le fichier inc-insert-head.html
- Modification du contenu de plugin.xml
- Modification des css (Organisation et nettoyage + debug IE8) et ajout d'animation en CSS
master
claffont@openstudio.fr 11 years ago
parent
commit
b3be55abd6
  1. 3
      .gitattributes
  2. 8
      css/box.css
  3. 8
      css/box_skins.css
  4. 194
      css/layout.css
  5. 887
      css/theme.css
  6. 17
      inc-insert-head.html
  7. 326
      js/respond.js
  8. 298
      js/script.js
  9. 8
      plugin.xml

3
.gitattributes vendored

@ -1,4 +1,6 @@
* text=auto !eol
css/box.css -text
css/box_skins.css -text
css/button.css -text
css/img/404.png -text
css/img/blog_author.png -text
@ -17,6 +19,7 @@ css/style.css -text
css/theme.css -text
/inc-insert-head.html -text
js/jquery.mobilemenu.js -text
js/respond.js -text
js/script.js -text
/licence.txt -text
/plugin.xml -text

8
css/box.css

@ -0,0 +1,8 @@
/* --------------------------------------------------------------
box.css
Structure des blocs
-------------------------------------------------------------- */
/* end */

8
css/box_skins.css

@ -0,0 +1,8 @@
/* --------------------------------------------------------------
box_skins.css
Contour des blocs
-------------------------------------------------------------- */
/* end */

194
css/layout.css

@ -1,111 +1,85 @@
/* --------------------------------------------------------------
layout.css
Disposition des blocs principaux
cf.: http://romy.tetue.net/structure-html-de-base
-------------------------------------------------------------- */
body { font: 12px/1.7 Helvetica, Arial, Tahoma, sans-serif; color:#666666; text-align: center; background: #fff; }
.page { }
.header { padding: 90px 0 40px 0; background: #403830 url(img/header-bg.jpg) repeat-x; }
.main { overflow: hidden; }
.footer { clear: both; margin-top: 1.5em; padding: 2em 0; position: relative; border-top: 1px solid #453C34; background: #403830; }
.wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
.content { min-height: 350px; }
.page_404 .content { background: url(img/404.png) no-repeat 0 100px; }
.page_404 .chapo { margin-top: 130px; margin-left: 200px; width: 350px; font-size: 2em; font-family: 'Courier New', Courier, monospace; line-height: 1.5; }
.aside { float: right; width: 26%; overflow: hidden; }
/* Centrer le layout
------------------------------------------ */
.header #logo, .header #slogan,
.menu-conteneur,
.main,
.footer .colophon { position: relative; width: 900px; margin: 0 auto; text-align: left; }
/* Gabarit d'impression
------------------------------------------ */
@media print {
/* * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
@page { margin: 0.5cm; }
h2, h3 { orphans: 3; widows: 3; page-break-after: avoid; }
p { orphans: 3; widows: 3; }
pre, blockquote { border: 1px solid #808080; page-break-inside: avoid; }
abbr[title]:after { content: " (" attr(title) ")"; }
a, a:visited { text-decoration: underline; }
img { max-width: 100% !important; page-break-inside: avoid; }
thead { display: table-header-group; }
tr { page-break-inside: avoid; }
*/
.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: 900px) {
/* Afficher le contenu en Plein ecran
------------------------------------------ */
.header #logo, .header #slogan,
.menu-conteneur, .main,
.footer .colophon { width: auto!important; overflow: visible }
.page { margin: 0; }
.header, .main, .footer { padding-left: 1em; padding-right: 1em; }
}
@media (max-width: 640px) {
body { background: white; font: 11px/1.5 Helvetica, Arial, Tahoma, sans-serif; }
/* Passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.main,
.footer,
.wrapper,
.content,
.aside { clear: both; float: none !important; margin: auto!important; padding: auto!important; width: auto!important; }
/* header du calendrier full-calendar */
table.fc-header td { display: block; text-align: left; border: 1px solid red }
/* 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%; }*/
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding
img {
height: auto; width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}*/
/* gestion des mots longs */
textarea, table, td, th, code, pre, samp {
word-wrap: break-word; /* passage à la ligne forcé */
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
}
code, pre, samp { white-space: pre-wrap; } /* passage à la ligne spécifique pour les éléments à châsse fixe */
}
/* --------------------------------------------------------------
layout.css
Disposition des blocs principaux
cf.: http://romy.tetue.net/structure-html-de-base
-------------------------------------------------------------- */
body { background: #fff; color:#666; font: 12px/1.7 Helvetica, Arial, Tahoma, sans-serif; text-align: center; }
.page { }
.header { background: #403830 url(img/header-bg.jpg) repeat-x; padding: 90px 0 20px 0; }
.main { clear: both; }
.footer { background: #403830; border-top: 1px solid #453C34; clear: both; margin-top: 1.5em; padding: 2em 0; position: relative; }
.wrapper { clear: both; float: left; width: 70%; }
.content { min-height: 350px; }
.page_404 .content { background: url(img/404.png) no-repeat 0 100px; }
.page_404 .chapo { font-family: 'Courier New', Courier, monospace; font-size: 2em; line-height: 1.5; margin-top: 130px; margin-left: 200px; width: 350px;}
.aside { float: right; overflow: hidden; width: 26%; }
/* Centrer le layout
------------------------------------------ */
.header #logo, .header #slogan,
.menu-conteneur,
.main, .nav,
.footer .colophon { margin: 0 auto; position: relative; text-align: left; width: 900px; }
/* 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: 900px) {
/* Afficher le contenu en Plein ecran
------------------------------------------ */
.header #logo, .header #slogan,
.menu-conteneur, .main, .nav,
.footer .colophon { overflow: visible; width: auto!important; }
.page { margin: 0; }
.header, .main, .footer { padding-left: 1em; padding-right: 1em; }
}
@media (max-width: 640px) {
body { background: white; font: 11px/1.5 Helvetica, Arial, Tahoma, sans-serif; }
/* Passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.main,
.footer,
.wrapper,
.content,
.aside { clear: both; float: none !important; margin: auto!important; padding: auto!important; width: auto!important; }
/* On remonte le header et on cache les icons */
.header { background-position: -0 -60px; padding: 20px 10px; }
.socialtags { display:none;}
/* header du calendrier full-calendar */
table.fc-header td { display: block; text-align: left; border: 1px solid red }
/* Pas de hauteur minimum pour les mobiles */
.content { min-height: inherit; }
}
/* end */

887
css/theme.css

@ -1,431 +1,456 @@
/* --------------------------------------------------------------
theme.css
Definition des styles pour Brownie
# Couleurs du site
@header - #
@heading - #
@link - #
@link:hover - #
@footer - #
-------------------------------------------------------------- */
::selection { background: #2e2823; color: #FFFFFF; }
::-moz-selection { background: #2e2823; color: #FFFFFF; }
/* ------------------------------------------
/* Habillage des elements du contenu
/* ------------------------------------------ */
/* Titraille / Intertitres */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: #453C34; font-family: Helvetica, Arial, Tahoma, sans-serif; line-height: 1; margin-bottom: 1em; }
hr { background: #D9D9D9; }
.arbo { clear: both; font-size: .9em; color: #DDC; color: #453C34; }
.arbo * { font-weight: normal; }
.cartouche { margin-bottom: 1.5em; }
.cartouche .spip_logos { /*float: right; margin: -30px 0 0 0; width: auto; height: 60px;*/ background: #fff; padding-right: 1em; padding-bottom: .5em; }
.cartouche h1 { font-size: 25px; color: #453C34; border-bottom: 1px solid #d9d9d9; margin: 10px 0; padding: 0 0 10px 0; }
.cartouche p { margin-bottom: 0; }
.surtitre{}
.soustitre {}
.info-publi abbr.published,
abbr.dtreviewed,
.menu_articles small,
.aside .menu_breves small { background: url("img/blog_date.png") no-repeat center left; border: 0; color: #A6A6A6; font-size: 11px; font-style: normal; line-height: 11px; margin-bottom: .6em; padding: 3px 0 0 18px; }
@media print {
abbr[title].published:after { content: ""; }
abbr[title].dtreviewed:after { content: ""; }
}
.info-publi { margin: 1.5em 0 0; font-size: .9em; font-style: italic; }
.traductions { border: 1px dotted lightgrey; font-size: .9em; line-height: 1.5; margin: 1.5em 0; padding: 1em; text-align: center }
.traductions a[hreflang]:after { content: ''; }
.chapo { color: #D8C0A8; font-size: 1.4em; font-style: italic; font-weight: normal; line-height: 1.4; letter-spacing: -0.5px; }
.chapo p { margin-bottom: .5em; }
.texte {}
.hyperlien { display: block; padding: 1.5em 50px; background: #F9F4E1 url(img/def.png) no-repeat 25px 1.9em; font-weight: bold; }
.ps, .notes { margin-bottom: 1.5em; }
.notes { clear: both; font-size: .9em; }
.surlignable { }
.enclosures { margin: .5em; }
/* Citations, code et poesie */
.spip_code { color:#777; }
.spip_cadre { color:#777; background-color: #fff; border: 1px solid #ddd; }
blockquote, blockquote.spip, .spip_poesie { background: none; border-left: 4px solid #D8C0A8; font-style: italic; padding: 0 25px; }
/* Listes et tableaux */
dl.spip dt { background: url(img/def.png) no-repeat 25px .5em; }
dl.spip dd {}
table.spip caption { background: none; border-bottom: 1px solid; text-align: left; font-weight: bold; }
table.spip thead th { background: none; border: 1px solid; border-width: 1px 0; }
table.spip tbody tr th,
table.spip tr td { background: none; }
table.spip tbody tr.odd th,
table.spip tr.odd td { background: #F9F4E1; }
table.spip tfoot { border-top: 1px solid; }
/* Formulaires : variantes et cas particuliers
----------------------------------------------- */
.formulaire_spip { clear: both; margin: 1.5em 0; border: 1px solid #F0F0F0; background: #f8f8f8; padding: 2em 1em 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.aside .formulaire_spip { margin-top: 1em; padding: 2em 1em 1em; }
fieldset { margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; width: 100%; }
legend { display: none; }
label { display: block; color: #262626; font-weight: bold; }
.erreur_message { display: block; }
input.text,textarea {
width: 100%;
-ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
background-color: #fff; border: 1px solid lightgrey; margin-bottom: 1em; padding: 4px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.content input.text { width: 50%; }
textarea { width: 100%; }
/* Success, info, notice and error/alert boxes (from BluePrint) */
.error p, .alert p, .notice a, .success p, .info p { margin-bottom: 0; }
/* Selection des langues */
.formulaire_menu_lang { margin: 0; padding: 0; background: none; }
.header .formulaire_menu_lang { position: absolute; right: 0; top: .90em; display: block; width: 30%; }
.header .formulaire_menu_lang select {width: 100%;}
.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }
/* Formulaires de recherche (site / petitions) */
.formulaire_recherche { border: none; background: none; margin: 0 !important; padding: 0 !important; position: absolute; top: 0; left: 0; width: 100%; }
.formulaire_recherche .text { width: 100%; padding-left: 20px; background: url(img/recherche.png) no-repeat left center; }
.formulaire_recherche input.submit { display: none; }
/*.formulaire_recherche label { display: block; }
.formulaire_recherche input.text { width: 80%; padding-left: 20px; background-image: url(img/recherche.png); background-repeat: no-repeat; background-position: left center; }
.formulaire_recherche input.submit { float: right; margin: 0; padding: 0; }
.formulaire_recherche input.text { color:#bababa; margin:0; padding:5px; background: #fafafa; border: none; }
#navigation .formulaire_recherche input.text{width:175px}
.formulaire_recherche input.submit{text-indent:-1000px;width:25px;height:24px;border:0;background:#fff url("//nutzme5.loiseau2nuit.net/themes/zpip-2/trad_spip/css/img/search.gif") no-repeat top left}
.formulaire_recherche label{display:none}*/
/* Choix des mots-clefs */
ul.choix_mots { display: block; margin: 0; padding: 0; list-style: none; }
ul.choix_mots li { clear: none; float: left; display: block; width: 30%; margin: 0; padding: 1%; }
ul.choix_mots li label { display: inline; font-weight: normal; }
.formulaire_spip .bugajaxie { display: none; } /*IE/Win*/
/* Formulaire de login dans une page */
.formulaire_login ul li { clear: left; }
.formulaire_login .editer_password .details { display: block; }
.formulaire_login #spip_logo_auteur { float: right; }
/* Fomulaire de contact */
.formulaire_ecrire_auteur {}
.formulaire_ecrire_auteur .saisie_sujet_message_auteur input.text { width: 100%; }
/* Habillage des forums
---------------------------------------------- */
/* Habillage des forums */
.comments-items .comments-items { margin-left: 50px; }
.comments-items .comment-item { border-top: 1px solid #e6e6e6; margin: 0; padding: 0 0 0 30px; position: relative; }
.comments-items span.permalink { position: absolute; top: 2px; left: 0; color: #A6A6A6; padding: 5px; font-size: 2em; }
.comments-items .comments-items .comment-item { padding: 0; }
.comments-items .comments-items span.permalink { display: none; }
.comment-fil ul {}
/* comments list */
.comment-meta { margin: 0; font-weight: bold; }
.comment-meta small { color: #A6A6A6; font-size: 100%; font-weight: normal; }
.comment-meta small .sep { display: none; }
.comment-meta abbr { float: right; }
.comment-meta a { }
.comment-meta a:focus,
.comment-meta a:hover,
.comment-meta a:active { color: #fff; }
.comment-content { color: #74665B; font-size: 1em; padding: 0.75em; max-height: 60em; width: 100%; overflow: auto; overflow-x: none; }
.comment-content .hyperlien { padding: 0; background: transparent; font-weight: normal; }
.comment-content p { margin-bottom: 1em; }
.comment-reply { clear: both; text-align: right; font-weight: bold; margin-bottom:0;} */
/* en thread
.comments-thread { margin-bottom: 2em; }
.comments-thread .permalink.in-reply-to { bottom:0; }*/
/* avec plugin comments
.comment-meta .permalink.picto {font-size:1em;right:0.75em;}
.comment {position:relative;}
.comment .spip-admin {position:absolute;left:0;bottom:0;visibility:hidden;}
.comment:hover .spip-admin {visibility:visible;}*/
/* en list avec plugin comments
.comment-meta .item {display:block;}*/
/* Formulaire de forum */
.formulaire_forum {}
.formulaire_forum legend { display: none; }
.formulaire_forum .saisie_titre input.text { width: 100% }
.formulaire_forum .session_qui { display: none; }
.formulaire_forum .saisie_texte .explication { font-size: .9em; font-style: italic; }
/* Habillage des petitions
---------------------------------------------- */
#signatures {}
#signatures td.signature-date small { white-space: nowrap; }
#signatures .formulaire_recherche { margin: 1.5em auto; text-align: center; }
/* Formulaire de signature */
.formulaire_signature {}
/* ------------------------------------------
/* Sous-navigation et autres menus
/* ------------------------------------------ */
/* Habillage general des menus de nav */
.menu { clear: both; margin-bottom: 1.5em; text-align: left; }
.menu p {}
.menu ul { margin-bottom: 1.5em; }
.menu ul li { line-height: 1.5; }
.menu ul li ul { margin-left: 1.5em; list-style: circle; }
/* Pagination */
.pagination a, .pagination .on {
background: #F9F4E1; color: #707070; font-size: 1em; line-height: 1;
display: block; float:left; margin: 0 10px 0 0; padding: 8px 15px; text-align: center; text-decoration: none;
-webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius:5px;
}
.pagination a:hover { color: #de5853; }
.pagination .on { background: #d93e39; color: #fff; }
.pagination .sep { display: none; }
/* Listes d'articles et extraits introductifs */
.resume .liste-items .item { border-bottom: 0; border: 1px solid red!important; }
.resume .liste-items .item .h3 { border-bottom:1px solid #888;}
.liste-items .item .info-publi { display:block; float:right; margin-top:0.6em; margin-left:.3em; padding:.3em; background:#ddd;border: 1px solid red!important; }
.liste-items .item .introduction { font-size: 0.923em;border: 1px solid red!important; }
.aside { padding-top: 60px; position: relative; }
.aside .menu { margin-top: 1em; padding:2em 0.75em 0.75em; border-top: 1px solid #ccc; }
.aside .menu a { display: block; padding-left:20px; margin-left: -20px; }
.aside .menu ul { margin-bottom: 0; }
.aside .menu li { border-bottom: 0; color: #A6A6A6; margin-bottom: .4em; }
.aside .menu p { color: #666; }
/* Menu Breves */
.aside .menu_breves h3 { margin-bottom: .5em; }
.aside .menu_breves small { display: block; }
/* Breves */
.menu_breves li {}
.menu_breves li h3 { margin: 0; }
.cboxElement img { border: 1px solid #ddd; padding: 6px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.cboxElement:hover { background: none; }
.cboxElement:hover img { border-color: red; }
/* Couleurs des liens
---------------------------------------------- */
a { color: #d93e39; padding: 1px 3px; text-decoration: none;
-webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
}
a:focus, a:hover, a:active { background-color: #d93e39; color: #FFF; text-decoration: none; }
a.spip_out, a.spip_glossaire { color: #46839B; background: url(img/spip_out.gif) no-repeat scroll right center; padding-right: 12px; }
a.spip_out:hover { background-color: #46839B; color: #fff; }
/* Entete et barre de navigation
------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Mrs+Sheppards); /* @FONT-FACE */
.header #logo { color: #F9F4E1; line-height: 1; font-size: 2.8em; font-weight: bold; font-family: 'Mrs Sheppards', cursive; color: #F9F4E1; margin-bottom: 4px; text-shadow: 1px 1px 2px #000000; }
.header #logo a, .header #logo a:hover { background: transparent; text-decoration: none; color: #F9F4E1; }
.header #slogan { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; color: #D8C0A8; }
/*
.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; }
*/
/* Navigation principale - Utilisation du plugin Menu */
.menu-conteneur { top: -70px; }
.menu-conteneur ul { margin: 0; float: right; }
.menu-conteneur li ul { padding-top: 2px; left: -2px; }
.menu-conteneur li ul li { box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1); }
.menu-conteneur li { white-space: nowrap; display: block; position: relative; margin: 0; padding: 0; z-index: 100; }
.menu-conteneur a { display: block; position: relative; font-size: 14px; font-family: "Helvetica neue", Arial, sans-serif; color: #f9f4e1; font-weight: bold; }
.menu-conteneur a:hover { text-decoration: none; background: transparent; color: #d8c0a8; }
.menu-conteneur li.submenu > a { padding-right: 20px; background: url(../images/menu_down_arrow.png) no-repeat right; cursor: default; }
.menu-conteneur > ul > li { float:left; margin-right: 28px; }
.menu-conteneur > ul > li:last-child { margin-right: 0; }
.menu-conteneur li ul { display: none; position: absolute; top: 100%; z-index: 100; }
.menu-conteneur li:hover > ul { display: block; }
.menu-conteneur li ul li.submenu > a { padding-right: 10px; background: #403830 url(img/submenu_left_arrow.png) no-repeat right; }
.menu-conteneur li ul li.submenu > a:hover { padding-right:10px; background: #f5f5f5 url(img/submenu_left_arrow.png) no-repeat right; }
.menu-conteneur li ul li { border-bottom: 1px solid #534a42; background: #FFF; }
.menu-conteneur li ul li a:hover { background: #f5f5f5; color: #d43a32; }
.menu-conteneur li ul li:last-child { border-bottom: 1px solid #2e2823; }
.menu-conteneur li ul li a { padding: 0 25px 0 12px; line-height: 33px; background: #403830; }
.menu-conteneur li ul li ul { top: -1px !important; left: 100% !important; padding: 0 !important; }
.menu-conteneur .on > a { color: #D8C0A8; }
/* Pied de page
------------------------------------------ */
.footer .colophon { color: #74665B; }
.footer .colophon a { color: #fff; }
.footer .colophon a:hover { background-color: #74665B; }
.footer .generator { display: block; position: absolute; top: 2.2em; left: 50%; margin-left: 370px; }
.footer .generator a { padding: 0; background: none; }
/* ------------------------------------------
/* Sous-navigation et autres menus
/* ------------------------------------------ */
/* Listes d'articles et extraits introductifs */
.menu_articles h2.offscreen { font-size:25px; color:#453C34; border-bottom:1px solid #d9d9d9; margin:20px 0 30px 0; padding:0 0 10px 0; }
.page_site .menu_articles small { display: block; }
.menu_articles li { clear: both; border:1px solid #cccccc; margin:0 0 2em 0; padding: 2em; position: relative;
-moz-box-shadow: 0px 2px 1px #e8e8e8; -webkit-box-shadow: 0px 2px 1px #e8e8e8; box-shadow: 0px 2px 1px #e8e8e8;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.page_sommaire .menu_articles li > a { background:none!important; margin: 0; padding: 0; }
.page_sommaire .menu_articles .spip_logos { width: 100%; height: auto; border: 1px solid #CCC; float: none; margin: 0 0 1.5em 0; padding: 5px!important;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.page_sommaire .menu_articles .entry-content { padding-bottom: 40px; }
.page_sommaire .menu_articles .entry-title { }
.page_sommaire .menu_articles .entry-title a:after {
content: "En savoir plus";
padding: 8px;
color: #555555;
border: 1px solid #d3d3d3;
position: absolute; left: 19px; bottom: 20px;
white-space: nowrap;
z-index: 20;
font-size: 12px; line-height: 12px; font-weight: bold;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(top, #eeeeee, #ffffff);
background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
background-image: -ms-linear-gradient(top, #eeeeee, #ffffff);
background-image: -o-linear-gradient(top, #eeeeee, #ffffff);
}
.page_sommaire .menu_articles .entry-title a:hover:after {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #eeeeee));
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -ms-linear-gradient(top, #ffffff, #eeeeee);
background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
}
.page_sommaire .menu_articles .entry-title a { font-size: 24px; color: #000; height:100%; display: block; overflow: hidden; }
.page_sommaire .menu_articles .entry-title a:hover { background: none; color: #D93E39; }
.page_sommaire .menu_articles small { position: absolute; bottom: 15px; right: 19px; float: left; display:inline-block; }
/*.menu_articles small { color: #a6a6a6; }
.menu_articles .author, .menu_articles small {
font-size: 11px; line-height: 16px; height: 16px;
background: url("img/blog_author.png") no-repeat center left; color: #999999;
display: inline-block; float: left; margin: 0 10px 10px 0; padding: 0 0 0 20px;
}*/
/* Page contact */
.page_contact .formulaire_spip { background: none; border: none; }
/* Page Plan */
.page_plan h3 { margin-left: 35px; margin-bottom: .3em; }
/* Page Rurbique */
.menu_articles .spip_logos { float: right; padding-left: 1em; padding-right: 0; }
/* Plugin : Social Tags */
.socialtags { position: absolute; top: 20px; left: 50%; margin-left: -450px!important; }
.socialtags a:hover { background-color: transparent; }
/* ------------------------------------------
/* Autres medias
/* ------------------------------------------ */
@media print {
/* Ne pas imprimer */
.spip-admin,
.spip-admin-float,
.spip-previsu { display: none; }
.repondre,
.formulaire_spip { display: none; }
/* Souligner et expliciter les liens */
a { color: #600; text-decoration: underline !important; }
a.spip_out:after,
a.spip_glossaire:after,
a.spip_mail:after { display: inline; content: " [" attr(href) "]"; }
}
/* Affichage sur petits ecrans
* Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media (max-width: 900px) {
.socialtags { left: 1em; margin: 0!important; }
.footer .generator { left: auto; right: 1em; margin-left: 0!important; }
/* Navigation principale - Utilisation du plugin Menu */
.menu-conteneur { border-top: 1px solid #D8C0A8; border-bottom: 1px solid #D8C0A8; background: #403830; top: -30px; margin-bottom: 1em; width: 100%; position: relative }
/*.menu-conteneur ul { float: none; margin-left: 1em;} */
.menu-conteneur li ul { padding-top: 1px; }
}
@media (max-width: 640px) {
/* Navigation principale - Utilisation du plugin Menu */
.js .menu-conteneur { display: none; }
.mnav { margin: 2em 0; width: 100%; }
/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
.nav ul li a { float: none; border: 0; }
/*#formulaire_recherche { display: none; position: static; text-align: center; }*/
.arbo { display: none; }
.footer .generator { display: none!important; }
.content input.text { width: 100%!important; }
/* Habillage des forums */
.comments-items .comments-items,
ul.spip, ol.spip { margin-left: 20px; }
.spip_documents_center, .spip_documents_left, .spip_documents_right { clear: both; float: none!important; display: block; width: 100%; }
}
/* end */
/* --------------------------------------------------------------
theme.css
Definition des styles pour Brownie
-------------------------------------------------------------- */
::selection { background: #2e2823; color: #FFFFFF; }
::-moz-selection { background: #2e2823; color: #FFFFFF; }
body.wait *, body.wait { cursor:wait !important; }
/* ------------------------------------------
/* Habillage des elements du contenu
/* ------------------------------------------ */
/* Titraille / Intertitres */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: #453C34; font-family: Helvetica, Arial, Tahoma, sans-serif; }
hr { background: #D9D9D9; }
.cartouche { margin-bottom: 1.5em; }
.cartouche .spip_logos { background: #fff; padding-right: 1em; padding-bottom: .5em; }
.cartouche h1 { border-bottom: 1px solid #d9d9d9; color: #453C34; margin: 10px 0; padding: 0; }
.cartouche p { margin-bottom: 0; }
.surtitre{}
.soustitre {}
/* Listes SPIP */
dl.spip dt { background: url(img/def.png) no-repeat 25px .5em; }
dl.spip dt, dl.spip dd { padding-left: 50px; }
/* Tableaux SPIP */
table.spip caption { background: none; border-bottom: 1px solid; font-weight: bold; text-align: left; }
table.spip thead th { background: none; border: 1px solid; border-width: 1px 0; }
table.spip tbody tr th, table.spip tr td { background: none; }
table.spip tbody tr.odd th, table.spip tr.odd td { background: #F9F4E1; }
table.spip tfoot { border-top: 1px solid; }
/* Citations, code et poesie */
.spip_code { color: #777; }
.spip_cadre { background-color: #fff; border: 1px solid #ddd; color: #777; }
blockquote, blockquote.spip, .spip_poesie { background: none; border-left: 4px solid #D8C0A8; font-style: italic; padding: 0 25px; }
/* Fil d'ariane */
.arbo { clear: both; color: #453C34; font-size: .9em; }
.arbo * { font-weight: normal; }
/* Date */
.info-publi abbr.published,
abbr.dtreviewed,
.menu_articles small,
.aside .menu_breves small { background: url("img/blog_date.png") no-repeat center left; border: 0; color: #A6A6A6; font-size: 11px; font-style: normal; line-height: 11px; margin-bottom: .6em; padding: 3px 0 0 18px; }
@media print {
abbr[title].published:after { content: ""; }
abbr[title].dtreviewed:after { content: ""; }
}
.info-publi { font-size: .9em; font-style: italic; margin: 1.5em 0 0; }
.traductions { border: 1px dotted lightgrey; font-size: .9em; line-height: 1.5; margin: 1.5em 0; padding: 1em; text-align: center }
.traductions a[hreflang]:after { content: ''; }
.chapo { color: #403830; font-size: 1.4em; font-style: italic; font-weight: normal; letter-spacing: -0.5px; line-height: 1.4; margin-bottom: 1em; }
.chapo p { margin-bottom: .5em; }
.texte {}
.hyperlien { background: #F9F4E1 url("img/def.png") no-repeat 25px 1.9em; display: block; font-weight: bold; padding: 1.5em 1.5em 1.5em 50px; }
.ps, .notes { margin-bottom: 1.5em; }
.notes { clear: both; font-size: .9em; }
.surlignable { }
.enclosures { margin: .5em; }
/* Couleurs des liens
---------------------------------------------- */
a {
color: #d93e39; padding: 1px 3px; text-decoration: none;
-webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
}
a:focus, a:hover, a:active { background-color: #d93e39; color: #fff; text-decoration: none; }
a.spip_out, a.spip_glossaire { background: url("img/spip_out.gif") no-repeat scroll right center; color: #46839B; padding-right: 12px; }
a.spip_out:hover { background-color: #46839B; color: #fff; }
/* Formulaires : variantes et cas particuliers
----------------------------------------------- */
.formulaire_spip {
background: #f8f8f8; border: 1px solid #f0f0f; clear: both; margin: 1.5em 0; padding: 2em 1em 1em;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.aside .formulaire_spip { margin-top: 1em; padding: 2em 1em 1em; }
fieldset {
margin: 0; width: 100%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
}
legend { display: none; }
label { color: #262626; display: block; font-weight: bold; }
.erreur_message { display: block; }
input.text,textarea {
background-color: #fff; border: 1px solid lightgrey; margin-bottom: 1em; padding: 4px; width: 100%;
-webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.content input.text { width: 50%; }
textarea { width: 100%; }
/* Success, info, notice and error/alert boxes (from BluePrint) */
.error p, .alert p, .notice a, .success p, .info p { margin-bottom: 0; }
/* Selection des langues */
.formulaire_menu_lang { background: none; margin: 0; padding: 0; }
.header .formulaire_menu_lang { display: block; position: absolute; right: 0; top: .90em; width: 30%; }
.header .formulaire_menu_lang select { width: 100%; }
/* Formulaires de recherche (site / petitions) */
.formulaire_recherche { background: none; border: none; margin: 0 !important; padding: 0 !important; width: 100%; }
.formulaire_recherche .text { background: url("img/recherche.png") no-repeat left center; padding-left: 20px; width: 100%; }
.aside .formulaire_recherche { position: absolute; top: 0; left: 0; }
.aside .formulaire_recherche input.submit { display: none; }
/* Choix des mots-clefs */
ul.choix_mots { display: block; list-style: none; margin: 0; padding: 0; }
ul.choix_mots li { clear: none; display: block; float: left; margin: 0; padding: 1%; width: 30%; }
ul.choix_mots li label { display: inline; font-weight: normal; }
.formulaire_spip .bugajaxie { display: none; } /*IE/Win*/
/* Formulaire de login dans une page */
.formulaire_login ul li { clear: left; }
.formulaire_login .editer_password .details { display: block; }
.formulaire_login #spip_logo_auteur { float: right; }
/* Fomulaire de contact */
.formulaire_ecrire_auteur {}
.formulaire_ecrire_auteur .saisie_sujet_message_auteur input.text { width: 100%; }
/* Habillage des forums
---------------------------------------------- */
/* Habillage des forums */
.comments-items .comments-items { margin-left: 30px; }
.comments-items .comment-item { border-top: 1px solid #453C34; margin: 0; padding: 0 0 0 30px; position: relative; }
.comments-items span.permalink { color: #a6a6a6; font-size: 2em; padding: 5px; position: absolute; top: 2px; left: 0; }
.comments-items .comments-items .comment-item { border-style:dashed; border-color: #e6e6e6; padding: 0; }
.comments-items .comments-items span.permalink { display: none; }
.comment-fil ul {}
/* comments list */
.comment-meta { font-weight: bold; margin: 0; }
.comment-meta small { color: #A6A6A6; font-size: 100%; font-weight: normal; }
.comment-meta small .sep { display: none; }
.comment-meta abbr { float: right; }
.comment-meta a { }
.comment-meta a:focus,
.comment-meta a:hover,
.comment-meta a:active { color: #fff; }
.comment-content { color: #74665B; font-size: 1em; padding: 3px; max-height: 60em; width: 100%; overflow: auto; overflow-x: none; }
.comment-content .hyperlien { background: transparent; font-weight: normal; padding: 0; }
.comment-content p { margin-bottom: 1em; }
.comment-reply { clear: both; font-weight: bold; margin-bottom: 0; text-align: right; }
/* Formulaire de forum */
.formulaire_forum {}
.formulaire_forum legend { display: none; }
.formulaire_forum .saisie_titre input.text { width: 100% }
.formulaire_forum .session_qui { display: none; }
.formulaire_forum .saisie_texte .explication { font-size: .9em; font-style: italic; }
/* Habillage des petitions
---------------------------------------------- */
#signatures {}
#signatures td.signature-date small { white-space: nowrap; }
#signatures .formulaire_recherche { margin: 1.5em auto; text-align: center; }
/* Formulaire de signature */
.formulaire_signature {}
/* ------------------------------------------
/* Sous-navigation et autres menus
/* ------------------------------------------ */
/* Habillage general des menus de nav */
.menu { clear: both; margin-bottom: 1.5em; text-align: left; }
.menu p {}
.menu ul { margin-bottom: 1.5em; }
.menu ul li { line-height: 1.5; }
.menu ul li ul { margin-left: 1.5em; list-style: circle; }
/* Breves */
.menu_breves li {}
.menu_breves li h3 { margin: 0; }
/* Menus dans la colonne de droite */
.aside { padding-top: 60px; position: relative; }
.aside .menu { border-top: 1px solid #ccc; margin-top: 1em; padding:2em 0.75em 0.75em; }
.aside .menu a { display: block; padding-left:20px; margin-left: -20px; }
.aside .menu ul { margin-bottom: 0; }
.aside .menu li { border-bottom: 0; color: #A6A6A6; margin-bottom: .4em; }
.aside .menu p { color: #666; }
/* Menu Breves */
.aside .menu_breves h3 { margin-bottom: .5em; }
.aside .menu_breves small { display: block; }
/* Fichier en piece jointe */
.cboxElement img {
border: 1px solid #ddd; padding: 6px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
}
.cboxElement:hover { background: none; }
.cboxElement:hover img { border-color: red; }
/* Pagination */
.pagination { margin-bottom: 1.5em; overflow: hidden; }
.pagination a, .pagination .on {
background: #F9F4E1; color: #707070; font-size: 1em; line-height: 1;
display: block; float:left; margin: 0 10px 0 0; padding: 8px 15px; text-align: center; text-decoration: none;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.pagination a:focus, .pagination a:hover, .pagination a:active, .pagination .on { background: #d93e39; color: #fff; }
.pagination .sep { display: none; }
/* Entete et barre de navigation
------------------------------------------ */
/* Entete */
.header #logo { color: #F9F4E1; font-size: 2.8em; font-weight: bold; font-family: 'Mr Dafoe', cursive; color: #F9F4E1; line-height: 1; margin-bottom: 4px; text-shadow: 1px 1px 2px #000; }
.header #logo a, .header #logo a:focus, .header #logo a:hover, .header #logo a:active { background: transparent; text-decoration: none; color: #F9F4E1; padding: 0; }
.header #slogan { color: #D8C0A8; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
/* Barre de navigation
.nav { }
.nav ul {}
.nav ul li { }
.nav ul li a { }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { } */
/* Navigation principale - Utilisation du plugin Menu */
#nav, .menu-conteneur { top: -65px; }
#nav ul, .menu-conteneur ul { float: right; margin: 0; max-width: 600px; overflow: hidden; }
#nav li ul, .menu-conteneur li ul { padding-top: 2px; left: -2px; }
#nav li ul li, .menu-conteneur li ul li { box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1); }
#nav li, .menu-conteneur li { display: block; margin: 0; padding: 0; position: relative; white-space: nowrap; z-index: 100; }
#nav a, .menu-conteneur a { color: #f9f4e1; display: block; font-size: 14px; font-family: "Helvetica neue", Arial, sans-serif; font-weight: bold; padding: 0; position: relative; }
#nav a:hover, .menu-conteneur a:hover { background: transparent; color: #d8c0a8; text-decoration: none; }
#nav li.submenu > a, .menu-conteneur li.submenu > a { background: url(../images/menu_down_arrow.png) no-repeat right; cursor: default; padding-right: 20px; }
#nav > ul > li, .menu-conteneur > ul > li { float:left; margin-right: 28px; }
#nav > ul > li:last-child, .menu-conteneur > ul > li:last-child { margin-right: 0; }
#nav li ul, .menu-conteneur li ul { display: none; position: absolute; top: 100%; z-index: 100; }
#nav li:hover > ul, .menu-conteneur li:hover > ul { display: block; }
#nav li ul li.submenu > a, .menu-conteneur li ul li.submenu > a { background: #403830 url(img/submenu_left_arrow.png) no-repeat right; padding-right: 10px; }
#nav li ul li.submenu > a:hover, .menu-conteneur li ul li.submenu > a:hover { background: #f5f5f5 url(img/submenu_left_arrow.png) no-repeat right; padding-right:10px; }
#nav li ul li, .menu-conteneur li ul li { background: #fff; border-bottom: 1px solid #534a42; }
#nav li ul li a:hover, .menu-conteneur li ul li a:hover { background: #f5f5f5; color: #d43a32; }
#nav li ul li:last-child, .menu-conteneur li ul li:last-child { border-bottom: 1px solid #2e2823; }
#nav li ul li a, .menu-conteneur li ul li a { background: #403830; line-height: 33px; padding: 0 25px 0 12px; }
#nav li ul li ul, .menu-conteneur li ul li ul { top: -1px !important; left: 100% !important; padding: 0 !important; }
#nav .on > a, .menu-conteneur .on > a { color: #D8C0A8; }
/* Navigation principale - Utilisation du plugin Menu */
.mnav { display: inline-block; margin: 1em 0; width: 100%; }
@media print {
/* Ne pas imprimer les menus */
.menu-conteneur,
.mnav { display: none; }
}
/* Pied de page
------------------------------------------ */
.footer .colophon { color: #74665B; }
.footer .colophon a { color: #fff; }
.footer .colophon a:hover { background-color: #74665B; }
.footer .generator { display: block; margin-left: 370px; position: absolute; top: 2.2em; left: 50%; }
.footer .generator a { background: none; padding: 0; }
/* ------------------------------------------
/* Sous-navigation et autres menus
/* ------------------------------------------ */
/* Listes d'articles et extraits introductifs */
.menu_articles h2.offscreen { border-bottom: 1px solid #d9d9d9; color: #453C34; font-size: 2.3em; margin: 20px 0 30px 0; padding: 0 0 10px 0; }
.page_site .menu_articles small { display: block; }
.js .menu_articles li { cursor: pointer; }
.menu_articles li {
border:1px solid #ccc; clear: both; list-style: none; margin:0 0 2em 0; padding: 2em; position: relative;
-webkit-box-shadow: 0px 2px 1px #e8e8e8; -moz-box-shadow: 0px 2px 1px #e8e8e8; box-shadow: 0px 2px 1px #e8e8e8;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0),color-stop(rgba(246,246,246,1),0.74),color-stop(rgba(237,237,237,1),1));
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
background:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 74%, rgba(237,237,237,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.menu_articles li:hover {
background: #fff;
-webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1);
}
.page_sommaire .aside, .page_rubrique .aside { -webkit-animation: moveFromRight 500ms ease; -moz-animation: moveFromRight 500ms ease; -ms-animation: moveFromRight 500ms ease; }
.menu_articles li a { font-size: 1.4em; padding: 0; }
.menu_articles li { -webkit-animation: smallToBig 900ms ease; -moz-animation: smallToBig 900ms ease; -ms-animation: smallToBig 900ms ease; }
/* Animation */
@-webkit-keyframes smallToBig { from { -webkit-transform: scale(0.1) } to { -webkit-transform: scale(1); } }
@-moz-keyframes smallToBig{ from { -moz-transform: scale(0.1); } to { -moz-transform: scale(1); } }
@-ms-keyframes smallToBig{ from { -ms-transform: scale(0.1); } to { -ms-transform: scale(1); } }
@-webkit-keyframes moveFromRight { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0%); } }
@-moz-keyframes moveFromRight {from { -moz-transform: translateX(100%); } to { -moz-transform: translateX(0%); } }
@-ms-keyframes moveFromRight { from { -ms-transform: translateX(100%); } to { -ms-transform: translateX(0%); } }
/* Page Sommaire */
.page_sommaire .menu_articles li > a { background:none!important; margin: 0; padding: 0; }
.page_sommaire .menu_articles .spip_logos {
border: 1px solid #CCC; float: none; margin: 0 0 1.5em 0; padding: 5px!important; width: 100%; height: auto;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.page_sommaire .menu_articles .entry-content { padding-bottom: 40px; }
.page_sommaire .menu_articles .entry-title { }
.page_sommaire .menu_articles .entry-title a:after {
content: "En savoir plus";
border: 1px solid #d3d3d3; color: #555; font-size: 12px; font-weight: bold; line-height: 12px; padding: 8px; position: absolute; left: 19px; bottom: 20px; text-shadow: 0 1px 0 rgba(255,255,255, 0.8); white-space: nowrap; z-index: 20;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(top, #eeeeee, #ffffff);
background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
background-image: -o-linear-gradient(top, #eeeeee, #ffffff);
background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
}
.page_sommaire .menu_articles .entry-title a:hover:after {
background: #fff;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #eeeeee));
background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
background-image: linear-gradient(to bottom, #ffffff, #eeeeee);
}
.page_sommaire .menu_articles .entry-title a { color: #000; display: block; font-size: 1.6em; height:100%; overflow: hidden; }
.page_sommaire .menu_articles .entry-title a:hover { background: none; color: #D93E39; }
.page_sommaire .menu_articles small { float: left; display:inline-block; position: absolute; bottom: 15px; right: 19px; }
/* Page Contact */
.page_contact .formulaire_spip { background: none; border: none; }
/* Page Plan */
.page_plan h3 { margin-left: 35px; margin-bottom: .3em; }
/* Page Rurbique */
.menu_articles .spip_logos { float: right; padding-left: 1em; padding-right: 0; }
/* Page Recherche */
.page_recherche .menu_articles ul.spip, .page_recherche .menu_articles ol.spip { margin-left: 0; }
/* Plugin : Social Tags */
.socialtags { margin-left: -450px!important; position: absolute; top: 20px; left: 50%; }
.socialtags a:focus, .socialtags a:hover, .socialtags a:active { background-color: transparent!important; }
/* ------------------------------------------
/* Autres medias
/* ------------------------------------------ */
@media print {
/* Ne pas imprimer */
.spip-admin,
.spip-admin-float,
.spip-previsu,
.repondre,
.formulaire_spip { display: none; }
/* MobileMenu Plugin - Cacher le select*/
.mnav { display: none; }
/* Souligner et expliciter les liens */
a { color: #600; text-decoration: underline !important; }
a.spip_out:after,
a.spip_glossaire:after,
a.spip_mail:after { display: inline; content: " [" attr(href) "]"; }
}
/* Affichage sur petits ecrans
* Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media (max-width: 900px) {
/* Plugin : Social Tags */
.socialtags { left: 1em; margin: 0!important; }
/* Pied de page */
.footer .generator { left: auto; right: 1em; margin-left: 0!important; }
/* Navigation principale - Utilisation du plugin Menu */
#nav > ul > li:last-child, .menu-conteneur > ul > li:last-child { margin-right: 10px; }
}
@media (max-width: 640px) {
.hyperlien { background-position: 5px 1.4em; padding: 1em 1em 1em 30px; }
.arbo { display: none; }
/* Listes et tableaux */
dl.spip dt { background-position: 0 .5em; }
dl.spip dt, dl.spip dd { padding-left: 25px; }
ul.spip, ol.spip { margin-left: 20px; }
/* Barre de navigation */
#nav, .menu-conteneur { background-color:#403830; border-bottom: 1px solid #222; margin-bottom: 1.5em; text-align: center; top: auto; }
#nav ul, .menu-conteneur ul { float: none; }
#nav ul li, .menu-conteneur ul li { border-top: 1px solid #fff; width: 100%; }
#nav ul li a, .menu-conteneur ul li a { border: none; color: #fff; display: block; float: none; padding: .3em 1em; text-decoration: none; }
#nav ul li a:focus, .menu-conteneur ul li a:focus,
#nav ul li a:hover, .menu-conteneur ul li a:hover,
#nav ul li a:active, .menu-conteneur ul li a:active { background: #fff; color: #222; }
/* Page Sommaire */
.page_sommaire .menu_articles small { float: none; margin-bottom: .6em; position: relative; top: 0; right: 0; }
.page_sommaire .menu_articles .entry-title a:after { left: 10px; }
.menu_articles ul { margin: 0; }
.menu_articles li { padding: 1em; }
.footer .generator { display: none!important; }
.content input.text { width: 100%!important; }
/* Habillage des forums */
.comments-items .comments-items { margin-left: 0px; }
.comments-items .comment-item { padding-left: 0; }
.comment-meta > small { display: block; }
.comment-meta small .sep { display: inherit; }
.comment-meta abbr { float: none; }
span.permalink { display: none; }
.spip_documents_center, .spip_documents_left, .spip_documents_right { clear: both; float: none!important; display: block; width: 100%; }
/* Pagination */
.pagination a, .pagination .on { font-size: .9em; margin-right: 6px; padding: 8px 12px; }
/* Page Plan */
.page_plan h3 { margin-left: 0; }
}
/* end */

17
inc-insert-head.html

@ -1,2 +1,15 @@
[(#REM) Scripts ]
[<script src="(#CHEMIN{js/script.js})" type="text/javascript"></script>]
[(#REM) Utiliser la derniere version du moteur de rendu IE ]
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
[(#REM) Mobile ]
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
[(#REM) Scripts ]
[<script src="(#CHEMIN{js/jquery.mobilemenu.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{js/script.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{js/respond.js})" type="text/javascript"></script>]
[(#REM) Font-Face ]
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>

326
js/respond.js

@ -0,0 +1,326 @@
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
window.matchMedia = window.matchMedia || (function(doc, undefined){
var bool,
docElem = doc.documentElement,
refNode = docElem.firstElementChild || docElem.firstChild,
// fakeBody required for <FF4 when executed in <head>
fakeBody = doc.createElement('body'),
div = doc.createElement('div');
div.id = 'mq-test-1';
div.style.cssText = "position:absolute;top:-100em";
fakeBody.style.background = "none";
fakeBody.appendChild(div);
return function(q){
div.innerHTML = '&shy;<style media="'+q+'"> #mq-test-1 { width: 42px; }</style>';
docElem.insertBefore(fakeBody, refNode);
bool = div.offsetWidth == 42;
docElem.removeChild(fakeBody);
return { matches: bool, media: q };
};
})(document);
/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function( win ){
//exposed namespace
win.respond = {};
//define update even in native-mq-supporting browsers, to avoid errors
respond.update = function(){};
//expose media query support flag for external use
respond.mediaQueriesSupported = win.matchMedia && win.matchMedia( "only all" ).matches;
//if media queries are supported, exit here
if( respond.mediaQueriesSupported ){ return; }
//define vars
var doc = win.document,
docElem = doc.documentElement,
mediastyles = [],
rules = [],
appendedEls = [],
parsedSheets = {},
resizeThrottle = 30,
head = doc.getElementsByTagName( "head" )[0] || docElem,
base = doc.getElementsByTagName( "base" )[0],
links = head.getElementsByTagName( "link" ),
requestQueue = [],
//loop stylesheets, send text content to translate
ripCSS = function(){
var sheets = links,
sl = sheets.length,
i = 0,
//vars for loop:
sheet, href, media, isCSS;
for( ; i < sl; i++ ){
sheet = sheets[ i ],
href = sheet.href,
media = sheet.media,
isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
//only links plz and prevent re-parsing
if( !!href && isCSS && !parsedSheets[ href ] ){
// selectivizr exposes css through the rawCssText expando
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
translate( sheet.styleSheet.rawCssText, href, media );
parsedSheets[ href ] = true;
} else {
if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base)
|| href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){
requestQueue.push( {
href: href,
media: media
} );
}
}
}
}