diff --git a/app/styles/header.css b/app/styles/header.css index 9e30bd8..282beaa 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -7,12 +7,14 @@ header{ height: 10vh; display: flex; align-items: center; + justify-content: center; font-size: 1em; z-index: 999; } .hamburger{ position: absolute; + left: 5vw; display: none; flex-direction: column; cursor: pointer; @@ -54,7 +56,7 @@ header{ font-size: 0.9em; height: 50%; border-radius: 5px; - padding: 0.2em 15px; + padding: 2px 15px; font-family: var(--font-family); } @@ -63,7 +65,6 @@ header{ } .header-logo{ - margin:auto; width: 250px; height: 5vh; background-image: url(../../public/img/logo.png); diff --git a/app/styles/input.css b/app/styles/input.css index d04a2f1..af821e8 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -2,23 +2,24 @@ .input { grid-column: 2/3; grid-row: 4/5; - border-radius: 20px; + border-radius: 8px; background-color: var(--input-background-color); padding: 1em; - margin: 0 1em; - margin-bottom: 1em; + padding-left: 0.5em; + padding-right: 0; + margin: 0 10px; + margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; height: auto; - gap: 10px; height: 10vh; } .input input { flex-grow: 1; padding: 5px; - font-size: 1.2em; + font-size: 1em; border-radius: 8px; border: 2px solid var(--input-button-color); outline: none; @@ -34,16 +35,17 @@ } .input button { - padding: 1em; + padding: 5px; margin: 5px; + margin-left: 0; background-color: var(--input-button-color); color: var(--user-message-text-color); /* Use variable for button text color */ border: none; - border-radius: 50%; + border-radius: 8px; font-size: 1.5em; cursor: pointer; height: 50px; - width: 50px; + width: 75px; display: flex; justify-content: center; align-items: center; @@ -53,7 +55,7 @@ } .input button img { - height: 1em; + height: 20px; } .input button:hover { diff --git a/app/styles/responsive.css b/app/styles/responsive.css index 24f2950..422725c 100644 --- a/app/styles/responsive.css +++ b/app/styles/responsive.css @@ -98,11 +98,10 @@ color: var(--user-message-text-color); /* Use variable for button text color */ } - .header-login-button{ - position: absolute; - top: 3.5vh; - right: 5vw; - } + .header-logo{ + position: relative; + margin-left: -40px; + } .hamburger.open{ margin-top: 0.5vh; @@ -124,17 +123,23 @@ .nav-links.active{ display: flex; + height: fit-content; } .nav-btn{ width: 100%; text-align: center; padding: 10px; + height: 50px; } .hamburger { display: flex; } + + .header-login-button{ + right: 5vh; + } } /* Responsive adjustments for the settings */