Merge pull request #66 from aidan-yip/preview

Border radius style adjustment

script.js

@@ -264,8 +264,8 @@ function play_scroll_fx() {
 
 //app hover background changes
 appstore.onmouseover = () => {
-  home_bar.style.borderTopLeftRadius = "30px";
-  home_bar.style.borderBottomLeftRadius = "30px";
+  home_bar.style.borderTopLeftRadius = "35px";
+  home_bar.style.borderBottomLeftRadius = "35px";
   //icon
   background.style.backgroundImage =
     "url(public/app_icons/icons8-app-store-500.png)";
@@ -278,8 +278,8 @@ appstore.onmouseover = () => {
 };
 
 appstore.onmouseleave = () => {
-  home_bar.style.borderTopLeftRadius = "45px";
-  home_bar.style.borderBottomLeftRadius = "45px";
+  home_bar.style.borderTopLeftRadius = "53px";
+  home_bar.style.borderBottomLeftRadius = "53px";
   console.log("Corner radius contract");
 };
 
@@ -318,8 +318,8 @@ settings.onmouseover = () => {
 };
 
 arcade.onmouseover = () => {
-  home_bar.style.borderTopRightRadius = "30px";
-  home_bar.style.borderBottomRightRadius = "30px";
+  home_bar.style.borderTopRightRadius = "35px";
+  home_bar.style.borderBottomRightRadius = "35px";
   //icon
   background.style.backgroundImage =
     "url(public/app_icons/icons8-apple-arcade-480.png)";
@@ -332,14 +332,14 @@ arcade.onmouseover = () => {
 };
 
 arcade.onmouseleave = () => {
-  home_bar.style.borderTopRightRadius = "45px";
-  home_bar.style.borderBottomRightRadius = "45px";
+  home_bar.style.borderTopRightRadius = "53px";
+  home_bar.style.borderBottomRightRadius = "53px";
   console.log("Corner radius contract");
 };
 
 home_bar.onmouseleave = () => {
-  home_bar.style.borderTopLeftRadius = "45px";
-  home_bar.style.borderBottomLeftRadius = "45px";
+  home_bar.style.borderTopLeftRadius = "53px";
+  home_bar.style.borderBottomLeftRadius = "53px";
   //Change background back to default
   background.style.backgroundPosition = "center";
   background.style.backgroundSize = "cover";

styles.css

@@ -141,7 +141,7 @@ body {
 
 #color_input {
   width: 50%;
-  height: 70%;
+  height: 60%;
   border: solid 3px #212121;
   border-radius: 10px;
   transform: translateZ(20px);
@@ -185,7 +185,7 @@ body {
   background-color: rgba(255, 255, 255, 0.7);
   -webkit-backdrop-filter: blur(7px);
   box-shadow: 0px 0px 25px #1f1f1f3a;
-  border-radius: 45px;
+  border-radius: 53px;
   border: solid 1px #cacaca36;
   transition: border-radius ease-in-out 0.2s;
 }
@@ -199,7 +199,7 @@ body {
   height: 71%;
   background-color: rgb(224, 224, 224);
   box-shadow: 0px 0px 15px #1f1f1f20;
-  border-radius: 20px;
+  border-radius: 25px;
   transition: ease-in-out;
   transform-style: preserve-3d;
   transform: perspective(1000px);
@@ -246,7 +246,7 @@ img {
   height: 100%;
   background-color: rgb(224, 224, 224);
   box-shadow: 0px 0px 15px #1f1f1f20;
-  border-radius: 20px;
+  border-radius: 25px;
   transition: ease-in-out;
   transform-style: preserve-3d;
   transform: perspective(1000px);
@@ -262,7 +262,7 @@ img {
   height: 100%;
   background-color: rgb(224, 224, 224);
   box-shadow: 0px 0px 15px #1f1f1f20;
-  border-radius: 20px;
+  border-radius: 25px;
   transition: ease-in-out;
   transform-style: preserve-3d;
   transform: perspective(1000px);
@@ -607,7 +607,7 @@ img {
     width: 98%;
     height: 22%;
     max-height: 173px;
-    border-radius: 45px;
+    border-radius: 53px;
   }
 
   .app_icon {
@@ -662,7 +662,7 @@ img {
 @media only screen and (max-width: 600px) {
   #home_bar {
     width: 98%;
-    height: 11%;
+    height: 12%;
     border-radius: 20px;
   }
 
@@ -686,7 +686,7 @@ img {
     height: 100%;
     min-height: 57.3px;
     max-height: 57.3px;
-    border-radius: 15px;
+    border-radius: 20px;
   }
 
   .app_icon_no_sound {