402 lines
13 KiB
CSS
402 lines
13 KiB
CSS
@font-face {
|
|
font-family: "amiri-regular";
|
|
src: url("../fonts/amiri/amiri-regular-webfont.eot");
|
|
src: url("../fonts/amiri/amiri-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-regular-webfont.woff") format("woff"), url("../fonts/amiri/amiri-regular-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-regular-webfont.svg#amiri-regular") format("svg"); }
|
|
@font-face {
|
|
font-family: "amiri-slanted";
|
|
src: url("../fonts/amiri/amiri-slanted-webfont.eot");
|
|
src: url("../fonts/amiri/amiri-slanted-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-slanted-webfont.woff") format("woff"), url("../fonts/amiri/amiri-slanted-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-slanted-webfont.svg#amiri-slanted") format("svg"); }
|
|
@font-face {
|
|
font-family: "amiri-bold";
|
|
src: url("../fonts/amiri/amiri-bold-webfont.eot");
|
|
src: url("../fonts/amiri/amiri-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-bold-webfont.woff") format("woff"), url("../fonts/amiri/amiri-bold-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-bold-webfont.svg#amiri-bold") format("svg"); }
|
|
@font-face {
|
|
font-family: "amiri-boldslanted";
|
|
src: url("../fonts/amiri/amiri-boldslanted-webfont.eot");
|
|
src: url("../fonts/amiri/amiri-boldslanted-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/amiri/amiri-boldslanted-webfont.woff") format("woff"), url("../fonts/amiri/amiri-boldslanted-webfont.ttf") format("truetype"), url("../fonts/amiri/amiri-boldslanted-webfont.svg#amiri-boldslanted") format("svg"); }
|
|
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%; }
|
|
|
|
ul, li, ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none; }
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: black; }
|
|
|
|
p, ul, li, ol, h1, h2, h3, em, blockquote {
|
|
margin: 0; }
|
|
|
|
h1, h2, h3 {
|
|
font-family: "amiri-bold";
|
|
font-weight: normal; }
|
|
|
|
p, ul, li {
|
|
font-family: "amiri-regular";
|
|
font-weight: normal;
|
|
font-size: 1rem;
|
|
line-height: 1.5rem; }
|
|
|
|
em, blockquote > p {
|
|
font-family: "amiri-slanted";
|
|
font-weight: normal; }
|
|
|
|
section blockquote {
|
|
font-size: 0.8rem; }
|
|
|
|
strong > em {
|
|
font-family: "amiri-boldslanted";
|
|
font-weight: normal; }
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
line-height: 1.8rem; }
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
padding-top: 1.5rem; }
|
|
|
|
h3 {
|
|
font-size: 1rem;
|
|
line-height: 1.5rem;
|
|
padding-top: 1.5rem; }
|
|
|
|
li > a:hover, ol > a:hover {
|
|
font-family: "amiri-bold";
|
|
font-weight: normal; }
|
|
|
|
.underline > a {
|
|
font-family: "amiri-bold";
|
|
font-weight: normal;
|
|
text-decoration: underline; }
|
|
|
|
.block > a {
|
|
text-decoration: underline;
|
|
font-family: "amiri-bold";
|
|
font-weight: normal; }
|
|
|
|
body {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox; }
|
|
|
|
#header {
|
|
z-index: 1;
|
|
width: 300px;
|
|
height: 100%;
|
|
padding-top: 1.5rem;
|
|
padding-left: 30px;
|
|
position: fixed;
|
|
background: white; }
|
|
#header #logo {
|
|
padding-bottom: 10px; }
|
|
#header #navbar {
|
|
padding-left: 15px; }
|
|
#header #navbar .sous-menu {
|
|
height: 1.5rem;
|
|
transition: all 0.3s ease-in-out;
|
|
-o-transition: all 0.3s ease-in-out;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
transition-delay: 0.5s;
|
|
-o-transition-delay: 0.5s;
|
|
-webkit-transition-delay: 0.5s;}
|
|
#header #navbar .sous-menu > ol {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: visibility 0.5s, opacity 0.5s linear;
|
|
-o-transition: visibility 0.5s, opacity 0.5s linear;
|
|
-webkit-transition: visibility 0.5s, opacity 0.5s linear;
|
|
margin-left: 30px;
|
|
padding-left: 5px; }
|
|
#header #navbar .sous-menu:hover {
|
|
height: 100px;
|
|
transition: all 0.3s ease-in-out;
|
|
-o-transition: all 0.3s ease-in-out;
|
|
-webkit-transition: all 0.3s ease-in-out }
|
|
#header #navbar .sous-menu:hover > a {
|
|
text-decoration: underline; }
|
|
#header #navbar .sous-menu:hover > a::after {
|
|
background-image: url("../images/trait.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 1px 10px;
|
|
display: block;
|
|
width: 1px;
|
|
height: 10px;
|
|
margin-left: 37px;
|
|
margin-top: -5px;
|
|
content: " "; }
|
|
#header #navbar .sous-menu:hover > ol {
|
|
visibility: visible;
|
|
transition: all 0.5s linear;
|
|
-o-transition: all 0.5s linear;
|
|
-webkit-transition: all 0.5s linear;
|
|
transition-delay: 0.2s;
|
|
-o-transition-delay: 0.2s;
|
|
-webkit-transition-delay: 0.2s;
|
|
opacity: 1; }
|
|
#header #navbar .underline::before {
|
|
background-image: url("../images/point_b.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 5px 5px; }
|
|
#header #navbar .block {
|
|
height: 100px;
|
|
transition: all 0.3s ease-in-out;
|
|
-o-transition: all 0.3s ease-in-out;
|
|
-webkit-transition: all 0.3s ease-in-out;}
|
|
#header #navbar .block::before {
|
|
background-image: url("../images/point_b.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 5px 5px; }
|
|
#header #navbar .block > a::after {
|
|
background-image: url("../images/trait.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 1px 10px;
|
|
display: block;
|
|
width: 1px;
|
|
height: 10px;
|
|
margin-left: 37px;
|
|
margin-top: -5px;
|
|
content: " "; }
|
|
#header #navbar .block ol {
|
|
visibility: visible;
|
|
transition: visibility 0.5s, opacity 0.5s linear;
|
|
-o-transition: visibility 0.5s, opacity 0.5s linear;
|
|
-webkit-transition: visibility 0.5s, opacity 0.5s linear;
|
|
opacity: 1; }
|
|
#header #navbar ul > li::before, #header #navbar ol::before {
|
|
display: inline-block;
|
|
content: " ";
|
|
width: 5px;
|
|
height: 5px;
|
|
margin: 0 5px 1px 0px;
|
|
background-image: url("../images/point.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 3.5px 4.5px; }
|
|
#header #navbar ul > li .underline::before, #header #navbar ol .underline::before {
|
|
background-image: url("../images/point_b.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 5px 5px; }
|
|
#header #navbar ul > li:hover::before, #header #navbar ol:hover::before {
|
|
background-image: url("../images/point_b.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 5px 5px; }
|
|
#header #navbar ul > li:hover > a, #header #navbar ol:hover > a {
|
|
text-decoration: underline; }
|
|
#header .separation {
|
|
position: absolute;
|
|
left: 100%;
|
|
width: 1px;
|
|
height: 100%;
|
|
top: 1.5rem;
|
|
background: black; }
|
|
#header .separation::before {
|
|
display: block;
|
|
content: " ";
|
|
width: 5px;
|
|
height: 5px;
|
|
margin: -2.5px 0px 0px -2.5px;
|
|
background-image: url("../images/point_b.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 5px 5px; }
|
|
|
|
body {
|
|
overflow: hidden; }
|
|
|
|
section {
|
|
position: absolute;
|
|
left: 300px;
|
|
width: auto; }
|
|
section .content {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-flex: 1 1 auto;
|
|
-ms-flex: 1 1 auto;
|
|
width: 100%;
|
|
height: 100vh; }
|
|
section .content p:not(.slider) {
|
|
margin: 1rem 0; }
|
|
section .content h2 + p {
|
|
margin-bottom: 0 !important; }
|
|
section .content h2 + p, section .content h3 + p {
|
|
margin: 0 !important; }
|
|
section .content a {
|
|
text-decoration: underline; }
|
|
section .content a::after {
|
|
display: inline-block;
|
|
content: " ";
|
|
width: 3.5px;
|
|
height: 3.5px;
|
|
margin: 0 5px 1px 0px;
|
|
background-image: url("../images/fleche.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 12px 5px;
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 5px;
|
|
margin: 0 0px 1px 5px;
|
|
transition: all 1s;
|
|
-o-transition: all 1s;
|
|
-webkit-transition: all 1s;}
|
|
section .content a:hover::after, .app a:hover::after {
|
|
transition: all 1s;
|
|
-o-transition: all 1s;
|
|
-webkit-transition: all 1s;
|
|
margin: auto 0px 1px 10px; }
|
|
section .content > div:not(#recherche-artistique) {
|
|
min-width: 500px;
|
|
width: calc(50vw - 150px);
|
|
filter: blur(1.5px);
|
|
-webkit-filter:blur(1.5px);
|
|
transition: all 2s;
|
|
-o-transition: all 2s;
|
|
-webkit-transition: all 2s;
|
|
color: grey; }
|
|
section .content > .net {
|
|
filter: blur(0px) !important;
|
|
-webkit-filter:blur(0px);
|
|
-webkit-transition: -webkit-filter 0.5s !important;
|
|
transition: -webkit-filter 0.5s !important;
|
|
transition: filter 0.5s !important;
|
|
transition: filter 0.5s, -webkit-filter 0.5s !important;
|
|
-o-transition: filter 0.5s !important;
|
|
-webkit-transition: filter 0.5s !important;
|
|
color: black !important; }
|
|
section .content > div {
|
|
overflow-y: auto;
|
|
}
|
|
section .content > div h3:first-of-type {
|
|
padding-top: 0px !important; }
|
|
section .content > div:not(#recherche-artistique) {
|
|
padding: 0 1%; }
|
|
section .content img {
|
|
width: 75%;
|
|
height: auto; }
|
|
section #recherche-artistique.net > div:first-child {
|
|
filter: blur(0px) !important;
|
|
-webkit-filter:blur(0px)!important;
|
|
-webkit-transition: -webkit-filter 0.5s !important;
|
|
transition: -webkit-filter 0.5s !important;
|
|
transition: filter 0.5s !important;
|
|
transition: filter 0.5s, -webkit-filter 0.5s !important;
|
|
-o-transition: filter 0.5s!important;
|
|
-webkit-transition: filter 0.5s!important;
|
|
color: black !important; }
|
|
section #recherche-artistique {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
width: 200rem;
|
|
}
|
|
section #recherche-artistique > .net {
|
|
filter: blur(0px) !important;
|
|
-webkit-filter:blur(0px)!important;
|
|
-webkit-transition: -webkit-filter 0.5s !important;
|
|
transition: -webkit-filter 0.5s !important;
|
|
transition: filter 0.5s !important;
|
|
transition: filter 0.5s, -webkit-filter 0.5s !important;
|
|
-o-transition: filter 0.5s!important;
|
|
-webkit-transition: filter 0.5s!important;
|
|
color: black !important; }
|
|
section #recherche-artistique > div {
|
|
filter: blur(1.5px);
|
|
-webkit-filter:blur(1.5px);
|
|
-webkit-transition: -webkit-filter 0.5s;
|
|
transition: -webkit-filter 0.5s;
|
|
transition: filter 0.5s;
|
|
transition: filter 0.5s, -webkit-filter 0.5s;
|
|
-o-transition: filter 0.5s;
|
|
-webkit-transition: filter 0.5s;
|
|
color: grey;
|
|
overflow-y: auto;
|
|
padding: 0 2%;
|
|
width: calc(50vw - 150px);
|
|
min-width: 500px;}
|
|
section #commentaire-philosophe ul > li{
|
|
cursor: pointer;
|
|
}
|
|
section #commentaire-philosophe ul > li > ol > li > ul{
|
|
margin-left: 30px;
|
|
}
|
|
section #recherche-artistique #commentaire-philosophe ul > li > ol > li::before {
|
|
background-image: url("../images/point.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 3.5px 3.5px;
|
|
display: inline-block;
|
|
content: " ";
|
|
width: 3.5px;
|
|
height: 3.5px;
|
|
margin: 0 5px 1px 0px; }
|
|
section #recherche-artistique #commentaire-philosophe ul > li > ol > li > ul > li::before {
|
|
background-image: url("../images/point.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 3.5px 3.5px;
|
|
display: inline-block;
|
|
content: " ";
|
|
width: 3.5px;
|
|
height: 3.5px;
|
|
margin: 0 5px 1px 0px; }
|
|
|
|
.mCSB_container {
|
|
padding-bottom: 65px; }
|
|
|
|
body .fullpage {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background: white;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: 999; }
|
|
body .fullpage::before {
|
|
display: inline-block;
|
|
content: " ";
|
|
width: 3.5px;
|
|
height: 3.5px;
|
|
margin: 0 5px 1px 0px;
|
|
background-image: url("../images/fleche.svg");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 12px 5px;
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 5px;
|
|
margin: 0 0px 1px 5px;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: absolute;
|
|
background: red;
|
|
z-index: 999; }
|
|
body .fullpage .full {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0 1vw;
|
|
height: auto;
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
|
|
margin-left: 50%; }
|