$home-category-bg: $theme-color-3; $home-category-color: #FFFFFF; //home entries $entry-heading-color: $theme-color-3; $entry-title-color: #FFFFFF; $entry-excerpt-lines: 5; $entry-font-size: 14px; $home-categories-img-ratio: 1 1; // Merge maps $pre-img-ratios: append($pre-img-ratios, $home-categories-img-ratio); .category-homes-view { background-color: $content-bg !important; .category-homes { .item { padding-left: 60px; } .item .thumbnail-outer { position: absolute; left: 10px; width: 40px; height:80px; .thumbnail { width: 100%; height:80px; } } .item .title { font-weight: 500; } .item .description { color: lighten($content-color, 35%); } } } .homes-categories-view { background-color: $content-bg !important; .categories-list { @include flex-wrap(wrap); } .home-category { // THIS IS FUCKING AWESOME: http://caniuse.com/#feat=viewport-units @include calc(height, "50vw - 15px"); box-shadow: 0 1px 3px rgba(darken($home-category-bg, 30%), 0.3); border-radius: 2px; position: relative; display: block; .category-image { width: 100%; height: 100%; border-radius: 2px; } .category-bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.5); background-color: #FF4C4C; } .category-title { color: $home-category-color; position: absolute; top: 2px; left: 8px; font-weight: 500; text-transform: capitalize; } } } .home-entries-view { background-color: $content-bg !important; .entry-heading { padding-top: 8px; padding-bottom: 8px; background-color: darken($entry-heading-color, 10%); border-color: #000; .entry-title { color: $entry-title-color; } .entry-author { font-weight: 500; } } .entry-content { padding-top: 8px; padding-bottom: 0px; .entry-excerpt { overflow: hidden; text-overflow: ellipsis; @include display(flex); @include flex-direction(column); -webkit-line-clamp: $entry-excerpt-lines; /* number of lines to show */ line-height: $entry-font-size + 4; /* fallback */ font-size: $entry-font-size; /* fallback */ max-height: ($entry-font-size + 4) * $entry-excerpt-lines; /* fallback */ * { font-size: inherit !important; } } .entry-actions { padding: 10px 0px; .col { padding:0px; } .actions { .button-icon { min-height: initial; line-height: 28px; padding: 0px; vertical-align: middle; margin-right: 10px; } .button-icon:before { font-size: 28px; line-height: 28px; } } .read-more { .button { margin:0px; } } } } }