Added templates for demo

meteor/meteor-1/sass/_mixins.scss

@@ -0,0 +1,188 @@
+@import "./variables";
+
+// clearfix
+@mixin clearfix {
+	&:before,
+	&:after {
+		content: " "; 
+		display: table;
+	}
+	
+	&:after{
+		clear: both;
+	}
+}
+// typo graphy
+@mixin condensed {
+	font-family: $condensed;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+@mixin marked {
+	background: $white;
+	color: $black;
+	padding-left: 0.3em;
+	padding-right: 0.3em;
+	font-weight: bold;
+}
+
+@mixin fullsize{
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+@mixin circ-button($color:#fff){
+	display: table-cell;
+	vertical-align: middle;
+	width: 40px;
+	height: 40px;
+	text-align: center;
+	line-height: 1;
+	font-size: 18px;
+	position: relative;
+	color: $color;
+	border-radius: 40px;
+	transition: 0.3s;
+	background: transparentize($color,0.9);
+	&:before{
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: -1;
+		content: "";
+		border-radius: 40px;
+		border: 2px solid $color;
+		border-color: $color;
+		border-top-color: transparent;
+		transform: rotate(45deg);
+		transition: 0.3s;
+	}
+	&:hover{
+		opacity: 0.8;
+		color: $color;
+		&:before{
+			transform: rotate(-135deg);
+		}
+	}
+}
+
+@mixin magic-button($color, $hoverColor, $width:1px) {
+	//padding-top: 2px;
+	padding-right: 14px;
+	padding-left: 16px;
+	height: 40px;
+	font-size: 14px;
+	//font-family: $sans;
+	color: $color;
+	text-transform: uppercase;
+	position: relative;
+	transition: 0.1s;
+	&:before,
+	&:after{
+		content: "";
+		//background: $color;
+		background: currentColor;
+		width: $width;
+		position: absolute;
+		transition: 0.3s;
+	}
+	&:before{
+		top: 0;
+		left: 0;
+		height: 00%;
+	}
+	&:after{
+		bottom: 0;
+		right: 0;
+		height: 00%;
+	}
+	.txt{
+		&:before,
+		&:after{
+			content: "";
+			//background: $color;
+			background: currentColor;
+			height: $width;
+			position: absolute;
+			transition: 0.3s;
+		}
+		&:before{
+			top: 0;
+			right: 0;
+			width: 00%;
+		}
+		&:after{
+			bottom: 0;
+			left: 0;
+			width: 00%;
+		}
+	}
+	.arrow-icon{
+		content: "";
+		position: absolute;
+		top: (20px - $width/2);
+//		top: 20px;
+		right: -8px;
+		width: 0px;
+		height: $width;
+		//background: $color;
+		background: currentColor;
+		transition: 0.3s;
+		&:after,
+		&:before{
+			content: "";
+			position: absolute;
+//			top: (-4px + $width/2);
+			top: -4px + 0.5*$width;
+			right: 8px;
+			width: 8px;
+			height: 8px;
+//							border: 1px solid $black;
+//							border-left: none;
+//							border-top: none;
+			transform: rotate(-45deg);
+			transform-origin: center;
+			transition: 0.3s;
+		}
+		&:after{
+			//border-top: $width solid $color;
+			border-top: $width solid currentColor;
+			transform: rotate(45deg);
+		}
+		&:before{
+			//border-bottom: $width solid $color;
+			border-bottom: $width solid currentColor;
+			transform: rotate(-45deg);
+		}
+	}
+
+	&:hover{
+		//color: $color;
+		color: $hoverColor;
+		&:after,
+		&:before{
+			height: 100%;
+		}
+		.txt{
+			&:after,
+			&:before{
+				width: 100%;
+			}
+		}
+		.arrow-icon{
+			width: 16px;
+			&:after{
+				transform: rotate(45deg);
+				right: -8px;
+			}
+			&:before{
+				transform: rotate(-45deg);;
+				right: -8px;
+			}
+		}
+	}
+}

meteor/meteor-1/sass/style-color1.scss

@@ -0,0 +1,28 @@
+@import "./mixins";
+
+/* Alternative colors */
+$color1 : #e91e63;
+// $color1 : rgba(0,0,0,0.5);
+$color2 : #0081D5;
+$black : #2a2a2a;
+
+.section.item-home{
+	background: url("../img/items/img-sample1.jpg");
+	background-size: cover;
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-position: center center;
+	position: relative;
+	// IE 11 hack
+	@media screen and (min-width:0\0) {
+		background-attachment: initial;
+	}
+	.section-bg{
+		&:before{
+			content: '';
+			position: absolute;
+			@include fullsize;
+			background: transparentize( $color1, 0.5);
+		}
+	}
+}