Separate css into files by media queries

vacuumlabs · Feb 1, 2021 · 1e2245d · 1e2245d
1 parent 7205896
commit 1e2245d
Show file tree

Hide file tree

Showing 8 changed files with 1,545 additions and 1,542 deletions.
diff --git a/app/frontend/components/pages/dashboard/dashboardPage.tsx b/app/frontend/components/pages/dashboard/dashboardPage.tsx
@@ -31,7 +31,7 @@ const useViewport = () => {
   const [isViewportSmall, setIsViewportSmall] = useState(false)
 
   const handleScreenResize = () => {
-    setIsViewportSmall(window.innerWidth < 1024)
+    setIsViewportSmall(window.innerWidth <= 1024)
   }
   useEffect(() => {
     handleScreenResize()

diff --git a/app/public/css/0-1366px.css b/app/public/css/0-1366px.css
@@ -0,0 +1,28 @@
+@media screen and (max-height: 1366px) {
+  .welcome {
+    position: relative;
+    margin-bottom: -112px;
+    margin-left: -56px;
+    margin-right: -56px;
+  }
+
+  .welcome-body {
+    padding-left: 56px;
+    padding-right: 56px;
+  }
+
+  .welcome-footer {
+    position: -webkit-sticky;
+    position: sticky;
+    width: 100%;
+    bottom: -56px;
+    border-top: 1px solid var(--color-border);
+    padding: 24px 56px;
+    margin-top: 0;
+    background-color: white;
+  }
+
+  .welcome .credits {
+    border-bottom-width: 0;
+  }
+}