diff --git a/css/font-awesome.css b/css/font-awesome.css index 880eb82..a0b879f 100644 --- a/css/font-awesome.css +++ b/css/font-awesome.css @@ -1,13 +1,13 @@ /*! - * Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome + * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; - src: url('../fonts/fontawesome-webfont.eot?v=4.4.0'); - src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg'); + src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); + src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } @@ -118,31 +118,31 @@ } } .fa-rotate-90 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); @@ -1383,7 +1383,7 @@ .fa-digg:before { content: "\f1a6"; } -.fa-pied-piper:before { +.fa-pied-piper-pp:before { content: "\f1a7"; } .fa-pied-piper-alt:before { @@ -1509,6 +1509,7 @@ content: "\f1ce"; } .fa-ra:before, +.fa-resistance:before, .fa-rebel:before { content: "\f1d0"; } @@ -2024,3 +2025,175 @@ .fa-fonticons:before { content: "\f280"; } +.fa-reddit-alien:before { + content: "\f281"; +} +.fa-edge:before { + content: "\f282"; +} +.fa-credit-card-alt:before { + content: "\f283"; +} +.fa-codiepie:before { + content: "\f284"; +} +.fa-modx:before { + content: "\f285"; +} +.fa-fort-awesome:before { + content: "\f286"; +} +.fa-usb:before { + content: "\f287"; +} +.fa-product-hunt:before { + content: "\f288"; +} +.fa-mixcloud:before { + content: "\f289"; +} +.fa-scribd:before { + content: "\f28a"; +} +.fa-pause-circle:before { + content: "\f28b"; +} +.fa-pause-circle-o:before { + content: "\f28c"; +} +.fa-stop-circle:before { + content: "\f28d"; +} +.fa-stop-circle-o:before { + content: "\f28e"; +} +.fa-shopping-bag:before { + content: "\f290"; +} +.fa-shopping-basket:before { + content: "\f291"; +} +.fa-hashtag:before { + content: "\f292"; +} +.fa-bluetooth:before { + content: "\f293"; +} +.fa-bluetooth-b:before { + content: "\f294"; +} +.fa-percent:before { + content: "\f295"; +} +.fa-gitlab:before { + content: "\f296"; +} +.fa-wpbeginner:before { + content: "\f297"; +} +.fa-wpforms:before { + content: "\f298"; +} +.fa-envira:before { + content: "\f299"; +} +.fa-universal-access:before { + content: "\f29a"; +} +.fa-wheelchair-alt:before { + content: "\f29b"; +} +.fa-question-circle-o:before { + content: "\f29c"; +} +.fa-blind:before { + content: "\f29d"; +} +.fa-audio-description:before { + content: "\f29e"; +} +.fa-volume-control-phone:before { + content: "\f2a0"; +} +.fa-braille:before { + content: "\f2a1"; +} +.fa-assistive-listening-systems:before { + content: "\f2a2"; +} +.fa-asl-interpreting:before, +.fa-american-sign-language-interpreting:before { + content: "\f2a3"; +} +.fa-deafness:before, +.fa-hard-of-hearing:before, +.fa-deaf:before { + content: "\f2a4"; +} +.fa-glide:before { + content: "\f2a5"; +} +.fa-glide-g:before { + content: "\f2a6"; +} +.fa-signing:before, +.fa-sign-language:before { + content: "\f2a7"; +} +.fa-low-vision:before { + content: "\f2a8"; +} +.fa-viadeo:before { + content: "\f2a9"; +} +.fa-viadeo-square:before { + content: "\f2aa"; +} +.fa-snapchat:before { + content: "\f2ab"; +} +.fa-snapchat-ghost:before { + content: "\f2ac"; +} +.fa-snapchat-square:before { + content: "\f2ad"; +} +.fa-pied-piper:before { + content: "\f2ae"; +} +.fa-first-order:before { + content: "\f2b0"; +} +.fa-yoast:before { + content: "\f2b1"; +} +.fa-themeisle:before { + content: "\f2b2"; +} +.fa-google-plus-circle:before, +.fa-google-plus-official:before { + content: "\f2b3"; +} +.fa-fa:before, +.fa-font-awesome:before { + content: "\f2b4"; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} diff --git a/css/normalize.css b/css/normalize.css deleted file mode 100644 index 81c6f31..0000000 --- a/css/normalize.css +++ /dev/null @@ -1,427 +0,0 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} \ No newline at end of file diff --git a/css/rocssti.css b/css/rocssti.css deleted file mode 100644 index 58f8b44..0000000 --- a/css/rocssti.css +++ /dev/null @@ -1,1161 +0,0 @@ -@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 - * - * 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 16px */ - 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 http://bit.ly/1g4X0bX */ - /* 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.6em; /* taille de base équiv à 16px */ - 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.75em; /* equiv 28px */ - line-height: 1.71429; - margin: 0 0 .85714em 0; -} -h2, -.h2 { - display: block; - font-size: 1.625em; /* equiv 26px */ - line-height: 1.84615; - margin: 0 0 .92308em 0; -} -h3, -.h3 { - display: block; - font-size: 1.5em; /* equiv 24px */ - line-height: 1; - margin: 0 0 .5em 0; -} -h4, -.h4 { - display: block; - font-size: 1.375em; /* equiv 22px */ - line-height: 1.09091; - margin: 0 0 1.09091em 0; -} -h5, -.h5 { - display: block; - font-size: 1.25em; /* equiv 20px */ - line-height: 1.2; - margin: 0 0 1.2em 0; -} -h6, -.h6 { - display: block; - font-size: 1.125em; /* equiv 18px */ - line-height: 1.33333; - margin: 0 0 1.33333em 0; -} - -.uppercase { - text-transform: uppercase; -} - -/* autres classes utiles */ -.smaller { - font-size: .6875em; /* equiv 11px */ - line-height: 2.18182; - margin: 2.18182em 0; -} -.small { - font-size: .75em; /* equiv 12px */ - line-height: 2; - margin: 2em 0; -} -.big { - font-size: 1.125em; /* equiv 18px */ - line-height: 1.33333; - margin: 1.33333em 0; -} -.bigger { - font-size: 1.25em; /* equiv 20px */ - line-height: 1.2; - margin: 1.2em 0; -} -.biggest { - font-size: 1.375em; /* equiv 22px */ - line-height: 1.09091; - margin: 1.09091em 0; -} - - - - -/* - ***************************************************************** - * 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; -} -/* é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; -} -.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; -} - - -.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 1em 0; -} - - -/* === contenu principal === */ -.main { - max-width: 60em; - 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; -} diff --git a/css/skeleton.css b/css/skeleton.css deleted file mode 100644 index f28bf6c..0000000 --- a/css/skeleton.css +++ /dev/null @@ -1,418 +0,0 @@ -/* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 -*/ - - -/* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– -- Grid -- Base Styles -- Typography -- Links -- Buttons -- Forms -- Lists -- Code -- Tables -- Spacing -- Utilities -- Clearing -- Media Queries -*/ - - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; - box-sizing: border-box; } - -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } -} - -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 4%; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - - .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } - - /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } - .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } - .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } - .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } - .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } - .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } - .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } - .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } - .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } - .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } - .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } - - .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - -} - - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; } -body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } - - -/* Typography -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 2rem; - font-weight: 300; } -h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} -h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } -h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } -h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } -h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } -h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } - -/* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } -} - -p { - margin-top: 0; } - - -/* Links -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { - color: #1EAEDB; } -a:hover { - color: #0FA0CE; } - - -/* Buttons -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - display: inline-block; - height: 38px; - padding: 0 30px; - color: #555; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - letter-spacing: .1rem; - text-transform: uppercase; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - border: 1px solid #bbb; - cursor: pointer; - box-sizing: border-box; } -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover, -.button:focus, -button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="button"]:focus { - color: #333; - border-color: #888; - outline: 0; } -.button.button-primary, -button.button-primary, -input[type="submit"].button-primary, -input[type="reset"].button-primary, -input[type="button"].button-primary { - color: #FFF; - background-color: #33C3F0; - border-color: #33C3F0; } -.button.button-primary:hover, -button.button-primary:hover, -input[type="submit"].button-primary:hover, -input[type="reset"].button-primary:hover, -input[type="button"].button-primary:hover, -.button.button-primary:focus, -button.button-primary:focus, -input[type="submit"].button-primary:focus, -input[type="reset"].button-primary:focus, -input[type="button"].button-primary:focus { - color: #FFF; - background-color: #1EAEDB; - border-color: #1EAEDB; } - - -/* Forms -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea, -select { - height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid #D1D1D1; - border-radius: 4px; - box-shadow: none; - box-sizing: border-box; } -/* Removes awkward default styles on some inputs for iOS */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } -textarea { - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="text"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { - border: 1px solid #33C3F0; - outline: 0; } -label, -legend { - display: block; - margin-bottom: .5rem; - font-weight: 600; } -fieldset { - padding: 0; - border-width: 0; } -input[type="checkbox"], -input[type="radio"] { - display: inline; } -label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; } - - -/* Lists -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { - list-style: circle inside; } -ol { - list-style: decimal inside; } -ol, ul { - padding-left: 0; - margin-top: 0; } -ul ul, -ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } -li { - margin-bottom: 1rem; } - - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - - -/* Tables -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -th, -td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } -th:first-child, -td:first-child { - padding-left: 0; } -th:last-child, -td:last-child { - padding-right: 0; } - - -/* Spacing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -button, -.button { - margin-bottom: 1rem; } -input, -textarea, -select, -fieldset { - margin-bottom: 1.5rem; } -pre, -blockquote, -dl, -figure, -table, -p, -ul, -ol, -form { - margin-bottom: 2.5rem; } - - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } - - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - - -/* Clearing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -/* Self Clearing Goodness */ -.container:after, -.row:after, -.u-cf { - content: ""; - display: table; - clear: both; } - - -/* Media Queries -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* -Note: The best way to structure the use of media queries is to create the queries -near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. -*/ - - -/* Larger than mobile */ -@media (min-width: 400px) {} - -/* Larger than phablet (also point when grid becomes active) */ -@media (min-width: 550px) {} - -/* Larger than tablet */ -@media (min-width: 750px) {} - -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than Desktop HD */ -@media (min-width: 1200px) {} diff --git a/css/style.css b/css/style.css index 93f911d..c723404 100644 --- a/css/style.css +++ b/css/style.css @@ -1,67 +1,1169 @@ -/* ---------- Fonts ---------- */ +@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 + * + * 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 16px */ + 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 http://bit.ly/1g4X0bX */ + /* 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.6em; /* taille de base équiv à 16px */ + line-height: 1.5; /* à corriger si besoin est */ +} + +/* + ***************************************************************** + * 02 -- ainsi font font font + structure Hx + ***************************************************************** + */ + +/*@font-face { + +}*/ @import url('../fonts/fonts.css'); -body { - font-family: "merriweatherlight", serif; - font-size: 2em; - color: rgba(0, 0, 0, 0.6); + +/* 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.75em; /* equiv 28px */ + line-height: 1.71429; + margin: 0 0 .85714em 0; +} +h2, +.h2 { + display: block; + font-size: 1.625em; /* equiv 26px */ + line-height: 1.84615; + margin: 0 0 .92308em 0; +} +h3, +.h3 { + display: block; + font-size: 1.5em; /* equiv 24px */ + line-height: 1; + margin: 0 0 .5em 0; +} +h4, +.h4 { + display: block; + font-size: 1.375em; /* equiv 22px */ + line-height: 1.09091; + margin: 0 0 1.09091em 0; +} +h5, +.h5 { + display: block; + font-size: 1.25em; /* equiv 20px */ + line-height: 1.2; + margin: 0 0 1.2em 0; +} +h6, +.h6 { + display: block; + font-size: 1.125em; /* equiv 18px */ + line-height: 1.33333; + margin: 0 0 1.33333em 0; +} + +.uppercase { + text-transform: uppercase; +} + +/* autres classes utiles */ +.smaller { + font-size: .6875em; /* equiv 11px */ + line-height: 2.18182; + margin: 2.18182em 0; +} +.small { + font-size: .75em; /* equiv 12px */ + line-height: 2; + margin: 2em 0; +} +.big { + font-size: 1.125em; /* equiv 18px */ + line-height: 1.33333; + margin: 1.33333em 0; +} +.bigger { + font-size: 1.25em; /* equiv 20px */ + line-height: 1.2; + margin: 1.2em 0; +} +.biggest { + font-size: 1.375em; /* equiv 22px */ + line-height: 1.09091; + margin: 1.09091em 0; +} + +.smallcaps { + font-variant: small-caps; } -/* ----------- titre ---------- */ + +/* + ***************************************************************** + * 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; +} +/* é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; +} +.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 { - margin-bottom: 2em; - background-color: rgba(103, 83, 108, 1); */ -} - -#title { + background-color: rgb(103, 83, 108); + color: rgb(238, 215, 244); padding-top: 2em; - padding-bottom : 1em; - display: flex; - align-items: center; } -#avatar { +header h1 { + display: inline; + font-size: 3.125em; +} + +#titre { + margin-bottom: 1em; +} + + +.header { +} + +.logo { + border: 0; border-radius: 50%; padding: .5em; + vertical-align: top; } -h1 { - color: rgba(238, 215, 244, 1); - margin: 0; -} - -/* ----------- map ------------- */ - -#map { - height: 25em; - margin-bottom: 2.5rem; -} - -/* ----------- contact ---------- */ - -#contact { - padding-bottom: 1em; -} - -#contact ul { +.navigation ul { list-style-type: none; - margin-bottom: .5rem; + margin-top: 0; + padding-left: 0; } -#contact li { - line-height: 1.3em; +.navigation li { + display: inline; } -#empreinte { - font-family: monospace; +.navigation a, .navigation a:active, .navigation a:hover, .navigation a:visited { + color: rgb(103, 83, 108); + text-decoration: none; } -/* ----------- présentation et professionnel ------------ */ - -p { - -moz-hyphens: auto; - hyphens: auto; +.navigation div { + margin: 0 .5em .6em 0; +} + + +/* === contenu principal === */ +.main { + max-width: 60em; + 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; } diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf index 681bdd4..d4de13e 100644 Binary files a/fonts/FontAwesome.otf and b/fonts/FontAwesome.otf differ diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot index a30335d..c7b00d2 100644 Binary files a/fonts/fontawesome-webfont.eot and b/fonts/fontawesome-webfont.eot differ diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg index 6fd19ab..8b66187 100644 --- a/fonts/fontawesome-webfont.svg +++ b/fonts/fontawesome-webfont.svg @@ -1,6 +1,6 @@ - + @@ -169,7 +169,7 @@ - + @@ -178,7 +178,7 @@ - + @@ -219,8 +219,8 @@ - - + + @@ -362,8 +362,8 @@ - - + + @@ -410,7 +410,7 @@ - + @@ -454,7 +454,7 @@ - + @@ -484,7 +484,7 @@ - + @@ -555,7 +555,7 @@ - + @@ -600,11 +600,11 @@ - - + + - + @@ -621,20 +621,65 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf index d7994e1..f221e50 100644 Binary files a/fonts/fontawesome-webfont.ttf and b/fonts/fontawesome-webfont.ttf differ diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff index 6fd4ede..6e7483c 100644 Binary files a/fonts/fontawesome-webfont.woff and b/fonts/fontawesome-webfont.woff differ diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2 index 5560193..7eb74fd 100644 Binary files a/fonts/fontawesome-webfont.woff2 and b/fonts/fontawesome-webfont.woff2 differ diff --git a/index.html b/index.html index 6ae0a3d..68af3ea 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ iGor milhit - + @@ -19,9 +19,9 @@

iGor milhit

@@ -40,9 +40,9 @@
@@ -51,28 +51,28 @@ -
-

Qui suis-je ?

+
+

Personnel

Vieux comme la crise du pétrole, je suis né entre des livres, des taches d’encre et quelques vinyles. Les noyaux des centrales nucléaires se sont mises à fusionner, les empires d’après les empires s’écroulèrent et s’écroulent encore, et à la croissance des montagnes de papiers s’ajoute la croissance des montagnes de déchets électroniques. Au milieu de cette dématérialisation joyeuse, j’observe les traces éphémères de mon cheminement chaotique.

-
-

Que fais-je ?

-

De profession, je suis spécialiste HES en information documentaire. En clair, si tu as besoin de pouvoir compter sur une information de qualité, just in time, pourtant noyée dans la surabondance des flux contemporains, alors je suis en mesure de te satisfaire. Depuis septembre 2013, je suis assistant HES d'enseignement à la Haute école de gestion de Genève, au sein de la filière où j'ai obtenu mon diplôme.

- -

Passionné par l'informatique, je participe aux cours d'informatique de base (bureautique), ainsi qu'à la découverte des logiciels documentaires propres à ma profession. Comme les outils numériques s'imposent de plus en plus comme les intermédiaires incontrournables de la plupart de nos activités, tant privées que professionnelles, je suis convaincu de l'importance des logiciels libres. La technologie n'est pas neutre, car elle s'inscrit dans un contexte humain, dans un cadre juridique précis.

- -

Cet attrait pour l'informatique libre m'a poussé dans l'aventure de l'auto-hébergement : id-libre. L'administration d'un serveur me permet de pousser plus loin ma compréhension des fonctionnements du Web et m'initie peu à peu à la sécurité d'un système d'information.

+
+

Professionnel

+

De métier, je suis Spécialiste HES en information documentaire, ce qui peut se traduire par artisant en sciences de l'information. Plus précisément, je produis de l'information, je veille à son accessibilité et/ou à sa diffusion, à sa pérennité et à sa sécurité. Bien entendu, cette information peut prendre différentes formes, depuis les livres jusqu'aux données numériques de la recherche, en passant par la documentation technique, les documents administratifs, les articles scientifiques numériques, voire imprimés. Un domaine, ou plutôt des domaines divers et passionnants.

+

Dans cet ensemble de tâches, je me suis assez rapidement concentré sur deux aspects principaux : la compréhension, la gestion et le développement des systèmes d'informations documentaires, et les méthodes modernes de publications, à savoir celles qui tentent de réellement tirer les conséquences du passage au numérique.
+ D'une part, j'aime explorer, installer, paramétrer, modifier des outils comme les sigb, les cms, mais aussi comprendre et manipuler les moteurs de recherche. D'autre part, je m'intéresse de près à la publication, d'abord sur le Web, au moyen de chaînes éditoriales, de langages de balisage légers, de convertisseurs universels de formats comme pandoc, de générateurs de sites statiques.

+

Enfin et surtout, comme bien d'autres je suis convaincu que les sciences de l'information et la philosophie qui entoure l'informatique libre partagent un certain nombre de présupposés et s'enrichissent mutuellement. C'est pourquoi j'aime échanger et partager l'information et le savoir faire de la manière la plus ouverte et libre possible.

-

Ailleurs, en ligne

+

En ligne

fr.wikipedia

OpenStreetMap

keybase

GnuSocial

GitHub

+

Framagit

1KKmsg9CkFtbREf1sLEirJbsqJGTqJpStoi

inventaire.io

discogs

diff --git a/txt/moi.html b/txt/moi.html deleted file mode 100644 index a5851df..0000000 --- a/txt/moi.html +++ /dev/null @@ -1,2 +0,0 @@ -

Qui suis-je ?

-

Vieux comme la crise du pétrole, je suis né entre des livres, des taches d’encre et quelques vinyles. Les noyaux des centrales nucléaires se sont mises à fusionner, les empires d’après les empires s’écroulèrent et s’écroulent encore, et à la croissance des montagnes de papiers s’ajoute la croissance des montagnes de déchets électroniques. Au milieu de cette dématérialisation joyeuse, j’observe les traces éphémères de mon cheminement chaotique.

diff --git a/txt/moi.md b/txt/moi.md deleted file mode 100644 index a8667f5..0000000 --- a/txt/moi.md +++ /dev/null @@ -1,3 +0,0 @@ -## Qui suis-je ? - -Vieux comme la [crise du pétrole](https://fr.wikipedia.org/wiki/Premier_choc_pétrolier), je suis né entre des [livres](https://inventaire.io/inventory/igor), des taches d'encre et quelques [vinyles](https://www.discogs.com/fr/user/ignami/collection?sort=artist&sort_order=asc). Les noyaux des centrales nucléaires se sont [mises à fusionner](https://fr.wikipedia.org/wiki/Fusion_du_c%C5%93ur_d'un_r%C3%A9acteur_nucl%C3%A9aire#Cas_r.C3.A9els), les empires d'après les empires [s'écroulèrent](https://fr.wikipedia.org/wiki/Union_des_r%C3%A9publiques_socialistes_sovi%C3%A9tiques#Derni.C3.A8res_ann.C3.A9es_de_l.27URSS_.281985-1991.29) et s'écroulent encore, et à la croissance des montagnes de papiers s'ajoute la croissance des montagnes de déchets électroniques. Au milieu de cette dématérialisation joyeuse, j'observe les traces éphémères de mon cheminement chaotique. diff --git a/txt/parcours-pro.md b/txt/parcours-pro.md deleted file mode 100644 index 4d6a04e..0000000 --- a/txt/parcours-pro.md +++ /dev/null @@ -1,7 +0,0 @@ -## Que fais-je ? - -Après un parcours sinueux, au gré duquel j'ai appris la comptabilité double, l'économie politique, la littérature francophone et l'histoire, tout en exerçant mon savoir faire dans la grande distribution et sur divers chantier, j'ai acquis un [*Bachelor* HES en information documentaire](https://www.hesge.ch/heg/formation-base/bachelors-science/information-documentaire) à la Haute école de gestion de Genève. - -J'ai ensuite travaillé en tant que bibliothécaire à [l'infothèque](https://www.hesge.ch/heg/infotheque), où j'étais principalement en charge des formations aux usagers et des acquisitions des monographies. La formation et l'informatique m'attirent beaucoup, aussi je me suis engagé comme assistant d'enseignement dans la filière Information documentaire de l'école où je me suis formé. J'ai participé activement aux cours *informatique de base*, *systèmes d'information documentaires*, *publication Web* et *gestion de contenu (CMS)*. Enfin, j'ai mené à terme un projet de vocabulaire pour une base de donnée photographique institutionnelles et je participe encore à deux projets [CUS-P2] : [SLSP](http://blogs.ethz.ch/slsp) et [*Train 2 Dacar*](http://campus.hesge.ch/id_bilingue/projekte/train2dacar/index_fr.asp). - -De métier, je suis //Spécialiste HES en information documentaire//, ce qui peut se traduire par //artisant en sciences de l'information//. Plus précisément, je produit de l'information, je veille à son accessibilité et/ou à sa diffusion, à sa pérennité et à sa sécurité. Bien entendu, cette information peut prendre différentes formes, des livres aux données numériques de la recherche, en passant par la docuemntation technique, les documents administratifs, les contrats, mais aussi les systèmes qui les prennent en charge... Un domaine, ou plutôt des domaines divers et passionnants.