From c1e106f0753b614999254cfd92c674273d0554ea Mon Sep 17 00:00:00 2001 From: Aidan Y Date: Sun, 1 Sep 2024 21:16:56 -0700 Subject: [PATCH] Border radius style adjustment --- script.js | 20 ++++++++++---------- styles.css | 16 ++++++++-------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/script.js b/script.js index e97c736..4947305 100644 --- a/script.js +++ b/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"; diff --git a/styles.css b/styles.css index 5b2df1c..e585ab4 100644 --- a/styles.css +++ b/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 {