mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-24 06:48:02 +08:00
updated media queries and moved them to a new file
This commit is contained in:
Miodec
parent
c0b09e923d
commit
069385656b
3 changed files with 242 additions and 226 deletions
237
src/sass/media-queries.scss
Normal file
237
src/sass/media-queries.scss
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
|
||||
@media only screen and (max-width: 1050px) {
|
||||
#centerContent {
|
||||
.pageSettings .section.themes .buttons,
|
||||
.pageSettings .section.language .buttons,
|
||||
.pageSettings .section.layout .buttons,
|
||||
.pageSettings .section.keymapLayout .buttons,
|
||||
.pageSettings .section.keymapLegendStyle .buttons,
|
||||
.pageSettings .section.fontFamily .buttons,
|
||||
.pageSettings .section.funbox .buttons,
|
||||
.pageSettings .section.keymapStyle .buttons,
|
||||
.pageSettings .section.languageGroups .buttons
|
||||
{
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#result .morestats {
|
||||
gap: 1rem;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
#supportMe {
|
||||
width: 90vw !important;
|
||||
.buttons {
|
||||
.button {
|
||||
.icon {
|
||||
font-size: 3rem !important;
|
||||
line-height: 3rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.settingsGroup.quickNav{
|
||||
display: none;
|
||||
}
|
||||
#centerContent {
|
||||
#top {
|
||||
grid-template-areas:
|
||||
"logo config"
|
||||
"menu config";
|
||||
.logo {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
|
||||
.icon-button {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#bottom{
|
||||
.leftright{
|
||||
.left{
|
||||
gap: 0.25rem 1rem;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.right{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageAbout .section .supporters, .pageAbout .section .contributors{
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
}
|
||||
|
||||
.pageSettings .section.customBackgroundFilter {
|
||||
.groups {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.saveContainer {
|
||||
grid-column: -1/-2;
|
||||
}
|
||||
}
|
||||
|
||||
#commandLine,
|
||||
#commandLineInput {
|
||||
width: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.pageSettings .section {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"text text"
|
||||
"buttons buttons";
|
||||
|
||||
& > .text {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#result {
|
||||
.buttons {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
#nextTestButton {
|
||||
grid-column: 1/5;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#supportMe {
|
||||
width: 80vw !important;
|
||||
.buttons {
|
||||
grid-template-columns: none !important;
|
||||
.button {
|
||||
grid-template-columns: auto auto;
|
||||
align-items: center;
|
||||
.icon {
|
||||
font-size: 2rem !important;
|
||||
line-height: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#commandLine,
|
||||
#commandLineInput {
|
||||
width: 400px !important;
|
||||
}
|
||||
|
||||
#centerContent {
|
||||
.pageSettings .section.themes .buttons,
|
||||
.pageSettings .section.language .buttons,
|
||||
.pageSettings .section.layout .buttons,
|
||||
.pageSettings .section.keymapLayout .buttons,
|
||||
.pageSettings .section.keymapLegendStyle .buttons,
|
||||
.pageSettings .section.fontFamily .buttons,
|
||||
.pageSettings .section.funbox .buttons,
|
||||
.pageSettings .section.keymapStyle .buttons,
|
||||
.pageSettings .section.languageGroups .buttons {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.pageAbout .section .supporters, .pageAbout .section .contributors{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#middle {
|
||||
#result {
|
||||
grid-template-areas:
|
||||
"stats stats"
|
||||
"chart chart"
|
||||
"morestats morestats";
|
||||
.stats {
|
||||
grid-template-areas: "wpm acc";
|
||||
gap: 4rem;
|
||||
}
|
||||
.stats.morestats {
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
|
||||
.pageAbout .section .supporters, .pageAbout .section .contributors{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#top {
|
||||
align-items: self-end;
|
||||
.logo {
|
||||
.bottom {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.top {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#menu {
|
||||
.icon-button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
#bottom{
|
||||
.leftright{
|
||||
.left{
|
||||
gap: 0.25rem 1rem;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.right{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#centerContent {
|
||||
padding: 1rem;
|
||||
}
|
||||
#result {
|
||||
.buttons {
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
#nextTestButton {
|
||||
grid-column: 1/3;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
#commandLineMobileButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -3568,196 +3568,6 @@ key {
|
|||
transition: 0.25s;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1050px) {
|
||||
#centerContent {
|
||||
.pageSettings .section.themes .buttons,
|
||||
.pageSettings .section.language .buttons,
|
||||
.pageSettings .section.layout .buttons,
|
||||
.pageSettings .section.keymapLayout .buttons,
|
||||
.pageSettings .section.keymapLegendStyle .buttons,
|
||||
.pageSettings .section.fontFamily .buttons,
|
||||
.pageSettings .section.funbox .buttons,
|
||||
.pageSettings .section.keymapStyle .buttons {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#result .morestats {
|
||||
gap: 1rem;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
#supportMe {
|
||||
width: 90vw !important;
|
||||
.buttons {
|
||||
.button {
|
||||
.icon {
|
||||
font-size: 3rem !important;
|
||||
line-height: 3rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#centerContent {
|
||||
#top {
|
||||
grid-template-areas:
|
||||
"logo config"
|
||||
"menu config";
|
||||
.logo {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
|
||||
.icon-button {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centerContent .bottom .leftright{
|
||||
.left{
|
||||
gap: 0.25rem 1rem;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.right{
|
||||
display: grid;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pageSettings .section.customBackgroundFilter {
|
||||
.groups {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.saveContainer {
|
||||
grid-column: -1/-2;
|
||||
}
|
||||
}
|
||||
|
||||
#commandLine,
|
||||
#commandLineInput {
|
||||
width: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.pageSettings .section {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"text text"
|
||||
"buttons buttons";
|
||||
|
||||
& > .text {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#result {
|
||||
.buttons {
|
||||
grid-template-rows: 1fr 1fr;
|
||||
#nextTestButton {
|
||||
grid-column: 1/5;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#supportMe {
|
||||
width: 80vw !important;
|
||||
.buttons {
|
||||
grid-template-columns: none !important;
|
||||
.button {
|
||||
grid-template-columns: auto auto;
|
||||
align-items: center;
|
||||
.icon {
|
||||
font-size: 2rem !important;
|
||||
line-height: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#commandLine,
|
||||
#commandLineInput {
|
||||
width: 400px !important;
|
||||
}
|
||||
|
||||
#centerContent {
|
||||
.pageSettings .section.themes .buttons,
|
||||
.pageSettings .section.language .buttons,
|
||||
.pageSettings .section.layout .buttons,
|
||||
.pageSettings .section.keymapLayout .buttons,
|
||||
.pageSettings .section.keymapLegendStyle .buttons,
|
||||
.pageSettings .section.fontFamily .buttons,
|
||||
.pageSettings .section.funbox .buttons,
|
||||
.pageSettings .section.keymapStyle .buttons {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
#middle {
|
||||
#result {
|
||||
grid-template-areas:
|
||||
"stats stats"
|
||||
"chart chart"
|
||||
"morestats morestats";
|
||||
.stats {
|
||||
grid-template-areas: "wpm acc";
|
||||
gap: 4rem;
|
||||
}
|
||||
.stats.morestats {
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
#top {
|
||||
.logo {
|
||||
.bottom {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.top {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#menu {
|
||||
.icon-button {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
#centerContent {
|
||||
padding: 1rem;
|
||||
}
|
||||
#result {
|
||||
.buttons {
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
#nextTestButton {
|
||||
grid-column: 1/3;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keymap {
|
||||
display: grid;
|
||||
|
|
@ -3945,11 +3755,10 @@ key {
|
|||
// }
|
||||
}
|
||||
|
||||
// .matrix {
|
||||
// display: flex;
|
||||
// justify-content: left;
|
||||
// margin-left: 4.51rem;
|
||||
// }
|
||||
#nitropay_ad_left,
|
||||
#nitropay_ad_right {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.keymap {
|
||||
&.matrix {
|
||||
|
|
@ -4063,34 +3872,3 @@ key {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
#commandLineMobileButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#nitropay_ad_left,
|
||||
#nitropay_ad_right {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
// .adcontainer{
|
||||
// position: relative;
|
||||
// &>div{
|
||||
// top: 0px;
|
||||
// left: 0px;
|
||||
// position: absolute;
|
||||
// }
|
||||
// .bg{
|
||||
// background: var(--bg-color);
|
||||
// color: var(--sub-color);
|
||||
// display: grid;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// font-size: .75rem;
|
||||
// user-select: none;
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
/>
|
||||
<link rel="stylesheet" href="css/balloon.css" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/media-queries.css" />
|
||||
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
|
||||
<link rel="stylesheet" href="" id="funBoxTheme" />
|
||||
<link id="favicon" rel="shortcut icon" href="images/fav.png" />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue