cv-online/css/main.css

732 lines
17 KiB
CSS

@charset "UTF-8";
/* noto-serif-regular - latin */
@font-face {
font-family: "Noto Serif";
font-style: normal;
font-weight: 400;
src: url("/fonts/noto-serif-v6-latin-regular.eot");
/* IE9 Compat Modes */
src: local("Noto Serif"), local("NotoSerif"), url("/fonts/noto-serif-v6-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-regular.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-regular.woff") format("woff"), url("/fonts/noto-serif-v6-latin-regular.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-regular.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* noto-serif-italic - latin */
@font-face {
font-family: "Noto Serif";
font-style: italic;
font-weight: 400;
src: url("/fonts/noto-serif-v6-latin-italic.eot");
/* IE9 Compat Modes */
src: local("Noto Serif Italic"), local("NotoSerif-Italic"), url("/fonts/noto-serif-v6-latin-italic.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-italic.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-italic.woff") format("woff"), url("/fonts/noto-serif-v6-latin-italic.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-italic.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* noto-serif-700 - latin */
@font-face {
font-family: "Noto Serif";
font-style: normal;
font-weight: 700;
src: url("/fonts/noto-serif-v6-latin-700.eot");
/* IE9 Compat Modes */
src: local("Noto Serif Bold"), local("NotoSerif-Bold"), url("/fonts/noto-serif-v6-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-700.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-700.woff") format("woff"), url("/fonts/noto-serif-v6-latin-700.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-700.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* noto-serif-700italic - latin */
@font-face {
font-family: "Noto Serif";
font-style: italic;
font-weight: 700;
src: url("/fonts/noto-serif-v6-latin-700italic.eot");
/* IE9 Compat Modes */
src: local("Noto Serif Bold Italic"), local("NotoSerif-BoldItalic"), url("/fonts/noto-serif-v6-latin-700italic.eot?#iefix") format("embedded-opentype"), url("/fonts/noto-serif-v6-latin-700italic.woff2") format("woff2"), url("/fonts/noto-serif-v6-latin-700italic.woff") format("woff"), url("/fonts/noto-serif-v6-latin-700italic.ttf") format("truetype"), url("/fonts/noto-serif-v6-latin-700italic.svg#NotoSerif") format("svg");
/* Legacy iOS */
}
/* croissant-one-regular - latin */
@font-face {
font-family: "Croissant One";
font-style: normal;
font-weight: 400;
src: url("/fonts/croissant-one-v5-latin-regular.eot");
/* IE9 Compat Modes */
src: local("Croissant One"), local("CroissantOne-Regular"), url("/fonts/croissant-one-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/croissant-one-v5-latin-regular.woff2") format("woff2"), url("/fonts/croissant-one-v5-latin-regular.woff") format("woff"), url("/fonts/croissant-one-v5-latin-regular.ttf") format("truetype"), url("/fonts/croissant-one-v5-latin-regular.svg#CroissantOne") format("svg");
/* Legacy iOS */
}
nav#left {
position: fixed;
left: -210px;
width: 230px;
top: 0;
bottom: 0;
direction: rtl;
overflow-x: hidden;
overflow-y: auto;
z-index: 1;
border-style: solid;
border-width: 0 1px 0 0;
border-color: #000000;
background-image: url(/img/ui/bggray.png);
box-shadow: -4px 0px 10px #202020 inset;
text-align: center;
font-size: large;
transition-property: left;
transition-duration: 0.2s;
transition-delay: 0.1s;
}
nav#left .arrow {
position: absolute;
right: 0;
top: 50%;
height: 35px;
transition-property: opacity;
transition-duration: 0.2s;
transition-delay: 0.1s;
}
nav#left figure {
margin: 20px 0 10px 0;
}
nav#left figure figcaption {
color: #FAFAFA;
font-family: "Croissant One", cursive;
font-weight: bold;
font-style: italic;
font-size: 1.2em;
text-decoration: none;
}
nav#left a {
outline: none !important;
display: block;
padding: 5px;
margin: 7px 20px 7px 20px;
background-color: #303030;
border-style: solid;
border-width: 1px;
border-color: #000;
border-radius: 3px;
color: #FAFAFA;
font-weight: bold;
text-decoration: none;
text-align: center;
font-size: 1.2em;
transition-property: border-color background-color;
transition-duration: 0.1s;
}
nav#left a:hover {
background-color: #383838;
border-color: #202020;
}
nav#left a:active, nav#left a.active {
background-color: #215D9C;
}
nav#left a.external:after {
content: "↳ ";
}
nav#left a.external:hover {
border-color: #013D6C;
}
nav#left a.logo {
display: inline-block;
border-style: none;
background: none;
}
nav#left a.logo img {
height: 48px;
}
nav#left footer {
margin-top: 20px;
}
nav#left:hover, nav#left:active {
left: 0px;
}
nav#left:hover .arrow, nav#left:active .arrow {
opacity: 0;
}
nav#top {
position: fixed;
display: inline-block;
top: 0px;
height: 190px;
width: 100%;
color: #5F5F5F;
padding: 4px 0px;
overflow: auto;
background-image: url(/img/ui/bgdark.png);
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #000000;
text-align: center;
white-space: nowrap;
transition-property: top;
transition-duration: 0.1s;
}
nav#top .arrow {
position: absolute;
left: calc(50% - 13px);
bottom: 3px;
width: 26px;
}
nav#top a {
outline: none !important;
width: auto;
height: auto;
padding: 5px;
margin: 4px 0px 4px 0px;
display: inline-block;
color: #FAFAFA;
font-family: "Croissant One", cursive;
font-size: 18px;
font-style: italic;
text-decoration: none;
text-shadow: 0 0 5px #000000;
text-align: center;
}
nav#top a img {
margin: 4px 4px 0 4px;
width: 128px;
height: 128px;
border-radius: 10px;
box-shadow: 0px 0px 10px #000000;
}
nav#top a figcaption {
width: 128px;
}
nav#top a:hover {
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.15);
}
nav#top:hover, nav#top:active {
top: 0px !important;
}
@keyframes UnwrapHeader {
from {
margin-left: 40%;
margin-right: 40%;
}
to {
margin-left: 40px;
margin-right: 40px;
}
}
#section-main {
position: absolute;
left: 20px;
right: 0px;
transition-property: left;
transition-duration: 0.2s;
transition-delay: 0.1s;
}
#section-main header {
margin: 30px 30px 60px 30px;
color: #FAFAFA;
font-family: "Noto Serif", serif;
font-style: italic;
font-size: 1.3em;
text-align: center;
text-shadow: 0 0 10px #000000;
border-style: solid;
border-width: 0 5px 0 5px;
border-color: #FAFAFA;
border-radius: 20px;
overflow: hidden;
animation: UnwrapHeader 1.5s;
white-space: nowrap;
}
#section-main article {
margin-left: auto;
margin-right: auto;
padding: 20px;
padding-top: 0;
margin-bottom: 10vh;
color: #202020;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
border-style: solid;
border-width: 4px;
border-color: #FFFFFF;
border-radius: 20px;
background-color: #FAFAFA;
max-width: 800px;
font-size: 0.6em;
line-height: 1.3em;
transition-property: border-radius;
transition-duration: 0.5s;
}
#section-main article h1:first-child {
margin: 0;
margin-top: -24px;
margin-left: -24px;
width: 100%;
padding: 0.6em 24px;
border-radius: 20px 20px 0 0;
background-color: #215D9C;
background-image: url("/img/ui/stripes.png");
color: #FAFAFA;
font-family: "Croissant One", cursive;
font-weight: bold;
font-size: 1.7em;
text-align: left;
letter-spacing: -0.03em;
transition-property: border-radius;
transition-duration: 0.5s;
}
#section-main article h1:first-child img {
border: none;
float: right;
display: inline;
margin: auto;
height: 1em;
}
#section-main article h1:first-child img.left {
float: left;
}
#section-main article h2 {
margin: 0-24px;
padding: 0.4em 24px;
border-top: 1px solid #d5d5d5;
border-bottom: 1px solid #d5d5d5;
background-image: url("/img/ui/stripes.png");
color: #3A4145;
font-family: "Croissant One", cursive;
font-size: x-large;
}
#section-main article h2 a, #section-main article h2 a:visited {
color: #3A4145;
}
#section-main article h3 {
color: #3A4145;
font-family: "Croissant One", cursive;
margin-bottom: 0.5em;
font-size: large;
}
#section-main article h4 {
color: #3A4145;
font-family: "Croissant One", cursive;
margin-bottom: 0.5em;
}
#section-main article hr {
margin-left: -24px;
width: calc(100% + 24px24px);
border-style: solid;
border-width: 5px;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 1px;
}
#section-main article blockquote {
position: relative;
padding: 0.5em 1em;
margin: 10px;
background-color: #eee;
border-radius: 0.5em;
font-style: italic;
}
#section-main article blockquote legend {
position: relative;
right: -0.5em;
height: 0;
bottom: 1em;
color: #888;
text-align: right;
font-size: 0.9em;
}
#section-main article blockquote:after {
display: block;
position: absolute;
content: "";
width: 0;
top: 20px;
left: -20px;
border-style: solid;
border-width: 15px 20px 15px 0;
border-color: transparent #eee;
}
#section-main article img:not(.raw), #section-main article video:not(.raw), #section-main article iframe:not(.raw) {
max-height: 150px;
width: auto;
vertical-align: middle;
margin: 5px;
border: 3px solid black;
border-radius: 2px;
transition-property: border-color;
transition-duration: 0.3s;
}
#section-main article video {
width: 80%;
height: auto;
}
#section-main article a {
color: #215D9C;
}
#section-main article a img:hover, #section-main article a video:hover, #section-main article a iframe:hover {
border-color: #808080;
}
#section-main article a:hover {
color: #2B7ACC;
}
#section-main article strong {
color: #2F3A45;
}
#section-main article img.nostyle {
height: auto;
border: 0;
border-radius: 0;
}
#section-main article img.fill {
width: 100%;
height: auto;
}
#section-main article .cinema {
margin: 0;
margin-left: -24px;
width: 100%;
padding: 10px 24px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color: #FAFAFA;
background-image: url("/img/ui/bgdark.png");
box-shadow: 0px 0px 10px #000 inset;
}
#section-main article .cinema img, #section-main article .cinema video, #section-main article .cinema iframe {
border-width: 1px;
border-radius: 0;
height: 150px;
margin: 5px -5px;
border-left: 5px solid #000;
border-right: 5px solid #000;
}
#section-main article .cinema a {
margin: 0.5em;
}
#section-main article .cinema a img:hover, #section-main article .cinema a video:hover, #section-main article .cinema a iframe:hover {
border-color: #333;
}
#section-main article .cinema:first-child {
margin-top: -24px;
padding-top: 20px;
border-radius: 20px 20px 0 0;
}
#section-main article .cinema:last-child {
margin-bottom: -24px;
padding-bottom: 20px;
border-radius: 0 0 20px 20px;
}
#section-main article code {
font-size: 0.9em;
padding: 0 0.3em;
border-radius: 5px;
background-color: #ccc;
border: 1px solid #888;
}
#section-main article pre {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 0.5em;
border-radius: 10px;
display: inline-block;
vertical-align: top;
margin: 0;
color: #FAFAFA;
background-image: url("/img/ui/bggray.png");
box-shadow: 0px 0px 10px #000 inset;
}
#section-main article pre code, #section-main article pre pre {
margin-bottom: 0px;
padding: 0;
border-radius: 0;
background: none;
border: none;
}
#section-main article > pre {
display: block;
margin-left: -24px;
width: 100%;
padding: 10px 24px;
}
#section-main article figure {
margin-bottom: 15px;
}
#section-main article figure figcaption {
font-size: small;
font-style: italic;
text-decoration: none;
}
#section-main article ul {
margin-top: 5px;
}
#section-main article li {
margin-bottom: 5px;
}
#section-main article a.gototop {
display: block;
width: 100%;
height: 28px;
background-image: url(/img/ui/gototop.svg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#section-main article .center {
text-align: center;
}
#section-main article .canvas-container {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
}
#section-main article .canvas-container > * {
align-self: center;
}
#section-main article img.avatar {
border: none;
border-radius: 100%;
max-height: 200px;
}
body[data-width=small] #section-main article {
max-width: 100%;
border-radius: 0;
}
body[data-width=small] #section-main article h1 {
border-radius: 0;
}
.spacer {
height: 60vh;
}
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
-webkit-text-size-adjust: none;
}
.hljs,
.hljs-tag,
.css .hljs-rule,
.css .hljs-value,
.aspectj .hljs-function,
.css .hljs-function .hljs-preprocessor,
.hljs-pragma {
color: #f8f8f2;
}
.hljs-strongemphasis,
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-number,
.hljs-regexp,
.alias .hljs-keyword,
.hljs-literal,
.hljs-hexcolor {
color: #ae81ff;
}
.hljs-tag .hljs-value,
.hljs-code,
.hljs-title,
.css .hljs-class,
.hljs-class .hljs-title:last-child {
color: #a6e22e;
}
.hljs-link_url {
font-size: 80%;
}
.hljs-strong,
.hljs-strongemphasis {
font-weight: bold;
}
.hljs-emphasis,
.hljs-strongemphasis,
.hljs-class .hljs-title:last-child,
.hljs-typename {
font-style: italic;
}
.hljs-keyword,
.ruby .hljs-class .hljs-keyword:first-child,
.ruby .hljs-function .hljs-keyword,
.hljs-function,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special,
.hljs-header,
.hljs-attribute,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.alias .hljs-keyword:first-child,
.css .hljs-tag,
.css .unit,
.css .hljs-important {
color: #f92672;
}
.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword:first-child,
.hljs-aspect .hljs-keyword:first-child,
.hljs-constant,
.hljs-typename,
.hljs-name,
.css .hljs-attribute {
color: #66d9ef;
}
.hljs-variable,
.hljs-params,
.hljs-class .hljs-title,
.hljs-aspect .hljs-title {
color: #f8f8f2;
}
.hljs-string,
.css .hljs-id,
.hljs-subst,
.hljs-type,
.ruby .hljs-class .hljs-parent,
.hljs-built_in,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-link_label,
.hljs-link_url {
color: #e6db74;
}
.hljs-comment,
.hljs-annotation,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
color: #75715e;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata,
.xml .php,
.php .xml {
opacity: 0.5;
}
#lightbox .lb-cancel {
background-image: url(/img/ui/loading.gif);
}
#lightbox .lb-nav a.lb-prev {
background-image: url(/img/ui/prev.png);
}
#lightbox .lb-nav a.lb-next {
background-image: url(/img/ui/next.png);
}
#lightbox .lb-data .lb-close {
background-image: url(/img/ui/close.png);
}
#lightbox .lb-outerContainer {
background-image: url(/img/ui/bgdark.png);
border-radius: 10px;
}
#lightbox .lb-image {
border: 4px solid #202020;
border-radius: 10px;
}
body {
background-image: url(/img/ui/gnome3.jpg);
background-size: cover;
background-attachment: fixed;
font-family: "Noto Serif", serif;
font-size: 1.8rem;
color: #3A4145;
}
/*
=====================================================================
Spécifique aux pages
*/
body[data-page=home] #section-main {
left: 230px;
}
body[data-page=home] nav#left {
left: 0px;
}
body[data-page=home] nav#left .arrow {
opacity: 0;
}
@media screen and (min-width: 1100px) {
#section-main {
left: 230px;
}
nav#left {
left: 0px;
}
nav#left .arrow {
opacity: 0;
}
}
body.skills #section-main article .skillexcellent, body.skills #section-main article .skillgood, body.skills #section-main article .skillmed, body.skills #section-main article .skillknown, body.skills #section-main article .skillperso, body.skills #section-main article .skillstudy {
padding: 0 3px 0 3px;
border-radius: 5px;
}
body.skills #section-main article .skillexcellent {
background: linear-gradient(#00C107, #00A806);
}
body.skills #section-main article .skillgood {
background: linear-gradient(#73C100, #64A800);
}
body.skills #section-main article .skillmed {
background: linear-gradient(#BAC100, #A2A800);
}
body.skills #section-main article .skillknown {
background: linear-gradient(#C18F00, #A87D00);
}
body.skills #section-main article .skillperso {
border-style: solid;
border-width: 2px;
border-color: #8000FF;
}
body.skills #section-main article .skillstudy {
border-style: solid;
border-width: 2px;
border-color: #9E9E9E;
}