/************************************************************/ /************************************************************/ /************************************************************/ /* Fonts */ @font-face { font-family: 'AkzidenzGrotesk'; src: url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-regular-webfont.eot'); src: url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-regular-webfont.eot#iefix') format('embedded-opentype'), url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-regular-webfont#woff') format('woff'), url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-regular-webfont.ttf') format('truetype'), url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-regular-webfont.svg#AkzidenzGrotesk') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AkzidenzGrotesk'; src: url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-italic-webfont.eot'); src: url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-italic-webfont.eot#iefix') format('embedded-opentype'), url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-italic-webfont#woff') format('woff'), url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-italic-webfont.ttf') format('truetype'), url('http://violennsimon.com/tumblr/fonts/akzidenzgrotesk-italic-webfont.svg#AkzidenzGrotesk') format('svg'); font-weight: normal; font-style: italic; } /************************************************************/ /************************************************************/ /************************************************************/ /* General style */ body {font-family: AkzidenzGrotesk, 'Trebuchet MS', sans-serif; color:#1A1A1A; font-size: 16px; line-height: 22px; background-color: #FFF; } #loader_target {display: none} #wrapper {max-width: 320px; margin: 0 auto} header { margin: 0 30px 40px; padding-top:53px; } #content, #moi {margin:0 30px; overflow: hidden} #content article.post {float:left; margin: 0 45px 45px 0; position: relative; width:260px; display: none} #content article.post aside.meta {display:block; background: rgba(0,0,0,0.5); position:absolute; width: 100%; height: 100%; opacity: 0; cursor:pointer; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; -ms-transition: opacity 200ms; -o-transition: opacity 200ms; transition: opacity 200ms; } #content article.post aside.meta:hover {opacity : 1;} #content article.post aside.meta a{color:#fff } #content article.post .excerpt {width: inherit} #content article.post .entry {display: none} #content article.post a {display: block; } #content article.post.text {margin-top: 5px; margin-bottom: 50px} #content article.post.text aside {display: none} #content article.post.text div.inner {height: 66px; overflow: hidden;} #content article.post.text .more {display: block; } #content article.post.text .more span {cursor: pointer;} p.date {font-family: 'Trebuchet MS'; font-size: 13px; color: #B3B3B3; margin-left: 30px; position: absolute; bottom: 27px} img {height: auto; vertical-align: top; width: inherit; max-width: 260px} em {font-style: italic} -moz-selection, ::selection { color : #FFF; background-color: #A69373; opacity: 0.5 } h1 {font-size: 16px;} h1 a {color:#1A1A1A} h1 a:hover {text-decoration: none} h2 {color: #FFF; text-decoration: none; margin-left: 30px; margin-top: 22px} a, .more {color: #A69373; text-decoration: none} a:hover, .more:hover {text-decoration : none;} a:hover span, .more:hover span {border-bottom : 1px solid #A69373;} .info a:hover span {border-bottom : 1px solid #1A1A1A;} .info:hover {text-decoration: none;} footer {display:none; background-color: #D9D9D9; height: 45px; margin: 105px 30px 45px; } footer nav {text-align: center; padding-top:11px; } footer nav a{color: #FFF;} footer:hover {background-color: #A69373} /* #infscr-loading {position: fixed; top : 120px; left:20px} */ #infscr-loading {position: fixed; bottom: 0; left: 50%; width: 120px; margin-left: -60px; margin-bottom: 30px; text-align: center} #infscr-loading img {width: 20px; display: block; margin: 0 auto} /************************************************************/ /************************************************************/ /************************************************************/ /* DETAIL SECTION */ #content article.post.selected .excerpt {display: none} #content article.post.selected .entry {display: block} #content article.post.selected.text aside {display: block} #content article.post.selected.text .more {display: none} #content article.post.selected {margin-bottom: 45px; width: 260px; border-bottom: 1px solid #E6E6E6; border-top: 1px solid #E6E6E6;} #content article.post.selected aside.info {margin-top: 54px; font-family: 'Trebuchet MS'; font-size: 13px; color: #B3B3B3;} #content article.post.selected strong p {font-family: AkzidenzGrotesk, 'Trebuchet MS'; font-size: 16px; color: #A69373; display: inline-block; margin: 0 25px 20px 0 !important; width: auto} #content article.post.selected a.close, #content article.post.selected a.back_to_grid {font-family: AkzidenzGrotesk, 'Trebuchet MS'; font-size: 13px; color: #1A1A1A; float: right; margin-bottom:40px} body.permalink #content article.post.selected a.close {display: none} body #content article.post.selected a.back_to_grid {display: none} body.permalink #content article.post.selected a.back_to_grid {display: block} /* Photo post */ #content article.post.selected img { display: block; margin:19px 0 45px;} /* Text post */ #content article.post.selected.text div.inner {height: inherit; overflow: inherit;} #content article.post.selected p {font-family: AkzidenzGrotesk, 'Trebuchet MS'; color:#1A1A1A; font-size: 16px; line-height: 22px; margin-left: 0; margin-top: 3px; width: auto;} #content article.post.selected p + p {margin-top: 23px;} #content article.post.selected p:last-child {margin-bottom: 65px} /************************************************************/ /************************************************************/ /************************************************************/ /*ABOUT SECTION*/ #moi img {width: 100%; max-width :800px; padding-right:45px; box-sizing : border-box} #moi p {margin-bottom: 40px} /************************************************************/ /************************************************************/ /************************************************************/ /**** Media queries ****/ @media screen and (min-width: 655px) { #wrapper {max-width: 655px} #content, #moi {margin:0 0 0 45px;} header { margin: 0 45px 40px; } #content article.post.selected {width: 565px; min-height: 600px} #content article.post.selected p {width: 450px;} #content article.post.selected img {max-width: 565px;} footer {background-color: #D9D9D9; height: 45px; margin: 105px 45px 45px; } } @media screen and (min-width: 960px) { #wrapper {max-width: 960px} #content article.post.selected {width: 870px;} #content article.post.selected img {max-width: 870px;} #content article.post.selected .info a {margin-right : 45px; padding-top :1px;} } @media screen and (min-width: 1265px) { #wrapper {max-width: 1265px} } @media screen and (min-width: 1440px) { /* C'est la Roumanie de Violenn Simon… Bah Quoi ? Tu votes Mélenchon toi ? */ #moi p img {max-width: 960px} } @media screen and (min-width: 1570px) { #wrapper {max-width: 1570px} }