chore: extract media queries to sass mixin (@fehmer) (monkeytypegame#7351)

Author: fehmer

frontend/src/styles/media-queries-blue.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(768px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(blue) {
   #mediaQueryDebug {
     background: #29b6f6;
     &::before {

frontend/src/styles/media-queries-brown.scss

@@ -1,5 +1,7 @@
 //this is very overkill for the modern world so dont worry too much about this width
-@media only screen and (max-width: 425px) {
+@use "./media.scss" as *;
+
+@include media-query(brown) {
   #mediaQueryDebug {
     background: #8d6e63;
     &::before {

frontend/src/styles/media-queries-gray.scss

@@ -1,5 +1,7 @@
 //this is very overkill for the modern world so dont worry too much about this width
-@media only screen and (max-width: 330px) {
+@use "./media.scss" as *;
+
+@include media-query(gray) {
   #mediaQueryDebug {
     background: gray;
     &::before {

frontend/src/styles/media-queries-green.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(1024px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(green) {
   #mediaQueryDebug {
     background: #9ccc65;
     &::before {

frontend/src/styles/media-queries-orange.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(1536px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(orange) {
   #mediaQueryDebug {
     background: #ffa726;
     &::before {

frontend/src/styles/media-queries-purple.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(640px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(purple) {
   #mediaQueryDebug {
     background: #7e57c2;
     &::before {

frontend/src/styles/media-queries-yellow.scss

@@ -1,4 +1,6 @@
-@media only screen and (max-width: calc(1280px + 5rem)) {
+@use "./media.scss" as *;
+
+@include media-query(yellow) {
   #mediaQueryDebug {
     background: #ffee58;
     &::before {

frontend/src/styles/media.scss

@@ -0,0 +1,15 @@
+$breakpoints: (
+  orange: calc(1536px + 5rem),
+  yellow: calc(1280px + 5rem),
+  green: calc(1024px + 5rem),
+  blue: calc(768px + 5rem),
+  purple: calc(640px + 5rem),
+  brown: 425px,
+  gray: 330px,
+);
+
+@mixin media-query($size) {
+  @media only screen and (max-width: map-get($breakpoints, $size)) {
+    @content;
+  }
+}