819 lines
14 KiB
CSS
819 lines
14 KiB
CSS
@font-face {
|
|
font-family:Rubik;
|
|
src:url('fonts/Rubik-Regular.woff2') format("woff2"),
|
|
url('fonts/Rubik-Regular.woff') format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family:HotAugust;
|
|
src:url('fonts/hot-august-night.medium.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family:Commissioner;
|
|
Src:url('fonts/CommissionerFlair-Regular.ttf');
|
|
}
|
|
|
|
body {
|
|
text-align:center;
|
|
margin:auto;
|
|
display:block;
|
|
font-family:'Rubik', Helvetica;
|
|
-webkit-text-size-adjust:none;
|
|
}
|
|
|
|
a {
|
|
color:#38686A;
|
|
}
|
|
|
|
.gallery a, nav a {
|
|
text-decoration:none;
|
|
}
|
|
|
|
article .center {
|
|
text-align:center;
|
|
}
|
|
|
|
nav .hidden {
|
|
display:inline;
|
|
}
|
|
|
|
.IE-header {
|
|
font-size: 1.5rem;
|
|
margin: 1rem;
|
|
}
|
|
|
|
header {
|
|
border-top:.2rem solid #187795;
|
|
box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04);
|
|
border-bottom:.1rem solid #eff0f3;
|
|
margin-bottom:1.5rem;
|
|
}
|
|
|
|
header nav ul {
|
|
padding:0;
|
|
margin:0.6rem;
|
|
}
|
|
|
|
header nav ul li {
|
|
display:inline;
|
|
list-style-type:none;
|
|
margin:0 2.8rem;
|
|
padding:0;
|
|
}
|
|
|
|
header nav ul li.title {
|
|
font-weight:bold;
|
|
font-size:1.8rem;
|
|
font-family:'HotAugust', 'Comic Sans MS';
|
|
color:#187795;
|
|
}
|
|
|
|
header nav ul li a:hover,
|
|
header nav ul li.selected a {
|
|
color:#2589BD;
|
|
}
|
|
|
|
header nav ul li a {
|
|
padding:0;
|
|
}
|
|
|
|
@media only screen and (min-width:500px) and (max-width:1200px) {
|
|
header nav ul li.title {
|
|
display:block;
|
|
margin-bottom:0.5rem;
|
|
}
|
|
|
|
header nav ul li {
|
|
margin:0 0.7rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:600px) {
|
|
header nav {
|
|
margin-top:0.5rem;
|
|
margin-bottom:0.5rem;
|
|
}
|
|
|
|
header nav #hamburger {
|
|
display:block;
|
|
right:1rem;
|
|
font-size:1.5rem;
|
|
position:absolute;
|
|
}
|
|
|
|
header nav #hamburger .container {
|
|
display:inline-block;
|
|
cursor:pointer;
|
|
}
|
|
|
|
header nav #hamburger .bar1,
|
|
header nav #hamburger .bar2,
|
|
header nav #hamburger .bar3 {
|
|
width:30px;
|
|
height:3px;
|
|
background-color:#38686A;
|
|
margin:6px 0;
|
|
transition:0.4s;
|
|
}
|
|
|
|
header nav.active #hamburger .bar1 {
|
|
transform:rotate(-45deg) translate(-4px, 6px);
|
|
}
|
|
|
|
header nav.active #hamburger .bar2 {
|
|
opacity:0;
|
|
}
|
|
|
|
header nav.active #hamburger .bar3 {
|
|
transform:rotate(45deg) translate(-6px, -9.5px);
|
|
}
|
|
|
|
nav .hidden {
|
|
display:none;
|
|
}
|
|
|
|
header nav.active ul li {
|
|
display:block;
|
|
font-size:1.2rem;
|
|
padding:0.2rem;
|
|
}
|
|
|
|
header nav.active ul li:nth-child(1) {
|
|
padding-top:1rem;
|
|
}
|
|
|
|
header nav ul li.title {
|
|
font-size:1.8rem;
|
|
}
|
|
|
|
header nav ul li.title {
|
|
display:inline;
|
|
}
|
|
}
|
|
|
|
article {
|
|
width:85vw;
|
|
margin:auto;
|
|
display:block;
|
|
text-align:left;
|
|
}
|
|
|
|
article h1 {
|
|
text-align:center;
|
|
}
|
|
|
|
article p {
|
|
font-family:'Commissioner', Helvetica;
|
|
}
|
|
|
|
article .intro {
|
|
width:75vw;
|
|
margin:auto;
|
|
margin-bottom:2rem;
|
|
line-height:1rem;
|
|
}
|
|
|
|
article .intro p {
|
|
margin-bottom:0.5rem;
|
|
margin-top:0;
|
|
}
|
|
|
|
article.main {
|
|
width:55vw;
|
|
text-align:justify;
|
|
}
|
|
|
|
article.main img {
|
|
margin:auto;
|
|
max-width:30vw;
|
|
text-align:center;
|
|
display:block;
|
|
}
|
|
|
|
@media only screen and (max-width:1200px) {
|
|
article.main {
|
|
width:85vw;
|
|
}
|
|
|
|
article.main img {
|
|
max-width:85vw;
|
|
}
|
|
}
|
|
|
|
article.main p.signature {
|
|
margin-top:2rem;
|
|
margin-bottom:2rem;
|
|
font-style:italic;
|
|
}
|
|
|
|
|
|
article.main .bio-img {
|
|
float:right;
|
|
padding:1rem;
|
|
padding-top:0.25rem;
|
|
padding-right:0;
|
|
max-width:25vw;
|
|
}
|
|
|
|
@media only screen and (max-width:1200px) {
|
|
article.main .bio-img {
|
|
float:none;
|
|
padding:0;
|
|
max-width:90vw;
|
|
}
|
|
}
|
|
|
|
|
|
/* Exposition */
|
|
|
|
article #pagination {
|
|
display:table;
|
|
text-align:center;
|
|
margin:auto;
|
|
}
|
|
|
|
article .gallery .gallery-item.active {
|
|
display:initial;
|
|
}
|
|
|
|
article .gallery .gallery-item.inactive {
|
|
display:none;
|
|
}
|
|
|
|
article .gallery {
|
|
position:relative;
|
|
display:flex;
|
|
flex-direction:row;
|
|
justify-content:space-around;
|
|
align-self:flex-end;
|
|
flex-wrap:wrap;
|
|
|
|
margin:auto;
|
|
margin-top:0;
|
|
}
|
|
|
|
article.exposition .gallery {
|
|
text-align:center;
|
|
}
|
|
|
|
article .gallery .gallery-item {
|
|
display:inline-block;
|
|
position:relative;
|
|
margin:0.75rem;
|
|
margin-top:0.75rem;
|
|
margin-top:1.6rem;
|
|
}
|
|
|
|
article .gallery .item-title {
|
|
font-size:0.9rem;
|
|
margin:0rem;
|
|
padding:0rem;
|
|
padding-top:0rem;
|
|
display:block;
|
|
}
|
|
|
|
article .gallery img {
|
|
max-height:30vh;
|
|
max-width:40vw;
|
|
margin:0.5rem;
|
|
}
|
|
|
|
@media only screen and (max-width:1000px) {
|
|
article .gallery img {
|
|
max-height:85vh;
|
|
max-width:85vw;
|
|
}
|
|
|
|
article .gallery {
|
|
display:grid;
|
|
text-align:center;
|
|
}
|
|
}
|
|
|
|
|
|
/* Cartel (expo & painting) */
|
|
|
|
#info {
|
|
width:-moz-fit-content;
|
|
width:fit-content;
|
|
min-width:300px;
|
|
max-width:76vw;
|
|
box-shadow:.2rem .2rem .2rem .2rem rgba(0,0,0,.1);
|
|
padding:0.65rem 1.15rem 0.65rem 1.15rem;
|
|
position:relative;
|
|
display:block;
|
|
text-align:left;
|
|
margin:auto;
|
|
margin-bottom:1.5rem;
|
|
}
|
|
|
|
@media only screen and (max-width:600px) {
|
|
#info {
|
|
min-width:280px;
|
|
}
|
|
}
|
|
|
|
#info .info {
|
|
font-size:1.2rem;
|
|
position:absolute;
|
|
top:0.325rem;
|
|
right:1rem;
|
|
font-family:monospace;
|
|
}
|
|
|
|
#info .year {
|
|
margin-right:1rem;
|
|
}
|
|
|
|
#info .title {
|
|
font-weight:bold;
|
|
font-style:italic;
|
|
margin-right:0.65rem;
|
|
}
|
|
|
|
#info .format {
|
|
display:block;
|
|
margin-top:0.3rem;
|
|
margin-bottom:1.15rem;
|
|
}
|
|
|
|
#info .comment {
|
|
display:block;
|
|
}
|
|
|
|
|
|
/* Painting */
|
|
|
|
article.painting .container {
|
|
display:flex;
|
|
flex-direction:row;
|
|
justify-content:center;
|
|
align-self:flex-end;
|
|
position:relative;
|
|
margin-bottom:1.8rem;
|
|
}
|
|
|
|
article.painting .container img {
|
|
max-height:75vh;
|
|
max-width:85vw;
|
|
display:block;
|
|
text-align:center;
|
|
margin:auto;
|
|
}
|
|
|
|
article.painting .container ul.metadata {
|
|
width:15vw;
|
|
display:block;
|
|
margin:auto;
|
|
margin-left:0;
|
|
position:absolute;
|
|
bottom:0;
|
|
list-style-type:square;
|
|
}
|
|
|
|
article.painting .container .metadata span.title {
|
|
font-variant:small-caps;
|
|
}
|
|
|
|
article.painting .container .metadata span.content {
|
|
font-size:0.9em;
|
|
}
|
|
|
|
article.painting .container .metadata span.content img {
|
|
display:inline-block;
|
|
width:0.6rem;
|
|
}
|
|
|
|
@media only screen and (min-width:800px) and (max-width:1200px) {
|
|
article.painting .container {
|
|
display:block;
|
|
}
|
|
|
|
article.painting .container ul.metadata {
|
|
position:relative;
|
|
columns:3;
|
|
width:80vw;
|
|
margin:auto;
|
|
margin-top:1rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:800px) {
|
|
article.painting .container {
|
|
display:block;
|
|
}
|
|
|
|
article.painting .container ul.metadata {
|
|
position:relative;
|
|
columns:2;
|
|
width:80vw;
|
|
margin:auto;
|
|
margin-top:1rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Explorer */
|
|
|
|
article.explorer .gallery {
|
|
text-align:center;
|
|
}
|
|
|
|
@media only screen and (max-width:1200px) {
|
|
article .intro {
|
|
width:90vw;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:1640px) {
|
|
article.explorer {
|
|
width:90vw;
|
|
}
|
|
}
|
|
|
|
article.explorer .style-container {
|
|
display:flex;
|
|
align-self:flex-end;
|
|
justify-content:space-evenly;
|
|
flex-wrap:nowrap;
|
|
}
|
|
|
|
article.explorer h2 {
|
|
margin:0;
|
|
margin-right:auto;
|
|
cursor:pointer;
|
|
width:-moz-fit-content;
|
|
width:fit-content;
|
|
}
|
|
|
|
article.explorer h2::after {
|
|
content:"▼︎";
|
|
display:inline-block;
|
|
position:absolute;
|
|
transition:transform .2s ease;
|
|
transform:rotate(-90deg);
|
|
}
|
|
|
|
article.explorer h2.active::after {
|
|
transform:rotate(0);
|
|
}
|
|
|
|
article.explorer #style-container {
|
|
display:block;
|
|
text-align:right;
|
|
margin-bottom:0;
|
|
}
|
|
|
|
article.explorer img.style-select {
|
|
display:inline;
|
|
max-height:2rem;
|
|
max-width:2rem;
|
|
margin:0;
|
|
margin-bottom:0.25rem;
|
|
margin-right:0.4rem;
|
|
margin-left:0.4rem;
|
|
cursor:pointer;
|
|
}
|
|
|
|
article.explorer h3 {
|
|
margin-bottom:0.3rem;
|
|
}
|
|
|
|
article.explorer form h3, article.explorer form span {
|
|
display:block;
|
|
}
|
|
|
|
article.explorer form .container {
|
|
margin:auto;
|
|
display:flex;
|
|
align-self:flex-start;
|
|
justify-content:space-around;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
article.explorer .container .box {
|
|
padding-left:0.25rem;
|
|
padding-right:0.25rem;
|
|
}
|
|
|
|
article.explorer form {
|
|
margin-bottom:1rem;
|
|
}
|
|
|
|
article.explorer form select {
|
|
display:inline;
|
|
margin-top:0.1rem;
|
|
margin-bottom:0.2rem;
|
|
}
|
|
|
|
article.explorer form .inline {
|
|
display:inline;
|
|
margin:0.1rem;
|
|
}
|
|
|
|
.button-cont {
|
|
margin:auto;
|
|
margin-top:1.5rem;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:flex-end;
|
|
width:-moz-fit-content;
|
|
width:fit-content;
|
|
}
|
|
|
|
article.explorer input[type = submit] {
|
|
margin:auto;
|
|
text-align:center;
|
|
border:none;
|
|
padding:0.8rem;
|
|
border-radius:5%;
|
|
background:#2589BD;
|
|
text-decoration:none;
|
|
font-size:1.1rem;
|
|
cursor:pointer;
|
|
color:white;
|
|
margin-right:1rem;
|
|
}
|
|
|
|
article.explorer input[type = button] {
|
|
margin:auto;
|
|
text-align:center;
|
|
border:none;
|
|
padding:0.4rem;
|
|
border-radius:5%;
|
|
background:grey;
|
|
text-decoration:none;
|
|
font-size:1.1rem;
|
|
cursor:pointer;
|
|
color:white;
|
|
}
|
|
|
|
input:checked + label {
|
|
font-weight:bold;
|
|
}
|
|
|
|
.item-cont span.filter {
|
|
color:gray;
|
|
}
|
|
|
|
@media only screen and (max-width:600px) {
|
|
article.explorer form .container {
|
|
display:block;
|
|
justify-content:left;
|
|
}
|
|
|
|
article.explorer form .container h3 {
|
|
cursor:pointer;
|
|
}
|
|
|
|
article.explorer form .container h3::after{
|
|
content:"▼︎";
|
|
display:inline-block;
|
|
position:absolute;
|
|
transition:transform .2s ease;
|
|
transform:rotate(-90deg);
|
|
}
|
|
|
|
article.explorer form .container .box.active h3::after {
|
|
transform:rotate(0);
|
|
}
|
|
}
|
|
|
|
article.explorer p.no-result {
|
|
text-align:center;
|
|
font-size:1.2rem;
|
|
display:none;
|
|
margin-top:1.5rem;
|
|
}
|
|
|
|
article.explorer table {
|
|
display:none;
|
|
border-collapse:separate;
|
|
border-spacing:0;
|
|
width:100%;
|
|
margin-bottom:1rem;
|
|
overflow-x:auto;
|
|
}
|
|
|
|
article.explorer table tr:first-child th:first-child {
|
|
border-top-left-radius:6px;
|
|
}
|
|
|
|
article.explorer table tr:first-child th:last-child {
|
|
border-top-right-radius:6px;
|
|
}
|
|
|
|
article.explorer table tr:last-child td:first-child {
|
|
border-bottom-left-radius:6px;
|
|
}
|
|
|
|
article.explorer table tr:last-child td:last-child {
|
|
border-bottom-right-radius:6px;
|
|
}
|
|
|
|
article.explorer table tr th:first-child,
|
|
article.explorer table tr td:first-child {
|
|
border-left:1px solid #bbb;
|
|
}
|
|
|
|
article.explorer td, article.explorer th {
|
|
border-right:1px solid #bbb;
|
|
border-bottom:1px solid #bbb;
|
|
text-align:left;
|
|
padding:8px;
|
|
}
|
|
|
|
article.explorer th {
|
|
border-top:1px solid #bbb;
|
|
background:#ddd;
|
|
position:sticky;
|
|
top:0;
|
|
}
|
|
|
|
article.explorer tr td:first-child {
|
|
width:1%;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
article.explorer tr td:nth-child(2) {
|
|
white-space:nowrap;
|
|
}
|
|
|
|
article.explorer tr td:last-child {
|
|
font-size:1.5rem;
|
|
text-align:center;
|
|
padding:0;
|
|
width:1%;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
article.explorer tr td:last-child img {
|
|
max-width:50%;
|
|
}
|
|
|
|
article.explorer tr td.help {
|
|
font-size:1.5rem;
|
|
text-align:center;
|
|
padding:0;
|
|
width:1%;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
article.explorer tr:nth-child(2n+3) {
|
|
background-color:#dddddd;
|
|
}
|
|
|
|
article.explorer table .photo {
|
|
width:1%;
|
|
white-space:nowrap;
|
|
text-align:center;
|
|
}
|
|
|
|
|
|
/* Divers */
|
|
|
|
article.divers .gallery {
|
|
justify-content:flex-start;
|
|
}
|
|
|
|
article.divers .gallery img {
|
|
margin:0.7rem;
|
|
}
|
|
|
|
article #stats {
|
|
margin-top:2.5rem;
|
|
margin-bottom:1.5rem;
|
|
|
|
display:flex;
|
|
flex-direction:row;
|
|
justify-content:center;
|
|
}
|
|
|
|
article #stats .stat {
|
|
width:28vw;
|
|
margin-right:4vw;
|
|
margin-left:4vw;
|
|
}
|
|
|
|
@media only screen and (max-width:600px) {
|
|
article.divers .gallery {
|
|
justify-content:center;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:1000px) {
|
|
article #stats {
|
|
display:block;
|
|
}
|
|
|
|
article #stats .stat {
|
|
width:85vw;
|
|
text-align:center;
|
|
margin:auto;
|
|
margin-top:3rem;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width:1001px) and (max-width:1200px) {
|
|
article #stats {
|
|
display:block;
|
|
}
|
|
|
|
article #stats .stat {
|
|
width:55vw;
|
|
text-align:center;
|
|
margin:auto;
|
|
margin-top:3rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Informations */
|
|
|
|
article.infos .mail {
|
|
font-weight:bold;
|
|
font-size:1.4rem;
|
|
}
|
|
|
|
article.infos .stat {
|
|
width:40vw;
|
|
margin:auto;
|
|
margin-top:2rem;
|
|
text-align:center;
|
|
}
|
|
|
|
@media only screen and (max-width:600px) {
|
|
article.infos .stat {
|
|
width:90vw;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width:601px) and (max-width:1000px) {
|
|
article.infos .stat {
|
|
width:70vw;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width:1001px) and (max-width:1200px) {
|
|
article.infos .stat {
|
|
width:60vw;
|
|
}
|
|
}
|
|
|
|
article.infos .stat canvas {
|
|
margin-bottom:1rem;
|
|
}
|
|
|
|
article.infos .stat .legend-cont {
|
|
display:inline-block;
|
|
text-align:center;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
article.main.infos .stat .legend {
|
|
width:25px;
|
|
height:10px;
|
|
border:1px solid black;
|
|
display:inline-block;
|
|
margin-right:0.4em;
|
|
text-align:center;
|
|
}
|
|
|
|
article.main.infos .stat .legend + span {
|
|
margin-right:0.8em;
|
|
}
|
|
|
|
article.infos .stat .none {
|
|
background:#FB6962;
|
|
}
|
|
|
|
article.infos .stat .bad {
|
|
background:#FCFC99;
|
|
}
|
|
|
|
article.infos .stat .ok {
|
|
background:#79DE79;
|
|
}
|
|
|
|
article.infos .stat .good {
|
|
background:#0CC078;
|
|
}
|
|
|
|
article.infos h4 + p {
|
|
margin-left:1rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width:1200px) {
|
|
article, article.main {
|
|
width:95vw;
|
|
}
|
|
|
|
article .center {
|
|
text-align:left;
|
|
}
|
|
} |