Add responsive design for mobile

styles/fancybox.css

@@ -3,7 +3,7 @@
 }
 
 .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
-    opacity: 1;
+    opacity:1;
 }
 
 .fancybox-custom-layout .fancybox-slide--image {
@@ -18,8 +18,7 @@
 }
 
 .fancybox-custom-layout .fancybox-toolbar {
-    bottom:0;
-    top:initial;
+    top:0;
 }
 
 

styles/main.css

@@ -60,6 +60,80 @@ 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 1rem;
+    }
+}
+
+header nav .mobile-menu-open,
+header nav .mobile-menu-close {
+    display:none;
+}
+
+@media only screen and (max-width: 500px) {
+    header nav .mobile-menu-open {
+        display:block;
+        position:absolute;
+        right:1rem;
+        top:0.5rem;
+        font-size:1.5rem;
+        cursor:pointer;
+    }
+
+    header nav.active .mobile-menu-open {
+        display:none;
+    }
+
+    header nav.active .mobile-menu-close {
+        display:block;
+        position:absolute;
+        right:1rem;
+        top:0.5rem;
+        font-size:1.5rem;
+        cursor:pointer;
+    }
+
+    header nav.active .mobile-menu {
+        animation-duration:1s;
+        animation-name:rotate90;
+        animation-fill-mode:forwards;
+    }
+
+    @keyframes rotate90 {
+        from {
+            transform:rotate(0deg);
+        }
+
+        to {
+            transform:rotate(90deg);
+        }
+    }
+
+    header nav ul li {
+        display:none;
+    }
+
+    header nav.active ul li {
+        display:block;
+        font-size:1.2rem;
+    }
+
+    header nav ul li.title {
+        font-size:1.8rem;
+    }
+
+    header nav ul li.title {
+        display:block;
+        margin-bottom:0.5rem;
+    }
+}
+
 article {
     width:85vw;
     margin:auto;
@@ -67,6 +141,12 @@ article {
     text-align:left;
 }
 
+@media only screen and (max-width: 1200px) {
+    article {
+        width:95vw;
+    }
+}
+
 article h1 {
     text-align:center; 
 }
@@ -87,6 +167,17 @@ article.main img {
     display:block;
 }
 
+@media only screen and (max-width: 1200px) {
+/*@media only screen and (max-width: 1000px) {*/
+    article.main {
+        width:85vw;
+    }
+
+    article.main img {
+        max-width:85vw;
+    }
+}
+
 article.main p.signature {
     margin-top:2rem;
     margin-bottom:2rem;
@@ -111,6 +202,13 @@ article #gallery img {
     margin:0.5rem;
 }
 
+@media only screen and (max-width: 1000px) {
+    article #gallery img {
+        max-height:85vh;
+        max-width:85vw;
+    }
+}
+
 
 /* Cartel (expo & painting) */
 
@@ -163,6 +261,7 @@ article.painting .container {
 
 article.painting .container img {
     max-height:75vh;
+    max-width:85vw;
     display:block;
     text-align:center;
     margin:auto;
@@ -186,6 +285,14 @@ article.painting .container .metadata span.content {
     font-size:0.9em;
 }
 
+@media only screen and (max-width: 1200px) {
+
+
+    article.painting .container ul.metadata {
+        display:none;
+    }
+}
+
 
 /* Divers */
 
@@ -204,6 +311,31 @@ article #stats #stat {
     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 */