Changed Style according to user feedback

resources/less/metager/general/cards.less

@@ -3,8 +3,7 @@
     border: 1px solid #ccc;
     background-color: white;
     box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-    margin: 8px;
-    padding: 15px;
+    padding: 8px;
 }
 
 .card-heavy {

resources/less/metager/general/general.less

@@ -2,6 +2,7 @@
 
 @modal-content-box-shadow-color: fade(@color-black, 30%);
 @body-background-color: @background-color;
+@body-background-color-mobile: @background-color-mobile;
 @a-hover-color: red;
 body {
     font-family: @metager-font;
@@ -31,6 +32,9 @@ body {
     display: flex;
     flex-direction: column;
     margin: 0;
+    @media(max-width: @screen-mobile){
+        background-color: @body-background-color-mobile
+    }
 }
 
 .wrapper {
@@ -65,7 +69,7 @@ body {
         &right {
             position: absolute;
             width: 20px;
-            height: 40px;
+            height: 95%;
             top: 1px;
             pointer-events: none;
         }

resources/less/metager/pages/resultpage/result-page.less

@@ -6,8 +6,8 @@
 @results-margin-left: 16px;
 // Min and max widths of the 2 resultpage columns
 @results-width-min: 500px;
-@results-width-max: 700px;
-@additions-width-min: 400px;
+@results-width-max: 800px;
+@additions-width-min: 300px;
 @additions-width-max: 500px;
 // Breakpoints for the 2 resultpage columns
 @resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4);
@@ -25,7 +25,8 @@
 
 #header-logo {
     z-index: 0;
-    padding-right: 10px;
+    padding-right: 8px;
+    padding-left: 8px;
     h1 {
         .logo;
         margin: 0px;
@@ -218,7 +219,8 @@ a {
             display: inline-block;
             background-color: white;
             text-align: center;
-            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+            .card;
+            padding: 4px;
             > img {
                 max-width: 150px;
             }
@@ -230,6 +232,7 @@ a {
             > div {
                 font-size: 12px;
                 color: #777;
+                margin-top: 4px;
             }
         }
 
@@ -407,7 +410,7 @@ a {
     #research-bar {
         background-color: white;
         border: 1px solid #ccc;
-        border-bottom: 2px solid @metager-orange;
+        border-bottom: 1px solid @metager-orange;
         box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
         display: flex;
         align-items: center;
@@ -446,13 +449,11 @@ a {
         width: 100%;
         max-width: @results-width-max;
         background-color: white;
-        border: 1px solid #ccc;
-        -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
-        overflow-x: visible;
+        overflow-x: auto;
         padding: 8px;
-        @media (max-width: 700px) {
-            overflow-x: auto;
+        border-bottom: 1px solid #ccc;
+        @media (max-width: @screen-mobile) {
+            .card;
         }
         &>div {
             padding: 0px 10px;
@@ -501,8 +502,10 @@ a {
         width: 100%;
         max-width: 700px;
         background-color: white;
-        border: 1px solid #ccc;
-        box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+        border-bottom: 1px solid #ccc;
+        @media(max-width: @screen-mobile){
+            .card;
+        }
         overflow: hidden;
         overflow-x: auto;
         padding: 8px;
@@ -516,8 +519,10 @@ a {
                 margin: 0 8px;
                 justify-content: center;
                 align-items: center;
+                font-size: 12px;
                 label {
                     margin-bottom: 0;
+                    font-weight: normal;
                 }
                 select {
                     background-color: white;

resources/less/metager/pages/resultpage/result.less

@@ -10,7 +10,9 @@
     &:nth-child(1) {
         margin-top: 0;
     }
-    .card;
+    @media(max-width: @screen-mobile){
+        .card;
+    }
     margin: @padding-small-default 0px;
     padding: 8px 15px 5px 15px;
     width: 100%;
@@ -222,13 +224,19 @@
             overflow: initial;
             opacity: 1;
         }
-        li {
-            font-size: @result-font-small;
-            text-transform: uppercase;
-            margin: 10px 0;
-        }
-        li>a {
-            color: black;
+        ul {
+            display: flex;
+            li {
+                font-size: @result-font-small;
+                margin: 8px;
+            }
+            li:nth-child(1){
+                margin-left: 0;
+            }
+            li>a {
+                color: @link-color;
+            }
         }
+        
     }
 }
\ No newline at end of file

resources/less/metager/variables.less

@@ -9,7 +9,8 @@
 @color-almost-black: mix(@color-white, @color-black, 10%);
 @color-black: black;
 // Default Background Color
-@background-color: #FAFAFA;
+@background-color: white;
+@background-color-mobile: #FAFAFA;
 // Default Font
 @metager-font: Arimo,
 "Liberation Sans",

resources/views/layouts/result.blade.php

@@ -67,6 +67,7 @@
 	<div class="result-options">
 		<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
 		<div class="options">
+				<div>
 				<ul class="option-list list-unstyled small">
 					<li class="js-only">
 						<a href="javascript:resultSaver({{ $result->number }});" class="saver">