fix(website): subpixel scaling causing issues at 719px

apps/website/src/components/Header.css

@@ -4,7 +4,7 @@ header {
     top: 0;
     background: var(--header-background-color);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(20px);    
+    backdrop-filter: blur(20px);
     z-index: 1000;
     --gap: 1.25em;
     font-size: 0.8em;
@@ -23,7 +23,7 @@ header {
         justify-items: center;
         text-decoration: none;
         color: inherit;
-        
+
         &:hover { text-decoration: none;}
     }
 
@@ -67,7 +67,7 @@ header {
     }
 }
 
-@media (max-width: 719px) {
+@media (max-width: 719.99px) {
     :root {
         --header-height: 60px;
     }
@@ -100,7 +100,7 @@ header {
             flex-direction: column;
             max-height: 0;
             overflow: hidden;
-            transition: max-height 200ms ease-in;        
+            transition: max-height 200ms ease-in;
 
             &.mobile-shown {
                 display: flex;
@@ -113,7 +113,7 @@ header {
     header + main {
         margin-top: var(--header-height);
     }
-    
+
     header nav a {
         font-size: 1.25em;
         padding: 0.5em 0;
@@ -144,4 +144,4 @@ header {
             height: 48px;
         }
     }
-}
+}

apps/website/src/pages/Home/index.css

@@ -37,13 +37,13 @@ section.hero-section {
             pointer-events: none;
         }
     }
-    
+
     &>.content-wrapper {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        min-width: 80vw;    
+        min-width: 80vw;
     }
 
     .title-section {
@@ -73,7 +73,7 @@ section.hero-section {
         margin-bottom: 0;
     }
 
-    .download-wrapper {    
+    .download-wrapper {
         display: flex;
         flex-direction: column;
         align-content: center;
@@ -104,17 +104,17 @@ section.hero-section {
     }
 }
 
-@media (max-width: 719px) {
+@media (max-width: 719.99px) {
     section.hero-section {
-        padding-bottom: 0; 
-        
+        padding-bottom: 0;
+
         .content-wrapper {
             width: 100%;
         }
 
         .title-section {
             max-width: 90%;
-        }    
+        }
 
         .screenshot {
             margin-top: 2em;
@@ -193,18 +193,18 @@ section.faq {
         padding: 0;
         gap: 1em;
         display: grid;
-        
+
         @media (min-width: 720px) {
-            grid-template-columns: 1fr 1fr 1fr;                
+            grid-template-columns: 1fr 1fr 1fr;
         }
 
         li {
-            margin: 0;        
+            margin: 0;
 
             .card {
                 border: 1px solid transparent;
                 height: 100%;
-            }     
+            }
         }
     }
 
@@ -214,7 +214,7 @@ section.faq {
         display: flex;
         flex-direction: column;
 
-        @media (max-width: 719px) {
+        @media (max-width: 719.99px) {
             margin-top: 1em;
         }
     }

apps/website/src/style.css

@@ -123,14 +123,14 @@ img {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-    
+
         .more-info-container {
             margin-top: 0.5em;
             flex-grow: 1;
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
-    
+
             .more-info {
                 font-size: 0.9em;
             }
@@ -149,7 +149,7 @@ img {
     }
 }
 
-@media (max-width: 719px) {
+@media (max-width: 719.99px) {
     .grid-4-cols > *,
     .grid-3-cols > *,
     .grid-2-cols > * {
@@ -168,7 +168,7 @@ img {
         h2 {
             margin-bottom: 2em;
         }
-    }    
+    }
 
     .grid-4-cols {
         display: grid;
@@ -191,4 +191,4 @@ img {
     .mobile-only {
         display: none !important;
     }
-}
+}