Théo Marchal
7d945f2bf4
Also optimized fonts, after discovering (when having all photos in one page) they were too heavy.
626 lines
11 KiB
CSS
626 lines
11 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;
|
|
}
|
|
|
|
a {
|
|
color:#38686A;
|
|
text-decoration:none;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
header nav .mobile-menu-open,
|
|
header nav .mobile-menu-close {
|
|
display:none;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|
|
header nav ul li {
|
|
display:none;
|
|
}
|
|
|
|
header nav.active ul li {
|
|
display:block;
|
|
font-size:1.2rem;
|
|
padding:0.2rem;
|
|
}
|
|
|
|
header nav.active ul li:nth-child(2) {
|
|
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;
|
|
}
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
article {
|
|
width:95vw;
|
|
}
|
|
}
|
|
|
|
article h1 {
|
|
text-align:center;
|
|
}
|
|
|
|
article p {
|
|
font-family: 'Commissioner', Helvetica;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
/* Exposition */
|
|
|
|
article #gallery {
|
|
display:inline-block;
|
|
position:relative;
|
|
|
|
margin:auto;
|
|
margin-top:0;
|
|
}
|
|
|
|
article.exposition #gallery {
|
|
text-align:center;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
article.explorer p {
|
|
width:55vw;
|
|
margin:auto;
|
|
margin-bottom:2rem;
|
|
text-align:justify;
|
|
}
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
article.explorer p {
|
|
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 img.style-select {
|
|
display:block;
|
|
text-align:right;
|
|
max-height:2rem;
|
|
margin:0;
|
|
margin-bottom:0.25rem;
|
|
margin-right:0.5rem;
|
|
margin-left:0.5rem;
|
|
cursor:pointer;
|
|
}
|
|
|
|
article.explorer h3 {
|
|
margin-bottom:0.3rem;
|
|
}
|
|
|
|
article.explorer form h3, article.explorer form span {
|
|
display:block;
|
|
}
|
|
|
|
article.explorer form .container {
|
|
/*max-width:80vw;*/
|
|
margin:auto;
|
|
display:flex;
|
|
align-self:flex-start;
|
|
justify-content:space-around;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
article.explorer form {
|
|
margin-bottom:1rem;
|
|
}
|
|
|
|
article.explorer form select {
|
|
display:block;
|
|
margin-left:0.2rem;
|
|
}
|
|
|
|
/* does not seem to work */
|
|
article.explorer form .box {
|
|
margin:1rem;
|
|
}
|
|
|
|
article.explorer input[type = submit] {
|
|
display:block;
|
|
margin:auto;
|
|
text-align:center;
|
|
border: none;
|
|
padding:0.8rem;
|
|
margin-top:1.5rem;
|
|
border-radius:5%;
|
|
background:#2589BD;
|
|
text-decoration:none;
|
|
font-size:1.1rem;
|
|
cursor:pointer;
|
|
color:white;
|
|
}
|
|
|
|
@media only screen and (max-width:600px) {
|
|
article.explorer form .container {
|
|
display:block;
|
|
}
|
|
|
|
article.explorer form .container .box span {
|
|
display:block;
|
|
margin-left:1rem;
|
|
font-size:1.05rem;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width:1200px) {
|
|
article.explorer form .container {
|
|
justify-content:left;
|
|
}
|
|
}
|
|
|
|
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-top:1rem;
|
|
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) {
|
|
width:25%;
|
|
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 #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: 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.2rem;
|
|
}
|
|
|
|
article.infos h4 + p {
|
|
margin-left:1rem;
|
|
} |