From 24d3b1bfd2e4e4ecbf268bcb8f92721bc41f71fe Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Sat, 12 Oct 2024 00:39:34 -0700
Subject: [PATCH] adjust media query page sizes

Ensures its actually possible to read a page at a given size. Needs
future work to add a stage between phone UI and half a 1080p monitor.
---
 src/styles/docs/docs-types.css | 4 ++--
 src/styles/docs/docs.css       | 4 ++--
 src/styles/docs/nav/nav.css    | 2 +-
 src/styles/docs/nav/search.css | 2 +-
 src/styles/docs/toc/toc.css    | 6 +++---
 src/styles/global.css          | 4 +---
 src/styles/main-page.css       | 2 +-
 7 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/styles/docs/docs-types.css b/src/styles/docs/docs-types.css
index e50f24d..dab5275 100644
--- a/src/styles/docs/docs-types.css
+++ b/src/styles/docs/docs-types.css
@@ -376,7 +376,7 @@ html.dark .typevariants {
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 65rem) {
   .root-nav {
     & .root-nav-entry {
       display: grid;
@@ -427,7 +427,7 @@ html.dark .typevariants {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 85rem) {
   .root-nav {
     min-width: 45svw;
   }
diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css
index 74ac523..f2838a6 100644
--- a/src/styles/docs/docs.css
+++ b/src/styles/docs/docs.css
@@ -80,7 +80,7 @@ ul {
   text-transform: capitalize;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 65rem) {
   .docs,
   .docslayout-root {
     gap: 0.648rem;
@@ -109,7 +109,7 @@ ul {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 85rem) {
   .docs {
     display: flex;
     flex-direction: row;
diff --git a/src/styles/docs/nav/nav.css b/src/styles/docs/nav/nav.css
index 923e778..a816797 100644
--- a/src/styles/docs/nav/nav.css
+++ b/src/styles/docs/nav/nav.css
@@ -95,7 +95,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 65rem) {
   .nav-wrapper-mobile {
     display: none;
   }
diff --git a/src/styles/docs/nav/search.css b/src/styles/docs/nav/search.css
index f0c5b08..845e04d 100644
--- a/src/styles/docs/nav/search.css
+++ b/src/styles/docs/nav/search.css
@@ -313,7 +313,7 @@ button[data-close-modal] {
   --search-cancel-space: 5rem;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 65rem) {
 
   /* difault styles */
   .search-label {
diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css
index 8e83873..c2e3b2e 100644
--- a/src/styles/docs/toc/toc.css
+++ b/src/styles/docs/toc/toc.css
@@ -84,15 +84,15 @@
   }
 }
 
-@media (max-width: 1280px) {
-  @media (min-width: 768px) {
+@media (max-width: 85rem) {
+  @media (min-width: 65rem) {
     .toc-toggle {
       --width: 25svw;
     }
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 85rem) {
   .toc-wrapper-mobile {
     display: none;
   }
diff --git a/src/styles/global.css b/src/styles/global.css
index e17072b..d254d33 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -184,7 +184,7 @@ footer {
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 65rem) {
   html {
     font-size: 16px;
   }
@@ -212,5 +212,3 @@ footer {
     color: hsla(var(--white) 40 50 / 0.3);
   }
 }
-
-/* @media (min-width: 1280px) {} */
diff --git a/src/styles/main-page.css b/src/styles/main-page.css
index c72f8a7..0cc0263 100644
--- a/src/styles/main-page.css
+++ b/src/styles/main-page.css
@@ -117,7 +117,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 65rem) {
   .main-page_hero-text {
     text-align: end;
   }