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