site/assets/sass/app.scss in edge_framework-0.1.0 vs site/assets/sass/app.scss in edge_framework-0.2.0

@@ -1,32 +1,223 @@
 @import "setting";
-@import "edge/helpers";
-// @import "../../../assets/sass/edge/helpers";
+// @import "edge/helpers";
+@import "../../../assets/sass/edge/no-output";
 
+// COLOR
+$hero-bg    : #EFEDDF;
+$feature-bg : #E4E3D5;
 
+.block-hero {
+	position   : relative;
+	background : $hero-bg;
+	overflow   : hidden;
+
+	.logo {
+		position   : relative;
+		top        : 20%;
+		max-height : em(300px);
+
+		@include small {
+			min-height : 0;
+		}
+	}
+
+	.logo-letter,
+	.logo-shape {
+		@extend %transition;
+		opacity : 0.6;
+		&:hover {
+			opacity : 1;
+		}
+	}
+
+	.pitch-intro {
+		padding : em(20px 10px 20px);
+		z-index : 2;
+
+		@include small {
+			padding-top: 0;
+		}
+		
+		h1, h2 {
+			font-family : $body-font-family;
+			font-weight : 300;
+		}
+
+		h1 {
+			font-size     : em(56px);
+			margin-bottom : em(20px, 56px);
+		}
+
+		h2 {
+			font-size     : em(30px);
+			margin-bottom : em(20px, 30px);
+		}
+
+		code {
+			background : white;
+			font-size  : em(20px);
+			padding    : em(5px 10px);
+			border     : 1px solid rgba(black, 0.1);
+			margin-bottom : em(20px, 20px);
+		}
+
+		.hero-button {
+			@include button(#1D7886);
+			text-transform : uppercase;
+			font-size      : em(20px);
+		}
+
+		&.has-logo {
+			background : $hero-bg url('../img/logo/edge-logo-transparent.svg') center right no-repeat;
+			background-size: auto 125%;
+			@include small {
+				background: none;
+			}
+		}
+	}
+
+	.ruby-install {
+		margin-top: 1.29em;
+		@include small {
+			margin-top: 0;
+		}
+	}
+
+	@include small {
+		font-size: 12px;
+
+		background : $hero-bg url('../img/logo/edge-logo-transparent.svg') center right no-repeat;
+		background-size: auto 125%;
+	}
+}
+
+@mixin feature-button($button-color: $main-color) {
+	border-top: 2px solid $button-color;
+	&:hover {
+		background: $button-color;
+	}
+} 
+
+.block-feature {
+	background : $feature-bg;
+	padding    : em(20px 10px 20px);
+	margin-bottom: em(15px);
+	
+	.feature-button {
+		@extend %transition;
+		display  : block;
+		padding  : em(20px 0);
+		color    : inherit;
+		text-align : center;
+		&:hover {
+			color: white;
+		}
+		&:active {
+			@include box-shadow(
+				em( inset 1px 1px 12px rgba(black, 0.1) ),
+				em( inset -1px -1px 12px rgba(black, 0.1) )
+			);
+		}
+	}
+
+	.feature-list {
+		> li {
+			margin-bottom : em(15px);
+
+			&:nth-child(1) {
+				.feature-button {
+					@include feature-button($main-color);
+				}
+			}
+			&:nth-child(2) {
+				.feature-button {
+					@include feature-button($sub-color);
+				}
+			}
+			&:nth-child(3) {
+				.feature-button {
+					@include feature-button($alert-color);
+				}
+			}
+			&:nth-child(4) {
+				.feature-button {
+					@include feature-button($success-color);
+				}
+			}
+		}
+	}
+
+	.feature-item {
+		position         : relative;
+		background-color : white;
+		@include box-shadow(em(0 1px 2px rgba(black, 0.2) ) );
+	}
+	
+	.feature-description,
+	.feature-title {
+		text-align: center;
+	}
+
+	.feature-description {
+		padding: em(0 15px 15px);
+	}
+
+	.feature-title {
+		padding   : em(15px, 25px);
+		font-size : em(25px);
+	}
+}
+
+#footer {
+	background: #3F4944;
+	color: #BBB;
+	padding: em(40px 10px 20px);
+
+	.footer-nav-title {
+		margin-bottom  : em(10px, 18px);
+	}
+
+	.footer-nav {
+		a {
+			padding-bottom: em(8px);
+			color: inherit;
+		}
+	}
+
+	.copyright {
+		text-align: center;
+		padding: em(20px 0);
+	}
+}
+
 .demo-grid {
 	p {
 		text-align : center;
 		margin     : 0;
 	}
 	.column,
 	.columns {
-		margin-bottom  : 15px;
-		padding-top    : 10px;
-		padding-bottom : 10px;
-		background     : #eee;
-		text-align     : center;
+		p {
+			margin-bottom  : em(15px);
+			padding-top    : em(10px);
+			padding-bottom : em(10px);
+			background     : em(#eee);
+			text-align     : center;
+		}
 
 		.column,
 		.columns {
-			background    : #ddd;
-			margin-bottom : 0;
+			p {
+				background    : #ddd;
+			}
 			
 			.column,
 			.columns {
-				background    : #ccc;
-				margin-bottom : 0;
+				p {
+					background    : #ccc;
+				}
 		 	}
 		}
 	}
 }
 
@@ -45,12 +236,6 @@
 .demo-em {
 	@include box-shadow(em(inset 1px 0 1px rgba(black, 0.2) ) );
 	padding : em(10px 15px 25px);
 }
 
-@include sticky-footer(54px, $containerize: true);
-
-@include sprite-retina("icons", "ic");
-
-body {
-	text-shadow: 2px 2px 3px yellow;
-}
+@include sprite-retina("icons", "ic");
\ No newline at end of file