show program teaser on the startpage

1 files changed, 18 insertions, 7 deletions

diff --git a/assets/css/src/lustige-styles.scss b/assets/css/src/lustige-styles.scss
index d32c670..f62aee0 100644
--- a/assets/css/src/lustige-styles.scss
+++ b/assets/css/src/lustige-styles.scss
@@ -290,7 +290,7 @@ a.inverted {
 
 .rooms {
   .room-group {
-    background-color: $gray-dark;
+    background-color: $gray-darker;
     overflow: hidden;
     margin-bottom: 2em;
 
@@ -305,25 +305,29 @@ a.inverted {
     }
 
     li {
+      background-color: $gray-dark;
       list-style-type: none;
-      width: 49%;
+      width: 49.5%;
       &.wide { width: 100%; }
       margin: 0;
       padding: 0;
       margin-top: 1%;
-      height: 6em;
       float: left;
 
+      .title {
+        font-size: 1.75em;
+        font-weight: bold;
+        padding-bottom: 20px;
+      }
+
       a {
         color: white;
         display: block;
         width: 100%;
-        height: 100%;
-        line-height: 3.4em;
-        font-size: 1.75em;
-        font-weight: bold;
+        padding: 2em;
         text-align: center;
 
+
         &:hover {
           background-color: #1a1a1a;
           text-decoration: none;
@@ -336,6 +340,13 @@ a.inverted {
       }
     }
   }
+
+  .program-teaser {
+    color: $gray-lighter;
+    text-align: center;
+
+    .hidden { visibility: hidden; }
+  }
 }
 
 .room {