diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 6254f42..512fa3b 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -31,6 +31,12 @@ body { @apply outline-offset-2; @apply rounded-sm; } + + @media only screen and (orientation:portrait) and (max-width: 768px) { + .portrait-mode-notice { + @apply block; + } + } } h1, diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue index f82ba79..4362ff0 100644 --- a/src/components/screens/Characters.vue +++ b/src/components/screens/Characters.vue @@ -1,5 +1,8 @@ <template> <div class="relative max-lg:h-dvh flex flex-row-reverse"> + <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center"> + <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span> + </div> <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div> <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div> <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div> diff --git a/src/components/screens/Game.vue b/src/components/screens/Game.vue index 4f9dc94..a0d5e95 100644 --- a/src/components/screens/Game.vue +++ b/src/components/screens/Game.vue @@ -1,5 +1,8 @@ <template> <div class="flex justify-center items-center h-dvh relative"> + <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center"> + <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span> + </div> <Game :config="gameConfig" @create="createGame"> <Scene name="main" @preload="preloadScene" @create="createScene"> <Menu />