1184 lines
21 KiB
CSS
1184 lines
21 KiB
CSS
@charset "UTF-8";
|
||
/* UTF-8 déclaré avant toute chose */
|
||
|
||
/******************************************************************
|
||
* ROCSSTI : une base CSS par Nicolas Hoffmann https://rocssti.net/
|
||
* Builder : https://rocssti.net/builder-css
|
||
* inspiré par http://www.knacss.com/
|
||
*
|
||
* Une Röcssti-quote, juste pour le plaisir :
|
||
* « Avant Röcssti, les CSS étaient coupées en deux. Maintenant, elles seront pliées en quatre ! » — Coluche
|
||
* « I did not have sex with Röcssti. » — Bill Clinton
|
||
*
|
||
* ROCSSTI est sous licence MIT : https://github.com/nico3333fr/ROCSSTI/blob/master/LICENSE
|
||
*
|
||
* cette CSS est fournie telle quelle, sans aucune garantie d’aucun type,
|
||
* l’auteur ne saurait être tenu responsable de quoi que ce soit pour
|
||
* l’utilisation de RÖCSSTI.
|
||
*
|
||
* convention (à adapter si besoin)
|
||
* .parent
|
||
* .parent__enfant
|
||
* .parent--modifieur
|
||
*
|
||
*
|
||
* résumé
|
||
* 01 -- reset
|
||
* 02 -- ainsi font font font + structure Hx
|
||
* 03 -- classes utilitaires + fix typos + styles "balises fixes"
|
||
* 04 -- liens + icônes
|
||
* 05 -- layout et modules
|
||
* 06 -- structure (page / skip links / header / main content / footer)
|
||
* 07 -- forms
|
||
* 08 -- dans le contenu
|
||
* 09 -- breakpoints mineurs entre desktop et tablettes
|
||
* 10 -- homo tablettes - breakpoint majeur
|
||
* 11 -- breakpoints mineurs entre tablettes et mobile
|
||
* 12 -- mobile - breakpoint majeur
|
||
* 13 -- breakpoints mineurs tout petit mobile
|
||
* 14 -- print
|
||
* 15 -- fix viewport
|
||
* 16 -- règles d’état
|
||
* 17 -- bonus : Fixes IE
|
||
*/
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 1 -- reset
|
||
*****************************************************************
|
||
*/
|
||
|
||
/* spécial HTML 5 */
|
||
article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
|
||
audio, canvas, progress, video { display: inline-block; }
|
||
abbr, eventsource, mark, meter, time, output, bb { display: inline; }
|
||
|
||
/* à commenter/fallback si vous vous souciez d’IE<8 */
|
||
html { box-sizing: border-box; }
|
||
*, *:before, *:after {
|
||
box-sizing: inherit;
|
||
}
|
||
|
||
/* reset minimum */
|
||
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
|
||
button { border: 0; }
|
||
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
|
||
font-size: 1em; /* equiv 18px */
|
||
line-height: 1.5;
|
||
margin: 1.5em 0;
|
||
}
|
||
|
||
/* fix display img/iframe */
|
||
img,
|
||
iframe { vertical-align: middle; }
|
||
|
||
ul, ol { padding-left: 2em; }
|
||
|
||
.unstyled {
|
||
padding-left: 0;
|
||
list-style-type: none;
|
||
}
|
||
|
||
/* la base correspond à 10px */
|
||
html {
|
||
font-size: 62.5%;
|
||
/* IE9-IE11 math fixing. Voir https://connect.microsoft.com/IE/feedback/details/816709/ */
|
||
/* Merci à @guardian, @victorbritopro, @eQRoeil & Knacss */
|
||
font-size: calc(1em * 0.625);
|
||
}
|
||
body {
|
||
background: #fff;
|
||
color: rgba(0,0,0,0.6);
|
||
font-family: 'merriweatherlight', serif;
|
||
font-size: 1.8em; /* taille de base équiv à 18px */
|
||
line-height: 1.5; /* à corriger si besoin est */
|
||
}
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 02 -- ainsi font font font + structure Hx
|
||
*****************************************************************
|
||
*/
|
||
|
||
/*@font-face {
|
||
|
||
}*/
|
||
|
||
@import url('../fonts/fonts.css');
|
||
|
||
|
||
/* calculées via http://soqr.fr/vertical-rhythm/ merci @goetter & @eQRoeil */
|
||
|
||
h1, h2, h3, h4, h5, h6,
|
||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||
font-weight: 200;
|
||
}
|
||
|
||
h1,
|
||
.h1 {
|
||
display: block;
|
||
font-size: 1.55556em; /* equiv 28px */
|
||
line-height: 1.92857;
|
||
margin: 0 0 .96429em 0;
|
||
}
|
||
h2,
|
||
.h2 {
|
||
display: block;
|
||
font-size: 1.44444em; /* equiv 26px */
|
||
line-height: 1.03846;
|
||
margin: 0 0 1.03846em 0;
|
||
}
|
||
h3,
|
||
.h3 {
|
||
display: block;
|
||
font-size: 1.33333em; /* equiv 24px */
|
||
line-height: 1.125;
|
||
margin: 0 0 1.125em 0;
|
||
}
|
||
h4,
|
||
.h4 {
|
||
display: block;
|
||
font-size: 1.22222em; /* equiv 22px */
|
||
line-height: 1.22727;
|
||
margin: 0 0 1.22727em 0;
|
||
}
|
||
h5,
|
||
.h5 {
|
||
display: block;
|
||
font-size: 1.11111em; /* equiv 20px */
|
||
line-height: 1.35;
|
||
margin: 0 0 1.35em 0;
|
||
}
|
||
h6,
|
||
.h6 {
|
||
display: block;
|
||
font-size: 1em; /* equiv 18px */
|
||
line-height: 1.5;
|
||
margin: 0 0 1.5em 0;
|
||
}
|
||
|
||
.uppercase {
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* autres classes utiles */
|
||
.smaller {
|
||
font-size: .77778em; /* equiv 14px */
|
||
line-height: 1.92857;
|
||
margin: 1.92857em 0;
|
||
}
|
||
.small {
|
||
font-size: .88889em; /* equiv 16px */
|
||
line-height: 1.6875;
|
||
margin: 1.6875em 0;
|
||
}
|
||
.big {
|
||
font-size: 1em; /* equiv 18px */
|
||
line-height: 1.5;
|
||
margin: 1.5em 0;
|
||
}
|
||
.bigger {
|
||
font-size: 1.11111em; /* equiv 20px */
|
||
line-height: 1.35;
|
||
margin: 1.35em 0;
|
||
}
|
||
.biggest {
|
||
font-size: 1.22222em; /* equiv 22px */
|
||
line-height: 1.22727;
|
||
margin: 1.22727em 0;
|
||
}
|
||
|
||
.smallcaps {
|
||
font-variant: small-caps;
|
||
}
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 03 -- classes utilitaires + fix typos + styles "balises fixes"
|
||
*****************************************************************
|
||
*/
|
||
|
||
.noborder,
|
||
iframe { border: 0; }
|
||
|
||
/*
|
||
* repris de http://tinytypo.tetue.net/ de @tetue
|
||
* tuné avec l’aide de http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
|
||
*
|
||
* voir http://en.wikipedia.org/wiki/International_variation_in_quotation_marks pour les références
|
||
*/
|
||
q {
|
||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||
}
|
||
:lang(fr) > q {
|
||
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
|
||
}
|
||
:lang(en) > q {
|
||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||
}
|
||
:lang(es) > q {
|
||
quotes: "\00AB" "\00BB" "\201C" "\201D";
|
||
}
|
||
:lang(it) > q {
|
||
quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
|
||
}
|
||
:lang(de) > q {
|
||
quotes: "\201e" "\201c" "\201a" "\2018";
|
||
}
|
||
q:before {
|
||
content: open-quote;
|
||
}
|
||
q:after {
|
||
content: close-quote;
|
||
}
|
||
|
||
/* éviter interlignage disgracieux */
|
||
sup,
|
||
sub {
|
||
vertical-align: 0;
|
||
position: relative;
|
||
}
|
||
sup {
|
||
bottom: 1ex;
|
||
}
|
||
sub {
|
||
top: .5ex;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
/* éviter marges supplémentaires sur éléments imbriqués */
|
||
li p,
|
||
li ul {
|
||
margin-bottom: 0;
|
||
margin-top: 0;
|
||
}
|
||
/* Vous ne passerez PAS (Gandalf) */
|
||
textarea,
|
||
table,
|
||
td,
|
||
th,
|
||
code,
|
||
pre,
|
||
samp,
|
||
div,
|
||
p,
|
||
.cut {
|
||
word-wrap: break-word;
|
||
-webkit-hyphens: auto;
|
||
-moz-hyphens: auto;
|
||
-ms-hyphens: auto;
|
||
-o-hyphens: auto;
|
||
hyphens: auto;
|
||
}
|
||
/* pour supprimer la césure si besoin */
|
||
.nocut {
|
||
word-wrap: normal;
|
||
-webkit-hyphens: none;
|
||
-moz-hyphens: none;
|
||
-ms-hyphens: none;
|
||
-o-hyphens: none;
|
||
hyphens: none;
|
||
}
|
||
|
||
code,
|
||
pre,
|
||
samp {
|
||
white-space: pre-wrap;
|
||
}
|
||
code {
|
||
line-height: 1;
|
||
}
|
||
kbd {
|
||
border: solid 1px;
|
||
border-top-left-radius: .5em;
|
||
border-top-right-radius: .5em;
|
||
padding: 0 .25em;
|
||
}
|
||
table {
|
||
margin-bottom: 1.5em;
|
||
table-layout: fixed;
|
||
}
|
||
/* j’y tiens, les abbr c’est bon pour la planète */
|
||
/* seuls ceux ayant un title sont signalés */
|
||
abbr[title] {
|
||
border-bottom: dotted 1px;
|
||
cursor: help;
|
||
text-decoration: none;
|
||
/* couleur héritée du texte */
|
||
}
|
||
|
||
/* alignements de textes */
|
||
.alignright { text-align: right; }
|
||
.aligncenter { text-align: center; }
|
||
.alignleft { text-align: left; }
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 04 -- liens + icônes
|
||
*****************************************************************
|
||
*/
|
||
|
||
/* Liens */
|
||
a {
|
||
color: #1eaedb;
|
||
cursor: pointer;
|
||
}
|
||
/* penser au focus */
|
||
a:focus,
|
||
a:hover,
|
||
a:active {
|
||
color: #666;
|
||
}
|
||
|
||
/* focus dans le footer */
|
||
footer a:focus,
|
||
footer a:hover,
|
||
footer a:active {
|
||
color: rgb(238, 215, 244);
|
||
}
|
||
|
||
/* éviter la bordure sur une image comprise dans un lien + fix bordure image IE */
|
||
a:link img,
|
||
a:visited img,
|
||
img {
|
||
border-style: none;
|
||
}
|
||
|
||
.nodecoration {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* liens avec icônes, on peut utiliser les DATA-URI */
|
||
|
||
/* pour signaler liens externes */
|
||
/*a[href^="http://"],
|
||
a[href^="https://"] {
|
||
|
||
}*/
|
||
/* si URL complète sur un lien interne, virer signalement liens externes */
|
||
/*a[href^="http://www.mondomaine.com"] {
|
||
|
||
}*/
|
||
/* contact, liens mailto */
|
||
/*.mail,
|
||
a[href^="mailto:"] {
|
||
|
||
}*/
|
||
/* dont l’URL se termine par .pdf ou ce que vous voulez comme extension */
|
||
/*a[href$=".pdf"] {
|
||
|
||
}*/
|
||
|
||
/* facto icons */
|
||
/*[class*=icon-30] {
|
||
display: inline-block;
|
||
width: 30px;
|
||
height: 30px;
|
||
}*/
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 05 -- layout et modules
|
||
*****************************************************************
|
||
*/
|
||
|
||
/**
|
||
* layout
|
||
*/
|
||
|
||
|
||
/* ça dépend, ça dépasse */
|
||
img,
|
||
table,
|
||
td,
|
||
blockquote,
|
||
code,
|
||
pre,
|
||
textarea,
|
||
input,
|
||
svg {
|
||
height: auto;
|
||
max-width: 100%;
|
||
}
|
||
/* pas de reset sur embed, object et video, ça fait foirer certains players */
|
||
|
||
/* utile pour gérer les floattants */
|
||
/* contient des floats */
|
||
.mod {
|
||
overflow: auto;
|
||
}
|
||
.mod--hidden,
|
||
.no-scroll {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* quelques floattants */
|
||
.left {
|
||
float: left;
|
||
}
|
||
.right {
|
||
float: right;
|
||
}
|
||
|
||
|
||
/* clearer les floats */
|
||
.clear {
|
||
clear: both;
|
||
}
|
||
.clearleft {
|
||
clear: left;
|
||
}
|
||
.clearright {
|
||
clear: right;
|
||
}
|
||
.clearhidden {
|
||
clear: both;
|
||
margin: 0;
|
||
padding: 0;
|
||
visibility: hidden;
|
||
}
|
||
.clearfix:after {
|
||
content: ".";
|
||
display: block;
|
||
height: 0;
|
||
clear: both;
|
||
visibility: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* gouttière */
|
||
.gut {
|
||
height: 1px;
|
||
}
|
||
|
||
/* gestion du table-design en CSS */
|
||
.row {
|
||
display: table;
|
||
table-layout: fixed;
|
||
}
|
||
.inline-row {
|
||
display: inline-table;
|
||
table-layout: fixed;
|
||
}
|
||
.line {
|
||
display: table-row;
|
||
}
|
||
.col {
|
||
display: table-cell;
|
||
vertical-align: top;
|
||
}
|
||
.col-noalign {
|
||
display: table-cell;
|
||
}
|
||
|
||
/* alignements */
|
||
.aligntop { vertical-align: top; }
|
||
.alignbottom { vertical-align: bottom; }
|
||
.alignmiddle { vertical-align: middle; }
|
||
|
||
/* block */
|
||
.bl {
|
||
display: block;
|
||
}
|
||
|
||
/* inline-block, utile pour les grilles et pas seulement */
|
||
.inbl,
|
||
.grid {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* grid = élément d’une inline-grid */
|
||
.grid {
|
||
vertical-align: top;
|
||
}
|
||
|
||
/* pour relativiser */
|
||
.relative {
|
||
position: relative;
|
||
}
|
||
|
||
/* bloc centré */
|
||
.center {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* activation de l’accélération matérielle */
|
||
.hardware-accelerated {
|
||
-webkit-transform: translateZ(0);
|
||
-moz-transform: translateZ(0);
|
||
-ms-transform: translateZ(0);
|
||
-o-transform: translateZ(0);
|
||
transform: translateZ(0);
|
||
}
|
||
|
||
|
||
/* largeurs de blocks */
|
||
.w1 { width: 1%; }
|
||
.w2 { width: 2%; }
|
||
.w3 { width: 3%; }
|
||
.w5 { width: 5%; }
|
||
.w10 { width: 10%; }
|
||
.w20 { width: 20%; }
|
||
.w25 { width: 25%; }
|
||
.w30 { width: 30%; }
|
||
.w33 { width: 33.333%; }
|
||
.w40 { width: 40%; }
|
||
.w45 { width: 45%; }
|
||
.w49 { width: 49%; }
|
||
.w50 { width: 50%; }
|
||
.w60 { width: 60%; }
|
||
.w66 { width: 66.666%; }
|
||
.w70 { width: 70%; }
|
||
.w75 { width: 75%; }
|
||
.w80 { width: 80%; }
|
||
.w90 { width: 90%; }
|
||
.w100 { width: 100%; }
|
||
|
||
/* ici ajouter les largeurs en em */
|
||
/*.w960e { width: 60em; }*/
|
||
|
||
/* ici ajouter les largeurs en pixels */
|
||
/*.w500p { width: 500px; }*/
|
||
|
||
/* ici ajouter les largeurs max en em */
|
||
/*.mw960e { max-width: 60em; }*/
|
||
|
||
/* ici ajouter les largeurs max en pixels */
|
||
/*.mw960p { max-width: 960px; }*/
|
||
|
||
/* margins */
|
||
.mt0 { margin-top: 0; }
|
||
.mt1 { margin-top: 1em; }
|
||
.mt2 { margin-top: 2em; }
|
||
.mr0 { margin-right: 0; }
|
||
.mr1 { margin-right: 1em; }
|
||
.mr2 { margin-right: 2em; }
|
||
.mb0 { margin-bottom: 0; }
|
||
.mb1 { margin-bottom: 1em; }
|
||
.mb2 { margin-bottom: 2em; }
|
||
.ml0 { margin-left: 0; }
|
||
.ml1 { margin-left: 1em; }
|
||
.ml2 { margin-left: 2em; }
|
||
.m0 { margin: 0; }
|
||
.m1 { margin: 1em; }
|
||
.m2 { margin: 2em; }
|
||
|
||
|
||
|
||
/* paddings */
|
||
.pt0 { padding-top: 0; }
|
||
.pt1 { padding-top: 1em; }
|
||
.pt2 { padding-top: 2em; }
|
||
.pr0 { padding-right: 0; }
|
||
.pr1 { padding-right: 1em; }
|
||
.pr2 { padding-right: 2em; }
|
||
.pb0 { padding-bottom: 0; }
|
||
.pb1 { padding-bottom: 1em; }
|
||
.pb2 { padding-bottom: 2em; }
|
||
.pl0 { padding-left: 0; }
|
||
.pl1 { padding-left: 1em; }
|
||
.pl2 { padding-left: 2em; }
|
||
.p0 { padding: 0; }
|
||
.p1 { padding: 1em; }
|
||
.p2 { padding: 2em; }
|
||
|
||
|
||
|
||
/* spécial hr de 1px de haut */
|
||
hr {
|
||
background-color: #666;
|
||
border: 0;
|
||
color: #666;
|
||
height: 1px;
|
||
margin: 0 0 1em;
|
||
padding: 0;
|
||
}
|
||
|
||
/* pour cacher du texte de manière accessible… toussââââ */
|
||
.invisible {
|
||
border: 0;
|
||
clip: rect(0 0 0 0);
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
position: absolute;
|
||
width: 1px;
|
||
}
|
||
|
||
.hidden { display: none; } /* caché partout */
|
||
.nodesktop { display: none; } /* caché sur desktop */
|
||
/*.noprint {} /* caché sur print */
|
||
/*.notablet {} /* caché sur tablettes */
|
||
/*.nomobile {} /* caché sur mobile */
|
||
|
||
|
||
/**
|
||
* modules
|
||
*/
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 06 -- structure globale
|
||
* (page / skip links / header / contenu principal / footer)
|
||
*****************************************************************
|
||
*/
|
||
|
||
/* === page === */
|
||
.page {
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
/* === skip links = liens d’évitement === */
|
||
.skip {
|
||
|
||
}
|
||
/* skip__link = un lien d’évitement */
|
||
/* idéalement mettez-les visibles pas uniquement au focus */
|
||
.skip__link {
|
||
|
||
}
|
||
/* sinon pensez à les rendre visibles au focus */
|
||
.skip__link:focus,
|
||
.skip__link:hover,
|
||
.skip__link:active {
|
||
|
||
}
|
||
|
||
|
||
|
||
/* === header === */
|
||
header {
|
||
background-color: rgb(103, 83, 108);
|
||
color: rgb(238, 215, 244);
|
||
padding-top: 2em;
|
||
}
|
||
|
||
header h1 {
|
||
display: inline;
|
||
font-size: 3.125em;
|
||
hyphens: none;
|
||
}
|
||
|
||
#titre {
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
|
||
.header {
|
||
}
|
||
|
||
.logo {
|
||
border: 0;
|
||
border-radius: 50%;
|
||
padding: .5em;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.navigation ul {
|
||
list-style-type: none;
|
||
margin-top: 0;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.navigation li {
|
||
display: inline;
|
||
}
|
||
|
||
.navigation a, .navigation a:active, .navigation a:hover, .navigation a:visited {
|
||
color: rgb(103, 83, 108);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.navigation div {
|
||
margin: 0 .5em .6em 0;
|
||
}
|
||
|
||
|
||
/* === contenu principal === */
|
||
.main {
|
||
max-width: 57em;
|
||
width: 80%;
|
||
}
|
||
|
||
#contact ul, #online ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-top: 2.5em;
|
||
}
|
||
|
||
#online p {
|
||
padding-right: 1em;
|
||
margin: 1em;
|
||
}
|
||
|
||
|
||
/* === footer === */
|
||
footer {
|
||
background-color: rgb(103, 83, 108);
|
||
color: rgb(238, 215, 244);
|
||
padding: 2em 0 2em 0;
|
||
text-align: center
|
||
}
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 07 -- forms
|
||
*****************************************************************
|
||
*/
|
||
|
||
/* donne envie de cliquer sur un bouton */
|
||
label,
|
||
button,
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
input[type="reset"] {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* évite un resize potentiellement foireux */
|
||
textarea {
|
||
resize: vertical;
|
||
}
|
||
/* supprime un bug Firefox sur button */
|
||
button::-moz-focus-inner { border: 0; padding: 0; }
|
||
|
||
label,
|
||
button,
|
||
input,
|
||
select {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/** fix typo inputs **/
|
||
input,
|
||
select,
|
||
textarea,
|
||
optgroup,
|
||
button {
|
||
font: inherit;
|
||
}
|
||
|
||
/* à adapter selon le design voulu */
|
||
input,
|
||
select,
|
||
textarea {
|
||
border: 1px solid #686971;
|
||
border-radius: 5px;
|
||
padding: .5em;
|
||
width: 250px;
|
||
}
|
||
|
||
/* pour les textes des champs */
|
||
.label {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* à adapter selon le design voulu */
|
||
/* la couleur des liens est dans .navigation */
|
||
.button {
|
||
color: rgb(103, 83, 108);
|
||
border-style: solid;
|
||
border-size: .55555px;
|
||
border-color: rgb(238, 215, 244);
|
||
border-radius: 5px;
|
||
-webkit-box-shadow: 1px 1px 1px #ddd;
|
||
box-shadow: 1px 1px 1px #ddd;
|
||
background: rgb(238, 215, 244);
|
||
text-align: center;
|
||
}
|
||
|
||
/*
|
||
* évite dimensionnement des radios, checkboxes et images
|
||
* et un affichage différent sous IE
|
||
*/
|
||
input[type="radio"],
|
||
input[type="checkbox"],
|
||
input[type="image"] {
|
||
background-color: transparent;
|
||
border: 0;
|
||
width: auto;
|
||
}
|
||
|
||
/* pour annuler la taille des inputs ou autres */
|
||
.auto {
|
||
width: auto;
|
||
}
|
||
|
||
/* messages d’erreur ou de confirmation */
|
||
.alert,
|
||
.alert input,
|
||
.alert textarea,
|
||
.alert select {
|
||
color: #d01b3d;
|
||
font-weight: bold;
|
||
}
|
||
/* .redborder sert à débugger uniquement */
|
||
.alert input,
|
||
.alert textarea,
|
||
.alert select,
|
||
.redborder {
|
||
border: 1px solid #d01b3d;
|
||
}
|
||
.alert img {
|
||
border: 0;
|
||
}
|
||
/*.ok {
|
||
|
||
}*/
|
||
|
||
/*
|
||
* peut être complété par les attributs HTML5 required
|
||
* exemple avec une couleur, penser à ne pas uniquement transmettre l’info ainsi
|
||
*/
|
||
/*select:required:invalid,
|
||
input:required:invalid,
|
||
input:focus:invalid,
|
||
textarea:required:invalid,
|
||
textarea:focus:invalid {
|
||
background: #fef6f6;
|
||
-moz-box-shadow: none;
|
||
}
|
||
|
||
input:focus:required:valid,
|
||
textarea:focus:required:valid,
|
||
select:focus:required:valid {
|
||
background: #efe;
|
||
-moz-box-shadow: none;
|
||
}*/
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 08 -- dans le contenu (contenus spécifiques aux pages)
|
||
*****************************************************************
|
||
*/
|
||
|
||
/* home */
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 09 -- breakpoints mineurs entre desktop et tablettes
|
||
*****************************************************************
|
||
*/
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 10 -- homo tablettes - breakpoint majeur
|
||
*****************************************************************
|
||
*/
|
||
|
||
@media (max-width: 47.9375em) { /* equiv 767px */
|
||
|
||
/**
|
||
* layout/modules
|
||
*/
|
||
|
||
/* affichage des éléments */
|
||
.nodesktop { display: block; }
|
||
|
||
/* cachage des éléments inutiles, chabitte ! */
|
||
.notablet { display: none; }
|
||
|
||
/* linéarisation contenus flottants/table-layout */
|
||
.autotablet {
|
||
float: none;
|
||
display: block;
|
||
width: auto;
|
||
}
|
||
|
||
/**
|
||
* adaptation structure globale (page / skip links / header / contenu principal / footer)
|
||
*/
|
||
|
||
.main {
|
||
width: 80%;
|
||
}
|
||
|
||
|
||
/**
|
||
* dans le contenu (contenus spécifiques aux pages)
|
||
*/
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 11 -- breakpoints mineurs entre tablettes et mobile
|
||
*****************************************************************
|
||
*/
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 12 -- mobile - breakpoint majeur
|
||
*****************************************************************
|
||
*/
|
||
|
||
@media (max-width: 40em) { /* equiv 640px */
|
||
|
||
/**
|
||
* layout/modules
|
||
*/
|
||
|
||
/* affichage des éléments */
|
||
.notablet { display: block; }
|
||
|
||
/* cachage des éléments inutiles, chabitte ! */
|
||
.nomobile { display: none; }
|
||
|
||
/* linéarisation contenus flottants/table-layout */
|
||
.automobile {
|
||
float: none;
|
||
display: block;
|
||
width: auto;
|
||
}
|
||
|
||
/**
|
||
* adaptation structure globale (page / skip links / header / contenu principal / footer)
|
||
*/
|
||
|
||
.main {
|
||
width: 80%;
|
||
}
|
||
|
||
|
||
/**
|
||
* dans le contenu (contenus spécifiques aux pages)
|
||
*/
|
||
|
||
header h1 {
|
||
font-size: 2.275em;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 13 -- breakpoints mineurs tout petit mobile
|
||
*****************************************************************
|
||
*/
|
||
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 14 -- print
|
||
*****************************************************************
|
||
*/
|
||
|
||
@media print {
|
||
/**
|
||
* ajouter là-dedans les éléments qui ont besoin d’être
|
||
* resetés de manière très bourrine pour le print
|
||
*/
|
||
body,
|
||
html,
|
||
.page,
|
||
.reset4print {
|
||
background-color: #fff;
|
||
background-image: none;
|
||
border: 0;
|
||
box-shadow: none;
|
||
color: #000;
|
||
float: none;
|
||
height: auto;
|
||
margin: 0;
|
||
max-width: 100%;
|
||
min-height: 0;
|
||
padding: 0;
|
||
position: static;
|
||
width: auto;
|
||
}
|
||
|
||
body {
|
||
padding: .5em;
|
||
}
|
||
|
||
/* cachage des éléments inutiles, chabitte ! */
|
||
.noprint {
|
||
display: none;
|
||
}
|
||
|
||
/* affichage éléments spécifiques au print */
|
||
.onprint {
|
||
display: block;
|
||
}
|
||
|
||
/* éviter saut de page hasardeux */
|
||
blockquote, ul, ol {
|
||
page-break-inside: avoid;
|
||
}
|
||
h1, h2, h3, caption {
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
/* affichage des liens, sauf pour image contenue */
|
||
/* attention, penser à vérifier le résultat et penser
|
||
* à limiter cette possibilité aux liens dans le contenu */
|
||
/*a:after {
|
||
content: " (" attr(href) ") ";
|
||
}
|
||
a:after img {
|
||
content: "";
|
||
}*/
|
||
|
||
/* ici fix propriétés particulières */
|
||
|
||
|
||
} /* end print */
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 15 -- fix viewport
|
||
*****************************************************************
|
||
*/
|
||
|
||
/* fix viewport pour Win8 (snap mode) et préparer le jour
|
||
* où le viewport sera supporté par tous les moteurs
|
||
*
|
||
* Exemples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
|
||
* width=device-width => width: device-width;
|
||
* height=device-height => height: device-height;
|
||
* initial-scale=2 => zoom: 2;
|
||
* maximum-scale=2 => max-zoom: 2;
|
||
* minimum-scale=0.5 => min-zoom: 0.5;
|
||
* user-scalable=no => user-zoom: fixed;
|
||
*
|
||
* pour le snap mode de Win8 => seul width: device-width; fonctionne pour l’instant
|
||
*/
|
||
|
||
@-webkit-viewport {
|
||
width: device-width;
|
||
}
|
||
@-moz-viewport {
|
||
width: device-width;
|
||
}
|
||
@-ms-viewport {
|
||
width: device-width;
|
||
}
|
||
@-o-viewport {
|
||
width: device-width;
|
||
}
|
||
@viewport {
|
||
width: device-width;
|
||
}
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 16 -- règles d’état
|
||
*****************************************************************
|
||
*/
|
||
|
||
/*
|
||
* Règles d’état = mises en bas pour être prioritaires
|
||
*
|
||
*/
|
||
|
||
/*
|
||
.is-hidden,
|
||
[aria-hidden=true] {
|
||
display: none;
|
||
}
|
||
*/
|
||
|
||
|
||
|
||
|
||
/*
|
||
*****************************************************************
|
||
* 17 -- bonus : Fixes IE
|
||
*****************************************************************
|
||
*/
|
||
|
||
/*
|
||
* basé sur les classes conditionnelles sur l’élément HTML
|
||
*
|
||
* à utiliser seulement si peu de corrections et
|
||
* pas d’impact sur les perfs sur les autres navigateurs
|
||
*
|
||
*/
|
||
|
||
/* less than IE 9 */
|
||
.oldies .nooldies {
|
||
display: none;
|
||
}
|
||
|
||
.ie6 .noie6 {
|
||
display: none;
|
||
}
|
||
.ie7 .noie7 {
|
||
display: none;
|
||
}
|
||
.ie8 .noie8 {
|
||
display: none;
|
||
}
|
||
.ie9 .noie9 {
|
||
display: none;
|
||
}
|
||
|
||
.ie7 .col,
|
||
.ie7 .col-noalign,
|
||
.ie6 .col,
|
||
.ie6 .col-noalign {
|
||
float: left;
|
||
}
|
||
.ie7 .row,
|
||
.ie6 .row {
|
||
overflow: auto;
|
||
}
|