From 3d0fb271470be6c2357bb47520c41c67044e3067 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Fri, 5 Jul 2019 11:02:24 +0200
Subject: [PATCH] Add documentation and fixes for sidenav-fixed usage.

---
 app/static/css/opaque.css | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/app/static/css/opaque.css b/app/static/css/opaque.css
index c94ab517..1e976351 100644
--- a/app/static/css/opaque.css
+++ b/app/static/css/opaque.css
@@ -1,3 +1,8 @@
+/*
+ * ### 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 ### */