more startpage styling

assets/css/lustige-styles.css

@@ -5533,31 +5533,48 @@ a.inverted {
   overflow: hidden;
   margin-bottom: 2em; }
   .rooms .room-group h2 {
-    margin: 0.6em 1.2em; }
+    margin: 0.6em 1.2em 0.3em; }
   .rooms .room-group ul {
     list-style-type: none;
     padding: 0 0 5px 0;
     margin: 0 -5px; }
   .rooms .room-group li {
     padding: 5px !important; }
-    .rooms .room-group li .title {
-      font-size: 1.75em;
-      font-weight: bold;
-      padding-bottom: 20px; }
     .rooms .room-group li a {
       background-color: #333333;
       color: white;
       display: block;
+      position: relative;
       width: 100%;
-      padding: 2em;
-      text-align: center; }
+      height: 120px;
+      padding: .5em;
+      text-align: center;
+      font-size: 2.75em; }
       .rooms .room-group li a:hover {
         background-color: #1a1a1a;
         text-decoration: none; }
-.rooms .program-teaser {
+      .rooms .room-group li a .teaser {
+        position: absolute;
+        left: 0;
+        top: 0; }
+      .rooms .room-group li a .title {
+        position: absolute;
+        top: 40px;
+        left: 60px;
+        font-weight: bold;
+        padding-bottom: 20px; }
+      .rooms .room-group li a .program-teaser {
         color: #eeeeee;
-  text-align: center; }
-  .rooms .program-teaser .hidden {
+        text-align: left;
+        position: absolute;
+        left: 230px;
+        font-size: 14px; }
+        .rooms .room-group li a .program-teaser strong {
+          display: block; }
+        .rooms .room-group li a .program-teaser .next-talk {
+          display: block;
+          margin-top: 10px; }
+        .rooms .room-group li a .program-teaser .hidden {
           visibility: hidden; }
 
 .room.lq .player-wrap {

assets/css/src/lustige-styles.scss

@@ -328,7 +328,7 @@ a.inverted {
     margin-bottom: 2em;
 
     h2 {
-      margin: 0.6em 1.2em;
+      margin: 0.6em 1.2em 0.3em;
     }
 
     ul {
@@ -340,36 +340,58 @@ a.inverted {
     li {
       padding: 5px !important;
 
-      .title {
-        font-size: 1.75em;
-        font-weight: bold;
-        padding-bottom: 20px;
-      }
-
       a {
         background-color: $gray-dark;
         color: white;
         display: block;
+        position: relative;
         width: 100%;
-        padding: 2em;
+        height: 120px;
+        padding: .5em;
         text-align: center;
-
+        font-size: 2.75em;
 
         &:hover {
           background-color: #1a1a1a;
           text-decoration: none;
         }
+
+        .teaser {
+          position: absolute;
+          left: 0;
+          top: 0;
         }
-    }
+
+        .title {
+          position: absolute;
+          top: 40px;
+          left: 60px;
+
+          font-weight: bold;
+          padding-bottom: 20px;
         }
 
         .program-teaser {
           color: $gray-lighter;
-    text-align: center;
+          text-align: left;
+          position: absolute;
+          left: 230px;
+          font-size: 14px;
+
+          strong {
+            display: block;
+          }
+          .next-talk {
+            display: block;
+            margin-top: 10px;
+          }
 
           .hidden { visibility: hidden; }
         }
       }
+    }
+  }
+}
 
 .room {
 

assets/img/rooms/.gitignore

@@ -0,0 +1,2 @@
+*.png
+

assets/js/lustiges-script.js

@@ -359,6 +359,7 @@ $(function() {
 
 			});
 
+			var s = new Date(nextTalk.start*1000);
 			$lecture.find('.'+room)
 				.find('.current-talk')
 					.removeClass('hidden')
@@ -368,6 +369,9 @@ $(function() {
 				.end()
 				.find('.next-talk')
 					.toggleClass('hidden', !nextTalk || nextTalk.special || (nextTalk.start - now > 60*60))
+					.find('strong')
+						.text(s.getHours()+':'+(s.getMinutes() < 10 ? '0' : '')+s.getMinutes())
+					.end()
 					.find('.t')
 						.text(nextTalk ? nextTalk.title : '')
 					.end()

template/rooms.phtml

@@ -8,14 +8,15 @@
 
 		<ul class="row">
 			<? foreach(array('saal1', 'saal2', 'saalg', 'saal6') as $room): ?>
-				<li class="<?=h($room)?> col-sm-6">
+				<li class="<?=h($room)?> col-md-6 col-sm-12">
 					<a href="<?=h(link_room($room))?>">
+						<img class="teaser" src="assets/img/rooms/<?=h($room)?>.png" alt="" width="213" height="120" />
 						<div class="title"><?=h($rooms[$room])?></div>
 
 						<div class="program-teaser">
 
 							<span class="current-talk hidden">
-								<strong>Current Talk:</strong>
+								<strong>Now:</strong>
 								<span class="t">none</span>
 							</span>