Docs: No menu on mobile

Author: simzer

docs/content/tutorial/0-intro.md

@@ -16,7 +16,8 @@ Import the library into a JavaScript file or script tag in your web page
 
 ```html
 <script type="module">
-import Vizzu from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js';
+import Vizzu from 
+  'https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js';
 </script>
 ```
 

docs/generator/index.in.html

@@ -31,14 +31,16 @@
 	<div class="container">
 
 		<div id="toc-view">
-			<div>
+			<div id="logo-header">
 				<img class='logo' id='logo-vizzu' src='images/logo-white.svg' width='110' />
-				<a href='https://github.com/vizzuhq/vizzu-lib'>
-					<img class='logo' id='logo-github' src='images/github-logo.svg' width='30' height='30' />
-				</a>
-				<a href='https://join.slack.com/t/vizzu-community/shared_invite/zt-w2nqhq44-2CCWL4o7qn2Ns1EFSf9kEg'>
-					<img class='logo' id='logo-slack' src='images/slack-logo.svg' width='30' height='30' />
-				</a>
+				<div id="logos">
+					<a href='https://github.com/vizzuhq/vizzu-lib'>
+						<img class='logo' id='logo-github' src='images/github-logo.svg' width='30' height='30' />
+					</a>
+					<a href='https://join.slack.com/t/vizzu-community/shared_invite/zt-w2nqhq44-2CCWL4o7qn2Ns1EFSf9kEg'>
+						<img class='logo' id='logo-slack' src='images/slack-logo.svg' width='30' height='30' />
+					</a>
+				</div>
 			</div>
 			<ul id='table-of-contents' class='menu'>
 				<li class="menuitem" id="menuitem-0">TUTORIAL

docs/style/examples.css

@@ -13,6 +13,7 @@
 	top: 0px;
 	padding-bottom: 10px;
 	filter: drop-shadow(0 4px 4px #fafafa);
+	z-index: 100;
 }
 
 #examples-title {

docs/style/layout.css

@@ -1,7 +1,7 @@
 .container {
 	display: grid;
 	height: 100vh;
-	grid-template-columns: 300px 1fr;
+	grid-template-columns: minmax(200px,1fr) 5fr;
 	grid-template-rows: 1fr;
 	gap: 0px 0px;
 	grid-auto-flow: row;
@@ -13,3 +13,19 @@
 #content-view {
 	grid-area: content-view;
 }
+
+@media screen and (max-width: 700px) {
+
+.container {
+	display: grid;
+	height: 100vh;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr;
+	gap: 0px;
+	grid-auto-flow: row;
+	grid-template-areas: "content-view";
+}
+
+#toc-view { display: none; }
+
+}

docs/style/main.css

@@ -12,14 +12,6 @@ body {
 	line-height: 1.5em;
 }
 
-#logo-vizzu {
-	padding-right: 15px;
-}
-
-.logo {
-	outline: none;
-}
-
 .subtitle {
 	padding-top: 2em;
 	padding-left: 1.2em;

docs/style/menu.css

@@ -2,11 +2,23 @@
 	overflow-y: auto;
 	background-color: #333;
 	padding: 15px 30px 15px;
-	padding-left: 50px;
+	padding-left: calc(50% - 100px);
+}
+
+.logo {
+	padding-left: 4px;
+	padding-bottom: 5px;
+	outline: none;
+}
+
+#logos {
+	padding-left: 11px;
+	white-space: nowrap;
+	display: inline-block;
 }
 
 #table-of-contents {
-	padding-top: 15px;
+	padding-top: 10px;
 	padding-inline-start: 0px;
 }