Updated website table of contents styles (#1681)

The TOC will now be located at the bottom left and be more friendly to smaller screens.

Author: lukasoppermann

faq.html

@@ -13,7 +13,7 @@
 	position: static;
 	max-width: 900px;
 	font-size: 100%;
-	opacity: 1;
+	color: black;
 }
 </style>
 <script src="prefixfree.min.js"></script>
@@ -179,4 +179,4 @@ <h1>How can I use different highlighting for tokens with the same name in differ
 <script src="code.js"></script>
 
 </body>
-</html>
+</html>

style.css

@@ -332,10 +332,15 @@ footer {
 
 #toc {
 	position: fixed;
-	left: 1%;
-	max-width: calc(48% - 450px);
+	bottom: 15px;
+	max-width: calc(50% - 450px - 40px);
 	font-size: 80%;
-	opacity: .3;
+    z-index: 999;
+    background: white;
+    color: rgba(0,0,0,.5);
+    padding: 0 10px 10px;
+	border-radius: 0 3px 3px 0;
+	box-sizing: border-box;
 }
 
 @media (max-width: 1200px) {
@@ -345,11 +350,12 @@ footer {
 }
 
 #toc:hover {
-	opacity: 1;
+    color: rgba(0,0,0,1);
 }
 
 	#toc h1 {
 		font-size: 180%;
+		margin-top: .75rem;
 	}
 
 	#toc li {