From 6adc768c6ae3f3589171517e96420b4336904174 Mon Sep 17 00:00:00 2001
From: Christian Wolf <c.wolf@lsr.uni-saarland.de>
Date: Thu, 9 Nov 2017 11:37:05 +0100
Subject: [PATCH] Minor bugs and made side images fixed on viewport

---
 slt/css/desktop.css | 42 ++++++++++++++++++++++++++++++------------
 slt/css/mobile.css  |  4 ++--
 slt/index.php       | 18 ++++++++++++------
 3 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/slt/css/desktop.css b/slt/css/desktop.css
index 439b43c..7a19ca7 100644
--- a/slt/css/desktop.css
+++ b/slt/css/desktop.css
@@ -52,11 +52,7 @@ Structure of page
 	flex-flow: row;
 	width: 100%;
 	min-height: 100vh;
-}
-
-#left_side, #right_side
-{
-	flex: 1 0 auto;
+	justify-content: space-around;
 }
 
 #page 
@@ -128,7 +124,7 @@ body
 #topmenu > .nav {
   padding: 0px;
   margin: 0px;
-  min-height: 40px;
+  height: 40px;
 }
 
 #topmenu .nav > li > a {
@@ -152,16 +148,33 @@ body
   padding: 10px;
 }
 
-#left_side, #right_side
+#page-div
 {
-	padding-top: 35px;
+	margin-top: 40px;
 }
 
 #page {
-  padding-top: 35px;
   width: 1000px;
 }
 
+#left_side-image, #right_side-image
+{
+	position: fixed;
+	height: 100vh;
+	width: calc( (100% - 980px) / 2 );
+	z-index: -10;
+}
+
+#left_side-image
+{
+	left: 0px;
+}
+
+#right_side-image
+{
+	right: 0px;
+}
+
 #left_menu {
   margin: 15px 0px 15px 5px;
 }
@@ -211,15 +224,20 @@ Additional content
 }
 
 #topmenu .nav > li > a,
-#topmenu .nav > li:hover > a {
+#topmenu .nav > li:hover > a,
+#topmenu .nav > li:focus > a
+{
 	background-color: inherit;
 } 
 
-#topmenu > .nav > li > .nav-child > li:hover > a:hover {
+#topmenu > .nav > li > .nav-child > li:hover > a:hover,
+#topmenu > .nav > li > .nav-child > li:focus > a:hover,
+#topmenu > .nav > li > .nav-child > li:hover > a:focus
+{
 	text-decoration: none;
 }
 
-#left_side, #right_side
+#left_side-image, #right_side-image
 {
 	background-repeat: no-repeat;
 	background-size: cover;
diff --git a/slt/css/mobile.css b/slt/css/mobile.css
index 439c182..448c095 100644
--- a/slt/css/mobile.css
+++ b/slt/css/mobile.css
@@ -15,7 +15,7 @@ body {
 
 #page {
     /*box-shadow: 30vw 0px 5vw -10vw green inset;*/
-    flex: 1 1 auto;
+    flex: 1 0 auto;
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -82,7 +82,7 @@ body {
  */
 
 #content {
-    flex: 1 1 auto;
+    flex: 1 0 auto;
 }
 
 #left_menu {
diff --git a/slt/index.php b/slt/index.php
index 734cdc8..b52184b 100644
--- a/slt/index.php
+++ b/slt/index.php
@@ -88,7 +88,9 @@ ul.menu li.current > a
 }
 
 ul.nav > li > a:hover,
-ul.nav-child > li > a:hover
+ul.nav > li > a:focus,
+ul.nav-child > li > a:hover,
+ul.nav-child > li > a:focus
 {
 	background-color: <?php echo $params{'bgcolor2'}; ?>;
 	color: <?php echo $params{'fgcolor2'}; ?>;
@@ -99,7 +101,9 @@ ul.nav-child > li > a:hover
   color: <?php echo $params{'fgcolor1'}; ?>;
 }
 
-#topmenu > .nav > li:hover {
+#topmenu > .nav > li:hover,
+#topmenu > .nav > li:focus
+ {
   background-color: <?php echo $params{'bgcolor2'}; ?>;
   color: <?php echo $params{'fgcolor2'}; ?>;
 }
@@ -109,12 +113,14 @@ ul.nav-child > li > a:hover
   color: <?php echo $params{'fgcolor3'}; ?>;
 }
 
-#topmenu > .nav > li > .nav-child > li:hover > a {
+#topmenu > .nav > li > .nav-child > li:hover > a,
+#topmenu > .nav > li > .nav-child > li:focus > a
+{
   background-color: <?php echo $params{'bgcolor2'}; ?>;
   color: <?php echo $params{'fgcolor2'}; ?>;
 }
 
-#left_side
+#left_side-image
 {
 	background-image: <?php echo $leftImageValue; ?>;
 }
@@ -151,7 +157,7 @@ table.alternating tr:nth-child(even) {
 </div> <!-- #topmenu-div -->
 
 <div id='page-div'>
-	<div id='left_side'></div>
+	<div id='left_side-image'></div>
 	<div id='page'>
 	
 		<div id='header'>
@@ -186,7 +192,7 @@ table.alternating tr:nth-child(even) {
 		</div> <!-- #footer -->
 		
 	</div> <!-- #page -->
-	<div id='right_side'></div>
+	<div id='right_side-image'></div>
 </div> <!-- #page-div -->
 
 </body>