improve style

src/imgsort.php

@@ -5,7 +5,7 @@
     // All paths require trailing slashes!
     $rootDir = __DIR__ . '/../images/';
     // The URI at which the rootDir will be served
-    $rootPath = '/images/';
+    $rootPath = 'images/';
     // Path of the directory containing all the files to be sorted, relative to $rootDir
     $stagingDirName = '.sort/';
 

src/sass/main.sass

@@ -53,7 +53,7 @@ main
     text-align: center
 
 .main-box
-  background: $bg2
+  background-color: $bg1
 .current-file
   width: 100%
   height: $file-height
@@ -81,8 +81,8 @@ main
     margin: auto
 
 .second-box
-  margin-top: $box-margin
-  margin-bottom: $box-margin
+  padding-top: $box-margin
+  padding-bottom: $box-margin
 
 
 footer
@@ -212,10 +212,9 @@ button:hover
   main
     display: flex
     flex-direction: row
-    padding-bottom: $footer-height
   .main-box
     width: 75%
-    max-height: calc(100vh - $footer-height)
+    max-height: calc(100vh - $footer-height - 2 * $footer-padding-y)
   .splash-text
     filter: drop-shadow(0.20rem 0.20rem 0 $accent)
     
@@ -223,8 +222,10 @@ button:hover
     display: flex
     flex-direction: column
     width: 25%
-    max-height: calc(100vh - $footer-height)
+    max-height: calc(100vh - $footer-height - 2 * $footer-padding-y)
     overflow: scroll
+    margin-top: 0
+    margin-bottom: 0
 
   .current-file
     height: 100%

src/style.css

@@ -30,7 +30,7 @@ main * {
 }
 
 .main-box {
-  background: #d5c4a1;
+  background-color: #ebdbb2;
 }
 
 .current-file {
@@ -60,8 +60,8 @@ main * {
 }
 
 .second-box {
-  margin-top: 0.4rem;
-  margin-bottom: 0.4rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
 }
 
 footer {
@@ -220,11 +220,10 @@ button:hover {
   main {
     display: flex;
     flex-direction: row;
-    padding-bottom: 20px;
   }
   .main-box {
     width: 75%;
-    max-height: calc(100vh - 20px);
+    max-height: calc(100vh - 20px - 4px);
   }
   .splash-text {
     filter: drop-shadow(0.2rem 0.2rem 0 #9d0006);
@@ -233,8 +232,10 @@ button:hover {
     display: flex;
     flex-direction: column;
     width: 25%;
-    max-height: calc(100vh - 20px);
+    max-height: calc(100vh - 20px - 4px);
     overflow: scroll;
+    margin-top: 0;
+    margin-bottom: 0;
   }
   .current-file {
     height: 100%;
@@ -246,5 +247,3 @@ button:hover {
     bottom: 0;
   }
 }
-
-/*# sourceMappingURL=style.css.map */