diff --git a/public/styles/css-pokemon-gameboy.css b/public/styles/css-pokemon-gameboy.css index c4392dd..00cc2c8 100644 --- a/public/styles/css-pokemon-gameboy.css +++ b/public/styles/css-pokemon-gameboy.css @@ -19,7 +19,7 @@ h6 { padding: 1em; max-width: 100%; - @media (max-width: 768px) { + @media (max-width: 1000px) { border-image: url("./images/frame.png") 7 round; border-width: 7px; } @@ -111,7 +111,7 @@ button, margin-top: 13px; margin-bottom: 7px; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 1rem; line-height: 1; margin-top: 7px; @@ -122,7 +122,7 @@ button, .no-select-button { padding: 0 0 0 0.2em; - @media (max-width: 768px) { + @media (max-width: 1000px) { padding: 0 0 0 0.5em; } } @@ -144,7 +144,7 @@ button, 2em 5em 0 #181010, 3em 5em 0 #181010, 1em 6em 0 #181010, 2em 6em 0 #181010; } -@media (max-width: 768px) { +@media (max-width: 1000px) { .active-button::before { left: -1px; top: -2px; @@ -178,7 +178,7 @@ ul.buttons li { padding: 0; margin: 0.5em; - @media (max-width: 768px) { + @media (max-width: 1000px) { margin: 0; } } diff --git a/src/App.tsx b/src/App.tsx index 2ea78a2..1285f91 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,7 +16,7 @@ const StyledApp = styled.div` padding: 5px; padding-bottom: 28px; - @media (min-width: 768px) { + @media (min-width: 1000px) { padding: 5px; } `; diff --git a/src/app/LearnMove.tsx b/src/app/LearnMove.tsx index 8601bd8..8683425 100644 --- a/src/app/LearnMove.tsx +++ b/src/app/LearnMove.tsx @@ -24,7 +24,7 @@ const TextContainer = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/Arrow.tsx b/src/components/Arrow.tsx index 7dea231..5d54775 100644 --- a/src/components/Arrow.tsx +++ b/src/components/Arrow.tsx @@ -11,7 +11,7 @@ interface ArrowProps { const StyledArrow = styled(PixelImage)<ArrowProps>` height: ${(props) => (props.$menu ? "23px" : "3vh")}; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: ${(props) => (props.$menu ? "11px" : "8px")}; } `; diff --git a/src/components/ConfirmationMenu.tsx b/src/components/ConfirmationMenu.tsx index 29f80fc..eec1d1e 100644 --- a/src/components/ConfirmationMenu.tsx +++ b/src/components/ConfirmationMenu.tsx @@ -16,7 +16,7 @@ const Container = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/Evolution.tsx b/src/components/Evolution.tsx index 902d712..d5285b9 100644 --- a/src/components/Evolution.tsx +++ b/src/components/Evolution.tsx @@ -14,7 +14,7 @@ const StyledEvolution = styled.div` background: var(--bg); height: 80%; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 70%; } `; @@ -233,7 +233,7 @@ const TextContainer = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx index 816e6c1..58ca55c 100644 --- a/src/components/Frame.tsx +++ b/src/components/Frame.tsx @@ -30,7 +30,7 @@ const StyledFrame = styled.div<FrameProps>` font-size: 30px; font-family: "PokemonGB"; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 9px; } } @@ -53,7 +53,7 @@ const StyledFrame = styled.div<FrameProps>` transform: rotate(90deg); animation: ${animation} 1s infinite; - @media (max-width: 768px) { + @media (max-width: 1000px) { bottom: ${(props) => (props.$flashing ? "13px" : "-1000px")}; right: 10px; width: 1.3px; diff --git a/src/components/GameboyMenu.tsx b/src/components/GameboyMenu.tsx index 5dc3258..594691f 100644 --- a/src/components/GameboyMenu.tsx +++ b/src/components/GameboyMenu.tsx @@ -99,7 +99,7 @@ const Text = styled.div` -webkit-animation: ${colorAnimation} 3s 1 linear forwards; animation: ${colorAnimation} 3s 1 linear forwards; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 2.5rem; } `; diff --git a/src/components/HealthBar.tsx b/src/components/HealthBar.tsx index 5d35c8d..bd1f276 100644 --- a/src/components/HealthBar.tsx +++ b/src/components/HealthBar.tsx @@ -15,7 +15,7 @@ const HealthContainer = styled.div` width: 75.2%; height: 46%; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; top: 40%; } @@ -52,7 +52,7 @@ const Image = styled(PixelImage)<ImageProps>` position: relative; height: ${(props) => (props.$big ? "6px" : "5px")}; - @media (min-width: 769px) { + @media (min-width: 1000px) { height: 2.5vh; } `; diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index c0df81e..57eb1a5 100644 --- a/src/components/Menu.tsx +++ b/src/components/Menu.tsx @@ -29,7 +29,7 @@ const StyledMenu = styled.div<MenuProps>` width: ${(props) => props.$compact ? "410px" : props.$wide ? "100%" : "auto"}; - @media (max-width: 768px) { + @media (max-width: 1000px) { width: ${(props) => props.$compact ? "130px" : props.$wide ? "100%" : "auto"}; } @@ -48,7 +48,7 @@ const Bold = styled.div` margin-left: 45px; font-size: 3rem; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 1rem; line-height: 1; margin-left: 15px; @@ -61,7 +61,7 @@ const ArrowContainer = styled.div` top: 50%; transform: translateY(-50%); - @media (max-width: 768px) { + @media (max-width: 1000px) { top: auto; bottom: -1px; left: 1px; diff --git a/src/components/MoveSelect.tsx b/src/components/MoveSelect.tsx index 130ea17..ce898ea 100644 --- a/src/components/MoveSelect.tsx +++ b/src/components/MoveSelect.tsx @@ -18,7 +18,7 @@ const Stats = styled.div` width: 35rem; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { bottom: 6rem; left: 0; width: 50%; @@ -34,7 +34,7 @@ const StatsRow = styled.div` width: 100%; margin-top: 5px; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 1rem; margin-top: 2px; } diff --git a/src/components/Pc.tsx b/src/components/Pc.tsx index bf7bb58..b514570 100644 --- a/src/components/Pc.tsx +++ b/src/components/Pc.tsx @@ -39,7 +39,7 @@ const TextContainer = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/PokeMart.tsx b/src/components/PokeMart.tsx index 3e9dbbf..c1d4f88 100644 --- a/src/components/PokeMart.tsx +++ b/src/components/PokeMart.tsx @@ -40,7 +40,7 @@ const TextContainer = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; @@ -72,7 +72,7 @@ const MoneyHeader = styled.div` left: 50%; transform: translateX(-50%); - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 10px; padding: 3px; padding-bottom: 0; diff --git a/src/components/PokemonCenter.tsx b/src/components/PokemonCenter.tsx index 0a4be19..2563294 100644 --- a/src/components/PokemonCenter.tsx +++ b/src/components/PokemonCenter.tsx @@ -30,7 +30,7 @@ const TextContainer = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/PokemonEncounter.tsx b/src/components/PokemonEncounter.tsx index 598ba7e..ec1e599 100644 --- a/src/components/PokemonEncounter.tsx +++ b/src/components/PokemonEncounter.tsx @@ -79,7 +79,7 @@ const StyledPokemonEncounter = styled.div` width: 100%; height: 80%; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 70%; padding-top: 3px; } @@ -114,7 +114,7 @@ const Name = styled.div` font-family: "PokemonGB"; text-transform: uppercase; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 13px; } `; @@ -124,7 +124,7 @@ const Level = styled.div` margin: 0 12vh; font-family: "PressStart2P", sans-serif; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 12px; margin: 0 28px; } @@ -134,7 +134,7 @@ const HealthBarContainer = styled.div` margin: 0 3.3vh; margin-top: 1.2vh; - @media (max-width: 768px) { + @media (max-width: 1000px) { margin: 0 8px; } `; @@ -145,7 +145,7 @@ const Health = styled.div` font-size: 5vh; margin: 0 3.3vh; margin-top: 1.2vh; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 13px; margin: 0 8px; margin-top: 3px; @@ -361,14 +361,14 @@ const Corner = styled.img` transform: translateY(-50%); height: 8vh; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 19px; } `; const CornerContainer = styled.div` height: 5vh; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 10px; } `; @@ -376,7 +376,7 @@ const CornerContainer = styled.div` const CornerRight = styled.img` height: 8vh; transform: translateY(-70%) scaleX(-1); - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 19px; } `; @@ -389,7 +389,7 @@ const TextContainer = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/PokemonList.tsx b/src/components/PokemonList.tsx index 695fc68..054556d 100644 --- a/src/components/PokemonList.tsx +++ b/src/components/PokemonList.tsx @@ -31,7 +31,7 @@ const Container = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/PokemonRow.tsx b/src/components/PokemonRow.tsx index c99a3bc..b275912 100644 --- a/src/components/PokemonRow.tsx +++ b/src/components/PokemonRow.tsx @@ -88,7 +88,7 @@ const StyledPokemonRow = styled.div` margin-bottom: 1px; align-items: center; - @media (min-width: 769px) { + @media (min-width: 1000px) { margin-bottom: 1vh; } `; @@ -107,7 +107,7 @@ const Image = styled.img` // The sprites seemd a bit yellow, so I added a hue-rotate filter to make them more red filter: hue-rotate(-25deg); - @media (min-width: 769px) { + @media (min-width: 1000px) { height: 8vh; margin-right: 4vh; } @@ -126,7 +126,7 @@ const Name = styled.div` font-family: "PokemonGB"; text-transform: uppercase; - @media (min-width: 769px) { + @media (min-width: 1000px) { font-size: 3.7vh; transform: translateY(1vh); } @@ -135,7 +135,7 @@ const Name = styled.div` const HealthBarContainer = styled.div` margin-left: 10px; - @media (min-width: 769px) { + @media (min-width: 1000px) { margin-left: 4vh; } `; @@ -147,7 +147,7 @@ const StatsContainer = styled.div` height: 100%; justify-content: space-between; - @media (min-width: 769px) { + @media (min-width: 1000px) { margin-left: 4vh; } `; @@ -158,7 +158,7 @@ const Level = styled.div` margin-bottom: 2px; margin-top: 1px; - @media (min-width: 769px) { + @media (min-width: 1000px) { font-size: 3.3vh; margin-bottom: 1vh; margin-top: 0.5vh; @@ -170,7 +170,7 @@ const Health = styled.div` margin-left: 10px; font-family: "PokemonGB"; - @media (min-width: 769px) { + @media (min-width: 1000px) { font-size: 3.3vh; margin-left: 4vh; } diff --git a/src/components/Text.tsx b/src/components/Text.tsx index ab8c209..63aba86 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -49,12 +49,12 @@ const StyledText = styled.div<TextProps>` font-size: 30px; font-family: "PokemonGB"; - @media (max-width: 768px) { + @media (max-width: 1000px) { font-size: 9px; } } - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } @@ -76,7 +76,7 @@ const StyledText = styled.div<TextProps>` transform: rotate(90deg); animation: ${flashing} 1s infinite; - @media (max-width: 768px) { + @media (max-width: 1000px) { bottom: ${(props) => (props.$done ? "13px" : "-100px")}; right: 10px; width: 1.3px; diff --git a/src/components/TextThenAction.tsx b/src/components/TextThenAction.tsx index 7caa246..b422973 100644 --- a/src/components/TextThenAction.tsx +++ b/src/components/TextThenAction.tsx @@ -14,7 +14,7 @@ const StyledTextThenAction = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/TrainerEncounter.tsx b/src/components/TrainerEncounter.tsx index 0bcef4e..015ccd0 100644 --- a/src/components/TrainerEncounter.tsx +++ b/src/components/TrainerEncounter.tsx @@ -30,7 +30,7 @@ const StyledTrainerEncounter = styled.div` height: 20%; z-index: 100; - @media (max-width: 768px) { + @media (max-width: 1000px) { height: 30%; } `; diff --git a/src/components/gameboy.css b/src/components/gameboy.css index 2f1193f..184727e 100644 --- a/src/components/gameboy.css +++ b/src/components/gameboy.css @@ -28,7 +28,7 @@ border-bottom: 2px solid #9998eb; } -@media (min-width: 768px) { +@media (min-width: 1000px) { .gameboy::after { display: none; } @@ -40,7 +40,7 @@ display: flex; flex-direction: column; - @media (min-width: 768px) { + @media (min-width: 1000px) { height: 100%; } } @@ -49,7 +49,7 @@ width: 100%; min-height: 250px; - @media (min-width: 768px) { + @media (min-width: 1000px) { display: none; } } @@ -63,7 +63,7 @@ box-shadow: 0px 2px 0px black, 0px -2px 0px black, -2px 0px 0px black, 2px 0px 0px black; - @media (min-width: 768px) { + @media (min-width: 1000px) { flex: 1; } } @@ -139,7 +139,7 @@ margin-bottom: 15px; overflow: hidden; - @media (min-width: 768px) { + @media (min-width: 1000px) { height: calc(100% - 45px); } } @@ -424,7 +424,7 @@ z-index: 100; transform: skewY(-10deg); - @media (min-width: 768px) { + @media (min-width: 1000px) { display: none; } }