Rivisto il layout largo e proporzionate scalarmente. Necessario test su qualche dispositivo tablet.

themes/pelican-blue/static/css/large.css

@@ -1,39 +1,33 @@
-article {
-    max-width:100%;
-}
-img {
-  max-width: 100%;
+/* vim:sts=2:sw=2 */
+
+article, footer {
+  margin: auto 5px auto 285px;
+  padding: 10px 5px 10px;
 }
 
-#live iframe {
-    border: 0px;
-    flex: 1;
-  width: 100%
-}
+article { max-width:100%; }
+img { max-width: 100%; }
 
 #footlinks {
   width: 100%;
   margin: auto;
 }
 
-#footlinks ul
-{
+#footlinks ul {
   column-count: 2;
   list-style: none;
   padding: 0 50px;
   margin: 0 0;
 }
 
-#footlinks li
-{
+#footlinks li {
   display: block;
   width: 200px;
   min-height: 50px;
   margin: 0px 5px;
 }
 
-#footlinks a
-{
+#footlinks a {
   -webkit-transition: 200ms;
           transition: 200ms;
   display: block;
@@ -56,24 +50,50 @@ img {
 }
 
 #live {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: stretch;
-    height: 75vh;
+  display: flex;
+  flex-flow: row nowrap;
+  height: 77.5vh;
 }
 
-#embedded-chat, #embedded-video {
+#live iframe {
+  border: 0px;
   width: 100%;
   height: 100%;
 }
 
-@media screen and (max-width: 1024px) {
-  #live iframe {
-    min-height: 500px;
-  }
-  #live {
-    flex-direction: column;
-    justify-content: space-between;
-    height:auto;
-  }
+#live div { flex-grow: 1; }
+#embedded-chat { border: 1px solid grey; }
+
+#embedded-video {
+  flex-grow: 3;
+  min-width: 66vw;
+}
+
+@media screen and (max-width: 1024px) {
+
+  #live {
+    flex-flow: column nowrap;
+    height: auto;
+  }
+
+  #live div { min-height: 30vw; }
+  #embedded-video { height: 55.1vw; }
+  #embedded-chat { border-bottom: 1px solid black; }
+
+}
+
+@media screen and (max-width: 1600px) {
+
+  #live {
+    flex-flow: column nowrap;
+    height: auto;
+  }
+
+  #live div { min-height: 30vw; }
+  #embedded-video { height: 46vw; }
+  #embedded-chat {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+
 }

themes/pelican-blue/static/css/style.css

@@ -16,6 +16,7 @@ h1, h2 {
 }
 
 .mobile-menu { display: none; }
+.mobile-only { display: none; }
 
 .title
 {
@@ -246,8 +247,11 @@ td.hours {
     padding-top: 1px;
   }
 
-  .nav
-  {
+  .mobile-only {
+    display: list-item;
+  }
+
+  .nav {
     margin-left: 0;
     margin-right: 0;
   }
@@ -267,7 +271,6 @@ td.hours {
 
   #avatar {
     height: 50px;
-    width: 50px;
     margin: 10px auto;
   }