Layout optimization for narrow screens.

Cleaning and rearranging menu items.

Signed-off-by: E. Liddell <ejlddll@warpmail.net>
Signed-off-by: Slávek Banko <slavek.banko@axis.cz>

1 files changed, 28 insertions, 2 deletions

diff --git a/mainstyle.css b/mainstyle.css
index cef4f30..946044e 100644
--- a/mainstyle.css
+++ b/mainstyle.css
@@ -60,7 +60,7 @@ A:hover     {color:#001c7b;
                 height:125px;
                 width:125px}
 #titlewrap  {position:relative;
-                top:-120px;
+                top:-80px;
                 text-align:left;
                 margin-left:25ex;
                 margin-right:4ex;
@@ -73,7 +73,7 @@ A:hover     {color:#001c7b;
             }
 #title      {position:relative;
                 z-index:6;
-                top:15px;
+                top:-0.5em;
             }
 #sidebar    {background-color:#1f4ca4;
                 width:170px;
@@ -91,6 +91,7 @@ A:hover     {color:#001c7b;
                 background-repeat:repeat-x;
                 background-position:bottom left;
                 }
+#navblock   {display:block}
 .navhead    {font-size:larger;
                 font-weight:bold;
                 font-style:italic;
@@ -162,3 +163,28 @@ A:hover     {color:#001c7b;
                     vertical-align:top}
 .patchtable {width:100%;}
 /*.patchtable TR TD:last-child {width:50%;}*/
+
+
+/*For mobile and other very small screens*/
+@media screen and (max-width: 799px) {
+  BODY {background:white}
+  #intermediate {margin-left:10px}
+  #sidetext {top:0px;width:100%;display:flex;flex-wrap:wrap}
+  #sidebar {position:relative;width:100%;}
+  H1 {font-size: calc(100vw / 22);}
+  #titlenotif {left:195px;width:220px}
+  #titlewrap {margin-left: 170px;}
+  #navblock   {display:inline;margin-right:10px;}
+}
+@media screen and (max-width: 520px) {
+  #navblock   {display:block}
+  #sidetext {display:grid}
+  H1 {font-size: calc(100vw / 20);}
+}
+@media screen and (max-width: 424px) {
+  .snap {height:112px;width:183px}
+  #introsnap {left:-90px}
+  #logo {height:62px;width:62px;top:50px}
+  #titlewrap {margin-left: 12ex;top:-20px}
+  #titlenotif {left:16px;}
+}