Made the width of the search bar and sign-in button smaller when the …

…page is narrow
cornell-dti · Oct 22, 2023 · c78a123 · c78a123
1 parent 6c0defc
commit c78a123
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 90 deletions.
diff --git a/client/src/modules/Globals/Styles/NavBar.css b/client/src/modules/Globals/Styles/NavBar.css
@@ -10,7 +10,7 @@
 
   .navbar-searchbar-container {
     margin-left: 21px;
-    margin-right: 70px;
+    margin-right: 150px;
   }
 }
 
@@ -63,4 +63,4 @@
   margin-top: 12px;
   text-align: right;
   padding-right: 30px;
-}
+}
diff --git a/client/src/modules/Home/home.css b/client/src/modules/Home/home.css
@@ -53,21 +53,17 @@
 
 .background-gradient_afternoonsummer {
   background-image: url('/bg_afternoon_summer.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(123, 179, 244, 0.7) 0%,
-      rgba(255, 255, 255, 0) 77.1%
-    );
+      rgba(255, 255, 255, 0) 77.1%);
 }
 
 .background-gradient_sunsetsummer {
   background-image: url('/bg_sunset_summer.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(91, 154, 226, 0.7) 19.17%,
       rgba(255, 228, 196, 0.7) 57.66%,
-      rgba(253, 144, 65, 0.7) 84.88%
-    );
+      rgba(253, 144, 65, 0.7) 84.88%);
 }
 
 .background-gradient_nightsummer {
@@ -77,21 +73,17 @@
 
 .background-gradient_afternoonfall {
   background-image: url('/bg_afternoon_fall.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0) 0%,
-      rgba(255, 218, 175, 0.42) 77.1%
-    );
+      rgba(255, 218, 175, 0.42) 77.1%);
 }
 
 .background-gradient_sunsetfall {
   background-image: url('/bg_sunset_fall.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(0, 93, 189, 0.7) 19.17%,
       rgba(145, 125, 181, 0.7) 50.25%,
-      rgba(255, 164, 94, 0.7) 84.88%
-    );
+      rgba(255, 164, 94, 0.7) 84.88%);
 }
 
 .background-gradient_nightfall {
@@ -101,23 +93,19 @@
 
 .background-gradient_afternoonwinter {
   background-image: url('/bg_afternoon_winter.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(138, 185, 239, 0.7) 12.85%,
-      rgba(185, 217, 255, 0) 77.1%
-    );
+      rgba(185, 217, 255, 0) 77.1%);
 }
 
 .background-gradient_sunsetwinter {
   background-image: url('/bg_sunset_winter.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(2, 32, 66, 0.7) 14.7%,
       rgba(10, 68, 108, 0.7) 27.25%,
       rgba(144, 133, 147, 0.7) 55.16%,
       rgba(252, 137, 48, 0.7) 75.47%,
-      rgba(222, 89, 24, 0.7) 84.88%
-    );
+      rgba(222, 89, 24, 0.7) 84.88%);
 }
 
 .background-gradient_nightwinter {
@@ -127,22 +115,18 @@
 
 .background-gradient_afternoonspring {
   background-image: url('/bg_afternoon_spring.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(51, 145, 254, 0.7) 7.5%,
-      rgba(255, 255, 255, 0.7) 79.5%
-    );
+      rgba(255, 255, 255, 0.7) 79.5%);
 }
 
 .background-gradient_sunsetspring {
   background-image: url('/bg_sunset_spring.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(164, 193, 209, 0.7) 19.17%,
       rgba(246, 228, 218, 0.7) 50.25%,
       rgba(255, 182, 121, 0.7) 73.5%,
-      rgba(247, 124, 74, 0.7) 84.88%
-    );
+      rgba(247, 124, 74, 0.7) 84.88%);
 }
 
 .background-gradient_nightspring {
@@ -183,4 +167,4 @@
   letter-spacing: -0.22px;
 
   color: #000000;
-}
+}
diff --git a/client/src/modules/Profile/Styles/App.css b/client/src/modules/Profile/Styles/App.css
@@ -14,6 +14,28 @@
   .scale-logo-homepage {
     margin: 120px 0px 0px 120px;
   }
+
+  .sign-in-button {
+    position: absolute;
+    right: 30px;
+    top: 40px;
+
+    width: 137px;
+    height: 39px;
+
+    background: #ffffff;
+    border-radius: 10px;
+
+    font-family: Source Sans Pro;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 23px;
+    text-align: center;
+    letter-spacing: -0.22px;
+
+    color: #000000;
+  }
 }
 
 @media (max-width: 992px) {
@@ -29,6 +51,28 @@
   .scale-logo-homepage {
     margin: 120px 0px 0px 30px;
   }
+
+  .sign-in-button {
+    position: absolute;
+    right: 30px;
+    top: 40px;
+
+    width: 100px;
+    height: 39px;
+
+    background: #ffffff;
+    border-radius: 10px;
+
+    font-family: Source Sans Pro;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 23px;
+    text-align: center;
+    letter-spacing: -0.22px;
+
+    color: #000000;
+  }
 }
 
 .scale-logo-homepage {
@@ -53,21 +97,17 @@
 
 .background-gradient_afternoonsummer {
   background-image: url('/bg_afternoon_summer.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(123, 179, 244, 0.7) 0%,
-      rgba(255, 255, 255, 0) 77.1%
-    );
+      rgba(255, 255, 255, 0) 77.1%);
 }
 
 .background-gradient_sunsetsummer {
   background-image: url('/bg_sunset_summer.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(91, 154, 226, 0.7) 19.17%,
       rgba(255, 228, 196, 0.7) 57.66%,
-      rgba(253, 144, 65, 0.7) 84.88%
-    );
+      rgba(253, 144, 65, 0.7) 84.88%);
 }
 
 .background-gradient_nightsummer {
@@ -77,21 +117,17 @@
 
 .background-gradient_afternoonfall {
   background-image: url('/bg_afternoon_fall.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0) 0%,
-      rgba(255, 218, 175, 0.42) 77.1%
-    );
+      rgba(255, 218, 175, 0.42) 77.1%);
 }
 
 .background-gradient_sunsetfall {
   background-image: url('/bg_sunset_fall.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(0, 93, 189, 0.7) 19.17%,
       rgba(145, 125, 181, 0.7) 50.25%,
-      rgba(255, 164, 94, 0.7) 84.88%
-    );
+      rgba(255, 164, 94, 0.7) 84.88%);
 }
 
 .background-gradient_nightfall {
@@ -101,23 +137,19 @@
 
 .background-gradient_afternoonwinter {
   background-image: url('/bg_afternoon_winter.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(138, 185, 239, 0.7) 12.85%,
-      rgba(185, 217, 255, 0) 77.1%
-    );
+      rgba(185, 217, 255, 0) 77.1%);
 }
 
 .background-gradient_sunsetwinter {
   background-image: url('/bg_sunset_winter.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(2, 32, 66, 0.7) 14.7%,
       rgba(10, 68, 108, 0.7) 27.25%,
       rgba(144, 133, 147, 0.7) 55.16%,
       rgba(252, 137, 48, 0.7) 75.47%,
-      rgba(222, 89, 24, 0.7) 84.88%
-    );
+      rgba(222, 89, 24, 0.7) 84.88%);
 }
 
 .background-gradient_nightwinter {
@@ -127,22 +159,18 @@
 
 .background-gradient_afternoonspring {
   background-image: url('/bg_afternoon_spring.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(51, 145, 254, 0.7) 7.5%,
-      rgba(255, 255, 255, 0.7) 79.5%
-    );
+      rgba(255, 255, 255, 0.7) 79.5%);
 }
 
 .background-gradient_sunsetspring {
   background-image: url('/bg_sunset_spring.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(164, 193, 209, 0.7) 19.17%,
       rgba(246, 228, 218, 0.7) 50.25%,
       rgba(255, 182, 121, 0.7) 73.5%,
-      rgba(247, 124, 74, 0.7) 84.88%
-    );
+      rgba(247, 124, 74, 0.7) 84.88%);
 }
 
 .background-gradient_nightspring {
@@ -162,26 +190,4 @@
 .full-height {
   height: 100%;
   background-color: #f4f9fe;
-}
-
-.sign-in-button {
-  position: absolute;
-  right: 30px;
-  top: 40px;
-
-  width: 137px;
-  height: 39px;
-
-  background: #ffffff;
-  border-radius: 10px;
-
-  font-family: Source Sans Pro;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 23px;
-  text-align: center;
-  letter-spacing: -0.22px;
-
-  color: #000000;
-}
+}