monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-05 13:27:49 +08:00
Code Issues Projects Releases Packages Wiki Activity

optimised settings page media queries,

Browse source 
made sure media queries are loaded last
This commit is contained in:
Jack 2021-10-25 00:47:11 +01:00
parent 75b32795fb
commit 00df169aa7
2 changed files with 55 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/sass/settings.scss
View file

@ -35,8 +35,8 @@
display: grid;
gap: 2rem;
&.quickNav .links {
display: flex;
justify-content: space-between;
display: grid;
grid-auto-flow: column;
a {
text-decoration: none;
// opacity: 0.5;

71
src/sass/media-queries.scss → src/sass/z_media-queries.scss
View file

@ -13,15 +13,13 @@
}
@media only screen and (max-width: 1050px) {
#centerContent {
.pageSettings .section.fullWidth .buttons {
grid-template-columns: 1fr 1fr 1fr;
}
.pageSettings .section.fullWidth .buttons {
grid-template-columns: 1fr 1fr 1fr;
}
#result .morestats {
gap: 1rem;
grid-template-rows: 1fr 1fr;
}
#result .morestats {
gap: 1rem;
grid-template-rows: 1fr 1fr;
}
#supportMe {
width: 90vw !important;
@ -83,8 +81,10 @@
}
@media only screen and (max-width: 800px) {
.settingsGroup.quickNav {
display: none;
.pageSettings .settingsGroup.quickNav .links {
grid-auto-flow: unset;
grid-template-columns: 1fr 1fr 1fr;
justify-items: center;
}
#centerContent {
#top {
@ -123,6 +123,11 @@
}
}
.pageSettings {
.section.themes .tabContent.customTheme {
}
}
#commandLine,
#commandLineInput {
width: 600px !important;
@ -155,9 +160,9 @@
.pageSettings .section {
grid-template-columns: 1fr;
grid-template-areas:
"title title"
"text text"
"buttons buttons";
"title"
"text"
"buttons";
& > .text {
margin-bottom: 1rem;
@ -190,10 +195,8 @@
}
}
#centerContent {
.pageSettings .section.fullWidth .buttons {
grid-template-columns: 1fr 1fr;
}
.pageSettings .section.fullWidth .buttons {
grid-template-columns: 1fr 1fr;
}
}
@ -265,7 +268,25 @@
@media only screen and (max-width: 500px) {
.pageAbout .section .supporters,
.pageAbout .section .contributors {
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr;
}
.pageSettings {
.settingsGroup.quickNav {
display: none;
}
.section.fullWidth .buttons {
grid-template-columns: 1fr;
}
.section .buttons {
grid-auto-flow: row;
}
.section.customBackgroundFilter .groups .group {
grid-template-columns: auto 1fr;
.title {
grid-column: 1/3;
}
}
}
#top {
@ -355,6 +376,20 @@
#bottom {
font-size: 0.65rem;
.leftright {
grid-template-columns: 1fr;
.left {
grid-template-rows: unset;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
}
.right {
justify-self: left;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0.25rem 1rem;
}
}
}
#commandLine,