markup and styles for simple mobile only

webroot/styles/layout.css

@@ -2,7 +2,7 @@
 :root {
   --header-height: 3em;
   --right-col-width: 24em;
-
+  --video-container-height: 50vh;
   --header-bg-color: rgba(20,0,40,1);
   --vh: 1vh;
 }
@@ -184,7 +184,7 @@ header h1 {
 /* ************************************************8 */
 
 
-#chat-container {
+#xchat-container {
   position: fixed;
   z-index: 9;
   right: 0;
@@ -248,13 +248,13 @@ header h1 {
 
 
 /* ************************************************8 */
-
+/* 
 .no-chat .left-col {
   width: 100vw;
 }
 .no-chat .right-col {
   display: none;
-}
+} */
 
 .no-chat #chat-toggle {
   opacity: .75;
@@ -273,7 +273,7 @@ header h1 {
     --right-col-width: 20em;
   }
   
-  #chat-container {
+  #xchat-container {
     width: var(--right-col-width);
   }
   .left-col {
@@ -283,7 +283,7 @@ header h1 {
 
 /* ************************************************8 */
 
-
+/* 
 @media screen and (max-width: 640px ) {
   #main-content-container {
     flex-direction: column;
@@ -312,7 +312,7 @@ header h1 {
   #user-content {
     display: none;
   }
-  #chat-container {
+  #xchat-container {
     width: 100%;
     height: 100%;
     position: relative;
@@ -331,15 +331,15 @@ header h1 {
   .no-chat  .right-col {
     display: none;
   }
-  .no-chat #stream-info {
+  .no-chat #xstream-info {
     display: flex;
   }
   .no-chat   #user-content {
     display: block;
   }
-}
-
+} */
 
+/* 
 .message-input-focus  #main-content-container {
   flex-direction: column;
   justify-content: space-between;
@@ -377,4 +377,81 @@ header h1 {
   height: 40vh;
   height: calc((var(--vh, 1vh) * 40));
   min-height: 300px;
-}
+} */
+
+
+/* ************************************************8 */
+/* ************************************************8 */
+
+.touch-screen header {
+  position: relative;
+}
+.touch-screen #fixed-content {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.touch-screen #main-content-container {
+  display: none;
+}
+
+.touch-screen #stream-info {
+  height: 2.5em;
+  overflow: hidden;
+}
+
+#main-mobile-container {
+  flex-direction: column;
+  margin-top: calc(var(--header-height) + var(--video-container-height));
+}
+.touch-screen #video-container {
+  height: var(--video-container-height);
+}
+.touch-screen .owncast-video-container {
+  height: 100%;
+}
+
+.touch-screen #user-content {
+  display: none;
+}
+.touch-screen #chat-container {
+  display: block;
+}
+.touch-screen.no-chat #user-content {
+  display: block;
+}
+.touch-screen.no-chat #chat-container {
+  display: none;
+}
+
+@media screen and (max-width: 640px ) {
+  :root {
+    --video-container-height: 36vh;
+  }
+}
+
+@media screen and (orientation: landscape) and (min-width: 1024px) {
+  :root {
+    --video-container-height: 65vh;
+  }
+}
+
+@media screen and (orientation: landscape) and (max-width: 1024px) {
+  :root {
+    --video-container-height: 75vh;
+  }
+  #main-mobile-container {
+    margin-top: calc(var(--header-height) + var(--video-container-height));
+  }
+  .touch-screen #user-content {
+    display: block;
+  }
+  .touch-screen #chat-container {
+    display: none;
+  }
+  .touch-screen #chat-toggle {
+    display: none;
+  }
+}