Lucas
/
PoorBooru
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

backend: make .viewport responsive

This commit is contained in:
Lucas 2023-03-26 15:36:07 +00:00
parent 5e931a2fd0
commit ed8f8306b9
1 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/css/style.css
View File

@ -31,6 +31,8 @@
--text: var(--dark-theme-text); --text: var(--dark-theme-text);
--accent: var(--dark-theme-accent); --accent: var(--dark-theme-accent);
--accent-hover: var(--dark-theme-accent-hover); --accent-hover: var(--dark-theme-accent-hover);
--viewport-width: 60rem;
} }
*, *,
@ -123,7 +125,7 @@ dd {
.viewport { .viewport {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 60rem; width: var(--viewport-width);
} }
.border-top { .border-top {
@ -199,3 +201,33 @@ dd {
.flex-i-fullsize { .flex-i-fullsize {
flex: auto; flex: auto;
} }
@media screen and (max-width: 30rem) {
:root {
--viewport-width: 100%;
}
}
@media screen and (min-width: 30rem) {
:root {
--viewport-width: 30rem;
}
}
@media screen and (min-width: 45rem) {
:root {
--viewport-width: 45rem;
}
}
@media screen and (min-width: 60rem) {
:root {
--viewport-width: 60rem;
}
}
@media screen and (min-width: 90rem) {
:root {
--viewport-width: 90rem;
}
}