From a97bb6eb969a21ac3ac9b6008ae60de49dcbfd50 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Thu, 11 Jun 2020 15:03:48 +0800
Subject: [PATCH] adjust duck responsiveness

---
 css/dock.css | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/css/dock.css b/css/dock.css
index 5ee6e3e..8c67011 100644
--- a/css/dock.css
+++ b/css/dock.css
@@ -30,8 +30,8 @@
 	z-index: 1 !important;
 }
 
-/*Translate dock to left side if width <= 580 and height >= 540*/
-@media screen and (max-width: 580px) and (min-height: 540px) {
+/*Translate dock to left side if width <= 470 and height >= 540*/
+@media screen and (max-width: 470px) and (min-height: 540px) {
 
 	.dockContainer {
 		display: inline-block !important;
@@ -54,15 +54,13 @@
     	width: auto !important;
     	height: auto !important;
 		margin: 5px !important;
-		transform: scale(0.85) !important;
+		transform: scale(0.90) !important;
 		transition: transform var(--transition-speed) !important;
 	}
 }
 
-/*If there's no  enough height, move dock to bottom then scale up to 320px*/
-
 /*Decrease scale to 0.85 if width is less than 580px*/
-@media screen and (max-width: 579px) and (max-height: 539px) {
+@media screen and (max-width: 469px) and (max-height: 539px) {
 
 	.dockContainer {
 		position: absolute !important;
@@ -91,8 +89,9 @@
 
 }
 
-/*Decrease scale to 0.65 if width is less than 490px*/
-@media screen and (max-width: 490px) and (max-height: 539px) {
+
+/*Decrease scale to 0.75 if width is less than 380px*/
+@media screen and (max-width: 380px) and (max-height: 539px) {
 
 	.dockContainer {
 		position: absolute !important;
@@ -115,14 +114,14 @@
     	width: auto !important;
     	height: auto !important;
 		margin: 5px !important;
-		transform: scale(0.65) !important;
+		transform: scale(0.75) !important;
 		transition: transform var(--transition-speed) !important;
 	}
 
 }
 
-/*Decrease scale to 0.55 if width is less than or equal to 374px and greater than or equal to 320px*/
-@media screen and (max-width: 375px) and (min-width: 320px) and (max-height: 539px) {
+/*Decrease scale to 0.70 if width is less than or equal to 374px and greater than or equal to 320px*/
+@media screen and (max-width: 350px) and (min-width: 320px) and (max-height: 539px) {
 
 	.dockContainer {
 		position: absolute !important;
@@ -145,12 +144,12 @@
     	width: auto !important;
     	height: auto !important;
 		margin: 5px !important;
-		transform: scale(0.55) !important;
+		transform: scale(0.70) !important;
 		transition: transform var(--transition-speed) !important;
 	}
-
 }
 
+
 /*Scale to 0 if less than 320px*/
 @media screen and (max-width: 319px) and (max-height: 539px) {
 
@@ -181,4 +180,4 @@
 					opacity var(--transition-speed) !important;
 	}
 
-}
+}
\ No newline at end of file