make UI work better on smaller screens

src/lib/components/Footer.svelte

@@ -1,5 +1,5 @@
 <footer>
- Built with&nbsp;<a href="https://kit.svelte.dev/" rel="noopener" target="_blank">SvelteKit</a
+ Built&nbsp;with&nbsp;<a href="https://kit.svelte.dev/" rel="noopener" target="_blank">SvelteKit</a
  >&nbsp;and&nbsp;
  <a href="https://www.partykit.io/" rel="noopener" target="_blank">PartyKit</a>&nbsp;by&nbsp;<a
  href="https://twitter.com/tsriram"

src/lib/components/GameBoard.svelte

@@ -80,7 +80,7 @@
  --column-gap: 12px;
  --row-gap: 20px;
  --grid-padding: 16px;
- --column-size: 40px;
+ --column-size: 32px;
  display: grid;
  padding: var(--grid-padding);
  width: fit-content;

src/lib/components/GameHeader.svelte

@@ -16,8 +16,17 @@
 <style>
  .game-header {
  display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ gap: 2rem;
+ align-items: center;
  margin: 2rem 0;
  font-size: 1.5rem;
  }
+ @media (min-width: 720px) {
+ .game-header {
+ flex-direction: row;
+ justify-content: space-between;
+ gap: revert;
+ }
+ }
 </style>

src/lib/components/Logo.svelte

@@ -274,7 +274,7 @@
 
 <style>
  .logo {
- max-width: 70%;
+ max-width: max(50%, 240px);
  }
  @media (min-width: 720px) {
  .logo {

src/routes/+layout.svelte

@@ -10,6 +10,10 @@
 
 <InitialThemeSetter />
 <MetaTags />
+<div class="small-screen">
+ <p>Screen size not supported :(</p>
+ <p>Please use a larger screen to play.</p>
+</div>
 <div class="wrapper">
  <header class="header">
  <div class="logo-container">
@@ -27,6 +31,9 @@
 </div>
 
 <style>
+ .small-screen {
+ display: none;
+ }
  .wrapper {
  display: flex;
  flex-direction: column;
@@ -36,6 +43,18 @@
  margin: auto;
  padding: 0 2rem;
  }
+ @media (max-width: 359px) {
+ .wrapper {
+ display: none;
+ }
+ .small-screen {
+ display: flex;
+ flex-direction: column;
+ margin-top: 4rem;
+ align-items: center;
+ justify-content: center;
+ }
+ }
  .header {
  margin: 2rem 0;
  display: flex;