css

1 files changed, 36 insertions, 13 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index d3b78c9..c72d5c6 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -13,7 +13,8 @@ body {
   font-weight: 300;
   font-size: 13px;
   color: black;
-  transition: opacity 200ms;
+  transition: opacity 200ms cubic-bezier(0,0,0,1);
+  overflow: hidden;
 }
 
 .loading body {
@@ -38,7 +39,7 @@ body {
   z-index: 2;
   overflow: hidden;
 }
-.back {
+.header .back {
   position: absolute;
   top: 0; left: -60px;
   padding: 20px;
@@ -47,23 +48,28 @@ body {
   color: white;
   transition: left 400ms;
 }
-.back a {
+.header .back a {
   color: white;
   font-size: 24px;
 }
-.inner {
-  margin-left: 0;
-  transition: margin-left 400ms;
+.header .inner {
+  transform: translate3d(0,0,0);
+  transition: transform 400ms cubic-bezier(0,0,0,1);
 }
-.inModal .back {
+.inModal .header .back {
   left: 0px;
 }
-.inModal .inner {
-  margin-left: 60px;
+.inModal .header .inner {
+  transform: translate3d(60px,0,0);
 }
 
 /* paintings */
 
+.paintings {
+  height: 100vh;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+}
 .cell {
   display: flex;
   height: 100vh;
@@ -76,14 +82,17 @@ body {
 .cell:nth-child(6n+5) { background-color: hsl(260, 10%, 98%); }
 .cell:nth-child(6n+6) { background-color: hsl(310, 10%, 99%); }
 .painting {
+  position: relative;
   display: flex;
   align-items: center;
   flex: 1;
-  padding: 20px;
 }
 .painting .image {
-  flex: 1;
+  position: absolute;
+  top: 5%;
+  left: 5%;
   height: 90%;
+  width: 90%;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
@@ -108,12 +117,13 @@ body.inModal {
   height: 100vh;
   background: hsl(0, 10%, 99%);
   transform: translate3d(100%,0,0);
-  transition: transform 400ms;
+  transition: transform 400ms cubic-bezier(0,0,0,1);
   overflow: hidden;
 }
 .inModal .modal {
   transform: translate3d(0,0,0);
   overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* details page */
@@ -159,7 +169,6 @@ a {
   }
   .header {
     width: 100%;
-    text-align: center;
   }
   .modal > div {
     padding-top: 40px;
@@ -167,8 +176,22 @@ a {
   }
   .cell {
     flex-direction: column;
+    height: 80vh;
+  }
+  .cell:first-child {
+    margin-top: 48px;
+  }
+  .cell:last-child {
+    height: auto;
+  }
+  .parameters,
+  .parameters + h2 {
+    display: none;
   }
   .about {
     flex: 0 0 120px;
   }
+  .details img {
+    max-width: 100%;
+  }
 }