igor
/
igor.milhit
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

layout: grid adjustement 

* NEW Updates the avatar image.
* BETTER Improves the breakpoints.
* BETTER Improves the body and header grid.
* BETTER Updates the style.css file.
* NEW Sets the headers size base on font-size-base.
* FIX Fixes the .prof margin-top for large screens.
* NEW Updates the tag.
* Removes empty classes in the HTML.

Signed-off-by: iGor milhit <igor@milhit.ch>
web-fediverse-moi 1.1.1
iGor milhit 2019-03-02 08:59:57 +01:00
parent fd57fb6fc2
commit 6f698a8256
Signed by: igor
GPG Key ID: 692D97C3D0228A99
15 changed files with 181 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
css/style.css
View File

@ -34,26 +34,33 @@
******************** ********************
*/ */
html, html,
body { body,
h1,
h2,
h3,
h4,
h5,
h6,
ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
display: grid; display: grid;
grid-template-columns: [left-gutter] 1em [content] auto [right-gutter] 1em; grid-template-columns: [left-gutter] 5% [content] 90% [right-gutter] 5%;
grid-template-rows: [header] 30% [body] auto [footer] 30%; grid-template-rows: [header] 10% [body] auto [footer] 30%;
grid-column-gap: 0; grid-column-gap: 0;
} }
@media (min-width: 70em) { @media (min-width: 47.5em) {
body { body {
grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr; grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
} }
@media (min-width: 50em) and (max-width: 70em) { @media (min-width: 75em) {
body { body {
grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr; grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
} }
@ -62,21 +69,26 @@ body {
grid-row: header; grid-row: header;
grid-column: left-gutter/4; grid-column: left-gutter/4;
display: grid; display: grid;
grid-template-columns: [header-left-gutter] 1em [title] auto [header-right-gutter] 1em; grid-template-columns: [header-left-gutter] 5% [title] 90% [header-right-gutter] 5%;
grid-template-rows: [title] auto [menu] auto; grid-template-rows: [title] 7em [menu] 6em;
grid-column-gap: 0; grid-column-gap: 0;
} }
@media (min-width: 70em) { @media (min-width: 25.625em) {
.header { .header {
grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr; grid-template-rows: [title] 7em [menu] 3.4em;
grid-template-rows: [title] auto [menu] auto; }
}
@media (min-width: 47.5em) {
.header {
grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;
grid-template-rows: [title] 7em [menu] 3.4em;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
} }
@media (min-width: 50em) and (max-width: 70em) { @media (min-width: 75em) {
.header { .header {
grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr; grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;
grid-template-rows: [title] auto [menu] auto; grid-template-rows: [title] 7em [menu] 3.4em;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
} }
@ -93,18 +105,18 @@ body {
grid-row: footer; grid-row: footer;
grid-column: left-gutter/4; grid-column: left-gutter/4;
display: grid; display: grid;
grid-template-columns: [footer-left-gutter] 1em [center] auto [footer-right-gutter] 1em; grid-template-columns: [footer-left-gutter] 5% [center] 90% [footer-right-gutter] 5%;
grid-column-gap: 0; grid-column-gap: 0;
} }
@media (min-width: 70em) { @media (min-width: 47.5em) {
.footer { .footer {
grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr; grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
} }
@media (min-width: 50em) and (max-width: 70em) { @media (min-width: 75em) {
.footer { .footer {
grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr; grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
} }
@ -117,7 +129,7 @@ body {
grid-column: content; grid-column: content;
} }
@media (min-width: 70em) { @media (min-width: 75em) {
#contact { #contact {
display: grid; display: grid;
grid-template-columns: [pers] 1fr [prof] 1fr; grid-template-columns: [pers] 1fr [prof] 1fr;
@ -133,18 +145,42 @@ body {
@font-face { @font-face {
font-family: "merriweatherlight"; font-family: "merriweatherlight";
src: url("../fontsmerriweather_light-webfont.eot"); src: url("../fonts/merriweather_light-webfont.eot");
src: url("../fontsmerriweather_light-webfont.eot?#iefix") format("embedded-opentype"), url("../fontsmerriweather_light-webfont.woff2") format("woff2"), url("../fontsmerriweather_light-webfont.woff") format("woff"), url("../fontsmerriweather_light-webfont.ttf") format("truetype"), url("../fontsmerriweather_light-webfont.svg#merriweather_lightregular") format("svg"); src: url("../fonts/merriweather_light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/merriweather_light-webfont.woff2") format("woff2"), url("../fonts/merriweather_light-webfont.woff") format("woff"), url("../fonts/merriweather_light-webfont.ttf") format("truetype"), url("../fonts/merriweather_light-webfont.svg#merriweather_lightregular") format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "merriweatherlight"; font-family: "merriweatherlight";
src: url("../fontsmerriweather-lightitalic-webfont.eot"); src: url("../fonts/merriweather-lightitalic-webfont.eot");
src: url("../fontsmerriweather-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fontsmerriweather-lightitalic-webfont.woff2") format("woff2"), url("../fontsmerriweather-lightitalic-webfont.woff") format("woff"), url("../fontsmerriweather-lightitalic-webfont.ttf") format("truetype"), url("../fontsmerriweather-lightitalic-webfont.svg#merriweatherlight_italic") format("svg"); src: url("../fonts/merriweather-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/merriweather-lightitalic-webfont.woff2") format("woff2"), url("../fonts/merriweather-lightitalic-webfont.woff") format("woff"), url("../fonts/merriweather-lightitalic-webfont.ttf") format("truetype"), url("../fonts/merriweather-lightitalic-webfont.svg#merriweatherlight_italic") format("svg");
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
h1 {
font-size: 3.25rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.75rem;
}
h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.25rem;
}
.header { .header {
background-color: #67536c; background-color: #67536c;
color: #eed7f4; color: #eed7f4;
@ -152,17 +188,15 @@ body {
.header .title { .header .title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 1em;
padding-bottom: 0.5em;
} }
.header .title .logo { .header .title .logo {
height: 75%; height: 70%;
border-radius: 50%; border-radius: 50%;
} }
.header .title h1 { .header .title h1 {
font-weight: 200; font-weight: 200;
flex-grow: 1; flex-grow: 1;
margin-left: 1em; margin-left: 0.5em;
} }
.header .menu ul { .header .menu ul {
padding-left: 0; padding-left: 0;
@ -201,7 +235,7 @@ body {
} }
#contact { #contact {
font-size: 1.125rem; font-size: 1rem;
} }
#contact ul { #contact ul {
padding-left: 0; padding-left: 0;
@ -209,6 +243,14 @@ body {
#contact ul li { #contact ul li {
list-style: none; list-style: none;
} }
#contact .prof {
margin-top: 1em;
}
@media (min-width: 75em) {
#contact .prof {
margin-top: 0;
}
}
#personnel, #personnel,
#professionnel, #professionnel,
@ -226,11 +268,13 @@ body {
} }
#online p { #online p {
margin-right: 1em; margin-right: 1em;
margin-bottom: 0;
} }
.footer { .footer {
background-color: #67536c; background-color: #67536c;
color: #eed7f4; color: #eed7f4;
font-size: 1rem;
text-align: right; text-align: right;
margin-top: 2em; margin-top: 2em;
} }
@ -252,10 +296,11 @@ body {
body { body {
font-family: "merriweatherlight", serif; font-family: "merriweatherlight", serif;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.375;
} }
code { code {
font-size: 0.875rem; font-size: 1rem;
} }
.smallcaps { .smallcaps {

2
css/style.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/_variables.scss","../scss/_normalize.scss","../scss/_grid.scss","../scss/_fonts.scss","../scss/_header.scss","../scss/_content.scss","../scss/_footer.scss"],"names":[],"mappings":"AAAA;AAAA;;AAAA;;AAAA;AAAA;ACAA;AAAA;;AAAA;;AAAA;AAAA;AAaA;AAAA;;AAAA;;AAAA;AAAA;AAcA;AAAA;;AAAA;;AAAA;AAAA;AAqBA;AAAA;;AAAA;;AAAA;AAAA;AChDA;AAAA;EAEI;EACA;;;ACHJ;EACE;EASD;EACA;EACA;;AFyBE;EErCH;IAGI;IACA;;;AFoCD;EExCH;IAOG;IACA;;;;AAOH;EACE;EACA;EACA;EAWD;EACA;EACA;;AFME;EEtBH;IAKI;IACA;IACA;;;AFkBD;EEzBH;IAUG;IACA;IACA;;;AAKF;EACC;EACA;;AAEF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EASD;EACA;;AFlBE;EEKH;IAKI;IACA;;;AFRD;EEEH;IASG;IACA;;;AAIF;EACC;;;AAIF;EACE;EACA;;;AF1BC;EE6BH;IAEI;IACA;IACA;;EACA;IACE;;EAEF;IACE;;;;AC3EN;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;ACrBJ;EACE,kBJoBY;EInBZ,OJoBa;;AInBb;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;;AJ0CJ;EACE;EACA;;AACA;EACE;;AIzCF;EACE;;AAEF;EACE;EACA;;AAEF;EACE,OJNS;EIOT;EACA;EACA;EACA;EACA;;;ACjCN;EACE,OLwBW;;AKvBX;EACE,OLoBkB;;AKlBpB;EACE,OLgBW;;AKdb;EACE,OLYU;;;AKRd;EACE,WLJgB;;AKKhB;EACE;;AACA;EACE;;;AAKN;AAAA;AAAA;AAAA;EAIE;;;AAIA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;ACvCJ;EACE,kBNoBY;EMnBZ,ONoBa;EMnBb;EACA;;AACA;EACE;;ANmDF;EACE;EACA;;AACA;EACE;;AMpDJ;EACE,ONYW;EMXX;;;APOJ;EACE,aCXU;EDYV,WCXe;;;ADcjB;EACE,WCbkB;;;ADgBpB;EACE","file":"style.css"} {"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/_variables.scss","../scss/_normalize.scss","../scss/_grid.scss","../scss/_fonts.scss","../scss/_header.scss","../scss/_content.scss","../scss/_footer.scss"],"names":[],"mappings":"AAAA;AAAA;;AAAA;;AAAA;AAAA;ACAA;AAAA;;AAAA;;AAAA;AAAA;AAmBA;AAAA;;AAAA;;AAAA;AAAA;AAcA;AAAA;;AAAA;;AAAA;AAAA;AAuBA;AAAA;;AAAA;;AAAA;AAAA;ACxDA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASI;EACA;;;ACVJ;EACE;EACA;EACA;EACA;;AF0CC;EE9CH;IAMG;IACA;;;AFoCA;EE3CH;IAUI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AF4BC;EElCH;IAQI;;;AFuBD;EE/BH;IAWG;IACA;IACA;;;AFeA;EE5BH;IAgBI;IACA;IACA;;;AAEF;EACC;EACA;;AAED;EACC;EACA;;;AAIH;EACE;EACA;EACA;EACA;EACA;;AFJC;EEDH;IAOG;IACA;;;AFVA;EEEH;IAWI;IACA;;;AAEF;EACC;;;AAIH;EACE;EACA;;;AFvBC;EE0BH;IAEI;IACA;IACA;;EACA;IACE;;EAEF;IACE;;;;AC9EN;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EACI;EACA;EACA;EAKA;EACA;;AAGJ;EAAK,WHdU;;;AGef;EAAK,WHdU;;;AGef;EAAK,WHdU;;;AGef;EAAK,WHdU;;;AGef;EAAK,WHdU;;;AGef;EAAK,WHpBY;;;AITjB;EACE,kBJ0BY;EIzBZ,OJ0Ba;;AIzBb;EACE;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;;AJoDJ;EACE;EACA;;AACA;EACE;;AInDF;EACE;;AAEF;EACE;EACA;;AAEF;EACE,OJES;EIDT;EACA;EACA;EACA;EACA;;;AC/BN;EACE,OL8BW;;AK7BX;EACE,OL0BkB;;AKxBpB;EACE,OLsBW;;AKpBb;EACE,OLkBU;;;AKdd;EACE,WLEgB;;AKDhB;EACE;;AACA;EACE;;AAGJ;EACE;;ALqBD;EKtBD;IAGI;;;;AAKN;AAAA;AAAA;AAAA;EAIE;;;AAIA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;;AC9CJ;EACE,kBN0BY;EMzBZ,ON0Ba;EMzBb,WNagB;EMZhB;EACA;;AACA;EACE;;AN0DF;EACE;EACA;;AACA;EACE;;AM3DJ;EACE,ONiBW;EMhBX;;;APMJ;EACE,aCXU;EDYV,WCXe;EDYf,aCJiB;;;ADOnB;EACE,WCTgB;;;ADYlB;EACE","file":"style.css"}

2
css/style.min.css vendored
View File

@ -1 +1 @@
html,body{margin:0;padding:0}body{display:grid;grid-template-columns:[left-gutter] 1em [content] auto [right-gutter] 1em;grid-template-rows:[header] 30% [body] auto [footer] 30%;grid-column-gap:0}@media(min-width: 70em){body{grid-template-columns:[left-gutter] 1fr [content] 2fr [right-gutter] 1fr;grid-column-gap:1em}}@media(min-width: 50em)and (max-width: 70em){body{grid-template-columns:[left-gutter] 1fr [content] 4fr [right-gutter] 1fr;grid-column-gap:1em}}.header{grid-row:header;grid-column:left-gutter/4;display:grid;grid-template-columns:[header-left-gutter] 1em [title] auto [header-right-gutter] 1em;grid-template-rows:[title] auto [menu] auto;grid-column-gap:0}@media(min-width: 70em){.header{grid-template-columns:[header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;grid-template-rows:[title] auto [menu] auto;grid-column-gap:1em}}@media(min-width: 50em)and (max-width: 70em){.header{grid-template-columns:[header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;grid-template-rows:[title] auto [menu] auto;grid-column-gap:1em}}.header .title{grid-column:title;grid-row:title}.header .menu{grid-row:menu;grid-column:title}.footer{grid-row:footer;grid-column:left-gutter/4;display:grid;grid-template-columns:[footer-left-gutter] 1em [center] auto [footer-right-gutter] 1em;grid-column-gap:0}@media(min-width: 70em){.footer{grid-template-columns:[footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;grid-column-gap:1em}}@media(min-width: 50em)and (max-width: 70em){.footer{grid-template-columns:[footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;grid-column-gap:1em}}.footer ul{grid-column:center}.content{grid-row:body;grid-column:content}@media(min-width: 70em){#contact{display:grid;grid-template-columns:[pers] 1fr [prof] 1fr;grid-column-gap:1em}#contact .perso{grid-column:pers}#contact .prof{grid-column:prof}}@font-face{font-family:"merriweatherlight";src:url("../fonts/merriweather_light-webfont.eot");src:url("../fonts/merriweather_light-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/merriweather_light-webfont.woff2") format("woff2"),url("../fonts/merriweather_light-webfont.woff") format("woff"),url("../fonts/merriweather_light-webfont.ttf") format("truetype"),url("../fonts/merriweather_light-webfont.svg#merriweather_lightregular") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:"merriweatherlight";src:url("../fonts/merriweather-lightitalic-webfont.eot");src:url("../fonts/merriweather-lightitalic-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/merriweather-lightitalic-webfont.woff2") format("woff2"),url("../fonts/merriweather-lightitalic-webfont.woff") format("woff"),url("../fonts/merriweather-lightitalic-webfont.ttf") format("truetype"),url("../fonts/merriweather-lightitalic-webfont.svg#merriweatherlight_italic") format("svg");font-weight:normal;font-style:italic}.header{background-color:#67536c;color:#eed7f4}.header .title{display:flex;align-items:center;margin-top:1em;padding-bottom:.5em}.header .title .logo{height:75%;border-radius:50%}.header .title h1{font-weight:200;flex-grow:1;margin-left:1em}.header .menu ul{padding-left:0;list-style:none}.header .menu ul li{display:inline-block}.header .menu ul{margin-top:0}.header .menu li{margin-right:.1em;margin-top:1em}.header .menu a{color:#eed7f4;text-decoration:none;padding:5px;border:1px solid;border-radius:5px;box-shadow:1px 1px 1px #333}.content{color:#333}.content a{color:#bb5fd3}.content a:hover{color:#eed7f4}.content a:visited{color:#67536c}#contact{font-size:1.125rem}#contact ul{padding-left:0}#contact ul li{list-style:none}#personnel,#professionnel,#contact,#online{margin-top:2em}#online section{display:flex;flex-wrap:wrap}#online h2{margin-bottom:0}#online p{margin-right:1em;margin-bottom:0}.footer{background-color:#67536c;color:#eed7f4;font-size:1.125rem;text-align:right;margin-top:2em}.footer ul{margin:2em 0}.footer ul{padding-left:0;list-style:none}.footer ul li{display:inline-block}.footer a{color:#eed7f4;text-decoration:none}body{font-family:"merriweatherlight",serif;font-size:1.25rem;line-height:1.5em}code{font-size:.875rem}.smallcaps{font-variant:small-caps}/*# sourceMappingURL=style.min.css.map */ html,body,h1,h2,h3,h4,h5,h6,ul{margin:0;padding:0}body{display:grid;grid-template-columns:[left-gutter] 5% [content] 90% [right-gutter] 5%;grid-template-rows:[header] 10% [body] auto [footer] 30%;grid-column-gap:0}@media(min-width: 47.5em){body{grid-template-columns:[left-gutter] 1fr [content] 4fr [right-gutter] 1fr;grid-column-gap:1em}}@media(min-width: 75em){body{grid-template-columns:[left-gutter] 1fr [content] 2fr [right-gutter] 1fr;grid-column-gap:1em}}.header{grid-row:header;grid-column:left-gutter/4;display:grid;grid-template-columns:[header-left-gutter] 5% [title] 90% [header-right-gutter] 5%;grid-template-rows:[title] 7em [menu] 6em;grid-column-gap:0}@media(min-width: 25.625em){.header{grid-template-rows:[title] 7em [menu] 3.4em}}@media(min-width: 47.5em){.header{grid-template-columns:[header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;grid-template-rows:[title] 7em [menu] 3.4em;grid-column-gap:1em}}@media(min-width: 75em){.header{grid-template-columns:[header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;grid-template-rows:[title] 7em [menu] 3.4em;grid-column-gap:1em}}.header .title{grid-column:title;grid-row:title}.header .menu{grid-row:menu;grid-column:title}.footer{grid-row:footer;grid-column:left-gutter/4;display:grid;grid-template-columns:[footer-left-gutter] 5% [center] 90% [footer-right-gutter] 5%;grid-column-gap:0}@media(min-width: 47.5em){.footer{grid-template-columns:[footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;grid-column-gap:1em}}@media(min-width: 75em){.footer{grid-template-columns:[footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;grid-column-gap:1em}}.footer ul{grid-column:center}.content{grid-row:body;grid-column:content}@media(min-width: 75em){#contact{display:grid;grid-template-columns:[pers] 1fr [prof] 1fr;grid-column-gap:1em}#contact .perso{grid-column:pers}#contact .prof{grid-column:prof}}@font-face{font-family:"merriweatherlight";src:url("../fonts/merriweather_light-webfont.eot");src:url("../fonts/merriweather_light-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/merriweather_light-webfont.woff2") format("woff2"),url("../fonts/merriweather_light-webfont.woff") format("woff"),url("../fonts/merriweather_light-webfont.ttf") format("truetype"),url("../fonts/merriweather_light-webfont.svg#merriweather_lightregular") format("svg");font-weight:normal;font-style:normal}@font-face{font-family:"merriweatherlight";src:url("../fonts/merriweather-lightitalic-webfont.eot");src:url("../fonts/merriweather-lightitalic-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/merriweather-lightitalic-webfont.woff2") format("woff2"),url("../fonts/merriweather-lightitalic-webfont.woff") format("woff"),url("../fonts/merriweather-lightitalic-webfont.ttf") format("truetype"),url("../fonts/merriweather-lightitalic-webfont.svg#merriweatherlight_italic") format("svg");font-weight:normal;font-style:italic}h1{font-size:3.25rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}.header{background-color:#67536c;color:#eed7f4}.header .title{display:flex;align-items:center}.header .title .logo{height:70%;border-radius:50%}.header .title h1{font-weight:200;flex-grow:1;margin-left:.5em}.header .menu ul{padding-left:0;list-style:none}.header .menu ul li{display:inline-block}.header .menu ul{margin-top:0}.header .menu li{margin-right:.1em;margin-top:1em}.header .menu a{color:#eed7f4;text-decoration:none;padding:5px;border:1px solid;border-radius:5px;box-shadow:1px 1px 1px #333}.content{color:#333}.content a{color:#bb5fd3}.content a:hover{color:#eed7f4}.content a:visited{color:#67536c}#contact{font-size:1rem}#contact ul{padding-left:0}#contact ul li{list-style:none}#contact .prof{margin-top:1em}@media(min-width: 75em){#contact .prof{margin-top:0}}#personnel,#professionnel,#contact,#online{margin-top:2em}#online section{display:flex;flex-wrap:wrap}#online h2{margin-bottom:0}#online p{margin-right:1em;margin-bottom:0}.footer{background-color:#67536c;color:#eed7f4;font-size:1rem;text-align:right;margin-top:2em}.footer ul{margin:2em 0}.footer ul{padding-left:0;list-style:none}.footer ul li{display:inline-block}.footer a{color:#eed7f4;text-decoration:none}body{font-family:"merriweatherlight",serif;font-size:1.25rem;line-height:1.375}code{font-size:1rem}.smallcaps{font-variant:small-caps}/*# sourceMappingURL=style.min.css.map */

2
css/style.min.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_normalize.scss","../scss/_grid.scss","../scss/_variables.scss","../scss/_fonts.scss","../scss/_header.scss","../scss/_content.scss","../scss/_footer.scss","../scss/style.scss"],"names":[],"mappings":"AAAA,UAEI,SACA,UCHJ,KACE,aASD,0EACA,yDACA,kBC0BE,wBDtCH,KAGI,yEACA,qBCqCD,6CDzCH,KAOG,yEACA,qBAOH,QACE,gBACA,0BACA,aAWD,sFACA,4CACA,kBCOE,wBDvBH,QAKI,qFACA,4CACA,qBCmBD,6CD1BH,QAUG,qFACA,4CACA,qBAKF,eACC,kBACA,eAEF,cACE,cACA,kBAIF,QACE,gBACA,0BACA,aASD,uFACA,kBCjBE,wBDIH,QAKI,sFACA,qBCPD,6CDCH,QASG,sFACA,qBAIF,WACC,mBAIF,SACE,cACA,oBCzBC,wBD4BH,SAEI,aACA,4CACA,oBACA,gBACE,iBAEF,eACE,kBE3EN,WACI,gCACA,mDACA,+WAKA,mBACA,kBAGJ,WACI,gCACA,yDACA,4YAKA,mBACA,kBCrBJ,QACE,iBFqBY,QEpBZ,MFqBa,QEpBb,eACE,aACA,mBACA,eACA,oBACA,qBACE,WACA,kBAEF,kBACE,gBACA,YACA,gBF2CJ,iBACE,eACA,gBACA,oBACE,qBE1CF,iBACE,aAEF,iBACE,kBACA,eAEF,gBACE,MFLS,QEMT,qBACA,YACA,iBACA,kBACA,4BCjCN,SACE,MHyBW,KGxBX,WACE,MHqBkB,QGnBpB,iBACE,MHiBW,QGfb,mBACE,MHaU,QGTd,SACE,UHJgB,SGKhB,YACE,eACA,eACE,gBAKN,2CAIE,eAIA,gBACE,aACA,eAEF,WACE,gBAEF,UACE,iBACA,gBCxCJ,QACE,iBJqBY,QIpBZ,MJqBa,QIpBb,UJOgB,SINhB,iBACA,eACA,WACE,aJmDF,WACE,eACA,gBACA,cACE,qBIpDJ,UACE,MJYW,QIXX,qBCMJ,KACE,YLXU,0BKYV,ULXe,QKYf,YLTiB,MKYnB,KACE,ULdkB,QKiBpB,WACE","file":"style.min.css"} {"version":3,"sourceRoot":"","sources":["../scss/_normalize.scss","../scss/_grid.scss","../scss/_variables.scss","../scss/_fonts.scss","../scss/_header.scss","../scss/_content.scss","../scss/_footer.scss","../scss/style.scss"],"names":[],"mappings":"AAAA,+BASI,SACA,UCVJ,KACE,aACA,uEACA,yDACA,kBC0CC,0BD9CH,KAMG,yEACA,qBCoCA,wBD3CH,KAUI,yEACA,qBAIJ,QACE,gBACA,0BACA,aACA,mFACA,0CACA,kBC4BC,4BDlCH,QAQI,6CCuBD,0BD/BH,QAWG,qFACA,4CACA,qBCeA,wBD5BH,QAgBI,qFACA,4CACA,qBAEF,eACC,kBACA,eAED,cACC,cACA,kBAIH,QACE,gBACA,0BACA,aACA,oFACA,kBCJC,0BDDH,QAOG,sFACA,qBCVA,wBDEH,QAWI,sFACA,qBAEF,WACC,mBAIH,SACE,cACA,oBCvBC,wBD0BH,SAEI,aACA,4CACA,oBACA,gBACE,iBAEF,eACE,kBE9EN,WACI,gCACA,mDACA,+WAKA,mBACA,kBAGJ,WACI,gCACA,yDACA,4YAKA,mBACA,kBAGJ,aDde,QCef,aDde,OCef,aDde,KCef,aDde,QCef,aDde,OCef,aDpBiB,QETjB,QACE,iBF0BY,QEzBZ,MF0Ba,QEzBb,eACE,aACA,mBACA,qBACE,WACA,kBAEF,kBACE,gBACA,YACA,iBFoDJ,iBACE,eACA,gBACA,oBACE,qBEnDF,iBACE,aAEF,iBACE,kBACA,eAEF,gBACE,MFES,QEDT,qBACA,YACA,iBACA,kBACA,4BC/BN,SACE,MH8BW,KG7BX,WACE,MH0BkB,QGxBpB,iBACE,MHsBW,QGpBb,mBACE,MHkBU,QGdd,SACE,UHEgB,KGDhB,YACE,eACA,eACE,gBAGJ,eACE,eHqBD,wBGtBD,eAGI,cAKN,2CAIE,eAIA,gBACE,aACA,eAEF,WACE,gBAEF,UACE,iBACA,gBC9CJ,QACE,iBJ0BY,QIzBZ,MJ0Ba,QIzBb,UJagB,KIZhB,iBACA,eACA,WACE,aJ0DF,WACE,eACA,gBACA,cACE,qBI3DJ,UACE,MJiBW,QIhBX,qBCMJ,KACE,YLXU,0BKYV,ULXe,QKYf,YLJiB,MKOnB,KACE,ULTgB,KKYlB,WACE","file":"style.min.css"}

BIN
img/avatar.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

106
img/avatar.svg
View File

@ -1,106 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64px"
height="64px"
id="svg3959"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="avatar2d-square.svg"
inkscape:export-filename="/home/igor/creation/Images/avatar/neo-avatar_square-256.png"
inkscape:export-xdpi="361.08447"
inkscape:export-ydpi="361.08447">
<defs
id="defs3961">
<filter
id="filter3061"
inkscape:label="Darken edges"
inkscape:menu="Shadows and Glows"
inkscape:menu-tooltip="Darken the edges with an inner blur"
color-interpolation-filters="sRGB">
<feGaussianBlur
id="feGaussianBlur3063"
result="result6"
stdDeviation="1.5" />
<feComposite
id="feComposite3065"
in2="result6"
operator="atop"
in="SourceGraphic"
result="result8" />
<feComposite
id="feComposite3067"
in2="SourceAlpha"
in="result8"
operator="atop"
result="result9" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="16"
inkscape:cx="38.018312"
inkscape:cy="29.800736"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:document-units="px"
inkscape:grid-bbox="true"
inkscape:window-width="2560"
inkscape:window-height="1340"
inkscape:window-x="0"
inkscape:window-y="49"
inkscape:window-maximized="1" />
<metadata
id="metadata3964">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer">
<rect
style="fill:#eed7f4;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="rect3469"
width="64.523491"
height="63.904778"
x="-0.17677671"
y="0.0068362518"
inkscape:export-filename="/home/igor/creation/Images/avatar/neo-avatar-square-256.png"
inkscape:export-xdpi="358.36905"
inkscape:export-ydpi="358.36905" />
<path
id="path3957"
style="fill:#67536c"
d="m 13.676689,63.986481 c 0.979339,-1.553384 3.346734,-5.721263 3.505556,-7.562989 0.228537,-2.650159 -0.183937,-6.446917 -0.667506,-6.446917 C 7.7563433,55.679648 8.0852363,62.832132 6.2512673,64.171901 l -3.3668336,0.04663 -3.08212196,-0.05849 0.04102,-1.55278 2.34186396,-4.838992 5.1206546,-7.252077 c 2.6087877,-3.694669 7.6164437,-6.598555 8.3549377,-6.598555 0.289253,0 0.889577,0.63903 1.334059,1.420066 0.444472,0.781036 1.353088,1.811481 2.019153,2.289881 2.157685,1.549761 5.003377,3.259664 5.295692,3.182041 0.664808,0.337958 1.02846,0.224319 1.668042,0.421381 0.597708,0.307783 1.856181,0.758072 2.796607,1.000639 0.940425,0.242566 2.393812,0.747147 3.229745,1.12129 1.763005,0.789077 3.628709,1.039601 4.237625,1.221424 0.493936,0.14749 2.169458,3.1074 2.568102,3.855466 0.18256,0.342579 0.465006,0.60802 0.730554,1.009312 0.425719,0.643341 2.734312,3.906788 2.800684,4.551454 -2.485132,0.04253 -4.873298,0.02435 -7.391085,0.03381 -4.020945,0.01511 -8.236264,-0.116468 -12.061117,0.02289 -2.159684,0.07869 -4.210905,-0.0185 -6.126059,-0.05399 -0.643328,-0.01192 -1.249408,-0.002 -1.874942,0.0146 -0.398592,0.01059 -0.823645,0.07032 -1.211158,-0.02142 z m 29.383743,0.05791 c -0.112185,-0.364483 -0.399059,-3.41732 -0.63749,-4.979392 -0.238432,-1.562072 -0.685037,-3.327107 -0.992455,-3.922297 -0.74016,-1.433012 -0.383059,-2.440604 1.403415,-3.959855 l 1.475952,-1.255178 1.045785,1.633863 c 0.575183,0.898625 1.331497,1.974678 1.680702,2.391231 0.649585,0.774864 2.185611,4.420096 2.99631,7.447729 0.879765,2.42106 1.032856,2.624564 0.432046,2.644892 -0.514198,0.0174 -1.597322,0.0093 -3.063081,-0.07079 -0.476427,-0.02604 -1.812743,0.05702 -2.903595,0.07491 -0.635131,0.01041 -1.18705,-0.104551 -1.437589,-0.0051 z m -6.045825,-14.58113 c -0.745974,-1.134647 -0.824582,-2.602531 -0.201495,-3.762829 0.166046,-0.309207 1.375713,-1.354432 1.503709,-1.573554 0.326333,-0.558663 0.08278,-0.712658 -0.510145,-0.878011 -0.462373,-0.09107 -0.791727,-2.063949 -0.383305,-3.109928 l -0.999779,0.243574 c -1.211283,0.295102 -1.556269,0.755698 -1.563914,2.088001 -0.0079,1.38033 -0.940878,2.204483 -2.495526,2.204483 -1.07707,0 -1.337171,-0.165414 -1.542568,-0.981015 -0.135881,-0.539561 -0.05365,-1.624382 0.182746,-2.410712 0.566,-1.882757 0.545923,-3.691602 -0.04518,-4.068469 -0.513002,-0.327084 -0.989329,-1.031059 -2.182086,-3.224969 -1.04499,-1.922107 -1.953909,-2.35693 -3.715556,-1.777502 -1.652855,0.543647 -2.223353,1.055752 -2.768736,2.485361 -0.450127,1.179919 -0.406954,4.776328 0.07317,6.095793 0.219182,0.602338 0.166707,0.852039 -0.179045,0.852039 -0.579441,0 -1.547479,-1.271898 -3.266192,-4.291445 -1.009232,-1.77308 -1.218727,-2.494352 -1.062227,-3.657162 0.109183,-0.811251 0.0123,-1.630478 -0.22016,-1.862176 -0.228297,-0.227529 -1.365193,-0.413689 -2.526435,-0.413689 -3.024678,0 -4.427391,-0.513299 -6.1018447,-2.232871 -2.562018,-2.63107 -3.303713,-8.058842 -1.564454,-11.448958 3.0350987,-5.915935 9.5487987,-8.967197 14.5527767,-6.817062 3.588734,1.542019 5.151639,4.780271 4.733572,9.807694 l -0.228852,2.752094 1.040632,-0.203172 c 2.152793,-0.420305 8.004633,-0.207523 9.628682,0.350113 0.90281,0.30999 1.709589,0.495739 1.792836,0.412769 0.08325,-0.08297 0.401043,-1.468704 0.706212,-3.079411 1.1977,-6.321628 4.067227,-9.341033 8.823554,-9.284417 3.211927,0.03823 5.906865,1.548536 7.509549,4.208504 2.972912,4.93413 2.417833,10.738007 -1.371286,14.338184 -1.820649,1.729864 -3.165885,2.35904 -5.57328,2.606665 l -2.047082,0.210564 0,1.840439 c 0,1.012246 -0.170986,1.840443 -0.379969,1.840443 -0.208984,0 -0.382783,-0.724234 -0.386222,-1.609407 -0.007,-1.790064 -1.39875,-4.638882 -2.266334,-4.638882 -0.356903,0 -0.684263,0.766343 -0.970581,2.272105 -0.237619,1.249658 -0.759276,2.822015 -1.159231,3.494131 -0.606573,1.019315 -0.875075,1.568372 -0.252236,1.982952 0.417478,0.277886 0.474962,1.353792 0.474962,2.078404 0,0.617407 -0.898491,2.650641 -0.151953,1.994377 0.242295,-0.212996 0.835123,0.02322 1.291864,0.485267 2.533594,2.563049 0.488829,7.142128 -3.769626,7.48523 -1.485391,0.119677 -1.62498,-0.154531 -2.428965,-0.803545 z m 8.478418,-9.086625 c 0,-0.07305 0.187712,-0.669483 0.417141,-1.325395 0.550524,-1.573891 1.15058,-1.543157 0.696242,0.03567 -0.194393,0.675528 -0.353444,1.271955 -0.353444,1.325398 0,0.05345 -0.170987,0.09717 -0.379969,0.09717 -0.208985,0 -0.37997,-0.05977 -0.37997,-0.132843 z"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csccccccssssccssssscssssccssscsscsssccssccscssscssssssscssssscsscssssscsscsssssssscsssssss"
inkscape:export-filename="/home/igor/creation/Images/avatar/neo-avatar-square-256.png"
inkscape:export-xdpi="358.36905"
inkscape:export-ydpi="358.36905" />
</g>
<g
inkscape:groupmode="layer"
inkscape:label="Copie de Layer 1"
id="g2994" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

BIN
img/cc-by-4.0.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 410 B

38
index.html
View File

@ -15,19 +15,19 @@
<body itemscope itemtype="https://schema.org/Person" class="person"> <body itemscope itemtype="https://schema.org/Person" class="person">
<header class="header"> <header class="header">
<header class="title"> <header class="title">
<img class="logo" alt="mon avatar, un micket fâché, en rose et violet" src="img/avatar.svg"> <img class="logo" alt="mon avatar, un micket fâché, en rose et violet" src="img/avatar.png">
<h1 itemprop="name">iGor milhit</h1> <h1 itemprop="name">iGor milhit</h1>
</header> </header>
<nav class="menu"> <nav class="menu">
<ul> <ul>
<li class=""><a href="#personnel" class="">Personnel</a></li> <li><a href="#personnel">Personnel</a></li>
<li class=""><a href="#professionnel" class="">Professionnel</a></li> <li><a href="#professionnel">Professionnel</a></li>
<li class=""><a href="#online" class="">En ligne</a></li> <li><a href="#online">En ligne</a></li>
<ul> <ul>
</nav> </nav>
</header> </header>
<section class="content"> <section class="content">
<section id="contact" class=""> <section id="contact">
<ul class="perso"> <ul class="perso">
<li><i class="far fa-envelope"></i> privé : <a href="mailto:igor@milhit.ch" title="m'écrire" itemprop="email">igor@milhit.ch</a></li> <li><i class="far fa-envelope"></i> privé : <a href="mailto:igor@milhit.ch" title="m'écrire" itemprop="email">igor@milhit.ch</a></li>
<li><i class="fas fa-home"></i> : <li><i class="fas fa-home"></i> :
@ -58,11 +58,11 @@
</li> </li>
</ul> </ul>
</section> </section>
<section id="personnel" class=""> <section id="personnel">
<h2>Personnel</h2> <h2>Personnel</h2>
<p>Vieux comme la <a href="https://fr.wikipedia.org/wiki/Premier_choc_pétrolier" title="Article Wikipedia sur le Premier choc pétrolier">crise du pétrole</a>, je suis né entre des livres, des taches d’encre et quelques <a href="https://www.discogs.com/fr/user/ignami/collection?sort=artist&amp;sort_order=asc" title="Mon compte Discogs">vinyles</a>. Les noyaux des centrales nucléaires se sont <a href="https://fr.wikipedia.org/wiki/Fusion_du_c%C5%93ur_d&#39;un_r%C3%A9acteur_nucl%C3%A9aire#Cas_r.C3.A9els" title="Section Cas réels de l'article Wikipedia sur la Fusion du co&oelig;ur d'un réacteur nucléaire">mises à fusionner</a>, les empires d’après les empires <a href="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" title="Section Dernières années de l'URSS de l'article Wikipedia sur l'URSS">s’écroulèrent</a> 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 <a href="https://id-libre.org/blogigor/" title="blogiGor : traces éphémères">traces éphémères</a> de mon cheminement chaotique.</p> <p>Vieux comme la <a href="https://fr.wikipedia.org/wiki/Premier_choc_pétrolier" title="Article Wikipedia sur le Premier choc pétrolier">crise du pétrole</a>, je suis né entre des livres, des taches d’encre et quelques <a href="https://www.discogs.com/fr/user/ignami/collection?sort=artist&amp;sort_order=asc" title="Mon compte Discogs">vinyles</a>. Les noyaux des centrales nucléaires se sont <a href="https://fr.wikipedia.org/wiki/Fusion_du_c%C5%93ur_d&#39;un_r%C3%A9acteur_nucl%C3%A9aire#Cas_r.C3.A9els" title="Section Cas réels de l'article Wikipedia sur la Fusion du co&oelig;ur d'un réacteur nucléaire">mises à fusionner</a>, les empires d’après les empires <a href="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" title="Section Dernières années de l'URSS de l'article Wikipedia sur l'URSS">s’écroulèrent</a> 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 <a href="https://id-libre.org/blogigor/" title="blogiGor : traces éphémères">traces éphémères</a> de mon cheminement chaotique.</p>
</section> </section>
<section id="professionnel" class=""> <section id="professionnel">
<h2>Professionnel</h2> <h2>Professionnel</h2>
<p>De métier, je suis <em><span itemprop="jobTitle">Spécialiste <span class="smallcaps">HES</span> en information documentaire</span></em>, ce qui peut se traduire par <em>artisan en sciences de l'information</em>. 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.</p> <p>De métier, je suis <em><span itemprop="jobTitle">Spécialiste <span class="smallcaps">HES</span> en information documentaire</span></em>, ce qui peut se traduire par <em>artisan en sciences de l'information</em>. 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.</p>
<p>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.<br /> <p>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.<br />
@ -72,20 +72,20 @@
</p> </p>
<p>Depuis novembre 2016, je suis employé à la centrale <a href="http://rero.ch" title="site officiel de RERO"><em itemprop="worksFor"><abbr title="Réseau des bibliothèques de Suisse occidentale" class="smallcaps">rero</abbr></em></a>, principalement pour collaborer à l'écriture des <a href="https://www.rero.ch/page.php?section=infos&pageid=centre-competences-fr-20161027" title="Propostition de Centre de compétences et de services aux bibliothèques suisse">nouvelles aventures</a> du réseau.</p> <p>Depuis novembre 2016, je suis employé à la centrale <a href="http://rero.ch" title="site officiel de RERO"><em itemprop="worksFor"><abbr title="Réseau des bibliothèques de Suisse occidentale" class="smallcaps">rero</abbr></em></a>, principalement pour collaborer à l'écriture des <a href="https://www.rero.ch/page.php?section=infos&pageid=centre-competences-fr-20161027" title="Propostition de Centre de compétences et de services aux bibliothèques suisse">nouvelles aventures</a> du réseau.</p>
</section> </section>
<section id="online" class=""> <section id="online">
<header> <header>
<h2>En ligne</h2> <h2>En ligne</h2>
</header> </header>
<section> <section>
<a href="https://id-libre.org/blogigor" title="Mon blog personnel"><p class=""><i class="fas fa-blog"></i> blogiGor</p></a> <a href="https://id-libre.org/blogigor" title="Mon blog personnel"><p><i class="fas fa-blog"></i> blogiGor</p></a>
<a href="https://fr.wikipedia.org/wiki/Utilisateur:IGor.avoi" title="Mon compte Wikipédia"><p class=""><i class="fab fa-wikipedia-w"></i> fr.wikipedia</p></a> <a href="https://fr.wikipedia.org/wiki/Utilisateur:IGor.avoi" title="Mon compte Wikipédia"><p><i class="fab fa-wikipedia-w"></i> fr.wikipedia</p></a>
<a href="https://www.openstreetmap.org/user/iGormilhit" title="Mon compte OpenStreetMap"><p class=""><i class="far fa-map"></i> OpenStreetMap</p></a> <a href="https://www.openstreetmap.org/user/iGormilhit" title="Mon compte OpenStreetMap"><p><i class="far fa-map"></i> OpenStreetMap</p></a>
<a href="https://keybase.io/1g0r" title="Mon profil Keybase"><p class=""><i class="fab fa-keybase"></i> keybase</p></a> <a href="https://keybase.io/1g0r" title="Mon profil Keybase"><p><i class="fab fa-keybase"></i> keybase</p></a>
<a rel="me" href="https://pouet.it/@im" title="Mon compte Mastodon"><p class=""><i class="fab fa-mastodon"></i> im@pouet.it</p></a> <a rel="me" href="https://pouet.it/@im" title="Mon compte Mastodon"><p><i class="fab fa-mastodon"></i> im@pouet.it</p></a>
<a href="https://twitter.com/igor_milhit" title="Mon compte Twitter"><p class=""><i class="fab fa-twitter"></i> @igor_milhit</p></a> <a href="https://twitter.com/igor_milhit" title="Mon compte Twitter"><p><i class="fab fa-twitter"></i> @igor_milhit</p></a>
<a href="https://github.com/iGormilhit" title="Mon compte Github"><p class=""><i class="fab fa-github"></i> GitHub</p></a> <a href="https://github.com/iGormilhit" title="Mon compte Github"><p><i class="fab fa-github"></i> GitHub</p></a>
<a href="https://framagit.org/u/iGormilhit" title="Mon compte Framagit"><p class=""><i class="fab fa-gitlab"></i> Framagit</p></a> <a href="https://framagit.org/u/iGormilhit" title="Mon compte Framagit"><p><i class="fab fa-gitlab"></i> Framagit</p></a>
<a href="https://www.discogs.com/user/ignami/collection" title="Mon compte Discogs"><p class=""><i class="fas fa-compact-disc"></i> discogs</p></a> <a href="https://www.discogs.com/user/ignami/collection" title="Mon compte Discogs"><p><i class="fas fa-compact-disc"></i> discogs</p></a>
</section> </section>
</section> </section>
</section> </section>
@ -98,8 +98,8 @@
</a> </a>
</li> </li>
<li> <li>
<a href="https://framagit.org/iGormilhit/igor.milhit/tags/1.1.0" <a href="https://framagit.org/iGormilhit/igor.milhit/tags/1.1.1"
title="Dépôt sur framagit"> v.1.1.0 &mdash; title="Dépôt sur framagit"> v.1.1.1 &mdash;
</a> </a>
</li> </li>
<li> <li>

6
scss/_content.scss
View File

@ -19,6 +19,12 @@
list-style: none; list-style: none;
} }
} }
.prof {
margin-top: 1em;
@include breakpoint(l) {
margin-top: 0;
}
}
} }
#personnel, #personnel,

7
scss/_fonts.scss
View File

@ -21,3 +21,10 @@
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
h1 { font-size: $font-size-h1; }
h2 { font-size: $font-size-h2; }
h3 { font-size: $font-size-h3; }
h4 { font-size: $font-size-h4; }
h5 { font-size: $font-size-h5; }
h6 { font-size: $font-size-h6; }

77
scss/_grid.scss
View File

@ -1,62 +1,65 @@
body { body {
display: grid; display: grid;
@include breakpoint(desktop) { grid-template-columns: [left-gutter] 5% [content] 90% [right-gutter] 5%;
grid-template-rows: [header] 10% [body] auto [footer] 30%;
grid-column-gap: 0;
@include breakpoint(m) {
grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr;
grid-column-gap: 1em;
}
@include breakpoint(l) {
grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr; grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
@include breakpoint(tablet) {
grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr;
grid-column-gap: 1em;
}
grid-template-columns: [left-gutter] 1em [content] auto [right-gutter] 1em;
grid-template-rows: [header] 30% [body] auto [footer] 30%;
grid-column-gap: 0;
} }
.header { .header {
grid-row: header; grid-row: header;
grid-column: left-gutter / 4; grid-column: left-gutter / 4;
display: grid; display: grid;
@include breakpoint(desktop) { grid-template-columns: [header-left-gutter] 5% [title] 90% [header-right-gutter] 5%;
grid-template-rows: [title] 7em [menu] 6em;
grid-column-gap: 0;
@include breakpoint(s) {
grid-template-rows: [title] 7em [menu] 3.4em;
}
@include breakpoint(m) {
grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;
grid-template-rows: [title] 7em [menu] 3.4em;
grid-column-gap: 1em;
}
@include breakpoint(l) {
grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr; grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;
grid-template-rows: [title] auto [menu] auto; grid-template-rows: [title] 7em [menu] 3.4em;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
@include breakpoint(tablet) { .title {
grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr; grid-column: title;
grid-template-rows: [title] auto [menu] auto; grid-row: title;
grid-column-gap: 1em; }
} .menu {
grid-template-columns: [header-left-gutter] 1em [title] auto [header-right-gutter] 1em; grid-row: menu;
grid-template-rows: [title] auto [menu] auto; grid-column: title;
grid-column-gap: 0; }
.title {
grid-column: title;
grid-row: title;
}
.menu {
grid-row: menu;
grid-column: title;
}
} }
.footer { .footer {
grid-row: footer; grid-row: footer;
grid-column: left-gutter / 4; grid-column: left-gutter / 4;
display: grid; display: grid;
@include breakpoint(desktop) { grid-template-columns: [footer-left-gutter] 5% [center] 90% [footer-right-gutter] 5%;
grid-column-gap: 0;
@include breakpoint(m) {
grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;
grid-column-gap: 1em;
}
@include breakpoint(l) {
grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr; grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;
grid-column-gap: 1em; grid-column-gap: 1em;
} }
@include breakpoint(tablet) { ul {
grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr; grid-column: center;
grid-column-gap: 1em; }
}
grid-template-columns: [footer-left-gutter] 1em [center] auto [footer-right-gutter] 1em;
grid-column-gap: 0;
ul {
grid-column: center;
}
} }
.content { .content {
@ -65,7 +68,7 @@ body {
} }
#contact { #contact {
@include breakpoint(desktop) { @include breakpoint(l) {
display: grid; display: grid;
grid-template-columns: [pers] 1fr [prof] 1fr; grid-template-columns: [pers] 1fr [prof] 1fr;
grid-column-gap: 1em; grid-column-gap: 1em;

6
scss/_header.scss
View File

@ -4,16 +4,14 @@
.title { .title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 1em;
padding-bottom: .5em;
.logo { .logo {
height: 75%; height: 70%;
border-radius: 50%; border-radius: 50%;
} }
h1 { h1 {
font-weight: 200; font-weight: 200;
flex-grow: 1; flex-grow: 1;
margin-left: 1em; margin-left: .5em;
} }
} }
.menu { .menu {

9
scss/_normalize.scss
View File

@ -1,5 +1,12 @@
html, html,
body { body,
h1,
h2,
h3,
h4,
h5,
h6,
ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }

29
scss/_variables.scss
View File

@ -7,10 +7,15 @@
*/ */
$font-base: 'merriweatherlight', serif; $font-base: 'merriweatherlight', serif;
$font-size-base: 1.250rem; $font-size-base: 1.250rem; // 20px
$font-size-small: $font-size-base * .9; $font-size-h1: $font-size-base * 2.6; // 52px
$font-size-smaller: $font-size-base * .7; $font-size-h2: $font-size-base * 2; // 40px
$line-height-base: 1.5em; $font-size-h3: $font-size-base * 1.6; // 32px
$font-size-h4: $font-size-base * 1.4; // 28px
$font-size-h5: $font-size-base * 1.2; // 24px
$font-size-h6: $font-size-base; // 20px
$font-size-small: $font-size-base * .8; // 16px
$line-height-base: 1.375;
/* /*
******************** ********************
@ -35,15 +40,17 @@ $gray-light: lighten($gray, 20);
*/ */
@mixin breakpoint($point) { @mixin breakpoint($point) {
@if $point == desktop { @if $point == l {
@media (min-width: 70em) { @content ; } @media (min-width: 75em) { @content ; }
} }
@else if $point == tablet { @if $point == m {
@media (min-width: 50em) and (max-width: 70em) { @content ; } @media (min-width: 47.5em) { @content ; }
} }
@else if $point == mobile { @else if $point == s {
@media (max-width: 37.5em) { @content ; } @media (min-width: 25.625em) { @content ; }
}
@else if $point == xs {
@media (max-width: 25.625em) { @content ; }
} }
} }

2
scss/style.scss
View File

@ -23,7 +23,7 @@ body {
} }
code { code {
font-size: $font-size-smaller; font-size: $font-size-small;
} }
.smallcaps { .smallcaps {