quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

adjust media query page sizes

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/styles/docs/docs-types.css
View file

@ -376,7 +376,7 @@ html.dark .typevariants {
} }
} }
@media (min-width: 768px) { @media (min-width: 65rem) {
.root-nav { .root-nav {
& .root-nav-entry { & .root-nav-entry {
display: grid; display: grid;
@ -427,7 +427,7 @@ html.dark .typevariants {
} }
} }
@media (min-width: 1280px) { @media (min-width: 85rem) {
.root-nav { .root-nav {
min-width: 45svw; min-width: 45svw;
} }

4
src/styles/docs/docs.css
View file

@ -80,7 +80,7 @@ ul {
text-transform: capitalize; text-transform: capitalize;
} }
@media (min-width: 768px) { @media (min-width: 65rem) {
.docs, .docs,
.docslayout-root { .docslayout-root {
gap: 0.648rem; gap: 0.648rem;
@ -109,7 +109,7 @@ ul {
} }
} }
@media (min-width: 1280px) { @media (min-width: 85rem) {
.docs { .docs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

2
src/styles/docs/nav/nav.css
View file

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

2
src/styles/docs/nav/search.css
View file

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

6
src/styles/docs/toc/toc.css
View file

@ -84,15 +84,15 @@
} }
} }
@media (max-width: 1280px) { @media (max-width: 85rem) {
@media (min-width: 768px) { @media (min-width: 65rem) {
.toc-toggle { .toc-toggle {
--width: 25svw; --width: 25svw;
} }
} }
} }
@media (min-width: 1280px) { @media (min-width: 85rem) {
.toc-wrapper-mobile { .toc-wrapper-mobile {
display: none; display: none;
} }

4
src/styles/global.css
View file

@ -184,7 +184,7 @@ footer {
} }
} }
@media (min-width: 768px) { @media (min-width: 65rem) {
html { html {
font-size: 16px; font-size: 16px;
} }
@ -212,5 +212,3 @@ footer {
color: hsla(var(--white) 40 50 / 0.3); color: hsla(var(--white) 40 50 / 0.3);
} }
} }
/* @media (min-width: 1280px) {} */

2
src/styles/main-page.css
View file

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