serveurs:sinp-paca:charte-graphique [CBNA SINP]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Charte graphique du projet Silene-Geonature ======
<html><style>
.legend {
  display: inline-block;
  vertical-align: bottom;
  width: 20px;
  height: 20px;
  border: 1px solid grey;
  margin: 2px;
}
</style></html>

===== Couleurs =====
  * Fond des pages : ''white'' /  ''#FFF'' / <html><span style="background-color: white;" class="legend"></span></html>
  * Titres : ''#99B931'' <html><span style="background-color: #99B931;" class="legend"></span></html>
  * Texte : ''black'' / ''#000'' <html><span style="background-color: #000;" class="legend"></span></html>
    * Fond du texte : ''#F8F8F8'' <html><span style="background-color: #F8F8F8;" class="legend"></span></html>
  * Général :
    * Liens : ''#759B00'' <html><span style="background-color: #759B00;" class="legend"></span></html>
    * Liens survolés : ''#9EC42E'' <html><span style="background-color: #9EC42E;" class="legend"></span></html>
  * Faune :
    * Titre, lien, bordures : ''#97BF0D'' <html><span style="background-color: #97BF0D;" class="legend"></span></html>
    * Fond des encarts : ''#F7F9EC'' <html><span style="background-color: #F7F9EC;" class="legend"></span></html>
  * Flore :
    * Titre, lien, bordure : ''#A10D59'' <html><span style="background-color: #A10D59;" class="legend"></span></html>
    * Fond des encarts : ''#EFE0E9'' <html><span style="background-color: #EFE0E9;" class="legend"></span></html>
    * Liens survolés : ''#A6C1E5'' <html><span style="background-color: #A6C1E5;" class="legend"></span></html>

===== Détails technique : CSS =====
<code css>
body {
  background: #fff;
  color: #000;
  font: 11px Arial, Verdana, Helvetica, sans-serif;
  line-height: normal;
  min-width: 960px;
  line-height: 1.4em;
}

h1, h2, h3, h4 {
  color: #97bf0d;
  border-bottom: 1px solid #97bf0d;
  margin: 1em 0;
  padding: 0;
}

h1 {
  font-size: 1.6em;
  line-height: 1.6em;
  padding: .2em;
}
h2 {
  font-size: 1.4em;
  padding: .2em .4em;
}
h3, h4 {
  padding: .2em .6em;
  border-bottom-style: dotted;
}
h3 {
  font-size: 1.2em;
}
h4 {
  font-size: 1.1em;
}

p {
  margin: 1em;
  padding: 0;
}

/* Général */
a {
  color: #759B00;
  text-decoration: none;
}
a:hover {
  color: #9EC42E;
  border-bottom: 1px dotted #9EC42E;
}

/* Flore */
.flore a {
  color: #A10D59;

}
.flore a:hover {
  color: #A6C1E5;
  border-bottom: 1px dotted #A6C1E5;
}

/* Faune */
.faune a {
  color: #97BF0D;

}
.faune a:hover {
  color: #9EC42E;
  border-bottom: 1px dotted #9EC42E;
}
</code>

===== Exemples =====

<html>

  <h1 style="font-size:1.6em; line-height: 1.6em; color: #99b931; border-bottom: 1px solid #99b931;">Titre H1</h1>
  <h2 style="font-size:1.4em; line-height: 1.4em; color: #99b931; border-bottom: 1px solid #99b931;">Titre H2</h2>
  <h3 style="font-size:1.2em; color: #99b931; border-bottom: 1px dotted #99b931;">Titre H3</h3>
  <h4 style="font-size:1.1em; color: black; border-bottom: 1px dotted #99b931;">Titre H4</h4>
  
  <p style="background-color:#f8f8f8;font: 12px Arial, Verdana, Helvetica, sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</html>