Add documentation and fixes for sidenav-fixed usage.

app/static/css/opaque.css

+/*
+ * ### Start sticky footer ###
+ * Force the footer to always stay on the bottom of the page regardless of how
+ * little content is on the page.
+*/
 body {
   display: flex;
   min-height: 100vh;
@@ -7,3 +12,24 @@ body {
 main {
   flex: 1 0 auto;
 }
+/* ### End sticky footer ### */
+
+
+/*
+ * ### Start sidenav-fixed offset ###
+ * The sidenav-fixed class is used which causes the sidenav to be fixed and open
+ * on large screens and hides to the regular functionality on smaller screens.
+ * In order to prevent the sidenav to overlap the content, the content (in our
+ * case header, main and footer) gets an offset equal to the width of the
+ * sidenav.
+*/
+header, main, footer {
+  padding-left: 300px;
+}
+
+@media only screen and (max-width : 992px) {
+  header, main, footer {
+    padding-left: 0;
+  }
+}
+/* ### End sidenav-fixed offset ### */