igor.milhit/css/style.css

1184 lines
21 KiB
CSS
Raw Normal View History

@charset "UTF-8";
/* UTF-8 déclaré avant toute chose */
2015-09-22 14:03:38 +02:00
/******************************************************************
* 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 daucun type,
* lauteur ne saurait être tenu responsable de quoi que ce soit pour
* lutilisation 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 dIE<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;
}
2015-09-22 14:03:38 +02:00
/* 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);
}
2015-09-22 14:03:38 +02:00
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 */
2015-09-22 14:03:38 +02:00
}
/*
*****************************************************************
* 02 -- ainsi font font font + structure Hx
*****************************************************************
*/
2015-09-22 14:03:38 +02:00
/*@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 laide 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;
}
/* jy tiens, les abbr cest 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 lURL 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 dune inline-grid */
.grid {
vertical-align: top;
}
/* pour relativiser */
.relative {
position: relative;
}
/* bloc centré */
.center {
margin-left: auto;
margin-right: auto;
}
/* activation de laccé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 {
2015-09-22 14:03:38 +02:00
2015-11-07 09:03:02 +01:00
}
/* skip__link = un lien dévitement */
/* idéalement mettez-les visibles pas uniquement au focus */
.skip__link {
2015-11-07 09:03:02 +01:00
}
/* 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);
2015-11-07 09:03:02 +01:00
padding-top: 2em;
2015-09-22 14:03:38 +02:00
}
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;
2015-09-22 14:03:38 +02:00
}
.navigation ul {
list-style-type: none;
margin-top: 0;
padding-left: 0;
2015-09-22 14:03:38 +02:00
}
.navigation li {
display: inline;
}
.navigation a, .navigation a:active, .navigation a:hover, .navigation a:visited {
color: rgb(103, 83, 108);
text-decoration: none;
}
2015-10-23 09:24:55 +02:00
.navigation div {
margin: 0 .5em .6em 0;
2015-10-23 09:24:55 +02:00
}
2015-09-22 14:03:38 +02:00
/* === contenu principal === */
.main {
max-width: 57em;
width: 80%;
2015-09-22 14:03:38 +02:00
}
#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 derreur 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 linfo 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)
*/
2015-09-22 14:03:38 +02:00
}
/*
*****************************************************************
* 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;
}
2015-09-22 14:03:38 +02:00
}
/*
*****************************************************************
* 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 linstant
*/
@-webkit-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
2015-09-22 14:03:38 +02:00
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
2015-09-22 14:03:38 +02:00
/*
*****************************************************************
* 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 dimpact 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;
2015-09-22 14:03:38 +02:00
}