bring back small screen landscape styling

skedwards88 · Apr 23, 2024 · c7d8f88 · c7d8f88
1 parent a180735
commit c7d8f88
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -423,8 +423,31 @@ input[type="checkbox" i]:checked {
   color: rgb(0 162 255);
 }
 
+/* Landscape, small screen */
+@media (orientation: landscape) and (max-width: 935px) {
+  body {
+    --capped-cell-size: 3vmin;
+  }
+
+  #app {
+    grid-template-areas:
+    ". controls"
+    "matrix result"
+    "matrix clues";
+    grid-template-rows: auto auto 1fr;
+    grid-template-columns: auto auto;
+  }
+
+  .matrix {
+    align-self: center;
+  }
+  .clues {
+    align-self: center;
+  }
+}
+
 /* Large screen */
-@media (width >= 600px) {
+@media (orientation: landscape) and (min-height: 600px) and (min-width: 936px), (orientation: portrait) and (min-height: 600px) and (min-width: 600px) {
   body {
     --capped-cell-size: min(calc(var(--cell-size) * 0.8), 0.5cm);
   }
@@ -441,4 +464,9 @@ input[type="checkbox" i]:checked {
   .clues {
     max-width: calc(var(--capped-cell-size) * 20);
   }
+
+  #settings,
+  #setting-buttons {
+    width: fit-content;
+  }
 }
diff --git a/src/manifest.json b/src/manifest.json
@@ -6,7 +6,6 @@
   "dir": "auto",
   "lang": "en-US",
   "display": "standalone",
-  "orientation": "portrait",
   "start_url": "https://skedwards88.github.io/logic-grid/",
   "scope": "/logic-grid/",
   "background_color": "#373647",