improve style

src/sass/main.sass

@@ -13,9 +13,11 @@ $button-bg:                 $bg         !default
 $button-bg-hl:              $bg-hl      !default
 $button-fg:                 $fg         !default
 $button-fg-hl:              $fg-hl      !default
-// use variables when they have to be overwriteable by inline style blocks
 
 $monofont:                  "UbuntuMono", monospace
+$footer-height:             20px
+$footer-padding-y:          2px
+$footer-padding-x:          12px
 
 *
   font-family: "Ubuntu", Verdana, sans-serif
@@ -47,9 +49,13 @@ main
 
 footer
   width: 100%
-  padding: 0.2rem 1rem
+  padding: $footer-padding-y $footer-padding-x
+  font-size: $footer-height - $footer-padding-y * 2
   background: $fg
   color: $bg
+  height: 20px
+  overflow-x: scroll
+  overflow-y: hidden
   *
     color: $bg
 .statusline
@@ -163,12 +169,13 @@ button:hover
 
 
 .main-box
-  background: $bg1
+  background: $bg2
 .current-file
   width: 100%
   height: 300px
   position: relative
   overflow: scroll
+  background: $bg1
 
   .imgsort2
     font-size: 3rem
@@ -196,6 +203,7 @@ button:hover
     flex-direction: row
   .main-box
     width: 75%
+    max-height: calc(100vh - $footer-height)
   .imgsort2
     font-size: 5rem
     line-height: 300px
@@ -205,6 +213,8 @@ button:hover
     display: flex
     flex-direction: column
     width: 25%
+    max-height: calc(100vh - $footer-height)
+    overflow: scroll
 
   .current-file
     height: 100%

src/style.css

@@ -31,9 +31,13 @@ main * {
 
 footer {
   width: 100%;
-  padding: 0.2rem 1rem;
+  padding: 2px 12px;
+  font-size: 16px;
   background: #3c3836;
   color: #f9f5d7;
+  height: 20px;
+  overflow-x: scroll;
+  overflow-y: hidden;
 }
 footer * {
   color: #f9f5d7;
@@ -176,7 +180,7 @@ button:hover {
 }
 
 .main-box {
-  background: #ebdbb2;
+  background: #d5c4a1;
 }
 
 .current-file {
@@ -184,6 +188,7 @@ button:hover {
   height: 300px;
   position: relative;
   overflow: scroll;
+  background: #ebdbb2;
 }
 .current-file .imgsort2 {
   font-size: 3rem;
@@ -210,6 +215,7 @@ button:hover {
   }
   .main-box {
     width: 75%;
+    max-height: calc(100vh - 20px);
   }
   .imgsort2 {
     font-size: 5rem;
@@ -220,6 +226,8 @@ button:hover {
     display: flex;
     flex-direction: column;
     width: 25%;
+    max-height: calc(100vh - 20px);
+    overflow: scroll;
   }
   .current-file {
     height: 100%;

src/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["sass/main.sass","sass/gruvbox_light.sass"],"names":[],"mappings":"AAqBA;EACE;EACA,OCLI;;;ADQN;EACE;EACA;;;AAEF;EACE,kBCxBS;ED0BT;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;AACA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA,YCnCI;EDoCJ,OC/CS;EDgDT;EACA;EACA;;AACA;EACE,OCpDO;;;ADqDX;EACE,aA7C0B;EA8C1B;;AACA;EACE,aAhDwB;;;AAmD5B;EACE,OCrDI;;;ADuDN;EACE,aAvD0B;;;AAyD5B;EACE;EACA,YCzDI;ED0DJ,OCtEI;EDuEJ;EACA;EACA,cC/DS;EDgET;;;AAKF;EACE,OCpEI;EDqEJ,aAvE0B;EAwE1B;;;AAEF;EACE,OC1DU;;;AD4DZ;EACE;EACA;EACA;;;AAEF;EACE,OCjFI;EDkFJ,kBC7FS;ED8FT;EACA;EACA;EACA;EACA,aAzF0B;EA0F1B;;AACA;EACE;;;AACJ;EACE,OC/FI;EDgGJ,kBCtGI;;;ADwGN;EACE;EACA;;AACA;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACF;EACE;;;AAMN;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AACF;EACE;;;AAGF;EACE;EACA;EACA;;;AACF;EACE;EACA,cC7HU;ED8HV;EACA;EACA;;AACA;EACE;EACA;EACA;;;AACJ;EACE,YCxJI;;;ADyJN;EACE,YCzJI;;;AD2JN;EACE;EACA,OC9JI;;;ADiKN;EACE,YCjKI;;;ADkKN;EACE;EACA;EACA;EACA;EACA,YCxKI;;AD0KJ;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;IACE;IACA;;EACF;IACE;IACA;;EACF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA","file":"style.css"}