responsive design fixes on navigation and search input

anastascho · anastascho · commit 4035a9530e7e · 2023-12-21T11:08:11.000+01:00
diff --git a/src/css/search.css b/src/css/search.css
@@ -40,7 +40,7 @@
 }
 
 .search-input-landing {
-  padding-right: 4rem !important;
+  padding-right: 4rem;
   background-color: var(--color-smoke-70);
   box-shadow: rgba(0, 0, 0, 0.24) 1px 3px 8px;
 }
@@ -108,7 +108,7 @@
 
   .search-input-landing {
     width: 800px;
-    padding: 2 2.25em;
+    padding: 2 1.25em;
   }
 
   .sections-page .search-result-dropdown-menu {
diff --git a/src/css/sections-header.css b/src/css/sections-header.css
@@ -306,8 +306,6 @@ html.is-clipped--navbar {
   }
 
   .sections-navbar-mobile {
-    /* background: var(--navbar-menu-background);
-    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); */
     position: fixed;
     top: 8rem;
     max-height: var(--body-min-height);
@@ -451,6 +449,12 @@ html.is-clipped--navbar {
   }
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1440px) {
+  .sections-navbar-menu {
+    margin-left: -16rem;
+  }
+}
+
 @media screen and (max-width: 700px) {
   .sections-header {
     display: none;
diff --git a/src/css/sections.css b/src/css/sections.css
@@ -318,7 +318,7 @@
   }
 
   .get-started-button {
-    padding: 0.25rem 1rem;
-    font-size: 0.25rem;
+    padding: 0.5rem 2rem;
+    font-size: 0.5rem;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.search-input-landing {`
`43`		`- padding-right: 4rem !important;`
	`43`	`+ padding-right: 4rem;`
`44`	`44`	`background-color: var(--color-smoke-70);`
`45`	`45`	`box-shadow: rgba(0, 0, 0, 0.24) 1px 3px 8px;`
`46`	`46`	`}`
`@@ -108,7 +108,7 @@`
`108`	`108`
`109`	`109`	`.search-input-landing {`
`110`	`110`	`width: 800px;`
`111`		`- padding: 2 2.25em;`
	`111`	`+ padding: 2 1.25em;`
`112`	`112`	`}`
`113`	`113`
`114`	`114`	`.sections-page .search-result-dropdown-menu {`
Original file line number	Diff line number	Diff line change
`@@ -306,8 +306,6 @@ html.is-clipped--navbar {`
`306`	`306`	`}`
`307`	`307`
`308`	`308`	`.sections-navbar-mobile {`
`309`		`- /* background: var(--navbar-menu-background);`
`310`		`- box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); */`
`311`	`309`	`position: fixed;`
`312`	`310`	`top: 8rem;`
`313`	`311`	`max-height: var(--body-min-height);`
`@@ -451,6 +449,12 @@ html.is-clipped--navbar {`
`451`	`449`	`}`
`452`	`450`	`}`
`453`	`451`
	`452`	`+@media screen and (min-width: 1024px) and (max-width: 1440px) {`
	`453`	`+ .sections-navbar-menu {`
	`454`	`+ margin-left: -16rem;`
	`455`	`+ }`
	`456`	`+}`
	`457`	`+`
`454`	`458`	`@media screen and (max-width: 700px) {`
`455`	`459`	`.sections-header {`
`456`	`460`	`display: none;`