Aggiunto layout home

2016-01-29 19:10:26 +01:00 · 2016-01-29 19:10:26 +01:00 · 314cefdc70
commit 314cefdc70
parent 48d68db6b0
19 changed files with 705 additions and 26 deletions
--- a/hackatonApp/scss/home-items.scss
+++ b/hackatonApp/scss/home-items.scss
@ -0,0 +1,179 @@
+$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;
+
+			.thumbnail
+			{
+				width: 100%;
+			}
+		}
+
+		.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;
+				}
+			}
+		}
+	}
+}