First Commit

hackatonApp/scss/feed/category-feeds.styles.scss

@@ -0,0 +1,34 @@
+.category-feeds-view
+{
+	background-color: $content-bg !important;
+
+	.category-feeds
+	{
+		.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%);
+		}
+	}
+}

hackatonApp/scss/feed/feed-entries.styles.scss

@@ -0,0 +1,81 @@
+.feed-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;
+				}
+			}
+		}
+	}
+}

hackatonApp/scss/feed/feed.variables.scss

@@ -0,0 +1,14 @@
+$feed-category-bg: $theme-color-3;
+$feed-category-color: #FFFFFF;
+
+//Feed entries
+$entry-heading-color: $theme-color-3;
+$entry-title-color: #FFFFFF;
+
+$entry-excerpt-lines: 5;
+$entry-font-size: 14px;
+
+$feed-categories-img-ratio: 1 1;
+
+// Merge maps
+$pre-img-ratios: append($pre-img-ratios, $feed-categories-img-ratio);

hackatonApp/scss/feed/feeds-categories.styles.scss

@@ -0,0 +1,46 @@
+.feeds-categories-view
+{
+	background-color: $content-bg !important;
+
+	.categories-list
+	{
+		@include flex-wrap(wrap);
+	}
+
+	.feed-category
+	{
+		// THIS IS FUCKING AWESOME: http://caniuse.com/#feat=viewport-units
+		@include calc(height, "50vw - 15px");
+		box-shadow: 0 1px 3px rgba(darken($feed-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%;
+			background: linear-gradient(rgba(darken($feed-category-bg, 80%), .85), rgba(darken($feed-category-bg, 10%), .3) 40%, rgba($feed-category-bg, .3) 60%, rgba(lighten($feed-category-bg, 10%), .3));
+		}
+
+		.category-title
+		{
+			color: $feed-category-color;
+			position: absolute;
+			top: 2px;
+			left: 8px;
+			font-weight: 500;
+			text-transform: capitalize;
+		}
+	}
+}