diff --git a/css/rocssti.css b/css/rocssti.css new file mode 100644 index 0000000..22eee5a --- /dev/null +++ b/css/rocssti.css @@ -0,0 +1,1118 @@ +@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: 5em; + +} +.header { + +} +.logo { + border: 0; + border-radius: 50%; + padding: .5em; + +} +.navigation { + +} + + +/* === contenu principal === */ +.main { + max-width: 60em; +} + +#contact ul, #online ul { + list-style: none; +} + + +/* === footer === */ +.footer { + +} + + + + +/* + ***************************************************************** + * 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 */ +.button { + background: #fff; + border-radius: 5px; + -webkit-box-shadow: 1px 1px 1px #ddd; + box-shadow: 1px 1px 1px #ddd; + color: #000; +} + +/* + * é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) + */ + + + /** + * 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) + */ + + + /** + * dans le contenu (contenus spécifiques aux pages) + */ + +} + + + + +/* + ***************************************************************** + * 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/index.html b/index.html index c281990..329b959 100644 --- a/index.html +++ b/index.html @@ -6,71 +6,64 @@ iGor milhit - - - - + +
-
-
- mon avatar, un micket fâché, en rose et violet -

iGor milhit

-
-
- -
- -
+ + -
-

Contact

-
+
+

Contact

-
- - +
+
+ +
+
+
+ +
-
- -
-
-
-
-
+

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.

-
+

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.

@@ -79,42 +72,36 @@

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.

-
-
- -

Ailleurs, en ligne

-
- - -
-
    -
    • -
    • -
    • -
+
+

Ailleurs, en ligne

+
+
+
    +
    • +
    • +
    • +
+
+
+
+
    +
    • +
    • +
  • 1KKmsg9CkFtbREf1sLEirJbsqJGTqJpStoi
    • +
+
+
+
+
    +
    • +
    • +
+
- -
-
    -
    • -
    • -
  • 1KKmsg9CkFtbREf1sLEirJbsqJGTqJpStoi
    • -
-
- -
-
    -
    • -
    • -
-
-
- -