room list style & content

1 files changed, 47 insertions, 243 deletions

diff --git a/assets/css/src/lustige-styles.scss b/assets/css/src/lustige-styles.scss
index 6271b16..8ca0ccf 100644
--- a/assets/css/src/lustige-styles.scss
+++ b/assets/css/src/lustige-styles.scss
@@ -266,282 +266,78 @@ a.inverted {
   }
 }
 
-/* promoted videos */
-.promoted {
+/* banner area */
+.banner {
   width: 100%;
   height: 300px;
   overflow: hidden;
   text-align: center;
-  background-image: url('assets/img/promoted_bg.jpg');
-  .carousel.slide {
-    height: 290px;
+  background-image: url('../img/promoted_bg.jpg');
+  position: relative;
+
+  img {
     position: relative;
-    top: -112px;
-  }
-  .carousel-inner {
-    height: 100%;
-  }
-  .item:hover {
-    text-decoration: none;
-  }
-  .item img {
+    z-index: 1;
     height: 190px;
     display: inline-block;
     margin-top: 12px;
     border: 1px solid $transparent-white;
+    background-color: $transparent-white;
   }
+
   .titlebar {
     width: 100%;
     height: 112px;
     background-color: $transparent-white;
-    position: relative;
-    top: 188px;
-  }
-  .carousel-caption {
-    position: relative;
-    top: 0;
-    height: 90px;
-    overflow: hidden;
-    left: initial;
-    right: initial;
-    padding: 0;
-  }
-  .title {
+    position: absolute;
+    line-height: 112px;
+    bottom: 0;
     color: white;
-    margin: 0.7em;
-    margin-bottom: 0;
-  }
-  .subtitle {
-    font-size: 18px;
-    color: $brand-primary;
-    margin: 0 0.8em;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    font-size: 30px;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
   }
 }
 
-/* browse folders and conferences */
-.thumbnail {
-  display: block;
-  float: left;
-  text-align: center;
-  font-size: 16px;
-  min-width: 130px;
-  margin: 5px;
-  height: 135px;
-  
-  .header {
-    text-align: left;
-  }
-  
-  &:hover, &:focus, &:active {
-    text-decoration: none;
-  }
-  
-  &.folder {
-    background-color: $brand-primary;
-    color: white;
-      
-    .header {
-      margin-bottom: $padding-large-vertical;
-    }
-    
-    .fa.fa-folder {
-      font-size: 40px;
-      padding: 10px 0;
-    }
-    
-    &:hover, &:focus, &:active {
-      background-color: $gray-dark;
-    }
-    
-    .caption {
-      color: white;
-    }
-  }
-  
-  &.conference {
-    color: $gray-dark;
-    
-    img {
-      height: 64px;
-      margin: $padding-small-vertical auto;
-    }
-    
-    .caption {
-      color: white;
-      background-color: $gray-dark;
-      -webkit-transition: all 0.2s ease-in-out;
-      -o-transition: all 0.2s ease-in-out;
-      transition: all 0.2s ease-in-out;
-    }
-    
-    &:hover, &:focus, &:active {
-      color: $brand-primary;
-      .caption {
-        background-color: $brand-primary;
-      }
-    }
-  }
-}
-
-/* events overview */
-.event-previews, .event-previews-tags, .event-previews-search {
-  .event-preview {
-    margin: 16px 0;
-    display: block;
-    clear: both;
-    height: 120px;
-    
-    .video-thumbnail {
-      float: left;
-      height: 120px;
-      width: 160px;
-    }
-    
-    &:hover, &:focus, &:active {
-      text-decoration: none;
-      .caption h3 {
-        color: $link-color;
-      }
-      .metadata li {
-        color: $link-color;
-      }
-    }
-    
-    .metadata {
-      text-align: left;
-      border: none;
-      li {
-        padding: $padding-xs-vertical;
-        padding-right: $padding-xs-horizontal;
-        color: $gray-dark;
-        min-width: inherit;
-      }
-    }
-    
-    .caption {
-      margin-left: 160px;
-      padding-left: $padding-large-horizontal;
-      h3 {
-        margin-top: 0;
-        color: black;
-      }
-    }
-  }
-}
-
-.events-header {
-  clear: both;
-  img {
-    float: left;
-    max-height: 40px;
-    margin-right: $padding-small-horizontal;
-  }
-  #sorting {
-    margin: $padding-large-vertical 0;
-    float: right;
-  }
-}
-
-/* event overview for tags */
-.event-previews-tags .event-preview,
-.event-previews-search .event-preview {
-    height: auto;
+.rooms {
+  .room-group {
+    background-color: $gray-dark;
     overflow: hidden;
-    
-    /* search results numbering */
-    h3 .number::after {
-      content: '.';
-    }
-    .conference-logo {
-      float: left;
-      width: 100px;
-      height: auto;
-    }
-    .caption {
-      margin-left: 100px;
-    }
-    
-    .metadata {
-      margin-bottom: 0;
-    }
-}
-
+    margin-bottom: 2em;
 
-.search {
-  h1 {
-    margin-bottom: 10px;
-  }
-  .statistics {
-    margin-top: 15px;
-    display: none;
-    &.visible {
-      display: block;
+    h2 {
+      margin: 0.6em 1.2em;
     }
-  }
-  .paging {
-    display: none;
 
-    clear: both;
-    font-size: 24px;
-    margin: 50px 0 0 80px;
-
-    &.visible {
-      display: block;
+    ul {
+      list-style-type: none;
     }
 
     li {
-      display: block;
-      text-align: center;
-      float: left;
       list-style-type: none;
-      padding: 0 5px;
+      width: 49%;
+      margin-bottom: 1%;
+      height: 3em;
+      float: left;
 
-      a:hover {
-        text-decoration: none;
+      a {
+        color: white;
+        display: block;
+        width: 100%;
+        height: 100%;
+        line-height: 100%;
+        font-size: 1.75em;
+        font-weight: bold;
       }
 
-      &.next, &.prev {
-        display: none;
-        &.visible { display: block; }
-      }
-      &.next { margin-left: 12px; }
-      &.prev { margin-right: 12px; }
-      &.active {
-        background-color: #555;
-        border-radius: 5px;
-        a, a:hover {
-          color: #eee;
-        }
+
+      &:nth-child(2n+1) {
+        margin-right: 1%;
       }
     }
   }
 
-  /* search results listing */
-  ol.event-previews-search {
-    list-style-type: none;
-    &, >li {
-      margin: 0;
-      padding: 0;
-    }
-
-    >li.no-results {
-      margin: 30px 0;
-    }
-  }
 }
 
-/* Font classes - Tags */
-.tag-cloud { margin-top: 1.5em; }
-.tag-cloud .xtiny { font-size: 0.9em; text-decoration:none; }
-.tag-cloud .tiny { font-size: 1.1em; font-weight:lighter; }
-.tag-cloud .normal{ font-size: 1.3em; text-decoration:none; }
-.tag-cloud .large { font-size: 1.5em; text-decoration:none; }
-.tag-cloud .xlarge { font-size: 1.75em; font-weight:bold; }
-
-
 /* and now for medium screens: */
 @media all and (min-width: $screen-sm-min) and (max-width: $container-desktop) {
   
@@ -606,11 +402,12 @@ a.inverted {
   /* promoted videos */
   .promoted {
     height: 230px;
-    .item img {
+    img {
       height: 120px;
+      width: auto;
     }
     .titlebar {
-      top: 118px;
+      //padding-top: 20px;
     }
   }
   
@@ -678,3 +475,10 @@ a.inverted {
     }
   }
 }
+
+
+
+
+
+
+