style: change the width on medium (90vw) and large screen (80vw)

hugomods · May 23, 2023 · 559ef38 · 559ef38
1 parent e2715f4
commit 559ef38
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/assets/search/scss/modal/_index.scss b/assets/search/scss/modal/_index.scss
@@ -1,5 +1,3 @@
-$search-max-width: 560px;
-
 .search-modal-container {
     background: var(--search-container-bg);
     position: fixed;
@@ -28,12 +26,17 @@ $search-max-width: 560px;
 
     @media (min-width: 576px) {
         border-radius: 0.25rem;
-        max-width: $search-max-width;
+        max-width: 90vw;
         max-height: 600px;
         height: 80%;
-        left: calc((100% - #{$search-max-width}) / 2);
+        left: calc((100% - 90vw) / 2);
         top: 10%;
     }
+
+    @media (min-width: 1200px) {
+        max-width: 80vw;
+        left: calc((100% - 80vw) / 2);
+    }
 }
 
 .search-modal-header {