Use rem values from mockup

Hide toc with theme switcher

Add x overflow for code blocks (code blocks will)
scroll horizontally instead of overflowing outside
it's block

Author: nginx-jack

assets/css/v2/style.css

@@ -77,8 +77,8 @@ nav {
 
 /* content */
 main {
-    max-width: 40rem;
-    min-width: 30rem;
+    max-width: 50rem;
+    min-width: 40rem;
     margin: 2rem 2rem;
 }
 
@@ -164,6 +164,11 @@ code {
     font-family: 'JetBrains Mono', monospace;
 }
 
+pre.chroma {
+    overflow-x: auto;
+    box-sizing: border-box;
+}
+
 /* FILTHY HACKS BEGIN */
 
 /* Override logo with black text version */

assets/js/theme-switcher.js

@@ -29,7 +29,7 @@ function useNewTheme(useNewTheme) {
   });
 
   // swap out v1 and v2 elements
-  const v1ElementIds = ["sidebar"]
+  const v1ElementIds = ["sidebar", "toc"]
 
   v1ElementIds.forEach((elementId) => {
     document.getElementById(elementId).style.display = useNewTheme ? "none" : "";

layouts/_default/docs.html

@@ -37,7 +37,7 @@ <h1>{{ .Title }}</h1>
   </main>
   {{ if and (gt .WordCount 200 ) (.Params.toc) }}
     {{ if (add  (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
-      <div class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
+      <div id="toc" class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
       {{ partial "toc.html" . }}
       </div>
     {{ end }}