simplified layout updates based on only media queries

webroot/styles/layout.css

@@ -426,83 +426,6 @@ h2 {
 
 /* ************************************************8 */
 
-.landscape #chat-toggle {
-  display: none;
-}
-
-/* ************************************************8 */
-/* ************************************************8 */
-
-.touch-screen header {
-  position: relative;
-}
-.touch-screen #top-content {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  z-index: 10;
-}
-
-
-.touch-screen .user-content {
-  flex-direction: column;
-  align-content: center;
-} 
-.touch-screen .user-image {
-  margin: auto;
-}
-
-
-.touch-screen #stream-info {
-  height: 2.5em;
-  overflow: hidden;
-}
-
-.touch-screen #chat-container-wrap {
-  display: flex;
-  align-items: flex-end;
-  width: 100%;
-  height: auto;
-  flex-direction: column;
-  margin-top: calc(var(--header-height) + var(--video-container-height) + 2.5em);
-}
-.touch-screen #chat-container {
-  height: auto;
-  position: relative;
-  right: unset;
-  top: unset;
-  width: 100%;
-  z-index: 1;
-}
-.touch-screen.chat #video-container,
-.touch-screen.chat #stream-info,
-.touch-screen.chat #user-content {
-  width: 100%;
-}
-
-
-.touch-screen #video-container {
-  margin-top: 0;
-}
-.touch-screen .owncast-video-container {
-  height: 100%;
-}
-
-.touch-screen #user-content-touch {
-  display: none;
-}
-.touch-screen #chat-container {
-  display: block;
-}
-.touch-screen.no-chat #user-content-touch {
-  display: block;
-}
-.touch-screen.no-chat #chat-container {
-  display: none;
-}
-
-/* ************************************************8 */
 
 @media screen and (max-width: 860px) {
   :root {
@@ -518,31 +441,8 @@ h2 {
 
 @media screen and (max-width: 640px ) {
   :root {
-    --video-container-height: 36vh;
+    --right-col-width: 0;
   }
-
-  .desktop {
-    --video-container-height: 50vh;
-  }
-  .desktop #chat-container {
-    height: auto;
-    position: relative;
-    right: unset;
-    top: unset;
-    width: 100%;
-    z-index: 1;
-  }
-  .desktop.chat #video-container,
-  .desktop.chat #stream-info,
-  .desktop.chat #user-content {
-    width: 100%;
-  }
-  .desktop #footer,
-  .desktop.chat #user-content {
-    display: none;
-  }
-
-
   #logo-container {
     display: none;
   }
@@ -552,29 +452,64 @@ h2 {
   #user-options-container {
     max-width: 41%;
   }
-}
 
-@media screen and (orientation: landscape) and (min-width: 1024px) {
-  :root {
-    --video-container-height: 65vh;
+  /* single col */
+  #chat-container {
+    width: 100%;
+    position: relative;
+    min-height: calc(100vh - var(--header-height));
   }
-}
-
-@media screen and (orientation: landscape) and (max-width: 1024px) {
-  :root .landscape {
-    --video-container-height: 75vh;
+ 
+  #user-content {
+    width: 100%;
   }
-  .touch-screen.landscape #chat-container-wrap {
-    margin-top: calc(var(--header-height) + var(--video-container-height));
+  #stream-info {
+    width: 100%;
   }
-  .touch-screen.landscape .user-content {
-    display: block;
+  #video-container {
+    width: 100%;
   }
-  .touch-screen.landscape #chat-container {
+  .chat #video-container {
+    width: 100%;
+  }
+  .chat #user-content {
     display: none;
   }
-  .touch-screen.landscape #chat-toggle {
+  .chat footer {
     display: none;
   }
+
+}
+@media (min-height: 861px) {
+  main {
+    position: fixed;
+    z-index: 9;
+    width: 100%;
+  }
+  #user-content {
+    margin-top: calc(var(--video-container-height) + var(--header-height) + 2em)
+  }
+}
+
+
+
+
+
+
+
+@media screen and (max-height: 860px ) {
+  #video-container {
+    height: 52vw;
+  }
+  .user-content {
+    flex-direction: column;
+  }
+
+  @media screen and (max-height: 640px ) {
+    #video-container {
+      height: 75vh;
+    }
+  }
+
 }