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.
This commit is contained in:
outfoxxed 2024-10-12 00:39:34 -07:00
parent 2ce79597b5
commit 24d3b1bfd2
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
7 changed files with 11 additions and 13 deletions

View file

@ -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;
}

View file

@ -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;

View file

@ -95,7 +95,7 @@
}
}
@media (min-width: 768px) {
@media (min-width: 65rem) {
.nav-wrapper-mobile {
display: none;
}

View file

@ -313,7 +313,7 @@ button[data-close-modal] {
--search-cancel-space: 5rem;
}
@media (min-width: 768px) {
@media (min-width: 65rem) {
/* difault styles */
.search-label {

View file

@ -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;
}

View file

@ -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) {} */

View file

@ -117,7 +117,7 @@
}
}
@media (min-width: 768px) {
@media (min-width: 65rem) {
.main-page_hero-text {
text-align: end;
}