1 files changed, 44 insertions, 16 deletions

diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 1e53c4a..2cda8fa 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -1,3 +1,5 @@
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
 html,
 body {
   width: 100%;
@@ -14,8 +16,6 @@ body {
   transition: opacity 200ms;
 }
 
-* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
-
 .loading body {
   opacity: 0;
 }
@@ -25,6 +25,9 @@ body {
 .desktop {
   overflow: hidden;
 }
+
+/* header */
+
 .header {
   position: fixed;
   top: 0;
@@ -34,6 +37,9 @@ body {
   background: white;
   z-index: 2;
 }
+
+/* body */
+
 .cell {
   display: flex;
   height: 100vh;
@@ -69,24 +75,27 @@ body {
   background: white;
 }
 
+/* modal */
+
+body.inModal {
+  overflow: hidden;
+}
 .modal {
-  position: absolute;
+  position: fixed;
   top: 0; left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background: hsl(0, 10%, 98%);
   transform: translate3d(100%,0,0);
   transition: transform 400ms;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  overflow: hidden;
 }
-.modal.visible {
+.inModal .modal {
   transform: translate3d(0,0,0);
+  overflow-y: scroll;
 }
 
-a {
-  color: #0088ff;
-}
+/* details page */
 
 .details {
   padding: 20px;
@@ -107,13 +116,32 @@ h2 {
 }
 .parameters {
   max-width: 90%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.parameters div {
+  font-size: 10px;
+  max-width: 33%;
+  padding-right: 20px;
+}
+
+a {
+  color: #0088ff;
 }
 
 @media (max-width: 700px) {
-  #close {
-    top: 20px;
-    right: 20px;
-    width: 40px;
-    height: 40px;
+  .header {
+    width: 100%;
+    text-align: center;
+  }
+  .modal > div {
+    padding-top: 40px;
+    padding-bottom: 20px;
+  }
+  .cell {
+    flex-direction: column;
+  }
+  .about {
+    flex: 0 0 120px;
   }
 }