more responsive styling

includes/style.css

@@ -58,25 +58,32 @@ table th {
 textarea {
   height: 256px;
   width: 256px;
-  margin: 0 1em;
   font-family: monospace;
 }
 textarea,
 input {
   text-align: left;
 }
+.box256 {
+  height: 256px;
+  width: 256px;
+}
 .centre {
   margin: 0 auto;
 }
 .croppie-container {
   height: auto;
 }
+.flex-container {
+  background-color: #d3cbd0;
+  display: flex;
+  flex-flow: row wrap;
+}
 .section {
-  width: 20vw;
-  height: 20vw;
-  display: table-cell;
+  margin: 0 auto;
   background-color: #d3cbd0;
   color: #594a54;
+  width: 256px;
 }
 #brightness {
   width: 256px;
@@ -88,6 +95,11 @@ input {
 #threshold + label {
   margin: 0 auto;
 }
+#palettes {
+  height: 256px;
+  width: 256px;
+  overflow-y: scroll;
+}
 #preview,
 #room-output {
   margin: 0 auto;

includes/style.less

@@ -71,9 +71,7 @@ table {
 }
 
 textarea {
-    height: 256px;
-    width: 256px;
-    margin: 0 1em;
+    .box256;
 
     font-family: monospace;
 }
@@ -82,6 +80,11 @@ textarea, input {
     text-align: left;
 }
 
+.box256 {
+  height: 256px;
+  width: 256px;
+}
+
 .centre {
     margin: 0 auto;
 }
@@ -90,14 +93,21 @@ textarea, input {
     height: auto;
 }
 
+.flex-container {
+  background-color: @light;
+  display: flex;
+  flex-flow: row wrap;
+}
+
 // make this just for desktop view?
 // put sections in a single column on mobile/etc?
 .section {
-    width: 20vw;
-    height: 20vw;
-    display: table-cell;
+    .centre;
+
     background-color: @light;
     color: @dark;
+    width: 256px;
+    //height: 512px;
 }
 
 #brightness {
@@ -116,6 +126,12 @@ textarea, input {
     // todo make this match the croppie slider or vice versa
 }
 
+#palettes {
+    .box256;
+
+    overflow-y: scroll;
+}
+
 #preview, #room-output {
     .centre;
 
@@ -124,4 +140,4 @@ textarea, input {
 
 #save {
     margin-top: 0;
-}
+}